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