feat: added labeled input and texbox stying

src/app/globals.css

@@ -21,6 +21,10 @@
   --danger-100: rgba(220, 38, 38, 1);
 
   --button-text-size: 18px;
+
+  --textbox-50: rgb(204, 204, 204, 0.5);
+  --textbox-75: rgb(204, 204, 204, 0.75);
+  --textbox-100: rgb(204, 204, 204, 1);
 }
 
 @media (prefers-color-scheme: dark) {

src/app/login/login.module.css

@@ -0,0 +1,14 @@
+/* /home/max/Git/MeetUp/src/app/login/login.module.css */
+.loginContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  gap: 1.5rem;
+  padding: 2rem;
+}
+
+.loginContainer h1 {
+  margin-bottom: 1rem;
+}

src/app/login/page.tsx

@@ -1,17 +1,36 @@
+// /home/max/Git/MeetUp/src/app/login/page.tsx
 import { auth } from '@/auth';
+import LabeledInput from '@/components/labeled-input';
 import Login from '@/components/user/login-button';
 import { redirect } from 'next/navigation';
 
+import style from './login.module.css';
+
+import '@/app/globals.css';
+
 export default async function LoginPage() {
   const session = await auth();
 
   if (session?.user) {
-    redirect('/');
+    redirect('/home');
   }
 
   return (
-    <div>
+    <div className={style.loginContainer}>
       <h1>Login</h1>
+
+      <LabeledInput
+        type='email'
+        size='login'
+        label='E-Mail'
+        placeholder='Enter your E-Mail'
+      />
+      <LabeledInput
+        type='password'
+        size='login'
+        label='Password'
+        placeholder='Enter your Password'
+      />
       <Login provider='authentik' providerDisplayName='SSO' />
     </div>
   );

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