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