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