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: {