From b52d7067a297fec15aa442a32e68dc44697b21f6 Mon Sep 17 00:00:00 2001
From: Matthew Heroux <matthew.heroux@gmail.com>
Date: Wed, 27 Dec 2023 01:21:47 -0600
Subject: [PATCH] feat: add labels (#782)

Signed-off-by: hxtree <matthew.heroux@gmail.com>
---
 clients/admin-client/src/pages/login.page.tsx | 21 ++++++++++++++-----
 .../src/components/Button/style.module.scss   | 13 +++++++++---
 .../SocialMediaBar/style.module.scss          |  2 +-
 .../src/components/TextField/TextField.tsx    | 10 +++++----
 .../src/components/TextField/style.scss       | 12 +++++++++++
 .../components/Typography/style.module.scss   |  8 +++----
 clients/design-system/src/index.scss          |  8 +++++--
 .../src/styles/utils/_color-pallette.scss     |  2 +-
 .../molecules/Textfield.stories.tsx           |  4 +---
 9 files changed, 57 insertions(+), 23 deletions(-)
 create mode 100644 clients/design-system/src/components/TextField/style.scss

diff --git a/clients/admin-client/src/pages/login.page.tsx b/clients/admin-client/src/pages/login.page.tsx
index 371152248..3bb88136f 100644
--- a/clients/admin-client/src/pages/login.page.tsx
+++ b/clients/admin-client/src/pages/login.page.tsx
@@ -1,15 +1,26 @@
 import { Paper, Link, Button, TextField, faArrowRight, FontAwesomeIcon } from '@cats-cradle/design-system/dist/main';
+import React from 'react';
 
 export default function LoginPage() {
+  function onClickHandler(event: React.MouseEvent){
+    console.log(event);
+    return;
+  }
+
   return (
     <main className="container">
       <Paper elevation="1">
         <h1>Log In</h1>
-        <TextField id="email-address" label="Email Address" type="text"/>
-
-        <Link href="/forgot-password">Forgot Password</Link>
-        <TextField id="password" label="Password" type="password"/>
-        <Button onClick={()=>{}} color="primary">Log In <FontAwesomeIcon icon={faArrowRight}/></Button>
+        <div className="mb-3">
+          <TextField id="email-address" label="Email Address" type="text"/>
+        </div>
+        <div className="mb-3">
+          <Link href="/forgot-password">Forgot Password</Link>
+          <TextField id="password" label="Password" type="password"/>
+        </div>
+        <div className="mb-3">
+          <Button onClick={onClickHandler} color="primary">Log In <FontAwesomeIcon icon={faArrowRight}/></Button>
+        </div>
       </Paper>
     </main>
   );
diff --git a/clients/design-system/src/components/Button/style.module.scss b/clients/design-system/src/components/Button/style.module.scss
index d8f698871..1cdf17568 100644
--- a/clients/design-system/src/components/Button/style.module.scss
+++ b/clients/design-system/src/components/Button/style.module.scss
@@ -30,9 +30,16 @@
           color: $color-white;
         }
       }
+      > svg {
+        margin-left: 0.3rem;
+        color: lighten($color-primary, 15%);
+      }
       &:hover {
-        border-color:  lighten($color-primary, 5%);
-        background-color: lighten($color-primary, 5%);
+        border-color:  lighten($color-primary, 10%);
+        background-color: lighten($color-primary, 10%);
+        > svg {
+          color: $color-primary;
+        }
       }
     }
     &.button-secondary {
@@ -49,7 +56,7 @@
         }
       }
       &:hover {
-        border-color:  lighten($color-primary, 5%);
+        border-color:  lighten($color-primary, 10%);
         color: $color-black;
       }
     }
diff --git a/clients/design-system/src/components/SocialMediaBar/style.module.scss b/clients/design-system/src/components/SocialMediaBar/style.module.scss
index 98450b2d0..ff7101ed0 100644
--- a/clients/design-system/src/components/SocialMediaBar/style.module.scss
+++ b/clients/design-system/src/components/SocialMediaBar/style.module.scss
@@ -3,7 +3,7 @@
 :global {
   .social-media-bar {
     background-color: $color-primary;
-    background: linear-gradient(to top left, $color-primary, darken($color-primary, 20%));
+    box-shadow: inset 0px 0px 30px 10px rgba(0, 0,0, 0.14);
     margin: 0;
     margin-top: 4rem;
     // padding: 0.2rem 3rem;
diff --git a/clients/design-system/src/components/TextField/TextField.tsx b/clients/design-system/src/components/TextField/TextField.tsx
index ea0b7d08e..51c344c42 100644
--- a/clients/design-system/src/components/TextField/TextField.tsx
+++ b/clients/design-system/src/components/TextField/TextField.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import './style.scss';
 
 export type TextFieldProps = {
   id?: string;
@@ -10,11 +11,12 @@ export type TextFieldProps = {
   invalid?: string;
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   variant?: string;
+  placeholder?: string;
 }
 
 // https://getbootstrap.com/docs/5.0/forms/validation/
 export const TextField = (props: TextFieldProps): JSX.Element => {
-  const { id, label, type, helpBlock, value, size, invalid, onChange } = props;
+  const { id, label, type, helpBlock, value, size, invalid, onChange, placeholder } = props;
 
   const classNames = [];
   classNames.push('form-control');
@@ -36,15 +38,15 @@ export const TextField = (props: TextFieldProps): JSX.Element => {
   if(helpBlock){
     return (<>
       {label && <label htmlFor={ id } className="form-label">{ label }</label>}
-      <input id={ id } type={ type } value={value} onChange={ onChange } className={classNames.join(' ')} aria-describedby={ `${id}HelpBlock` }/>
-      { helpBlock && <div id={ `${id}HelpBlock` } className="form-text">{ helpBlock }</div> }
+      <input id={ id } type={ type } value={value} onChange={ onChange } className={classNames.join(' ')} placeholder={placeholder} aria-describedby={ `${id}HelpBlock` }/>
+      { helpBlock && <div id={ `${id}HelpBlock` } className="form-text" >{ helpBlock }</div> }
       { invalid && <div className="invalid-feedback">{ invalid }</div>}
     </>)
   }
 
   return (<>
     {label && <label htmlFor={ id } className="form-label">{ label }</label>}
-    <input id={ id } type={ type } value={ value } onChange={ onChange  }className={classNames.join(' ')}/>
+    <input id={ id } type={ type } value={ value } onChange={ onChange  } className={classNames.join(' ')}  placeholder={placeholder}/>
     { invalid && <div className="invalid-feedback">{ invalid }</div>}
   </>)
 };
\ No newline at end of file
diff --git a/clients/design-system/src/components/TextField/style.scss b/clients/design-system/src/components/TextField/style.scss
new file mode 100644
index 000000000..e1ea43ff2
--- /dev/null
+++ b/clients/design-system/src/components/TextField/style.scss
@@ -0,0 +1,12 @@
+@import '../../styles/utils/color-pallette';
+
+.form-label {
+  font-weight: bold;
+  text-transform: uppercase;
+  font-size: 	0.875rem;
+  color: lighten($color-off-black, 30%);
+}
+
+.form-control {
+  letter-spacing: 0.1rem;
+}
\ No newline at end of file
diff --git a/clients/design-system/src/components/Typography/style.module.scss b/clients/design-system/src/components/Typography/style.module.scss
index a9624982d..d6f463390 100644
--- a/clients/design-system/src/components/Typography/style.module.scss
+++ b/clients/design-system/src/components/Typography/style.module.scss
@@ -8,7 +8,7 @@
   h1 {
     font-family: "Eczar", serif;
     font-weight: 800;
-    font-size: 3rem;
+    font-size: 2rem;
     color: $color-primary;
     padding: 12px 0;
     &.fill {
@@ -42,7 +42,7 @@
   }
 
   h2 {
-    font-size: 2rem;
+    font-size: 1.8rem;
     color: $color-primary;
     font-weight: bold;
     padding: 12px 0;
@@ -81,7 +81,7 @@
   h3 {
     font-family: Helvetica, Arial, sans-serif;
     font-weight: 400;
-    font-size:  1.8rem;
+    font-size:  1.7rem;
   };
 
   h4 {
@@ -112,7 +112,7 @@
   p.intro {
     font-family: Helvetica, Arial, sans-serif;
     font-weight: 400;
-    font-size:  1.6rem;
+    font-size:  1.5rem;
     line-height: 2rem;
   }
 }
\ No newline at end of file
diff --git a/clients/design-system/src/index.scss b/clients/design-system/src/index.scss
index cc3bce79b..f388981d4 100644
--- a/clients/design-system/src/index.scss
+++ b/clients/design-system/src/index.scss
@@ -43,11 +43,11 @@ $success: #7952b3;
 @import "bootstrap/scss/containers";
 @import "bootstrap/scss/grid";
 // @import "bootstrap/scss/tables";
-// @import "bootstrap/scss/forms";
+@import "bootstrap/scss/forms";
 @import "bootstrap/scss/buttons";
 @import "bootstrap/scss/transitions";
 @import "bootstrap/scss/dropdown";
-// @import "bootstrap/scss/button-group";
+@import "bootstrap/scss/button-group";
 @import "bootstrap/scss/nav";
 @import "bootstrap/scss/navbar"; // Requires nav
 @import "bootstrap/scss/card";
@@ -93,3 +93,7 @@ body {
   background-color: $color-off-white;
   color: $color-off-black;
 }
+
+a {
+  color: $color-blue;
+}
diff --git a/clients/design-system/src/styles/utils/_color-pallette.scss b/clients/design-system/src/styles/utils/_color-pallette.scss
index a71c4af17..c6ea5a4fb 100644
--- a/clients/design-system/src/styles/utils/_color-pallette.scss
+++ b/clients/design-system/src/styles/utils/_color-pallette.scss
@@ -9,7 +9,7 @@ $color-black: #000;
 $color-gray: #939699;
 $color-off-black: #1e1e1f;
 $color-off-white: #f1f4f9;
-$color-blue: #0077ae;
+$color-blue: darken( #0077ae, 10%);
 
 /* common color abstractions */
 $color-primary: $color-blue;
diff --git a/clients/design-system/stories/components/molecules/Textfield.stories.tsx b/clients/design-system/stories/components/molecules/Textfield.stories.tsx
index f8e4e9626..75cee5b9d 100644
--- a/clients/design-system/stories/components/molecules/Textfield.stories.tsx
+++ b/clients/design-system/stories/components/molecules/Textfield.stories.tsx
@@ -8,6 +8,4 @@ export default {
   argTypes: {},
 } as Meta<typeof TextField>;
 
-
-
-export const Default = () => <TextField/>;
+export const Default = () => <TextField id="email-address" placeholder="Enter Your Email" label="Email Address" type="text"/>