Login modal dark (#263)

* Dark background and light text for auth modal * dark text-gray-400 -> 300 For better contrast (gray-400 was far too dark)
kscalelabs · Aug 6, 2024 · f9684f5 · f9684f5
1 parent 8e5ac8c
commit f9684f5
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 5 deletions.
diff --git a/frontend/src/components/auth/AuthBlock.tsx b/frontend/src/components/auth/AuthBlock.tsx
@@ -87,7 +87,7 @@ interface AuthBlockProps {
 
 const AuthBlock: React.FC<AuthBlockProps> = ({ title }) => {
   return (
-    <Card className="w-[400px] shadow-md bg-white text-black rounded-lg">
+    <Card className="w-[400px] shadow-md bg-white dark:bg-gray-800 text-black dark:text-white rounded-lg">
       <CardHeader>
         <Header title={title} />
       </CardHeader>

diff --git a/frontend/src/components/auth/SignupForm.tsx b/frontend/src/components/auth/SignupForm.tsx
@@ -63,7 +63,7 @@ const SignupForm = () => {
         showStrength={false}
       />
       {/* TOS Text */}
-      <div className="text-xs text-center text-gray-600 dark:text-gray-400">
+      <div className="text-xs text-center text-gray-600 dark:text-gray-300">
         By signing up, you agree to our <br />
         <Link to="/tos" className="text-accent underline">
           terms and conditions

diff --git a/frontend/src/components/listing/ListingFooter.tsx b/frontend/src/components/listing/ListingFooter.tsx
@@ -9,7 +9,7 @@ const ListingFooter = ({ listingId, edit }: Props) => {
   return (
     <div className="relative border-t p-4">
       <div className="grid grid-cols-1 md:grid-cols-[1fr_auto] gap-4 items-center">
-        <div className="text-gray-600 dark:text-gray-400 italic text-sm">
+        <div className="text-gray-600 dark:text-gray-300 italic text-sm">
           {`Listing ID: ${listingId}`}
         </div>
         {edit && (

diff --git a/frontend/src/components/nav/Sidebar.tsx b/frontend/src/components/nav/Sidebar.tsx
@@ -95,7 +95,7 @@ const Sidebar = ({ show, onClose }: Props) => {
     >
       <h5
         id="drawer-navigation-label"
-        className="text-base font-semibold text-gray-500 uppercase dark:text-gray-400"
+        className="text-base font-semibold text-gray-500 uppercase dark:text-gray-300"
       >
         SETTINGS
       </h5>

diff --git a/frontend/src/components/ui/Toast.tsx b/frontend/src/components/ui/Toast.tsx
@@ -56,7 +56,7 @@ const Toast = (props: Props) => {
 
   return (
     <div
-      className="flex items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
+      className="flex items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-300 dark:bg-gray-800"
       role="alert"
     >
       <div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-500 bg-blue-100 rounded-lg dark:bg-blue-800 dark:text-blue-200">