From 255585cd9fd7e2c60835e60294932196f58f988e Mon Sep 17 00:00:00 2001 From: Gabe Kangas Date: Sun, 10 Jul 2022 16:42:35 -0700 Subject: [PATCH] Update components to use the new style/color names --- .../ChatUserMessage.module.scss | 20 +++------- .../common/StreamInfo/StreamInfo.module.scss | 38 ++++++++++++------- .../common/StreamInfo/StreamInfo.tsx | 6 ++- web/components/ui/Content/Content.module.scss | 2 +- web/components/ui/Content/Content.tsx | 9 +---- .../CustomPageContent.module.scss | 20 ++++++++++ .../CustomPageContent}/CustomPageContent.tsx | 4 +- web/components/ui/Footer/Footer.module.scss | 5 +++ web/components/ui/Footer/Footer.tsx | 3 +- web/components/video/player.scss | 10 ++--- web/stories/CustomPageContent.stories.tsx | 2 +- web/styles/globals.scss | 3 +- 12 files changed, 75 insertions(+), 47 deletions(-) create mode 100644 web/components/ui/CustomPageContent/CustomPageContent.module.scss rename web/components/{ => ui/CustomPageContent}/CustomPageContent.tsx (54%) diff --git a/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss b/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss index 4d6f14c75..974bba474 100644 --- a/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss +++ b/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss @@ -15,21 +15,13 @@ } } .message { - color: var(--color-owncast-gray-300); + color: var(--theme-text-primary); mark { - color: white; - padding: 0.1em 0.4em; - border-radius: 0.5em 0.3em; - background: transparent; - background-image: linear-gradient( - to right, - rgba(255, 225, 0, 0.1), - rgba(255, 225, 0, 0.358) 4%, - rgba(255, 225, 0, 0.3) - ); - -webkit-box-decoration-break: clone; - box-decoration-break: clone; + padding-left: 0.35em; + padding-right: 0.35em; + color: var(--theme-text-highlight); + background-color: var(--color-bg-highlight); } } @@ -56,7 +48,7 @@ .customBorder { left: auto; right: 0px; - opacity: .85; + opacity: 0.85; &:after { left: 0px; } diff --git a/web/components/common/StreamInfo/StreamInfo.module.scss b/web/components/common/StreamInfo/StreamInfo.module.scss index 77a3be103..1d3e3c491 100644 --- a/web/components/common/StreamInfo/StreamInfo.module.scss +++ b/web/components/common/StreamInfo/StreamInfo.module.scss @@ -8,12 +8,6 @@ margin-right: 1.5vw; } -.pageContentSection { - // background-color: var(--theme-background-secondary); - border-radius: var(--theme-rounded-corners); - width: 100%; -} - .logoTitleSection { display: flex; align-items: center; @@ -30,8 +24,11 @@ } .subtitle { - font-size: 1.6vw; - font-weight: bold; + margin-top: 0.35em; + font-size: 1.5em; + font-weight: 300; + color: var(--theme-text-secondary); + text-transform: uppercase; } } @@ -39,7 +36,7 @@ &.root { position: relative; display: flex; - padding: 0 .3rem; + padding: 0 0.3rem; align-items: center; justify-content: space-between; .mobileInfo { @@ -61,17 +58,32 @@ .liveStatus { display: flex; align-items: center; - margin-left: .5rem; - font-size: .8rem; + margin-left: 0.5rem; + font-size: 0.8rem; gap: 4px; .liveCircle { border-radius: 50%; background-color: red; - width: .5rem; - height: .5rem; + width: 0.5rem; + height: 0.5rem; } } } } } +.tagList { + font-family: var(--theme-text-display-font-family); + color: var(--theme-text-secondary); + + ul { + margin: 0; + padding: 0; + } + + li { + display: inline-block; + margin: 0 0.7em 0 0; + font-weight: 600; + } +} diff --git a/web/components/common/StreamInfo/StreamInfo.tsx b/web/components/common/StreamInfo/StreamInfo.tsx index 016c8d358..d06d69ae9 100644 --- a/web/components/common/StreamInfo/StreamInfo.tsx +++ b/web/components/common/StreamInfo/StreamInfo.tsx @@ -56,10 +56,12 @@ export default function StreamInfo({ isMobile }: Props) {
{name}
- {title} + {title || 'Stream title or server description goes here'}
-
{tags.length > 0 && tags.map(tag => #{tag} )}
+
+ {tags.length > 0 && tags.map(tag => #{tag} )} +
diff --git a/web/components/ui/Content/Content.module.scss b/web/components/ui/Content/Content.module.scss index 6c649c3a3..bf54dacf1 100644 --- a/web/components/ui/Content/Content.module.scss +++ b/web/components/ui/Content/Content.module.scss @@ -1,9 +1,9 @@ .root { display: grid; grid-template-columns: 1fr auto; + padding: 0.7em; } - .leftCol { display: flex; flex-direction: column; diff --git a/web/components/ui/Content/Content.tsx b/web/components/ui/Content/Content.tsx index 6801d2c9a..f55fc71e0 100644 --- a/web/components/ui/Content/Content.tsx +++ b/web/components/ui/Content/Content.tsx @@ -16,7 +16,7 @@ import { isMobileAtom, } from '../../stores/ClientConfigStore'; import { ClientConfig } from '../../../interfaces/client-config.model'; -import CustomPageContent from '../../CustomPageContent'; +import CustomPageContent from '../CustomPageContent/CustomPageContent'; import OwncastPlayer from '../../video/OwncastPlayer'; import FollowerCollection from '../../FollowersCollection'; import s from './Content.module.scss'; @@ -152,12 +152,7 @@ export default function ContentComponent() {
{isChatVisible && isMobile && ( - +
; + return
; } diff --git a/web/components/ui/Footer/Footer.module.scss b/web/components/ui/Footer/Footer.module.scss index e69de29bb..f1a8c6872 100644 --- a/web/components/ui/Footer/Footer.module.scss +++ b/web/components/ui/Footer/Footer.module.scss @@ -0,0 +1,5 @@ +.footer { + font-size: 0.85em; + font-weight: 500; + color: var(--theme-text-secondary); +} diff --git a/web/components/ui/Footer/Footer.tsx b/web/components/ui/Footer/Footer.tsx index f5edf007f..8927e02d2 100644 --- a/web/components/ui/Footer/Footer.tsx +++ b/web/components/ui/Footer/Footer.tsx @@ -1,4 +1,5 @@ import { Layout } from 'antd'; +import s from './Footer.module.scss'; const { Footer } = Layout; @@ -10,7 +11,7 @@ export default function FooterComponent(props: Props) { const { version } = props; return ( -