From cf4bf07727e4360e31365c0c424d3b7b020cc767 Mon Sep 17 00:00:00 2001
From: CFIALeronB <133677161+CFIALeronB@users.noreply.github.com>
Date: Tue, 5 Dec 2023 13:13:25 -0500
Subject: [PATCH] Implementing Styled Components

Implementing Styled Components and removing unused CSS objects.
---
 package-lock.json                             | 104 ++++++++++++++--
 package.json                                  |   1 +
 src/App.css                                   |  45 -------
 src/_versions.ts                              |   8 +-
 src/components/header/Header.tsx              |   5 +-
 src/components/logo/CFIALogo.tsx              |   3 +-
 .../search_results/SearchResultsList.css      |  32 +----
 .../search_results/SearchResultsList.tsx      |   5 +-
 src/components/searchbar/SearchBar.css        |  24 ----
 src/components/searchbar/SearchBar.tsx        |  10 +-
 src/pages/home/Home.module.css                |  61 ----------
 src/pages/home/Home.tsx                       |  36 +++---
 src/pages/search/SearchPage.tsx               |  19 +--
 src/styles/colours.tsx                        |   7 ++
 src/styles/indexElements.tsx                  | 111 ++++++++++++++++++
 15 files changed, 263 insertions(+), 208 deletions(-)
 create mode 100644 src/styles/colours.tsx
 create mode 100644 src/styles/indexElements.tsx

diff --git a/package-lock.json b/package-lock.json
index eda0a52..d32cbe8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "react-router": "^6.14.2",
         "react-router-dom": "^6.14.2",
         "react-scripts": "^5.0.1",
+        "styled-components": "^6.1.1",
         "typescript": "^5.1.6",
         "web-vitals": "^3.4.0"
       },
@@ -2322,6 +2323,24 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
+      "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -4473,6 +4492,11 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
     },
+    "node_modules/@types/stylis": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.4.tgz",
+      "integrity": "sha512-36ZrGJ8fgtBr6nwNnuJ9jXIj+bn/pF6UoqmrQT7+Y99+tFFeHHsoR54+194dHdyhPjgbeoNz3Qru0oRt0l6ASQ=="
+    },
     "node_modules/@types/testing-library__jest-dom": {
       "version": "5.14.9",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.9.tgz",
@@ -6028,6 +6052,14 @@
         "node": ">= 6"
       }
     },
+    "node_modules/camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -6471,6 +6503,14 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/css-declaration-sorter": {
       "version": "6.4.1",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz",
@@ -6682,6 +6722,16 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "node_modules/css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "node_modules/css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -6878,8 +6928,7 @@
     "node_modules/csstype": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
-      "dev": true
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
@@ -13309,9 +13358,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
       "funding": [
         {
           "type": "github",
@@ -13968,9 +14017,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.27",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.27.tgz",
-      "integrity": "sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==",
+      "version": "8.4.32",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",
+      "integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==",
       "funding": [
         {
           "type": "opencollective",
@@ -13986,7 +14035,7 @@
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.6",
+        "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       },
@@ -16523,6 +16572,11 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -16935,6 +16989,33 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/styled-components": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.1.tgz",
+      "integrity": "sha512-cpZZP5RrKRIClBW5Eby4JM1wElLVP4NQrJbJ0h10TidTyJf4SIIwa3zLXOoPb4gJi8MsJ8mjq5mu2IrEhZIAcQ==",
+      "dependencies": {
+        "@emotion/is-prop-valid": "^1.2.1",
+        "@emotion/unitless": "^0.8.0",
+        "@types/stylis": "^4.0.2",
+        "css-to-react-native": "^3.2.0",
+        "csstype": "^3.1.2",
+        "postcss": "^8.4.31",
+        "shallowequal": "^1.1.0",
+        "stylis": "^4.3.0",
+        "tslib": "^2.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0"
+      }
+    },
     "node_modules/stylehacks": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
@@ -16950,6 +17031,11 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.0.tgz",
+      "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ=="
+    },
     "node_modules/sucrase": {
       "version": "3.34.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz",
diff --git a/package.json b/package.json
index 9abe3e4..0f963b4 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "react-router": "^6.14.2",
     "react-router-dom": "^6.14.2",
     "react-scripts": "^5.0.1",
+    "styled-components": "^6.1.1",
     "typescript": "^5.1.6",
     "web-vitals": "^3.4.0"
   },
diff --git a/src/App.css b/src/App.css
index 9f749ab..e69de29 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,45 +0,0 @@
-.App {
-  background-color: #ffffff;
-  width: 100vw;
-  height: 100vh;
-}
-
-.logo-container {
-  padding-top: 20vh;
-  width: 40%;
-  margin: auto;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  min-width: 200px;
-}
-
-.logo-container-search {
-  padding-top: 3vh;
-  width: 40%;
-  margin: auto;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  min-width: 200px;
-}
-
-.searchBar-container {
-  padding-top: 5vh;
-  width: 40%;
-  margin: auto;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  min-width: 200px;
-}
-
-.searchBar-container-search {
-  padding-top: 0;
-  width: 60%;
-  margin: auto;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  min-width: 200px;
-}
diff --git a/src/_versions.ts b/src/_versions.ts
index 66b3409..835e710 100644
--- a/src/_versions.ts
+++ b/src/_versions.ts
@@ -9,10 +9,10 @@ export interface TsAppVersion {
     gitTag?: string;
 };
 export const versions: TsAppVersion = {
-    version: '0.1.1',
+    version: '0.1.0',
     name: 'finesse-frontend',
-    versionDate: '2023-11-06T17:26:41.959Z',
-    gitCommitHash: '499e4ad',
-    versionLong: '0.1.0-499e4ad',
+    versionDate: '2023-12-05T16:56:21.108Z',
+    gitCommitHash: '7ba9978',
+    versionLong: '0.1.0-7ba9978',
 };
 export default versions;
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
index 972f7b7..68a3195 100644
--- a/src/components/header/Header.tsx
+++ b/src/components/header/Header.tsx
@@ -1,13 +1,14 @@
 import React from "react"; // Import 'React' from the 'react' package.
 import cfia from "../../assets/CFIA_Banner.png";
 import styles from "../../pages/home/Home.module.css";
+import { HeaderContainer } from "../../styles/indexElements";
 
 // Header Component -> Displays CFIA banner image.
 const Header: React.FC = () => {
   // Add type annotation for the component.
   return (
     <header className={styles.header} role={"banner"}>
-      <div className={styles.headerContainer}>
+      <HeaderContainer>
         <nav>
           <ul className={styles.headerNavList}>
             <li className={styles.headerNavLeftMargin}>
@@ -23,7 +24,7 @@ const Header: React.FC = () => {
             <li className={styles.headerRightText}>Alpha Version</li>
           </ul>
         </nav>
-      </div>
+      </HeaderContainer>
     </header>
   );
 };
diff --git a/src/components/logo/CFIALogo.tsx b/src/components/logo/CFIALogo.tsx
index 0a88ccf..1979f5f 100644
--- a/src/components/logo/CFIALogo.tsx
+++ b/src/components/logo/CFIALogo.tsx
@@ -1,6 +1,5 @@
 import React from "react"; // Import 'React' from the 'react' package.
 import cfia from "../../assets/CFIA_SmartSearch_Logo.png";
-import styles from "../../pages/home/Home.module.css";
 
 // Header Component -> Displays CFIA banner image.
 const CFIALogo: React.FC = () => {
@@ -8,7 +7,7 @@ const CFIALogo: React.FC = () => {
   return (
     <div>
       <a href="/" title="ACIA | CFIA">
-        <img src={cfia} alt="CFIA logo" className={styles.githubLogo} />
+        <img src={cfia} alt="CFIA logo" style={{ height: 110 }} />
       </a>
     </div>
   );
diff --git a/src/components/search_results/SearchResultsList.css b/src/components/search_results/SearchResultsList.css
index d7d4ecd..9705344 100644
--- a/src/components/search_results/SearchResultsList.css
+++ b/src/components/search_results/SearchResultsList.css
@@ -1,31 +1,3 @@
-.results-list {
-  width: 98%;
-  background-color: white;
-  display: flex;
-  flex-direction: column;
-  box-shadow: 0px 0px 8px #ddd;
-  border-radius: 10px;
-  margin-top: 1rem;
-  max-height: auto;
-  overflow-y: auto;
-  margin-left: 1%;
-}
-
-.searchPage_header {
-  display: flex;
-  top: 0;
-  z-index: 100;
-  background-color: white;
-  align-items: flex-start;
-  padding: 30px;
-  border-bottom: 1px;
-  margin-left: 10vh;
-}
-
-.search-result:hover {
-  background-color: #f3f3f3;
-}
-
 .search-result {
   text-decoration: none;
   color: inherit;
@@ -35,6 +7,10 @@
   border-bottom-style: inset;
 }
 
+.search-result:hover {
+  background-color: #f3f3f3;
+}
+
 .search-result p {
   margin: 0;
   font-size: 20px;
diff --git a/src/components/search_results/SearchResultsList.tsx b/src/components/search_results/SearchResultsList.tsx
index f5a82ed..060c18f 100644
--- a/src/components/search_results/SearchResultsList.tsx
+++ b/src/components/search_results/SearchResultsList.tsx
@@ -2,6 +2,7 @@
 import React from "react";
 import "./SearchResultsList.css";
 import SearchResult from "./SearchResult";
+import { ResultList } from "../../styles/indexElements";
 
 interface SearchResultListProps {
   data: Array<{
@@ -27,13 +28,13 @@ const SearchResultList: React.FC<SearchResultListProps> = ({ data, query }) => {
   }
 
   return (
-    <div className="results-list">
+    <ResultList>
       {data?.map((item, index) => {
         // Log each item in the data array
         console.log(`Rendering item at index ${index}:`, item);
         return <SearchResult key={item.id} item={item} query={query} />;
       })}
-    </div>
+    </ResultList>
   );
 };
 
diff --git a/src/components/searchbar/SearchBar.css b/src/components/searchbar/SearchBar.css
index fdfa33f..e56b56d 100644
--- a/src/components/searchbar/SearchBar.css
+++ b/src/components/searchbar/SearchBar.css
@@ -1,28 +1,8 @@
-.input-wrapper {
-  width: 100%;
-  height: 3rem;
-  border: black;
-  border-radius: 20px;
-  padding: 0 13px;
-  box-shadow: 0px 0px 8px #ddd;
-  background-color: white;
-  display: flex;
-  align-items: center;
-  margin-left: 30px;
-}
-
 .button {
   all: unset;
   cursor: pointer;
 }
 
-.form-wrapper {
-  width: 100%;
-  height: 4rem;
-  display: flex;
-  align-items: center;
-}
-
 input {
   background-color: transparent;
   border: none;
@@ -35,7 +15,3 @@ input {
 input:focus {
   outline: none;
 }
-
-#search-icon {
-  color: #05486c;
-}
diff --git a/src/components/searchbar/SearchBar.tsx b/src/components/searchbar/SearchBar.tsx
index abf4759..16e3530 100644
--- a/src/components/searchbar/SearchBar.tsx
+++ b/src/components/searchbar/SearchBar.tsx
@@ -5,6 +5,7 @@ import "./SearchBar.css";
 import { useNavigate } from "react-router-dom";
 import { useStateValue } from "../../StateProvider";
 import { actionTypes } from "../../reducer";
+import { FormWrapper, InputWrapper } from "../../styles/indexElements";
 
 interface SearchBarProps {
   term?: string;
@@ -43,8 +44,9 @@ export const SearchBar: React.FC<SearchBarProps> = ({ term }) => {
   };
 
   return (
-    <form className="form-wrapper">
-      <div className="input-wrapper">
+    <FormWrapper>
+      <InputWrapper>
+        {" "}
         <FaSearch id="fa-arrow-right" />
         <input
           placeholder={previousSearchQuery}
@@ -56,7 +58,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({ term }) => {
         <button className="button" type="submit" onClick={search}>
           <FaArrowRight id="fa-arrow-right" style={{ color: "#05486c" }} />
         </button>
-      </div>
-    </form>
+      </InputWrapper>
+    </FormWrapper>
   );
 };
diff --git a/src/pages/home/Home.module.css b/src/pages/home/Home.module.css
index 04cf8ba..cdfdc78 100644
--- a/src/pages/home/Home.module.css
+++ b/src/pages/home/Home.module.css
@@ -1,79 +1,18 @@
-.layout {
-  display: fixed;
-  flex-direction: column;
-  height: 100%;
-}
-
 .header {
   background-color: #05486c;
   color: #f2f2f2;
 }
 
-.headerContainer {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  margin-right: 12px;
-  margin-left: 12px;
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-
-.headerTitleContainer {
-  display: flex;
-  align-items: center;
-  margin-right: 40px;
-  color: #f2f2f2;
-  text-decoration: none;
-}
-
-.headerLogo {
-  height: 40px;
-}
-
-.headerTitle {
-  margin-left: 12px;
-  font-weight: 600;
-}
-
 .headerNavList {
   display: flex;
   list-style: none;
   padding-left: 0;
 }
 
-.headerNavPageLink {
-  color: #f2f2f2;
-  text-decoration: none;
-  opacity: 0.75;
-
-  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-  transition-duration: 500ms;
-  transition-property: opacity;
-}
-
-.headerNavPageLink:hover {
-  opacity: 1;
-}
-
-.headerNavPageLinkActive {
-  color: #f2f2f2;
-  text-decoration: none;
-}
-
 .headerNavLeftMargin {
   margin-left: 0px;
 }
 
-.microsoftLogo {
-  height: 23px;
-  font-weight: 600;
-}
-
-.githubLogo {
-  height: 110px;
-}
-
 .headerRightText {
   font-weight: bold;
   position: absolute;
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx
index f80d519..f23f804 100644
--- a/src/pages/home/Home.tsx
+++ b/src/pages/home/Home.tsx
@@ -8,6 +8,13 @@ import { environment } from "../../environments/environment";
 import { DebugPanel } from "../../components/debug_panel/DebugPanel";
 import { useStateValue, actionTypes } from "../../StateProvider";
 import { FaCog } from "react-icons/fa";
+import {
+  LayoutContainer,
+  LogoContainer,
+  SearchBarContainer,
+  SloganContainer,
+  VersionTextContainer,
+} from "../../styles/indexElements";
 
 const Home: React.FC = () => {
   const [alertMessage, setAlertMessage] = useState("");
@@ -57,7 +64,7 @@ const Home: React.FC = () => {
   }, [useSimulatedData]);
 
   return (
-    <div className={styles.layout}>
+    <LayoutContainer>
       <Header />
       {isError && <div className={styles.warning}>{alertMessage}</div>}
       <FaCog
@@ -85,32 +92,23 @@ const Home: React.FC = () => {
           }}
         />
       )}
-      <div className="logo-container">
+      <LogoContainer>
         <CFIALogo />
-      </div>
-      <div className="searchBar-container">
+      </LogoContainer>
+      <SearchBarContainer>
         <SearchBar />
-      </div>
-      <div
-        style={{
-          display: "flex",
-          textAlign: "center",
-          marginTop: 20,
-          flexDirection: "column",
-          alignItems: "center",
-          color: "grey",
-        }}
-      >
+      </SearchBarContainer>
+      <SloganContainer>
         <text>Empowering agency&apos;s users with precision search.</text>
         <text style={{ marginTop: 10 }}>
           Équiper les utilisateurs de l&apos;agence avec la recherche de
           précision.
         </text>
-      </div>
-      <div className={styles.versionText}>
+      </SloganContainer>
+      <VersionTextContainer>
         {environment.version !== "" ? "v" + environment.version : ""}
-      </div>
-    </div>
+      </VersionTextContainer>
+    </LayoutContainer>
   );
 };
 
diff --git a/src/pages/search/SearchPage.tsx b/src/pages/search/SearchPage.tsx
index 91a588c..707a905 100644
--- a/src/pages/search/SearchPage.tsx
+++ b/src/pages/search/SearchPage.tsx
@@ -1,12 +1,16 @@
 // SearchPage.tsx
 import React, { useEffect } from "react";
-import styles from "../home/Home.module.css";
 import Header from "../../components/header/Header";
 import { useStateValue } from "../../StateProvider";
 import CFIALogo from "../../components/logo/CFIALogo";
 import { SearchBar } from "../../components/searchbar/SearchBar";
 import SearchResultList from "../../components/search_results/SearchResultsList";
 import { useApiUtil } from "../../api/useApiUtil";
+import {
+  LayoutContainer,
+  SearchPageHeaderContainer,
+  SearchBarSearchContainer,
+} from "../../styles/indexElements";
 
 const SearchPage: React.FC = () => {
   const {
@@ -25,17 +29,16 @@ const SearchPage: React.FC = () => {
   }, [term]);
 
   return (
-    <div className={styles.layout}>
+    <LayoutContainer>
       <Header />
-      <div className="searchPage_header">
+      <SearchPageHeaderContainer>
         <CFIALogo />
-
-        <div className="searchBar-container-search">
+        <SearchBarSearchContainer>
           <SearchBar term={termProp} />
-        </div>
-      </div>
+        </SearchBarSearchContainer>
+      </SearchPageHeaderContainer>
       <SearchResultList data={data} query={termProp} />
-    </div>
+    </LayoutContainer>
   );
 };
 
diff --git a/src/styles/colours.tsx b/src/styles/colours.tsx
new file mode 100644
index 0000000..b71f82a
--- /dev/null
+++ b/src/styles/colours.tsx
@@ -0,0 +1,7 @@
+// Common Colours
+export const colours = {
+  CFIA_Background_Blue: "#05486C",
+  CFIA_Background_White: "#FFF",
+  CFIA_Font_White: "#FFF",
+  CFIA_Font_Black: "#333",
+};
diff --git a/src/styles/indexElements.tsx b/src/styles/indexElements.tsx
new file mode 100644
index 0000000..c6fe566
--- /dev/null
+++ b/src/styles/indexElements.tsx
@@ -0,0 +1,111 @@
+import styled from "styled-components";
+
+export const LayoutContainer = styled.div`
+  display: fixed;
+  flex-direction: column;
+  height: 100%;
+`;
+
+export const LogoContainer = styled.div`
+  padding-top: 20vh;
+  width: 40%;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 200px;
+`;
+
+export const SearchBarContainer = styled.div`
+  padding-top: 5vh;
+  width: 40%;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 200px;
+`;
+
+export const SearchBarSearchContainer = styled.div`
+  padding-top: 0;
+  width: 60%;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 200px;
+`;
+
+export const SloganContainer = styled.div`
+  display: flex;
+  text-align: center;
+  margin-top: 20px;
+  flex-direction: column;
+  align-items: center;
+  color: grey;
+`;
+
+export const VersionTextContainer = styled.div`
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+  color: grey;
+  font-size: 16px;
+  font-weight: bold;
+`;
+
+export const SearchPageHeaderContainer = styled.div`
+  display: flex;
+  top: 0;
+  z-index: 100;
+  background-color: white;
+  align-items: flex-start;
+  padding: 30px;
+  border-bottom: 1px;
+  margin-left: 10vh;
+`;
+
+export const HeaderContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  margin-right: 12px;
+  margin-left: 12px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+`;
+
+export const FormWrapper = styled.form`
+  width: 100%;
+  height: 4rem;
+  display: flex;
+  align-items: center;
+`;
+
+export const InputWrapper = styled.div`
+  width: 100%;
+  height: 3rem;
+  border: black;
+  border-radius: 20px;
+  padding: 0 13px;
+  box-shadow: 0px 0px 8px #ddd;
+  background-color: white;
+  display: flex;
+  align-items: center;
+  margin-left: 30px;
+`;
+
+export const ResultList = styled.div`
+  width: 98%;
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0px 0px 8px #ddd;
+  border-radius: 10px;
+  margin-top: 1rem;
+  max-height: auto;
+  overflow-y: auto;
+  margin-left: 1%;
+`;