From f9f4f179bb9e77c2381a8b7a606472e19477a999 Mon Sep 17 00:00:00 2001
From: Eliseu Amaro <mail@eliseuama.ro>
Date: Fri, 3 Sep 2021 11:51:29 +0100
Subject: [PATCH] [Security][Right] login and register padding fix. Select
 boxes styling done.

---
 public/assets/css/base.css                |  30 ++++++++++++++++++----
 public/assets/css/reset.css               |   3 ---
 public/assets/{css => images}/bg.jpg      | Bin
 public/assets/{css => images}/noise.svg   |   0
 templates/security/login.html.twig        |   2 +-
 templates/security/register.html.twig     |  13 ++++++----
 templates/sidepanel/right/right.html.twig |   4 +--
 7 files changed, 35 insertions(+), 17 deletions(-)
 rename public/assets/{css => images}/bg.jpg (100%)
 rename public/assets/{css => images}/noise.svg (100%)

diff --git a/public/assets/css/base.css b/public/assets/css/base.css
index ab75ef7cb9..41109dc325 100644
--- a/public/assets/css/base.css
+++ b/public/assets/css/base.css
@@ -55,7 +55,7 @@ hr {
     all: unset;
     display: block;
     height: 2px;
-    background: var(--translucent);
+    background: var(--bg2);
 }
 
 summary:focus {
@@ -338,6 +338,10 @@ summary:focus {
     font-size: var(--small-size);
 }
 
+.section-form-scope {
+    margin-left: 5px;
+}
+
 .section-form-options {
     display: block !important;
     margin-bottom: var(--unit-size);
@@ -360,6 +364,11 @@ summary:focus {
 }
 
 /* BUTTONS AND INPUT SHENANIGANS */
+label {
+    font-family: var(--display-font);
+    font-weight: bold;
+}
+
 button {
     font-size: var(--small-size) !important;
     font-family: var(--display-font) !important;
@@ -407,6 +416,7 @@ input[type=radio]:checked {
 input[type=checkbox] {
     background-color: var(--bg2) !important;
     background-size: cover;
+    margin-left: 5px;
 
     -webkit-mask-image: url("../icons/check-off.svg") !important;
     -o-mask-image: url("../icons/check-off.svg") !important;
@@ -463,6 +473,20 @@ input[type=file]:hover {
     color: var(--white) !important;
 }
 
+select {
+    font-family: var(--display-font) !important;
+    font-size: var(--small-size);
+    font-weight: normal !important;
+    background: linear-gradient(180deg, var(--bg2), transparent) !important;
+    color: var(--white);
+    border: 2px solid var(--bg2);
+    border-radius: var(--unit-size);
+}
+select:hover,
+select:focus {
+    border-color: var(--bg3);
+}
+
 /* MEDIA QUERIES */
 /* sidepanels need to be shown by default on desktop, hidden on mobile */
 .panel .panel-content {
@@ -482,10 +506,6 @@ input[type=file]:hover {
 
     padding: var(--unit-size);
 }
-.panel label {
-    font-family: var(--display-font);
-    font-weight: bold;
-}
 
 @media (min-width: 1200px) {
     #panel-left-icon,
diff --git a/public/assets/css/reset.css b/public/assets/css/reset.css
index a44602b9b6..3441656bc9 100644
--- a/public/assets/css/reset.css
+++ b/public/assets/css/reset.css
@@ -187,10 +187,7 @@ input[type=radio] {
 /* file selector */
 input[type=file] {
     all: unset;
-
     display: block !important;
-    width: 100%;
-
     border-radius: var(--unit-size);
 }
 
diff --git a/public/assets/css/bg.jpg b/public/assets/images/bg.jpg
similarity index 100%
rename from public/assets/css/bg.jpg
rename to public/assets/images/bg.jpg
diff --git a/public/assets/css/noise.svg b/public/assets/images/noise.svg
similarity index 100%
rename from public/assets/css/noise.svg
rename to public/assets/images/noise.svg
diff --git a/templates/security/login.html.twig b/templates/security/login.html.twig
index e4b88e8045..9279630823 100644
--- a/templates/security/login.html.twig
+++ b/templates/security/login.html.twig
@@ -10,7 +10,7 @@
 {% block body %}
     <div class='content'>
         <section class="section-widget">
-            <form class="section-widget-form" method="post">
+            <form class="section-form" method="post">
                 <fieldset>
                     <legend class="section-form-legend"><h1>{{ "Login" | trans }}</h1></legend>
 
diff --git a/templates/security/register.html.twig b/templates/security/register.html.twig
index 270e3f36fb..d820971492 100644
--- a/templates/security/register.html.twig
+++ b/templates/security/register.html.twig
@@ -9,9 +9,10 @@
 
 {% block body %}
     <div class='content'>
-        <section class="section-widget">
-            {{ form_start(registration_form) }}
-                <fieldset class="section-widget-form">
+        <div class="section-container">
+            <section class="section-widget">
+                {{ form_start(registration_form) }}
+                <fieldset class="section-form">
                     <legend class="section-form-legend">
                         <h1>{{ "Register a new account" | trans }}</h1>
                     </legend>
@@ -25,8 +26,10 @@
                     {{ form_row(registration_form.password) }}
                     {{ form_row(registration_form.register) }}
                 </fieldset>
-            {{ form_end(registration_form) }}
-        </section>
+                {{ form_end(registration_form) }}
+            </section>
+        </div>
+
     </div>
 {% endblock body %}
 
diff --git a/templates/sidepanel/right/right.html.twig b/templates/sidepanel/right/right.html.twig
index 5bfd341ecc..ba68810d96 100644
--- a/templates/sidepanel/right/right.html.twig
+++ b/templates/sidepanel/right/right.html.twig
@@ -20,9 +20,7 @@
                 <div class="section-form">
                     {{ form_start(post_form) }}
 
-                    <span class="section-form-target">
-                    {{ form_label(post_form.to) }}{{ form_widget(post_form.to) }}
-                </span>
+                    {{ form_row(post_form.to, {'attr': {'class': 'section-form-scope'}}) }}
 
                     {{ form_row(post_form.visibility, {'attr': {'class': 'section-form-scope'}}) }}