refactor(login): page styling

src/components/button.tsx

@@ -8,17 +8,22 @@ export default function Button({
   children,
   mode = 'primary',
   icon,
+  width,
 }: {
   type?: 'button' | 'submit' | 'reset';
   children?: React.ReactNode;
   mode?: 'primary' | 'warning' | 'success' | 'danger';
   icon?: IconProp;
+  width?: number;
 }) {
   if (!icon) {
     return (
       <button
         className={style.button + ' ' + style['style_' + mode]}
         type={type}
+        style={{
+          width: width ? `${width}px` : '100%',
+        }}
       >
         <span>{children}</span>
       </button>
@@ -30,6 +35,9 @@ export default function Button({
           style.button + ' ' + style['style_' + mode] + ' ' + style['icon']
         }
         type={type}
+        style={{
+          width: width ? `${width}px` : '100%',
+        }}
       >
         <FontAwesomeIcon icon={icon} height={25} />
         <span>{children}</span>

src/components/labeled-input.module.css

@@ -4,14 +4,14 @@
 }
 
 .input {
-  height: 50px;
   position: relative;
   overflow: visible;
+  width: 250px;
 }
 
 .input input {
   width: 100%;
-  height: 100%;
+  height: 50px;
   border: 1px solid var(--textbox-75);
   border-radius: 9999px;
   padding: 10px 20px;

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>
     );

src/components/user/login-button.tsx

@@ -16,7 +16,7 @@ export default function Login({
         await signIn(provider);
       }}
     >
-      <Button type='submit' mode='warning' icon={faOpenid}>
+      <Button type='submit' mode='warning' icon={faOpenid} width={250}>
         Login with {providerDisplayName}
       </Button>
     </form>