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's users with precision search.</text> <text style={{ marginTop: 10 }}> Équiper les utilisateurs de l'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%; +`;