Swap colour palette to 2024 red themes

ui/src/App.css

@@ -1,3 +1,3 @@
 .button-link-container {
-    @apply inline-block border-2 border-blue-200 rounded-xl py-2 px-4;
+    @apply inline-block border-2 border-theme-l-7 rounded-xl py-2 px-4;
 }

ui/src/base.css

@@ -37,10 +37,4 @@
         width: 38px;
         height: auto;
     }
-
-    /*#footer {*/
-    /*  position: absolute;*/
-    /*  bottom: 0;*/
-    /*  height: 64px;*/
-    /*}*/
 }

ui/src/common/components/Dropdown.css

@@ -1,6 +1,6 @@
 @layer components {
     .c-dropdown {
-        @apply sm:inline-block w-full;
+        @apply sm:inline-block w-full border-theme-d-4;
 
         & div {
             @apply text-gray-900;
@@ -16,53 +16,69 @@
         }
 
         /* Whole input field */
-        .react-select__control {
+        .dropdown__control {
 
             /* Placeholder text */
-            .react-select__placeholder {
+            .dropdown__placeholder {
             }
 
             &:hover {
-                @apply border-blue-600 text-blue-600;
+                @apply border-theme-d-5;
 
                 /* Placeholder text */
-                .react-select__placeholder {
+                .dropdown__placeholder {
                 }
 
                 /* Buttons on right hand side */
-                .react-select__indicator {
+                .dropdown__indicator {
                 }
             }
         }
 
         /* Buttons on right hand side */
-        .react-select__indicator {
+        .dropdown__indicator {
         }
 
         /* Placeholder text */
-        .react-select__placeholder {
+        .dropdown__placeholder {
         }
 
         /* Placeholder text when dropdown open */
-        .react-select__control--menu-is-open {
-            .react-select__placeholder,   /* Placeholder text */
-            .react-select__indicator {    /* Buttons on right hand side */
+        .dropdown__control--menu-is-open {
+            .dropdown__placeholder,   /* Placeholder text */
+            .dropdown__indicator {    /* Buttons on right hand side */
             }
         }
 
-        .react-select__menu ,     /* Open dropdown menu itself */
-        .react-select__option {   /* Open dropdown elements */
-            @apply bg-grey-200 rounded;
+        .dropdown__menu ,     /* Open dropdown menu itself */
+        .dropdown__option {   /* Open dropdown elements */
+            @apply bg-theme-l-2 rounded;
         }
 
         /* Open dropdown on hover of single item */
-        .react-select__option--is-focused {
-            @apply bg-fuchsia-50;
+        .dropdown__option--is-focused {
+            @apply bg-theme-l-5;
         }
 
-        .react-select__multi-value,           /* 'X' button of element in input after selection */
-        .react-select__multi-value__label {   /* Icon/text of element in input after selection */
-            @apply bg-blue-700 text-white rounded;
+        .dropdown__multi-value {
+            @apply bg-theme text-white rounded mr-1 mb-1;
+
+            & path {
+                @apply fill-white;
+            }
+        }
+
+        .dropdown__multi-value__label {
+            @apply bg-theme text-white rounded m-0 p-1;
+
+            /* Reset styling on images, which are in spans */
+            & span {
+                @apply m-0 p-0 h-full align-middle;
+
+                & path {
+                    @apply fill-white;
+                }
+            }
         }
     }
 }

ui/src/common/components/PostTile.tsx

@@ -27,18 +27,18 @@ export const PostTile: React.FC<{post: Post}> = ({post}) => {
                 </header>
 
                 <div className="post-tile__body">
-                    <OptionsListDisplay optionsToDisplay={post.skillsSought} totalOptions={skills} label={"Looking for:"} className={"[--skill-color:theme(colors.blue-700)]"}/>
-                    <OptionsListDisplay optionsToDisplay={post.skillsPossessed} totalOptions={skills} label={"Can do:"} className={"[--skill-color:theme(colors.indigo)]"}/>
+                    <OptionsListDisplay optionsToDisplay={post.skillsSought} totalOptions={skills} label={"Looking for:"} className={"[--skill-color:theme(colors.theme-l-6)]"}/>
+                    <OptionsListDisplay optionsToDisplay={post.skillsPossessed} totalOptions={skills} label={"Can do:"} className={"[--skill-color:theme(colors.theme-d-9)]"}/>
                     {getDescriptionParagraphs(post).map((line, idx) => <p dir="auto" key={idx} className="mb-1">{line}</p>)}
                 </div>
 
                 <div className="post-tile__footer">
                     <button className="button-link-container" style={{ maxHeight: "3em" }}>
                         <Link
-                            className="text-lg text-blue-200 font-bold"
+                            className="text-lg text-theme-l-7 font-bold"
                             to={`/${post.id}`}
                         >
-                            See more {iiicon("right-arrow", "#8ae7ff")}
+                            See more {iiicon("right-arrow", "#ff5762")}
                         </Link>
                     </button>
                 </div>

ui/src/pages/components/Footer.css

@@ -1,10 +1,10 @@
 @layer components {
     .c-footer {
         @apply absolute bottom-0 w-full h-[64px] flex justify-center items-center;
-        background-image: linear-gradient(0deg, #042e62, #000000);
+        background-image: linear-gradient(0deg, #db0a15, #000000);
 
         .footer__icon {
-            @apply px-4 h-[24px] border-r-2 border-[#28eaf1] last:border-0;
+            @apply px-4 h-[24px] border-r-2 border-theme-l-7 last:border-0;
 
             .footer__icon--link {
                 display: block;

ui/src/pages/components/Header.css

@@ -3,23 +3,23 @@
         @apply p-2 mb-4;
         height: 64px;
         margin: 0 auto;
-        background-image: linear-gradient(rgb(4, 46, 98), rgb(0, 0, 0));
+        background-image: linear-gradient(#db0a15, #000000);
 
         #toggle-bookmark-button {
-            @apply text-blue-300 leading-none py-2 px-2 hover:font-bold hover:text-white border border-blue-300 rounded-lg;
+            @apply leading-none py-2 px-2 hover:font-bold hover:text-white border border-white rounded-lg;
             width: 40px;
         }
 
         .header-text-link {
-            @apply mr-2 text-blue-300 leading-none py-2 px-2 hover:font-bold hover:text-white;
+            @apply mr-2 text-white leading-none py-2 px-2 hover:font-bold hover:text-white;
         }
 
         .header-button {
-            @apply rounded-lg border border-blue-300 text-blue-300 hover:text-white;
+            @apply rounded-lg border border-white text-white hover:text-white;
         }
 
         #login-button {
-            @apply font-bold bg-blue-300 text-black;
+            @apply font-bold bg-theme-d-4 px-3 text-white;
         }
     }
 }

ui/src/pages/components/Header.tsx

@@ -40,7 +40,7 @@ export const Header: React.FC = () => {
                     <div className="flex-1 hidden sm:flex" />
 
                     <div className="flex justify-evenly gap-2">
-                        <Link to="/" className="block border border-blue-300 rounded-lg mr-2 sm:hidden">
+                        <Link to="/" className="block border border-theme-d-7 rounded-lg mr-2 sm:hidden">
                             <img src="/logos/header.png" width="40" height="40" alt={"jamName" + " Team Finder logo"}/>
                         </Link>
                         {isOnHomePage && <ToggleBookmarks />}

ui/src/pages/home/components/Onboarding.css

@@ -1,5 +1,5 @@
 @layer components {
     .c-onboarding-info-box {
-        @apply bg-blue-100 rounded-xl mt-8 px-4 py-2 mb-8;
+        @apply bg-theme-d-8 rounded-xl mt-8 px-4 py-2 mb-8;
     }
 }

ui/src/pages/home/components/Onboarding.tsx

@@ -18,7 +18,7 @@ export const Onboarding: React.FC = () => {
     if (!isLoggedIn) {
         return (
             <div className="c-onboarding-info-box">
-                <p className="text-black">
+                <p className="text-white">
                     <a onClick={login} className="font-bold underline">Login</a> to message posters, create a post and bookmark posts.
                 </p>
             </div>

ui/src/pages/home/components/SearchForm.css

@@ -7,7 +7,7 @@
         @apply bg-grey-50 border-2 border-grey-50 rounded-xl;
 
         &:hover {
-            @apply border-blue-600 text-blue-600;
+            @apply border-theme-l-5 text-theme-l-5;
         }
     }
 
@@ -17,6 +17,6 @@
     }
 
     #advanced-options-button {
-        @apply border rounded-xl border-blue-200 text-blue-200 px-4 py-2 mt-4 mr-2 mb-2 w-full sm:w-fit;
+        @apply border rounded-xl border-theme-l-7 text-theme-l-7 px-4 py-2 mt-4 mr-2 mb-2 w-full sm:w-fit;
     }
 }

ui/src/pages/home/components/SearchForm.tsx

@@ -65,8 +65,8 @@ export const SearchForm: React.FC<{
 
                         <button id="advanced-options-button" onClick={() => setShowAdvancedSearchOptions(!showAdvancedSearchOptions)}>
                             {showAdvancedSearchOptions
-                                ? <>Fewer options {iiicon('up-arrow', "#FFFFFF", 16, 16)}</>
-                                : <>More options {iiicon('down-arrow', "#FFFFFF", 16, 16)}</>
+                                ? <>Fewer options {iiicon('up-arrow', "#ff5762", 16, 16)}</>
+                                : <>More options {iiicon('down-arrow', "#ff5762", 16, 16)}</>
                             }
                         </button>
                     </div>

ui/src/pages/home/components/common/CustomSelect.tsx

@@ -24,6 +24,22 @@ interface CustomSelectProps extends FieldProps {
     placeholder?: string;
 }
 
+const styles = {
+    // @ts-ignore
+    control: styles => ({
+        ...styles,
+        borderRadius: '0.75rem',
+        borderColor: '#ffffff'
+    }),
+    // @ts-ignore
+    option: (styles, { data, isDisabled, isFocused, isSelected }) => {
+        return {
+            ...styles,
+            color: '#DD0',
+        };
+    },
+};
+
 export const CustomSelect = ({
      className,
      placeholder,
@@ -54,12 +70,14 @@ export const CustomSelect = ({
     return (
         <Select
             className={className}
+            classNamePrefix="dropdown"
             name={field.name}
             value={getValue()}
             onChange={onChange}
             placeholder={placeholder}
             options={options}
             isMulti={isMulti}
+            styles={styles}
         />
     );
 };

ui/src/pages/mypost/MyPost.tsx

@@ -45,7 +45,7 @@ export const MyPost: React.FC<{
             </div>
 
             <Button
-                className="mt-4 bg-blue-700 rounded-xl w-full sm:w-full md:w-auto md:float-right"
+                className="mt-4 bg-theme-d-7 rounded-xl w-full sm:w-full md:w-auto md:float-right"
                 type="button"
                 variant="primary"
                 disabled={false}
@@ -68,7 +68,7 @@ const FieldDescription: React.FC<{description: string}> = ({description}) => {
             <small className="block mb-2">{2000 - description.length} characters remaining</small>
             <Field
                 name="description"
-                className="form-block__field block w-full text-black hover:text-black"
+                className="form-block__field block w-full text-black hover:text-black py-1 px-2"
                 component="textarea"
                 style={{height: 150}}
             />

ui/src/pages/mypost/MyPostWrapper.tsx

@@ -93,11 +93,10 @@ export const MyPostWrapper: React.FC = () => {
 const DeletePostButton: React.FC<{postId: string, onClickHandler: any}> = ({onClickHandler}) => {
     return (
         <Button
-            className="mt-4 bg-red-700 rounded-xl w-full sm:w-full md:w-auto md:left"
+            className="mt-4 bg-white text-black rounded-xl w-full sm:w-full md:w-auto md:left"
             type="submit"
             variant="default"
             disabled={false}
-            style={{color: "white"}}
             onClick={onClickHandler}
         >
             Delete Post

ui/src/pages/post/Post.tsx

@@ -62,8 +62,8 @@ export const Post: React.FC<{}> = () => {
                     <div className="post__body">
                         <div className="flex flex-col sm:flex-row">
                             <div className="sm:inline-block sm:w-[50%] lg:w-[33%]">
-                                <OptionsListDisplay optionsToDisplay={post.skillsSought} totalOptions={skills} label={"Looking for:"} className={"[--skill-color:theme(colors.blue-700)]"}/>
-                                <OptionsListDisplay optionsToDisplay={post.skillsPossessed} totalOptions={skills} label={"Can do:"} className={"[--skill-color:theme(colors.indigo)]"}/>
+                                <OptionsListDisplay optionsToDisplay={post.skillsSought} totalOptions={skills} label={"Looking for:"} className={"[--skill-color:theme(colors.theme-l-6)]"}/>
+                                <OptionsListDisplay optionsToDisplay={post.skillsPossessed} totalOptions={skills} label={"Can do:"} className={"[--skill-color:theme(colors.theme-d-9)]"}/>
                             </div>
                             <div className="sm:inline-block sm:w-[50%] lg:w-[33%]">
                                 <OptionsListDisplay optionsToDisplay={post.preferredTools} totalOptions={tools} label={"Preferred Engine(s):"} className={"[--skill-color:theme(colors.green-300)]"}/>

ui/src/pages/post/components/DiscordMessageButton.tsx

@@ -11,7 +11,7 @@ export const DiscordMessageButton: React.FC<{
     isLoggedIn,
 }) => {
     return (
-        <span className="mb-6 px-6 py-2 bg-blue-200 border-blue-200 rounded-xl text-grey-900 font-bold inline-flex cursor-pointer">
+        <span className="mb-6 px-6 py-2 border-theme-l-7 bg-theme-l-7 rounded-xl text-grey-900 font-bold inline-flex cursor-pointer">
             <a
                 target="_blank"
                 rel="noreferrer"

ui/src/pages/post/components/DiscordPingButton.tsx

@@ -12,7 +12,7 @@ export const DiscordPingButton: React.FC<{
     return (
         <>
             <p className="mb-2">{message}</p>
-            <span className="mb-6 p-2 rounded inline-flex cursor-pointer rounded-xl border border-blue-200 text-blue-200">
+            <span className="mb-6 p-2 rounded inline-flex cursor-pointer rounded-xl border border-theme-l-7 text-theme-l-7">
                 <a
                     target="_blank"
                     rel="noreferrer"

ui/tailwind.config.js

@@ -16,27 +16,28 @@ module.exports = {
         sans: ["Lato", ...defaultTheme.fontFamily.sans],
       },
       colors: {
-        'item': '#353535',
-        'blue-50': '#e6faff',
-        'blue-100': '#b0efff',
-        'blue-200': '#8ae7ff',
-        'blue-300': '#54dcff',
-        'blue-400': '#33d5ff',
-        'blue-500': '#00cbff',
-        'blue-600': '#00b9e8',
-        'blue-700': '#0090b5',
-        'blue-800': '#00708c',
-        'blue-900': '#00556b',
-        'indigo': '#0068e8',
+        'theme-l-2': '#ffd6e1',
+        'theme-l-3': '#ffbdc8',
+        'theme-l-4': '#ffa3ae',
+        'theme-l-5': '#ff8994',
+        'theme-l-6': '#ff707b',
+        'theme-l-7': '#ff5762',
+        'theme-l-8': '#ff3d48',
+        'theme-l-9': '#f5242f',
+        'theme': '#db0a15',
+        'theme-d-9': '#c20000',
+        'theme-d-8': '#a80000',
+        'theme-d-7': '#8f0000',
+        'theme-d-6': '#750000',
+        'theme-d-5': '#5c0000',
+        'theme-d-4': '#420000',
+        'theme-d-3': '#290000',
+        'theme-d-2': '#0f0000',
 
         'grey-50': '#eaeaea',
-        'grey-100': '#bdbdbd',
         'grey-200': '#9d9d9d',
         'grey-300': '#717171',
-        'grey-400': '#555555',
         'grey-500': '#2b2b2b',
-        'grey-600': '#272727',
-        'grey-700': '#1f1f1f',
         'grey-800': '#181818',
         'grey-900': '#121212',