Fix style gaps in dark mode + sidebar updates (#208)

src/components/ActionButton.tsx

@@ -21,7 +21,7 @@ export const ActionButton = ({
   Element = 'button',
   children,
 }: ActionButtonProps) => {
-  const classNames = `group mono text-base flex items-center gap-2 rounded-sm border border-chalkboard-40 dark:border-chalkboard-60 hover:border-liquid-40 p-[3px] ${
+  const classNames = `group mono text-base flex items-center gap-2 rounded-sm border border-chalkboard-40 dark:border-chalkboard-60 hover:border-liquid-40 dark:hover:bg-chalkboard-90 p-[3px] ${
     icon ? 'pr-2' : 'px-2'
   } ${className}`
 

src/components/UserSidebarMenu.tsx

@@ -14,8 +14,8 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
   return (
     <Popover className="relative">
       {user?.image ? (
-        <Popover.Button>
-          <div className="rounded-full border border-chalkboard-70 hover:border-liquid-50 overflow-hidden">
+        <Popover.Button className="border-0 rounded-full w-fit p-0">
+          <div className="rounded-full border border-chalkboard-70/50 hover:border-liquid-50 overflow-hidden">
             <img
               src={user?.image || ''}
               alt={user?.name || ''}
@@ -35,7 +35,7 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
       )}
       <Popover.Overlay className="fixed z-20 inset-0 bg-chalkboard-110/50" />
 
-      <Popover.Panel className="fixed inset-0 left-auto z-30 w-64 bg-chalkboard-10 border border-liquid-100 shadow-md rounded-l-lg">
+      <Popover.Panel className="fixed inset-0 left-auto z-30 w-64 bg-chalkboard-10 dark:bg-chalkboard-100 border border-liquid-100 shadow-md rounded-l-lg">
         {user && (
           <div className="flex items-center gap-4 px-4 py-3 bg-liquid-100">
             <div className="rounded-full shadow-inner overflow-hidden">
@@ -64,7 +64,7 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
             Element="link"
             icon={{ icon: faGear }}
             to="/settings"
-            className="border-transparent"
+            className="border-transparent dark:border-transparent dark:hover:border-liquid-60"
           >
             Settings
           </ActionButton>
@@ -80,7 +80,7 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
               iconClassName:
                 'text-destroy-20 group-hover:text-destroy-10 hover:text-destroy-10',
             }}
-            className="border-transparent hover:border-destroy-40"
+            className="border-transparent dark:border-transparent hover:border-destroy-40 dark:hover:border-destroy-60"
           >
             Sign out
           </ActionButton>

src/index.css

@@ -20,13 +20,17 @@ body.dark {
 }
 
 button {
-  @apply border m-0.5 px-3 rounded text-xs;
+  @apply border border-chalkboard-100 m-0.5 px-3 rounded text-xs;
 }
 
 .dark button {
   @apply border-chalkboard-20 hover:border-chalkboard-10 hover:bg-chalkboard-90;
 }
 
+button:disabled {
+  @apply bg-chalkboard-20 text-chalkboard-60 border-chalkboard-20;
+}
+
 .dark button:disabled {
   @apply bg-chalkboard-90 text-chalkboard-40 border-chalkboard-70;
 }

src/routes/SignIn.tsx

@@ -22,7 +22,7 @@ const SignIn = () => {
   }
 
   return (
-    <main className="h-full min-h-screen bg-chalkboard-20 m-0 p-0 pt-24">
+    <main className="h-full min-h-screen bg-chalkboard-20 dark:text-chalkboard-100 m-0 p-0 pt-24">
       <div className="max-w-2xl mx-auto">
         <div>
           <img
@@ -73,7 +73,7 @@ const SignIn = () => {
                 window.location.href.replace('signin', '')
             )}`}
             icon={{ icon: faSignInAlt }}
-            className="w-fit mt-4"
+            className="w-fit mt-4 dark:hover:bg-chalkboard-30"
           >
             Sign in
           </ActionButton>