From cff506e832d3f992a9f314fe8a77020a1f973064 Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Fri, 13 Nov 2020 11:50:57 -0800
Subject: [PATCH] Reduce custom CSS

---
 src/react-components/auth/SignInModal.js      | 57 ++++++++++---------
 src/react-components/auth/SignInModal.scss    | 16 ------
 src/react-components/auth/VerifyModal.js      |  8 +--
 src/react-components/auth/VerifyModal.scss    |  7 ---
 src/react-components/input/InputField.scss    |  2 +
 .../input/RadioInputField.stories.js          | 34 ++++++-----
 src/react-components/layout/Column.js         | 26 ++++++++-
 src/react-components/layout/Column.scss       | 17 ++++++
 .../layout/LoadingScreenLayout.scss           |  8 ---
 src/react-components/modal/Modal.js           |  2 +-
 src/react-components/modal/Modal.scss         |  5 --
 .../room/AutoExitWarningModal.js              |  3 +-
 .../room/AutoExitWarningModal.scss            |  3 -
 .../room/EnterOnDeviceModal.js                | 23 ++++----
 .../room/EnterOnDeviceModal.scss              | 44 --------------
 .../room/EnterOnDeviceModal.stories.js        | 17 +++---
 src/react-components/room/LeaveRoomModal.js   |  3 +-
 src/react-components/room/LeaveRoomModal.scss |  9 ---
 .../room/MicPermissionsModal.js               |  8 +--
 .../room/MicPermissionsModal.scss             | 13 -----
 src/react-components/room/ObjectMenu.js       |  2 +-
 src/react-components/room/ObjectMenu.scss     |  5 --
 .../room/PromoteClientModal.js                |  3 +-
 .../room/PromoteClientModal.scss              |  3 -
 src/react-components/room/RoomEntryModal.scss |  6 --
 .../room/RoomSettingsSidebar.js               | 52 ++++++++---------
 .../room/UserProfileSidebar.js                |  1 -
 .../room/UserProfileSidebar.scss              |  8 ---
 src/react-components/sidebar/Sidebar.js       |  2 +-
 src/react-components/sidebar/Sidebar.scss     |  5 --
 src/react-components/styles/global.scss       | 41 +++++++++----
 31 files changed, 183 insertions(+), 250 deletions(-)
 delete mode 100644 src/react-components/auth/SignInModal.scss
 delete mode 100644 src/react-components/auth/VerifyModal.scss
 delete mode 100644 src/react-components/room/AutoExitWarningModal.scss
 delete mode 100644 src/react-components/room/LeaveRoomModal.scss
 delete mode 100644 src/react-components/room/PromoteClientModal.scss

diff --git a/src/react-components/auth/SignInModal.js b/src/react-components/auth/SignInModal.js
index 742d0f0c8c..d56adba026 100644
--- a/src/react-components/auth/SignInModal.js
+++ b/src/react-components/auth/SignInModal.js
@@ -3,7 +3,6 @@ import PropTypes from "prop-types";
 import { CloseButton } from "../input/CloseButton";
 import { Modal } from "../modal/Modal";
 import { FormattedMessage } from "react-intl";
-import styles from "./SignInModal.scss";
 import { Button } from "../input/Button";
 import { TextInputField } from "../input/TextInputField";
 import { Column } from "../layout/Column";
@@ -33,7 +32,7 @@ export function SubmitEmail({ onSubmitEmail, initialEmail, showPrivacy, privacyU
   );
 
   return (
-    <Column center padding as="form" onSubmit={onSubmitForm} className={styles.modalContent}>
+    <Column center padding as="form" onSubmit={onSubmitForm}>
       <p>{message || <FormattedMessage id="sign-in.prompt" />}</p>
       <TextInputField
         name="email"
@@ -44,22 +43,24 @@ export function SubmitEmail({ onSubmitEmail, initialEmail, showPrivacy, privacyU
         placeholder="example@example.com"
       />
       {(showTerms || showPrivacy) && (
-        <b className={styles.terms}>
-          By proceeding, you agree to the{" "}
-          {showTerms && (
-            <>
-              <a rel="noopener noreferrer" target="_blank" href={termsUrl}>
-                terms of use
-              </a>{" "}
-            </>
-          )}
-          {showTerms && showPrivacy && "and "}
-          {showPrivacy && (
-            <a rel="noopener noreferrer" target="_blank" href={privacyUrl}>
-              privacy notice
-            </a>
-          )}.
-        </b>
+        <p>
+          <small>
+            By proceeding, you agree to the{" "}
+            {showTerms && (
+              <>
+                <a rel="noopener noreferrer" target="_blank" href={termsUrl}>
+                  terms of use
+                </a>{" "}
+              </>
+            )}
+            {showTerms && showPrivacy && "and "}
+            {showPrivacy && (
+              <a rel="noopener noreferrer" target="_blank" href={privacyUrl}>
+                privacy notice
+              </a>
+            )}.
+          </small>
+        </p>
       )}
       <Button preset="accept" type="submit">
         Next
@@ -84,16 +85,18 @@ SubmitEmail.propTypes = {
 
 export function WaitForVerification({ email, onCancel, showNewsletterSignup }) {
   return (
-    <Column center padding className={styles.modalContent}>
+    <Column center padding>
       <p>
         <FormattedMessage id="sign-in.auth-started" values={{ email }} />
       </p>
       {showNewsletterSignup && (
-        <p className={styles.newsletter}>
-          Want Hubs news sent to your inbox?<br />
-          <a href="https://eepurl.com/gX_fH9" target="_blank" rel="noopener noreferrer">
-            Subscribe for updates
-          </a>
+        <p>
+          <small>
+            Want Hubs news sent to your inbox?<br />
+            <a href="https://eepurl.com/gX_fH9" target="_blank" rel="noopener noreferrer">
+              Subscribe for updates
+            </a>
+          </small>
         </p>
       )}
       <Button preset="cancel" onClick={onCancel}>
@@ -111,8 +114,10 @@ WaitForVerification.propTypes = {
 
 export function SignInComplete({ message, continueText, onContinue }) {
   return (
-    <Column center padding className={styles.modalContent}>
-      <b>{message}</b>
+    <Column center padding>
+      <p>
+        <b>{message}</b>
+      </p>
       <p>{continueText}</p>
       <Button preset="green" onClick={onContinue}>
         Continue
diff --git a/src/react-components/auth/SignInModal.scss b/src/react-components/auth/SignInModal.scss
deleted file mode 100644
index 97ad30b858..0000000000
--- a/src/react-components/auth/SignInModal.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@use "../styles/theme.scss";
-
-:local(.modal-content) {
-  line-height: 1.25;
-}
-
-:local(.terms) {
-  color: theme.$darkgrey;
-  font-size: theme.$font-size-xs;
-}
-
-:local(.newsletter) {
-  color: theme.$darkgrey;
-  font-size: theme.$font-size-sm;
-  line-height: 1.5;
-}
\ No newline at end of file
diff --git a/src/react-components/auth/VerifyModal.js b/src/react-components/auth/VerifyModal.js
index cbb1a47e96..4f2508e9ab 100644
--- a/src/react-components/auth/VerifyModal.js
+++ b/src/react-components/auth/VerifyModal.js
@@ -1,6 +1,5 @@
 import React from "react";
 import PropTypes from "prop-types";
-import styles from "./VerifyModal.scss";
 import { Spinner } from "../misc/Spinner";
 import { Modal } from "../modal/Modal";
 import { Column } from "../layout/Column";
@@ -13,8 +12,9 @@ export const VerificationStep = {
 
 export function EmailVerifying() {
   return (
-    <Column center padding className={styles.modalContent}>
+    <Column center padding grow>
       <b>Email Verifying</b>
+      <br />
       <Spinner />
     </Column>
   );
@@ -22,7 +22,7 @@ export function EmailVerifying() {
 
 export function EmailVerified({ origin }) {
   return (
-    <Column center padding className={styles.modalContent}>
+    <Column center padding grow>
       <b>Verification Complete</b>
       <p>Please close this browser window and return to {origin}.</p>
     </Column>
@@ -35,7 +35,7 @@ EmailVerified.propTypes = {
 
 export function VerificationError({ error }) {
   return (
-    <Column center padding className={styles.modalContent}>
+    <Column center padding grow>
       <b>Error Verifying Email</b>
       <p>{(error && error.message) || "Unknown Error"}</p>
     </Column>
diff --git a/src/react-components/auth/VerifyModal.scss b/src/react-components/auth/VerifyModal.scss
deleted file mode 100644
index ca2b2bbe53..0000000000
--- a/src/react-components/auth/VerifyModal.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-:local(.modal-content) {
-  line-height: 1.25;
-
-  svg, p {
-    margin-top: 16px;
-  }
-}
diff --git a/src/react-components/input/InputField.scss b/src/react-components/input/InputField.scss
index e959faf368..a8ec1711fb 100644
--- a/src/react-components/input/InputField.scss
+++ b/src/react-components/input/InputField.scss
@@ -20,9 +20,11 @@
 :local(.error) {
   margin-top: 8px;
   color: theme.$red;
+  align-self: flex-start;
 }
 
 :local(.info) {
   margin-top: 8px;
   color: theme.$grey;
+  align-self: flex-start;
 }
diff --git a/src/react-components/input/RadioInputField.stories.js b/src/react-components/input/RadioInputField.stories.js
index 37971d3255..d0c989ff1f 100644
--- a/src/react-components/input/RadioInputField.stories.js
+++ b/src/react-components/input/RadioInputField.stories.js
@@ -1,24 +1,30 @@
 import React from "react";
-import { RadioInputField } from "./RadioInputField";
+import { RadioInputField, RadioInputOption } from "./RadioInputField";
 import { Column } from "../layout/Column";
 
 export default {
   title: "RadioInputField"
 };
 
-export const All = args => (
+export const All = () => (
   <Column padding>
-    <RadioInputField {...args} />
-    <RadioInputField label="With Label" {...args} />
-    <RadioInputField label="Selected" {...args} value={2} />
+    <RadioInputField>
+      <RadioInputOption value={1} label="Option 1" description="Test description for option 1" />
+      <RadioInputOption value={2} label="Option 2" description="Test description for option 2" />
+      <RadioInputOption value={3} label="Option 3" description="Test description for option 3" />
+      <RadioInputOption value={4} label="Option 4 (No Description)" />
+    </RadioInputField>
+    <RadioInputField label="With Label">
+      <RadioInputOption value={1} label="Option 1" description="Test description for option 1" />
+      <RadioInputOption value={2} label="Option 2" description="Test description for option 2" />
+      <RadioInputOption value={3} label="Option 3" description="Test description for option 3" />
+      <RadioInputOption value={4} label="Option 4 (No Description)" />
+    </RadioInputField>
+    <RadioInputField label="Selected">
+      <RadioInputOption value={1} label="Option 1" description="Test description for option 1" />
+      <RadioInputOption checked value={2} label="Option 2" description="Test description for option 2" />
+      <RadioInputOption value={3} label="Option 3" description="Test description for option 3" />
+      <RadioInputOption value={4} label="Option 4 (No Description)" />
+    </RadioInputField>
   </Column>
 );
-
-All.args = {
-  options: [
-    { id: "1", label: "Option 1", description: "Test description for option 1", value: 1 },
-    { id: "2", label: "Option 2", description: "Test description for option 2", value: 2 },
-    { id: "3", label: "Option 3", description: "Test description for option 3", value: 3 },
-    { id: "4", label: "Option 4 (No Description)", value: 4 }
-  ]
-};
diff --git a/src/react-components/layout/Column.js b/src/react-components/layout/Column.js
index 4f5afba580..613e89bedb 100644
--- a/src/react-components/layout/Column.js
+++ b/src/react-components/layout/Column.js
@@ -3,7 +3,18 @@ import PropTypes from "prop-types";
 import classNames from "classnames";
 import styles from "./Column.scss";
 
-export function Column({ as: Component, className, gap, padding, center, grow, overflow, children, ...rest }) {
+export function Column({
+  as: Component,
+  className,
+  gap,
+  padding,
+  center,
+  centerMd,
+  grow,
+  overflow,
+  children,
+  ...rest
+}) {
   const gapClass = gap === true ? styles.mdGap : styles[`${gap}Gap`];
   const paddingClass = padding === true ? styles.lgPadding : styles[`${padding}Padding`];
 
@@ -14,7 +25,14 @@ export function Column({ as: Component, className, gap, padding, center, grow, o
         styles.column,
         gapClass,
         paddingClass,
-        { [styles.center]: center, [styles.grow]: grow, [styles.overflow]: overflow },
+        {
+          [styles.center]: center === true || center === "horizontal" || center === "both",
+          [styles.centerVertical]: center === "vertical" || center === "both",
+          [styles.centerMd]: centerMd === true || centerMd === "horizontal" || centerMd === "both",
+          [styles.centerVerticalMd]: centerMd === "vertical" || centerMd === "both",
+          [styles.grow]: grow,
+          [styles.overflow]: overflow
+        },
         className
       )}
     >
@@ -29,7 +47,8 @@ Column.propTypes = {
   children: PropTypes.node,
   gap: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   padding: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  center: PropTypes.bool,
+  centerMd: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  center: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   grow: PropTypes.bool,
   overflow: PropTypes.bool
 };
@@ -38,6 +57,7 @@ Column.defaultProps = {
   as: "div",
   gap: "md",
   center: false,
+  centerMd: false,
   padding: false,
   grow: false,
   overflow: false
diff --git a/src/react-components/layout/Column.scss b/src/react-components/layout/Column.scss
index 1ccaef749f..d994c74da3 100644
--- a/src/react-components/layout/Column.scss
+++ b/src/react-components/layout/Column.scss
@@ -52,6 +52,23 @@
   text-align: center;
 }
 
+:local(.center-vertical) {
+  justify-content: center;
+}
+
+:local(.center-md) {
+  @media(min-width: theme.$breakpoint-md) {
+    align-items: center;
+    text-align: center;
+  }
+}
+
+:local(.center-vertical-md) {
+  @media(min-width: theme.$breakpoint-md) {
+    justify-content: center;
+  }
+}
+
 :local(.grow) {
   flex-grow: 1;
 }
diff --git a/src/react-components/layout/LoadingScreenLayout.scss b/src/react-components/layout/LoadingScreenLayout.scss
index 21015c329e..dde1dc471e 100644
--- a/src/react-components/layout/LoadingScreenLayout.scss
+++ b/src/react-components/layout/LoadingScreenLayout.scss
@@ -37,12 +37,4 @@
   bottom: 10%;
   width: 100%;
   padding: 0 48px;
-
-  h3 {
-    font-weight: theme.$font-weight-bold;
-  }
-
-  p {
-    line-height: 1.25;
-  }
 }
diff --git a/src/react-components/modal/Modal.js b/src/react-components/modal/Modal.js
index c0b7f81ac9..4b290ad5c4 100644
--- a/src/react-components/modal/Modal.js
+++ b/src/react-components/modal/Modal.js
@@ -9,7 +9,7 @@ export function Modal({ title, beforeTitle, afterTitle, children, contentClassNa
       {(title || beforeTitle || afterTitle) && (
         <div className={styles.header}>
           <div className={styles.beforeTitle}>{beforeTitle}</div>
-          <h1>{title}</h1>
+          <h5>{title}</h5>
           <div className={styles.afterTitle}>{afterTitle}</div>
         </div>
       )}
diff --git a/src/react-components/modal/Modal.scss b/src/react-components/modal/Modal.scss
index 882eca2fb5..3fb984d8ed 100644
--- a/src/react-components/modal/Modal.scss
+++ b/src/react-components/modal/Modal.scss
@@ -22,11 +22,6 @@
   border-bottom: 1px solid theme.$lightgrey;
   align-items: center;
   justify-content: center;
-
-  h1 {
-    font-size: theme.$font-size-sm;
-    font-weight: theme.$font-weight-bold;
-  }
 }
 
 :local(.before-title) {
diff --git a/src/react-components/room/AutoExitWarningModal.js b/src/react-components/room/AutoExitWarningModal.js
index 2de0c95b4d..2f6f5ba4f7 100644
--- a/src/react-components/room/AutoExitWarningModal.js
+++ b/src/react-components/room/AutoExitWarningModal.js
@@ -3,7 +3,6 @@ import { FormattedMessage, defineMessages, useIntl } from "react-intl";
 import PropTypes from "prop-types";
 import { Modal } from "../modal/Modal";
 import { Button } from "../input/Button";
-import styles from "./AutoExitWarningModal.scss";
 import { Column } from "../layout/Column";
 
 export const AutoExitReason = {
@@ -27,7 +26,7 @@ export function AutoExitWarningModal({ onCancel, reason, secondsRemaining }) {
 
   return (
     <Modal title="Warning">
-      <Column padding center className={styles.autoExitWarningModal}>
+      <Column padding center>
         <b>
           <FormattedMessage id="autoexit.title" />
           <span>{secondsRemaining}</span>
diff --git a/src/react-components/room/AutoExitWarningModal.scss b/src/react-components/room/AutoExitWarningModal.scss
deleted file mode 100644
index e629b238b6..0000000000
--- a/src/react-components/room/AutoExitWarningModal.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-:local(.auto-exit-warning-modal) {
-  line-height: 1.25;
-}
\ No newline at end of file
diff --git a/src/react-components/room/EnterOnDeviceModal.js b/src/react-components/room/EnterOnDeviceModal.js
index c772e56870..f1e3f9dcec 100644
--- a/src/react-components/room/EnterOnDeviceModal.js
+++ b/src/react-components/room/EnterOnDeviceModal.js
@@ -1,6 +1,5 @@
 import React from "react";
 import PropTypes from "prop-types";
-import classNames from "classnames";
 import { Modal } from "../modal/Modal";
 import { Button } from "../input/Button";
 import { ReactComponent as VRIcon } from "../icons/VR.svg";
@@ -21,15 +20,15 @@ export function EnterOnDeviceModal({
 }) {
   return (
     <Modal title="Enter on Device" beforeTitle={<BackButton onClick={onBack} />} className={className} {...rest}>
-      <Column center padding className={classNames(styles.content, { [styles.loadingCode]: loadingCode })}>
+      <Column center={loadingCode ? "both" : true} padding grow>
         {loadingCode ? (
-          <h1>Generating join code...</h1>
+          <b>Generating join code...</b>
         ) : (
           <>
-            <h1>Enter on Wireless Headset / Phone</h1>
-            <p>{"In your device's web browser, go to:"}</p>
+            <b>Enter on Wireless Headset / Phone</b>
+            <small>{"In your device's web browser, go to:"}</small>
             <div className={styles.shortUrlContainer}>{shortUrl}</div>
-            <p>Then, enter this one-time code:</p>
+            <small>Then, enter this one-time code:</small>
             <div className={styles.codeContainer}>
               {code.split("").map((char, i) => (
                 <div key={i} className={styles.codeLetter}>
@@ -37,15 +36,17 @@ export function EnterOnDeviceModal({
                 </div>
               ))}
             </div>
-            <small>Your account and avatar will be transferred to the device.</small>
-            <small>Keep this page open to use this code.</small>
+            <strong>Your account and avatar will be transferred to the device.</strong>
+            <strong>Keep this page open to use this code.</strong>
             {headsetConnected && (
               <>
                 <hr data-or-text="or" />
-                <h1>Enter on Connected Headset</h1>
+                <b>Enter on Connected Headset</b>
                 {unsupportedBrowser ? (
                   <>
-                    <p>{"WebVR isn't supported in this browser, to enter with Oculus or SteamVR, use Firefox."}</p>
+                    <small>
+                      {"WebVR isn't supported in this browser, to enter with Oculus or SteamVR, use Firefox."}
+                    </small>
                     <Button
                       as="a"
                       preset="orange"
@@ -58,7 +59,7 @@ export function EnterOnDeviceModal({
                   </>
                 ) : (
                   <>
-                    <p>You have a VR headset connected to this device.</p>
+                    <small>You have a VR headset connected to this device.</small>
                     <Button preset="purple" onClick={onEnterOnConnectedHeadset}>
                       <VRIcon />
                       <span>Enter in VR</span>
diff --git a/src/react-components/room/EnterOnDeviceModal.scss b/src/react-components/room/EnterOnDeviceModal.scss
index 3f6b969726..d6aef47853 100644
--- a/src/react-components/room/EnterOnDeviceModal.scss
+++ b/src/react-components/room/EnterOnDeviceModal.scss
@@ -1,45 +1,5 @@
 @use "../styles/theme.scss";
 
-:local(.content) {
-  padding: 24px 8px;
-
-  h1 {
-    font-weight: theme.$font-weight-bold;
-    font-size: theme.$font-size-md;
-  }
-
-  p {
-    font-size: theme.$font-size-sm;
-    font-weight: theme.$font-weight-medium;
-  }
-
-  small {
-    font-size: theme.$font-size-xs;
-    font-weight: theme.$font-weight-regular;
-    margin-bottom: 8px;
-  }
-
-  hr {
-    position: relative;
-    width: 90%;
-    border: none;
-    border-bottom: 1px solid theme.$grey;
-    margin: 16px 0;
-
-    &:after {
-      background: theme.$white;
-      content: attr(data-or-text);
-      padding: 0 4px;
-      position: relative;
-      color: theme.$black;
-      font-size: theme.$font-size-sm;
-      font-weight: theme.$font-weight-bold;
-      position: absolute;
-      transform: translateY(-50%);
-    }
-  }
-}
-
 :local(.code-container) {
   display: flex;
   flex: 1 0 auto;
@@ -72,7 +32,3 @@
 :local(.code-letter) {
   width: 40px;
 }
-
-:local(.loading-code) {
-  justify-content: center;
-}
diff --git a/src/react-components/room/EnterOnDeviceModal.stories.js b/src/react-components/room/EnterOnDeviceModal.stories.js
index b361eeca33..ce3bc1244e 100644
--- a/src/react-components/room/EnterOnDeviceModal.stories.js
+++ b/src/react-components/room/EnterOnDeviceModal.stories.js
@@ -3,19 +3,20 @@ import { RoomLayout } from "../layout/RoomLayout";
 import { EnterOnDeviceModal } from "./EnterOnDeviceModal";
 
 export default {
-  title: "EnterOnDeviceModal"
+  title: "EnterOnDeviceModal",
+  parameters: {
+    layout: "fullscreen"
+  }
 };
 
 export const Base = () => <RoomLayout modal={<EnterOnDeviceModal shortUrl="hub.link" code="IDEB" />} />;
 
-Base.parameters = {
-  layout: "fullscreen"
-};
-
 export const HeadsetConnected = () => (
   <RoomLayout modal={<EnterOnDeviceModal shortUrl="hub.link" code="IDEB" headsetConnected />} />
 );
 
-HeadsetConnected.parameters = {
-  layout: "fullscreen"
-};
+export const VrNotSupported = () => (
+  <RoomLayout modal={<EnterOnDeviceModal unsupportedBrowser shortUrl="hub.link" code="IDEB" headsetConnected />} />
+);
+
+export const LoadingCode = () => <RoomLayout modal={<EnterOnDeviceModal loadingCode />} />;
diff --git a/src/react-components/room/LeaveRoomModal.js b/src/react-components/room/LeaveRoomModal.js
index d3b049bfd1..50aec938d9 100644
--- a/src/react-components/room/LeaveRoomModal.js
+++ b/src/react-components/room/LeaveRoomModal.js
@@ -1,5 +1,4 @@
 import React from "react";
-import styles from "./LeaveRoomModal.scss";
 import { useIntl, defineMessages } from "react-intl";
 import PropTypes from "prop-types";
 import { Modal } from "../modal/Modal";
@@ -39,7 +38,7 @@ export function LeaveRoomModal({ reason, destinationUrl, onClose }) {
 
   return (
     <Modal title="Leave Room" beforeTitle={<CloseButton onClick={onClose} />}>
-      <Column padding center grow className={styles.leaveRoomModal}>
+      <Column padding center centerMd="both" grow>
         <p>{intl.formatMessage(reasonMessages[reason])}</p>
         <Button as="a" preset="cancel" href={destinationUrl} rel="noopener noreferrer">
           {intl.formatMessage(confirmationMessages[reason])}
diff --git a/src/react-components/room/LeaveRoomModal.scss b/src/react-components/room/LeaveRoomModal.scss
deleted file mode 100644
index 540b266c4f..0000000000
--- a/src/react-components/room/LeaveRoomModal.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@use "../styles/theme.scss";
-
-:local(.leave-room-modal) {
-  line-height: 1.25;
-
-  @media(min-width: theme.$breakpoint-md) {
-    justify-content: center;
-  }
-}
diff --git a/src/react-components/room/MicPermissionsModal.js b/src/react-components/room/MicPermissionsModal.js
index 87fb54ef15..8006532735 100644
--- a/src/react-components/room/MicPermissionsModal.js
+++ b/src/react-components/room/MicPermissionsModal.js
@@ -11,16 +11,16 @@ export function MicPermissionsModal({ className, error, onClickErrorButton, erro
   return (
     <Modal title="Enter on Device" beforeTitle={<BackButton onClick={onBack} />} className={className} {...rest}>
       <Column padding center className={styles.content}>
-        <h1>Grant Microphone Permissions</h1>
-        <p>
+        <b>Grant Microphone Permissions</b>
+        <small>
           Microphone access needed to be heard by others.<br />Microphone can be muted in room.
-        </p>
+        </small>
         <div className={styles.microphoneIconContainer}>
           <MicrophoneIcon />
         </div>
         {error && (
           <>
-            <p className={styles.error}>{error}</p>
+            <small className={styles.error}>{error}</small>
             <Button preset="blue" onClick={onClickErrorButton}>
               {errorButtonLabel}
             </Button>
diff --git a/src/react-components/room/MicPermissionsModal.scss b/src/react-components/room/MicPermissionsModal.scss
index e920a855eb..8a2cdadb9f 100644
--- a/src/react-components/room/MicPermissionsModal.scss
+++ b/src/react-components/room/MicPermissionsModal.scss
@@ -1,18 +1,5 @@
 @use "../styles/theme.scss";
 
-:local(.content) {
-  h1 {
-    font-weight: theme.$font-weight-bold;
-    font-size: theme.$font-size-md;
-  }
-
-  p {
-    font-size: theme.$font-size-sm;
-    font-weight: theme.$font-weight-medium;
-    line-height: 1.2;
-  }
-}
-
 :local(.error) {
   color: theme.$red;
 }
diff --git a/src/react-components/room/ObjectMenu.js b/src/react-components/room/ObjectMenu.js
index 6930d57c1f..a99ef76b09 100644
--- a/src/react-components/room/ObjectMenu.js
+++ b/src/react-components/room/ObjectMenu.js
@@ -43,7 +43,7 @@ export function ObjectMenu({
             <IconButton className={styles.closeButton} onClick={onClose}>
               <CloseIcon width={16} height={16} />
             </IconButton>
-            <h1>{title}</h1>
+            <h5>{title}</h5>
           </div>
           <div className={styles.menu}>{joinChildren(children, () => <div className={styles.separator} />)}</div>
         </div>
diff --git a/src/react-components/room/ObjectMenu.scss b/src/react-components/room/ObjectMenu.scss
index 5f1186e4f1..36d663f1a3 100644
--- a/src/react-components/room/ObjectMenu.scss
+++ b/src/react-components/room/ObjectMenu.scss
@@ -56,11 +56,6 @@
   align-items: center;
   justify-content: center;
 
-  h1 {
-    font-size: theme.$font-size-sm;
-    font-weight: theme.$font-weight-bold;
-  }
-
   @media(min-width: theme.$breakpoint-md) {
     display: flex;
   }
diff --git a/src/react-components/room/PromoteClientModal.js b/src/react-components/room/PromoteClientModal.js
index 05ab65d443..70d3d5ef03 100644
--- a/src/react-components/room/PromoteClientModal.js
+++ b/src/react-components/room/PromoteClientModal.js
@@ -2,7 +2,6 @@ import React from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
 import { Modal } from "../modal/Modal";
-import styles from "./PromoteClientModal.scss";
 import { Button } from "../input/Button";
 import { CloseButton } from "../input/CloseButton";
 import { Column } from "../layout/Column";
@@ -10,7 +9,7 @@ import { Column } from "../layout/Column";
 export function PromoteClientModal({ onClose, onConfirm, displayName }) {
   return (
     <Modal title="Promote User" beforeTitle={<CloseButton onClick={onClose} />}>
-      <Column center padding className={styles.modalContent}>
+      <Column center padding>
         <p>
           <FormattedMessage id="promote.message" />
         </p>
diff --git a/src/react-components/room/PromoteClientModal.scss b/src/react-components/room/PromoteClientModal.scss
deleted file mode 100644
index 5059da19a1..0000000000
--- a/src/react-components/room/PromoteClientModal.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-:local(.modal-content) {
-  line-height: 1.25;
-}
\ No newline at end of file
diff --git a/src/react-components/room/RoomEntryModal.scss b/src/react-components/room/RoomEntryModal.scss
index 3fa0f13e60..f1cc66d803 100644
--- a/src/react-components/room/RoomEntryModal.scss
+++ b/src/react-components/room/RoomEntryModal.scss
@@ -3,12 +3,6 @@
 :local(.content) {
   padding: 24px 8px;
 
-  hr {
-    width: 100%;
-    border: none;
-    border-bottom: 1px solid theme.$grey;
-  }
-
   button {
     width: 156px;
   }
diff --git a/src/react-components/room/RoomSettingsSidebar.js b/src/react-components/room/RoomSettingsSidebar.js
index 01760db201..942f32a545 100644
--- a/src/react-components/room/RoomSettingsSidebar.js
+++ b/src/react-components/room/RoomSettingsSidebar.js
@@ -129,34 +129,32 @@ export function RoomSettingsSidebar({
           />
         </RadioInputField>
         {entryMode === "invite" && (
-          <div className={styles.inviteLinkContainer}>
-            <CopyableTextInputField
-              label="Invite link"
-              disabled={fetchingInvite}
-              value={fetchingInvite ? "..." : inviteUrl}
-              buttonPreset="blue"
-              description={
-                !fetchingInvite &&
-                (showRevokeConfirmation ? (
-                  <>
-                    <FormattedMessage id="room-settings.revoke-confirm" />{" "}
-                    <IconButton className={styles.confirmRevokeButton} onClick={confirmRevokeInvite}>
-                      <FormattedMessage id="room-settings.revoke-confirm-yes" />
-                    </IconButton>{" "}
-                    /{" "}
-                    <IconButton className={styles.confirmRevokeButton} onClick={cancelConfirmRevokeInvite}>
-                      <FormattedMessage id="room-settings.revoke-confirm-no" />
-                    </IconButton>
-                  </>
-                ) : (
-                  <IconButton className={styles.confirmRevokeButton} onClick={revokeInvite}>
-                    <FormattedMessage id="room-settings.revoke" />
+          <CopyableTextInputField
+            label="Invite link"
+            disabled={fetchingInvite}
+            value={fetchingInvite ? "..." : inviteUrl}
+            buttonPreset="blue"
+            description={
+              !fetchingInvite &&
+              (showRevokeConfirmation ? (
+                <>
+                  <FormattedMessage id="room-settings.revoke-confirm" />{" "}
+                  <IconButton className={styles.confirmRevokeButton} onClick={confirmRevokeInvite}>
+                    <FormattedMessage id="room-settings.revoke-confirm-yes" />
+                  </IconButton>{" "}
+                  /{" "}
+                  <IconButton className={styles.confirmRevokeButton} onClick={cancelConfirmRevokeInvite}>
+                    <FormattedMessage id="room-settings.revoke-confirm-no" />
                   </IconButton>
-                ))
-              }
-              fullWidth
-            />
-          </div>
+                </>
+              ) : (
+                <IconButton className={styles.confirmRevokeButton} onClick={revokeInvite}>
+                  <FormattedMessage id="room-settings.revoke" />
+                </IconButton>
+              ))
+            }
+            fullWidth
+          />
         )}
         {showPublicRoomSetting && (
           <ToggleInput
diff --git a/src/react-components/room/UserProfileSidebar.js b/src/react-components/room/UserProfileSidebar.js
index 3ac6c2233c..2450a75429 100644
--- a/src/react-components/room/UserProfileSidebar.js
+++ b/src/react-components/room/UserProfileSidebar.js
@@ -33,7 +33,6 @@ export function UserProfileSidebar({
       title={identityName ? `${displayName} (${identityName})` : displayName}
       beforeTitle={showBackButton ? <BackButton onClick={onBack} /> : <CloseButton onClick={onClose} />}
       className={className}
-      contentClassName={styles.content}
       {...rest}
     >
       <Column center padding>
diff --git a/src/react-components/room/UserProfileSidebar.scss b/src/react-components/room/UserProfileSidebar.scss
index 2f634e4fa5..991bdfb08f 100644
--- a/src/react-components/room/UserProfileSidebar.scss
+++ b/src/react-components/room/UserProfileSidebar.scss
@@ -1,13 +1,5 @@
 @use "../styles/theme.scss";
 
-:local(.content) {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 24px;
-  text-align: center;
-}
-
 :local(.avatar-preview-container) {
   display: flex;
   flex-direction: column;
diff --git a/src/react-components/sidebar/Sidebar.js b/src/react-components/sidebar/Sidebar.js
index 2b3981f919..f345101893 100644
--- a/src/react-components/sidebar/Sidebar.js
+++ b/src/react-components/sidebar/Sidebar.js
@@ -9,7 +9,7 @@ export function Sidebar({ title, beforeTitle, afterTitle, children, contentClass
       {(title || beforeTitle || afterTitle) && (
         <div className={styles.header}>
           <div className={styles.beforeTitle}>{beforeTitle}</div>
-          <h1>{title}</h1>
+          <h5>{title}</h5>
           <div className={styles.afterTitle}>{afterTitle}</div>
         </div>
       )}
diff --git a/src/react-components/sidebar/Sidebar.scss b/src/react-components/sidebar/Sidebar.scss
index 92bcb47c23..b39a76783c 100644
--- a/src/react-components/sidebar/Sidebar.scss
+++ b/src/react-components/sidebar/Sidebar.scss
@@ -20,11 +20,6 @@
   border-bottom: 1px solid theme.$lightgrey;
   align-items: center;
   justify-content: center;
-
-  h1 {
-    font-size: theme.$font-size-sm;
-    font-weight: theme.$font-weight-bold;
-  }
 }
 
 :local(.before-title) {
diff --git a/src/react-components/styles/global.scss b/src/react-components/styles/global.scss
index 6ae0ac8f39..1944c296af 100644
--- a/src/react-components/styles/global.scss
+++ b/src/react-components/styles/global.scss
@@ -69,14 +69,6 @@ html {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
 }
 
-/*
- * Ensure horizontal rules are visible by default
- */
-
-hr {
-  border-top-width: 1px;
-}
-
 textarea {
   resize: vertical;
 }
@@ -98,7 +90,7 @@ h4,
 h5,
 h6 {
   font-size: inherit;
-  font-weight: inherit;
+  font-weight: theme.$font-weight-bold;
 }
 
 /**
@@ -232,14 +224,21 @@ body::before {
 
 h5 {
   font-size: theme.$font-size-sm;
-  font-weight: theme.$font-weight-bold;
 }
 
-label, small {
+label, small, strong {
   font-size: theme.$font-size-xs;
   font-weight: theme.$font-weight-bold;
 }
 
+small {
+  color: theme.$darkgrey;
+}
+
+p, small, strong {
+  line-height: 1.25;
+}
+
 a {
   color: theme.$blue;
 
@@ -252,6 +251,26 @@ a {
   }
 }
 
+hr {
+  position: relative;
+  width: 90%;
+  border: none;
+  border-bottom: 1px solid theme.$grey;
+  margin: 16px 0;
+
+  &:after {
+    background: theme.$white;
+    content: attr(data-or-text);
+    padding: 0 4px;
+    position: relative;
+    color: theme.$black;
+    font-size: theme.$font-size-sm;
+    font-weight: theme.$font-weight-bold;
+    position: absolute;
+    transform: translateY(-50%) translateX(-50%);
+  }
+}
+
 input::placeholder {
   color: theme.$darkgrey;
 }