some webv2 UI polish (#2940)

* style tweaks for Action Button, UserMenu, Modal

* a bunch of misc polish; some around chat

* Prettified Code!

* cleanup

* fix formatting

* Reduce content padding a bit

* some stylesheet cleanup

* fix action button sizing

* Remove action button height completely

---------

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

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

@@ -55,8 +55,7 @@
   }
 
   .lowerSection {
-    padding: 0em 2%;
-    margin-bottom: 2em;
+    padding: var(--content-padding);
   }
 
   .lowerSectionMobile {

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

@@ -2,6 +2,7 @@
 
 .customPageContent {
   font-size: 1rem;
+	font-weight: 300;
   line-height: 1.6em;
   color: var(--theme-color-components-text-on-light);
 
@@ -18,4 +19,7 @@
   p {
     margin: 0.5rem 0;
   }
+	a:hover {
+		color: var(--color-owncast-palette-7)
+	}
 }

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

@@ -11,9 +11,9 @@
   color: var(--theme-color-components-text-on-dark);
   font-family: var(--theme-text-body-font-family);
 
-  padding: 0.6rem;
-  font-size: 0.8rem;
-  font-weight: 600;
+  padding: 0.6rem 1rem;
+  font-size: 0.75rem;
+  font-weight: 400;
   border-top: 1px solid rgba(214, 211, 211, 0.5);
 
   @include screen(tablet) {

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

@@ -6,7 +6,7 @@
   align-items: center;
   justify-content: space-between;
   z-index: 20;
-  padding: 0.7rem;
+  padding: 0.7rem var(--content-padding);
   box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%);
   background-color: var(--theme-color-background-header);
 
@@ -22,6 +22,7 @@
 
 .logoImage {
   padding: 0.2rem;
+	margin-right: .75rem;
   display: none;
 
   @include screen(desktop) {
@@ -37,7 +38,6 @@
 .title {
   color: var(--theme-color-components-text-on-dark);
   font-family: var(--theme-text-display-font-family);
-  margin-left: 0.5rem;
   margin-bottom: 0px;
   font-size: clamp(1rem, 4vw, 1.6rem);
   font-weight: 600;
@@ -74,3 +74,11 @@
   background-color: white;
   padding: 0.2rem;
 }
+
+.chatOfflineText {
+	color: var(--theme-color-palette-8);
+	font-size: .75rem;
+}
+.toolTip {
+	font-size: .8rem;
+}

web/components/ui/Header/Header.tsx

@@ -1,4 +1,4 @@
-import { Tag, Tooltip, Avatar } from 'antd';
+import { Tooltip, Avatar } from 'antd';
 import { FC } from 'react';
 import cn from 'classnames';
 import dynamic from 'next/dynamic';
@@ -48,8 +48,12 @@ export const Header: FC<HeaderComponentProps> = ({ name, chatAvailable, chatDisa
     </div>
     {chatAvailable && !chatDisabled && <UserDropdown />}
     {!chatAvailable && !chatDisabled && (
-      <Tooltip title="Chat is available when the stream is live." placement="left">
-        <Tag className={styles.offlineTag}>Chat offline</Tag>
+      <Tooltip
+        overlayClassName={styles.toolTip}
+        title="Chat will be available when the stream is live."
+        placement="left"
+      >
+        <span className={styles.chatOfflineText}>Chat is offline</span>
       </Tooltip>
     )}
   </header>

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

@@ -1,3 +1,4 @@
+
 .spinner {
   position: absolute;
   top: 50%;
@@ -7,7 +8,7 @@
 .content {
   display: block;
   height: 100%;
-  padding: 2vw;
+  padding: 1.25rem;
   background-color: var(--theme-color-components-modal-content-background);
   color: var(--theme-color-components-modal-content-text);
 
@@ -17,3 +18,35 @@
     margin-top: unset;
   }
 }
+
+.modal {
+	:global(.ant-modal-header) {
+		color: var(--theme-color-components-modal-header-text);
+		font-family: var(--theme-text-display-font-family);
+		padding: 1rem 1.25rem;
+	}
+
+	:global(.ant-modal-title) {
+		color: var(--theme-color-components-modal-header-text);
+		font-size: 17px;
+		font-weight: 600;
+	}
+
+	:global(.ant-modal-body) {
+		overflow: auto;
+		border-radius: 0 0 var(--theme-rounded-corners) var(--theme-rounded-corners);
+	}
+	:global(.ant-modal-close-x) {
+		font-size: 12px;
+	}
+	:global(.ant-modal) {
+		color: var(--theme-color-components-text-on-light);
+		h1 {
+			color: var(--theme-color-components-text-on-light);
+		}
+	}
+
+	:global(.ant-modal-content) {
+		box-shadow: 3px 15px 15px -3px rgba(0, 0, 0, 0.15), 0px 4px 6px -2px rgba(0, 0, 0, 0.08);
+	}
+}

web/components/ui/Modal/Modal.tsx

@@ -72,6 +72,7 @@ export const Modal: FC<ModalProps> = ({
       footer={null}
       centered
       destroyOnClose
+      className={styles.modal}
     >
       <ErrorBoundary
         // eslint-disable-next-line react/no-unstable-nested-components

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

@@ -9,14 +9,9 @@
   width: clamp(00px, 100%, 600px);
   display: flex;
   flex-direction: column;
-  color: var(--theme-color-components-text-on-light);
-  background-color: var(--theme-color-background-main);
+  color: var(--theme-color-background-main);
   margin: 3rem auto;
-  border-radius: var(--theme-rounded-corners);
   padding: 2.4em;
-  font-size: 1.3rem;
-  border: 1px solid lightgray;
-  font-family: var(--theme-text-display-font-family);
 
   @include screen(tablet) {
     font-size: 1.2rem;
@@ -27,6 +22,7 @@
 
 .bodyText {
   line-height: 2rem;
+	font-size: 1.2rem;
 }
 
 .separator {
@@ -35,18 +31,21 @@
 }
 
 .lastLiveDate {
-  margin-top: 15px;
-  font-size: 1rem;
-  opacity: 0.5;
+  margin-top: 2rem;
+  font-size: .8rem;
+  color: var(--theme-color-palette-8);
   font-family: var(--theme-text-body-font-family);
+	font-weight: 300;
 
   .clockIcon {
-    margin-right: 5px;
+    margin-right: 6px;
   }
 }
 
 .header {
-  font-weight: bold;
+	font-family: var(--theme-text-display-font-family);
+	font-weight: 600;
+	font-size: 1.4rem;
 }
 
 .footer {

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

@@ -1,7 +1,6 @@
 .statusbar {
   display: flex;
   align-items: center;
-  font-size: 0.8rem;
   justify-content: space-between;
   height: 2rem;
   width: 100%;
@@ -9,5 +8,19 @@
   color: var(--theme-color-components-video-status-bar-foreground);
   background-color: var(--theme-color-components-video-status-bar-background);
   font-family: var(--theme-text-display-font-family);
+
+	font-size: 11px;
   font-weight: 400;
 }
+
+.onlineMessage {
+	letter-spacing: .5px;
+}
+
+.viewerCount {
+	vertical-align: middle;
+}
+.viewerIcon {
+	display: inline-block;
+	margin-right: .5rem;
+}

web/components/ui/Statusbar/Statusbar.tsx

@@ -63,12 +63,12 @@ export const Statusbar: FC<StatusbarProps> = ({
     const duration = makeDurationString(new Date(lastConnectTime));
     onlineMessage = online ? `Live for  ${duration}` : 'Offline';
     rightSideMessage = viewerCount > 0 && (
-      <div className={styles.right}>
-        <span>
+      <>
+        <span className={styles.viewerIcon}>
           <EyeFilled />
         </span>
         <span>{` ${viewerCount}`}</span>
-      </div>
+      </>
     );
   } else if (!online) {
     onlineMessage = 'Offline';
@@ -79,8 +79,8 @@ export const Statusbar: FC<StatusbarProps> = ({
 
   return (
     <div className={classNames(styles.statusbar, className)} role="status">
-      <div>{onlineMessage}</div>
-      <div>{rightSideMessage}</div>
+      <span className={styles.onlineMessage}>{onlineMessage}</span>
+      <span className={styles.viewerCount}>{rightSideMessage}</span>
     </div>
   );
 };