From c7c6acbace8a62a8d58438b95b4d79ad54387897 Mon Sep 17 00:00:00 2001 From: DrMint <29893320+DrMint@users.noreply.github.com> Date: Wed, 8 Feb 2023 22:36:06 +0100 Subject: [PATCH] Fixed dark screen when using dark reader extension --- README.md | 6 +++--- public/local-data/websiteInterfaces.json | 15 ++++++++++----- src/components/Containers/Popup.tsx | 4 ++-- src/components/LightBox.tsx | 4 ++-- src/components/Panels/SettingsPopup.tsx | 8 +++++++- src/components/PreviewCard.tsx | 4 ++-- src/graphql/icuParams.ts | 1 + .../localDataGetWebsiteInterfaces.graphql | 1 + src/pages/500.tsx | 1 - src/pages/dev/editor.tsx | 4 ++-- src/pages/index.tsx | 2 -- 11 files changed, 30 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index e283d47..3907ef6 100644 --- a/README.md +++ b/README.md @@ -28,9 +28,10 @@ Our Content Management System (CMS) that uses [Strapi](https://strapi.io/). ### [img.accords-library.com](https://github.com/Accords-Library/img.accords-library.com) -A custom made image processor to overcome the lack of customization offered by Strapi build-in image processor. There is a python script to bulk process all images uploaded to Strapi. Subsequent changes to Strapi's media library can be handled using webhooks. The repo includes a server that listen to these webhook calls, and another to serve the images. +A custom made image processor to overcome the lack of customization offered by Strapi build-in image processor. There is a python script to bulk process all images uploaded to Strapi. Subsequent changes to Strapi's media library can be handled using webhooks. The repo includes a server that listen to these webhook calls, and another to serve the images. Each image in Strapi's media library is converted to four different formats: + - Small: 512x512, quality 60, .webp - Medium: 1024x1024, quality 75, .webp - Large: 2048x2048, quality 80, .webp @@ -39,7 +40,7 @@ Each image in Strapi's media library is converted to four different formats: ### [search.accords-library.com](https://github.com/Accords-Library/search.accords-library.com) A search engine that uses [Meilisearch](https://www.meilisearch.com/). -The repo includes a docker-compose file to run an instance of Meilisearch. There is also a server that populates Meilisearch's documents at startup, then listen to webhooks sent by Strapi for subsequent changes. +The repo includes a docker-compose file to run an instance of Meilisearch. There is also a server that populates Meilisearch's documents at startup, then listen to webhooks sent by Strapi for subsequent changes. ### [gallery.accords-library.com](https://github.com/Accords-Library/gallery.accords-library.com) @@ -139,7 +140,6 @@ A detailled look at the technologies used in this repository: - Handle query params using [Zod](https://zod.dev/) - A secret "Terminal" mode. Can you find it? - ## Installation ```bash diff --git a/public/local-data/websiteInterfaces.json b/public/local-data/websiteInterfaces.json index e0dfce5..215c8dc 100644 --- a/public/local-data/websiteInterfaces.json +++ b/public/local-data/websiteInterfaces.json @@ -179,7 +179,8 @@ "x_results": "{ x, plural, =0 {No results} one {# result} other {# results} }", "definition_x": "Definition {x}", "subitem_of_x": "Subitem of {x}", - "variant_of_x": "Variant of {x}" + "variant_of_x": "Variant of {x}", + "dark_mode_extension_warning": "This website offers a light and dark theme. If you are using a \"dark mode\" browser extension, make sure to disable it for an optimal experience." } }, { @@ -360,7 +361,8 @@ "x_results": "{ x, plural, =0 {Pas de résultat} one {# résultat} other {# résultats} }", "definition_x": "Définition {x}", "subitem_of_x": "Sous-item de {x}", - "variant_of_x": "Variante de {x}" + "variant_of_x": "Variante de {x}", + "dark_mode_extension_warning": "Ce site web propose un thème clair et un thème sombre. Si vous utilisez une extension de navigateur qui simule un thème sombre, veillez à la désactiver pour une expérience optimale." } }, { @@ -541,7 +543,8 @@ "x_results": null, "definition_x": null, "subitem_of_x": null, - "variant_of_x": null + "variant_of_x": null, + "dark_mode_extension_warning": null } }, { @@ -722,7 +725,8 @@ "x_results": null, "definition_x": null, "subitem_of_x": null, - "variant_of_x": null + "variant_of_x": null, + "dark_mode_extension_warning": null } }, { @@ -903,7 +907,8 @@ "x_results": null, "definition_x": null, "subitem_of_x": null, - "variant_of_x": null + "variant_of_x": null, + "dark_mode_extension_warning": null } } ] diff --git a/src/components/Containers/Popup.tsx b/src/components/Containers/Popup.tsx index 319aa12..aa79144 100644 --- a/src/components/Containers/Popup.tsx +++ b/src/components/Containers/Popup.tsx @@ -47,8 +47,8 @@ export const Popup = ({ )}>
diff --git a/src/components/LightBox.tsx b/src/components/LightBox.tsx index 2858a0c..a393490 100644 --- a/src/components/LightBox.tsx +++ b/src/components/LightBox.tsx @@ -61,8 +61,8 @@ export const LightBox = ({ )}>
{ const [preferredLanguages, setPreferredLanguages] = useAtomPair( @@ -95,7 +96,12 @@ export const SettingsPopup = (): JSX.Element => { cIf(!is1ColumnLayout, "grid-cols-2") )}>
-

{format("theme")}

+
+

{format("theme")}

+ + + +
+ className="absolute inset-0 grid place-content-center bg-shade/0 + text-light transition-colors group-hover:bg-shade/50"> { const textarea = event.target as HTMLTextAreaElement; handleInput(textarea.value); }} - className="h-[70vh] w-full rounded-xl bg-mid !bg-opacity-40 p-8 + className="h-[70vh] w-full rounded-xl bg-mid/40 p-8 font-mono text-black outline-none" value={markdown} title="Input textarea" @@ -382,7 +382,7 @@ const Editor = (props: Props): JSX.Element => {

Preview

-
+
diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 1827203..96facbd 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -5,7 +5,6 @@ import { Terminal } from "components/Cli/Terminal"; import { atoms } from "contexts/atoms"; import { useAtomGetter } from "helpers/atoms"; import { getOpenGraph } from "helpers/openGraph"; -import { useFormat } from "hooks/useFormat"; import { getFormat } from "helpers/i18n"; import { getReadySdk } from "graphql/sdk"; import { PostWithTranslations } from "types/types"; @@ -16,7 +15,6 @@ import { PostWithTranslations } from "types/types"; */ const Home = (props: PostStaticProps): JSX.Element => { - const { format } = useFormat(); const isTerminalMode = useAtomGetter(atoms.layout.terminalMode); if (isTerminalMode) {