Login design update

anwendung/src/Tests/login.jsx

@@ -1,18 +1,22 @@
 import {useState} from "react";
 import Button from "@/components/Button";
 
-export default function Login(){
-    return(
-        <div className="artboard-demo phone-1">
-            <login className={"login-container"}>
-                <p className={"font-big"}>Login</p>
-                <p className={"font-middle placement"} align={"screenLeft"}>Username</p>
-                <input type="text" placeholder="Type here" className="input input-bordered w-full max-w-xs" />
-                <p className={"font-middle placement"} >Password</p>
-                <input type="text" placeholder="Type here" className="input input-bordered w-full max-w-xs" />
-                <br/>
-                <Button text={"Login"} color={"#808080"} width={"25px"}/>
-            </login>
-        </div>
-    );
-}
+export default function Login() {
+
+        return (
+            <div className="border">
+                <login className={"login-container"}>
+                    <p className={"font-big-fat placement"}>Login</p>
+                    <div className={"placement"}>
+                        <br/>
+                        <p className={"font-kinda-big"}>Username</p>
+                        <input type="text" placeholder="Type here" className="input input-bordered input-sm w-full max-w-xs"/>
+                        <br/>
+                        <p className={"font-kinda-big"}>Password</p>
+                        <input type="text" placeholder="Type here" className="input input-bordered input-sm w-full max-w-xs"/>
+                    </div>
+                    <Button text={"Login"} color={"#e2001a"} width={"25px"}/>
+                </login>
+            </div>
+        );
+    }

anwendung/src/pages/index.js

@@ -21,10 +21,6 @@ export default function Home(p) {
 
         <>
 
-            <div className="container">
-                <PopUp/>
-                <InputForm/>
-            </div>
 
             <div style={{height: 50}}></div>
             <Login/>

anwendung/src/styles/globals.css

@@ -388,35 +388,44 @@ Login
 {
     border: 1px solid #000000;
     border-radius: 5px;
-    padding: 5px;
-    width: 200px;
 }
 
 .input
 {
     padding: 5px;
-    width: 200px;
-    background-color: aliceblue;
+    background-color: #f7f7f7;
     border-radius: 5px;
     font-family: Arial, serif;
     font-size: 16px;
-    font-color: white;
+    font-color: black;
 }
 
-.phone-1{
+.border{
     width: 375px;
     height: 350px;
-    background-color: #ffffff;
+    background-color: #f9ccd1;
     border-radius: 5px;
-    border-width: 3px;
+    border-width: 2px;
     border-color: #1e2428;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
     gap: 10px;
 }
-.placement{
-    text-align: left;
+.placement {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: left;
 }
-
+.font-kinda-big{
+    font-size: 18px;
+}
+.font-big-fat {
+  font-size: 22px;
+  font-weight: bold;
+}
+.input-sm {
+   height: 2rem/* 32px */;
+   padding-left: 0.75rem/* 12px */;
+   padding-right: 0.75rem/* 12px */;
+   font-size: 0.875rem/* 14px */;
+   line-height: 2rem/* 32px */;
+ }