@ozdao/martyrs 0.2.570 → 0.2.572

package/src/modules/organizations/components/forms/DepartmentForm.vue

@@ -5,7 +5,7 @@
       class="mn-b-thin"
     >
       <div
-        class="cols-2-fit-content"
+        class="cols-[fit-content(100%)_1fr] mobile:cols-1"
       >
         <UploadImage 
           v-model:photo="currentDepartment.profile.photo"

package/src/modules/organizations/components/forms/InviteForm.vue

@@ -6,7 +6,7 @@
       <div
         v-for="(member, index) in members" 
         :key="index" 
-        class="br-1px br-solid br-grey-transp-25 flex gap-thin radius-small mn-b-thin"
+        class="br-1px br-grey-transp-25 flex gap-thin radius-small mn-b-thin"
       >
         <Field 
           v-model:field="member.contact"   

package/src/modules/organizations/components/pages/Department.vue

@@ -36,7 +36,7 @@
         <ul>
           <li v-if="departmentsStore.state.items[0]?.members?.length < 1">В отделе еще нет участников</li>
           <User 
-            class="br-b br-solid br-grey-transp-25" 
+            class="br-b-1px br-grey-transp-25" 
             v-for="(member, index) in departmentsStore.state.items[0]?.members || []" 
             :key="index" 
             :user="member.user" 
@@ -52,7 +52,7 @@
         <h3 class="mn-b-regular">Подотделы</h3>
         <ul>
           <li v-if="departmentsStore.state.items[0]?.subdepartments?.length < 1">В отделе еще нет подотделов</li>
-          <DepartmentSub v-for="(subdepartment, index) in departmentsStore.state.items[0]?.subdepartments || []" @click="$router.push(`/app/organization/departments/${subdepartment._id}`)" :key="index" class="br-b br-solid br-grey-transp-25" :department="subdepartment" />
+          <DepartmentSub v-for="(subdepartment, index) in departmentsStore.state.items[0]?.subdepartments || []" @click="$router.push(`/app/organization/departments/${subdepartment._id}`)" :key="index" class="br-b-1px br-grey-transp-25" :department="subdepartment" />
         </ul> 
       </section>
     </div>

package/src/modules/organizations/components/pages/DepartmentEdit.vue

@@ -18,7 +18,7 @@
       class="mn-b-thin"
     >
       <div
-        class="cols-2-fit-content"
+        class="cols-[fit-content(100%)_1fr] mobile:cols-1"
       >
         <UploadImage 
            v-model:photo="departmentsStore.state.department.profile.photo"

package/src/modules/organizations/components/pages/Members.vue

@@ -91,7 +91,7 @@
           v-for="(department, index) in items"
           :key="department._id"
           @click="() => openDepartmentPopup(department)"
-          class="cursor-pointer hover-scale-1"
+          class="cursor-pointer hover:scale-[1.05]"
         >
           <CardDepartment
             :department="department"

package/src/modules/organizations/components/pages/Organization.new.vue

@@ -152,7 +152,7 @@
           Участники
         </h2>
         <button
-          class="pd-small bg-light radius-small t-dark hover-bg-main hover-t-white transition-linear flex gap-micro"
+          class="pd-small bg-light radius-small t-dark hover:bg-main hover:t-white ease-linear flex gap-micro"
           @click="goToMembersPage"
         >
           Все участники
@@ -170,7 +170,7 @@
             class="w-5r h-5r radius-medium object-fit-cover"
           />
           <div class="flex-child-1">
-            <div class="t-semi">{{ organizationState.owner.name }}</div>
+            <div class="fw-semi">{{ organizationState.owner.name }}</div>
             <div class="p-small t-main">Владелец</div>
             <div class="p-small t-grey">онлайн</div>
           </div>
@@ -192,8 +192,8 @@
             class="w-5r h-5r radius-medium object-fit-cover"
           />
           <div class="flex-child-1">
-            <div class="t-semi">{{ admin.name }}</div>
-            <div class="p-small t-second">Администратор</div>
+            <div class="fw-semi">{{ admin.name }}</div>
+            <div class="p-small t-grey">Администратор</div>
             <div class="p-small t-grey">2 часа назад</div>
           </div>
           <div class="w-3r h-3r radius-extra bg-second flex flex-center">
@@ -214,7 +214,7 @@
             class="w-5r h-5r radius-medium object-fit-cover"
           />
           <div class="flex-child-1">
-            <div class="t-semi">{{ member.name }}</div>
+            <div class="fw-semi">{{ member.name }}</div>
             <div class="p-small t-dark">Участник</div>
             <div class="p-small t-grey">вчера</div>
           </div>
@@ -270,7 +270,7 @@
             <div class="pd-small bg-light radius-small">
               <div class="flex gap-micro mn-b-micro">
                 <MapPin class="i-small fill-main" />
-                <div class="t-semi">Главный офис</div>
+                <div class="fw-semi">Главный офис</div>
               </div>
               <div class="mn-b-small">{{ organizationData?.contacts?.address }}</div>
               <div class="flex gap-micro mn-b-small">
@@ -287,7 +287,7 @@
             <div class="pd-small bg-light radius-small">
               <div class="flex gap-micro mn-b-micro">
                 <MapPin class="i-small fill-main" />
-                <div class="t-semi">Коворкинг</div>
+                <div class="fw-semi">Коворкинг</div>
               </div>
               <div class="mn-b-small">г. Москва, ул. Арбат, д. 25, 3 этаж</div>
               <div class="flex gap-micro mn-b-small">
@@ -333,7 +333,7 @@
           
           <!-- Информация -->
           <div class="flex-child-1">
-            <h4 class="t-semi mn-b-micro">{{ event.title }}</h4>
+            <h4 class="fw-semi mn-b-micro">{{ event.title }}</h4>
             <p class="p-small t-grey mn-b-small">{{ event.description }}</p>
             <div class="flex gap-regular p-small t-grey">
               <div class="flex gap-micro">

package/src/modules/organizations/components/pages/Organization.vue

@@ -23,7 +23,7 @@
 						class="w-100"
 					>
 						<button 
-							class="w-100 bg-black br-solid br-1px br-white-transp-20 t-white button-small button"
+							class="w-100 bg-black br-1px br-white-transp-20 t-white button-small button"
 						>
 							Report
 						</button>
@@ -85,7 +85,7 @@
 	   	<div class="flex-center  pd-r-thin pd-l-thin flex-nowrap flex mn-t-thin bg-white radius-extra w-max">
 	   		<IconFollowing class="i-medium mn-r-micro t-transp"/>
 
-	      <p class="mn-t-thin p-regular t-medium uppercase mn-b-thin">{{organization.state.current.numberOfSubscribers}} followers</p>
+	      <p class="mn-t-thin p-regular fw-medium uppercase mn-b-thin">{{organization.state.current.numberOfSubscribers}} followers</p>
 
 	      <ButtonToggleMembership
 	        v-if="
@@ -101,7 +101,7 @@
 	        :status="organization.state.current.isSubscriber" 
 	        :text="{create: '+', remove: '-'}"
 	        @updateMembership="event => handleMembershipUpdate(event, 'isSubscriber', 'numberOfSubscribers')"
-	        class=" mn-l-thin p-regular t-medium radius-extra i-medium" 
+	        class=" mn-l-thin p-regular fw-medium radius-extra i-medium" 
 	      />
 	    </div>
 
@@ -135,7 +135,7 @@
 		<!-- Backoffice -->
 		<div v-if="MOBILE_APP" @click="() => store.core.state.isOpenSidebar = !store.core.state.isOpenSidebar"  class="pos-relative">
 			<div class="bg-light radius-medium pd-medium">
-				<p class="t-medium t-black-transp-60">
+				<p class="fw-medium t-black-transp-60">
 					Show Menu
 				</p>
 			</div>
@@ -145,10 +145,10 @@
 		<!-- <div class="pos-relative">
 			<div class="bg-light radius-medium pd-medium">
 				<h3 class="mn-b-small">About {{ organization.state.current?.profile?.name }}</h3>
-				<p v-if="organization.state.current?.profile?.description" class="t-medium">
+				<p v-if="organization.state.current?.profile?.description" class="fw-medium">
 					{{ organization.state.current.profile.description }}
 				</p>
-				<p v-else class="t-medium t-black-transp-60">
+				<p v-else class="fw-medium t-black-transp-60">
 					No description available.
 				</p>
 			</div>

package/src/modules/organizations/components/pages/OrganizationDocuments.vue

@@ -2,11 +2,11 @@
   <div class="documents pd-medium bg-light">
     <h3 class="mn-b-small">Загрузите документы</h3>
     
-    <div class="mn-b-big cols-4">
+    <div class="mn-b-big cols-4 mobile:cols-2">
 	    <div v-for="(doc, index) in documents" :key="index" @click="openPopup(index)">
 	      <div class="pd-medium bg-white radius-small">
 	      	<h3 class="mn-b-small">{{ doc.name }}</h3>
-	      	<p class="t-semi t-transp radius-small">{{ doc.status }}</p>
+	      	<p class="fw-semi t-transp radius-small">{{ doc.status }}</p>
 	      </div>
 	    </div>
 	  </div>

package/src/modules/organizations/components/pages/Organizations.vue

@@ -8,9 +8,9 @@
     		})" 
     		class="
     			bg-second
-    			radius-100 
+    			radius-extra 
     			i-big 
-    			hover-scale-1
+    			hover:scale-[1.05]
     			cursor-pointer
     			t-white
     			bg-second
@@ -32,7 +32,7 @@
 				h5 
 				bg-white
 				gap-micro pd-smallpd-t-thin pd-b-thin
-				br-b br-solid br-black-transp-10
+				br-b-1px br-black-transp-10
 			"
 			classTab="bg-light pd-medium o-hidden radius-small w-100"
 		/>

package/src/modules/organizations/components/sections/Documents.vue

@@ -2,13 +2,13 @@
   <div class="documents">
     <h3 class="mn-b-small">Список документов</h3>
     
-    <div class="mn-b-big cols-4">
+    <div class="mn-b-big cols-4 mobile:cols-2">
 	      <div  
 	      	v-for="(doc, index) in documents" :key="index" 
 	      	@click="openPopup(index)" 
 	      	class="h-100 pd-medium bg-white radius-small">
 	      	<h3 class="mn-b-small">{{ doc.name }}</h3>
-	      	<p class="t-semi t-transp radius-small">{{ doc.status }}</p>
+	      	<p class="fw-semi t-transp radius-small">{{ doc.status }}</p>
 	      </div>
 	  </div>
 

package/src/modules/organizations/components/sections/MembersAdd.vue

@@ -55,7 +55,7 @@
         v-for="(member, index) in members" 
         :key="index" 
         class="
-          br-1px br-solid br-grey-transp-25
+          br-1px br-grey-transp-25
           flex
           gap-thin
           radius-small

package/src/modules/organizations/components/sections/Unit.vue

@@ -33,7 +33,7 @@
 
       <hr class="mn-b-small">
 
-     <button @click="emitRemoveUnit" class="w-100 br-dark bg-transp button-small button">Удалить отдел</button>
+     <button @click="emitRemoveUnit" class="w-100 br-dark bg-transparent button-small button">Удалить отдел</button>
 
     
   

package/src/modules/pages/views/components/blocks/CardPage.vue

@@ -9,7 +9,7 @@
             z-index-2
             cursor-pointer
             mn-r-auto
-            t-truncate
+            truncate
           "
           :class="{
             't-main': $route.params.url && page.url === joinArrayToUrl($route.params.url)
@@ -52,7 +52,7 @@
       </div>
     </div>
 
-    <div v-if="page.children && page.children.length > 0 && page.children[0].url && showChildren" class="mn-l-small br-t br-solid br-black-transp-10">
+    <div v-if="page.children && page.children.length > 0 && page.children[0].url && showChildren" class="mn-l-small br-t-1px br-black-transp-10">
       <CardPage 
         @createPage="createPage" 
         v-for="childPage in page.children" 

package/src/modules/pages/views/components/pages/Page.vue

@@ -2,7 +2,7 @@
       
   <div v-if="page && page.content"  style="overflow: clip" class=" bg-light pos-relative"> 
     
-    <div class="pd-medium pos-sticky mobile-only  z-index-1 pos-t-0 bg-light w-100 br-b br-solid br-black-transp-10">
+    <div class="pd-medium pos-sticky mobile-only  z-index-1 pos-t-0 bg-light w-100 br-b-1px br-black-transp-10">
       <button @click="showMenu" class="cursor-pointer">
         {{ isMenuOpen === false ? 'Show Menu' : 'Hide Menu' }}
       </button>
@@ -10,7 +10,7 @@
 
     <div  v-if="isMenuOpen" class="z-index-0  pos-relative">
       <ul 
-        class="transition-ease-in-out w-100  bg-light"
+        class="ease-in-out w-100  bg-light"
       >
         <CardPage 
           :page="pageParent" 
@@ -20,11 +20,11 @@
       </ul>  
     </div>
 
-    <div  v-if="!isMenuOpen" class="cols-2-1_3 h-100 bg-light z-index-0 pos-relative">
+    <div  v-if="!isMenuOpen" class="cols-[1fr_3fr] mobile:cols-1 h-100 bg-light z-index-0 pos-relative">
 
       <div class="desktop-only h-100 bg-white o-scroll z-index-0  pos-relative">
         <ul 
-          class="transition-ease-in-out w-100  bg-light"
+          class="ease-in-out w-100  bg-light"
         >
           <CardPage 
             :page="pageParent" 
@@ -40,7 +40,7 @@
           class=""
         />
 
-        <div class="gap-thin cols-2">
+        <div class="gap-thin cols-2 mobile:cols-1">
           <div  v-if="navigationPages.previousPage" class="bg-white pd-medium mn-b-thin radius-semi ">
             <h4 class="mn-b-small" >Read Previous</h4>
 

package/src/modules/products/components/blocks/CardCategory.vue

@@ -2,7 +2,7 @@
   <div class="flex-v-center bg-light pd-small radius-small flex-column flex">
     <div class="w-100 flex-v-center flex-nowrap gap-thin flex">
       <img v-if="category.photo" class="i-big radius-small object-fit-contain bg-white" :src="(FILE_SERVER_URL || '') + category.photo"/>
-      <h4 class="my-handle t-truncate w-100 w-max-100 mn-r-auto">{{category.name}}</h4>
+      <h4 class="my-handle truncate w-100 w-max-100 mn-r-auto">{{category.name}}</h4>
 
       <router-link
        v-if="access"

package/src/modules/products/components/blocks/CardPosition.vue

@@ -13,11 +13,11 @@
     
     <!-- Item details -->
     <div class="mn-micro-negative flex flex-column w-100 o-hidden">
-      <p class="w-100 pd-micro t-trim trimmed capitalize t-medium">{{ name || 'Unnamed Product' }}</p>
+      <p class="w-100 pd-micro truncate trimmed capitalize fw-medium">{{ name || 'Unnamed Product' }}</p>
       
       <div class="flex pd-micro flex-v-center gap-micro w-max ">
-      	<span v-if="title" :class="title_class" class="t-second  d-inline-block t-demi">{{title}}</span>
-      	<span v-if="subtitle" class="t-transp p-small d-inline-block t-medium">{{ subtitle }}</span>
+      	<span v-if="title" :class="title_class" class="t-grey  d-inline-block fw-demi">{{title}}</span>
+      	<span v-if="subtitle" class="t-transp p-small d-inline-block fw-medium">{{ subtitle }}</span>
       </div>
     	<slot></slot>
     </div>
@@ -42,7 +42,7 @@
       <template v-for="(action, index) in actions" :key="index">
         <div 
           :class="action.class || 'bg-light'"
-          class="radius-small pd-small flex-center flex aspect-1x1 cursor-pointer hover-scale-1"
+          class="radius-small pd-small flex-center flex aspect-1x1 cursor-pointer hover:scale-[1.05]"
           @click="() => action.handler(item, index)"
         >
           <component

package/src/modules/products/components/blocks/CardProduct.vue

@@ -40,7 +40,7 @@
 					v-else
 					class="radius-medium h-100 w-100"
 				/>
-				<span v-if="product.available <= 0 && product.listing !== 'rent'" class="pos-absolute bg-white t-black pd-thin radius-medium p-small t-medium pos-t-medium pos-l-medium">Out of Stock</span>
+				<span v-if="product.available <= 0 && product.listing !== 'rent'" class="pos-absolute bg-white t-black pd-thin radius-medium p-small fw-medium pos-t-small pos-l-small">Out of Stock</span>
 				<THC v-if="product.attributes?.length > 0 && product.attributes[1]?.name === 'THC'" :product="product" />
 			</div>
 		</div>
@@ -50,12 +50,12 @@
 			<!-- Detail -->
 			<p
 				v-if="product.attributes?.length > 0"
-				class="t-semi t-transp p-small mn-b-thin"
+				class="fw-semi t-transp p-small mn-b-thin"
 			>
 				{{product.attributes[0]?.value}}
 			</p>
 			<!-- Name -->
-			<span style=" hyphens: auto;" class="word-break t-truncate p-regular mn-b-micro w-100 w-max-100 ">
+			<span style=" hyphens: auto;" class="word-break truncate p-regular mn-b-micro w-100 w-max-100 ">
 				{{product.name}}
 			</span>
 

package/src/modules/products/components/blocks/ProductDiscounts.vue

@@ -2,20 +2,20 @@
   <div v-if="discounts && discounts.length">
     <div class="mn-b-small flex-nowrap flex flex-v-center">
       <IconDiscount class="mn-r-micro i-medium"/>
-      <p class="t-medium">Special Offers</p>
+      <p class="fw-medium">Special Offers</p>
     </div>
 
     <div class="flex flex-column flex-wrap gap-thin">
       <div 
         v-for="(discount, index) in discounts" 
         :key="index" 
-        class="discount-card bg-light pd-small radius-small br-1px br-solid br-light cursor-pointer "
+        class="discount-card bg-light pd-small radius-small br-1px br-light cursor-pointer "
         @click="selectDiscount(discount)"
       >
         <div class="flex flex-wrap gap-thin flex-v-center w-100">
 
           <Tooltip :text="discount.description || 'No description'">
-            <span class="discount-name t-semi p-regular">{{ discount.name }}</span>
+            <span class="discount-name fw-semi p-regular">{{ discount.name }}</span>
           </Tooltip>
 
           <span class="t-main p-regular">

package/src/modules/products/components/blocks/ProductImages.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-100 bs-heavy h-max  mobile:pos-relative tablet:pos-relative pos-sticky pos-t-0 pd-medium o-hidden bg-light radius-medium gap-small flex-nowrap flex-row mobile:flex-column flex pos-relative">
+  <div class="w-100 bs-big h-max  mobile:pos-relative tablet:pos-relative pos-sticky pos-t-0 pd-medium o-hidden bg-light radius-medium gap-small flex-nowrap flex-row mobile:flex-column flex pos-relative">
     <!-- Main image container -->
     <div class="order-1 w-100 bg-light radius-small o-hidden" @click="openPopup(currentImageIndex)">
       <Image360
@@ -36,7 +36,7 @@
         <div
           v-if="images.length > 5"
           @click="openPopup(5)"
-          class="aspect-1x1 radius-small o-hidden thumbnail flex flex-center t-medium t-black bg-white "
+          class="aspect-1x1 radius-small o-hidden thumbnail flex flex-center fw-medium t-black bg-white "
         >
           +{{ images.length - 5 }}
         </div>

package/src/modules/products/components/blocks/ProductVariants.vue

@@ -5,7 +5,7 @@
       :key="group.label"
       class="w-100 mn-b-medium"
     >
-      <p class="capitalize mn-b-thin t-medium">{{ group.label }}</p>
+      <p class="capitalize mn-b-thin fw-medium">{{ group.label }}</p>
 
       <div class="flex flex-wrap gap-thin mn-b-medium">
         <button
@@ -16,7 +16,7 @@
           class="pd-small radius-small"
           :class="[
             isSelected(group, item) ? 'br-main' : 'br-black-transp-10',
-            item.off ? 'o-50 cursor-not-allowed' : 'cursor-pointer hover-scale-1',
+            item.off ? 'o-50 cursor-not-allowed' : 'cursor-pointer hover:scale-[1.05]',
           ]"
         >
           <img

package/src/modules/products/components/elements/Image360.vue

@@ -9,8 +9,8 @@
 
 
     <transition name="scale5" :css="!firstImageLoad" appear>
-      <div v-if="currentImage" class="h-100 w-100 transition-ease">
-        <img loading="lazy" v-if="currentImage" :key="currentImage" class="h-100 w-100 transition-ease" :src="(FILE_SERVER_URL || '') + currentImage.src" alt="360 product view" @mousedown="startRotation" @mousemove="rotate" @mouseup="stopRotation" @mouseleave="stopRotation" @touchstart="startRotation" @touchmove="rotate" @touchend="stopRotation" @dragstart.prevent>
+      <div v-if="currentImage" class="h-100 w-100 ease">
+        <img loading="lazy" v-if="currentImage" :key="currentImage" class="h-100 w-100 ease" :src="(FILE_SERVER_URL || '') + currentImage.src" alt="360 product view" @mousedown="startRotation" @mousemove="rotate" @mouseup="stopRotation" @mouseleave="stopRotation" @touchstart="startRotation" @touchmove="rotate" @touchend="stopRotation" @dragstart.prevent>
 
       </div>
     </transition>

package/src/modules/products/components/elements/Price.vue

@@ -3,8 +3,8 @@
     <span
       :class="{
         'h4': !size,
-        'p-regular t-semi': size === 'small',
-        'h3 t-semi': size === 'big'
+        'p-regular fw-semi': size === 'small',
+        'h3 fw-semi': size === 'big'
       }"
     >
       {{ returnCurrency() + variant.price }}

package/src/modules/products/components/elements/QuantitySelector.vue

@@ -3,12 +3,12 @@
   <div class="flex flex-nowrap gap-thin">
     <button 
       @click="decrementQuantity" 
-      class="radius-small pd-small bg-light flex-center flex aspect-1x1 cursor-pointer hover-scale-1"
+      class="radius-small pd-small bg-light flex-center flex aspect-1x1 cursor-pointer hover:scale-[1.05]"
       :disabled="modelValue <= 1"
     >
       <span class="i-medium">-</span>
     </button>
-    <div class="radius-small br-solid br-1px br-light w-3r pd-small">
+    <div class="radius-small br-1px br-light w-3r pd-small">
       <input
         type="number"
         v-model.number="modelValue"
@@ -20,7 +20,7 @@
     </div>
     <button 
       @click="incrementQuantity" 
-      class="radius-small pd-small bg-light flex-center flex aspect-1x1 cursor-pointer hover-scale-1"
+      class="radius-small pd-small bg-light flex-center flex aspect-1x1 cursor-pointer hover:scale-[1.05]"
       :disabled="modelValue >= maxValue"
     >
       <span class="i-medium">+</span>

package/src/modules/products/components/elements/THC.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-if="product.attributes[1]" class="thc">
-    <p class="t-bold t-white">{{product.attributes[1].value}} %</p>
+    <p class="fw-bold t-white">{{product.attributes[1].value}} %</p>
     <p class="t-white h6">THC</p>
     <!-- Polygon bg -->
     <svg v-if="Number(product.attributes[1].value) >= 18" width="60" height="66" viewBox="0 0 60 66" fill="none" xmlns="http://www.w3.org/2000/svg">

package/src/modules/products/components/forms/ReorderSettingsForm.vue

@@ -23,7 +23,7 @@
     />
     
     <div class="mn-b-medium">
-      <p class="mn-b-small t-medium">Notification Options</p>
+      <p class="mn-b-small fw-medium">Notification Options</p>
       
       <div class="mn-b-small">
         <Checkbox 

package/src/modules/products/components/forms/StockAuditForm.vue

@@ -24,7 +24,7 @@
       </div>
       
       <div class="bg-light pd-medium radius-small">
-        <div class="flex-nowrap flex flex-v-center t-demi">
+        <div class="flex-nowrap flex flex-v-center fw-demi">
           <p class="mn-r-auto">Discrepancy</p>
           <p :class="discrepancy > 0 ? 't-green' : discrepancy < 0 ? 't-red' : ''">
             {{ discrepancy > 0 ? '+' : '' }}{{ discrepancy }}
@@ -34,7 +34,7 @@
     </div>
     
     <div class="mn-b-medium">
-      <p class="mn-b-small t-medium">Adjustment Reason</p>
+      <p class="mn-b-small fw-medium">Adjustment Reason</p>
       
       <div class="cols-3 gap-small mn-b-small">
         <div 

package/src/modules/products/components/forms/StockHistoryView.vue

@@ -54,7 +54,7 @@
             <td class="pd-small">{{ entry.comment || 'Not specified' }}</td>
             <td class="pd-small">
               <div class="flex-nowrap flex flex-v-center">
-                <div class="w-2r h-2r radius-100 bg-light o-hidden mn-r-nano">
+                <div class="w-2r h-2r radius-extra bg-light o-hidden mn-r-nano">
                   <img 
                     v-if="entry.creator?.target?.profile?.photo" 
                     :src="(FILE_SERVER_URL || '') + entry.creator.target.profile.photo" 

package/src/modules/products/components/pages/Categories.vue

@@ -15,7 +15,7 @@
             _id: $route.params._id
           }
         }"
-        class="uppercase t-medium pd-small radius-medium bg-white nav-link"
+        class="uppercase fw-medium pd-small radius-medium bg-white nav-link"
       >
         Add New
       </router-link>

package/src/modules/products/components/pages/CategoryEdit.vue

@@ -7,7 +7,7 @@
 
       <Button 
         :submit="onSubmit"
-        class="pd-small radius-medium bg-main t-black uppercase t-medium"
+        class="pd-small radius-medium bg-main t-black uppercase fw-medium"
       >
         Save Category 
       </Button>
@@ -80,7 +80,7 @@
     
 
       <!-- <div class="flex-v-center flex-nowrap flex">
-        <h4  class="mn-r-thin t-medium">Localization</h4>
+        <h4  class="mn-r-thin fw-medium">Localization</h4>
           
         <button 
           @click="() => categories.state.current.translations.push({locale: '', text: ''})" 

package/src/modules/products/components/pages/Product.vue

@@ -46,37 +46,37 @@
 
         <div v-if="product.included" class="mn-b-small flex-nowrap flex flex-v-center">
           <IconList class="mn-r-micro i-medium"/>
-          <p class="t-medium ">Included</p>
+          <p class="fw-medium ">Included</p>
         </div>
 
         <div v-if="product.included" class="cols-1 mn-b-medium w-100 ">
           <div
             class="w-100 pd-small radius-small flex flex-column gap-small bg-light"
           >
-            <p class="t-medium" style="white-space: pre-line;" v-html="product.included"></p>
+            <p class="fw-medium" style="white-space: pre-line;" v-html="product.included"></p>
           </div>
         </div>
 
 
         <div v-if="product.attributes && product.attributes.length > 0" class="mn-b-small flex-nowrap flex flex-v-center">
           <IconInfo class="mn-r-micro i-medium"/>
-          <p class="t-medium ">Product Details</p>
+          <p class="fw-medium ">Product Details</p>
         </div>
 
-        <div class="cols-2 mn-b-medium w-100 gap-small">
+        <div class="cols-2 mobile:cols-1 mn-b-medium w-100 gap-small">
           <div
             v-if="product.attributes && product.attributes.length > 0"
             v-for="attributes in product.attributes"
             class="w-100 pd-small radius-small bg-light product-attributes"
           >
-            <p class="mn-b-thin t-demi">{{ attributes.name }}</p>
+            <p class="mn-b-thin fw-demi">{{ attributes.name }}</p>
             <p>{{ attributes.value }}</p>
           </div>
         </div>
 
         <div class="mn-b-small flex-nowrap flex flex-v-center">
           <IconGroups class="mn-r-micro i-medium"/>
-          <p class="t-medium ">Provided by</p>
+          <p class="fw-medium ">Provided by</p>
         </div>
 
         <CardOrganization