feat: update shadows (#526)

components/AppNavbar.vue

@@ -102,7 +102,7 @@ const handleNavigateMyUpDashboard = () => {
       <!-- Settings -->
       <div
         v-if="!isConnected"
-        class="ml-4 h-6 w-[1px] border-l border-purple-82 pl-4"
+        class="ml-4 h-6 w-px border-l border-purple-82 pl-4"
       >
         <lukso-icon
           name="settings"

components/AppNavbarLanding.vue

@@ -107,10 +107,7 @@ const handleNavigateMyUpDashboard = () => {
       </lukso-button>
 
       <!-- Settings -->
-      <div
-        v-if="!isConnected"
-        class="h-6 w-[1px] border-l border-purple-82 pl-4"
-      >
+      <div v-if="!isConnected" class="h-6 w-px border-l border-purple-82 pl-4">
         <lukso-icon
           name="settings"
           color="purple-41"

components/AppNavbarMobileSearch.vue

@@ -9,7 +9,7 @@ const handleClose = () => {
 <template>
   <div
     @click="handleClose"
-    class="fixed left-0 top-0 z-[1000] h-[100vh] w-[100vw] animate-fade-in bg-[rgba(196,202,206,0.6)] backdrop-blur-sm animation-duration-200"
+    class="fixed left-0 top-0 z-[1000] h-screen w-screen animate-fade-in bg-[rgba(196,202,206,0.6)] backdrop-blur-sm animation-duration-200"
   ></div>
   <div
     id="mobile-search"

components/AssetAssets3D.vue

@@ -19,7 +19,7 @@ const handleClick = () => {
 
 <template>
   <div
-    class="paragraph-inter-10-bold-uppercase flex size-14 cursor-pointer flex-col items-center justify-center rounded-8 border border-neutral-90 bg-neutral-100 bg-cover transition hover:scale-[1.02] hover:shadow-neutral-drop-shadow"
+    class="paragraph-inter-10-bold-uppercase flex size-14 cursor-pointer flex-col items-center justify-center rounded-8 border border-neutral-90 bg-neutral-100 bg-cover transition hover:scale-[1.02] hover:border-transparent hover:shadow-neutral-shadow-round"
     @click="handleClick"
   >
     <lukso-icon name="cube-outline" class="mb-1"></lukso-icon>

components/AssetAssetsAudio.vue

@@ -19,7 +19,7 @@ const handleClick = () => {
 
 <template>
   <div
-    class="paragraph-inter-10-bold-uppercase flex size-14 cursor-pointer flex-col items-center justify-center rounded-8 border border-neutral-90 bg-neutral-100 bg-cover transition hover:scale-[1.02] hover:shadow-neutral-drop-shadow"
+    class="paragraph-inter-10-bold-uppercase flex size-14 cursor-pointer flex-col items-center justify-center rounded-8 border border-neutral-90 bg-neutral-100 bg-cover transition hover:scale-[1.02] hover:border-transparent hover:shadow-neutral-shadow-round"
     @click="handleClick"
   >
     <lukso-icon name="headset-outline" class="mb-1"></lukso-icon>

components/AssetAssetsContract.vue

@@ -12,7 +12,7 @@ const handleClick = () => {
 
 <template>
   <div
-    class="paragraph-inter-10-bold-uppercase flex size-14 cursor-pointer flex-col items-center justify-center rounded-8 border border-neutral-90 bg-neutral-100 bg-cover transition hover:scale-[1.02] hover:shadow-neutral-drop-shadow"
+    class="paragraph-inter-10-bold-uppercase flex size-14 cursor-pointer flex-col items-center justify-center rounded-8 border border-neutral-90 bg-neutral-100 bg-cover transition hover:scale-[1.02] hover:border-transparent hover:shadow-neutral-shadow-round"
     @click="handleClick"
   >
     <lukso-icon name="smart-contract-doc" class="mb-1"></lukso-icon>

components/AssetAssetsDocument.vue

@@ -19,7 +19,7 @@ const handleClick = () => {
 
 <template>
   <div
-    class="paragraph-inter-10-bold-uppercase flex size-14 cursor-pointer flex-col items-center justify-center rounded-8 border border-neutral-90 bg-neutral-100 bg-cover transition hover:scale-[1.02] hover:shadow-neutral-drop-shadow"
+    class="paragraph-inter-10-bold-uppercase flex size-14 cursor-pointer flex-col items-center justify-center rounded-8 border border-neutral-90 bg-neutral-100 bg-cover transition hover:scale-[1.02] hover:border-transparent hover:shadow-neutral-shadow-round"
     @click="handleClick"
   >
     <lukso-icon name="document-outline" class="mb-1"></lukso-icon>

components/AssetAssetsImage.vue

@@ -24,7 +24,7 @@ const handleClick = () => {
 
 <template>
   <div
-    class="paragraph-inter-10-bold-uppercase flex size-14 cursor-pointer flex-col items-center justify-center rounded-8 border border-neutral-90 bg-neutral-100 bg-cover transition hover:scale-[1.02] hover:shadow-neutral-drop-shadow"
+    class="paragraph-inter-10-bold-uppercase flex size-14 cursor-pointer flex-col items-center justify-center rounded-8 border border-neutral-90 bg-neutral-100 bg-cover transition hover:scale-[1.02] hover:border-transparent hover:shadow-neutral-shadow-round"
     @click="handleClick"
   >
     <lukso-icon name="camera" class="mb-1"></lukso-icon>

components/AssetAssetsOther.vue

@@ -19,7 +19,7 @@ const handleClick = () => {
 
 <template>
   <div
-    class="paragraph-inter-10-bold-uppercase flex size-14 cursor-pointer flex-col items-center justify-center rounded-8 border border-neutral-90 bg-neutral-100 bg-cover transition hover:scale-[1.02] hover:shadow-neutral-drop-shadow"
+    class="paragraph-inter-10-bold-uppercase flex size-14 cursor-pointer flex-col items-center justify-center rounded-8 border border-neutral-90 bg-neutral-100 bg-cover transition hover:scale-[1.02] hover:border-transparent hover:shadow-neutral-shadow-round"
     @click="handleClick"
   >
     <lukso-icon name="document-outline" class="mb-1"></lukso-icon>

components/AssetAssetsVideo.vue

@@ -19,7 +19,7 @@ const handleClick = () => {
 
 <template>
   <div
-    class="paragraph-inter-10-bold-uppercase flex size-14 cursor-pointer flex-col items-center justify-center rounded-8 border border-neutral-90 bg-neutral-100 bg-cover transition hover:scale-[1.02] hover:shadow-neutral-drop-shadow"
+    class="paragraph-inter-10-bold-uppercase flex size-14 cursor-pointer flex-col items-center justify-center rounded-8 border border-neutral-90 bg-neutral-100 bg-cover transition hover:scale-[1.02] hover:border-transparent hover:shadow-neutral-shadow-round"
     @click="handleClick"
   >
     <lukso-icon name="video-outline" class="mb-1"></lukso-icon>

components/AssetImagesList.vue

@@ -34,7 +34,7 @@ const handlePreviewImage = (image: Image[]) => {
         <div
           v-for="(image, index) in optimizedImages"
           :key="index"
-          class="rounded-8 bg-neutral-90 transition hover:scale-[1.02] hover:shadow-neutral-drop-shadow"
+          class="rounded-8 bg-neutral-90 transition hover:scale-[1.02] hover:shadow-neutral-shadow-round"
         >
           <AssetImage
             class="max-h-14 min-h-14 w-14 cursor-pointer rounded-8"

components/CreationsCarousel.vue

@@ -57,9 +57,9 @@ const styleVariants = tv({
     rightShadow:
       'absolute bottom-[30px] right-[60px] h-[305px] w-[272px] rotate-90 rounded-[305px] bg-neutral-20 opacity-20 blur-[34px]',
     leftNavigation:
-      'absolute left-[20px] top-[calc(50%-45px)] z-10 cursor-pointer select-none rounded-8 border border-neutral-90 bg-neutral-100 p-2 transition hover:scale-[1.05] hover:border-neutral-80 active:scale-[0.99] lg:left-[-20px]',
+      'absolute left-[20px] top-[calc(50%-45px)] z-10 cursor-pointer select-none rounded-8 border border-neutral-90 bg-neutral-100 p-2 transition hover:scale-105 hover:border-neutral-80 active:scale-[0.99] lg:left-[-20px]',
     rightNavigation:
-      'absolute right-[20px] top-[calc(50%-45px)] z-10 cursor-pointer select-none rounded-8 border border-neutral-90 bg-neutral-100 p-2 transition hover:scale-[1.05] hover:border-neutral-80 active:scale-[0.99] lg:right-[-20px]',
+      'absolute right-[20px] top-[calc(50%-45px)] z-10 cursor-pointer select-none rounded-8 border border-neutral-90 bg-neutral-100 p-2 transition hover:scale-105 hover:border-neutral-80 active:scale-[0.99] lg:right-[-20px]',
   },
   variants: {
     isSingleSlide: {

components/DappShowcase.vue

@@ -86,12 +86,12 @@ const handleCardClick = (url: string) => {
     <lukso-icon
       name="arrow-left-lg"
       id="prev"
-      class="absolute left-[20px] top-[calc(50%-45px)] z-10 cursor-pointer select-none rounded-8 border border-neutral-90 bg-neutral-100 p-2 transition hover:scale-[1.05] hover:border-neutral-80 active:scale-[0.99] xl:left-[-60px]"
+      class="absolute left-[20px] top-[calc(50%-45px)] z-10 cursor-pointer select-none rounded-8 border border-neutral-90 bg-neutral-100 p-2 transition hover:scale-105 hover:border-neutral-80 active:scale-[0.99] xl:left-[-60px]"
     ></lukso-icon>
     <lukso-icon
       name="arrow-right-lg"
       id="next"
-      class="absolute right-[20px] top-[calc(50%-45px)] z-10 cursor-pointer select-none rounded-8 border border-neutral-90 bg-neutral-100 p-2 transition hover:scale-[1.05] hover:border-neutral-80 active:scale-[0.99] xl:right-[-60px]"
+      class="absolute right-[20px] top-[calc(50%-45px)] z-10 cursor-pointer select-none rounded-8 border border-neutral-90 bg-neutral-100 p-2 transition hover:scale-105 hover:border-neutral-80 active:scale-[0.99] xl:right-[-60px]"
     ></lukso-icon>
   </div>
 </template>

components/ModalTemplateTokenCollection.vue

@@ -77,15 +77,15 @@ const handleViewEntireCollection = () => {
       </lukso-button>
     </div>
     <div
-      class="-mx-4 grid max-h-[calc(100vh-300px)] grid-cols-1 gap-6 overflow-y-auto px-4 pb-6 sm:grid-cols-2 md:grid-cols-3"
+      class="-mx-4 -mt-4 grid max-h-[calc(100vh-300px)] grid-cols-1 gap-6 overflow-y-auto px-4 pb-6 pt-4 sm:grid-cols-2 md:grid-cols-3"
     >
       <NftListCard
         v-for="(token, index) in tokenIdsData"
         :key="index"
         :asset="token"
       />
       <div
-        class="paragraph-inter-16-semi-bold flex min-h-[400px] cursor-pointer items-center justify-center rounded-12 border border-neutral-90 bg-neutral-100 p-6 transition hover:shadow-neutral-drop-shadow-1xl"
+        class="paragraph-inter-16-semi-bold flex min-h-[400px] cursor-pointer items-center justify-center rounded-12 border border-neutral-90 bg-neutral-100 p-6 transition hover:border-transparent hover:shadow-neutral-shadow-round-1xl"
         @click="handleViewEntireCollection"
       >
         <lukso-icon size="medium" name="eye-show" class="mr-2"></lukso-icon>

components/ProfileTabsItem.vue

@@ -13,7 +13,7 @@ const styleVariants = tv({
   slots: {
     tab: 'heading-inter-17-semi-bold flex items-center',
     counter:
-      'paragraph-inter-10-semi-bold ml-2 rounded-4 border border-neutral-20 px-1 py-[1px]',
+      'paragraph-inter-10-semi-bold ml-2 rounded-4 border border-neutral-20 px-1 py-px',
   },
   variants: {
     isActive: {

components/ProfileView.vue

@@ -177,7 +177,7 @@ watch(
       >
         {{ $formatMessage('asset_creations') }}
         <span
-          class="paragraph-inter-10-semi-bold ml-2 rounded-4 border border-neutral-20 bg-neutral-20 px-1 py-[1px] text-neutral-100"
+          class="paragraph-inter-10-semi-bold ml-2 rounded-4 border border-neutral-20 bg-neutral-20 px-1 py-px text-neutral-100"
           >{{ createdCollectiblesCount }}</span
         >
       </div>

components/__tests__/__snapshots__/ProfileTabs.spec.ts.snap

@@ -7,7 +7,7 @@ exports[`ProfileTabs > renders active state 1`] = `
       <li class="heading-inter-17-semi-bold flex items-center cursor-pointer opacity-50 transition hover:opacity-100">Tokens
         <!--v-if-->
       </li>
-      <li class="heading-inter-17-semi-bold flex items-center cursor-default">Collectibles <span class="paragraph-inter-10-semi-bold ml-2 rounded-4 border border-neutral-20 px-1 py-[1px] bg-neutral-20 text-neutral-100">2</span></li>
+      <li class="heading-inter-17-semi-bold flex items-center cursor-default">Collectibles <span class="paragraph-inter-10-semi-bold ml-2 rounded-4 border border-neutral-20 px-1 py-px bg-neutral-20 text-neutral-100">2</span></li>
     </ul>
   </div>
 </div>"
@@ -20,7 +20,7 @@ exports[`ProfileTabs > renders default state 1`] = `
       <li class="heading-inter-17-semi-bold flex items-center cursor-pointer opacity-50 transition hover:opacity-100">Tokens
         <!--v-if-->
       </li>
-      <li class="heading-inter-17-semi-bold flex items-center cursor-pointer opacity-50 transition hover:opacity-100">Collectibles <span class="paragraph-inter-10-semi-bold ml-2 rounded-4 border border-neutral-20 px-1 py-[1px] bg-transparent text-neutral-20">2</span></li>
+      <li class="heading-inter-17-semi-bold flex items-center cursor-pointer opacity-50 transition hover:opacity-100">Collectibles <span class="paragraph-inter-10-semi-bold ml-2 rounded-4 border border-neutral-20 px-1 py-px bg-transparent text-neutral-20">2</span></li>
     </ul>
   </div>
 </div>"

components/__tests__/__snapshots__/ProfileTabsItem.spec.ts.snap

@@ -10,7 +10,7 @@ exports[`ProfileTabsItem > renders active state 1`] = `
 
 exports[`ProfileTabsItem > renders count 1`] = `
 "<div id="test-wrapper">
-  <li class="heading-inter-17-semi-bold flex items-center cursor-pointer opacity-50 transition hover:opacity-100">Test Label <span class="paragraph-inter-10-semi-bold ml-2 rounded-4 border border-neutral-20 px-1 py-[1px] bg-transparent text-neutral-20">2</span></li>
+  <li class="heading-inter-17-semi-bold flex items-center cursor-pointer opacity-50 transition hover:opacity-100">Test Label <span class="paragraph-inter-10-semi-bold ml-2 rounded-4 border border-neutral-20 px-1 py-px bg-transparent text-neutral-20">2</span></li>
 </div>"
 `;
 

domains/graph/components/NftListCardGraph.vue

@@ -156,7 +156,7 @@ onMounted(() => {
               {{ $formatNumber(getBalance(asset)) }}
             </span>
           </div>
-          <AppPlaceholderLine v-else class="my-[1px] h-[12px] w-1/4" />
+          <AppPlaceholderLine v-else class="my-px h-[12px] w-1/4" />
           <NftListCardCreatorsGraph :asset="asset" class="mt-4" />
 
           <!-- Buttons -->

domains/grid/components/AddWidgetSelection.vue

@@ -57,7 +57,7 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
           :text="formatMessage('widget_type_iframe')"
         >
           <div
-            class="flex size-10 cursor-pointer items-center justify-center rounded-full bg-neutral-20 transition hover:scale-[1.05]"
+            class="flex size-10 cursor-pointer items-center justify-center rounded-full bg-neutral-20 transition hover:scale-105"
             @click="handleSelectWidget('IFRAME')"
           >
             <lukso-icon
@@ -85,7 +85,7 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
           :text="formatMessage('widget_type_image')"
         >
           <div
-            class="flex size-10 cursor-pointer items-center justify-center rounded-full bg-neutral-20 transition hover:scale-[1.05]"
+            class="flex size-10 cursor-pointer items-center justify-center rounded-full bg-neutral-20 transition hover:scale-105"
             @click="handleSelectWidget('IMAGE')"
           >
             <lukso-icon
@@ -103,7 +103,7 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
           :text="formatMessage('widget_type_text')"
         >
           <div
-            class="flex size-10 cursor-pointer items-center justify-center rounded-full bg-neutral-20 transition hover:scale-[1.05]"
+            class="flex size-10 cursor-pointer items-center justify-center rounded-full bg-neutral-20 transition hover:scale-105"
             @click="handleSelectWidget('TEXT')"
           >
             <lukso-icon
@@ -133,7 +133,7 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
           <img
             src="/images/social-media-youtube.svg"
             alt="Youtube"
-            class="size-10 cursor-pointer transition hover:scale-[1.05]"
+            class="size-10 cursor-pointer transition hover:scale-105"
             @click="handleSelectWidget('YOUTUBE')"
           />
         </lukso-tooltip>
@@ -157,7 +157,7 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
           <img
             src="/images/social-media-spotify.svg"
             alt="Spotify"
-            class="size-10 cursor-pointer transition hover:scale-[1.05]"
+            class="size-10 cursor-pointer transition hover:scale-105"
             @click="handleSelectWidget('SPOTIFY')"
           />
         </lukso-tooltip>
@@ -171,7 +171,7 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
           <img
             src="/images/social-media-soundcloud.svg"
             alt="Sound Cloud"
-            class="cursor-pointer transition hover:scale-[1.05]"
+            class="cursor-pointer transition hover:scale-105"
             @click="handleSelectWidget('SOUNDCLOUD')"
           />
         </lukso-tooltip>
@@ -195,7 +195,7 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
           <img
             src="/images/social-media-x.svg"
             alt="X"
-            class="cursor-pointer transition hover:scale-[1.05]"
+            class="cursor-pointer transition hover:scale-105"
             @click="handleSelectWidget('X')"
           />
         </lukso-tooltip>
@@ -209,7 +209,7 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
           <img
             src="/images/social-media-warpcast.png"
             alt="Warpcast"
-            class="size-10 cursor-pointer rounded-full transition hover:scale-[1.05]"
+            class="size-10 cursor-pointer rounded-full transition hover:scale-105"
             @click="handleSelectWidget('WARPCAST')"
           />
         </lukso-tooltip>
@@ -223,7 +223,7 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
           <img
             src="/images/social-media-instagram.svg"
             alt="Warpcast"
-            class="size-10 cursor-pointer rounded-full transition hover:scale-[1.05]"
+            class="size-10 cursor-pointer rounded-full transition hover:scale-105"
             @click="handleSelectWidget('INSTAGRAM')"
           />
         </lukso-tooltip>

domains/grid/components/GridFloatingMenu.vue

@@ -133,7 +133,7 @@ onUnmounted(() => {
 <template>
   <div
     v-if="isConnected && isViewingOwnProfile"
-    class="fixed z-50 flex animate-fade-in gap-6 overflow-hidden rounded-full bg-neutral-100 p-3 shadow-neutral-drop-shadow duration-300 ease-in-out sm:bottom-10 sm:right-10 sm:flex-col sm:transition lg:right-[calc(50%-540px)]"
+    class="fixed z-50 flex animate-fade-in gap-6 overflow-hidden rounded-full bg-neutral-100 p-3 shadow-neutral-shadow-round duration-300 ease-in-out sm:bottom-10 sm:right-10 sm:flex-col sm:transition lg:right-[calc(50%-540px)]"
     :class="{
       'right-[calc(50%-160px)] h-[64px] w-[320px] sm:h-[320px] sm:w-[64px]':
         isEditingGrid,

domains/grid/components/GridWidget.vue

@@ -198,7 +198,7 @@ onMounted(() => {
     ref="target"
     class="group relative flex h-full flex-col rounded-12 transition"
     :class="{
-      'bg-neutral-100 shadow-neutral-drop-shadow hover:shadow-neutral-drop-shadow-1xl':
+      'bg-neutral-100 shadow-neutral-shadow-round hover:shadow-neutral-shadow-round-1xl':
         !isAddContentWidget,
       'select-none': isAllowToEdit,
       'z-50': isOpen,
@@ -219,7 +219,7 @@ onMounted(() => {
       }"
     >
       <div
-        class="mb-1 flex size-[35px] items-center justify-center rounded-full border border-neutral-90 bg-neutral-100 shadow-neutral-drop-shadow-1xl transition hover:scale-[1.05]"
+        class="mb-1 flex size-[35px] items-center justify-center rounded-full border border-neutral-90 bg-neutral-100 shadow-neutral-shadow-round-1xl transition hover:scale-105"
       >
         <lukso-icon
           :id="dropdownId"
@@ -300,7 +300,7 @@ onMounted(() => {
     <!-- Resize handle -->
     <div
       v-if="isAllowToEdit && !isMobile"
-      class="grid-widget-resize absolute bottom-2 right-2 z-10 mb-1 flex size-[35px] cursor-pointer items-center justify-center rounded-full border border-neutral-90 bg-neutral-100 opacity-0 shadow-neutral-drop-shadow-1xl transition hover:scale-[1.05] group-hover:opacity-100"
+      class="grid-widget-resize absolute bottom-2 right-2 z-10 mb-1 flex size-[35px] cursor-pointer items-center justify-center rounded-full border border-neutral-90 bg-neutral-100 opacity-0 shadow-neutral-shadow-round-1xl transition hover:scale-105 group-hover:opacity-100"
     >
       <lukso-icon
         name="expand"

domains/grid/components/GridWidgetAddContent.vue

@@ -11,7 +11,7 @@ const handleAddContent = () => {
 
 <template>
   <div
-    class="flex h-full cursor-pointer flex-col items-center justify-center overflow-hidden rounded-12 p-4 opacity-50 transition hover:opacity-100 hover:shadow-neutral-drop-shadow"
+    class="flex h-full cursor-pointer flex-col items-center justify-center overflow-hidden rounded-12 p-4 opacity-50 transition hover:opacity-100 hover:shadow-neutral-shadow-round"
     :class="{ 'bg-dashed-border': true }"
     @click="handleAddContent"
   >