Merge pull request #142 from UoaWDCC/remove-hex-from-tw

Remove hex colours from tw

web/src/App.tsx

@@ -10,7 +10,6 @@ const router = createBrowserRouter([
   {
     path: '/',
     element: <MainMenu />,
-
   },
   {
     path: '*',

web/src/components/OurAchievements.tsx

@@ -2,7 +2,7 @@ import MainPageButtonHeadings from "./MainPageButtonHeadings";
 
 const OurAchievements = () => {
   return (
-    <div className="flex flex-col items-center h-screen bg-white font-medium">
+    <div className="flex flex-col items-center h-screen bg-neutral font-medium">
       <MainPageButtonHeadings heading="Our Achievements" />
       <div className="achievements flex flex-row gap-4 items-center mt-8">
         <img
@@ -12,7 +12,7 @@ const OurAchievements = () => {
           alt="img1"
         />
 
-        <div className="w-[180px] h-[250px] bg-[#D9D9D9] font-semibold tracking-[-1px] rounded-[30px]">
+        <div className="w-[180px] h-[250px] bg-lightGrey font-semibold tracking-[-1px] rounded-[30px]">
           <p className="text-center text-lg leading-[8px] mt-12">
             Relay for life:
           </p>
@@ -30,7 +30,7 @@ const OurAchievements = () => {
           alt="img2"
         />
 
-        <div className="w-[180px] h-[250px] bg-[#D9D9D9] font-semibold tracking-[-1px] rounded-[30px]">
+        <div className="w-[180px] h-[250px] bg-lightGrey font-semibold tracking-[-1px] rounded-[30px]">
           <p className="text-center text-lg leading-[8px] mt-12">
             UoA Clubs Awards:
           </p>

web/src/components/OurCommunity.tsx

@@ -1,11 +1,13 @@
 import MainPageButtonHeadings from "./MainPageButtonHeadings";
-
+ 
 const OurCommunity = () => {
     return (
-        <div className="flex flex-col items-center h-screen bg-white text-black font-medium">
+        <div className="flex flex-col items-center h-screen bg-neutral text-black font-medium">
 
             <div className="relative w-full h-screen">
-                <MainPageButtonHeadings heading="Our Community"/>
+                <div className="flex flex-col items-center">
+                    <MainPageButtonHeadings heading="Our Community"/>
+                </div>
                 <div className="flex flex-col items-center">
                     <div className="text-center font-medium w-[36rem] leading-[1.2rem] mt-[4rem]">
                         Join our community to start tracking your efforts!
@@ -15,7 +17,7 @@ const OurCommunity = () => {
                     </div>
                     <div className="text-center text-[5rem] leading-[150%] font-semibold mt-[3.5rem]">1,200</div>
                     <div className="text-center text-[1.4rem]">volunteers in our club</div>
-                    <button className="text-white text-[0.7rem] py-[1rem] mt-[2.2rem] rounded-[30px] px-8 leading-[0.5rem] bg-[#3B87DD]">
+                    <button className="text-white text-[0.7rem] py-[1rem] mt-[2.2rem] rounded-[30px] px-8 leading-[0.5rem] bg-primary">
                         Sign me up!
                     </button>
                 </div>

web/src/components/SponsorDiscount.tsx

@@ -1,8 +1,8 @@
 const SponsorDiscount = (props: any) => {
     return (
       <div className="flex flex-col items-center">
-        <div className="w-0 h-0 border-l-[10px] border-l-transparent border-r-[10px] border-r-transparent border-b-[15px] border-b-[#D9D9D9] mt-2"></div>
-        <div className="bg-[#D9D9D9] h-[70px] rounded-[10px] flex flex-col justify-center">
+        <div className="w-0 h-0 border-l-[10px] border-l-transparent border-r-[10px] border-r-transparent border-b-[15px] border-b-lightGrey mt-2"></div>
+        <div className="bg-lightGrey h-[70px] rounded-[10px] flex flex-col justify-center">
           <div className="ml-[0.7rem] mt-[-0.7rem] text-[0.6rem]">{props.name}</div>
           <div className="mx-auto px-[2.5rem] mt-[0.1rem]">{props.discount}</div>
         </div>

web/src/components/Sponsors.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import SponsorDiscount from './SponsorDiscount';
 import MainPageButtonHeadings from './MainPageButtonHeadings';
-
+ 
 interface SponsorsProps {
   data: { imageSrcBw: string; imageSrcColour: string; alt: string; id: number }[]
 }
@@ -29,7 +29,7 @@ const Sponsors = ({ data }: SponsorsProps) => {
   ];
 
   return (
-    <div className="flex flex-col items-center h-[85vh] bg-white text-black font-medium">
+    <div className="flex flex-col items-center h-[85vh] bg-neutral text-black font-medium">
       <div className="flex flex-col items-center">
         <MainPageButtonHeadings heading="Our Sponsors"/>
         <div className="text-center mt-[1rem]">

web/src/components/UpcomingEvent.tsx

@@ -8,7 +8,7 @@ const UpcomingEvent = () => {
           <p className="text-[6px] bg-gray-200 px-2 py-1 rounded-xl mt-1 ml-[0.5rem] mr-[3rem]">Club Event</p>
         </div>
         <div className="flex items-center mx-4">
-          <button className="bg-[#3C9DDD] rounded-full text-[12px] px-[6.5px] py-[0px] hover:bg-[#60ABF6]">&gt;</button>
+          <button className="bg-primary rounded-full text-[12px] px-[6.5px] py-[0px] hover:bg-blueButtonHover">&gt;</button>
         </div>
       </div>
     );

web/src/data/SponsorList.json

@@ -1,5 +1,5 @@
 {
-    "sponsors": [
+    "sponsors": [ 
         {
             "id": 1,
             "imageSrcColour": "../../assets/gallery/sponsors/colour/kompass-logo-colour.png",

web/tailwind.config.js

@@ -15,7 +15,9 @@ export default {
           neutral: "#FFFEF9", /* basically white */
           "neutral-tan": "#FAF6EB", /* tan color */
           black: "#33342E", /* lighter black */
-          grey: "#818181" /* grey */ 
+          grey: "#818181", /* grey */ 
+          lightGrey: "#D9D9D9", /* light grey */
+          blueButtonHover: "#60ABF6"
         },
         fontSize: {
           'number': ['80px', {

yarn.lock

@@ -66,7 +66,7 @@
     "@firebase/util" "1.9.5"
     tslib "^2.1.0"
 
-"@firebase/[email protected]", "@firebase/[email protected]":
+"@firebase/[email protected]":
   version "0.2.32"
   resolved "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.2.32.tgz"
   integrity sha512-xxfAQKwCmpzwwdBHXT1DTnmilwSeSy6Sa1vThL0q0mq5GPHi52onkm5wl1lrOaiP0uQwQutkZBf/Wy4tDW+5WQ==
@@ -77,12 +77,12 @@
     "@firebase/util" "1.9.5"
     tslib "^2.1.0"
 
-"@firebase/[email protected]", "@firebase/[email protected]":
+"@firebase/[email protected]":
   version "0.9.1"
   resolved "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.9.1.tgz"
   integrity sha512-nFGqTYsnDFn1oXf1tCwPAc+hQPxyvBT/QB7qDjwK+IDYThOn63nGhzdUTXxVD9Ca8gUY/e5PQMngeo0ZW/E3uQ==
 
-"@firebase/[email protected]", "@firebase/[email protected]":
+"@firebase/[email protected]":
   version "0.10.2"
   resolved "https://registry.npmjs.org/@firebase/app/-/app-0.10.2.tgz"
   integrity sha512-Sk0lQYG0IRIUXkj6Ovaxu0o1E1OdC+IR+UYEYLjXuddr6YjnpFuZ69rTxVja2Ef4TpidJky9o8OoVIaXNjDJ5A==
@@ -368,7 +368,7 @@
     tslib "^2.1.0"
     undici "5.28.4"
 
-"@firebase/[email protected]", "@firebase/[email protected]":
+"@firebase/[email protected]":
   version "1.9.5"
   resolved "https://registry.npmjs.org/@firebase/util/-/util-1.9.5.tgz"
   integrity sha512-PP4pAFISDxsf70l3pEy34Mf3GkkUcVQ3MdKp6aSVb7tcpfUQxnsdV7twDd8EkfB6zZylH6wpUAoangQDmCUMqw==
@@ -630,7 +630,7 @@ protobufjs@^7.2.5:
     "@types/node" ">=13.7.0"
     long "^5.0.0"
 
-react-dom@^18.3.1, react-dom@>=16.8:
+react-dom@^18.3.1:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz"
   integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
@@ -653,7 +653,7 @@ [email protected]:
   dependencies:
     "@remix-run/router" "1.16.0"
 
-react@^18.3.1, react@>=16.8:
+react@^18.3.1:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz"
   integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==