Draft: rough-ish draft of proposed color theme changes (#2067)

* color experimentation and troubleshooting

* create color scheme, assign colors, more ant overrides

* fun selection color

* Prettified Code!

* Correctly import opensans

* Prettified Code!

* Organize+standardize colors/names and update the app to use them

* Prettified Code!

* Use css var references instead of resolving value of vars in css files

* Prettified Code!

Co-authored-by: gingervitis <gingervitis@users.noreply.github.com>
Co-authored-by: Gabe Kangas <gabek@real-ity.com>
Co-authored-by: gabek <gabek@users.noreply.github.com>

web/components/ui/Content/Content.module.scss

@@ -1,7 +1,16 @@
 .root {
   display: grid;
   grid-template-columns: 1fr auto;
-  padding: 0.7em;
+
+  background-color: var(--theme-color-background-main);
+
+  .topSection {
+    padding: 0;
+    background-color: var(--theme-color-components-video-background);
+  }
+  .lowerSection {
+    padding: 0em 2em;
+  }
 }
 
 .leftCol {
@@ -22,13 +31,12 @@
     flex-direction: column;
     height: calc(100vh - 64px);
     overflow: hidden;
-    .topHalf {
+    .topSection {
       display: grid;
       grid-template-rows: 30vh 5vh 5vh;
       height: 40vh;
-      // overflow: hidden;
     }
-    .lowerHalf {
+    .lowerSection {
       height: 60vh;
     }
   }

web/components/ui/Content/Content.tsx

@@ -113,7 +113,8 @@ export default function ContentComponent() {
     <Content className={rootClassName}>
       <div className={s.leftContent}>
         <Spin className={s.loadingSpinner} size="large" spinning={appState.appLoading} />
-        <div className={s.topHalf}>
+
+        <div className={s.topSection}>
           {online && <OwncastPlayer source="/hls/stream.m3u8" online={online} />}
           {!online && (
             <OfflineBanner
@@ -129,6 +130,8 @@ export default function ContentComponent() {
             lastDisconnectTime={lastDisconnectTime}
             viewerCount={viewerCount}
           />
+        </div>
+        <div className={s.midSection}>
           <div className={s.buttonsLogoTitleSection}>
             <ActionButtonRow>
               {externalActionButtons}
@@ -161,6 +164,9 @@ export default function ContentComponent() {
             links={socialHandles}
             logo="/logo"
           />
+        </div>
+
+        <div className={s.lowerSection}>
           <Tabs defaultActiveKey="0" style={{ height: '100%' }}>
             {isChatVisible && isMobile && (
               <TabPane tab="Chat" key="0" style={{ height: '100%' }}>

web/components/ui/CustomPageContent/CustomPageContent.module.scss

@@ -9,12 +9,10 @@
   line-height: 1.5em;
   margin: 0;
   padding: 0;
-  width: 80%;
-  max-width: 1200px;
-
-  color: var(--theme-text);
-  background-color: var(--theme-background-secondary);
-  padding: 1em;
+  color: var(--theme-color-palette-0);
+  background-color: var(--theme-color-palette-4);
+  padding: calc(3 * var(--content-padding));
+  border-radius: var(--theme-rounded-corners);
 
   // Allow the content to fill the width on narrow screens.
   @media only screen and (max-width: 768px) {

web/components/ui/Footer/Footer.module.scss

@@ -1,5 +1,7 @@
 .footer {
   font-size: 0.85em;
   font-weight: 500;
-  color: var(--theme-text-secondary);
+  color: var(--theme-color-palette-1);
+  background-color: transparent;
+  padding: var(--content-padding);
 }

web/components/ui/Header/Header.module.scss

@@ -5,13 +5,18 @@
   align-items: center;
   justify-content: space-between;
   z-index: 20;
-  padding: 0.4rem .7rem;
-  background-color: var(--default-bg-color);
+  padding: 0.4rem 0.7rem;
+  box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%);
+
+  background-color: var(--theme-color-background-header);
+
   .logo {
     display: flex;
     align-items: center;
     span {
-      margin-left: .5rem;
+      color: var(--theme-color-components-text-on-dark);
+      font-family: var(--theme-text-display-font-family);
+      margin-left: 0.5rem;
       font-size: 1.5rem;
       font-weight: 600;
     }

web/components/ui/Logo/Logo.module.scss

@@ -10,8 +10,8 @@
   border-radius: 50%;
   border-width: 5px;
   border-style: solid;
-  border-color: var(--theme-primary-color);
-  background-color: var(--theme-background-secondary);
+  border-color: var(--theme-color-palette-0);
+  background-color: var(--theme-color-palette-4);
 }
 
 .container {

web/components/ui/Modal/Modal.module.scss

@@ -8,4 +8,5 @@
   display: block;
   height: 100%;
   padding: 2vw;
+  background-color: var(--theme-color-components-modal-content-background);
 }

web/components/ui/OfflineBanner/OfflineBanner.module.scss

@@ -7,7 +7,8 @@
   width: clamp(200px, 100%, 300px);
   display: flex;
   flex-direction: column;
-  background-color: var(--theme-background-secondary);
+  color: var(--theme-color-components-text-on-light);
+  background-color: var(--theme-color-background-main);
   margin: 1rem auto;
   border-radius: var(--theme-rounded-corners);
   padding: 1rem;

web/components/ui/Sidebar/Sidebar.module.scss

@@ -1,5 +1,5 @@
 .root {
-  background-color: var(--theme-background-secondary);
+  background-color: var(--theme-color-components-chat-background);
   display: none;
   --header-h: 64px;
 }
@@ -13,7 +13,7 @@
     max-height: calc(100vh - var(--header-h));
   }
 }
-/* 
+/*
 First div is .ant-layout-sider-children
 Only way to target it apparently
 */
@@ -24,4 +24,3 @@ Only way to target it apparently
   flex-grow: 1 !important;
   height: 100% !important;
 }
-

web/components/ui/Statusbar/Statusbar.module.scss

@@ -1,12 +1,10 @@
 .statusbar {
   display: flex;
   align-items: center;
-  font-size: .8rem;
-  padding-left: 10px;
-  padding-right: 10px;
+  font-size: 0.8rem;
   justify-content: space-between;
   height: 2rem;
   width: 100%;
-  color: var(--color-owncast-gray-300);
-  background-color: var(--theme-background-secondary);
+  padding: var(--content-padding);
+  color: var(--theme-color-palette-5);
 }