renamed connect to login and put login in a main

assets/styles/app.css

@@ -1,10 +1,14 @@
 * {
     margin: 0;
     padding: 0;
-    font-family: 'Kulim Park', sans-serif;
+    font-family: "Kulim Park", sans-serif;
-    --background: hsl(200, 5%, 15%);
+    --dark: hsl(200, 5%, 15%);
-    --accent: hsl(15, 70%, 98%);
+    --light: hsl(15, 70%, 98%);
+    --grey: hsl(15, 6%, 92%);
     --radius: 8px;
+    --size-max: 20px;
+    --shadow: 0 0 0 1px var(--dark);
+    --shadow-hover: 0 0 0 2px var(--dark);
 }
 
 a {
@@ -18,7 +22,8 @@ a {
 
 /*Main content (between header and footer)*/
 body > main {
-    min-height: calc(100vh - ((2rem + 2*0.75rem) + 6rem));
+    min-height: calc(100vh - ((2rem + 2 * 0.75rem) + 6rem));
+    height: fit-content;
 }
 
 /*fix symfony template style*/
@@ -31,11 +36,11 @@ header {
     flex-direction: row;
     justify-content: space-between;
     align-items: baseline;
-    
+
     padding: 0.75rem;
-    
+
-    background-color: var(--background);
+    background-color: var(--dark);
-    color: var(--accent);
+    color: var(--light);
     height: 2rem;
 }
 
@@ -45,23 +50,23 @@ header > form {
     align-items: center;
     gap: 8px;
     padding: 2px 8px;
-    border: solid 2px var(--accent);
+    border: solid 2px var(--light);
     border-radius: var(--radius);
-    
+
-    &>input[type=text]{
+    & > input[type="text"] {
         border: none;
         outline: none;
         background: none;
-        color: var(--accent);
+        color: var(--light);
     }
-    & label>img {
+    & label > img {
         width: 20px;
         height: 20px;
         cursor: pointer;
         padding-top: 1px;
-        padding-bottom: -1px
+        padding-bottom: -1px;
     }
-    & input[type=submit]{
+    & input[type="submit"] {
         display: none;
     }
 }
@@ -74,7 +79,7 @@ footer {
     justify-content: center;
     align-items: center;
     background: hsl(200, 5%, 85%);
-    &>p{
+    & > p {
         font-size: large;
     }
-}
+}

templates/base.html.twig

@@ -24,7 +24,7 @@
                     <img src="{{ asset('/styles/search.svg') }}" alt="Search" />
                 </label>
             </form>
-            <a href="{{url('app_login')}}" class="button-link">Connect</a>
+            <a href="{{url('app_login')}}">Login</a>
         </header>
         {% endblock %}
 

templates/security/login.html.twig

@@ -1,42 +1,114 @@
-{% extends 'base.html.twig' %}
+{% extends 'base.html.twig' %} {% block title %}Log in!{% endblock %} {% block
+body %}
+<style>
+    main#login {
+        padding: var(--size-max);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        gap: var(--size-max);
+        & > hr {
+            width: 2px;
+            height: 250px;
+            border: none;
+            background: var(--dark);
+            border-radius: var(--radius);
+        }
+    }
 
-{% block title %}Log in!{% endblock %}
+    main#login > section > form {
-
+        display: flex;
-{% block body %}
+        flex-direction: column;
+        gap: var(--size-max);
+        min-width: 300px;
+        align-items: center;
+        & > label {
+            display: none;
+        }
+        &
+            > :is(
+                input[type="text"],
+                input[type="email"],
+                input[type="password"]
+            ) {
+            height: var(--size-max);
+            border-radius: var(--radius);
+            padding: var(--size-max);
+            border: none;
+            background: var(--grey);
+            width: 80%;
+        }
+        & > input[type="submit"] {
+            cursor: pointer;
+            background: var(--light);
+            border: none;
+            border-radius: var(--radius);
+            box-shadow: var(--shadow);
+            color: var(--dark);
+            padding: calc(var(--size-max) - 8px) 0;
+            width: 70%;
+            height: 20%;
+            transition: all ease-out 0.2s;
+            &:hover {
+                box-shadow: var(--shadow-hover);
+            }
+        }
+    }
+</style>
+<main id="login">
     <form method="post">
         {% if error %}
-            <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
+        <div class="alert alert-danger">
+            {{ error.messageKey|trans(error.messageData, 'security') }}
+        </div>
+        {% endif %} {% if app.user %}
+        <div class="mb-3">
+            You are logged in as {{ app.user.userIdentifier }},
+            <a href="{{ path('app_logout') }}">Logout</a>
+        </div>
         {% endif %}
 
-        {% if app.user %}
+        <h1 class="h3 font-weight-normal mb-3">Please sign in</h1>
-            <div class="mb-3">
-                You are logged in as {{ app.user.userIdentifier }}, <a href="{{ path('app_logout') }}">Logout</a>
-            </div>
-        {% endif %}
-
-        <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
         <label for="username">Username</label>
-        <input type="text" value="{{ last_username }}" name="username" id="username" class="form-control" autocomplete="username" required autofocus>
+        <input
+            type="text"
+            value="{{ last_username }}"
+            name="username"
+            id="username"
+            class="form-control"
+            autocomplete="username"
+            required
+            autofocus
+        />
         <label for="password">Password</label>
-        <input type="password" name="password" id="password" class="form-control" autocomplete="current-password" required>
+        <input
+            type="password"
+            name="password"
+            id="password"
+            class="form-control"
+            autocomplete="current-password"
+            required
+        />
 
-        <input type="hidden" name="_csrf_token"
+        <input
-               value="{{ csrf_token('authenticate') }}"
+            type="hidden"
-        >
+            name="_csrf_token"
+            value="{{ csrf_token('authenticate') }}"
+        />
 
-        {#
+        {# Uncomment this section and add a remember_me option below your
-            Uncomment this section and add a remember_me option below your firewall to activate remember me functionality.
+        firewall to activate remember me functionality. See
-            See https://symfony.com/doc/current/security/remember_me.html
+        https://symfony.com/doc/current/security/remember_me.html
 
-            <div class="checkbox mb-3">
+        <div class="checkbox mb-3">
-                <label>
+            <label>
-                    <input type="checkbox" name="_remember_me"> Remember me
+                <input type="checkbox" name="_remember_me" /> Remember me
-                </label>
+            </label>
-            </div>
+        </div>
         #}
 
-        <button class="btn btn-lg btn-primary" type="submit">
+        <button class="btn btn-lg btn-primary" type="submit">Sign in</button>
-            Sign in
-        </button>
     </form>
+</main>
 {% endblock %}