refactor(login): page styling

src/components/labeled-input.tsx

@@ -2,52 +2,47 @@ import style from './labeled-input.module.css';
 
 export default function LabeledInput({
   type,
-  size = 'default',
+  width,
   label,
   placeholder,
   value,
 }: {
   type: 'text' | 'email' | 'password';
-  size: 'default' | 'login' | 'settings';
+  width?: number;
   label?: string;
   placeholder?: string;
   value?: string;
 }) {
+  const randomId = Math.random().toString(36).substring(2, 15);
+
   if (!label) {
     return (
       <div className={style.input}>
         <input
           type={type}
-          className={
-            style['input'] +
-            ' ' +
-            style['size_' + size] +
-            ' ' +
-            style['type_' + type]
-          }
           placeholder={placeholder}
           defaultValue={value}
+          style={{
+            width: width ? `${width}px` : '100%',
+          }}
         />
       </div>
     );
   } else {
     return (
       <div className={style.input}>
-        <p>
-          <label className={style['label']}>{label}</label>
-        </p>
+        <label htmlFor={randomId} className={style['label']}>
+          {label}
+        </label>
 
         <input
+          id={randomId}
           type={type}
-          className={
-            style['input'] +
-            ' ' +
-            style['size_' + size] +
-            ' ' +
-            style['type_' + type]
-          }
           placeholder={placeholder}
           defaultValue={value}
+          style={{
+            width: width ? `${width}px` : '100%',
+          }}
         />
       </div>
     );