From 5e012c39ab6abb9bfcc51b597b4a5b76ae59a159 Mon Sep 17 00:00:00 2001
From: Eliseu Amaro <mail@eliseuama.ro>
Date: Thu, 29 Jul 2021 11:02:53 +0100
Subject: [PATCH] [SETTINGS][TWIG][CSS] Settings WIP. Form polished, dropdowns
 need styling.

Signed-off-by: Eliseu Amaro <mail@eliseuama.ro>
---
 public/assets/css/base.css                 | 25 +++++++++++++++
 public/assets/css/right/right.css          | 26 ----------------
 public/assets/css/security/security.css    |  7 -----
 public/assets/css/settings/settings.css    | 36 ++++++++++++++++++++++
 templates/settings/account.html.twig       |  4 +--
 templates/settings/notifications.html.twig |  2 +-
 6 files changed, 64 insertions(+), 36 deletions(-)

diff --git a/public/assets/css/base.css b/public/assets/css/base.css
index f691defbda..5a2c3290f6 100644
--- a/public/assets/css/base.css
+++ b/public/assets/css/base.css
@@ -115,6 +115,31 @@ a:hover {
     transition: var(--cubic-transition);
 }
 
+button,
+input[type=file]::file-selector-button {
+    font-family: var(--display-font);
+    font-size: var(--medium-size);
+    padding: .2em .4em;
+
+    border-radius: var(--unit-size);
+    border: 2px solid var(--bg3);
+
+    background-color: var(--translucent);
+    color: var(--white);
+    transition: var(--cubic-transition);
+}
+
+input[type=file]::file-selector-button:hover,
+button:hover {
+    border: 2px solid var(--white) !important;
+    background-color: var(--white) !important;
+    color: var(--bg1) !important;
+}
+
+button {
+    align-self: flex-end;
+}
+
 #instance:focus svg,
 #instance:hover svg {
     fill: var(--bg1);
diff --git a/public/assets/css/right/right.css b/public/assets/css/right/right.css
index 4280328825..e315a80c0f 100644
--- a/public/assets/css/right/right.css
+++ b/public/assets/css/right/right.css
@@ -137,32 +137,6 @@
     flex: 1;
 }
 
-input[type=file]::file-selector-button {
-    font-family: var(--display-font);
-    font-size: var(--medium-size);
-    padding: .2em .4em;
-
-    border-radius: var(--unit-size);
-    border: 2px solid var(--bg3);
-
-    background-color: var(--translucent);
-    color: var(--white);
-    transition: 0.4s;
-}
-
-#post_post:hover {
-    border: 2px solid var(--white);
-    background-color: var(--white);
-    color: var(--bg1);
-}
-
-input[type=file]::file-selector-button:hover,
-input[type=button]:hover {
-    border: 2px solid var(--white);
-    background-color: var(--white);
-    color: var(--bg1);
-}
-
 .create-notice details {
     font-family: var(--display-font);
     padding: var(--unit-size);
diff --git a/public/assets/css/security/security.css b/public/assets/css/security/security.css
index 64ac724c0e..75ecec82a0 100644
--- a/public/assets/css/security/security.css
+++ b/public/assets/css/security/security.css
@@ -54,13 +54,6 @@ input[type="email"] {
     width: 100%;
 }
 
-button {
-    font-family: var(--display-font);
-    font-size: var(--medium-size);
-    align-self: flex-end;
-    padding: var(--unit-size) var(--small-size);
-}
-
 fieldset div:last-child {
     text-align: end;
 }
\ No newline at end of file
diff --git a/public/assets/css/settings/settings.css b/public/assets/css/settings/settings.css
index 193b0957f9..24f1986d8c 100644
--- a/public/assets/css/settings/settings.css
+++ b/public/assets/css/settings/settings.css
@@ -40,6 +40,8 @@
 .form #save {
     margin-top: var(--main-size);
 
+    display: flex;
+    flex-direction: column;
     font-size: var(--medium-size);
     border-radius: var(--unit-size);
     padding: var(--unit-size);
@@ -47,6 +49,40 @@
     background-color: var(--translucent);
 }
 
+.form #save div {
+    display: contents;
+}
+
+.form #save div label {
+    display: inline-block;
+    font-family: var(--display-font);
+}
+
+.form #save div input,
+.form #save div textarea {
+    display: inline-block;
+    position: relative;
+
+    color: var(--white);
+    font-size: var(--medium-size);
+    border-radius: var(--unit-size);
+    padding: var(--unit-size);
+    box-sizing: border-box;
+    background-color: var(--translucent);
+}
+
+.form #save div textarea {
+    resize: vertical;
+}
+
+.form #save div p {
+    font-style: italic;
+}
+
+.form #save div:last-of-type {
+    text-align: end;
+}
+
 .icon-details-open {
     fill: var(--white);
 }
diff --git a/templates/settings/account.html.twig b/templates/settings/account.html.twig
index 14dd2168d3..e40271e579 100644
--- a/templates/settings/account.html.twig
+++ b/templates/settings/account.html.twig
@@ -5,8 +5,8 @@
 {% block page_name %}Account{% endblock %}
 
 {% block form %}
-    <div class='form-single'>
-        <h1>Settings / Profile</h1>
+    <div class='form'>
+        <h1>Settings / Account</h1>
         {{ form(acc) }}
     </div>
 {% endblock form %}
diff --git a/templates/settings/notifications.html.twig b/templates/settings/notifications.html.twig
index 317a23c1fc..b86de83a20 100644
--- a/templates/settings/notifications.html.twig
+++ b/templates/settings/notifications.html.twig
@@ -7,7 +7,7 @@
 {% endblock %}
 
 {% block form %}
-    <div id='form-tabs'>
+    <div class='form'>
         <h1>Settings / Notifications </h1>
 
         <ul>