Better mobile styles

tireymorris · Dec 13, 2023 · 4c551eb · 4c551eb
1 parent 0883441
commit 4c551eb
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 17 deletions.
diff --git a/public/styles/uno.css b/public/styles/uno.css
@@ -41,7 +41,6 @@
 .w-40{width:10rem;}
 .w-5\/6{width:83.3333333333%;}
 .w-80{width:20rem;}
-.w-96{width:24rem;}
 .w-full{width:100%;}
 .hover\:w-56:hover{width:14rem;}
 .flex{display:flex;}
@@ -54,7 +53,6 @@
 .justify-start\!{justify-content:flex-start !important;}
 .justify-center{justify-content:center;}
 .justify-between{justify-content:space-between;}
-.gap-16{gap:4rem;}
 .gap-3{gap:0.75rem;}
 .gap-4{gap:1rem;}
 .gap-8{gap:2rem;}
@@ -70,6 +68,7 @@
 .bg-blue-100{--un-bg-opacity:1;background-color:rgb(219 234 254 / var(--un-bg-opacity));}
 .bg-gray-100{--un-bg-opacity:1;background-color:rgb(243 244 246 / var(--un-bg-opacity));}
 .bg-red-400{--un-bg-opacity:1;background-color:rgb(248 113 113 / var(--un-bg-opacity));}
+.bg-slate-200{--un-bg-opacity:1;background-color:rgb(226 232 240 / var(--un-bg-opacity));}
 .bg-slate-700{--un-bg-opacity:1;background-color:rgb(51 65 85 / var(--un-bg-opacity));}
 .bg-slate-800{--un-bg-opacity:1;background-color:rgb(30 41 59 / var(--un-bg-opacity));}
 .bg-transparent{background-color:transparent;}
@@ -87,13 +86,11 @@
 .py-3{padding-top:0.75rem;padding-bottom:0.75rem;}
 .py-4{padding-top:1rem;padding-bottom:1rem;}
 .pl-0\.5{padding-left:0.125rem;}
-.pl-10{padding-left:2.5rem;}
 .pl-20{padding-left:5rem;}
 .pl-3{padding-left:0.75rem;}
 .pl-5{padding-left:1.25rem;}
 .pl-6{padding-left:1.5rem;}
 .pr-10{padding-right:2.5rem;}
-.pr-4{padding-right:1rem;}
 .text-left{text-align:left;}
 .text-base{font-size:1rem;line-height:1.5rem;}
 .text-sm{font-size:0.875rem;line-height:1.25rem;}
@@ -123,6 +120,9 @@
 @media (min-width: 768px){
 .md\:block{display:block;}
 .md\:w-56{width:14rem;}
+.md\:w-96{width:24rem;}
+.md\:flex-row{flex-direction:row;}
 .md\:pl-60{padding-left:15rem;}
+.md\:pr-10{padding-right:2.5rem;}
 .md\:opacity-100{opacity:1;}
 }
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
@@ -3,7 +3,7 @@ export default function Input({ class: className, placeholder, ...rest }) {
     <input
       type="text"
       placeholder={placeholder || "..."}
-      class={`focus:border-blue-200 border-gray-2 h-8 rounded-md border border-solid bg-transparent py-1 pl-3 pr-10 text-sm text-neutral-500 ${
+      class={`border-gray-2 h-8 rounded-md border border-solid bg-transparent py-1 pl-3 pr-10 text-sm text-neutral-500 focus:border-blue-200 ${
         className || ""
       }`}
       autocomplete="off"

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -27,14 +27,14 @@ export default function Layout({ title, children, currentPath }: Props) {
 
       <style>{`* { box-sizing: border-box; margin: 0; outline: none; color: unset; }`}</style>
 
-      <body class="bg-gray-100 font-lato m-0 text-base">
-        <header class="border-b-solid border-b-1 fixed sticky flex w-full gap-16 border-slate-200 bg-white py-3 pl-10 pr-4 leading-5">
+      <body class="font-lato m-0 bg-gray-100 text-base">
+        <header class="border-b-solid border-b-1 fixed sticky flex w-full gap-4 border-slate-200 bg-slate-200 py-3 px-4 leading-5">
           <a href="/" class="no-underline">
             <h1>hyperwave 🌊</h1>
           </a>
           <div class="relative hidden md:block">
             <Input
-              class="w-80"
+              class="w-80 bg-white"
               placeholder="Search clients, trips, groups, or invoices..."
             />
             <span class="relative right-8 top-0.5 fill-neutral-500">
@@ -45,7 +45,7 @@ export default function Layout({ title, children, currentPath }: Props) {
 
         <Nav currentPath={currentPath} />
 
-        <main class="m-auto flex flex-col justify-center gap-8 px-10 py-4 pl-20 md:pl-60">
+        <main class="m-auto flex flex-col justify-center gap-8 py-4 pl-20 md:pl-60 md:pr-10">
           {children}
         </main>
       </body>

diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
@@ -4,7 +4,7 @@ import { routes } from "../routes";
 
 export default function Nav({ currentPath }: { currentPath: string }) {
   return (
-    <aside class="bg-slate-800 transition-width group fixed top-14 block h-full w-16 leading-5 duration-200 hover:w-56 md:w-56">
+    <aside class="transition-width group fixed top-14 block h-full w-16 bg-slate-800 leading-5 duration-200 hover:w-56 md:w-56">
       <nav>
         <ul class="m-0 flex w-full flex-col items-center p-0">
           <PinkButton class="items-start! justify-start! my-4 w-5/6 pl-5">

diff --git a/src/components/NavItem.tsx b/src/components/NavItem.tsx
@@ -8,7 +8,7 @@ type NavItemProps = {
 export default function NavItem({ currentPath, route }: NavItemProps) {
   return (
     <li
-      class={`hover:bg-slate-700 text-slate-400 m-0 w-full list-none pl-6 hover:text-white ${
+      class={`m-0 w-full list-none pl-6 text-slate-400 hover:bg-slate-700 hover:text-white ${
         currentPath === route.link && "bg-slate-700 text-white"
       }`}
     >

diff --git a/src/components/PinkButton.tsx b/src/components/PinkButton.tsx
@@ -11,7 +11,7 @@ export default function PinkButton({
 }: Props) {
   return (
     <button
-      class={`bg-red-400 hover:bg-red-400 text-red-100 flex cursor-pointer items-center justify-center gap-3 rounded-md border-none px-4 py-2 text-base font-bold shadow-md hover:text-white ${className}`}
+      class={`flex cursor-pointer items-center justify-center gap-3 rounded-md border-none bg-red-400 px-4 py-2 text-base font-bold text-red-100 shadow-md hover:bg-red-400 hover:text-white ${className}`}
       {...rest}
     >
       {children}

diff --git a/src/routes/editUserInfo.tsx b/src/routes/editUserInfo.tsx
@@ -21,18 +21,18 @@ app.get("/", async ({ html }) => {
 
   return html(
     <section class="flex flex-col gap-4">
-      <div class="text-md bg-blue-100 self-start rounded-md px-10 py-2 shadow-sm">
+      <div class="text-md self-start rounded-md bg-blue-100 px-10 py-2 shadow-sm">
         <p>Hi, {me.first_name}!</p>
         <p>Email: {me.email}</p>
       </div>
 
       <h3>Change Info</h3>
       <form
-        class="bg-palette-section text-palette-textBody flex w-96 flex-col gap-4 p-4 shadow-md"
+        class="bg-palette-section text-palette-textBody flex w-full flex-col gap-4 p-4 shadow-md md:w-96"
         hx-post={`/editUser/${me.email}`}
         hx-target="closest section"
       >
-        <div class="flex justify-between">
+        <div class="flex flex-col justify-between md:flex-row">
           <label>Email Address</label>
           <Input
             class="bg-palette-highlight! sm:ml-4"
@@ -41,7 +41,7 @@ app.get("/", async ({ html }) => {
             name="email"
           />
         </div>
-        <div class="flex justify-between">
+        <div class="flex flex-col justify-between md:flex-row">
           <label>First Name</label>
           <Input
             class="bg-palette-highlight! sm:ml-4"
@@ -50,7 +50,7 @@ app.get("/", async ({ html }) => {
             name="firstName"
           />
         </div>
-        <div class="flex justify-between">
+        <div class="flex flex-col justify-between md:flex-row">
           <label>Last Name</label>
           <Input
             class="bg-palette-highlight! sm:ml-4"