Room UI Redesign: Reduce Custom CSS

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="[email protected]"
       />
       {(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

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,16 +12,17 @@ export const VerificationStep = {
 
 export function EmailVerifying() {
   return (
-    <Column center padding className={styles.modalContent}>
+    <Column center padding grow>
       <b>Email Verifying</b>
+      <br />
       <Spinner />
     </Column>
   );
 }
 
 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>

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

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

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

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

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

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

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

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>