Adjusted dropdown menus to have a larger clickable area #2223

src/app/common/components/dropdown/dropdown.component.scss

@@ -41,12 +41,15 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding: 0 8px 0 0;
     list-style: none;
     opacity: 1;
     text-overflow: ellipsis;
     text-align: left;
 
+    .m-dropdown--spacer {
+      padding: 0;
+    }
+
     a {
       text-decoration: none;
       width: 100%;
@@ -66,8 +69,9 @@
       vertical-align: middle;
     }
 
-    > * {
-      vertical-align: middle;
+    > div,
+    > a {
+      padding: 8px;
     }
   }
 }
@@ -92,9 +96,12 @@
       border: 1px solid themed($m-grey-50);
     }
 
+    .m-dropdown--list--item {
+      padding: 8px;
+    }
+
     .m-dropdown--list--item,
     .m-dropdownList__item {
-      padding: 8px;
       @include m-theme() {
         border-bottom: 1px solid themed($m-grey-50);
       }

src/app/common/components/nsfw-selector/nsfw-selector.component.scss

@@ -7,6 +7,7 @@
   }
   .m-dropdownList__item {
     cursor: pointer;
+    padding: 8px;
     i {
       width: 18px;
     }

src/app/common/layout/v2-topbar/user-menu.component.html

@@ -159,10 +159,12 @@
         *ngIf="getCurrentUser()"
         (click)="toggleTheme()"
       >
+        <div>
           <i class="material-icons" *ngIf="isDark">brightness_7</i>
           <i class="material-icons" *ngIf="!isDark">brightness_2</i>
           <span i18n *ngIf="isDark">Light Mode</span>
           <span i18n *ngIf="!isDark">Dark Mode</span>
+        </div>
       </li>
     </ng-container>
 

src/app/modules/newsfeed/dropdown/dropdown.component.html

@@ -183,7 +183,9 @@
       routerLink="/boost"
       i18n="@@MINDS__NEWSFEED__BOOST_ROTATOR__ABOUT_BOOST"
     >
+      <span>
         About Boost
+      </span>
     </li>
   </ng-container>
 </m-topbar--navigation--options>