[RIGHT][CSS] Right panel now shows an intuitive icon for other note options available.

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-color: var(--white);
-    background: var(--white) !important;
     fill: var(--bg1) !important;
+    stroke: var(--bg1) !important;
+    border: unset !important;
     transition: var(--cubic-transition);
 }
 

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;
-}

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>