[TWIG][CSS] Fixed right panel buttons, fix issue where the form was invalid on send.

Signed-off-by: Eliseu Amaro <mail@eliseuama.ro>

public/assets/css/right/right.css

@@ -25,7 +25,7 @@
     border-radius: var(--unit-size);
 }
 
-.section-title legend {
+.section-title {
     display: flex;
     width: 100%;
     border-radius: var(--unit-size);
@@ -39,8 +39,7 @@
 }
 
 .section-content {
-    padding: var(--unit-size);
+    margin: var(--unit-size);
-    box-sizing: border-box;
 }
 
 .section-content hr {
@@ -63,12 +62,16 @@
 
 #post_visibility {
     display: flex;
-    justify-content: space-evenly;
+    justify-content: flex-start;
     font-size: var(--medium-size);
     padding: var(--unit-size);
     box-sizing: border-box;
 }
 
+#post_visibility input[type="radio"] {
+    margin-right: 5px;
+}
+
 #post_visibility label {
     margin-right: var(--main-size);
 }
@@ -80,21 +83,13 @@
 }
 
 .notice-options {
+    margin-top: var(--unit-size);
     display: flex;
-    font-family: var(--display-font);
+    flex-wrap: wrap;
-    padding: var(--unit-size);
     box-sizing: border-box;
-}
 
-.notice-options button {
+    font-family: var(--display-font);
-    font-size: var(--medium-size);
+    width: 100%;
-    padding: var(--unit-size) var(--small-size);
-    border-radius: var(--unit-size);
-    border: none;
-}
-
-.attachments {
-    flex: 1;
 }
 
 .post {
@@ -117,12 +112,65 @@
     box-sizing: border-box;
 }
 
+
 #post_attachments,
 #post_post {
     cursor: pointer;
 }
 
-.custom-file-upload {
+#post_post {
-    display: inline-block;
+    font-family: var(--display-font);
-    font-size: var(--main-size);
+    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;
+}
+
+.attachments {
+    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);
+    box-sizing: border-box;
+    cursor: pointer;
+}
+
+#note-types {
+    padding: var(--unit-size);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
 }

templates/sidepanel/right/right.html.twig

@@ -1,14 +1,13 @@
 <aside id='right-panel'>
 
     {% if post_form is defined %}
-        {{ form_start(post_form) }}
-        <section class="create-notice">
-            <form>
-                <fieldset class="section-title">
-                    <legend>Create a note</legend>
-                </fieldset>
 
-                <fieldset class="section-content">
+        <section class="create-notice">
+            {{ form_start(post_form) }}
+            <fieldset>
+                <legend class="section-title">Create a note</legend>
+
+                <div class="section-content">
                         <span class="target">
                             <div class="target-top">
                                 {{ form_label(post_form.to) }}
@@ -28,11 +27,7 @@
 
                     <hr>
 
-                    <span id="tabs">
+                    <span id="input">
-                        {% for tab in tabs %}
-                            <a href={{ path(tab['href']) }}>{{ tab['title'] }}</a>
-                        {% endfor %}
-
                             <div class="input-wrapper">
                                 <div class="content-input">
                                     {{ form_row(post_form.content) }}
@@ -49,11 +44,22 @@
                                 {{ form_row(post_form.post) }}
                             </div>
                         </span>
+                </div>
             </fieldset>
-            </form>
-        </section>
             {{ form_end(post_form) }}
 
+            <details>
+                <summary>Other notes...</summary>
+                <div id="note-types">
+                    {% for tab in tabs %}
+                        <a href={{ path(tab['href']) }}>{{ tab['title'] }}</a>
+                    {% endfor %}
+                </div>
+            </details>
+
+        </section>
+
+
     {% endif %}
 
     {% set current_path = app.request.get('_route') %}