further color tweaks to adjust for custom color setting

p2-inc · Jan 15, 2024 · b7a5488 · b7a5488
1 parent 7e0d8dd
commit b7a5488
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 45 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -4,16 +4,22 @@ import { Outlet } from "react-router-dom";
 import { useGetAccountQuery } from "store/apis/profile";
 import { config } from "config";
 import { useEffect } from "react";
+import { useTheme } from "components/utils/useTheme";
 
 const { supportedLocales, realm } = config.env;
 
 function App() {
   const hasLocale = (locale: string): boolean => locale in supportedLocales;
 
+  // Triggers theme without having to open theme menu
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const themes = useTheme();
+
   const { data: account } = useGetAccountQuery({
     userProfileMetadata: true,
     realm,
   });
+
   useEffect(() => {
     // load language (after login)
     if (

diff --git a/src/components/elements/forms/inputs/rhf-text-input-with-label.tsx b/src/components/elements/forms/inputs/rhf-text-input-with-label.tsx
@@ -45,14 +45,10 @@ const RHFFormTextInputWithLabel: FC<Props> = ({
         <input
           type="text"
           id={slug}
-          className={cs(
-            BasicFormClasses,
-            "block w-full rounded-md border-gray-300 focus:border-transparent focus:ring-[#134FC2] sm:text-sm",
-            {
-              "border-pink-500 text-pink-600 focus:border-pink-500 focus:ring-pink-500":
-                error,
-            }
-          )}
+          className={cs(BasicFormClasses, "w-full", {
+            "border-pink-500 text-pink-600 focus:border-pink-500 focus:ring-pink-500":
+              error,
+          })}
           placeholder="placeholder"
           {...register(slug, registerArgs)}
           {...inputArgs}

diff --git a/src/components/elements/forms/inputs/text-input-with-label.tsx b/src/components/elements/forms/inputs/text-input-with-label.tsx
@@ -31,7 +31,7 @@ const FormTextInputWithLabel: FC<Props> = ({
           id={slug}
           className={cs(
             BasicFormClasses,
-            "block w-full rounded-md border-gray-300 focus:border-transparent focus:ring-[#134FC2] sm:text-sm"
+            "block w-full rounded-md border-gray-300 focus:border-transparent focus:ring-primary-700 sm:text-sm"
           )}
           placeholder="placeholder"
           {...inputArgs}

diff --git a/src/components/elements/forms/inputs/text-input.tsx b/src/components/elements/forms/inputs/text-input.tsx
@@ -1,5 +1,5 @@
 export const BasicFormClasses =
-  "block rounded border-gray-300 dark:border-zinc-600 dark:text-zinc-200 sm:text-sm bg-white dark:bg-p2dark-1000 disabled:opacity-50 disabled:cursor-not-allowed hover:border-gray-500 transition";
+  "block rounded-md border-gray-300 border-gray-300 bg-white transition hover:border-gray-500 focus:border-transparent focus:ring-primary-700 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-600 dark:bg-p2dark-1000 dark:text-zinc-200 sm:text-sm";
 
 const FormTextInput = () => {
   return (

diff --git a/src/components/elements/organizations/item.tsx b/src/components/elements/organizations/item.tsx
@@ -15,7 +15,9 @@ type Props = {
 };
 
 const Title = ({ children }) => (
-  <div className="font-semibold dark:text-zinc-200">{children}</div>
+  <div className="font-semibold text-secondary-900 dark:text-zinc-200">
+    {children}
+  </div>
 );
 const SubTitle = ({ children }) => (
   <div className="text-[14px] dark:text-zinc-400">{children}</div>
@@ -40,13 +42,16 @@ const InnerItem = ({
         <div
           className={cs(
             "col-span-1 flex h-full",
-            "group-hover:border-gray-400 group-hover:bg-white dark:group-hover:border-zinc-500 dark:group-hover:bg-p2dark-900",
+            "group-hover:border-primary-400 group-hover:bg-white dark:group-hover:border-zinc-500 dark:group-hover:bg-p2dark-900",
             {
-              "flex-col space-y-5 rounded-md border border-gray-300 bg-gray-50 px-10 py-9 dark:border-zinc-600 dark:bg-p2dark-1000":
+              "flex-col space-y-5 rounded-md border  bg-gray-50 px-10 py-9 dark:border-zinc-600 dark:bg-p2dark-1000":
                 viewType === ViewLayoutOptions.GRID,
               "flex-row justify-between px-5 py-4":
                 viewType === ViewLayoutOptions.LIST,
-              "border-gray-100 dark:border-zinc-800": isViewCard,
+              "border-gray-100 dark:border-zinc-800":
+                viewType === ViewLayoutOptions.GRID && isViewCard,
+              " border-primary-600":
+                viewType === ViewLayoutOptions.GRID && !isViewCard,
             }
           )}
         >

diff --git a/src/components/navs/desktop-sidebar-nav.tsx b/src/components/navs/desktop-sidebar-nav.tsx
@@ -93,7 +93,9 @@ const DesktopSidebarNav: React.FC<Props> = ({
                           "group flex items-center rounded-lg border-2 border-gray-200 p-[14px] text-sm transition-colors hover:border-gray-300 hover:bg-white dark:hover:border-zinc-600 dark:hover:bg-p2dark-900",
                           {
                             "dark:border-zinc-600 dark:text-white": !isActive,
-                            "group:text-primary-700 border-primary-700 bg-white text-primary-700 dark:bg-p2dark-900":
+                            "group:text-primary-700 border-primary-700 bg-white text-primary-700":
+                              isActive,
+                            "dark:border-zinc-400 dark:bg-p2dark-900 dark:text-white":
                               isActive,
                             "w-full border-0": !menuCollapsed,
                             "border-primary-700 text-primary-700 hover:border-primary-700 dark:hover:bg-p2dark-900":
@@ -121,7 +123,7 @@ const DesktopSidebarNav: React.FC<Props> = ({
               <Popover className="relative">
                 <Popover.Button className="outline-none">
                   <div className="flex items-center">
-                    <div className="mx-auto grid h-8 w-8 place-items-center rounded-full bg-white text-sm font-semibold dark:bg-zinc-400">
+                    <div className="mx-auto grid h-8 w-8 place-items-center rounded-full border border-primary-700 bg-white text-sm font-semibold dark:bg-zinc-400">
                       {fullName().substring(0, 1)}
                     </div>
                     {!menuCollapsed && (

diff --git a/src/components/utils/injectStyles.tsx b/src/components/utils/injectStyles.tsx
@@ -48,7 +48,7 @@ function generateColorStyles(colorName: string, colorValue?: string) {
     : "";
 }
 
-function generateButtonStyles(cv1: string, cv2: string) {
+function generateButtonStyles(cv1?: string, cv2?: string) {
   return cv1 && cv2
     ? `.bg-primary-gradient {
         background-image: linear-gradient(to right, ${cv1}, ${cv2});
@@ -58,31 +58,7 @@ function generateButtonStyles(cv1: string, cv2: string) {
 
 const InjectStyles = () => {
   useEffect(() => {
-    // const {
-    //   styles = {
-    //     customCSS: "",
-    //     primary100: "#ff00de",
-    //     primary200: "#bc00a3",
-    //     primary400: "#8b0078",
-    //     primary500: "#810070",
-    //     primary600: "#5c0050",
-    //     primary700: "#46003d",
-    //     primary900: "#30002a",
-    //   },
-    // } = config.env;
-
-    const styles = {
-      customCSS: "",
-      primary100: "#ff00de",
-      primary200: "#bc00a3",
-      primary400: "#8b0078",
-      primary500: "#810070",
-      primary600: "#5c0050",
-      primary700: "#46003d",
-      primary900: "#30002a",
-      secondary800: "#ff1e00",
-      secondary900: "#b81500",
-    };
+    const { styles } = config.env;
     const styleElement = document.createElement("style");
 
     const primaryColor = `

diff --git a/src/pages/organizations/detail.tsx b/src/pages/organizations/detail.tsx
@@ -286,7 +286,7 @@ export default function OrganizationDetail() {
                 <select
                   id="location"
                   name="location"
-                  className="block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-500 sm:text-sm sm:leading-6"
+                  className="block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-1 focus:ring-primary-500 sm:text-sm sm:leading-6"
                   defaultValue="10"
                   onChange={adjustMax}
                 >

diff --git a/src/services/role.ts b/src/services/role.ts
@@ -25,12 +25,12 @@ export const roleSettings = [
   {
     regexp: new RegExp("^view-"),
     name: "view roles",
-    className: "bg-[#7CE0C3]",
+    className: "bg-primary-400",
   },
   {
     regexp: new RegExp("^manage-"),
     name: "manage roles",
-    className: "bg-[#C07CE0]",
+    className: "bg-primary-600",
   },
 ];