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/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%;
   }
 }

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;
+    }
   }
 }

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;
+	}
 }

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;

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;
 }

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

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 {

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);
+}

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

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;
 

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

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 {

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;
     }
   }
 

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

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;
   }
 }

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;
 	  }
   }
 }
-

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>

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;
+		}
+	}
+}

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

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

web/package-lock.json

@@ -31618,6 +31618,8 @@
 		},
 		"node_modules/npm/node_modules/@colors/colors": {
 			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
+			"integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT",
@@ -31954,6 +31956,8 @@
 		},
 		"node_modules/npm/node_modules/aggregate-error": {
 			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
+			"integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT",
@@ -31967,6 +31971,8 @@
 		},
 		"node_modules/npm/node_modules/ansi-regex": {
 			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+			"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT",
@@ -31976,6 +31982,8 @@
 		},
 		"node_modules/npm/node_modules/ansi-styles": {
 			"version": "4.3.0",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+			"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT",
@@ -31991,6 +31999,8 @@
 		},
 		"node_modules/npm/node_modules/aproba": {
 			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
+			"integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==",
 			"dev": true,
 			"inBundle": true,
 			"license": "ISC"
@@ -32016,12 +32026,16 @@
 		},
 		"node_modules/npm/node_modules/balanced-match": {
 			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT"
 		},
 		"node_modules/npm/node_modules/base64-js": {
 			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+			"integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
 			"dev": true,
 			"funding": [
 				{
@@ -32132,6 +32146,8 @@
 		},
 		"node_modules/npm/node_modules/chalk": {
 			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT",
@@ -32148,6 +32164,8 @@
 		},
 		"node_modules/npm/node_modules/chownr": {
 			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
+			"integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
 			"dev": true,
 			"inBundle": true,
 			"license": "ISC",
@@ -32184,6 +32202,8 @@
 		},
 		"node_modules/npm/node_modules/clean-stack": {
 			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
+			"integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT",
@@ -32239,6 +32259,8 @@
 		},
 		"node_modules/npm/node_modules/color-convert": {
 			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+			"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT",
@@ -32251,6 +32273,8 @@
 		},
 		"node_modules/npm/node_modules/color-name": {
 			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT"
@@ -32285,18 +32309,24 @@
 		},
 		"node_modules/npm/node_modules/concat-map": {
 			"version": "0.0.1",
+			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+			"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT"
 		},
 		"node_modules/npm/node_modules/console-control-strings": {
 			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+			"integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==",
 			"dev": true,
 			"inBundle": true,
 			"license": "ISC"
 		},
 		"node_modules/npm/node_modules/cssesc": {
 			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+			"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT",
@@ -32309,6 +32339,8 @@
 		},
 		"node_modules/npm/node_modules/debug": {
 			"version": "4.3.4",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+			"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT",
@@ -32326,6 +32358,8 @@
 		},
 		"node_modules/npm/node_modules/debug/node_modules/ms": {
 			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT"
@@ -32344,6 +32378,8 @@
 		},
 		"node_modules/npm/node_modules/delegates": {
 			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+			"integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT"
@@ -32368,6 +32404,8 @@
 		},
 		"node_modules/npm/node_modules/emoji-regex": {
 			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT"
@@ -32438,12 +32476,16 @@
 		},
 		"node_modules/npm/node_modules/fs.realpath": {
 			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+			"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
 			"dev": true,
 			"inBundle": true,
 			"license": "ISC"
 		},
 		"node_modules/npm/node_modules/function-bind": {
 			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+			"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT"
@@ -32493,6 +32535,8 @@
 		},
 		"node_modules/npm/node_modules/has": {
 			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+			"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT",
@@ -32505,6 +32549,8 @@
 		},
 		"node_modules/npm/node_modules/has-flag": {
 			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT",
@@ -32514,6 +32560,8 @@
 		},
 		"node_modules/npm/node_modules/has-unicode": {
 			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+			"integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==",
 			"dev": true,
 			"inBundle": true,
 			"license": "ISC"
@@ -32619,6 +32667,8 @@
 		},
 		"node_modules/npm/node_modules/imurmurhash": {
 			"version": "0.1.4",
+			"resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+			"integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT",
@@ -32628,6 +32678,8 @@
 		},
 		"node_modules/npm/node_modules/indent-string": {
 			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+			"integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT",
@@ -32637,12 +32689,16 @@
 		},
 		"node_modules/npm/node_modules/infer-owner": {
 			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
+			"integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==",
 			"dev": true,
 			"inBundle": true,
 			"license": "ISC"
 		},
 		"node_modules/npm/node_modules/inflight": {
 			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+			"integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
 			"dev": true,
 			"inBundle": true,
 			"license": "ISC",
@@ -32653,6 +32709,8 @@
 		},
 		"node_modules/npm/node_modules/inherits": {
 			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
 			"dev": true,
 			"inBundle": true,
 			"license": "ISC"
@@ -32686,6 +32744,8 @@
 		},
 		"node_modules/npm/node_modules/ip": {
 			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz",
+			"integrity": "sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT"
@@ -32725,6 +32785,8 @@
 		},
 		"node_modules/npm/node_modules/is-fullwidth-code-point": {
 			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT",
@@ -32740,6 +32802,8 @@
 		},
 		"node_modules/npm/node_modules/isexe": {
 			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+			"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
 			"dev": true,
 			"inBundle": true,
 			"license": "ISC"
@@ -33013,6 +33077,8 @@
 		},
 		"node_modules/npm/node_modules/minipass-collect": {
 			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/minipass-collect/-/minipass-collect-1.0.2.tgz",
+			"integrity": "sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==",
 			"dev": true,
 			"inBundle": true,
 			"license": "ISC",
@@ -33025,6 +33091,8 @@
 		},
 		"node_modules/npm/node_modules/minipass-collect/node_modules/minipass": {
 			"version": "3.3.6",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+			"integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
 			"dev": true,
 			"inBundle": true,
 			"license": "ISC",
@@ -33054,6 +33122,8 @@
 		},
 		"node_modules/npm/node_modules/minipass-flush": {
 			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.5.tgz",
+			"integrity": "sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==",
 			"dev": true,
 			"inBundle": true,
 			"license": "ISC",
@@ -33066,6 +33136,8 @@
 		},
 		"node_modules/npm/node_modules/minipass-flush/node_modules/minipass": {
 			"version": "3.3.6",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+			"integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
 			"dev": true,
 			"inBundle": true,
 			"license": "ISC",
@@ -33088,6 +33160,8 @@
 		},
 		"node_modules/npm/node_modules/minipass-json-stream/node_modules/minipass": {
 			"version": "3.3.6",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+			"integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
 			"dev": true,
 			"inBundle": true,
 			"license": "ISC",
@@ -33112,6 +33186,8 @@
 		},
 		"node_modules/npm/node_modules/minipass-pipeline/node_modules/minipass": {
 			"version": "3.3.6",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+			"integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
 			"dev": true,
 			"inBundle": true,
 			"license": "ISC",
@@ -33136,6 +33212,8 @@
 		},
 		"node_modules/npm/node_modules/minipass-sized/node_modules/minipass": {
 			"version": "3.3.6",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+			"integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
 			"dev": true,
 			"inBundle": true,
 			"license": "ISC",
@@ -33148,6 +33226,8 @@
 		},
 		"node_modules/npm/node_modules/minizlib": {
 			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
+			"integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT",
@@ -33161,6 +33241,8 @@
 		},
 		"node_modules/npm/node_modules/minizlib/node_modules/minipass": {
 			"version": "3.3.6",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+			"integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
 			"dev": true,
 			"inBundle": true,
 			"license": "ISC",
@@ -33173,6 +33255,8 @@
 		},
 		"node_modules/npm/node_modules/mkdirp": {
 			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+			"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT",
@@ -33265,6 +33349,8 @@
 		},
 		"node_modules/npm/node_modules/node-gyp/node_modules/brace-expansion": {
 			"version": "1.1.11",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+			"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT",
@@ -33344,6 +33430,8 @@
 		},
 		"node_modules/npm/node_modules/node-gyp/node_modules/fs-minipass": {
 			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
+			"integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
 			"dev": true,
 			"inBundle": true,
 			"license": "ISC",
@@ -33375,6 +33463,8 @@
 		},
 		"node_modules/npm/node_modules/node-gyp/node_modules/glob": {
 			"version": "7.2.3",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
 			"dev": true,
 			"inBundle": true,
 			"license": "ISC",
@@ -33422,6 +33512,8 @@
 		},
 		"node_modules/npm/node_modules/node-gyp/node_modules/minimatch": {
 			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+			"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
 			"dev": true,
 			"inBundle": true,
 			"license": "ISC",
@@ -33434,6 +33526,8 @@
 		},
 		"node_modules/npm/node_modules/node-gyp/node_modules/minipass": {
 			"version": "3.3.6",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+			"integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
 			"dev": true,
 			"inBundle": true,
 			"license": "ISC",
@@ -33493,6 +33587,8 @@
 		},
 		"node_modules/npm/node_modules/node-gyp/node_modules/readable-stream": {
 			"version": "3.6.2",
+			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+			"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT",
@@ -33730,6 +33826,8 @@
 		},
 		"node_modules/npm/node_modules/once": {
 			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+			"integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
 			"dev": true,
 			"inBundle": true,
 			"license": "ISC",
@@ -33739,6 +33837,8 @@
 		},
 		"node_modules/npm/node_modules/p-map": {
 			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
+			"integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT",
@@ -33800,6 +33900,8 @@
 		},
 		"node_modules/npm/node_modules/path-is-absolute": {
 			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+			"integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT",
@@ -33847,6 +33949,8 @@
 		},
 		"node_modules/npm/node_modules/process": {
 			"version": "0.11.10",
+			"resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+			"integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT",
@@ -33874,6 +33978,8 @@
 		},
 		"node_modules/npm/node_modules/promise-inflight": {
 			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
+			"integrity": "sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==",
 			"dev": true,
 			"inBundle": true,
 			"license": "ISC"
@@ -33986,6 +34092,8 @@
 		},
 		"node_modules/npm/node_modules/rimraf": {
 			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+			"integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
 			"dev": true,
 			"inBundle": true,
 			"license": "ISC",
@@ -34001,6 +34109,8 @@
 		},
 		"node_modules/npm/node_modules/rimraf/node_modules/brace-expansion": {
 			"version": "1.1.11",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+			"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT",
@@ -34011,6 +34121,8 @@
 		},
 		"node_modules/npm/node_modules/rimraf/node_modules/glob": {
 			"version": "7.2.3",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
 			"dev": true,
 			"inBundle": true,
 			"license": "ISC",
@@ -34031,6 +34143,8 @@
 		},
 		"node_modules/npm/node_modules/rimraf/node_modules/minimatch": {
 			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+			"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
 			"dev": true,
 			"inBundle": true,
 			"license": "ISC",
@@ -34043,12 +34157,16 @@
 		},
 		"node_modules/npm/node_modules/safe-buffer": {
 			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+			"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT"
 		},
 		"node_modules/npm/node_modules/safer-buffer": {
 			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT",
@@ -34056,6 +34174,8 @@
 		},
 		"node_modules/npm/node_modules/semver": {
 			"version": "7.3.8",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
+			"integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
 			"dev": true,
 			"inBundle": true,
 			"license": "ISC",
@@ -34071,6 +34191,8 @@
 		},
 		"node_modules/npm/node_modules/semver/node_modules/lru-cache": {
 			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+			"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
 			"dev": true,
 			"inBundle": true,
 			"license": "ISC",
@@ -34083,12 +34205,16 @@
 		},
 		"node_modules/npm/node_modules/set-blocking": {
 			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+			"integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
 			"dev": true,
 			"inBundle": true,
 			"license": "ISC"
 		},
 		"node_modules/npm/node_modules/signal-exit": {
 			"version": "3.0.7",
+			"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+			"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
 			"dev": true,
 			"inBundle": true,
 			"license": "ISC"
@@ -34150,6 +34276,8 @@
 		},
 		"node_modules/npm/node_modules/spdx-correct": {
 			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
+			"integrity": "sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==",
 			"dev": true,
 			"inBundle": true,
 			"license": "Apache-2.0",
@@ -34160,12 +34288,16 @@
 		},
 		"node_modules/npm/node_modules/spdx-exceptions": {
 			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
+			"integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==",
 			"dev": true,
 			"inBundle": true,
 			"license": "CC-BY-3.0"
 		},
 		"node_modules/npm/node_modules/spdx-expression-parse": {
 			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+			"integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT",
@@ -34176,6 +34308,8 @@
 		},
 		"node_modules/npm/node_modules/spdx-license-ids": {
 			"version": "3.0.13",
+			"resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.13.tgz",
+			"integrity": "sha512-XkD+zwiqXHikFZm4AX/7JSCXA98U5Db4AFd5XUg/+9UNtnH75+Z9KxtpYiJZx36mUDVOwH83pl7yvCer6ewM3w==",
 			"dev": true,
 			"inBundle": true,
 			"license": "CC0-1.0"
@@ -34203,6 +34337,8 @@
 		},
 		"node_modules/npm/node_modules/string-width": {
 			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT",
@@ -34217,6 +34353,8 @@
 		},
 		"node_modules/npm/node_modules/strip-ansi": {
 			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT",
@@ -34229,6 +34367,8 @@
 		},
 		"node_modules/npm/node_modules/supports-color": {
 			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT",
@@ -34258,6 +34398,8 @@
 		},
 		"node_modules/npm/node_modules/tar/node_modules/fs-minipass": {
 			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
+			"integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
 			"dev": true,
 			"inBundle": true,
 			"license": "ISC",
@@ -34270,6 +34412,8 @@
 		},
 		"node_modules/npm/node_modules/tar/node_modules/fs-minipass/node_modules/minipass": {
 			"version": "3.3.6",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+			"integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
 			"dev": true,
 			"inBundle": true,
 			"license": "ISC",
@@ -34340,6 +34484,8 @@
 		},
 		"node_modules/npm/node_modules/util-deprecate": {
 			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
 			"dev": true,
 			"inBundle": true,
 			"license": "MIT"
@@ -34407,6 +34553,8 @@
 		},
 		"node_modules/npm/node_modules/wrappy": {
 			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
 			"dev": true,
 			"inBundle": true,
 			"license": "ISC"
@@ -34426,6 +34574,8 @@
 		},
 		"node_modules/npm/node_modules/yallist": {
 			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+			"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
 			"dev": true,
 			"inBundle": true,
 			"license": "ISC"

web/style-definitions/tokens/color/default-theme.yaml

@@ -5,7 +5,7 @@
 
 theme:
   rounded-corners:
-    value: 9px
+    value: 5px
     comment: 'How much corners are rounded in places in the UI.'
   unknown-1:
     value: 'green'
@@ -36,7 +36,7 @@ theme:
       5:
         value: 'var(--color-owncast-user-5)'
       6:
-        value: 'var(--color-owncast-user-6)'
+      value: 'var(--color-owncast-user-6)'
       7:
         value: 'var(--color-owncast-user-7)'
 

web/styles/ant-overrides.scss

@@ -39,7 +39,6 @@ BUTTONS
 .ant-btn-primary {
   height: 2rem;
   font-size: 0.85rem;
-  font-weight: bold;
   border-width: 2px;
   border-radius: var(--theme-rounded-corners);
   color: var(--theme-color-components-primary-button-text);
@@ -110,30 +109,13 @@ DROPDOWN
     background-color: var(--theme-color-components-menu-item-focus-bg);
   }
 }
-
-.ant-modal-header {
-  color: var(--theme-color-components-modal-header-text);
-  font-family: var(--theme-text-display-font-family);
-}
-.ant-modal-title {
-  color: var(--theme-color-components-modal-header-text);
-}
-.ant-modal-body {
-  overflow: auto;
-  border-radius: 0 0 var(--theme-rounded-corners) var(--theme-rounded-corners);
-}
-.ant-modal {
-  color: var(--theme-color-components-text-on-light);
-  h1 {
-    color: var(--theme-color-components-text-on-light);
-  }
-}
-.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);
+.ant-dropdown-menu-item,
+.ant-dropdown-menu-submenu-title {
+  font-size: 0.8rem;
+  padding: 4px 15px;
 }
 
 .ant-input-affix-wrapper {
-  padding: 4px 5px;
   background-color: var(--theme-color-components-form-field-background);
 }
 
@@ -238,10 +220,10 @@ th {
   color: var(--theme-color-palette-12);
 }
 
-.line-chart-container{
+.line-chart-container {
   position: relative;
-  .download-btn{
-    position:absolute;
+  .download-btn {
+    position: absolute;
     top: 0.3rem;
     right: 0.35rem;
   }

web/styles/globals.scss

@@ -7,12 +7,18 @@
 @import './mixins.scss';
 
 :root {
-  --content-padding: 12px;
+  --content-padding: 0.95rem;
   --module-spacing: 12px; // margin size between lines of stuff, if needed
   --header-height: 4.3rem; // needed for making main content scrollable;
   --footer-height: 2.5rem; // needed for making main content scrollable;
   --content-height: calc(100vh - var(--header-height));
   --replacement-bar-height: 46px; // needed for making main content scrollable on mobile;
+
+  // chat modules
+  --chat-message-text-size: 0.825rem;
+  --chat-notification-icon-padding: 6px;
+  --chat-message-padding: 10px;
+  --chat-text-highlight-border-radius: 3px;
 }
 
 ::selection {
@@ -25,7 +31,7 @@ html {
 
 body {
   font-family: var(--theme-text-body-font-family);
-  line-height: 1.5em;
+  font-weight: 300;
   margin: 0;
   background-color: var(--theme-color-background-main);
 
@@ -54,6 +60,7 @@ body {
 
   h1 {
     font-size: 2em;
+    font-weight: 600;
   }
 
   h2 {
@@ -64,7 +71,7 @@ body {
   h3 {
     font-family: var(--theme-text-body-font-family);
     font-size: 1.25em;
-    font-weight: 500;
+    font-weight: 600;
   }
 
   h4 {
@@ -101,7 +108,7 @@ body {
 
   strong,
   b {
-    font-weight: 700;
+    font-weight: 600;
   }
 }