made logout dropdown look better

src/main/webapp/app/layouts/navbar/navbar.component.html

@@ -259,17 +259,23 @@
         <ul class="dropdown-menu search-container" ngbDropdownMenu aria-labelledby="account-menu">
           <ng-container *ngSwitchCase="false">
             <li *ngFor="let config of configs">
-              <img src="{{ 'oauth2.' + config.registrationId + '.icon' | translate }}" alt="oAuth2Login" style="width: 50px" />
-              <button
-                [disabled]="!contentEditable"
-                type="submit"
-                class="btn btn-outline-secondary"
-                *ngSwitchCase="false"
-                (click)="loginWithGitLab(config.registrationId)"
-                jhiTranslate="oauth2.{{ config.registrationId }}.text"
-              >
-                Sign in with GitLab Account
-              </button>
+              <div class="row">
+                <div class="col-4">
+                  <img src="{{ 'oauth2.' + config.registrationId + '.icon' | translate }}" alt="oAuth2Login" style="max-width: 50px" />
+                </div>
+                <div class="col-8">
+                  <button
+                    [disabled]="!contentEditable"
+                    type="submit"
+                    class="btn btn-outline-secondary"
+                    *ngSwitchCase="false"
+                    (click)="loginWithGitLab(config.registrationId)"
+                    jhiTranslate="oauth2.{{ config.registrationId }}.text"
+                  >
+                    Sign in with GitLab Account
+                  </button>
+                </div>
+              </div>
             </li>
             <li class="dropdown-divider"></li>
           </ng-container>
@@ -330,54 +336,52 @@
             </form>
           </li>
           <li *ngSwitchCase="true">
-            <a
-              class="dropdown-item"
-              routerLink="account/settings"
-              routerLinkActive="active"
-              *ngSwitchCase="true"
-              (click)="collapseNavbar()"
-            >
-              <fa-icon icon="wrench" [fixedWidth]="true"></fa-icon>
-              <span jhiTranslate="global.menu.account.settings">Settings</span>
-            </a>
-            <span class="spawn-submenu" jhiTranslate="global.menu.account.settingsDescription" *ngSwitchCase="true"
-              >Manage your user settings</span
-            >
-          </li>
-          <li *ngSwitchCase="true">
-            <a
-              class="dropdown-item"
-              routerLink="account/password"
-              routerLinkActive="active"
-              *ngSwitchCase="true"
-              (click)="collapseNavbar()"
-            >
-              <fa-icon icon="lock" [fixedWidth]="true"></fa-icon>
-              <span jhiTranslate="global.menu.account.password">Password</span>
-            </a>
-            <span class="spawn-submenu" jhiTranslate="global.menu.account.passwordDescription" *ngSwitchCase="true">Change password</span>
-          </li>
-          <li *ngSwitchCase="true">
-            <a
-              class="dropdown-item"
-              routerLink="account/achievements"
-              routerLinkActive="active"
-              *ngSwitchCase="true"
-              (click)="collapseNavbar()"
-            >
-              <fa-icon icon="award" [fixedWidth]="true"></fa-icon>
-              <span jhiTranslate="global.menu.account.achievements">Achievements</span>
-            </a>
-            <span class="spawn-submenu" jhiTranslate="global.menu.account.achievementsDescription" *ngSwitchCase="true"
-              >Look at your achievements</span
-            >
-          </li>
-          <li *ngSwitchCase="true">
-            <a class="dropdown-item" (click)="logout()" id="logout">
-              <fa-icon icon="sign-out-alt" [fixedWidth]="true"></fa-icon>
-              <span jhiTranslate="global.menu.account.logout">Sign out</span>
-            </a>
-            <span class="spawn-submenu" jhiTranslate="global.menu.account.logoutDescription" *ngSwitchCase="true">Quit session</span>
+            <div class="row">
+              <div class="col-12">
+                <a
+                  style="color: #212529"
+                  routerLink="account/settings"
+                  routerLinkActive="active"
+                  *ngSwitchCase="true"
+                  (click)="collapseNavbar()"
+                >
+                  <fa-icon icon="wrench" [fixedWidth]="true"></fa-icon>
+                  <span jhiTranslate="global.menu.account.settings">Settings</span>
+                </a>
+              </div>
+              <div class="col-12">
+                <a
+                  style="color: #212529"
+                  routerLink="account/password"
+                  routerLinkActive="active"
+                  *ngSwitchCase="true"
+                  (click)="collapseNavbar()"
+                >
+                  <fa-icon icon="lock" [fixedWidth]="true"></fa-icon>
+                  <span jhiTranslate="global.menu.account.passwordDescription">Change password</span>
+                </a>
+              </div>
+
+              <div class="col-12">
+                <a
+                  routerLink="account/achievements"
+                  routerLinkActive="active"
+                  *ngSwitchCase="true"
+                  style="color: #212529"
+                  (click)="collapseNavbar()"
+                >
+                  <fa-icon icon="award" [fixedWidth]="true"></fa-icon>
+                  <span jhiTranslate="global.menu.account.achievements">Achievements</span>
+                </a>
+              </div>
+
+              <div class="col-12">
+                <a (click)="logout()" id="logout">
+                  <fa-icon icon="sign-out-alt" [fixedWidth]="true"></fa-icon>
+                  <span jhiTranslate="global.menu.account.logout">Sign out</span>
+                </a>
+              </div>
+            </div>
           </li>
         </ul>
       </li>

src/main/webapp/content/scss/navbar.scss

@@ -46,7 +46,7 @@ svg {
   z-index: 1000;
   display: none;
   float: left;
-  min-width: 10rem;
+  min-width: 15rem;
   width: auto;
   padding: 0.5rem 0;
   margin: 0.125rem 0 0;