From b9776768f5c3e6a27a5d2ed3b1d82d1e080ce1f3 Mon Sep 17 00:00:00 2001
From: horberlan <horberlan@gmail.com>
Date: Sun, 26 Feb 2023 07:00:36 -0300
Subject: [PATCH] fix: add scroll-bar to menu-profile

---
 .vscode/settings.json                    | 15 +++++++-
 src/components/MainMenu/ProfilePopup.vue | 48 ++++++++++++++++++------
 2 files changed, 49 insertions(+), 14 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 37fb753..35f02f7 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -3,6 +3,17 @@
   "editor.guides.bracketPairs": true,
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.codeActionsOnSave": ["source.fixAll.eslint"],
-  "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"]
+  "editor.codeActionsOnSave": [
+    "source.fixAll.eslint"
+  ],
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "vue"
+  ],
+  "i18n-ally.localesPaths": [
+    "src/i18n",
+    "src/pages/messages"
+  ]
 }
diff --git a/src/components/MainMenu/ProfilePopup.vue b/src/components/MainMenu/ProfilePopup.vue
index be04c31..027ef53 100644
--- a/src/components/MainMenu/ProfilePopup.vue
+++ b/src/components/MainMenu/ProfilePopup.vue
@@ -41,7 +41,7 @@
         <hr class="popup-spacing" />
         <div class="popup-body">
           <div class="popup-body-item" @click="app.signIn()" v-close-popup>
-            <p>{{ $t("Add an account") }}</p>
+            <p>{{ $t('Add an account') }}</p>
           </div>
           <hr class="popup-spacing" />
           <div
@@ -50,7 +50,7 @@
             v-close-popup
           >
             <p>
-              {{ $t("Logout from") }}
+              {{ $t('Logout from') }}
               <span><UserName :pubkey="pubkey" /></span>
             </p>
           </div>
@@ -75,12 +75,12 @@ export default {
     LogoutDialog,
     UserName,
     UserAvatar,
-    BaseIcon,
+    BaseIcon
   },
   setup() {
     return {
       app: useAppStore(),
-      settings: useSettingsStore(),
+      settings: useSettingsStore()
     }
   },
   computed: {
@@ -89,14 +89,14 @@ export default {
     },
     accounts() {
       return this.settings.accounts
-    },
-  },
+    }
+  }
 }
 </script>
 
 <style lang="scss">
-@import "assets/theme/colors.scss";
-@import "assets/variables.scss";
+@import 'assets/theme/colors.scss';
+@import 'assets/variables.scss';
 
 .menu-profile {
   display: flex;
@@ -105,7 +105,7 @@ export default {
   margin-right: 1rem;
   padding: 0.5rem 1rem;
   cursor: pointer;
-  border-radius: 999px;
+  border-radius: 6.25rem;
   transition: 120ms ease-in-out;
   &:hover {
     background-color: rgba($color: $color-dark-gray, $alpha: 0.3);
@@ -128,7 +128,7 @@ export default {
     justify-content: space-between;
     .profile-info {
       user-select: none;
-      max-width: 125px;
+      max-width: 7.8125rem;
       overflow: hidden;
       p {
         margin: 0;
@@ -152,12 +152,36 @@ export default {
     }
   }
   &-popup {
-    width: 300px;
+    width: 18.75rem;
     border-radius: 1rem;
-    padding: 10px;
+    padding: 0.625rem;
     background-color: $color-bg;
     box-shadow: $shadow-white;
     overflow: hidden;
+    &:hover {
+      overflow-y: scroll;
+    }
+    &::-webkit-scrollbar-track {
+      border-radius: 1rem;
+      margin-block: 5px;
+    }
+
+    &::-webkit-scrollbar {
+      width: 1rem;
+      padding-block-start: 2rem;
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      min-height: 4rem;
+      box-sizing: padding-box;
+      border: 0.4rem solid transparent;
+      padding: 0 4px;
+      border-radius: 1rem;
+      background-clip: padding-box;
+      background-color: rgba($color: $color-dark-gray, $alpha: 0.2);
+    }
+
     .popup-spacing {
       border: none;
       background-color: rgba($color: $color-dark-gray, $alpha: 0.2);