From 7c31dbdbfde0ac3fcabeafdd8de28508fb70a99e Mon Sep 17 00:00:00 2001 From: Gecko! <74975165+SmartGecko44@users.noreply.github.com> Date: Sun, 21 Jul 2024 15:11:17 +0200 Subject: [PATCH] Create background component --- .idea/inspectionProfiles/Project_Default.xml | 8 ++++++++ .idea/sonarlint/issuestore/index.pb | 6 +++++- .idea/sonarlint/securityhotspotstore/index.pb | 6 +++++- gxcko.me/index.html | 1 - gxcko.me/src/components/Background.tsx | 19 +++++++++++++++++++ gxcko.me/src/components/DarkModeToggle.tsx | 7 ++++++- gxcko.me/styles/backgrounds.css | 14 ++++++++++++-- 7 files changed, 55 insertions(+), 6 deletions(-) create mode 100644 .idea/inspectionProfiles/Project_Default.xml create mode 100644 gxcko.me/src/components/Background.tsx diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 0000000..3b44f7d --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,8 @@ + + + + \ No newline at end of file diff --git a/.idea/sonarlint/issuestore/index.pb b/.idea/sonarlint/issuestore/index.pb index 9544214..0777d1f 100644 --- a/.idea/sonarlint/issuestore/index.pb +++ b/.idea/sonarlint/issuestore/index.pb @@ -99,4 +99,8 @@ B CODE_OF_CONDUCT.md,0/8/0834ae016f8fea5cff771880c0be1d55299732ff : -.gitignore,a/5/a5cc2925ca8258af241be7e5b0381edf30266302 \ No newline at end of file +.gitignore,a/5/a5cc2925ca8258af241be7e5b0381edf30266302 +V +&gxcko.me/src/components/Background.tsx,9/e/9e03bbc2a26711f36db8fc9c4dbab2accc542f54 +\ +,.idea/inspectionProfiles/Project_Default.xml,4/9/496a238a6afa168dbaf6efd37bb459331589579c \ No newline at end of file diff --git a/.idea/sonarlint/securityhotspotstore/index.pb b/.idea/sonarlint/securityhotspotstore/index.pb index 4bef15d..3f4f1a4 100644 --- a/.idea/sonarlint/securityhotspotstore/index.pb +++ b/.idea/sonarlint/securityhotspotstore/index.pb @@ -99,4 +99,8 @@ $gxcko.me/scripts/google-analytics.js,c/0/c0439a90d80ff833b744fdc178f2c6b9f9126 \ ,gxcko.me/src/components/ContentContainer.tsx,8/9/892cd35915ad2d704ebeb6e0ae839c47980469b3 J -gxcko.me/src/vite-env.d.ts,6/5/65a371848a91471f76104aed1b983415e0e7e093 \ No newline at end of file +gxcko.me/src/vite-env.d.ts,6/5/65a371848a91471f76104aed1b983415e0e7e093 +V +&gxcko.me/src/components/Background.tsx,9/e/9e03bbc2a26711f36db8fc9c4dbab2accc542f54 +\ +,.idea/inspectionProfiles/Project_Default.xml,4/9/496a238a6afa168dbaf6efd37bb459331589579c \ No newline at end of file diff --git a/gxcko.me/index.html b/gxcko.me/index.html index f2997d5..ad2efcb 100644 --- a/gxcko.me/index.html +++ b/gxcko.me/index.html @@ -12,7 +12,6 @@ -
diff --git a/gxcko.me/src/components/Background.tsx b/gxcko.me/src/components/Background.tsx new file mode 100644 index 0000000..8afa4cc --- /dev/null +++ b/gxcko.me/src/components/Background.tsx @@ -0,0 +1,19 @@ +import {useTheme} from "../contexts/ThemeContext.tsx"; + +interface BackgroundProps { + dialogOpen: boolean; +} + +export default function Background({ dialogOpen }: BackgroundProps) { + const {theme} = useTheme(); + + if (theme === 'light') { + return null; + } else if (dialogOpen) { + return null; + } + + return ( +
+ ); +} diff --git a/gxcko.me/src/components/DarkModeToggle.tsx b/gxcko.me/src/components/DarkModeToggle.tsx index 874ceae..9f2cb5a 100644 --- a/gxcko.me/src/components/DarkModeToggle.tsx +++ b/gxcko.me/src/components/DarkModeToggle.tsx @@ -2,12 +2,14 @@ import React, {useEffect, useRef} from "react"; import {useTheme} from "../contexts/ThemeContext.tsx"; import {checkCookiesAccepted, getCookie, setCookie} from "./CookiePopup.tsx"; import {useBlur} from "../contexts/BlurContext.tsx"; +import Background from "./Background.tsx"; const DarkModeToggle: React.FC = () => { const {theme, toggleTheme} = useTheme(); const {blur, toggleBlur} = useBlur(); const dialogRef = useRef(null); const dialogShown = useRef(false); + const dialogOpen = useRef(false); useEffect(() => { if (!getCookie('dialogShown') && !dialogShown.current) { @@ -21,6 +23,7 @@ const DarkModeToggle: React.FC = () => { const dialog = dialogRef.current; if (dialog) { + dialogOpen.current = true; if (typeof dialog.showModal === "function") { dialog.showModal(); } else { @@ -61,6 +64,7 @@ const DarkModeToggle: React.FC = () => { if (confirmBtn === null) console.warn('Confirm button not found'); document.removeEventListener('click', handler); toggleBlur(); + dialogOpen.current = false; }, 1000); // Delay equal to the transition duration } else { console.warn('Dialog element not found'); @@ -105,6 +109,7 @@ const DarkModeToggle: React.FC = () => { `} +

Would you like to toggle the dark mode?

@@ -118,4 +123,4 @@ const DarkModeToggle: React.FC = () => { ) } -export default DarkModeToggle; \ No newline at end of file +export default DarkModeToggle; diff --git a/gxcko.me/styles/backgrounds.css b/gxcko.me/styles/backgrounds.css index eb26ab8..5ea1b62 100644 --- a/gxcko.me/styles/backgrounds.css +++ b/gxcko.me/styles/backgrounds.css @@ -1,6 +1,4 @@ body { - background-color: #ffffff; - color: #000000; font-family: "Aptos", serif; transition: all 1s ease-in-out; } @@ -15,6 +13,18 @@ body.inBackground { transition: all 1s ease-in-out; } +#background { + display: block; + position: fixed; + left: -50%; + top: -50%; + z-index: -1; + width: 200%; + height: 200%; + background-color: #222222; + transition: all 1s ease-in-out; +} + .bubble { background: lightgray; padding: 20px;