Merge pull request #126 from p2-inc/update/color-templating

update css to better override certain items
p2-inc · Jan 15, 2024 · 358ac8c · 358ac8c
2 parents 7639e9e + b7a5488
commit 358ac8c
Show file tree

Hide file tree

Showing 17 changed files with 102 additions and 39 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/buttons/button.tsx b/src/components/elements/forms/buttons/button.tsx
@@ -31,7 +31,7 @@ const Button: FC<ButtonProps> = ({
       <div className="relative w-full">
         <div
           className={cs(
-            "relative z-20 rounded p-px",
+            "relative z-20 rounded",
             "transition duration-200",
             "group-enabled:group-hover:bg-gradient-to-tl group-enabled:group-hover:from-primary-600 group-enabled:group-hover:via-primary-400 group-enabled:group-hover:to-primary-600",
             {

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/elements/rounded-icon.tsx b/src/components/elements/rounded-icon.tsx
@@ -10,7 +10,7 @@ const RoundedIcon: FC<Props> = ({ children, className }) => {
   return (
     <div className={className}>
       <div className={cs("relative h-12 w-12 overflow-hidden rounded-md")}>
-        <div className="absolute -inset-10 z-10 bg-gradient-to-tr from-[#C7DFF0] to-[#1476B7]"></div>
+        <div className="absolute -inset-10 z-10 bg-primary-gradient"></div>
         <div className="absolute inset-[2px] z-20 flex items-center justify-center rounded bg-white dark:bg-p2dark-1000 dark:text-zinc-200">
           {children}
         </div>

diff --git a/src/components/elements/table/table.tsx b/src/components/elements/table/table.tsx
@@ -57,7 +57,11 @@ const Table: React.FC<Props> = ({ columns, rows, isLoading, emptyState }) => {
     return loadingState(columns);
   }
   if (rows.length === 0 && emptyState) {
-    return <div className="rounded-md border border-gray-200 dark:border-zinc-600 p-4 bg-gray-50 dark:bg-p2dark-1000 dark:text-zinc-200">{emptyState}</div>;
+    return (
+      <div className="rounded-md border border-gray-200 bg-gray-50 p-4 dark:border-zinc-600 dark:bg-p2dark-1000 dark:text-zinc-200">
+        {emptyState}
+      </div>
+    );
   }
   return (
     <div className="overflow-auto rounded-md border border-gray-200 dark:border-zinc-600 md:overflow-visible">

diff --git a/src/components/navs/desktop-sidebar-nav.tsx b/src/components/navs/desktop-sidebar-nav.tsx
@@ -93,10 +93,12 @@ 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:border-primary-700 dark:hover:bg-p2dark-900":
+                            "border-primary-700 text-primary-700 hover:border-primary-700 dark:hover:bg-p2dark-900":
                               menuCollapsed && isActive,
                           }
                         )
@@ -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/fullName.tsx b/src/components/utils/fullName.tsx
@@ -1,6 +1,9 @@
 import { UserRepresentation } from "store/apis/orgs";
 
 export default function fullName(member: UserRepresentation) {
-  const name = `${member.firstName} ${member.lastName}`.trim();
-  return name === "" ? null : name;
+  let name = `${member.firstName} ${member.lastName}`.trim();
+  if (name) {
+    return name;
+  }
+  return member.email;
 }
diff --git a/src/components/utils/injectStyles.tsx b/src/components/utils/injectStyles.tsx
@@ -4,13 +4,61 @@ import { config } from "config";
 function generateColorStyles(colorName: string, colorValue?: string) {
   return colorValue
     ? `.text-${colorName} { color: ${colorValue}; }
-       .bg-${colorName} { background-color: ${colorValue}; }`
+       .bg-${colorName} { background-color: ${colorValue}; }
+       .border-${colorName} { border-color: ${colorValue}; }
+       .from-${colorName} { --tw-gradient-from: ${colorValue}; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, ${colorValue}); }
+       .via-${colorName} { --tw-gradient-stops: var(--tw-gradient-from), ${colorValue}, var(--tw-gradient-to, ${colorValue}); }
+       .to-${colorName} { --tw-gradient-to: ${colorValue}; }
+       .placeholder-${colorName} { color: ${colorValue}; opacity: 1; }
+       .ring-${colorName} { --tw-ring-color: ${colorValue}; }
+       .divide-${colorName} { border-color: ${colorValue}; }
+       .hover\\:text-${colorName}:hover { color: ${colorValue}; }
+       .hover\\:bg-${colorName}:hover { background-color: ${colorValue}; }
+       .hover\\:border-${colorName}:hover { border-color: ${colorValue}; }
+       .hover\\:ring-${colorName}:hover { --tw-ring-color: ${colorValue}; }
+       .focus\\:text-${colorName}:focus { color: ${colorValue}; }
+       .focus\\:bg-${colorName}:focus { background-color: ${colorValue}; }
+       .focus\\:border-${colorName}:focus { border-color: ${colorValue}; }
+       .focus\\:ring-${colorName}:focus { --tw-ring-color: ${colorValue}; }
+       .active\\:text-${colorName}:active { color: ${colorValue}; }
+       .active\\:bg-${colorName}:active { background-color: ${colorValue}; }
+       .active\\:border-${colorName}:active { border-color: ${colorValue}; }
+       .active\\:ring-${colorName}:active { --tw-ring-color: ${colorValue}; }
+       .group:hover .group-hover\\:text-${colorName} { color: ${colorValue}; }
+       .group:hover .group-hover\\:bg-${colorName} { background-color: ${colorValue}; }
+       .group:hover .group-hover\\:border-${colorName} { border-color: ${colorValue}; }
+       .group:hover .group-hover\\:ring-${colorName} { --tw-ring-color: ${colorValue}; }
+       .group:focus .group-focus\\:text-${colorName} { color: ${colorValue}; }
+       .group:focus .group-focus\\:bg-${colorName} { background-color: ${colorValue}; }
+       .group:focus .group-focus\\:border-${colorName} { border-color: ${colorValue}; }
+       .group:focus .group-focus\\:ring-${colorName} { --tw-ring-color: ${colorValue}; }
+       .group:active .group-active\\:text-${colorName} { color: ${colorValue}; }
+       .group:active .group-active\\:bg-${colorName} { background-color: ${colorValue}; }
+       .group:active .group-active\\:border-${colorName} { border-color: ${colorValue}; }
+       .group:active .group-active\\:ring-${colorName} { --tw-ring-color: ${colorValue}; }
+       .group:enabled .group-enabled\\:text-${colorName} { color: ${colorValue}; }
+       .group:enabled .group-enabled\\:bg-${colorName} { background-color: ${colorValue}; }
+       .group:enabled .group-enabled\\:border-${colorName} { border-color: ${colorValue}; }
+       .group:enabled .group-enabled\\:ring-${colorName} { --tw-ring-color: ${colorValue}; }
+       .group:enabled:hover .group-enabled\\:group-hover\\:text-${colorName} { color: ${colorValue}; }
+       .group:enabled:hover .group-enabled\\:group-hover\\:bg-${colorName} { background-color: ${colorValue}; }
+       .group:enabled:hover .group-enabled\\:group-hover\\:border-${colorName} { border-color: ${colorValue}; }
+       .group:enabled:hover .group-enabled\\:group-hover\\:ring-${colorName} { --tw-ring-color: ${colorValue}; } 
+       `
+    : "";
+}
+
+function generateButtonStyles(cv1?: string, cv2?: string) {
+  return cv1 && cv2
+    ? `.bg-primary-gradient {
+        background-image: linear-gradient(to right, ${cv1}, ${cv2});
+      }`
     : "";
 }
 
 const InjectStyles = () => {
   useEffect(() => {
-    const { styles = { customCSS: "" } } = config.env;
+    const { styles } = config.env;
     const styleElement = document.createElement("style");
 
     const primaryColor = `
@@ -21,6 +69,7 @@ const InjectStyles = () => {
       ${generateColorStyles("primary-600", styles.primary600)}
       ${generateColorStyles("primary-700", styles.primary700)}
       ${generateColorStyles("primary-900", styles.primary900)}
+      ${generateButtonStyles(styles.primary100, styles.primary600)}
     `;
 
     const secondaryColor = `

diff --git a/src/index.css b/src/index.css
@@ -10,16 +10,6 @@
     @apply antialiased;
   }
 
-  .loading-animate {
-    @apply bg-[conic-gradient(from_0deg,var(--tw-gradient-stops))];
-    @apply from-[#C7DFF0]/0;
-    @apply to-[#1476B7];
-
-    -webkit-animation: LoadingAnimation 1.5s linear infinite;
-    -moz-animation: LoadingAnimation 1.5s linear infinite;
-    animation: LoadingAnimation 1.5s linear infinite;
-  }
-
   @keyframes LoadingAnimation {
     0% {
       transform: rotate(0deg);

diff --git a/src/pages/invitation/new.tsx b/src/pages/invitation/new.tsx
@@ -23,7 +23,7 @@ const { realm } = config.env;
 const loadingIcon = (
   <div>
     <div className={cs("relative h-12 w-12 overflow-hidden rounded-md")}>
-      <div className="absolute -inset-10 z-10 bg-gradient-to-tr from-[#C7DFF0] to-[#1476B7]"></div>
+      <div className="absolute -inset-10 z-10 bg-primary-gradient"></div>
       <div className="absolute inset-[2px] z-20 flex items-center justify-center rounded bg-white dark:bg-p2dark-1000 dark:text-zinc-200">
         <User />
       </div>

diff --git a/src/pages/member/components/loading-icon.tsx b/src/pages/member/components/loading-icon.tsx
@@ -3,7 +3,7 @@ import { User } from "lucide-react";
 export const LoadingIcon = (
   <div>
     <div className="relative h-12 w-12 overflow-hidden rounded-md">
-      <div className="absolute -inset-10 z-10 bg-gradient-to-tr from-[#C7DFF0] to-[#1476B7]"></div>
+      <div className="absolute -inset-10 z-10 bg-primary-gradient"></div>
       <div className="absolute inset-[2px] z-20 flex items-center justify-center rounded bg-white dark:bg-p2dark-1000 dark:text-zinc-200">
         <User />
       </div>

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",
   },
 ];
 

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -27,6 +27,14 @@ module.exports = {
         "btn-dark": "0px 1px 8px rgba(11, 25, 35, 0.4)",
         "btn-light": "0px 1px 8px rgba(11, 25, 35, 0.1)",
       },
+      gradients: (theme) => ({
+        "primary-gradient": `linear-gradient(to right, ${theme(
+          "colors.primary.200"
+        )}, ${theme("colors.primary.700")})`,
+      }),
+      backgroundImage: (theme) => ({
+        "primary-gradient": theme("gradients.primary-gradient"),
+      }),
     },
   },
   plugins: [require("@tailwindcss/forms")],