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/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>
        )}