Merge branch 'main' into action

Author: Jarsen136

libs/ui/src/scss/tailwind.scss renamed to assets/css/tailwind.css

@@ -1,6 +1,43 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@config "../../tailwind.config.ts";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+@utility text-shadow-border {
+  text-shadow:
+    1px 1px 0 rgb(var(--text-color)),
+    1px -1px 0 rgb(var(--text-color)),
+    -1px 1px 0 rgb(var(--text-color)),
+    -1px -1px 0 rgb(var(--text-color)),
+    1px 0px 0 rgb(var(--text-color)),
+    0px 1px 0 rgb(var(--text-color)),
+    -1px 0px 0 rgb(var(--text-color)),
+    0px -1px 0 rgb(var(--text-color)),
+    4px 4px rgb(var(--text-color));
+}
+
+@utility container-fluid {
+  @apply grow relative w-full max-w-none mx-auto my-0 md:px-10 px-5;
+}
 
 @layer base {
   :root {
@@ -10,10 +47,11 @@
     --steps-active-color: 97 136 231;
   }
 
-  // global variables
   :root {
-    --navbar-desktop: 80px; // $navbar-desktop-min-height
-    --navbar-mobile: 64px; // $navbar-mobile-min-height
+    /* $navbar-desktop-min-height */
+    --navbar-desktop: 80px;
+    /* $navbar-mobile-min-height */
+    --navbar-mobile: 64px;
   }
 
   :root,
@@ -70,7 +108,6 @@
     --green-border-color: #04af00;
     --blue-accent-bg-color: #b6cbff;
     --blue-light-hover-color: #e8edfb;
-    --blue-light-cards: #e9eefc;
     --card-hover-opacity: 0.85;
     --separator-line-color: #cccccc;
     --toggle-primary: #ff7ac3;
@@ -140,21 +177,3 @@
     border: 0 solid currentColor;
   }
 }
-
-@layer utilities {
-  .text-shadow-border {
-    text-shadow: 1px 1px 0 rgb(var(--text-color)),
-                1px -1px 0 rgb(var(--text-color)),
-                -1px 1px 0 rgb(var(--text-color)),
-                -1px -1px 0 rgb(var(--text-color)),
-                1px 0px 0 rgb(var(--text-color)),
-                0px 1px 0 rgb(var(--text-color)),
-                -1px 0px 0 rgb(var(--text-color)),
-                0px -1px 0 rgb(var(--text-color)),
-                4px 4px rgb(var(--text-color));
-  }
-
-  .container-fluid {
-    @apply grow relative w-full max-w-none mx-auto my-0 md:px-10 px-5;
-  }
-}

assets/styles/components/_connect-wallet.scss

@@ -22,12 +22,18 @@
     position: fixed;
     top: 0;
     right: 0;
-    @apply h-[calc(100%-theme(spacing.navbar-desktop))] mt-[theme(spacing.navbar-desktop)];
+    height: calc(100% - var(--navbar-desktop));
+    margin-top: var(--navbar-desktop);
     max-width: 360px;
     width: 100%;
 
-    @apply bulma-mobile:inset-0 bulma-mobile:border-l-0 bulma-mobile:max-w-full 
-           bulma-mobile:h-[calc(100%-theme(spacing.navbar-mobile))] bulma-mobile:mt-[theme(spacing.navbar-mobile)];
+    @media screen and (max-width: 768px) {
+      inset: 0;
+      border-left: none;
+      max-width: 100%;
+      height: calc(100% - var(--navbar-mobile));
+      margin-top: var(--navbar-mobile);
+    }
 
     background: var(--background-color);
     border-left: 1px solid var(--border-color);
@@ -38,7 +44,7 @@
       background-color: var(--background-color);
 
       hr {
-        @apply bg-k-shade2 #{!important};
+        background-color: var(--k-shade2) !important;
       }  
     }
 
@@ -55,7 +61,11 @@
     .wallet-menu-item {
       width: 100%;
       .button {
-        @apply w-full text-xl rounded-none border-none transition-none;
+        width: 100%;
+        font-size: 1.25rem;
+        border-radius: 0;
+        border: none;
+        transition: none;
         background: unset;
         box-shadow: none !important;
         > span {

assets/styles/components/_nft-card.scss

@@ -1,5 +1,8 @@
 .nft-card {
-  @apply relative h-full bg-background-color border border-card-border-color;
+  position: relative;
+  height: 100%;
+  background-color: var(--background-color);
+  border: 1px solid var(--card-border-color);
 
   .border-stacked {
     border-color: var(--card-border-color-light) !important;
@@ -30,7 +33,7 @@
     .show-on-hover,
     .show-always {
       display: flex !important;
-      @apply z-10;
+      z-index: 10;
     }
   }
 
@@ -56,7 +59,10 @@
 }
 
 .card-icon {
-  @apply absolute z-[1] right-4 top-4;
+  position: absolute;
+  z-index: 1;
+  right: 1rem;
+  top: 1rem;
 }
 
 .nft-media {

assets/styles/global.scss

@@ -26,10 +26,13 @@ main {
 }
 
 body {
-  @apply text-text-color;
+  color: rgb(var(--text-color));
 
   a {
-    @apply text-text-color hover:text-link-hover;
+    color: rgb(var(--text-color));
+    &:hover {
+      color: var(--link-hover);
+    }
   }
 
   strong,
@@ -94,7 +97,9 @@ body {
 
 /* move to global */
 .is-ellipsis {
-  @apply overflow-hidden whitespace-nowrap text-ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .collapseHidden {
@@ -133,16 +138,20 @@ hr {
 }
 
 .snackbar {
-  @apply text-text-color bg-background-color border border-border-color shadow-primary;
+  color: rgb(var(--text-color));
+  background-color: var(--background-color);
+  border: 1px solid var(--border-color);
+  box-shadow: var(--primary-shadow);
 
   .button {
-    @apply bg-k-accent-light-2 text-text-color;
+    background-color: var(--k-accent-light-2);
+    color: rgb(var(--text-color));
   }
 }
 
 // global table css
 table th {
-  @apply text-text-color #{!important};
+  color: rgb(var(--text-color)) !important;
 }
 
 .fluid-padding-left {
@@ -167,11 +176,12 @@ table th {
 
 // Transak
 .transak_modal-overlay {
-  @apply z-[999] #{!important};
+  z-index: 999 !important;
 }
 
 .transak_modal {
-  @apply z-[1000] max-h-[600px] #{!important};
+  z-index: 1000 !important;
+  max-height: 600px !important;
 }
 
 #transakOnOffRampWidget {

components/ColorModeSwitch.vue

@@ -10,7 +10,7 @@
     <NeoDropdown
       v-else
       v-model="preference"
-      position="top-left"
+      position="top-right"
       :close-on-click="true"
       aria-role="list"
       @change="onChange"

components/CookieBanner.vue

@@ -20,7 +20,9 @@
 useCookies()
 </script>
 
-<style lang="scss">
+<style>
+@reference '@/assets/css/tailwind.css';
+
 /* Custom Cookie #Bar */
 .cookieControl__Bar {
   font-family: 'Work Sans', sans-serif;
@@ -52,7 +54,7 @@ button.cookieControl__ModalClose {
   @apply invisible absolute top-3 right-0 h-0 w-0;
 }
 button.cookieControl__ModalClose:after {
-  @apply absolute top-1 right-5 text-xs text-text-color font-medium bg-background-color hover:bg-gray-100 hover:text-gray-800 rounded-lg px-4 py-2.5 duration-300 transition-colors focus:outline-none visible;
+  @apply absolute top-1 right-5 text-xs text-text-color font-medium bg-background-color hover:bg-gray-100 hover:text-gray-800 rounded-lg px-4 py-2.5 duration-300 transition-colors focus:outline-hidden visible;
   content: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-x-lg%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20d%3D%22M2.146%202.854a.5.5%200%201%201%20.708-.708L8%207.293l5.146-5.147a.5.5%200%200%201%20.708.708L8.707%208l5.147%205.146a.5.5%200%200%201-.708.708L8%208.707l-5.146%205.147a.5.5%200%200%201-.708-.708L7.293%208z%22%2F%3E%0A%3C%2Fsvg%3E');
 }
 .cookieControl__ModalButtons {

components/ExploreLayoutWithSidebar.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="container-fluid"
-    :class="{ '!pl-0': isSidebarOpen }"
+    :class="{ 'pl-0!': isSidebarOpen }"
   >
     <slot />
   </div>

components/Navbar.vue

@@ -8,8 +8,8 @@
     }"
   >
     <div
-      class="grow relative mx-auto my-0 max-lg:!px-0 items-stretch block md:flex min-h-[3.25rem] w-full"
-      :class="{ 'w-full max-w-none md:!px-10 !px-5': !isTouch }"
+      class="grow relative mx-auto my-0 max-lg:px-0! items-stretch md:flex min-h-[3.25rem] w-full"
+      :class="{ 'w-full max-w-none md:px-10! px-5!': !isTouch }"
     >
       <!-- BRAND -->
       <div class="navbar-brand md:ml-[-0.75rem]">
@@ -24,7 +24,7 @@
           >
         </nuxt-link>
         <div
-          class="lg:!hidden flex flex-grow items-center justify-end"
+          class="lg:hidden! flex grow items-center justify-end"
           @click="closeBurgerMenu"
         >
           <NeoButton
@@ -44,11 +44,11 @@
               <Search
                 ref="mobilSearchRef"
                 hide-filter
-                class="flex-grow"
+                class="grow"
               />
               <NeoButton
                 variant="text"
-                class="p-3 !shadow-none border-0 capitalize sm:hidden"
+                class="p-3 shadow-none! border-0 capitalize sm:hidden"
                 @click="hideMobileSearchBar"
               >
                 {{ $t('cancel') }}
@@ -86,9 +86,9 @@
           <div class="navbar-item is-expanded flex justify-center">
             <Search
               v-if="!isTouch"
-              class="search-navbar flex-grow pb-0 max-lg:!hidden"
+              class="search-navbar grow pb-0 max-lg:hidden!"
               hide-filter
-              search-column-class="flex-grow"
+              search-column-class="grow"
             />
           </div>
         </div>
@@ -116,7 +116,7 @@
           <MobileExpandableSection
             v-if="isExplorerVisible"
             v-slot="{ onCloseMobileSubMenu }"
-            class="lg:!hidden"
+            class="lg:hidden!"
             :title="$t('explore')"
           >
             <NavbarExploreOptions
@@ -130,7 +130,7 @@
           </MobileExpandableSection>
           <NavbarExploreDropdown
             v-if="isExplorerVisible"
-            class="navbar-explore custom-navbar-item max-lg:!hidden"
+            class="navbar-explore custom-navbar-item max-lg:hidden!"
             data-testid="explore"
           />
 
@@ -153,7 +153,7 @@
 
           <MobileExpandableSection
             v-slot="{ onCloseMobileSubMenu }"
-            class="lg:!hidden"
+            class="lg:hidden!"
             no-padding
             :title="$t('chainSelect', [chainName])"
           >
@@ -168,7 +168,7 @@
           </MobileExpandableSection>
           <ChainSelectDropdown
             id="NavChainSelect"
-            class="navbar-chain custom-navbar-item max-lg:!hidden"
+            class="navbar-chain custom-navbar-item max-lg:hidden!"
             data-testid="chain-select"
           />
 
@@ -178,7 +178,7 @@
             @close-burger-menu="showMobileNavbar"
           />
 
-          <div class="lg:!hidden">
+          <div class="lg:hidden!">
             <template v-if="!account">
               <ColorModeButton class="navbar-item" />
               <NavbarCookiesButton @select="showMobileNavbar" />
@@ -217,7 +217,7 @@
 
           <NavbarProfileDropdown
             id="NavProfile"
-            class="max-lg:!hidden"
+            class="max-lg:hidden!"
             :chain="urlPrefix"
             data-testid="navbar-profile-dropdown"
             @close-burger-menu="closeBurgerMenu"

components/TheFooter.vue

@@ -3,7 +3,7 @@
     class="footer-container px-6 py-12"
     data-testid="footer-container"
   >
-    <div class="footer-container-inner flex items-start justify-between">
+    <div class="footer-container-inner flex md:justify-between">
       <section class="footer-container-subs flex flex-col">
         <h2 class="subtitle is-5">
           {{ $t('footer.subscribe') }}