updating theme colors and using clsx

flatironinstitute · Aug 10, 2023 · 8a8395a · 8a8395a
1 parent 18871cc
commit 8a8395a
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 32 deletions.
diff --git a/flatfront-astro/src/lib/Cells.tsx b/flatfront-astro/src/lib/Cells.tsx
@@ -279,12 +279,12 @@ function FieldsDialog() {
       <Dialog.Portal>
         <Dialog.Overlay className="fixed inset-0 z-20 bg-black/50" />
         <Dialog.Content
-          className={[
+          className={clsx(
             `fixed z-50 w-[95vw] max-w-3xl rounded-lg p-4`,
             `top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]`,
-            `bg-white dark:bg-slate-700`,
-            `focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75`,
-          ].join(" ")}
+            `bg-light-2 dark:bg-dark-2`,
+            `focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75`
+          )}
         >
           <Dialog.Title className="text-sm font-medium text-light-text dark:text-dark-text">
             All Fields
@@ -293,7 +293,7 @@ function FieldsDialog() {
           <Dialog.Description />
           <div className="h-4" />
           <input
-            className="w-full dark:bg-slate-900 rounded-lg text-lg leading-5 py-2 px-3 focus:ring-2 focus:ring-slate-50 focus:outline-none"
+            className="w-full bg-light-0 dark:bg-dark-0 rounded-lg text-lg leading-5 py-2 px-3 focus:ring-2 focus:ring-light-4 dark:focus:ring-dark-4 focus:outline-none"
             type="text"
             placeholder="search"
           />
@@ -302,12 +302,12 @@ function FieldsDialog() {
             {field_cards}
           </div>
           <Dialog.Close
-            className={[
+            className={clsx(
               "absolute top-3.5 right-3.5 inline-flex items-center justify-center rounded-full p-1",
-              "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75",
-            ].join(" ")}
+              "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
+            )}
           >
-            <Cross1Icon className="h-4 w-4 text-slate-500 hover:text-slate-700 dark:text-slate-500 dark:hover:text-slate-400" />
+            <Cross1Icon className="h-4 w-4 text-light-text dark:text-dark-text" />
           </Dialog.Close>
         </Dialog.Content>
       </Dialog.Portal>

diff --git a/flatfront-astro/src/lib/shared.tsx b/flatfront-astro/src/lib/shared.tsx
@@ -278,7 +278,7 @@ export function BigButton({
 }
 
 BigButton.className =
-  "bg-slate-500 dark:bg-slate-600 rounded-lg py-4 text-white font-bold text-xl";
+  "bg-light-4 dark:bg-dark-4 rounded-lg py-4 text-white font-bold text-xl";
 
 export function CellWrapper({
   children,
@@ -335,22 +335,3 @@ export function find_parent_node_by_filter<T>(
       : undefined;
   }
 }
-
-// className={({ active }) =>
-// `relative cursor-pointer select-none py-2 pl-3 pr-4 ${
-//   active ? `bg-slate-700` : ``
-// }`
-// }
-
-// const SelectItem = React.forwardRef(
-//   ({ children, className, ...props }, forwardedRef) => {
-//     return (
-//       <Select.Item {...props} ref={forwardedRef}>
-//         <Select.ItemText>{children}</Select.ItemText>
-//         <Select.ItemIndicator className="SelectItemIndicator">
-//           <CheckIcon />
-//         </Select.ItemIndicator>
-//       </Select.Item>
-//     );
-//   }
-// );
diff --git a/flatfront-astro/tailwind.config.cjs b/flatfront-astro/tailwind.config.cjs
@@ -8,17 +8,17 @@ module.exports = {
     extend: {
       colors: {
         "light-text": colors.slate[900],
-        "light-0": colors.slate[50],
+        "light-0": colors.white,
         "light-1": colors.slate[100],
         "light-2": colors.slate[200],
         "light-3": colors.slate[300],
-        "light-4": colors.slate[500],
+        "light-4": colors.slate[400],
         "dark-text": colors.slate[50],
         "dark-0": colors.slate[900],
         "dark-1": colors.slate[700],
         "dark-2": colors.slate[600],
         "dark-3": colors.slate[500],
-        "dark-4": colors.slate[300],
+        "dark-4": colors.slate[400],
       },
     },
   },