From 76cf89f114d47a3b84bf7fbf6bdd1070697456ad Mon Sep 17 00:00:00 2001 From: lifeparticle Date: Thu, 28 Sep 2023 18:22:38 +1000 Subject: [PATCH] refactor --- ui/src/assets/hero.svg | 1 + ui/src/assets/home/hero_dark.svg | 1 + .../assets/home/{hero.svg => hero_light.svg} | 0 ui/src/index.css | 18 +++++++++++++++++- ui/src/pages/Footer/CookieConsent/index.tsx | 5 +++-- .../Footer/CookieConsent/utils/constants.ts | 15 ++++++++++++++- ui/src/pages/Home/components/Hero.tsx | 5 +++-- 7 files changed, 39 insertions(+), 6 deletions(-) create mode 100644 ui/src/assets/hero.svg create mode 100644 ui/src/assets/home/hero_dark.svg rename ui/src/assets/home/{hero.svg => hero_light.svg} (100%) diff --git a/ui/src/assets/hero.svg b/ui/src/assets/hero.svg new file mode 100644 index 00000000..611ed7e1 --- /dev/null +++ b/ui/src/assets/hero.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ui/src/assets/home/hero_dark.svg b/ui/src/assets/home/hero_dark.svg new file mode 100644 index 00000000..7178502d --- /dev/null +++ b/ui/src/assets/home/hero_dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ui/src/assets/home/hero.svg b/ui/src/assets/home/hero_light.svg similarity index 100% rename from ui/src/assets/home/hero.svg rename to ui/src/assets/home/hero_light.svg diff --git a/ui/src/index.css b/ui/src/index.css index e3017f04..d0b77773 100644 --- a/ui/src/index.css +++ b/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; +} diff --git a/ui/src/pages/Footer/CookieConsent/index.tsx b/ui/src/pages/Footer/CookieConsent/index.tsx index 0ab5c6c1..7e8e42cb 100644 --- a/ui/src/pages/Footer/CookieConsent/index.tsx +++ b/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" diff --git a/ui/src/pages/Footer/CookieConsent/utils/constants.ts b/ui/src/pages/Footer/CookieConsent/utils/constants.ts index a3a40ebd..de073426 100644 --- a/ui/src/pages/Footer/CookieConsent/utils/constants.ts +++ b/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, }; diff --git a/ui/src/pages/Home/components/Hero.tsx b/ui/src/pages/Home/components/Hero.tsx index d64a4b85..8dcd2d36 100644 --- a/ui/src/pages/Home/components/Hero.tsx +++ b/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 (