From 642fde563a4c2e7a487b6227ee15268eb82359b4 Mon Sep 17 00:00:00 2001
From: Erik Michelson <github@erik.michelson.eu>
Date: Sun, 15 Sep 2024 22:38:09 +0200
Subject: [PATCH] fix(styles): use correct dark-mode selector in css

The dark-mode selector changed from the class "dark" attached to the
body element to a data-attribute with some react-bootstrap upgrade.
This commit reflects this change in our custom css.

Signed-off-by: Erik Michelson <github@erik.michelson.eu>
---
 frontend/global-styles/github-markdown.scss   | 19 +++++++++----------
 frontend/global-styles/index.scss             |  2 +-
 .../highlighted-code.module.scss              |  2 +-
 .../sidebar/style/sidebar.module.scss         |  2 +-
 4 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/frontend/global-styles/github-markdown.scss b/frontend/global-styles/github-markdown.scss
index 373e77ca9..13175a407 100644
--- a/frontend/global-styles/github-markdown.scss
+++ b/frontend/global-styles/github-markdown.scss
@@ -654,7 +654,7 @@
   h4,
   h5,
   h6 {
-    body.dark &, & {
+    body[data-bs-theme=dark] &, & {
       margin-top: 24px;
       margin-bottom: 16px;
       font-weight: 600;
@@ -663,7 +663,7 @@
   }
 
   h1 {
-    body.dark &, & {
+    body[data-bs-theme=dark] &, & {
       font-size: 2em;
     }
   }
@@ -675,35 +675,35 @@
   }
 
   h2 {
-    body.dark &, & {
+    body[data-bs-theme=dark] &, & {
       font-size: 1.5em;
     }
   }
 
   h3 {
-    body.dark &, & {
+    body[data-bs-theme=dark] &, & {
       font-size: 1.25em;
     }
   }
 
   h4 {
-    body.dark &, & {
+    body[data-bs-theme=dark] &, & {
       font-size: 1em;
     }
   }
 
   h5 {
-    body.dark &, & {
+    body[data-bs-theme=dark] &, & {
       font-size: .875em;
     }
   }
 
   h6 {
-    body.dark &, & {
+    body[data-bs-theme=dark] &, & {
       font-size: .85em;
     }
 
-    body.dark & {
+    body[data-bs-theme=dark] & {
       color: #b4c7d5;
     }
   }
@@ -722,7 +722,7 @@
   }
 
   li {
-    word-wrap: break-all;
+    word-wrap: break-word;
   }
 
   li > p {
@@ -826,7 +826,6 @@
 
   pre code {
     display: inline;
-    max-width: auto;
     padding: 0;
     margin: 0;
     overflow: visible;
diff --git a/frontend/global-styles/index.scss b/frontend/global-styles/index.scss
index 5f54eb214..db7b98ca5 100644
--- a/frontend/global-styles/index.scss
+++ b/frontend/global-styles/index.scss
@@ -18,7 +18,7 @@
 @import "./markdown-tweaks";
 @import "./reveal";
 
-.text-black, body.dark .text-black {
+.text-black, body[data-bs-theme=dark] .text-black {
   color: $black;
 }
 
diff --git a/frontend/src/components/common/highlighted-code/highlighted-code.module.scss b/frontend/src/components/common/highlighted-code/highlighted-code.module.scss
index 908443205..5b1823f6c 100644
--- a/frontend/src/components/common/highlighted-code/highlighted-code.module.scss
+++ b/frontend/src/components/common/highlighted-code/highlighted-code.module.scss
@@ -14,7 +14,7 @@
     display: grid !important;
     grid-template-columns: auto minmax(0, 1fr);
 
-    :global(body.dark) & {
+    :global(body[data-bs-theme=dark]) & {
       background-color: rgb(27, 31, 35);
     }
 
diff --git a/frontend/src/components/editor-page/sidebar/style/sidebar.module.scss b/frontend/src/components/editor-page/sidebar/style/sidebar.module.scss
index a7a72c180..b064d81df 100644
--- a/frontend/src/components/editor-page/sidebar/style/sidebar.module.scss
+++ b/frontend/src/components/editor-page/sidebar/style/sidebar.module.scss
@@ -9,7 +9,7 @@
   --sidebar-menu-width: 280px;
   --sidebar-separator-color: var(--bs-secondary);
 
-  :global(body.dark) & {
+  :global(body[data-bs-theme=dark]) & {
     --sidebar-separator-color: rgba(255, 255, 255, 0.2);
   }