From bd9e86afe079f4f05b861c720cfaaa29eee2b441 Mon Sep 17 00:00:00 2001
From: Eliseu Amaro <mail@eliseuama.ro>
Date: Tue, 3 Aug 2021 16:43:41 +0100
Subject: [PATCH] [RIGHT][CSS] Right panel now shows an intuitive icon for
 other note options available.

---
 public/assets/css/base.css                |  8 ++++---
 public/assets/css/right/right.css         | 26 ++++++++++++++---------
 templates/sidepanel/right/right.html.twig | 24 +++++++++++++--------
 3 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/public/assets/css/base.css b/public/assets/css/base.css
index fe2e8f2b0e..365b56733d 100644
--- a/public/assets/css/base.css
+++ b/public/assets/css/base.css
@@ -126,6 +126,7 @@ a:hover {
     transition: var(--cubic-transition);
 }
 
+
 button,
 input[type=file]::file-selector-button {
     font-family: var(--display-font);
@@ -154,15 +155,16 @@ button {
 #instance:focus svg,
 #instance:hover svg {
     fill: var(--bg1);
-    transition: all 0.4s ease;
+    transition: all 400ms ease;
 }
 
 summary:hover > svg,
 summary:focus > svg {
     border-radius: var(--unit-size);
-    padding: var(--unit-size) !important;
-    background: var(--white) !important;
+    background-color: var(--white);
     fill: var(--bg1) !important;
+    stroke: var(--bg1) !important;
+    border: unset !important;
     transition: var(--cubic-transition);
 }
 
diff --git a/public/assets/css/right/right.css b/public/assets/css/right/right.css
index 5b1f85f870..adfdd0f27e 100644
--- a/public/assets/css/right/right.css
+++ b/public/assets/css/right/right.css
@@ -23,15 +23,29 @@
 }
 
 .section-title {
-    flex: 1;
+    display: flex;
+    flex-direction: column;
     border-radius: var(--unit-size);
-
     padding: var(--unit-size);
     box-sizing: border-box;
 
     background-color: var(--translucent);
     font-family: var(--display-font);
 }
+
+.section-title-plus {
+    fill: var(--white);
+    width: var(--main-size);
+    height: auto;
+}
+.section-title-plus summary {
+    display: block;
+    position: absolute;
+    top: var(--unit-size);
+    right: var(--unit-size);
+    padding: var(--unit-size);
+}
+
 .section-content {
     margin: var(--unit-size);
 }
@@ -137,14 +151,6 @@
 
 .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;
-}
\ No newline at end of file
diff --git a/templates/sidepanel/right/right.html.twig b/templates/sidepanel/right/right.html.twig
index 1bc81ad5b5..eb3b98496a 100644
--- a/templates/sidepanel/right/right.html.twig
+++ b/templates/sidepanel/right/right.html.twig
@@ -4,7 +4,20 @@
 
         <section class="create-notice bg">
             {{ form_start(post_form) }}
-            <legend class="section-title">Create a note</legend>
+            <legend class="section-title">
+                <h1>Create a note</h1>
+
+                <details class="section-title-plus">
+                    <summary>
+                        {{ icon('plus-circle', 'icon icon-plus') | raw }}
+                    </summary>
+                    <div id="note-types">
+                        {% for tab in tabs %}
+                            <a href={{ path(tab['href']) }}>{{ tab['title'] }}</a>
+                        {% endfor %}
+                    </div>
+                </details>
+            </legend>
 
             <div class="section-content">
                     <span class="target">
@@ -47,14 +60,7 @@
             </div>
             {{ 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>