@ozdao/martyrs 0.2.571 → 0.2.574

package/src/modules/inventory/components/pages/Inventory.vue

@@ -24,7 +24,7 @@
           key: 'settings',
           component: IconSettings,
           props: {
-            class: 'h-3r pd-r-small pd-l-small flex-center flex bg-light t-black radius-small hover-scale-1 cursor-pointer'
+            class: 'h-3r pd-r-small pd-l-small flex-center flex bg-light t-black radius-small hover:scale-[1.05] cursor-pointer'
           },
           handler: openViewSettings
         }]"
@@ -39,11 +39,11 @@
         <Table
           :columns="columns.filter(col => col.visible)"
           :items="items"
-          class="bg-white z-index-1 br-solid br-1px br-light radius-medium"
+          class="bg-white z-index-1 br-1px br-light radius-medium"
         >
           <!-- Name column (was "product") -->
           <template #cell-name="{ row }">
-            <div class="w-max-20r t-trim flex gap-small flex-nowrap flex-v-center">
+            <div class="w-max-20r truncate flex gap-small flex-nowrap flex-v-center">
               <img
                 v-if="row.images?.length"
                 :src="(FILE_SERVER_URL || '') + row.images[0]"
@@ -51,18 +51,18 @@
                 class="w-3r h-3r radius-small bg-light object-fit-cover"
               />
               <PlaceholderImage v-else class="w-3r h-3r radius-small" />
-              <p class="t-trim t-nowrap">{{ row.name || 'Unknown Product' }}</p>
+              <p class="truncate t-nowrap">{{ row.name || 'Unknown Product' }}</p>
             </div>
           </template>
 
           <!-- Categories -->
           <template #cell-category="{ row }">
-            <div class="w-max-10r flex-nowrap flex  t-trim">
+            <div class="w-max-10r flex-nowrap flex  truncate">
               <p
                 v-if="row.category?.length"
                 v-for="cat in row.category"
                 :key="cat._id"
-                class="w-max t-trim pd-small mn-r-micro radius-small bg-light t-small"
+                class="w-max truncate pd-small mn-r-micro radius-small bg-light t-small"
               >
                 {{ cat.name }}
               </p>
@@ -72,15 +72,15 @@
 
           <!-- Storages -->
           <template #cell-storages="{ row }">
-            <div class="w-max-10r flex-nowrap flex  t-trim">
+            <div class="w-max-10r flex-nowrap flex  truncate">
               <p
                 v-if="row.availabilityDetails?.length"
                 v-for="avail in row.availabilityDetails" 
                 :key="avail._id"
-                class="w-max t-trim pd-small mn-r-micro radius-small bg-light t-small"
+                class="w-max truncate pd-small mn-r-micro radius-small bg-light t-small"
               >
 
-                <span class="t-medium">{{ avail.available || 0 }}</span> ·  
+                <span class="fw-medium">{{ avail.available || 0 }}</span> ·  
                 <span class="t-small">{{ avail.storageName || avail.storage }}:</span>
               </p>
               <p v-else>No stock</p>
@@ -123,7 +123,7 @@
           <template #cell-actions="{ row }">
             <Dropdown
               :label="{ component: IconEllipsis, class: 't-transp i-medium' }"
-              class="cursor-pointer aspect-1x1 pd-nano radius-small hover-bg-light"
+              class="cursor-pointer aspect-1x1 pd-nano radius-small hover:bg-light"
               align="right"
             >
               <div class="bg-white radius-small">

package/src/modules/inventory/components/pages/InventoryEdit.vue

@@ -83,7 +83,7 @@
             v-for="(variant, index) in items" 
             :key="index"
             @click="addVariantToInventory(variant)"
-            class="w-100 cursor-pointer hover-scale-1 bg-light pd-small radius-small flex-v-center flex-nowrap flex gap-thin"
+            class="w-100 cursor-pointer hover:scale-[1.05] bg-light pd-small radius-small flex-v-center flex-nowrap flex gap-thin"
           >
             <div v-if="variant.images && variant.images.length" class="aspect-1x1 h-3r radius-small o-hidden">
               <img 
@@ -92,7 +92,7 @@
               />
             </div>
             <div>
-              <p class="t-medium">{{ variant.name || 'Default variant' }}</p>
+              <p class="fw-medium">{{ variant.name || 'Default variant' }}</p>
               <p v-if="variant.attributes && variant.attributes.length" class="t-small t-transp">
                 {{ variant.attributes.map(attr => `${attr.name}: ${attr.value}`).join(', ') }}
               </p>
@@ -112,7 +112,7 @@
         type="textarea"
         class="w-100 bg-white radius-small pd-medium"
       />  
-      <div class="t-medium mn-t-small mn-b-thin">Select Storage:</div>
+      <div class="fw-medium mn-t-small mn-b-thin">Select Storage:</div>
       <Feed
         :states="{
           empty: {
@@ -163,7 +163,7 @@
         :image="position.image"
         :name="position.name"
         :title="formatPrice(position.cost * position.quantity)"
-        :title_class="[position.cost * position.quantity < 0 ? 't-red' : 't-second']"
+        :title_class="[position.cost * position.quantity < 0 ? 't-red' : 't-grey']"
         :subtitle="`${formatPrice(position.cost)} × ${Math.abs(position.quantity)}${position.unit} `"
       >
         <template v-slot:actions>
@@ -171,7 +171,7 @@
          
           <!-- <Dropdown
             :label="{ component: IconEllipsis, class: 't-transp i-medium' }"
-            class="cursor-pointer aspect-1x1 pd-nano radius-small hover-bg-light"
+            class="cursor-pointer aspect-1x1 pd-nano radius-small hover:bg-light"
             align="right"
           >
             <div class="bg-white radius-small">
@@ -197,7 +197,7 @@
         }]" -->
 
     <Block class="">
-      <section class="gap-thin flex-v-center flex-nojustify flex">
+      <section class="gap-thin flex-v-center flex-justify-start flex">
         <span class="h3 mn-r-auto">
           In total: {{formatPrice(totalPrice)}}
         </span>

package/src/modules/landing/components/blocks/MapBlock.vue

@@ -1,9 +1,9 @@
 <template>
-	<div :class="{'cols-2-2_1': map }" class="o-hidden radius-medium bg-white flex-nowrap flex">
+	<div :class="{'cols-[2fr_1fr] mobile:cols-1': map }" class="o-hidden radius-medium bg-white flex-nowrap flex">
       <!-- Left col -->
       <div class="pd-medium col">
         <h3 class="mn-b-small">{{name}}</h3>
-        <a :href="link" v-if="link" target="_blank" class="t-semi mn-b-medium t-main">Open Google Maps</a>
+        <a :href="link" v-if="link" target="_blank" class="fw-semi mn-b-medium t-main">Open Google Maps</a>
         <p>{{text}}</p>
       </div>
       <!-- Right col -->

package/src/modules/landing/components/sections/Examples.vue

@@ -3,7 +3,7 @@
 		<header class="mn-b-big t-center">
 			<h2 class="mn-center text-fade-in"><span class="text-splitted">Example of the Strains</span></h2> 
 		</header>
-		<div class="cols-4 w-100 o-scroll pos-relative gap-regular">
+		<div class="cols-4 mobile:cols-2 w-100 o-scroll pos-relative gap-regular">
       <img loading="lazy"  v-for="(signal,index)  in signals"   class="radius-medium h-max-30r signal" :src="'/images/examples/' + signal">
 		</div>
 	</section>

package/src/modules/landing/components/sections/InstagramSection.vue

@@ -22,7 +22,7 @@
       </div>
     </div>
     <div class="t-center title">
-      <p class="text-medium">Мы очень рады, что вы делитесь с нами своей красотой и присылаете нам фото-приветы.<br>Спасибо за ваши фотографии!</p>
+      <p class="texfw-medium">Мы очень рады, что вы делитесь с нами своей красотой и присылаете нам фото-приветы.<br>Спасибо за ваши фотографии!</p>
       <button class="button">Посмотреть все отзывы</button> 
     </div>
   </section>

package/src/modules/landing/components/sections/SectionEarn.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="cols-2 gap-thin">
+  <section class="cols-2 mobile:cols-1 gap-thin">
     <div class="pos-relative flex flex-column flex-center h-100">
       <div class="mn-b-thin pd-big radius-medium">
         <img v-if="te('logo')" loading="lazy" class="mn-b-semi h-4r" :src="t('logo')">
@@ -8,15 +8,15 @@
         <p v-if="te('description')" class="mn-b-medium p-medium t-transp">{{ t('description') }}</p>  
         <p v-if="te('subdescription')" class="mn-b-semi p-regular t-transp">{{ t('subdescription')}}</p>
 
-      <div class="gap-thin cols-2">
+      <div class="gap-thin cols-2 mobile:cols-1">
         <router-link :to="t('action_link')" class="flex t-center bg-white flex-center flex-column t-black pd-big radius-medium">
           <IconInfo class="mn-b-small i-extra" fill="rgb(var(--black)"/>
-          <p class="uppercase t-semi">{{t('action')}}</p>
+          <p class="uppercase fw-semi">{{t('action')}}</p>
         </router-link>
 
         <router-link :to="t('action_sublink') " class="flex t-center flex-center flex-column bg-main t-black pd-big radius-medium">
           <IconEarn class="mn-b-small i-extra" fill="rgb(var(--black)"/>
-          <p class="uppercase t-semi">{{t('subaction')}}</p>
+          <p class="uppercase fw-semi">{{t('subaction')}}</p>
         </router-link>
         
       </div>

package/src/modules/landing/components/sections/SectionFeature.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="o-hidden bg-light pos-relative radius-medium cols-2">
+	<div class="o-hidden bg-light pos-relative radius-medium cols-2 mobile:cols-1">
 		<div style="min-height: 20rem;" :class="{'order-2':order}" class="pos-relative w-100 h-100 bg-light">
 			<img loading="lazy" class="w-100 h-100 object-fit-cover pos-absolute" :src="image">
 		</div>   

package/src/modules/landing/components/sections/SectionFocus.vue

@@ -1,5 +1,5 @@
 <template>
-	<section id="our-focus" class="bg-light radius-medium pd-big cols-2 flex">
+	<section id="our-focus" class="bg-light radius-medium pd-big cols-2 mobile:cols-1 flex">
 		
 		<div class="col">
 			
@@ -14,7 +14,7 @@
 			<p class="element-intro display-block p-medium">We are a team of professional growers, engineers, programmers, and geneticists. We are dedicated to the growth and development of the cannabis industry, offering our extensive experience and knowledge to help cultivators like you succeed.</p>
 		</div>
 
-		<div class="cols-2 gap-thin col">
+		<div class="cols-2 mobile:cols-1 gap-thin col">
 			<div :ref="setItemRef" class="industry card">
 				<h3 class="h1 t-main card-child">10+</h3>
 				<p class="h4 card-child">Farms</p>

package/src/modules/landing/components/sections/SectionGuide.vue

@@ -5,11 +5,11 @@
       <p v-if="te('subtitle')" class="t-transp p-medium w-m-60r">{{t('subtitle')}}</p>
     </div>
     <div class="cols-1">
-      <Spoiler v-for="item in tm('FAQ')" :key="item.title" class="br-grey-transp-10 br-solid br-1px radius-small o-hidden pd-big mn-b-thin">
+      <Spoiler v-for="item in tm('FAQ')" :key="item.title" class="br-grey-transp-10 br-1px radius-small o-hidden pd-big mn-b-thin">
         <template #header="{ isOpen }">
           <div class="cursor-pointer w-100 flex-v-center flex-nowrap flex">
             <h3 class="w-100">{{item.title}}</h3>
-            <IconChevronBottom :class="{ 'rotate-180': isOpen }" fill="rgba(var(--grey),0.5)" class="i-medium"/>
+            <IconChevronBottom :class="{ 'rotate-180deg': isOpen }" fill="rgba(var(--grey),0.5)" class="i-medium"/>
           </div>
         </template>
         <template #content>

package/src/modules/landing/components/sections/SectionHeroToken.vue

@@ -44,7 +44,7 @@
 		/>
 
 		<div 
-			class="t-white gap-thin z-index-1 cols-2"
+			class="t-white gap-thin z-index-1 cols-2 mobile:cols-1"
 		>
 			<router-link 
 				:to="{

package/src/modules/landing/components/sections/SectionHeroVideo.vue

@@ -1,7 +1,7 @@
 <template>
   <section id="viewpoint" class="br-b-white hero" itemscope itemtype="http://schema.org/BarOrPub">
     
-    <div class="cols-2 gap-thin">
+    <div class="cols-2 mobile:cols-1 gap-thin">
       <!-- Left col -->
       <div class="col-1 flex-justify flex-column flex o-hidden" itemprop="description">
         
@@ -36,7 +36,7 @@
             <a :href="'mailto:' + t('contacts.email')" class="t-black">{{ t('contacts.email') }}</a>
           </span>
 
-          <a :href="t('contacts.addressLink')" target="_blank" rel="noopener" class="button hover-scale-1 t-black bg-main">
+          <a :href="t('contacts.addressLink')" target="_blank" rel="noopener" class="button hover:scale-[1.05] t-black bg-main">
             {{ t('contacts.seeongoogle') }}
           </a>
         </div>

package/src/modules/landing/components/sections/SectionJoinUs.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="o-hidden container-joinus">
     <div class="content">
-      <span style="font-size: 8rem" class="t-main font-main t-semi">
+      <span style="font-size: 8rem" class="t-main font-main fw-semi">
         {{ userCount }}
       </span>
       <p class="w-m-33r t-center mn-b-small p-medium">
         {{t('description')}}
     
       </p>
-      <router-link :to="{ name: 'Sign In' }" class="bg-black t-medium t-white button">
+      <router-link :to="{ name: 'Sign In' }" class="bg-black fw-medium t-white button">
         {{t('action')}}
       </router-link>
     </div>

package/src/modules/landing/components/sections/SectionMobileApp.vue

@@ -23,7 +23,7 @@
       <h2 class="mn-t-medium mn-b-medium w-m-40r">{{ t('title') }}</h2>
       <p class="t-transp mn-b-big p-medium w-m-33r">{{ t('description') }}</p>
       
-      <div v-if="tm('features').length > 0" class="mn-b-big gap-regular cols-2">
+      <div v-if="tm('features').length > 0" class="mn-b-big gap-regular cols-2 mobile:cols-1">
         <div v-for="feature in tm('features')"  class="feature">
           <h4 class="mn-b-small">{{ feature.title }}</h4>
           <p class="t-transp p-regular">{{ feature.text }}</p>
@@ -39,7 +39,7 @@
         > 
           <span 
             v-if="te('label')"
-            class="z-index-2 radius-medium p-small bg-main t-semi uppercase pd-thin pos-absolute pos-r-10-negative pos-t-10-negative"
+            class="z-index-2 radius-medium p-small bg-main fw-semi uppercase pd-thin pos-absolute pos-r-10-negative pos-t-10-negative"
           >
             {{ t('label') }}
           </span>
@@ -54,7 +54,7 @@
         > 
           <span 
             v-if="te('label')"
-            class="z-index-2 pd-thin p-small radius-medium bg-main t-semi uppercase pos-absolute pos-r-10-negative pos-t-10-negative"
+            class="z-index-2 pd-thin p-small radius-medium bg-main fw-semi uppercase pos-absolute pos-r-10-negative pos-t-10-negative"
           >
             {{ t('label') }}
           </span>

package/src/modules/landing/components/sections/SectionOverview.vue

@@ -4,12 +4,12 @@
       {{t('title')}}
     </h2>
 
-    <div class="cols-4 gap-thin">
+    <div class="cols-4 mobile:cols-2 gap-thin">
       <router-link 
         v-for="section in tm('sections')" 
         :key="section.route"
         :to="section.route" 
-        class="cursor-pointer hover-scale-0 transition-ease-in pd-big bg-light t-black radius-medium"
+        class="cursor-pointer hover:scale-[1.015] ease-in pd-big bg-light t-black radius-medium"
       >
         <img 
           loading="lazy" 

package/src/modules/landing/components/sections/SectionRoadmap.vue

@@ -48,7 +48,7 @@ const { t,tm } = useI18n(props.textData);
       <div
         v-for="(milestone, index) in tm('milestones')"
         :key="index"
-        class="timeline-item br-white-transp-10 br-1px br-solid pd-big radius-small"
+        class="timeline-item br-white-transp-10 br-1px pd-big radius-small"
       >
       
         <div class="mn-b-semi bg-white-transp-5 timeline-icon">
@@ -61,7 +61,7 @@ const { t,tm } = useI18n(props.textData);
 
         <div class="w-100 timeline-content">
           <h3 class="mn-b-small">{{ t(milestone.title) }}</h3>
-          <p class="uppercase mn-b-semi t-main t-semi date">{{ milestone.date }}</p>
+          <p class="uppercase mn-b-semi t-main fw-semi date">{{ milestone.date }}</p>
           <p class="t-transp w-100">{{ t(milestone.description) }}</p>
         </div>
       </div>

package/src/modules/marketplace/views/components/layouts/Marketplace.vue

@@ -1,7 +1,7 @@
 <template>
-	 <div class="cols-2-1_3 z-index-3 pos-relative radius-big">
+	 <div class="cols-[1fr_3fr] mobile:cols-1 z-index-3 pos-relative radius-big">
 
-		<div class="o-y-scroll br-r br-solid br-light pd-medium z-index-2 desktop-only h-100 pos-relative">
+		<div class="o-y-scroll br-r-1px br-light pd-medium z-index-2 desktop-only h-100 pos-relative">
 			<div class="w-100 o-y-scroll h-100">
 				<!-- Categories -->
 				<div class="mn-b-medium" v-if="currentCategories.length > 0">
@@ -13,7 +13,7 @@
 							v-for="category in currentCategories"
 							:key="category._id"
 							@click="selectCategory(category)"
-							class="pd-small radius-small cursor-pointer hover-bg-light transition-all"
+							class="pd-small radius-small cursor-pointer hover:bg-light ease"
 						>
 							{{ category.name }}
 						</div>
@@ -29,7 +29,7 @@
 						<div class="cursor-pointer w-100 flex-v-center flex-nowrap flex">
 							<h4 class="w-100">Location</h4>
 							<div class="h-2r w-2r flex-child-auto aspect-1x1 flex-center flex bg-light radius-extra">
-								<IconChevronBottom :class="{ 'rotate-180 mn-t-micro-negative': isOpen }" fill="rgb(var(--black))" class="i-medium"/>
+								<IconChevronBottom :class="{ 'rotate-180deg mn-t-micro-negative': isOpen }" fill="rgb(var(--black))" class="i-medium"/>
 							</div>
 						</div>
 					</template>
@@ -64,7 +64,7 @@
 						<div class="cursor-pointer w-100 flex-v-center flex-nowrap flex">
 							<h4 class="w-100">Delivery Options</h4>
 							<div class="h-2r w-2r flex-child-auto aspect-1x1 flex-center flex bg-light radius-extra">
-								<IconChevronBottom :class="{ 'rotate-180 mn-t-micro-negative': isOpen }" fill="rgb(var(--black))" class="i-medium"/>
+								<IconChevronBottom :class="{ 'rotate-180deg mn-t-micro-negative': isOpen }" fill="rgb(var(--black))" class="i-medium"/>
 							</div>
 						</div>
 					</template>
@@ -93,7 +93,7 @@
 						<div class="cursor-pointer w-100 flex-v-center flex-nowrap flex">
 							<h4 class="w-100">Payment Options</h4>
 							<div class="h-2r w-2r flex-child-auto aspect-1x1 flex-center flex bg-light radius-extra">
-								<IconChevronBottom :class="{ 'rotate-180 mn-t-micro-negative': isOpen }" fill="rgb(var(--black))" class="i-medium"/>
+								<IconChevronBottom :class="{ 'rotate-180deg mn-t-micro-negative': isOpen }" fill="rgb(var(--black))" class="i-medium"/>
 							</div>
 						</div>
 					</template>
@@ -132,14 +132,14 @@
 	    		<span 
 	    			v-if="localPosition.city || localPosition.state || localPosition.country"
 	    			@click="a => { core.state.isOpenLocationPopup = true }" 
-	    			class="t-main t-semi cursor-pointer "
+	    			class="t-main fw-semi cursor-pointer "
 	    		>
 	  				<template v-if="localPosition.city">{{localPosition.city}}, </template>
 	  				<template v-if="localPosition.state">{{localPosition.state}}, </template>
 	  				<template v-if="localPosition.country">{{localPosition.country}}</template>
 	    		</span>
 
-	    		<span v-else @click="a => { core.state.isOpenLocationPopup = true }"  class="t-main t-semi cursor-pointer">The World</span>
+	    		<span v-else @click="a => { core.state.isOpenLocationPopup = true }"  class="t-main fw-semi cursor-pointer">The World</span>
 	    	</h2>
 			</header>
 

package/src/modules/marketplace/views/components/pages/Marketplace.vue

@@ -7,20 +7,20 @@
         <span
           v-if="localPosition.city || localPosition.state || localPosition.country"
           @click="a => { store.core.state.isOpenLocationPopup = true }"
-          class="t-main t-semi cursor-pointer "
+          class="t-main fw-semi cursor-pointer "
         >
           <template v-if="localPosition.city">{{localPosition.city}}, </template>
           <template v-if="localPosition.state">{{localPosition.state}}, </template>
           <template v-if="localPosition.country">{{localPosition.country}}</template>
         </span>
 
-        <span v-else @click="a => { store.core.state.isOpenLocationPopup = true }"  class="t-main t-semi cursor-pointer">The World</span>
+        <span v-else @click="a => { store.core.state.isOpenLocationPopup = true }"  class="t-main fw-semi cursor-pointer">The World</span>
       </h2>
     </header>
 
-    <div class="cols-2-1_3 br-1px br-solid br-light z-index-3 pos-relative">
+    <div class="cols-[1fr_3fr] mobile:cols-1 br-1px br-light z-index-3 pos-relative">
 
-      <div class="o-y-scroll br-r br-solid br-light pd-medium z-index-2 desktop-only h-100 pos-relative">
+      <div class="o-y-scroll br-r-1px br-light pd-medium z-index-2 desktop-only h-100 pos-relative">
         <div class="w-100 o-y-scroll h-100">
           <!-- Location Filter -->
           <div v-if="!route.params.country && !route.params.state && !route.params.city" class="mn-b-medium">
@@ -36,7 +36,7 @@
                 v-for="location in marketplace.state.locationOptions"
                 :key="location.label"
                 @click="router.push(location.path)"
-                class="cursor-pointer hover-t-underline mn-b-regular transition-all"
+                class="cursor-pointer hover:underline mn-b-regular ease"
               >
                 {{ location.label }}
               </div>

package/src/modules/marketplace/views/components/sections/SectionMenu.vue

@@ -13,7 +13,7 @@
 				<router-link :to="getMarketplaceLink([category.url])"
 					v-for="(category,index) in categoriesRoot.slice(0,5)" 
 					:key="category" 
-					class="cursor-pointer hover-scale-0 flex-v-center flex-h-center flex-nowrap flex-row flex bg-light radius-medium pd-medium grid-item"
+					class="cursor-pointer hover:scale-[1.015] flex-v-center flex-h-center flex-nowrap flex-row flex bg-light radius-medium pd-medium grid-item"
 				>
 					<img loading="lazy" 
 						v-if="category.photo"
@@ -32,7 +32,7 @@
 						
 						<button 
 							v-if="category.url === 'buds'"
-			        class="mn-t-small radius-extra hover-bg-black t-medium t-black bg-main hover-t-white button-small button"
+			        class="mn-t-small radius-extra hover:bg-black fw-medium t-black bg-main hover:t-white button-small button"
 			      >
 			        <span>Check {{countProduct.count}} products →</span>
 			      </button>

package/src/modules/music/components/SidebarMusic.vue

@@ -6,7 +6,7 @@
     :width="'w-15r'"
     :widthHidden="'w-3r'"
     @closeSidebar="$emit('closeSidebar')"
-    class="flex-child-shrink-0"
+    class="flex-shrink-0"
   >
     <div class="pd-thin">
       <nav class="music-nav mn-b-medium">
@@ -14,39 +14,39 @@
           <li>
             <router-link :to="{ name: 'music-home' }" 
               class="flex-v-center flex gap-small pd-thin radius-small" 
-              :class="$route.name === 'music-home' ? 'bg-white' : 'hover-bg-white'"
+              :class="$route.name === 'music-home' ? 'bg-white' : 'hover:bg-white'"
             >
               <IconHome class="i-medium" :fill="$route.name === 'music-home' ? 'rgb(var(--main))' : 'rgb(var(--white))'"/>
-              <span class="t-medium" :class="$route.name === 'music-home' ? 't-main' : ''">Home</span>
+              <span class="fw-medium" :class="$route.name === 'music-home' ? 't-main' : ''">Home</span>
             </router-link>
           </li>
           <li>
             <router-link :to="{ name: 'music-search' }" 
               class="flex-v-center flex gap-small pd-thin radius-small"
-              :class="$route.name === 'music-search' ? 'bg-white' : 'hover-bg-white'"
+              :class="$route.name === 'music-search' ? 'bg-white' : 'hover:bg-white'"
             >
               <IconSearch class="i-medium" :fill="$route.name === 'music-search' ? 'rgb(var(--main))' : 'rgb(var(--white))'"/>
-              <span class="t-medium" :class="$route.name === 'music-search' ? 't-main' : ''">Search</span>
+              <span class="fw-medium" :class="$route.name === 'music-search' ? 't-main' : ''">Search</span>
             </router-link>
           </li>
           <li>
             <router-link :to="{ name: 'music-library' }" 
               class="flex-v-center flex gap-small pd-thin radius-small"
-              :class="$route.name === 'music-library' ? 'bg-white' : 'hover-bg-white'"
+              :class="$route.name === 'music-library' ? 'bg-white' : 'hover:bg-white'"
             >
               <IconLibrary class="i-medium" :fill="$route.name === 'music-library' ? 'rgb(var(--main))' : 'rgb(var(--white))'"/>
-              <span class="t-medium" :class="$route.name === 'music-library' ? 't-main' : ''">Your Library</span>
+              <span class="fw-medium" :class="$route.name === 'music-library' ? 't-main' : ''">Your Library</span>
             </router-link>
           </li>
         </ul>
       </nav>
       
       <div class="music-playlists" v-if="isAuthenticated">
-        <div class="flex-between flex mn-b-small">
-          <h4 class="t-transp t-medium">YOUR PLAYLISTS</h4>
+        <div class="flex-justify-between flex mn-b-small">
+          <h4 class="t-transp fw-medium">YOUR PLAYLISTS</h4>
           <Button 
             @click="showCreatePlaylistModal = true" 
-            class="bg-transparent cursor-pointer pd-micro radius-small hover-bg-white"
+            class="bg-transparent cursor-pointer pd-micro radius-small hover:bg-white"
             :showLoader="false"
             :showSucces="false"
           >
@@ -72,7 +72,7 @@
             <li v-for="playlist in items" :key="playlist._id" class="mn-b-thin">
               <router-link 
                 :to="{ name: 'playlist', params: { url: playlist.url } }" 
-                class=" t-truncate d-block pd-thin radius-small hover-bg-white"
+                class=" truncate d-block pd-thin radius-small hover:bg-white"
                 :class="$route.params.url === playlist.url ? 'bg-white t-main' : ''"
               >
                 {{ playlist.title }}

package/src/modules/music/components/blocks/ActionButtons.vue

@@ -4,7 +4,7 @@
       <!-- Regular button -->
       <Button
         v-if="button.type !== 'dropdown'"
-        :class="['flex-1 radius-thin flex-center gap-thin', button.class]"
+        :class="['flex-child-1 radius-thin flex-center gap-thin', button.class]"
         @click="button.action"
       >
         <component
@@ -31,7 +31,7 @@
         <template #default>
           <div class="dropdown-menu bg-white pd-small radius-medium shadow-big mn-t-thin">
             <template v-for="(item, idx) in button.items" :key="idx">
-              <hr v-if="item.separator" class="mn-v-thin border-dark-transp-10" />
+              <hr v-if="item.separator" class="mn-v-thin br-dark-transp-10" />
               <Button
                 v-else
                 @click="handleDropdownClick(item.action)"

package/src/modules/music/components/cards/AlbumCard.vue

@@ -9,10 +9,10 @@
         :url="album.coverArt || album.coverUrl || '/logo/logo-placeholder.jpg'" 
         class="w-100 aspect-1x1 object-fit-cover"
       />
-      <div v-if="album.totalTracks && album.totalTracks > 0" class="album-overlay pos-absolute pos-t-0 pos-l-0 w-100 h-100 flex-center flex transition-cubic-in-out">
+      <div v-if="album.totalTracks && album.totalTracks > 0" class="album-overlay pos-absolute pos-t-0 pos-l-0 w-100 h-100 flex-center flex ease-cubic-in-out">
         <Button 
           @click.stop.prevent="playAlbum(album)" 
-          class="play-button i-big bg-main radius-round flex-center flex aspect-1x1"
+          class="play-button i-big bg-main radius-extra flex-center flex aspect-1x1"
           :showLoader="false"
           :showSucces="false"
         >
@@ -21,8 +21,8 @@
       </div>
     </div>
     <div class="album-info pd-medium bg-light">
-      <h3 class="mn-b-thin t-medium  t-truncate" style="height: 1.50rem">{{ album.title }}</h3>
-      <p class="t-transp t-small t-truncate">{{ albumInfo }}</p>
+      <h3 class="mn-b-thin fw-medium  truncate" style="height: 1.50rem">{{ album.title }}</h3>
+      <p class="t-transp t-small truncate">{{ albumInfo }}</p>
     </div>
   </router-link>
 </template>

package/src/modules/music/components/cards/ArtistCard.vue

@@ -1,7 +1,7 @@
 <template>
   <div 
     class="artist-card flex flex-column radius-medium o-hidden bg-white"
-    :class="{ 'cursor-pointer hover-scale-1': clickable }"
+    :class="{ 'cursor-pointer hover:scale-[1.05]': clickable }"
     @click="handleClick"
   >
     <div class="artist-image w-100 pos-relative aspect-1x1">
@@ -30,8 +30,8 @@
     </div>
     
     <div class="pd-small">
-      <h4 class="t-medium mn-b-small t-truncate">{{ artist.name }}</h4>
-      <p v-if="artist.genres && artist.genres.length" class="p-small t-transp t-trim">
+      <h4 class="fw-medium mn-b-small truncate">{{ artist.name }}</h4>
+      <p v-if="artist.genres && artist.genres.length" class="p-small t-transp truncate">
         {{ artist.genres.join(', ') }}
       </p>
     </div>
@@ -76,9 +76,4 @@ const handleClick = () => {
   border: 1px solid rgba(var(--grey), 0.2);
   transition: transform 0.2s ease;
 }
-
-.hover-scale-1:hover {
-  transform: scale(1.02);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
 </style>

package/src/modules/music/components/cards/ArtistCardSmall.vue

@@ -2,7 +2,7 @@
 <template>
   <router-link
    :to="artist.url ? { name: 'artist', params: { url: artist.url } } : artist.to"
-    class="artist-card bg-light pd-medium radius-medium flex flex-v-center flex-justify-between gap-thin flex-1 hover-opacity"
+    class="artist-card bg-light pd-medium radius-medium flex flex-v-center flex-justify-between gap-thin flex-child-1 hover:opacity-70"
   >
     <div
      class="flex flex-nowrap flex-v-center gap-thin"
@@ -22,7 +22,7 @@
       <div>
         <div class="flex items-center gap-thin">
           <span class="mn-b-thin">{{ artist.name }}</span>
-          <IconVerified v-if="artist.isVerified" class="w-1r h-1r t-primary" />
+          <IconVerified v-if="artist.isVerified" class="w-1r h-1r t-main" />
         </div>
         <span class="t-small t-transp">{{ artistType }}</span>
       </div>