Improved Accessibility and Fixed #39

stanleyowen · Mar 3, 2021 · 3fe76b3 · 3fe76b3
1 parent dd23095
commit 3fe76b3
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git a/client/src/components/login.components.js b/client/src/components/login.components.js
@@ -46,21 +46,21 @@ const Login = () => {
                         <form className="contact__form" name="contact__form" onSubmit={Submit}>
                             <div className="contact__formControl no-bot">
                                 <div className="contact__infoField">
-                                    <label htmlFor="email">Email <span className="required">*</span></label>
+                                    <label htmlFor="email">Email</label>
                                     <input title="Email" id="email" type="text" className="contact__inputField" onChange={(event) => setHoneypot(event.target.value)} value={honeypot} autoComplete="off"/>
                                     <span className="contact__onFocus"></span>
                                 </div>
                             </div>
                             <div className="contact__formControl">
                                 <div className="contact__infoField">
-                                    <label htmlFor="userEmail">Email <span className="required">*</span></label>
+                                    <label htmlFor="userEmail">Email</label>
                                     <input title="Email" id="userEmail" type="email" className="contact__inputField" onChange={(event) => setEmail(event.target.value)} value={email} required autoFocus autoComplete="username"/>
                                     <span className="contact__onFocus"></span>
                                 </div>
                             </div>
                             <div className="contact__formControl">
                                 <div className="contact__infoField">
-                                    <label htmlFor="userPassword">Password <span className="required">*</span></label>
+                                    <label htmlFor="userPassword">Password</label>
                                     <input title="Password" id="userPassword" type="password" className="contact__inputField" onChange={(event) => setPassword(event.target.value)} value={password} required autoComplete="current-password"/>
                                     <span className="contact__onFocus"></span>
                                 </div>

diff --git a/client/src/components/navbar.components.js b/client/src/components/navbar.components.js
@@ -3,7 +3,7 @@ import { useLocation } from 'react-router-dom';
 import getUserToken from '../library/getUserToken';
 import { setNotification, NOTIFICATION_TYPES, setWarning } from '../library/setNotification';
 import axios from 'axios';
-
+import Brightness1Icon from '@material-ui/icons/Brightness1';
 /* Icons */
 import { IconButton, Tooltip } from '@material-ui/core';
 import { Menu, ExitToApp, Dashboard, Lock, SupervisorAccount } from '@material-ui/icons';

diff --git a/client/src/index.css b/client/src/index.css
@@ -706,9 +706,9 @@ select {
     transition: all .4s;
 }
 .form__contact {
-    margin: 20px;
+    margin: 0 20px;
     margin-bottom: 40px;
-    padding: 40px 10px;
+    padding: 40px 10px 10px 20px;
     border-radius: 10px;
     transition: all .4s;
     background-color: #F0F0F0;
@@ -820,12 +820,15 @@ select {
     #form { width: 100%; }
     .form__container { grid-template-columns: auto; }
     .footer__socialBtn { width: 75%; }
-    .btn__outline { width: 50%; }
+    .btn__outline { width: 50%; margin-top: 20px; }
 }
 @media only screen and (max-width: 600px) { .animation__message { width: 100%; height: auto; } .btn__outline { width: 65%; } }
 @media only screen and (max-width: 480px) {
     .main__divider { width: 80%; }
     .main__button { width: 50%; }
     .footer__socialBtn { width: 100%; }
     .btn__outline { width: 85%; }
+}
+@media only screen and (max-width: 360px) {
+    .badges { position: relative; margin-top: 20px; }
 }