Implementing Styled Components

Implementing Styled Components and removing unused CSS objects.

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

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;
-}

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;

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>
   );
 };

src/components/logo/CFIALogo.tsx

@@ -1,14 +1,13 @@
 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 = () => {
   // Add type annotation for the component.
   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>
   );

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;

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>
   );
 };