fix: misaligned icons on signup

universi-me · Nov 22, 2024 · 7aebdaa · 7aebdaa
1 parent 18fc52f
commit 7aebdaa
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 57 deletions.
diff --git a/src/components/NewPasswordInput/NewPasswordInput.less b/src/components/NewPasswordInput/NewPasswordInput.less
@@ -5,13 +5,27 @@
 .password-input {
 
     .form-group {
+        position: relative;
         align-items: center;
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
 
+        .toggle span, .label-form {
+            position: absolute;
+            top: .15em;
+            user-select: none;
+        }
+
+        @icon-distance: .25em;
+
+        .label-form {
+            left: @icon-distance;
+        }
+
         .toggle span {
-            position: relative;
+            right: @icon-distance;
+            cursor: pointer;
         }
 
         input {

diff --git a/src/components/NewPasswordInput/NewPasswordInput.tsx b/src/components/NewPasswordInput/NewPasswordInput.tsx
@@ -13,9 +13,6 @@ interface NewPasswordInputProps {
 
 const NewPasswordInput: React.FC<NewPasswordInputProps> = ({ password, setPassword, valid, setValid }) => {
 
-    const [showPassword, setShowPassword] = useState(false);
-    const [showPasswordRepeat, setShowPasswordRepeat] = useState(false);
-
     const [passwordRepeat, setPasswordRepeat] = useState<string>("")
 
     const [validPasswordEquality, setValidPasswordEquality] = useState<NullableBoolean>(false);
@@ -39,55 +36,22 @@ const NewPasswordInput: React.FC<NewPasswordInputProps> = ({ password, setPasswo
 
     }, [password, passwordRepeat]);
 
-    function toggleShowPassword(){
-        setShowPassword(!showPassword)
-    }
-
-    function toggleShowPasswordRepeat(){
-        setShowPasswordRepeat(!showPasswordRepeat)
-    }
 
     return (
         <div className="password-input">
-          <div className="form-group">
-            <div className="label-form">
-              <span className="material-symbols-outlined">lock</span>
-            </div>
-            <input
-              type={showPassword ? "text" : "password"}
-              id="password"
-              name="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              placeholder="Insira sua nova senha"
-              required
-            />
-            <span className="toggle" onClick={toggleShowPassword}>
-              <span className="material-symbols-outlined">
-                {showPassword ? "visibility" : "visibility_off"}
-              </span>
-            </span>
-          </div>
-          <br/>
-            <div className="form-group">
-                <div className="label-form">
-                <span className="material-symbols-outlined">lock</span>
-                </div>
-                <input
-                type={showPasswordRepeat ? "text" : "password"}
-                id="newPassword"
-                name="newPassword"
-                value={passwordRepeat}
-                onChange={(e) => setPasswordRepeat(e.target.value)}
-                placeholder="Confirme sua nova senha"
-                required
-                />
-                <span className="toggle" onClick={toggleShowPasswordRepeat}>
-                <span className="material-symbols-outlined">
-                    {showPasswordRepeat ? "visibility" : "visibility_off"}
-                </span>
-                </span>
-            </div>
+          <PasswordInputGroup
+            password={ password }
+            onChange={ setPassword }
+            placeholder="Insira sua senha" 
+            inputName="password"
+        />
+        <br/>
+        <PasswordInputGroup
+            password={ passwordRepeat }
+            onChange={ setPasswordRepeat }
+            placeholder="Confirme sua nova senha"
+            inputName="newPassword"
+        />
 
         <br/>
           <div className="password-requirements">
@@ -108,8 +72,36 @@ const NewPasswordInput: React.FC<NewPasswordInputProps> = ({ password, setPasswo
           <br/>
         </div>
       );
+}
 
+function PasswordInputGroup( props: Readonly<PasswordInputGroupProps> ) {
+    const { password, placeholder, inputName, onChange } = props;
+    const [ showPassword, setShowPassword ] = useState( false );
+
+    return <div className="form-group">
+        <span className="label-form material-symbols-outlined">lock</span>
+        <input
+            type={showPassword ? "text" : "password"}
+            id={ inputName }
+            name={ inputName }
+            value={ password }
+            onChange={ e => onChange( e.target.value ) }
+            placeholder={ placeholder }
+            required
+        />
+        <span className="toggle" onClick={ e => setShowPassword( s => !s ) }>
+        <span className="material-symbols-outlined">
+            { showPassword ? "visibility" : "visibility_off" }
+        </span>
+        </span>
+    </div>
+}
 
+type PasswordInputGroupProps = {
+    password: string;
+    placeholder: string;
+    inputName?: string;
+    onChange( password: string ): unknown;
 }
 
-export default NewPasswordInput;
+export default NewPasswordInput;
diff --git a/src/pages/SignUp/SignUpModal/SignUpModal.less b/src/pages/SignUp/SignUpModal/SignUpModal.less
@@ -4,20 +4,18 @@
 
 
 #sign-up-modal {
-    width: 75vw;
-    height: fit-content;
-    
+    max-width: min(75vw, 1000px);
+    max-height: min(fit-content, 80vh);
+
     border-radius: 1.25rem;
-    overflow: hidden;
+    overflow: auto;
 
     background: @card-background-color;
 
     .heading {
         background:  @primary-color;
 
         display: flex;
-        // grid-template-columns: 1fr auto 1fr;
-        // align-items: center;
         flex-direction: row;
         justify-content: space-between;
         align-content: center;