Merge pull request #269 from ThePhisch/patch-267-login_dark_mode

Patch 267 login dark mode
rucio · Jul 26, 2023 · 6e393ec · 6e393ec
2 parents da7ad5f + 8778a79
commit 6e393ec
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 51 deletions.
diff --git a/src/component-library/Input/TextInput.tsx b/src/component-library/Input/TextInput.tsx
@@ -16,7 +16,10 @@ export const TextInput: (
     return (
         <input
             className={twMerge(
-                "w-full border dark:border-gray-400 rounded-sm px-2 pt-2 dark:bg-gray-800 dark:text-white h-8",
+                "w-full h-8 px-2 pt-2 ",
+                "dark:border-gray-400 dark:bg-gray-800 dark:text-white ",
+                "border rounded-sm",
+                "dark:border-2 dark:border-white",
                 props.className ?? ""
             )}
             onKeyDown={(e) => {

diff --git a/src/component-library/Misc/Alert.tsx b/src/component-library/Misc/Alert.tsx
@@ -1,4 +1,6 @@
 import { useEffect } from 'react'
+import { HiXCircle } from 'react-icons/hi2'
+import { twMerge } from "tailwind-merge"
 
 interface AlertProps {
     id?: string | undefined
@@ -19,51 +21,25 @@ export const Alert = ({
             behavior: 'smooth',
         })
     }, [])
-    var closeIcon = (
-        <button
-            className="flash-close js-flash-close"
-            type="button"
-            aria-label="Close"
-            onClick={onClose}
-            style={{ marginLeft: 'auto' }}
-            data-testid={id ? `${id}-close-button` : undefined}
-        >
-            <svg
-                className="octicon octicon-x"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="-5 -5 30 30"
-                width="30"
-                height="30"
-            >
-                <path
-                    fillRule="evenodd"
-                    clipRule="evenodd"
-                    d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"
-                ></path>
-            </svg>
-        </button>
-    )
-    var divClasses: string[] = ["px-4", "py-3", "relative", "border-l-4"]
-    switch (variant) {
-        case "primary":
-            divClasses.push("bg-blue-100", "border-blue-500", "text-blue-700");
-            break;
-        case "warn":
-            divClasses.push("bg-orange-100", "border-orange-500", "text-orange-700");
-            break;
-        case "success":
-            divClasses.push("bg-green-100", "border-green-500", "text-green-700");
-            break;
-        case "error":
-            divClasses.push("bg-red-100", "border-red-500", "text-red-700");
-            break;
-
-    }
-
     return (
-        <div className={divClasses.join(" ")}>
+        <div 
+            className={twMerge(
+                "px-4 py-3 border-l-4",
+                variant === "primary" ? "bg-blue-100 border-blue-500 text-blue-700" : "",
+                variant === "warn" ? "bg-orange-100 border-orange-500 text-orange-700" : "",
+                variant === "success" ? "bg-green-100 border-green-500 text-green-700" : "",
+                variant === "error" ? "bg-red-100 border-red-500 text-red-700" : "",
+                "flex flex-row justify-between items-center",
+            )}
+        >
             <span className="block sm:inline" data-testid={id}>{message}</span>
-            <span className="absolute top-0 bottom-0 right-0 px-4 py-3">{closeIcon}</span>
+            <button
+                aria-label="Close"
+                onClick={onClose}
+                data-testid={id ? `${id}-close-button` : undefined}
+            >
+                <HiXCircle className="text-2xl" />
+            </button>
         </div>
     )
 }
diff --git a/src/component-library/Misc/Tabs.tsx b/src/component-library/Misc/Tabs.tsx
@@ -52,6 +52,7 @@ export const Tabs: React.FC<JSX.IntrinsicElements["div"] & {
                     "flex flex-col sm:flex-row",
                     "list-none font-bold",
                     "bg-white dark:bg-gray-900",
+                    "border-0 dark:border-2 dark:rounded-md dark:bg-clip-content",
                     className ?? "",
                 )}
                 role="tablist"
@@ -65,7 +66,8 @@ export const Tabs: React.FC<JSX.IntrinsicElements["div"] & {
                             className={twMerge(
                                 "flex-1 p-4 hover:cursor-pointer",
                                 "border-b-4 border-blue-500",
-                                "text-blue-500 hover:bg-gray-100 dark:hover:bg-transparent"
+                                "text-blue-500 hover:bg-gray-100 dark:hover:bg-transparent",
+                                "dark:rounded-b-sm"
                             )}
                             key={index.toString()} // required by react
                             role="tab"

diff --git a/src/component-library/Pages/Login/LabelledInput.tsx b/src/component-library/Pages/Login/LabelledInput.tsx
@@ -34,7 +34,7 @@ export const LabelledInput: React.FC<LabelledInputProps> = (
                     "w-32 text-right flex-none",
                 )}
             >
-                <P>{label}</P>
+                <P className="dark:font-bold">{label}</P>
             </label>
             <TextInput
                 id={idinput}

diff --git a/src/component-library/Pages/Login/Login.tsx b/src/component-library/Pages/Login/Login.tsx
@@ -77,6 +77,7 @@ export const Login = ({
                 "rounded p-4 flex flex-col justify-center space-y-2",
                 "border dark:border-2",
                 "border-gray-300 dark:border-white",
+                "bg-white dark:bg-gray-800",
             )}
             id="root"
         >
@@ -115,7 +116,7 @@ export const Login = ({
                 } />
             </Collapsible>
             <div className="text-center dark:text-white">
-                <H1>Rucio Login</H1>
+                <H1 className="mt-4 mb-2">Rucio Login</H1>
             </div>
 
             <form

diff --git a/src/component-library/outputtailwind.css b/src/component-library/outputtailwind.css
@@ -620,10 +620,6 @@ html {
   right: 0px;
 }
 
-.top-0 {
-  top: 0px;
-}
-
 .top-10 {
   top: 2.5rem;
 }
@@ -2247,6 +2243,15 @@ html {
 }
 
 @media (prefers-color-scheme: dark) {
+  .dark\:rounded-md {
+    border-radius: 0.375rem;
+  }
+
+  .dark\:rounded-b-sm {
+    border-bottom-right-radius: 0.125rem;
+    border-bottom-left-radius: 0.125rem;
+  }
+
   .dark\:border {
     border-width: 1px;
   }
@@ -2473,6 +2478,14 @@ html {
     background-color: rgb(15 118 110 / var(--tw-bg-opacity));
   }
 
+  .dark\:bg-clip-content {
+    background-clip: content-box;
+  }
+
+  .dark\:font-bold {
+    font-weight: 700;
+  }
+
   .dark\:text-amber-300 {
     --tw-text-opacity: 1;
     color: rgb(252 211 77 / var(--tw-text-opacity));