Merge pull request #1676 from awlFCCamp/prevent-layout-shift-admin-page

Prevent layout shift admin page
hackforla · Jul 15, 2024 · ecafd8a · ecafd8a
2 parents 2c82d0b + 72b15e2
commit ecafd8a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 12 deletions.
diff --git a/client/src/components/auth/Auth.js b/client/src/components/auth/Auth.js
@@ -22,7 +22,7 @@ const Auth = () => {
  const [email, setEmail] = useState('');
  const [isDisabled, setIsDisabled] = useState(true);
  const [isError, setIsError] = useState(false);
- const [errorMessage, setErrorMessage] = useState('');
+ const [errorMessage, setErrorMessage] = useState(' ');
 
  const validateEmail = () => {
  if (email.search(pattern) !== -1) {
@@ -102,7 +102,11 @@ const Auth = () => {
  <div className="adminlogin-headers">
  <h3>Welcome Back!</h3>
  </div>
- <form onSubmit={handleLogin} className="form-check-in" autoComplete="off">
+ <form
+ onSubmit={handleLogin}
+ className="form-check-in"
+ autoComplete="off"
+ >
  <div className="form-row">
  <div className="form-input-text">
  <label htmlFor="email">Enter your email address:</label>
@@ -120,7 +124,12 @@ const Auth = () => {
  </div>
  </form>
 
- {isError && <div className="adminlogin-warning">{errorMessage}</div>}
+ <div
+ className="adminlogin-warning"
+ style={{ visibility: isError ? 'visible' : 'hidden' }}
+ >
+ {errorMessage}
+ </div>
 
  <div className="form-input-button">
  <button

diff --git a/client/src/sass/AdminLogin.scss b/client/src/sass/AdminLogin.scss
@@ -1,17 +1,18 @@
 .adminlogin-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  z-index: 1;
-  padding-top: 6vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ z-index: 1;
+ padding-top: 6vh;
 }
 
 .adminlogin-headers {
-  margin: 36px 0px;
+ margin: 36px 0px;
 }
 
 .adminlogin-warning {
- width: 300px;
- color: red;
+ width: 300px;
+ color: red;
+ height: 20px;
 }