277 dev tailwind custom theme colors

frontend/src/Login.tsx

@@ -52,7 +52,7 @@ const Login = observer(() => {
                   required
                   onChange={(e) => setUsername(e.target.value)}
                   placeholder="Enter your email"
-                  className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-medium-gray"
+                  className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-grey-400"
                 />
               </div>
             </div>
@@ -69,14 +69,14 @@ const Login = observer(() => {
                   required
                   onChange={(e) => setPassword(e.target.value)}
                   placeholder="Enter your password"
-                  className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-medium-gray"
+                  className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-grey-400"
                 />
               </div>
             </div>
           </div>
           <div className="h-12 items-center">
             {failure ? (
-              <div className="text-[#D33221] mt-4 bg-[#FFA399] h-full rounded-md text-center flex items-center justify-center p-2">
+              <div className="text-red mt-4 bg-red-lighter h-full rounded-md text-center flex items-center justify-center p-2">
                 Your password is incorrect or this account doesn't exist.
               </div>
             ) : (
@@ -85,21 +85,21 @@ const Login = observer(() => {
           </div>
           <button
             type="submit"
-            className="w-full block mt-8 min-w-0 rounded-md grow bg-dark-orange text-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500"
+            className="w-full block mt-8 min-w-0 rounded-md grow bg-primary-900 text-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500"
           >
             Login
           </button>
           <div className="flex items-center justify-between gap-4 mt-8">
-            <hr className="border-[#757575] w-[45%]" />
-            <div className="text-[#757575]">or</div>
-            <hr className="border-[#757575] w-[45%]" />
+            <hr className="border-grey-600 w-[45%]" />
+            <div className="text-grey-600">or</div>
+            <hr className="border-grey-600 w-[45%]" />
           </div>
           <div className="flex items-center mt-8 justify-center">
             Don't have an account?{" "}
             <button
               type="button"
               onClick={() => navigate("/register")}
-              className="inline ml-2 text-dark-blue text-left"
+              className="inline ml-2 text-secondary-500 text-left"
             >
               Sign up
             </button>
@@ -109,7 +109,7 @@ const Login = observer(() => {
 
       {/*/ Right side: logo */}
       <div className="h-full flex flex-col justify-center items-center">
-        <div className="w-full h-full  bg-medium-orange rounded-l-4xl flex flex-col justify-center items-center">
+        <div className="w-full h-full bg-primary-800 rounded-l-4xl flex flex-col justify-center items-center">
           <img
             className="w-[60%] h-[60%] object-contain p-10 mb-40"
             src={logo}

frontend/src/Register.tsx

@@ -90,7 +90,7 @@ const Register = observer(() => {
 
   return (
     <div className="bg-white grid grid-cols-[60%_40%] w-screen h-screen relative m-0 p-0 overflow-hidden text-start">
-      <div className="h-full py-20 px-20 flex flex-col justify-center items-start">
+      <div className="h-full px-20 flex flex-col justify-center items-start">
         {/*/ Left side: Registration form */}
         <div className="mb-4">
           <h1 className="text-[32px]">Get Started Now</h1>
@@ -111,7 +111,7 @@ const Register = observer(() => {
                   required
                   onChange={(e) => setUsername(e.target.value)}
                   placeholder="Enter your username"
-                  className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-medium-gray"
+                  className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-grey-400"
                 />
               </div>
             </div>
@@ -130,8 +130,8 @@ const Register = observer(() => {
                   placeholder="Enter your email"
                   className={`block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border ${
                     failure.item === "email"
-                      ? "border-[#D33221]"
-                      : "border-medium-gray"
+                      ? "border-red"
+                      : "border-grey-400"
                   }`}
                 />
               </div>
@@ -151,8 +151,8 @@ const Register = observer(() => {
                   placeholder="Enter your password"
                   className={`block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border ${
                     failure.item === "password"
-                      ? "border-[#D33221]"
-                      : "border-medium-gray"
+                      ? "border-red"
+                      : "border-grey-400"
                   }`}
                 />
               </div>
@@ -172,8 +172,8 @@ const Register = observer(() => {
                   placeholder="Re-enter your password"
                   className={`block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border ${
                     failure.item === "password"
-                      ? "border-[#D33221]"
-                      : "border-medium-gray"
+                      ? "border-red"
+                      : "border-grey-400"
                   }`}
                 />
               </div>
@@ -183,8 +183,8 @@ const Register = observer(() => {
             <div
               className={`min-h-28 mt-4 text-sm rounded-md flex items-center justify-center p-4 whitespace-pre-line text-left ${
                 failure.state
-                  ? "text-[#D33221] bg-[#FFA399]"
-                  : "text-[#616161] bg-[#E7E7E7]"
+                  ? "text-red bg-red-lighter"
+                  : "text-grey-600 bg-grey-200"
               }`}
             >
               {failure.state ? failure.message : defaultPasswordMessage}
@@ -193,21 +193,21 @@ const Register = observer(() => {
 
           <button
             type="submit"
-            className="w-full block mt-8 min-w-0 rounded-md grow bg-dark-orange text-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500"
+            className="w-full block mt-8 min-w-0 rounded-md grow bg-primary-900 text-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500"
           >
             Register
           </button>
           <div className="flex items-center justify-between gap-4 mt-4">
-            <hr className="border-[#757575] w-[45%]" />
-            <div className="text-[#757575]">or</div>
-            <hr className="border-[#757575] w-[45%]" />
+            <hr className="border-grey-600 w-[45%]" />
+            <div className="text-grey-600">or</div>
+            <hr className="border-grey-600 w-[45%]" />
           </div>
           <div className="flex items-center mt-4 justify-center">
             Have an account?{" "}
             <button
               type="button"
               onClick={() => navigate("/login")}
-              className="inline ml-2 text-dark-blue text-left"
+              className="inline ml-2 text-secondary-500 text-left"
             >
               Sign in
             </button>
@@ -216,7 +216,7 @@ const Register = observer(() => {
       </div>
       {/*/ Right side: logo */}
       <div className="h-full flex flex-col justify-center items-center">
-        <div className="w-full h-full  bg-medium-orange rounded-l-4xl flex flex-col justify-center items-center">
+        <div className="w-full h-full  bg-primary-800 rounded-l-4xl flex flex-col justify-center items-center">
           <img
             className="w-[60%] h-[60%] object-contain p-10 mb-40"
             src={logo}

frontend/src/RegisterLanding.tsx

@@ -1,6 +1,5 @@
 import { Link } from "react-router-dom";
 import logo from "./images/logo.svg";
-import { ButtonColorOption } from "./custom/RingButton";
 import { useAuthContext } from "./context/auth/authContext";
 
 /**
@@ -11,7 +10,7 @@ const RegisterLanding = () => {
   return (
     <div className="bg-white grid grid-cols-[35%_65%] relative w-screen h-screen m-0 p-0 overflow-hidden text-start">
       <div className="h-full flex flex-col justify-center items-center pb-32">
-        <div className="w-full h-[70%] bg-medium-orange rounded-r-4xl flex flex-col justify-center items-center">
+        <div className="w-full h-[70%] bg-primary-800 rounded-r-4xl flex flex-col justify-center items-center">
           <img
             className="w-[90%] h-[90%] object-contain p-20 ml-10"
             src={logo}
@@ -31,8 +30,7 @@ const RegisterLanding = () => {
           </h2>
           <Link to="/login">
                     <button
-                      style={styles.loginButton}
-                      className="py-2 px-4 rounded"
+                      className="py-2 my-8 px-4 rounded-md text-black bg-primary-800 border-1 border-black"
                       onClick={() => {
                         logout()
                       }}
@@ -46,27 +44,4 @@ const RegisterLanding = () => {
   );
 };
 
-export default RegisterLanding;
-
-// Inline style objects
-const styles: { [key: string]: React.CSSProperties } = {
-  pageContainer: {
-    position: "relative",
-    width: "100vw",
-    height: "100vh",
-    margin: 0,
-    padding: 0,
-    overflow: "hidden",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "start",
-    textAlign: "start",
-  },
-  loginButton :{
-    backgroundColor: ButtonColorOption.ORANGE,
-    color: 'black',
-    borderStyle: 'solid',
-    borderColor: 'black',
-    borderWidth: '1px'
-  }
-};
+export default RegisterLanding;

frontend/src/custom/ActionConfirmation.tsx

@@ -26,12 +26,7 @@ import { IoIosWarning } from "react-icons/io";
         onClick={onCloseDelete}
       >
         <div 
-          style={{
-            borderStyle: 'solid',
-            borderColor: 'black',
-            borderWidth: '2px'
-          }}
-          className=" bg-white rounded-md shadow-2xl p-8 max-w-xl w-full mx-4 transform transition-all duration-300"
+          className=" bg-white border-2 rounded-md shadow-2xl p-8 max-w-xl w-full mx-4 transform transition-all duration-300"
           onClick={(e) => e.stopPropagation()}
         >
 
@@ -51,13 +46,13 @@ import { IoIosWarning } from "react-icons/io";
 
             <div className="flex mb-6">
 
-            <div className="w-3" style={{backgroundColor : "#FA703F"}}/>
-            <div  className="p-3" style={{backgroundColor : "#FFE9D9"}}>
+            <div className="w-3 bg-red"/>
+            <div  className="p-3 bg-red-lightest">
             <div className="flex">
-              <IoIosWarning size={24} style={{color: "#771505"}}/>
-              <p className="font-bold px-1 text-lg" style={{color: "#771505"}}> Warning </p>
+              <IoIosWarning size={24} className="text-red-dark"/>
+              <p className="font-bold px-1 text-lg text-red-dark"> Warning </p>
             </div>
-            <p className=" text-left text-lg font-semibold" style={{color : "#FA703F"}}>
+            <p className=" text-left text-lg font-semibold text-red">
               {warningMessage}
             </p>
 
@@ -69,25 +64,13 @@ import { IoIosWarning } from "react-icons/io";
           {/* Buttons */}
           <div className="flex w-full justify-between ">
             <button
-              style={{
-                backgroundColor: "#F7A781",
-                borderStyle: 'solid',
-                borderColor: 'black',
-                borderWidth: '2px'
-              }}
-              className="rounded-lg hover:bg-gray-200 transition-colors w-32 h-12"
+              className="rounded-lg hover:bg-gray-200 border-2 border-black bg-red-lightest transition-colors w-32 h-12"
               onClick={onCloseDelete}
             >
               No, cancel
             </button>
             <button
-              style={{
-                backgroundColor: 'white',
-                borderStyle: 'solid',
-                borderColor: 'black',
-                borderWidth: '2px'
-              }}
-              className="rounded-lg text-black hover:bg-red-700 transition-colors w-32 h-12"
+              className="rounded-lg text-black border-2 border-black hover:bg-red-700 transition-colors w-32 h-12"
               onClick={() => {
                 onConfirmDelete();
                 onCloseDelete();

frontend/src/custom/RingButton.tsx

@@ -2,9 +2,9 @@ import "../styles/button.css";
 
 /* Maintained with button.css */
 export enum ButtonColorOption {
-  GREEN = "#5AB911",
-  GRAY = "#D3D3D3",
-  ORANGE = "#F7A781",
+  GREEN = "var(--color-green)",
+  GRAY = "var(--color-grey-400)",
+  ORANGE = "var(--color-orange)",
 }
 
 /* API for components to setup a button with expected system colors */
@@ -25,24 +25,21 @@ export default function RingButton({ text, color }: RingButtonProps) {
     <>
       {ButtonColorOption.GREEN === color && (
         <div
-          className="green-button button-default"
-          style={{ width: "100%", border: "none", cursor: "default" }}
+          className="bg-green button-default w-full border-none cursor-default"
         >
           {text}
         </div>
       )}
       {ButtonColorOption.ORANGE === color && (
         <div
-          className="orange-button button-default"
-          style={{ width: "100%", border: "none", cursor: "default" }}
+          className="bg-orange button-default w-full border-none cursor-default"
         >
           {text}
         </div>
       )}
       {ButtonColorOption.GRAY === color && (
         <div
-          className="gray-button button-default"
-          style={{ width: "100%", border: "none", cursor: "default" }}
+          className="bg-grey-400 button-default w-full border-none cursor-default"
         >
           {text}
         </div>

frontend/src/main-page/Footer.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import "../styles/Footer.css";
 import { Group, Text, Link } from "@chakra-ui/react";
 import { FooterText } from "../translations/general";
-import tailwindConfig from "../../tailwind.config.js";
 
 const Footer: React.FC = () => {
   return (
@@ -14,7 +13,7 @@ const Footer: React.FC = () => {
             {FooterText.C4C}
           </Link>{" "}
           for{" "}
-          <Link variant="underline" _hover={{color: `${tailwindConfig.theme.colors["dark-orange"]}`}}  href={FooterText.Org_Link}>
+          <Link variant="underline" _hover={{color: "var(--color-primary-900)"}}  href={FooterText.Org_Link}>
             {FooterText.Org}
           </Link>
         </Text>

frontend/src/main-page/dashboard/Charts/BarYearGrantStatus.tsx

@@ -60,7 +60,7 @@ const BarYearGrantStatus = observer(
           {/* Toggle */}
           <div className="mt-2">
             <label className="inline-flex items-center mb-5 cursor-pointer">
-              <span className="me-3 text-sm font-medium text-gray-900 dark:text-gray-300">
+              <span className="me-3 text-sm font-medium text-gray-900">
                 Count
               </span>
               <input
@@ -70,8 +70,8 @@ const BarYearGrantStatus = observer(
                 className="sr-only peer"
                 style={{display:"none"}}
               />
-              <div className=" bg-light-orange relative w-9 h-5 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-dark-orange rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border after:rounded-full after:h-4 after:w-4 after:transition-allpeer-checked:bg-blue-600 dark:peer-checked:bg-blue-600"></div>
-              <span className="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">
+              <div className=" bg-primary-700 relative w-9 h-5 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-900 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border after:rounded-full after:h-4 after:w-4 after:transition-allpeer-checked:bg-blue-600"></div>
+              <span className="ms-3 text-sm font-medium text-gray-900">
                 Money
               </span>
             </label>
@@ -103,7 +103,7 @@ const BarYearGrantStatus = observer(
               type="monotone"
               stackId="a"
               dataKey="value"
-              fill="#F58D5C"
+              fill="var(--color-primary-800)"
               strokeWidth={2}
               name="Grants"
               radius={[15, 15, 15, 15]}
@@ -123,8 +123,8 @@ const BarYearGrantStatus = observer(
             <Tooltip
               contentStyle={{
                 borderRadius: "12px",
-                backgroundColor: "#fff",
-                border: "1px solid #ccc",
+                backgroundColor: "white",
+                border: "1px solid lightgray",
                 boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
               }}
               formatter={(value: number) =>