feat: added labeled input and texbox stying

src/components/Button.module.css

@@ -1,54 +0,0 @@
-.button {
-  background-color: var(--color-50);
-  border-radius: 9999px;
-  padding: 10px 20px;
-  outline: none;
-  border: 2px solid var(--color-100);
-  transition: background-color 0.3s ease;
-  height: 50px;
-}
-
-.button:hover {
-  background-color: var(--color-75);
-}
-
-.button:active {
-  background-color: var(--color-100);
-}
-
-.button span {
-  color: var(--foreground);
-  font-size: var(--button-text-size);
-  font-weight: 600;
-}
-
-.icon {
-  display: grid;
-  grid-template-columns: 25px 1fr;
-  gap: 10px;
-  align-items: center;
-}
-
-.style_primary {
-  --color-50: var(--primary-50);
-  --color-75: var(--primary-75);
-  --color-100: var(--primary-100);
-}
-
-.style_warning {
-  --color-50: var(--warning-50);
-  --color-75: var(--warning-75);
-  --color-100: var(--warning-100);
-}
-
-.style_success {
-  --color-50: var(--success-50);
-  --color-75: var(--success-75);
-  --color-100: var(--success-100);
-}
-
-.style_danger {
-  --color-50: var(--danger-50);
-  --color-75: var(--danger-75);
-  --color-100: var(--danger-100);
-}

src/components/Button.tsx

@@ -1,39 +0,0 @@
-import style from './Button.module.css';
-
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
-export default function Button({
-  type,
-  children,
-  mode = 'primary',
-  icon,
-}: {
-  type?: 'button' | 'submit' | 'reset';
-  children?: React.ReactNode;
-  mode?: 'primary' | 'warning' | 'success' | 'danger';
-  icon?: IconProp;
-}) {
-  if (!icon) {
-    return (
-      <button
-        className={style.button + ' ' + style['style_' + mode]}
-        type={type}
-      >
-        <span>{children}</span>
-      </button>
-    );
-  } else {
-    return (
-      <button
-        className={
-          style.button + ' ' + style['style_' + mode] + ' ' + style['icon']
-        }
-        type={type}
-      >
-        <FontAwesomeIcon icon={icon} height={25} />
-        <span>{children}</span>
-      </button>
-    );
-  }
-}

src/components/labeled-input.module.css

@@ -0,0 +1,37 @@
+.input,
+.input * {
+  box-sizing: border-box;
+}
+
+.input {
+  height: 50px;
+  position: relative;
+  overflow: visible;
+}
+
+.input input {
+  width: 100%;
+  height: 100%;
+  border: 1px solid var(--textbox-75);
+  border-radius: 9999px;
+  padding: 10px 20px;
+  background-color: var(--textbox-50);
+  color: var(--foreground);
+  font-size: 16px;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.input input:hover {
+  background-color: var(--textbox-75);
+  border-color: var(--textbox-100);
+}
+
+.input input:focus {
+  outline: none;
+  background-color: var(--textbox-100);
+  border-color: var(--primary-100);
+  box-shadow: 0 0 0 2px var(--primary-50);
+}

src/components/labeled-input.tsx

@@ -0,0 +1,55 @@
+import style from './labeled-input.module.css';
+
+export default function LabeledInput({
+  type,
+  size = 'default',
+  label,
+  placeholder,
+  value,
+}: {
+  type: 'text' | 'email' | 'password';
+  size: 'default' | 'login' | 'settings';
+  label?: string;
+  placeholder?: string;
+  value?: string;
+}) {
+  if (!label) {
+    return (
+      <div className={style.input}>
+        <input
+          type={type}
+          className={
+            style['input'] +
+            ' ' +
+            style['size_' + size] +
+            ' ' +
+            style['type_' + type]
+          }
+          placeholder={placeholder}
+          defaultValue={value}
+        />
+      </div>
+    );
+  } else {
+    return (
+      <div className={style.input}>
+        <p>
+          <label className={style['label']}>{label}</label>
+        </p>
+
+        <input
+          type={type}
+          className={
+            style['input'] +
+            ' ' +
+            style['size_' + size] +
+            ' ' +
+            style['type_' + type]
+          }
+          placeholder={placeholder}
+          defaultValue={value}
+        />
+      </div>
+    );
+  }
+}