[FIX] login input error message & button height (#17)

TG-WinG · Nov 12, 2024 · c31fca0 · c31fca0
2 parents 11c0266 + be27ea7
commit c31fca0
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git a/src/Auth/Login.tsx b/src/Auth/Login.tsx
@@ -105,6 +105,7 @@ export const LoginModal: FC<Props> = ({ context, ...props }) => {
             css={css`
               margin-bottom: 20px;
             `}
+            login
           />
           <InputBox
             name='password'
@@ -116,6 +117,7 @@ export const LoginModal: FC<Props> = ({ context, ...props }) => {
             css={css`
               margin-bottom: 40px;
             `}
+            login
           />
 
           <button

diff --git a/src/common/InputBox.tsx b/src/common/InputBox.tsx
@@ -23,15 +23,18 @@ interface Props {
   value?: string
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void
   readOnly?: boolean // Add readOnly prop here
+  login?: boolean
 }
 
 const InputBoxStyle = {
   inputBoxContainer: css`
     display: flex;
     flex-direction: column;
-
     position: relative;
   `,
+  mb: css`
+    margin-top: 10px;
+  `,
   labelParagraph: css`
     margin-bottom: 5px;
   `,
@@ -121,12 +124,15 @@ const InputBoxStyle = {
       content: url(${successIcon});
     }
   `,
-  errorMessage: (inputId: string) => css`
-    opacity: 0;
+  errorMessage: (inputId: string, login: boolean) => css`
+    position: absolute;
+    bottom: -22px;
+    font-size: 14px;
 
-    #${inputId}:invalid:not(:focus)[data-is-touched='true'] ~ &:not(:empty) {
-      display: inline;
-      opacity: 1;
+    ${login ? 'opacity: 0;' : 'display: none;'}
+
+    #${inputId}:invalid:not(:focus)[data-is-touched='true'] ~ & {
+      ${login ? 'opacity: 1;' : 'display: inline;'}
       color: ${Color.Red};
     }
   `,
@@ -141,13 +147,17 @@ export const InputBox: FC<Props> = ({
   errorMessage,
   onChange,
   readOnly = false,
+  login = false,
   ...props
 }) => {
   const [input, setInput] = useState('')
   const [isTouched, setIsTouched] = useState(false)
 
   return (
-    <label css={InputBoxStyle.inputBoxContainer} className={className}>
+    <label
+      css={[InputBoxStyle.inputBoxContainer, login && InputBoxStyle.mb]}
+      className={className}
+    >
       <p css={InputBoxStyle.labelParagraph}>
         <span css={InputBoxStyle.label}>{label}</span>
         <span css={InputBoxStyle.detailedLabel}>{detailedLabel}</span>
@@ -174,7 +184,7 @@ export const InputBox: FC<Props> = ({
         onClick={() => setInput('')}
         disabled={readOnly} // Disable discard button when readOnly
       />
-      <span css={InputBoxStyle.errorMessage(name)}>{errorMessage}</span>
+      <span css={InputBoxStyle.errorMessage(name, login)}>{errorMessage}</span>
     </label>
   )
 }