From d2afeef0e48da42c46ba9340d2ebcd32684b8176 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Wed, 26 Apr 2023 15:39:53 -0700
Subject: [PATCH] fix(embed): fix post-pr #2863 merge offline banner text color

---
 web/components/ui/Content/Content.module.scss | 34 ++++++++++---------
 web/components/ui/Content/Content.tsx         |  2 +-
 .../OfflineBanner/OfflineBanner.module.scss   |  5 ++-
 3 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/web/components/ui/Content/Content.module.scss b/web/components/ui/Content/Content.module.scss
index 1ce8ff101..92c61c60d 100644
--- a/web/components/ui/Content/Content.module.scss
+++ b/web/components/ui/Content/Content.module.scss
@@ -1,18 +1,18 @@
 @import '../../../styles/mixins.scss';
 
-  .lowerSection {
-    padding: var(--content-padding);
-  }
+.lowerSection {
+  padding: var(--content-padding);
+}
 
-  .lowerSectionMobile {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    flex-shrink: 0;
-    padding: 0.3em;
-    position: absolute;
-    bottom: 0;
-    width: 100%;
+.lowerSectionMobile {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  flex-shrink: 0;
+  padding: 0.3em;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
 
   @include screen(tablet) {
     //sets the position of tabbed content for online mode
@@ -21,14 +21,13 @@
 
   @include screen(mobile) {
     //sets the position of tabbed content for online mode
-  top: 280px;
-  }
-      
+    top: 280px;
   }
+}
 
 .mobileNoTabs {
   padding-top: 20px;
-} 
+}
 
 .topSectionElement {
   background-color: var(--theme-color-components-video-background);
@@ -76,3 +75,6 @@
     margin-top: unset;
   }
 }
+.offlineBanner {
+  color: var(--theme-color-background-main);
+}
diff --git a/web/components/ui/Content/Content.tsx b/web/components/ui/Content/Content.tsx
index ef2dc4f4d..802109c82 100644
--- a/web/components/ui/Content/Content.tsx
+++ b/web/components/ui/Content/Content.tsx
@@ -210,7 +210,7 @@ export const Content: FC = () => {
                   lastLive={lastDisconnectTime}
                   onNotifyClick={() => setShowNotifyModal(true)}
                   onFollowClick={() => setShowFollowModal(true)}
-                  className={styles.topSectionElement}
+                  className={classnames([styles.topSectionElement, styles.offlineBanner])}
                 />
               </div>
             )}
diff --git a/web/components/ui/OfflineBanner/OfflineBanner.module.scss b/web/components/ui/OfflineBanner/OfflineBanner.module.scss
index f71d7bd82..ddc82a381 100644
--- a/web/components/ui/OfflineBanner/OfflineBanner.module.scss
+++ b/web/components/ui/OfflineBanner/OfflineBanner.module.scss
@@ -6,10 +6,10 @@
   align-items: center;
 
   @include screen(tablet) {
-      height: 430px;
+    height: 430px;
   }
 
-  @include screen (mobile) {
+  @include screen(mobile) {
     height: 280px;
   }
 }
@@ -20,7 +20,6 @@
   flex-direction: column;
   margin: 3rem auto;
   padding: 2.4em;
-  color: var(--color-owncast-palette-3);
 
   @include screen(tablet) {
     font-size: 1.2rem;