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>
2023-04-24 10:58:57 -07:00
parent 39bfaf2ec5
commit 44483a45d3
33 changed files with 393 additions and 114 deletions
--- a/web/components/action-buttons/ActionButton/ActionButton.module.scss
+++ b/web/components/action-buttons/ActionButton/ActionButton.module.scss
@@ -1,10 +1,11 @@
 .button {
-  margin: 3px;
-  font-weight: 400;
-  font-family: var(--theme-text-display-font-family);
+  font-weight: 600;
+
  .icon {
+    max-height: 18px;
    height: 90%;
    margin-right: 5px;
+    margin-left: -3px;
    margin-bottom: 1%;
  }
 }
--- a/web/components/action-buttons/ActionButtonRow/ActionButtonRow.module.scss
+++ b/web/components/action-buttons/ActionButtonRow/ActionButtonRow.module.scss
@@ -1,11 +1,14 @@
 .row {
-  padding: .3rem;
+  padding: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  button {
-    margin-left: .3rem;
-    margin-right: .3rem;
+    margin-left: 0.3rem;
+    margin-right: 0.3rem;
+    &:last-of-type {
+      margin-right: 0;
+    }
  }
 }
--- a/web/components/chat/ChatActionMessage/ChatActionMessage.module.scss
+++ b/web/components/chat/ChatActionMessage/ChatActionMessage.module.scss
@@ -1,5 +1,16 @@
 .chatAction {
-  padding: 5px;
-  text-align: center;
-  color: var(--theme-color-components-chat-text);
+  padding: 8px;
+	margin: 4px 1rem;
+	border-radius: 4px;
+
+	text-align: center;
+	font-size: 12px;
+
+	color: var(--theme-color-components-chat-text);
+	background-color: var(--theme-color-palette-0);
+
+
+	p {
+		margin: 0;
+	}
 }
--- a/web/components/chat/ChatContainer/ChatContainer.module.scss
+++ b/web/components/chat/ChatContainer/ChatContainer.module.scss
@@ -15,6 +15,8 @@
    align-items: center;
    opacity: 0;
    animation: show 250ms forwards ease-in-out 500ms;
+		font-size: 12px;
+		font-weight: 600;
  }
 }

@@ -23,6 +25,7 @@
  flex-direction: column;
  background-color: var(--theme-color-components-chat-background);
  height: 100%;
+	font-size: var(--chat-message-text-size);
 }
 .virtuoso {
  width: auto;
--- a/web/components/chat/ChatJoinMessage/ChatJoinMessage.module.scss
+++ b/web/components/chat/ChatJoinMessage/ChatJoinMessage.module.scss
@@ -1,4 +1,10 @@
 .root {
  padding: 10px 0px;
  color: var(--theme-color-components-chat-text);
+	font-weight: 300;
+	font-size: var(--chat-message-text-size);
+}
+
+.icon {
+	padding: 0 var(--chat-notification-icon-padding) 0 16px;
 }
--- a/web/components/chat/ChatJoinMessage/ChatJoinMessage.tsx
+++ b/web/components/chat/ChatJoinMessage/ChatJoinMessage.tsx
@@ -1,8 +1,9 @@
 import { FC } from 'react';
 import dynamic from 'next/dynamic';
-import styles from './ChatJoinMessage.module.scss';
 import { ModerationBadge } from '../ChatUserBadge/ModerationBadge';

+import styles from './ChatJoinMessage.module.scss';
+
 // Lazy loaded components

 const TeamOutlined = dynamic(() => import('@ant-design/icons/TeamOutlined'), {
@@ -25,10 +26,10 @@ export const ChatJoinMessage: FC<ChatJoinMessageProps> = ({
  return (
    <div className={styles.root}>
      <span style={{ color }}>
-        <span style={{ padding: '0 10px' }}>
+        <span className={styles.icon}>
          <TeamOutlined />
        </span>
-        <span style={{ fontWeight: 'bold' }}>{displayName}</span>
+        <span className={styles.user}>{displayName}</span>
        {isAuthorModerator && (
          <span>
            <ModerationBadge userColor={userColor} />
--- a/web/components/chat/ChatModeratorNotification/ChatModeratorNotification.module.scss
+++ b/web/components/chat/ChatModeratorNotification/ChatModeratorNotification.module.scss
@@ -5,6 +5,7 @@
  color: var(--theme-color-components-chat-text);
  margin: 5px;
  padding: 10px 10px;
+	font-size: var(--chat-message-text-size);
  @include flexCenter;

  .icon {
--- a/web/components/chat/ChatNameChangeMessage/ChatNameChangeMessage.module.scss
+++ b/web/components/chat/ChatNameChangeMessage/ChatNameChangeMessage.module.scss
@@ -1,15 +1,18 @@
 .nameChangeView {
  display: flex;
-  font-size: 0.9rem;
+  font-size: var(--chat-message-text-size);
+	font-weight: 300;
  border-radius: var(--theme-rounded-corners);
  padding: 5px 15px;
  color: var(--theme-color-components-chat-text);
  & .nameChangeText {
-    font-weight: bold;
-    font-family: var(--theme-text-display-font-family);
+    font-weight: 300;
    & .plain {
-      font-weight: normal;
-      font-family: var(--theme-text-body-font-family) !important;
+      font-weight: 300;
    }
  }
 }
+
+.icon {
+	padding-right: var(--chat-notification-icon-padding);
+}
--- a/web/components/chat/ChatNameChangeMessage/ChatNameChangeMessage.tsx
+++ b/web/components/chat/ChatNameChangeMessage/ChatNameChangeMessage.tsx
@@ -22,7 +22,7 @@ export const ChatNameChangeMessage: FC<ChatNameChangeMessageProps> = ({ message

  return (
    <div className={styles.nameChangeView}>
-      <div style={{ marginRight: 5, height: 'max-content', margin: 'auto 5px auto 0' }}>
+      <div className={styles.icon}>
        <EditFilled />
      </div>
      <div className={styles.nameChangeText}>
--- a/web/components/chat/ChatSocialMessage/ChatSocialMessage.module.scss
+++ b/web/components/chat/ChatSocialMessage/ChatSocialMessage.module.scss
@@ -3,7 +3,7 @@
  border-width: 1px;
  border-style: solid;
  padding: 10px 10px;
-  border-radius: 15px;
+  border-radius: var(--theme-rounded-corners);
  background-color: var(--theme-color-background-main);
  margin: 0.5em;

--- a/web/components/chat/ChatSystemMessage/ChatSystemMessage.module.scss
+++ b/web/components/chat/ChatSystemMessage/ChatSystemMessage.module.scss
@@ -33,7 +33,7 @@
      padding-left: 0.3em;
      padding-right: 0.3em;
      color: var(--theme-color-palette-4);
-      border-radius: var(--theme-rounded-corners);
+      border-radius: var(--chat-text-highlight-border-radius);
      background-color: var(--color-owncast-palette-7);
    }
  }
--- a/web/components/chat/ChatTextField/ChatTextField.module.scss
+++ b/web/components/chat/ChatTextField/ChatTextField.module.scss
@@ -34,7 +34,8 @@
  }

  div[role='textbox'] {
-    font-size: 16px;
+    font-size: 13px;
+		font-weight: 400;
    padding: 0.3rem;
    background-color: inherit;
    border-color: var(--theme-color-components-form-field-border);
@@ -53,7 +54,7 @@
  border: none;
  background: none;
  cursor: pointer;
-  padding: 0 1rem;
+  padding: 0 .25rem;
 }

 .sendButton {
--- a/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
+++ b/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
@@ -1,5 +1,7 @@
-$border-style: 4px solid currentColor;
+$border-style: 3px solid currentColor;
 $p-size: 8px;
+$p-h-size: 8px;
+$p-v-size: 2px;

 .root {
  * {
@@ -7,28 +9,27 @@ $p-size: 8px;
  }
  border-left: $border-style;
  position: relative;
-  font-size: 0.9rem;
-  padding: 0px $p-size $p-size $p-size;
+  font-size: var(--chat-message-text-size);
+  padding: $p-v-size $p-h-size;
  color: var(--theme-color-components-chat-text);

  .user {
    display: flex;
    align-items: center;
-    font-family: var(--theme-text-display-font-family);
-    font-weight: 600;
+		font-weight: 600;
  }

  .message {
    overflow: hidden;
    overflow-wrap: anywhere;
-    font-weight: 500;
+    font-weight: 400;
    position: relative;

    mark {
      padding-left: 0.3em;
      padding-right: 0.3em;
      color: var(--theme-color-palette-4);
-      border-radius: var(--theme-rounded-corners);
+      border-radius: var(--chat-text-highlight-border-radius);
      background-color: var(--color-owncast-palette-7);
    }

@@ -60,7 +61,7 @@ $p-size: 8px;
  .modMenuWrapper {
    position: absolute;
    display: none;
-    top: 0;
+    top: 5px;
    right: 10px;
    color: var(--theme-color-components-text-on-light);
    & button:focus,
@@ -70,7 +71,8 @@ $p-size: 8px;

    button {
      border-radius: var(--theme-rounded-corners);
-      opacity: 0.8;
+			border-width: 0;
+			opacity: 0.8;
    }
  }

--- a/web/components/chat/ChatUserMessage/ChatUserMessage.tsx
+++ b/web/components/chat/ChatUserMessage/ChatUserMessage.tsx
@@ -101,7 +101,7 @@ export const ChatUserMessage: FC<ChatUserMessageProps> = ({
          <UserTooltip user={user}>
            <div className={styles.user} style={{ color }}>
              <span className={styles.userName}>{displayName}</span>
-              <span>{badgeNodes}</span>
+              {badgeNodes}
            </div>
          </UserTooltip>
        )}
--- a/web/components/common/ContentHeader/ContentHeader.module.scss
+++ b/web/components/common/ContentHeader/ContentHeader.module.scss
@@ -1,14 +1,15 @@
@import '../../../styles/mixins.scss';

+$vert-spacing: 0.75rem;
+
 .root {
  position: relative;
  display: grid;
-  padding: 1.4rem;
-  padding-top: unset;
+  padding: var(--content-padding);
 }

 .row {
-  margin-bottom: 7px;
+  margin-bottom: $vert-spacing;
 }

 .logoTitleSection {
@@ -17,6 +18,7 @@
  .logo {
    margin: auto 0.6rem;
  }
+
  @include screen(desktop) {
    flex-direction: row;
    .logo {
@@ -24,8 +26,11 @@
    }
  }

-  @include screen(mobile) {
+  @include screen(tablet) {
    align-items: center;
+    .logo {
+      margin: 1.2rem auto;
+    }
  }
 }

@@ -33,23 +38,25 @@
  display: flex;
  flex-direction: column;
  margin-left: 0.6rem;
+  @include screen(tablet) {
+    margin-left: 0;
+  }

  .title {
    font-family: var(--theme-text-display-font-family);
    color: var(--theme-color-palette-0);
-    font-size: 1.7rem;
-    font-weight: bold;
+    font-size: 1.8rem;
+    font-weight: 600;
    line-height: 30px;
    margin: unset;
  }

  .subtitle {
-    font-size: 1.2rem;
-    font-weight: 400;
-    line-height: 1.3;
+    font-size: 1.15rem;
+    font-weight: 300;
    color: var(--theme-color-palette-0);
    max-width: 900px;
-    margin-top: 7px;
+    margin: $vert-spacing 0;
  }
 }

@@ -59,7 +66,6 @@
  span {
    display: inline-block;
    margin-right: 0.5rem;
-    font-size: 0.9rem;
-    font-weight: 500;
+    font-weight: 400;
  }
 }
--- a/web/components/common/UserDropdown/UserDropdown.module.scss
+++ b/web/components/common/UserDropdown/UserDropdown.module.scss
@@ -9,18 +9,14 @@
 			}
 		}
  }
-  .userIcon {
-	@include screen(desktop) {
-		margin-right: .5rem;
-	}
-  }

-  .username {
+	.username {
 	  display: none;
-  
+
 	  @include screen(desktop) {
 		  display: inline;
+			font-weight: 600;
+			font-size: .8rem;
 	  }
  }
 }
-
--- a/web/components/common/UserDropdown/UserDropdown.tsx
+++ b/web/components/common/UserDropdown/UserDropdown.tsx
@@ -121,7 +121,7 @@ export const UserDropdown: FC<UserDropdownProps> = ({ username: defaultUsername
        />
      )}
    >
-      <div id="user-menu" className={`${styles.root}`}>
+      <div id="user-menu" className={styles.root}>
        <Dropdown overlay={menu} trigger={['click']}>
          <Button type="primary" icon={<UserOutlined className={styles.userIcon} />}>
            <span className={styles.username}>{username}</span>
--- a/web/components/modals/NameChangeModal/NameChangeModal.module.scss
+++ b/web/components/modals/NameChangeModal/NameChangeModal.module.scss
@@ -0,0 +1,42 @@
+.nameChangeModal {
+
+
+}
+
+
+.inputGroup {
+	:global(.ant-input-affix-wrapper) {
+		border-width: 2px;
+	}
+
+	:global(.ant-input-show-count-suffix) {
+		font-size: 11px;
+	}
+	:global(.ant-btn-primary) {
+		font-weight: 600;
+	}
+
+
+}
+
+.colorChange {
+	padding-top: 8px;
+
+	:global(.ant-form-item-label) {
+		z-index: 1000;
+		margin-bottom: 0;
+		label {
+			font-weight: 600;
+
+		}
+	}
+}
+
+.colorDropdown {
+	:global(.ant-select):not(.ant-select-customize-input) {
+		:global(.ant-select-selector) {
+			padding-left:0;
+			border-width: 2px;
+		}
+	}
+}
--- a/web/components/modals/NameChangeModal/NameChangeModal.tsx
+++ b/web/components/modals/NameChangeModal/NameChangeModal.tsx
@@ -4,6 +4,7 @@ import { Input, Button, Select, Form } from 'antd';
 import { MessageType } from '../../../interfaces/socket-events';
 import WebsocketService from '../../../services/websocket-service';
 import { websocketServiceAtom, currentUserAtom } from '../../stores/ClientConfigStore';
+import styles from './NameChangeModal.module.scss';

 const { Option } = Select;

@@ -70,7 +71,7 @@ export const NameChangeModal: FC = () => {
  return (
    <div>
      Your chat display name is what people see when you send chat messages.
-      <Form onSubmitCapture={handleNameChange} style={{ paddingTop: '8px' }}>
+      <Form onSubmitCapture={handleNameChange} className={styles.form}>
        <Input.Search
          enterButton={saveButton}
          id="name-change-field"
@@ -81,13 +82,15 @@ export const NameChangeModal: FC = () => {
          maxLength={30}
          showCount
          defaultValue={displayName}
+          className={styles.inputGroup}
        />
      </Form>
-      <Form.Item label="Your Color" style={{ paddingTop: '8px', zIndex: 1000, marginBottom: 0 }}>
+      <Form.Item label="Your Color" className={styles.colorChange}>
        <Select
          style={{ width: 120 }}
          onChange={handleColorChange}
          defaultValue={displayColor.toString()}
+          className={styles.colorDropdown}
        >
          {colorOptions.map(e => (
            <Option key={e.toString()} title={e}>
--- a/web/components/ui/Content/Content.module.scss
+++ b/web/components/ui/Content/Content.module.scss
@@ -55,8 +55,7 @@
  }

  .lowerSection {
-    padding: 0em 2%;
-    margin-bottom: 2em;
+    padding: var(--content-padding);
  }

  .lowerSectionMobile {
--- a/web/components/ui/CustomPageContent/CustomPageContent.module.scss
+++ b/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)
+	}
 }
--- a/web/components/ui/Footer/Footer.module.scss
+++ b/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) {
--- a/web/components/ui/Header/Header.module.scss
+++ b/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;
+}
--- a/web/components/ui/Header/Header.tsx
+++ b/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>
--- a/web/components/ui/Modal/Modal.module.scss
+++ b/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);
+	}
+}
--- a/web/components/ui/Modal/Modal.tsx
+++ b/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
--- a/web/components/ui/OfflineBanner/OfflineBanner.module.scss
+++ b/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 {
--- a/web/components/ui/Statusbar/Statusbar.module.scss
+++ b/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;
+}
--- a/web/components/ui/Statusbar/Statusbar.tsx
+++ b/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>
  );
 };