refactor(scrollbar): clearing remaining components (#3514)

assets/styles/base.less

@@ -494,17 +494,6 @@ a.link {
 }
 
 //Scrollbar
-.ps__thumb-x,
-.ps__thumb-y,
-.ps__rail-x:hover > .ps__thumb-x,
-.ps__rail-x:focus > .ps__thumb-x,
-.ps__rail-x.ps--clicking .ps__thumb-x,
-.ps__rail-y:hover > .ps__thumb-y,
-.ps__rail-y:focus > .ps__thumb-y,
-.ps__rail-y.ps--clicking .ps__thumb-y {
-  background: @flair-color !important;
-}
-
 .auto-scroll {
   &::-webkit-scrollbar-thumb {
     &:extend(.background-flair);

assets/styles/framework/colors.less

@@ -166,6 +166,12 @@
   rgba(34, 44, 63, 0) 100%
 );
 
+@lighter-splash-radial: radial-gradient(
+  circle,
+  rgba(96, 109, 136, 0.813) 0%,
+  rgba(101, 114, 139, 0.616) 100%
+);
+
 @midground-gradient: -webkit-radial-gradient(
     top left,
     #1c273a,

assets/styles/framework/framework.less

@@ -16,8 +16,6 @@
 @fifth-layer-zindex: 50;
 @viewport-width: 100vw;
 
-@import url('~/assets/styles/thirdparty/scrollbar.less');
-
 #__nuxt,
 #__layout,
 #app-wrap,

assets/styles/themes/moonless_night.less

@@ -30,9 +30,7 @@
   }
 
   &body,
-  #app,
-  .horizontal-rule,
-  .vertical-divider {
+  #app {
     background: @midground !important;
   }
 

components/interactables/Close/Close.less

@@ -15,9 +15,18 @@
   cursor: pointer;
 }
 
+.wrapper .close-button {
+  right: 0;
+  top: 0;
+}
+
 @media only screen and (max-width: @mobile-breakpoint) {
   .close-button {
     right: @normal-spacing;
     top: @normal-spacing;
   }
+
+  .wrapper .close-button {
+    top: @large-spacing;
+  }
 }

components/interactables/UserPicker/UserPicker.html

@@ -15,8 +15,8 @@
     type="dark"
     :placeholder="$t('servers.create.select_friends_placeholder')"
   />
-  <UiScroll verticalScroll scrollbarVisibility="scroll" enableWrap>
-    <TypographyText
+  <UiSimpleScroll scrollMode="vertical" scrollShow="scroll"
+    ><TypographyText
       v-if="!filteredFriends.length"
       :text="$t('servers.create.user_picker_empty')"
       class="empty-results-text"
@@ -29,5 +29,5 @@
       :selected="isSelected(friend)"
       @click="toggle(friend)"
     />
-  </UiScroll>
+  </UiSimpleScroll>
 </div>

components/ui/ComingSoon/ComingSoon.less

@@ -25,15 +25,4 @@
     pointer-events: none;
     padding: 20px;
   }
-
-  .coming-soon-overlay::before {
-    content: 'Coming Soon';
-    position: absolute;
-    font-size: 2.5em;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    color: white;
-    &:extend(.third-layer);
-  }
 }

components/ui/HorizontalRule/HorizontalRule.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="horizontal-rule">
-    <hr />
+  <div class="horizontal-container">
+    <div class="horizontal-rule" />
   </div>
 </template>
 <script lang="ts">
@@ -9,14 +9,16 @@ import Vue from 'vue'
 export default Vue.extend({})
 </script>
 <style scoped lang="less">
-hr {
-  height: 0px;
-  border: none;
-  border-bottom: transparents;
-}
-div {
+.horizontal-rule {
   height: 1px;
   background: @splash-radial;
-  margin: @normal-spacing 0;
+}
+.horizontal-container {
+  padding: @normal-spacing 0;
+}
+.moonless-night {
+  .horizontal-rule {
+    background: @lighter-splash-radial;
+  }
 }
 </style>

components/ui/SimpleScroll/SimpleScroll.less

@@ -5,7 +5,8 @@
   .wrapper {
     pointer-events: auto;
     width: @full;
-    height: @full;
+    height: fit-content;
+    height: -moz-fit-content;
     margin: auto;
     position: relative;
     white-space: normal;

components/ui/VerticalRule/VerticalRule.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="vertical-rule">
-    <div />
+  <div class="vertical-container">
+    <div class="vertical-rule" />
   </div>
 </template>
 <script lang="ts">
@@ -9,12 +9,12 @@ import Vue from 'vue'
 export default Vue.extend({})
 </script>
 <style scoped lang="less">
-div {
+.vertical-rule {
   width: 1px;
   height: 40px;
   background: @splash-radial;
 }
-div.vertical-rule {
-  margin: 0 @normal-spacing;
+.vertical-container {
+  padding: 0 @normal-spacing;
 }
 </style>

components/views/marketplace/Marketplace.html

@@ -45,16 +45,11 @@
         </InteractablesButtonGroup>
       </div>
       <div class="listing-panel">
-        <UiScroll
-          verticalScroll
-          scrollbarVisibility="scroll"
-          enableWrap
-          noPadding
-        >
+        <UiSimpleScroll scrollMode="vertical" scrollShow="scroll">
           <MarketplaceListing v-if="subject==='Themes'" />
           <MarketplaceGlyphs v-if="subject==='Glyphs'" />
           <MarketplaceNfts v-if="subject==='NFTs'" />
-        </UiScroll>
+        </UiSimpleScroll>
       </div>
     </swiper-slide>
   </swiper>

components/views/navigation/mobile/sidebar/sidebar.vue

@@ -95,7 +95,11 @@
         v-scroll-lock="true"
         class="scrolling hidden-scroll users"
       >
-        <UiSimpleScroll scroll-mode="vertical" scroll-show="scroll">
+        <UiSimpleScroll
+          scroll-mode="vertical"
+          scroll-show="scroll"
+          :container-class="isNoFriends ? 'no-friends-scrollbar' : ''"
+        >
           <UiLoadersAddress
             v-if="dataState.friends === DataStateType.Loading"
             :count="4"
@@ -318,13 +322,20 @@ export default Vue.extend({
       top: 2.5rem;
       right: 1rem;
     }
+
+    #simple-scrollbar.no-friend-scrollbar {
+      display: flex;
+      align-items: center;
+    }
+
     .no-friends {
       &:extend(.full-width);
       display: inline-flex;
       justify-content: center;
       flex-direction: column;
       align-items: center;
-      height: calc(100% - @sidebar-inner-offset);
+      height: @full;
+      padding-bottom: @xlarge-spacing;
 
       .button {
         margin-top: @normal-spacing;