✨ Add style variables and mixins (#5)

* Create color constants and use them in project 1 * Add basic mixins and use theme constants in UI components * Restyled by whitespace (#6) Co-authored-by: Restyled.io <commits@restyled.io> Co-authored-by: Rohan Gupta <rohan.gupta@gameskraft.com> Co-authored-by: restyled-io[bot] <32688539+restyled-io[bot]@users.noreply.github.com> Co-authored-by: Restyled.io <commits@restyled.io>
DemonDaddy22 · Sep 25, 2022 · 227c096 · 227c096
1 parent 96f244b
commit 227c096
Show file tree

Hide file tree

Showing 8 changed files with 131 additions and 76 deletions.
diff --git a/src/components/SignUpForm/index.tsx b/src/components/SignUpForm/index.tsx
@@ -7,68 +7,72 @@ import classes from './styles.module.scss';
 
 const SignUpForm: React.FC<Props> = () => {
   return (
-    <main className={classes.container}>
-      <section className={classes.questionContainer}>
-        <h2 className={classes.questionTitle}>Sign-Up Form</h2>
-        <p className={classes.questionDescription}>
-          Implement a sign-up form in HTML with the following six input fields,
-          each with an appropriate label:
-        </p>
-        <ol className={classes.questionPoints}>
-          <li className={classes.questionPoint}>
-            <strong>Username</strong>, a required text input field
-          </li>
-          <li className={classes.questionPoint}>
-            <strong>Password</strong>, a required password input field
-          </li>
-          <li className={classes.questionPoint}>
-            <strong>Email</strong>, a required email input field
-          </li>
-          <li className={classes.questionPoint}>
-            <strong>Phone Number</strong>, an optional telephone input field
-          </li>
-          <li className={classes.questionPoint}>
-            <strong>Date of Birth</strong>, an optional date-picker input field
-          </li>
-          <li className={classes.questionPoint}>
-            <strong>I agree to the TOS</strong>, a required checkbox input field
-          </li>
-        </ol>
-        <p className={classes.questionDescription}>
-          There should also be a <strong>Sign Up</strong> button at the bottom
-          of the form. When clicked on (and if required fields have been
-          filled), the button should submit the form using default browser
-          behaviour.
-        </p>
-      </section>
-      <form className={classes.formContainer}>
-        <FormGroup>
-          <Label htmlFor="username">Username</Label>
-          <Input id="username" type="text" required />
-        </FormGroup>
-        <FormGroup>
-          <Label htmlFor="password">Password</Label>
-          <Input id="password" type="password" required />
-        </FormGroup>
-        <FormGroup>
-          <Label htmlFor="email">Email</Label>
-          <Input id="email" type="email" required />
-        </FormGroup>
-        <FormGroup>
-          <Label htmlFor="telephone">Phone Number</Label>
-          <Input id="telephone" type="tel" />
-        </FormGroup>
-        <FormGroup>
-          <Label htmlFor="dob">Date of Birth</Label>
-          <Input id="dob" type="date" />
-        </FormGroup>
-        <FormGroup className={classes.tosFormGroup}>
-          <Label htmlFor="tos">I agree to the TOS</Label>
-          <Input id="tos" type="checkbox" name="tos" fullWidth={false} />
-        </FormGroup>
-        <Button>Sign Up</Button>
-      </form>
-    </main>
+    <div className={classes.page}>
+      <main className={classes.container}>
+        <section className={classes.questionContainer}>
+          <h2 className={classes.questionTitle}>Sign-Up Form</h2>
+          <p className={classes.questionDescription}>
+            Implement a sign-up form in HTML with the following six input
+            fields, each with an appropriate label:
+          </p>
+          <ol className={classes.questionPoints}>
+            <li className={classes.questionPoint}>
+              <strong>Username</strong>, a required text input field
+            </li>
+            <li className={classes.questionPoint}>
+              <strong>Password</strong>, a required password input field
+            </li>
+            <li className={classes.questionPoint}>
+              <strong>Email</strong>, a required email input field
+            </li>
+            <li className={classes.questionPoint}>
+              <strong>Phone Number</strong>, an optional telephone input field
+            </li>
+            <li className={classes.questionPoint}>
+              <strong>Date of Birth</strong>, an optional date-picker input
+              field
+            </li>
+            <li className={classes.questionPoint}>
+              <strong>I agree to the TOS</strong>, a required checkbox input
+              field
+            </li>
+          </ol>
+          <p className={classes.questionDescription}>
+            There should also be a <strong>Sign Up</strong> button at the bottom
+            of the form. When clicked on (and if required fields have been
+            filled), the button should submit the form using default browser
+            behaviour.
+          </p>
+        </section>
+        <form className={classes.formContainer}>
+          <FormGroup>
+            <Label htmlFor="username">Username</Label>
+            <Input id="username" type="text" required />
+          </FormGroup>
+          <FormGroup>
+            <Label htmlFor="password">Password</Label>
+            <Input id="password" type="password" required />
+          </FormGroup>
+          <FormGroup>
+            <Label htmlFor="email">Email</Label>
+            <Input id="email" type="email" required />
+          </FormGroup>
+          <FormGroup>
+            <Label htmlFor="telephone">Phone Number</Label>
+            <Input id="telephone" type="tel" />
+          </FormGroup>
+          <FormGroup>
+            <Label htmlFor="dob">Date of Birth</Label>
+            <Input id="dob" type="date" />
+          </FormGroup>
+          <FormGroup className={classes.tosFormGroup}>
+            <Label htmlFor="tos">I agree to the TOS</Label>
+            <Input id="tos" type="checkbox" name="tos" fullWidth={false} />
+          </FormGroup>
+          <Button>Sign Up</Button>
+        </form>
+      </main>
+    </div>
   );
 };
 

diff --git a/src/components/SignUpForm/styles.module.scss b/src/components/SignUpForm/styles.module.scss
@@ -1,3 +1,10 @@
+@import '../../constants/theme.scss';
+@import '../../utils/mixins.scss';
+
+.page {
+    @include square(100%, $project-bg-1);
+}
+
 .container {
     display: flex;
     flex-direction: column;
@@ -13,23 +20,27 @@
 
 .questionContainer {
     padding: 1rem;
-    border: 1px dotted white;
+    border: 1px dotted rgba($color: $white, $alpha: 0.5);
     border-radius: 0.25rem;
     width: 100%;
     max-width: 30rem;
     align-self: stretch;
 
     .questionTitle {
-        color: white;
+        color: $project-header-1;
         letter-spacing: -0.25px;
         margin-bottom: 1rem;
     }
 
     .questionDescription, .questionPoint {
-        color: white;
+        color: rgba($color: $white, $alpha: 0.9);
         letter-spacing: -0.2px;
         font-size: 0.85rem;
 
+        strong {
+            color: $project-highlight-1;
+        }
+
         @media screen and (min-width: 992px){
             font-size: 0.95rem;
         }
@@ -46,7 +57,7 @@
 
 .formContainer {
     padding: 1rem;
-    border: 1px dotted white;
+    border: 1px dotted rgba($color: $white, $alpha: 0.5);
     border-radius: 0.25rem;
     max-width: 25rem;
     width: 100%;
@@ -55,4 +66,4 @@
 .tosFormGroup {
     display: flex;
     gap: 1rem;
-}
+}
diff --git a/src/components/UI/Button/styles.module.scss b/src/components/UI/Button/styles.module.scss
@@ -1,13 +1,15 @@
+@import '../../../constants/theme.scss';
+
 .button {
     background-color: transparent;
     padding: 0.75rem 1rem;
     border-radius: 0.25rem;
-    border: 1px solid white;
-    color: white;
+    border: 1px solid $white;
+    color: $white;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 
     &:hover {
         cursor: pointer;
     }
-}
+}
diff --git a/src/components/UI/Input/styles.module.scss b/src/components/UI/Input/styles.module.scss
@@ -1,11 +1,13 @@
+@import '../../../constants/theme.scss';
+
 .input {
     background-color: transparent;
     border-radius: 0.25rem;
-    border: 1px solid rgba(255, 255, 255, 0.7);
+    border: 1px solid rgba($color: $white, $alpha: 0.7);
     padding: 0.5rem 0.75rem;
-    color: white;
+    color: $white;
 }
 
 .fullWidth {
     width: 100%;
-}
+}
diff --git a/src/components/UI/Label/styles.module.scss b/src/components/UI/Label/styles.module.scss
@@ -1,16 +1,18 @@
+@import '../../../constants/theme.scss';
+
 .label {
     display: block;
     margin: 0.25rem 0;
-    color: white;
+    color: $white;
     font-size: 0.8rem;
     font-weight: 400;
     letter-spacing: 0.25px;
 
     @media screen and (min-width: 992px) {
         font-size: 0.9rem;
     }
-    
+
     @media screen and (min-width: 1200px) {
         font-size: 1rem;
     }
-}
+}
diff --git a/src/constants/theme.scss b/src/constants/theme.scss
@@ -0,0 +1,8 @@
+$black: #000000;
+$white: #FFFFFF;
+$dark: #0D0E0E;
+
+// Project 1
+$project-bg-1: linear-gradient(50deg, #051A30 0%, #111012 100%);
+$project-header-1: #FE9226;
+$project-highlight-1: #FF929B;
diff --git a/src/constants/theme.ts b/src/constants/theme.ts
@@ -0,0 +1,5 @@
+export const COLORS: { [key: string]: string } = {
+  BLACK: '#000000',
+  WHITE: '#FFFFFF',
+  DARK: '#0D0E0E',
+};
diff --git a/src/utils/mixins.scss b/src/utils/mixins.scss
@@ -0,0 +1,21 @@
+@mixin spacing ($padding: 0, $margin: 0) {
+  padding: $padding;
+  margin: $margin;
+}
+
+@mixin square ($size, $bg: none, $borderRadius: 0) {
+  height: $size;
+  width: $size;
+
+  @if $bg != none {
+    background: $bg;
+  }
+
+  @if $borderRadius != 0 {
+    border-radius: $borderRadius;
+  }
+}
+
+@mixin circle ($size, $bg) {
+  @include square($size, $bg, 50%);
+}