From b4646ed593b4fd6919f80b4124ea978135b4ffa1 Mon Sep 17 00:00:00 2001
From: Olivia Madrid <olivia@minds.com>
Date: Mon, 7 Mar 2022 09:58:47 +0000
Subject: [PATCH] Sidenav refinements #5242

---
 .../chat-icon/chat-icon.component.html        |  2 +-
 .../sidebar-more.component.ng.scss            |  5 +-
 .../layout/sidebar/navigation.component.html  |  6 +-
 .../user-menu/user-menu.component.html        | 85 -------------------
 .../user-menu/user-menu.component.scss        |  2 +-
 .../user-menu/user-menu.component.spec.ts     | 14 ---
 .../user-menu/user-menu.component.ts          | 11 ---
 .../layout/v3-topbar/v3-topbar.component.html |  2 +-
 8 files changed, 9 insertions(+), 118 deletions(-)

diff --git a/src/app/common/components/chat-icon/chat-icon.component.html b/src/app/common/components/chat-icon/chat-icon.component.html
index 6bbc394c6b..26496ae30d 100644
--- a/src/app/common/components/chat-icon/chat-icon.component.html
+++ b/src/app/common/components/chat-icon/chat-icon.component.html
@@ -1,5 +1,5 @@
 <ng-template #iconAndBubble>
-  <m-icon iconId="chat_bubble" [sizeFactor]="5"></m-icon>
+  <m-icon iconId="chat_bubble" [sizeFactor]="27"></m-icon>
   <div class="m-chatIcon__unreadBubble" *ngIf="unread > 0">
     <span *ngIf="unread > 99">99+</span>
     <span *ngIf="unread <= 99">{{ unread }}</span>
diff --git a/src/app/common/layout/sidebar-more/sidebar-more.component.ng.scss b/src/app/common/layout/sidebar-more/sidebar-more.component.ng.scss
index 14cde51f12..70be5f100c 100644
--- a/src/app/common/layout/sidebar-more/sidebar-more.component.ng.scss
+++ b/src/app/common/layout/sidebar-more/sidebar-more.component.ng.scss
@@ -21,7 +21,7 @@
 
       li.m-sidebarMoreDropdown__item {
         padding: 0;
-        font-size: 15px;
+        font-size: 16px;
         line-height: 20px;
         border: 0 !important;
 
@@ -53,6 +53,7 @@
           ::ng-deep m-icon,
           i {
             margin-right: 15px;
+            font-size: 22px;
             @include m-theme() {
               color: themed($m-textColor--secondary);
               fill: themed($m-textColor--secondary);
@@ -96,7 +97,7 @@
           span {
             text-decoration: none;
             font-size: 13px;
-            line-height: 20px;
+            line-height: 16px;
             width: auto;
             white-space: pre-wrap;
             word-break: break-all;
diff --git a/src/app/common/layout/sidebar/navigation.component.html b/src/app/common/layout/sidebar/navigation.component.html
index c3fae68e5b..1e0890e78f 100644
--- a/src/app/common/layout/sidebar/navigation.component.html
+++ b/src/app/common/layout/sidebar/navigation.component.html
@@ -79,7 +79,7 @@
             [anchor]="'left'"
             [useParentPosition]="true"
           >
-            <m-icon iconId="home" [sizeFactor]="8" m-tooltip--icon></m-icon
+            <m-icon iconId="home" [sizeFactor]="27" m-tooltip--icon></m-icon
             ><ng-container i18n="@@COMMON__NEWSFEED"
               >Newsfeed</ng-container
             ></m-tooltip
@@ -164,7 +164,7 @@
           >
             <m-icon
               iconId="account_balance"
-              [sizeFactor]="8"
+              [sizeFactor]="27"
               m-tooltip--icon
             ></m-icon>
             <ng-container i18n="@@COMMON__WALLET">Wallet</ng-container>
@@ -223,7 +223,7 @@
               [anchor]="'left'"
               [useParentPosition]="true"
             >
-              <m-icon iconId="group" [sizeFactor]="8" m-tooltip--icon></m-icon>
+              <m-icon iconId="group" [sizeFactor]="27" m-tooltip--icon></m-icon>
               <ng-container i18n="@@COMMON__GROUPS">Groups</ng-container>
             </m-tooltip>
             <span
diff --git a/src/app/common/layout/v3-topbar/user-menu/user-menu.component.html b/src/app/common/layout/v3-topbar/user-menu/user-menu.component.html
index 55de13cca1..cbdeedbffb 100644
--- a/src/app/common/layout/v3-topbar/user-menu/user-menu.component.html
+++ b/src/app/common/layout/v3-topbar/user-menu/user-menu.component.html
@@ -54,32 +54,6 @@
         Upgrade
       </a>
     </li>
-
-    <li
-      class="
-        m-dropdownList__item
-        m-userMenuDropdown__item
-        m-userMenuDropdownItem__buyTokens
-      "
-      *ngIf="getCurrentUser()"
-      (click)="closeMenu()"
-    >
-      <a
-        routerLink="/token"
-        i18n="verb|@@COMMON__BUY_TOKENS"
-        data-ref="topnav-usermenu-buytokens"
-        >Buy tokens</a
-      >
-    </li>
-
-    <li
-      class="
-        m-dropdownList__item
-        m-userMenuDropdown__item m-userMenuDropdown__spacer
-      "
-      *ngIf="getCurrentUser()"
-    ></li>
-
     <li
       class="m-dropdownList__item m-userMenuDropdown__item"
       *ngIf="!getCurrentUser()"
@@ -100,18 +74,6 @@
       </a>
     </li>
 
-    <ng-container>
-      <li
-        class="m-dropdownList__item m-userMenuDropdown__item"
-        *ngIf="getCurrentUser()"
-        (click)="toggleTheme()"
-        data-ref="topnav-usermenu-themechange"
-      >
-        <span i18n="@@COMMON__LIGHT_MODE" *ngIf="isDark">Enter Light Mode</span>
-        <span i18n="@@COMMON__DARK_MODE" *ngIf="!isDark">Enter Dark Mode</span>
-      </li>
-    </ng-container>
-
     <li
       class="m-dropdownList__item m-userMenuDropdown__item"
       (click)="closeMenu()"
@@ -158,53 +120,6 @@
         <span i18n="@@COMMON__LOGOUT">Logout</span>
       </a>
     </li>
-
-    <li
-      class="
-        m-dropdownList__item
-        m-userMenuDropdown__item m-userMenuDropdown__spacer
-      "
-    ></li>
-
-    <li
-      class="
-        m-dropdownList__item
-        m-userMenuDropdown__item m-userMenuDropdown__footer
-      "
-      *ngIf="showFooterLinks"
-    >
-      <ng-container
-        *ngFor="let link of footerLinks.slice(0, maxFooterLinks); let i = index"
-      >
-        <a
-          *ngIf="link.routerLink"
-          [routerLink]="link.routerLink"
-          (click)="closeMenu()"
-          [data-ref]="'topnav-usermenu-footer' + link.label"
-        >
-          {{ link.label }}
-        </a>
-        <a
-          *ngIf="link.href"
-          [href]="link.href"
-          target="_blank"
-          (click)="closeMenu()"
-        >
-          {{ link.label }}
-        </a>
-        <span> · </span>
-      </ng-container>
-      <a (click)="toggleFooterLinks()">
-        <ng-container
-          *ngIf="maxFooterLinks === 5; else lessView"
-          i18n="@@COMMON__MORE"
-          >More</ng-container
-        >
-        <ng-template #lessView>
-          <ng-container i18n="@@COMMON__LESS">Less</ng-container>
-        </ng-template>
-      </a>
-    </li>
   </ul>
 </div>
 
diff --git a/src/app/common/layout/v3-topbar/user-menu/user-menu.component.scss b/src/app/common/layout/v3-topbar/user-menu/user-menu.component.scss
index bbbca94bc8..90d2fc8d1a 100644
--- a/src/app/common/layout/v3-topbar/user-menu/user-menu.component.scss
+++ b/src/app/common/layout/v3-topbar/user-menu/user-menu.component.scss
@@ -22,6 +22,7 @@ m-usermenu__v3 {
       margin: 34px 0 0;
       top: 15px;
       right: -20px;
+      padding: 18px 0;
 
       @include m-theme() {
         background-color: themed($m-bgColor--secondary);
@@ -56,7 +57,6 @@ m-usermenu__v3 {
         }
 
         &.m-userMenuDropdown__username {
-          margin-top: 18px;
           padding-top: 8px;
           padding-bottom: 8px;
 
diff --git a/src/app/common/layout/v3-topbar/user-menu/user-menu.component.spec.ts b/src/app/common/layout/v3-topbar/user-menu/user-menu.component.spec.ts
index 959dc2496a..0e8e2824ff 100644
--- a/src/app/common/layout/v3-topbar/user-menu/user-menu.component.spec.ts
+++ b/src/app/common/layout/v3-topbar/user-menu/user-menu.component.spec.ts
@@ -97,18 +97,4 @@ describe('UserMenuV3Component', () => {
     //   fixture.debugElement.query(By.css('.m-userMenuDropdownItem__upgrade'))
     // ).toBeNull();
   });
-
-  it('should have a "buy tokens" option that redirects to /token', () => {
-    comp.toggleMenu();
-    expect(
-      fixture.debugElement.query(By.css('.m-userMenuDropdownItem__buyTokens'))
-    ).not.toBeNull();
-
-    const link = fixture.debugElement.query(
-      By.css('.m-userMenuDropdownItem__buyTokens a')
-    );
-    expect(link).not.toBeNull();
-
-    expect(link.nativeElement.getAttribute('routerLink')).toEqual('/token');
-  });
 });
diff --git a/src/app/common/layout/v3-topbar/user-menu/user-menu.component.ts b/src/app/common/layout/v3-topbar/user-menu/user-menu.component.ts
index 238d20540d..95a72bcd1f 100644
--- a/src/app/common/layout/v3-topbar/user-menu/user-menu.component.ts
+++ b/src/app/common/layout/v3-topbar/user-menu/user-menu.component.ts
@@ -9,8 +9,6 @@ import {
 import { Session } from '../../../../services/session';
 import { ThemeService } from '../../../../common/services/theme.service';
 import { Subscription } from 'rxjs';
-import { Navigation as NavigationService } from '../../../../services/navigation';
-import { RouterLink } from '@angular/router';
 import { FeaturesService } from '../../../../services/features.service';
 import { MindsUser } from '../../../../interfaces/entities';
 import { UserMenuService } from './user-menu.service';
@@ -22,7 +20,6 @@ import { UserMenuService } from './user-menu.service';
 })
 export class UserMenuV3Component implements OnInit, OnDestroy {
   @Input() useAvatar: boolean = false;
-  @Input() showFooterLinks: boolean = false;
 
   isDark: boolean = false;
   themeSubscription: Subscription;
@@ -86,14 +83,6 @@ export class UserMenuV3Component implements OnInit, OnDestroy {
     this.themeService.toggleUserThemePreference();
   }
 
-  toggleFooterLinks(): void {
-    if (this.maxFooterLinks === 5) {
-      this.maxFooterLinks = Infinity;
-    } else {
-      this.maxFooterLinks = 5;
-    }
-  }
-
   ngOnDestroy(): void {
     this.closeMenu();
     this.themeSubscription.unsubscribe();
diff --git a/src/app/common/layout/v3-topbar/v3-topbar.component.html b/src/app/common/layout/v3-topbar/v3-topbar.component.html
index f3a4564c0c..2d8c652f6a 100644
--- a/src/app/common/layout/v3-topbar/v3-topbar.component.html
+++ b/src/app/common/layout/v3-topbar/v3-topbar.component.html
@@ -122,7 +122,7 @@
           <ng-content select="[icons]"></ng-content>
           <m-usermenu__v3
             [useAvatar]="true"
-            [showFooterLinks]="true"
+            *ngIf="getCurrentUser()"
           ></m-usermenu__v3>
         </div>