Cookies banner privacy policy page (#479)

* Should render cookie banner at every location

* implemented visual component of cookie banner

should render at bottom of page
should adjust to screen vh/vw
should follow figma design

* updated tw-components index.tsx to include cookiebanner

* should highlight and hover clickable text

"no thanks" should be able to highlight and hover
"Cookie Policy" should be able to highlight and hover

* Added js-cookie pacakge

* Cookies Banner implementation and accessibility

Should pass accessibility requirements
Should save cookie consent preference

* should fix lint error

added temporart href tag for Cookie Policy
changed anchor tag to button

* removed changed export for input group

* Tidied styling inconsistencies

Added more padding for content within banner
Add more space between the buttons
Fixed on-hover for buttons w/ shaddow & correct color matching
Added inner-shaddow for banner to make it pop more

* Implemented and Styled Privacy Policy Page

Should dynamically render w/ view screen change
Created .css to host repetetive tailwind styles

* Added Privacy Policy Page Assets

Added privacy policy page background and image as SVG

* Should create route for privacy policy page

* Updated Cookie Banner with correct routing

added privacy policy page href tag
changed header to correct text-color

* Re-factor tailwind classes to not use tailwind

* prettier-lint: missing comma

* prettier linter: trailing comma added

backend/frontend/urls.py

@@ -10,6 +10,7 @@
     "qualifier/<int:page_number>",
     "login",
     "signup",
+    "privacypolicy",
 ]
 
 urlpatterns = [path(url_path, views.index) for url_path in url_paths]

frontend/src/assets/images/images.tsx

@@ -240,3 +240,5 @@ export {
 export { default as loginTanBg } from "./svgs/login-tan-bg.svg?url";
 export { default as dotsSvg } from "./svgs/dots.svg?url";
 export { default as loginIllustration } from "./svgs/login-illustration.svg?url";
+export { default as privacyPageBg } from "./svgs/privacy-policy-bg-top.svg?url";
+export { default as  privacyPolicyIllustration} from "./svgs/privacy-policy-illustration.svg?url";

frontend/src/router/Router.tsx

@@ -16,6 +16,7 @@ import {
 import AuthenticationPage from "pages/Authentication/page";
 import HomeLayout from "layouts/HomeLayout";
 import DefaultNavLayout from "layouts/DefaultNavLayout";
+import PrivacyPolicyPage from "pages/PrivacyPolicyPage/PrivacyPolicyPage";
 
 const router = createBrowserRouter([
   {
@@ -57,6 +58,10 @@ const router = createBrowserRouter([
             path: "*",
             element: <NotFoundPage />,
           },
+          {
+            path: "privacypolicy",
+            element: <PrivacyPolicyPage/>
+          },
         ],
       },
     ],

frontend/src/tw-components/CookieBanner.tsx

@@ -27,11 +27,11 @@ function CookieBanner(props: CookieBannerProps) {
       aria-label="cookies banner"
       className={`${
         hidden ? "hidden" : ""
-      } fixed flex flex-col bottom-12 left-1/2 transform -translate-x-1/2 bg-white w-3/4 p-4 z-50W rounded-lg shadow-2xl shadow-inner`}
+      } fixed flex flex-col bottom-12 left-1/2 transform -translate-x-1/2 bg-white w-3/4 p-4 z-50 rounded-lg shadow-2xl shadow-inner`}
     >
       <div className="min-h-48 max-h-64 justify-between space-y-5 p-6">
         <div className="flex flex-row justify-between items-center">
-          <p className="text-xl font-bold">This site use cookies!</p>
+          <p className="text-xl font-bold text-charcoal">This site use cookies!</p>
           <IconButton
             iconUrl={iconX}
             label="close"
@@ -41,7 +41,7 @@ function CookieBanner(props: CookieBannerProps) {
         <p className="max-w-[80%]">
           We use cookies to improve your experience. By clicking "Accept
           Cookies", you are agreeing to the collection of data as described in
-          our <a href='/' className="text-blue-dark underline cursor-pointer hover:text-blue-dark-hover focus:bg-blue-dark-focused">Cookie Policy</a>
+          our <a href='/privacypolicy' className="text-blue-dark underline cursor-pointer hover:text-blue-dark-hover focus:bg-blue-dark-focused">Cookie Policy</a>
         </p>
         <div className="flex flex-row items-center space-x-12">
           <button className="rounded px-10 py-1 bg-blue-dark text-white hover:bg-blue-dark-hover hover:shadow-lg focus:bg-blue-dark-focused" onClick={handleAcceptCookies}>

frontend/tailwind.config.js

@@ -5,6 +5,7 @@ module.exports = {
     "./src/pages/Authentication/*.tsx",
     "./src/tw-components/*.tsx",
     "./src/pages/LandingPage/*.tsx",
+    "./src/pages/PrivacyPolicyPage/*",
   ], // Will change to "./src/**/*.{js,jsx,tsx}", "./templates/index.html"
   theme: {
     screens: {