Change dropdown css

resources/base.scss

@@ -667,25 +667,54 @@ math {
 }
 
 .dropdown {
-    border-radius: 4px;
-    border: 0.5px solid lightgray;
-    margin-top: 1px;
-    background: white;
     display: none;
+    background-color: white;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    padding: 4px 0;
+    z-index: 1;
+    border-radius: 5px;
 
     a {
+        display: block;
+        text-decoration: none;
+        transition: background-color 0.3s;
         color: black;
     }
 }
 
 .dropdown-item {
-    font-size: 15px;
+    font-size: 16px;
-    padding: 6px 8px;
+    padding: 6px 40px 6px 15px;
     cursor: pointer;
+    color: black;
+    font-weight: 600;
 }
 
 .dropdown-item:hover {
-    background: lightgray;
+    color: $theme_color;
+}
+
+.popper-arrow,
+.popper-arrow::before {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: inherit;
+}
+
+.popper-arrow {
+    visibility: hidden;
+}
+
+.popper-arrow::before {
+    visibility: visible;
+    content: '';
+    transform: rotate(45deg);
+}
+
+.popper-arrow {
+    top: -4px;
 }
 
 .unread_boxes {

resources/common.js

@@ -252,7 +252,17 @@ $.fn.textWidth = function () {
 };
 
 function registerPopper($trigger, $dropdown) {
-    const popper = Popper.createPopper($trigger[0], $dropdown[0]);
+    const popper = Popper.createPopper($trigger[0], $dropdown[0], {
+        placement: 'bottom-end',
+        modifiers: [
+            {
+                name: 'offset',
+                options: {
+                    offset: [0, 8],
+                },
+            },
+        ],
+    });
     $trigger.click(function(e) {
         $dropdown.toggle();
         popper.update();

templates/base.html

@@ -168,6 +168,7 @@
                   {{ language.name_local }}
                 </div>
               {% endfor %}
+              <div class="popper-arrow" data-popper-arrow></div>
             </div>
           </span>
           <span title="{{_('Dark Mode')}}">
@@ -179,6 +180,7 @@
               <i class="fa fa-angle-down" style="font-size: 18px; padding-top: 8px;"></i>
             </span>
             <div class="dropdown" id="userlink_dropdown" role="tooptip">
+              <div class="popper-arrow" data-popper-arrow></div>
               <a href="{{ url('user_page') }}">
                 <div class="dropdown-item">{{ _('Profile') }}</div>
               </a>