diff --git a/src/pages/Login/Login.jsx b/src/pages/Login/Login.jsx index 735b1dd..3724840 100644 --- a/src/pages/Login/Login.jsx +++ b/src/pages/Login/Login.jsx @@ -8,6 +8,18 @@ const Login = () => { logo

QuickByte

+
+
+ + +
+
+ + +
+ Passwort vergessen? + +
) diff --git a/src/pages/Login/styles.sass b/src/pages/Login/styles.sass index 25de4a7..ac87baa 100644 --- a/src/pages/Login/styles.sass +++ b/src/pages/Login/styles.sass @@ -10,16 +10,16 @@ .login-container display: flex flex-direction: column - align-items: center justify-content: center background-color: $background-opacity backdrop-filter: blur(5rem) border: 1px solid #515663 border-radius: 10px - padding: 1rem 3rem + padding: 1rem 2rem .login-header display: flex + padding: 0 2rem gap: 1rem align-items: center @@ -33,4 +33,51 @@ .login-header h1 margin: 0 - font-weight: 700 \ No newline at end of file + font-weight: 700 + +.login-body + display: flex + flex-direction: column + gap: 1rem + margin-top: 1rem + max-width: 20rem + +.btn + display: flex + justify-content: center + align-items: center + padding: 0.5rem 1rem + border-radius: 0.5rem + background-color: $primary + color: $black + font-size: 16pt + font-weight: 700 + cursor: pointer + border: none + +.login-body .text-right + text-align: right + text-decoration: none + color: $gray + font-weight: 700 + +.login-group + display: flex + flex-direction: column + gap: 0.5rem + +.login-group label + color: $white + +.login-group input + padding: 0.5rem 1rem + border-radius: 0.5rem + background-color: $background-opacity + color: $white + border: 2px solid #515663 + font-size: 18pt + width: auto + +.login-group input:focus + outline: none + border: 2px solid $primary \ No newline at end of file