Initial run at unified card styling (not done yet at all)

mitodl · Feb 12, 2024 · 243aefb · 243aefb
1 parent 8e9d61f
commit 243aefb
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 21 deletions.
diff --git a/frontend/public/scss/cards.scss b/frontend/public/scss/cards.scss
@@ -0,0 +1,70 @@
+div.std-card {
+    display: flex;
+    width: 536px;
+    padding: 30px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 30px; 
+
+    border-radius: 5px;
+    background: #FFF;
+
+    /* Dropshadow */
+    box-shadow: $card-drop-shadow;
+
+    div, h1, h2, h3, h4, h5, h6, p, a, button {
+        color: #000;
+        font-family: Inter;
+        font-style: normal;
+        line-height: normal;
+        margin: 0;
+    }
+
+    div.form-group {
+        gap: 10px;        
+
+        label {
+            color: $footer-blue-bg;
+            font-family: Inter;
+            font-size: 14px;
+            font-weight: 600;
+            line-height: 18px; /* 128.571% */ 
+        }
+
+        input, select {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: flex-start;
+            height: 45px;
+            align-self: stretch;
+            border-radius: 5px;
+            border: 1px solid $home-page-border-grey;
+            background: #FFF;        
+        }    
+    }
+
+    h1 {
+        font-size: 25px;
+        font-weight: 700;
+        padding-bottom: 0;
+    }
+
+    form {
+        width: 100%;
+
+        button {
+            width: 100%;
+
+            display: inline-flex;
+            padding: 20px 40px;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+
+            border-radius: 5px;
+            background: $brand-button-bg;
+            color: white;
+        }
+    }
+}
diff --git a/frontend/public/scss/layout.scss b/frontend/public/scss/layout.scss
@@ -38,6 +38,7 @@
 @import "product-page/product-faculty-members";
 @import "home-page/home-page-contact-row";
 @import "product-page/program-courses.scss";
+@import "cards.scss";
 
 body {
   font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;

diff --git a/frontend/public/scss/variables.scss b/frontend/public/scss/variables.scss
@@ -58,3 +58,5 @@ $home-page-border-purple: #491EA4;
 $home-page-subheader-light-blue: #03ADD2;
 
 $product-page-hover-time: 0.5s;
+
+$card-drop-shadow: 0px 2px 3px 0px rgba(18, 38, 49, 0.15);
diff --git a/frontend/public/src/components/forms/RegisterEmailForm.js b/frontend/public/src/components/forms/RegisterEmailForm.js
@@ -46,8 +46,12 @@ const RegisterEmailForm = ({ onSubmit }: Props) => (
             aria-describedby="emailError"
             required
           />
-          <p className="py-2">
-            By creating an account I agree to the{" "}
+        </div>
+        <div>
+          <p>
+            By creating an account I agree to the
+          </p>
+          <p>
             <a
               href={routes.informationLinks.honorCode}
               target="_blank"
@@ -83,17 +87,13 @@ const RegisterEmailForm = ({ onSubmit }: Props) => (
             <ErrorMessage name="recaptcha" component={FormError} />
           </div>
         ) : null}
-        <div className="row submit-row no-gutters">
-          <div className="col d-flex justify-content-end">
-            <button
-              type="submit"
-              className="btn btn-primary btn-gradient-red large"
-              disabled={isSubmitting}
-            >
-              Continue
-            </button>
-          </div>
-        </div>
+        <button
+          type="submit"
+          className="btn btn-primary btn-gradient-red large"
+          disabled={isSubmitting}
+        >
+          Continue
+        </button>
       </Form>
     )}
   />

diff --git a/frontend/public/src/containers/pages/login/LoginEmailPage.js b/frontend/public/src/containers/pages/login/LoginEmailPage.js
@@ -64,10 +64,8 @@ export class LoginEmailPage extends React.Component<Props> {
         title={`${SETTINGS.site_name} | ${LOGIN_EMAIL_PAGE_TITLE}`}
       >
         <div className="std-page-body container auth-page">
-          <div className="auth-card card-shadow auth-form">
-            <div className="auth-header">
-              <h1>Sign in</h1>
-            </div>
+          <div className="std-card auth-form">
+            <h1>Sign in</h1>
             <EmailForm onSubmit={this.onSubmit.bind(this)}>
               <React.Fragment>
                 <span>Don't have an account? </span>

diff --git a/frontend/public/src/containers/pages/register/RegisterEmailPage.js b/frontend/public/src/containers/pages/register/RegisterEmailPage.js
@@ -117,10 +117,8 @@ export class RegisterEmailPage extends React.Component<Props> {
         title={`${SETTINGS.site_name} | ${REGISTER_EMAIL_PAGE_TITLE}`}
       >
         <div className="std-page-body container auth-page">
-          <div className="auth-card card-shadow auth-form">
-            <div className="auth-header">
-              <h1>Create Account</h1>
-            </div>
+          <div className="std-card">
+            <h1>Create Account</h1>
             <RegisterEmailForm onSubmit={this.onSubmit.bind(this)} />
           </div>
         </div>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -58,3 +58,5 @@ $home-page-border-purple: #491EA4;
		$home-page-subheader-light-blue: #03ADD2;

		$product-page-hover-time: 0.5s;

		$card-drop-shadow: 0px 2px 3px 0px rgba(18, 38, 49, 0.15);