refactor

ui/src/index.css

@@ -143,7 +143,7 @@ a:hover {
 
 /* modal dark mode */
 .dark .ant-modal-content {
-	background-color: #383737 !important;
+	background-color: #141414 !important;
 	color: white;
 }
 
@@ -182,3 +182,19 @@ a:hover {
 	color: white !important;
 }
 /* end modal dark mode */
+
+.ant-input-group-addon {
+	border: none !important;
+}
+
+.ant-card-bordered,
+.ant-btn,
+.ant-input,
+.ant-menu .ant-menu-title-content {
+	transition: none;
+}
+
+.ant-switch,
+.ant-switch-checked {
+	transition: none !important;
+}

ui/src/pages/Footer/CookieConsent/index.tsx

@@ -11,6 +11,7 @@ import {
 	GOOGLE_ANALYTICS_COOKIES,
 	GOOGLE_ANALYTICS_ID,
 	HIT_TYPE,
+	DECLINE_BUTTON_STYLES,
 } from "./utils/constants";
 import CookieConsentText from "./components/CookieConsentText";
 
@@ -44,10 +45,10 @@ const CookieConsent: React.FC = () => {
 			onAccept={handleAcceptCookie}
 			onDecline={handleDeclineCookie}
 			enableDeclineButton
-			flipButtons={true}
+			flipButtons={false}
 			style={COOKIE_CONSENT_STYLES}
 			buttonStyle={BUTTON_STYLES}
-			declineButtonStyle={BUTTON_STYLES}
+			declineButtonStyle={DECLINE_BUTTON_STYLES}
 			declineButtonClasses=""
 			declineButtonText="Decline"
 			buttonText="Accept"

ui/src/pages/Footer/CookieConsent/utils/constants.ts

@@ -7,12 +7,24 @@ const COOKIE_CONSENT_STYLES = {
 	margin: "20px",
 	borderRadius: "10px",
 	fontSize: "17px",
+	backgroundColor: "#141414",
 };
 
 const BUTTON_STYLES = {
 	padding: "8px 20px",
 	fontSize: "17px",
-	borderRadius: "2px",
+	borderRadius: "8px",
+	backgroundColor: "#333333",
+	color: "white",
+};
+
+const DECLINE_BUTTON_STYLES = {
+	padding: "8px 20px",
+	fontSize: "17px",
+	textDecoration: "underline",
+	backgroundColor: "transparent",
+	color: "white",
+	border: "none",
 };
 
 export {
@@ -21,4 +33,5 @@ export {
 	HIT_TYPE,
 	COOKIE_CONSENT_STYLES,
 	BUTTON_STYLES,
+	DECLINE_BUTTON_STYLES,
 };

ui/src/pages/Home/components/Hero.tsx

@@ -1,8 +1,9 @@
-import React from "react";
+import React, { useContext } from "react";
 import style from "pages/Home/Home.module.scss";
 import { Typography, Image } from "antd";
 import { FEATURE_DATA } from "pages/About/utils/constants";
-import hero from "assets/home/hero.svg";
+import hero from "assets/home/hero_dark.svg";
+
 const { Title } = Typography;
 const Hero: React.FC = () => {
 	return (