💅 fresh UI update

components/Navbar.vue

@@ -44,15 +44,12 @@
     <template #start>
       <Search
         v-if="!mobileGallery"
-        :class="{
-          'nav-search-shrink': !showTopNavbar,
-        }"
         hideFilter
         showDefaultSuggestions
-        class="search-navbar is-flex-grow-1 is-hidden-touch"
+        class="search-navbar is-flex-grow-1 pb-0 is-hidden-touch"
         searchColumnClass="is-flex-grow-1" />
     </template>
-    <template #end v-if="showTopNavbar">
+    <template #end v-if="showTopNavbar || isBurgerMenuOpened">
       <LazyHistoryBrowser
         class="custom-navbar-item navbar-link-background is-hidden-touch"
         id="NavHistoryBrowser" />
@@ -140,11 +137,12 @@
           </b-navbar-item>
         </template>
       </b-navbar-dropdown>
-      <LazyChainSelect class="custom-navbar-item" id="NavChainSelect" />
+      <LazyChainSelect class="navbar-item has-dropdown" id="NavChainSelect" />
       <LazySwitchLocale
-        class="custom-navbar-item"
+        class="navbar-item has-dropdown"
         id="NavLocaleChanger"
         data-cy="localChanger" />
+      <ColorModeButton />
       <NavbarProfileDropdown
         :isRmrk="isRmrk"
         :isBsx="isBsx"
@@ -171,6 +169,7 @@ import PrefixMixin from '~/utils/mixins/prefixMixin'
 import Identity from '@/components/shared/format/Identity.vue'
 import Search from '@/components/rmrk/Gallery/Search/SearchBar.vue'
 import BasicImage from '@/components/shared/view/BasicImage.vue'
+import ColorModeButton from '@/components/common/ColorModeButton.vue'
 import { createVisible } from '@/utils/config/permision.config'
 
 import { identityStore } from '@/utils/idbStore'
@@ -182,12 +181,14 @@ import { get } from 'idb-keyval'
     Search,
     Identity,
     BasicImage,
+    ColorModeButton,
   },
 })
 export default class NavbarMenu extends mixins(PrefixMixin) {
-  private mobileGallery = false
+  protected mobileGallery = false
+  protected showTopNavbar = true
   private isGallery: boolean = this.$route.path.includes('tab=GALLERY')
-  private showTopNavbar = true
+  private fixedTitleNavAppearDistance = 200
   private lastScrollPosition = 0
   private artistName = ''
   private showMobileSearchBar = false
@@ -220,6 +221,7 @@ export default class NavbarMenu extends mixins(PrefixMixin) {
   }
 
   get isTargetPage(): boolean {
+    // why?
     return (
       this.inCollectionPage ||
       this.inGalleryDetailPage ||
@@ -265,9 +267,8 @@ export default class NavbarMenu extends mixins(PrefixMixin) {
     if (Math.abs(currentScrollPosition - this.lastScrollPosition) < 30) {
       return
     }
-    const fixedTitleNavAppearDistance = 200
     this.showTopNavbar =
-      currentScrollPosition < fixedTitleNavAppearDistance || !this.isTargetPage
+      currentScrollPosition < this.fixedTitleNavAppearDistance
     this.lastScrollPosition = currentScrollPosition
   }
 
@@ -299,38 +300,8 @@ export default class NavbarMenu extends mixins(PrefixMixin) {
 <style lang="scss">
 @import '@/styles/variables';
 
-@include tablet {
-  .navbar-shrink {
-    box-shadow: none;
-    max-height: 70px;
-    padding-top: 6px !important;
-    padding-bottom: 6px !important;
-  }
-  .nav-search-shrink {
-    padding-bottom: 0 !important;
-  }
-}
-
 // Reserved for future adjustments
 
-// @media only screen and (min-width: 1215px) and (max-width: 1140px) {
-//   a#NavProfile {
-//     display: none;
-//   }
-// }
-
-// @media only screen and (min-width: 1215px) and (max-width: 1160px) {
-//   a#NavStats {
-//     display: none;
-//   }
-// }
-
-//@media only screen and (min-width: 1024px) and (max-width: 1100px) {
-//  div#NavHistoryBrowser {
-//    display: none;
-//  }
-//}
-
 //@media only screen and (min-width: 1024px) and (max-width: 1200px) {
 //  a#NavCreate {
 //    display: none;
@@ -351,7 +322,6 @@ export default class NavbarMenu extends mixins(PrefixMixin) {
 
 @include touch {
   .navbar {
-    .navbar-item,
     .custom-navbar-item {
       margin-left: 0 !important;
     }
@@ -373,7 +343,7 @@ export default class NavbarMenu extends mixins(PrefixMixin) {
 }
 
 .navbar {
-  background: rgba(12, 12, 12, 0.7);
+  background-color: inherit;
   backdrop-filter: blur(20px);
   transform: translateZ(0px);
   transition: 0.3s ease;
@@ -389,38 +359,24 @@ export default class NavbarMenu extends mixins(PrefixMixin) {
     }
   }
 
-  .navbar-link {
-    &:hover {
-      background-color: $primary !important;
-      color: $text !important;
-    }
+  &.navbar-shrink {
+    box-shadow: none;
+    max-height: 70px;
+    padding-top: 6px !important;
+    padding-bottom: 6px !important;
+    background-color: rgba(12, 12, 12, 0.7) !important;
   }
 
   .navbar-item {
-    text-transform: uppercase;
+    text-transform: capitalize;
     font-weight: 500;
-    border-top: 1px solid $primary;
-    margin-left: 0.5em;
-    transition: 0.3s;
-    background: rgba(9, 9, 9, 0.55);
-    &:hover {
-      background-color: $primary;
-      color: $text;
-    }
+    margin: 0.5em;
   }
 
   .custom-navbar-item {
     margin-left: 0.5em;
   }
 
-  .logo {
-    border: none !important;
-    background: transparent;
-    @include tablet {
-      margin-left: 0;
-    }
-  }
-
   .navbar-brand {
     align-items: center;
   }
@@ -433,10 +389,6 @@ export default class NavbarMenu extends mixins(PrefixMixin) {
   .navbar-dropdown {
     border: 2px solid $primary-light !important;
     box-shadow: $dropdown-content-shadow !important;
-    .navbar-item {
-      border: none !important;
-      margin-left: 0 !important;
-    }
   }
 
   .search-navbar {
@@ -445,11 +397,14 @@ export default class NavbarMenu extends mixins(PrefixMixin) {
     width: min-content;
     min-width: 140px;
     margin: 0 1rem;
+    .icon {
+      color: $placeholder-color !important;
+    }
     input {
       border: inherit;
-      background-color: rgba(41, 41, 47, 0.5);
+      background-color: #e5e5e5;
       &::placeholder {
-        color: #898991 !important;
+        color: $placeholder-color !important;
       }
       &:focus {
         box-shadow: none !important;
@@ -463,13 +418,13 @@ export default class NavbarMenu extends mixins(PrefixMixin) {
     width: 100%;
 
     input {
-      background-color: rgba(41, 41, 47);
+      background-color: $search-navbar-background-color;
       padding: 0;
       z-index: 1;
       &:focus {
         box-shadow: none !important;
         border-top: 2px solid $primary;
-        background: rgba(41, 41, 47);
+        background: $search-navbar-background-color;
       }
     }
   }

components/base/CarouselCardList.vue

@@ -9,8 +9,8 @@
     :breakpoints="options.breakpoints"
     class="carousel-card-list">
     <template #item="list">
-      <div class="card mx-4">
-        <div class="card-image">
+      <div class="card mx-2">
+        <div class="card-image p-4">
           <nuxt-link :to="urlOf(list.id)">
             <PreviewMediaResolver
               v-if="list.animationUrl"
@@ -24,19 +24,19 @@
               custom-class="carousel__image-wrapper" />
           </nuxt-link>
         </div>
-        <div class="card-content">
+        <div class="card-content px-4">
           <div class="media">
             <div class="media-content">
-              <div class="title is-5 is-ellipsis">
+              <div class="title is-5 is-ellipsis has-text-weight-bold">
                 <nuxt-link :to="urlOf(list.id)">
                   {{ list.name }}
                 </nuxt-link>
               </div>
-              <b-field grouped>
-                <p class="control ml-auto" v-if="list.price">
-                  <Money :value="list.price" inline />
-                </p>
-              </b-field>
+              <div class="subtitle is-6 is-ellipsis" v-if="list.collection">
+                <nuxt-link :to="`/rmrk/collection/${list.collection.id}`">
+                  {{ list.collection.name }}
+                </nuxt-link>
+              </div>
               <nuxt-link
                 :to="{ name: profileUrl, params: { id: list.issuer } }">
                 <div class="is-size-7 icon-text">
@@ -63,13 +63,18 @@
                     class="force-clip is-ellipsis" />
                 </div>
               </nuxt-link>
-              <time class="is-size-7 icon-text" v-if="list.timestamp">
-                <b-icon icon="clock" />
-                <span>{{ list.timestamp }}</span>
-              </time>
             </div>
           </div>
         </div>
+        <div class="card-footer is-flex p-2">
+          <time class="is-size-7 icon-text" v-if="list.timestamp">
+            <b-icon icon="clock" />
+            <span>{{ list.timestamp }}</span>
+          </time>
+          <p class="control ml-auto" v-if="list.price">
+            <Money :value="list.price" inline />
+          </p>
+        </div>
       </div>
     </template>
   </b-carousel-list>
@@ -83,7 +88,6 @@ import type { CarouselNFT } from './types'
 import PrefixMixin from '~/utils/mixins/prefixMixin'
 
 const components = {
-  // Identicon,
   Loader: () => import('@/components/shared/Loader.vue'),
   Money: () => import('@/components/shared/format/Money.vue'),
   Identity: () => import('@/components/shared/format/Identity.vue'),
@@ -120,22 +124,19 @@ export default class CarouselList extends mixins(AuthMixin, PrefixMixin) {
           itemsToShow: 1,
         },
         600: {
-          itemsToShow: 2,
+          itemsToShow: 1.5,
         },
         800: {
-          itemsToShow: 2.5,
+          itemsToShow: 2,
         },
         900: {
-          itemsToShow: 3,
+          itemsToShow: 2.5,
         },
         1000: {
-          itemsToShow: 3.5,
-        },
-        1200: {
-          itemsToShow: 4,
+          itemsToShow: 3,
         },
         1400: {
-          itemsToShow: 4.5,
+          itemsToShow: 3.5,
         },
         1800: {
           itemsToShow: 5,
@@ -161,36 +162,21 @@ export default class CarouselList extends mixins(AuthMixin, PrefixMixin) {
 }
 
 .card {
+  background-color: #0e0e10;
   .media-content {
     width: 100%;
   }
-}
-
-/* move to global */
-.is-ellipsis {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.force-clip {
-  max-width: 85%;
-  max-height: 24px;
-}
-
-.card-image {
-  overflow: hidden;
-}
-</style>
-
-<style lang="scss">
-.card {
-  &:hover .carousel__image-wrapper img {
-    transform: scale(1.1);
-    transition: transform 0.3s linear;
+  .card-image {
+    overflow: hidden;
+    figure {
+      transition: transform 0.2s;
+    }
+    figure:hover {
+      transform: scale(1.1);
+    }
   }
-  .carousel__image-wrapper img {
-    transition: all 0.3s;
+  .card-footer {
+    border-top-color: hsla(0, 0%, 60%, 1);
   }
 }
 </style>

components/bsx/Gallery/Item/ActionList.vue

@@ -3,7 +3,7 @@
     <b-tooltip
       v-for="action in actions"
       :key="action"
-      class="w-100"
+      append-to-body
       :active="disableButton(action)"
       position="is-left"
       :label="disabledToolTips[action]">

components/bsx/Offer/OffersUserTable.vue

@@ -14,7 +14,7 @@
       @input="updateList"
       :label="$t('offer.burnedToggle')"
       size="is-medium"
-      labelColor="is-success" />
+      labelColor="has-text-success" />
     <b-table :data="displayOffers(offers)">
       <b-table-column
         cell-class="is-vcentered is-narrow"

components/bsx/Offer/StatsOverview.vue

@@ -23,7 +23,7 @@
             {{ `${data.totalCount} /` }}
             <Money :value="data.totalPrice" inline />
           </p>
-          <p class="heading text-bold mb-5">
+          <p class="heading has-text-weight-bold mb-5">
             {{
               `${data.status} ${$t('statsOverview.offers')} / ${$t(
                 'statsOverview.values'