improve layout + user handling + navlinks

slidr-app · Jun 13, 2023 · 8fda07e · 8fda07e
1 parent 14b3a24
commit 8fda07e
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 32 deletions.
diff --git a/src/components/NoteEditor.tsx b/src/components/NoteEditor.tsx
@@ -32,15 +32,13 @@ export default function NoteEditor({
   return (
     <>
       <div className="relative not-first:mt-8">
-        <div className="grid grid-cols-[repeat(auto-fill,_12rem)] lt-sm:grid-cols-2">
+        <div className="grid grid-cols-4 lt-sm:grid-cols-2">
           {pageIndices.map((pageIndex, indicesIndex) => (
             <img
-              key={pageIndex}
+              key={pages[pageIndex]}
               className={clsx(
-                'aspect-video',
-                indicesIndex === 0
-                  ? 'grid-col-span-2 grid-row-span-2 w-24rem lt-sm:w-full'
-                  : 'w-12rem lt-sm:w-full',
+                'aspect-video w-full',
+                indicesIndex === 0 && 'grid-col-span-2 grid-row-span-2',
               )}
               src={pages[pageIndex]}
             />

diff --git a/src/components/UserProvider.tsx b/src/components/UserProvider.tsx
@@ -1,4 +1,10 @@
-import {useState, type PropsWithChildren, useMemo, createContext} from 'react';
+import {
+  useState,
+  type PropsWithChildren,
+  useMemo,
+  createContext,
+  useCallback,
+} from 'react';
 
 export type User = {
   email?: string;
@@ -16,7 +22,24 @@ export const UserContext = createContext<{
 
 export function UserProvider({children}: PropsWithChildren) {
   const [user, setUser] = useState<User>();
-  const userContext = useMemo(() => ({user, setUser}), [user]);
+
+  const updateUser = useCallback(
+    (newUser: User | undefined) => {
+      // Don't update if nothing has changed to avoid rerenders
+      if (user?.email === newUser?.email && user?.uid === newUser?.uid) {
+        console.log('user update skip');
+        return;
+      }
+
+      console.log('updating user');
+      setUser(newUser);
+    },
+    [user],
+  );
+  const userContext = useMemo(
+    () => ({user, setUser: updateUser}),
+    [user, updateUser],
+  );
   return (
     <UserContext.Provider value={userContext}>{children}</UserContext.Provider>
   );

diff --git a/src/index.css b/src/index.css
@@ -1,5 +1,5 @@
 body {
-  --uno: m-0 bg-black text-white font-sans text-xl tracking-tight;
+  --uno: m-0 bg-black text-white font-sans text-xl tracking-normal;
 }
 
 /*

diff --git a/src/layouts/DefaultLayout.tsx b/src/layouts/DefaultLayout.tsx
@@ -33,29 +33,41 @@ export default function DefaultLayout({
   return (
     <div className="flex flex-col min-h-screen">
       <div className="header flex flex-row mx-4 px-4 mb-6 lt-sm:(grid grid-cols-2 gap-y-2 px-2)">
-        <div className="row-start-1 col-start-1 flex flex-row justify-start items-center relative gap-4">
-          <div className="overflow-hidden flex flex-col justify-center pb-1">
+        <div className="row-start-1 col-start-1 flex flex-row justify-start items-center relative gap-4 pt-2 mb--2">
+          <NavLink
+            to="/"
+            className={({isActive}) =>
+              clsx('flex', isActive && 'all-[div]:nav-active')
+            }
+          >
+            <button
+              className="hover:children:(nav-active) overflow-hidden pb-2"
+              type="button"
+              title="Speaker view"
+            >
+              <div className="flex flex-col items-center nav-inactive">
+                Slidr
+              </div>
+            </button>
+          </NavLink>
+          {user && (
             <NavLink
               end
+              to="/upload"
               className={({isActive}) =>
-                clsx('hover:nav-active bg-black', isActive && 'nav-active')
+                clsx('flex', isActive && 'all-[div]:nav-active')
               }
-              to="/"
             >
-              Slidr
-            </NavLink>
-          </div>
-          {user && (
-            <div className="overflow-hidden flex flex-col justify-center pb-1">
-              <NavLink
-                className={({isActive}) =>
-                  clsx('hover:nav-active bg-black', isActive && 'nav-active')
-                }
-                to="/upload"
+              <button
+                className="hover:children:(nav-active) overflow-hidden pb-2"
+                type="button"
+                title="Speaker view"
               >
-                upload
-              </NavLink>
-            </div>
+                <div className="flex flex-col items-center nav-inactive">
+                  Upload
+                </div>
+              </button>
+            </NavLink>
           )}
         </div>
         <div className="row-start-1 flex flex-grow flex-shrink" />
@@ -86,7 +98,7 @@ export default function DefaultLayout({
               </button>
               <div
                 className={clsx(
-                  'absolute flex-col right-0 p-4 bg-gray-900 bg-opacity-85 border-primary shadow-primary z-1 mr-4',
+                  'absolute flex-col right-0 p-4 pb-2 bg-gray-900 bg-opacity-85 border-primary shadow-primary z-1 mr-4',
                   showUserMenu ? 'flex' : 'display-none',
                 )}
               >

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -42,7 +42,7 @@ export default function Home() {
         </>
       }
     >
-      <div className="grid grid-cols-2 lt-sm:grid-cols-1 max-w-screen-lg w-full mx-auto gap-8 px-4 justify-center">
+      <div className="grid grid-cols-2 lt-sm:grid-cols-1 max-w-screen-lg w-full mx-auto gap-8 px-4 justify-center pb-6">
         {presentations?.map((presentation) => (
           <div
             key={presentation.id}

diff --git a/src/pages/Upload.tsx b/src/pages/Upload.tsx
@@ -287,7 +287,7 @@ export default function Export() {
               className="btn rounded-md p-8 flex w-full max-w-screen-sm aspect-video gap-4 cursor-pointer mx-6"
               {...getRootProps()}
             >
-              <label className="flex flex-col items-center justify-center w-full">
+              <label className="flex flex-col items-center justify-center w-full cursor-pointer">
                 {isDragActive ? (
                   <>
                     <div className="i-tabler-arrow-big-down-lines text-6xl animate-bounce animate-duration-500 text-teal-500" />

diff --git a/uno.config.ts b/uno.config.ts
@@ -52,7 +52,7 @@ export default defineConfig({
           // },
           {
             name: 'Saira',
-            weights: ['400', '600'],
+            weights: ['400', '500'],
           },
           // I like Abel, but it is only 400 weight and the bold is ugly on safari.
           // {
@@ -82,12 +82,13 @@ export default defineConfig({
     'border-focus': 'rounded-md border-2 border-violet-700',
     'shadow-focus': 'shadow-xl shadow-violet-700',
     'outline-focus': 'outline outline-2 outline-gray-200',
-    btn: 'py-2 px-4 font-semibold shadow-primary  border-primary bg-black',
+    btn: 'py-2 px-4 font-medium shadow-primary  border-primary bg-black',
     input:
       'p-2 shadow-primary border-primary bg-gray-900 text-white focus-visible:(border-focus outline-focus shadow-focus)',
     header:
-      'text-2xl border-primary border-t-none rounded-t-none shadow-primary text-center py-2 font-semibold',
+      'text-2xl border-primary border-t-none rounded-t-none shadow-primary text-center py-2 font-medium',
     'nav-active': 'border-b-2 border-teal shadow-md shadow-teal-800',
+    'nav-inactive': 'border-b-2 border-black shadow-none',
   },
   // https://github.com/unocss/unocss/discussions/2012
   theme: {