@ozdao/martyrs 0.2.571 → 0.2.572

package/src/modules/governance/views/components/pages/Voting.vue

@@ -94,82 +94,82 @@ const handleVoteSubmit = (vote, comment) => {
 </script>
 
 <template>
-  <div v-if="!voting" class="min-h-100vh bg-light flex flex-center flex">
+  <div v-if="!voting" class="min-h-100vh flex flex-center flex">
     <div class="t-center">
-      <h2 class="h2 t-medium mn-b-thin">Voting not found</h2>
-      <router-link :to="{ name: 'Votings' }" class="t-main hover-t-main-semi">
+      <h2 class="h2 fw-medium mn-b-small">Voting not found</h2>
+      <router-link :to="{ name: 'Votings' }" class="t-main hover:t-main-semi">
         Back to votings
       </router-link>
     </div>
   </div>
 
-  <div v-else class="min-h-100vh bg-light">
-    <div class="w-max-50r mn-auto pd-medium pd-y-semi">
+  <div v-else class="min-h-100vh">
+    <div class="pd-medium pd-y-semi">
       <router-link
         :to="{ name: 'Votings' }"
-        class="flex flex-v-center t-grey hover-t-dark mn-b-semi transition-cubic-in-out"
+        class="flex flex-v-center t-grey hover:t-dark mn-b-semi ease-cubic-in-out"
         style="text-decoration: none; width: fit-content;"
       >
         <IconArrow class="i-medium mn-r-thin" :rotation="180" :fill="'currentColor'" />
         Back to votings
       </router-link>
 
-      <div class="bg-white radius-semi o-hidden mn-b-semi">
+      <div class="bg-light radius-semi o-hidden mn-b-semi">
         <div class="pd-semi">
-          <div class="flex flex-justify-between flex-v-start mn-b-semi">
+          <div class="flex flex-justify-between flex-align-start mn-b-semi">
             <div class="flex-child-1">
               <div class="flex flex-v-center gap-small mn-b-small">
-                <span :class="`pd-micro pd-x-small radius-regular p-micro t-medium ${typeInfo.color}`">
+                <span :class="`pd-micro pd-x-small radius-regular p-micro fw-medium ${typeInfo.color}`">
                   {{ typeInfo.label }}
                 </span>
                 <TaskStatusBadge :status="voting.status" />
               </div>
-              <h1 class="h1 t-medium mn-b-medium">{{ voting.title }}</h1>
+              <h1 class="h1 fw-medium mn-b-medium">{{ voting.title }}</h1>
               <p class="p-semi t-grey t-line-relaxed">{{ voting.description }}</p>
             </div>
           </div>
 
-          <div class="br-t br-1px br-light pd-t-semi mn-b-semi">
-            <div class="cols-2 gap-semi">
-              <div class="flex flex-v-start gap-small">
+          <div class="br-t-1px br-black-transp-10 pd-x-semi mn-b-semi">
+            <div class="cols-2 mobile:cols-1 gap-small">
+              <div class="flex flex-align-start gap-small">
                 <IconCalendar class="i-medium mn-t-micro" :fill="'rgb(var(--grey))'" />
                 <div>
                   <div class="p-small t-grey mn-b-micro">Created</div>
-                  <div class="p-regular t-medium">{{ formatDate(voting.createdAt) }}</div>
+                  <div class="p-regular fw-medium">{{ formatDate(voting.createdAt) }}</div>
                 </div>
               </div>
-              <div class="flex flex-v-start gap-small">
+              <div class="flex flex-align-start gap-small">
                 <IconCalendar class="i-medium mn-t-micro" :fill="'rgb(var(--grey))'" />
                 <div>
                   <div class="p-small t-grey mn-b-micro">Ends</div>
-                  <div class="p-regular t-medium">{{ formatDate(voting.endDate) }}</div>
+                  <div class="p-regular fw-medium">{{ formatDate(voting.endDate) }}</div>
                 </div>
               </div>
             </div>
           </div>
 
-          <div v-if="linkedEntity" class="br-t br-1px br-light pd-t-semi mn-b-semi">
-            <h3 class="p-small t-medium mn-b-small">Related Item</h3>
+          <div v-if="linkedEntity" class="br-t-1px br-black-transp-10 pd-x-semi mn-b-semi">
+            <h3 class="p-small fw-medium mn-b-small">Related Item</h3>
             <LinkedEntityCard :entityType="linkedEntity.type" :entityData="linkedEntity.data" />
           </div>
 
-          <div class="br-t br-1px br-light pd-t-semi">
+          <div class="br-t-1px br-black-transp-10 pd-x-semi">
             <VotingResults :results="results" :votes="voting.votes" />
           </div>
         </div>
       </div>
 
-      <div v-if="isActive && !hasVoted" class="bg-white radius-semi pd-semi">
+      <div v-if="isActive && !hasVoted" class="bg-light radius-semi pd-semi">
         <VoteForm @submit="handleVoteSubmit" />
       </div>
 
       <div v-if="hasVoted" class="bg-green-small br-1px br-green-nice radius-semi pd-semi t-center">
-        <div class="t-green-nice t-medium h5 mn-b-thin">Thank you for voting!</div>
+        <div class="t-green-nice fw-medium h5 mn-b-small">Thank you for voting!</div>
         <p class="t-green-nice">Your vote has been recorded.</p>
       </div>
 
-      <div v-if="!isActive" class="bg-light br-1px br-light radius-semi pd-semi t-center">
-        <div class="t-grey t-medium h5 mn-b-thin">Voting Closed</div>
+      <div v-if="!isActive" class="br-black-transp-10 br-1px radius-semi pd-semi t-center">
+        <div class="t-grey fw-medium h5 mn-b-small">Voting Closed</div>
         <p class="t-grey">This voting has ended.</p>
       </div>
     </div>

package/src/modules/governance/views/components/pages/Votings.vue

@@ -21,17 +21,17 @@ const filteredVotings = computed(() => {
 
 <template>
   <div>
-    <div v-if="!route.params.id" class="min-h-100vh bg-light">
-      <div class="w-max-66r mn-auto pd-medium pd-y-semi">
+    <div v-if="!route.params.id" class="min-h-100vh">
+      <div class="pd-medium pd-y-semi">
         <div class="mn-b-semi">
-          <h1 class="h1 t-medium mn-b-thin">Votings</h1>
+          <h1 class="h1 fw-medium mn-b-small">Votings</h1>
           <p class="p-regular t-grey">View and participate in all active votings</p>
         </div>
 
-        <div class="bg-white radius-medium pd-semi mn-b-semi">
+        <div class="bg-light radius-medium pd-semi mn-b-semi">
           <div class="cols-2 gap-regular mobile:cols-1">
             <div>
-              <label for="typeFilter" class="d-block p-small t-medium mn-b-thin">Type</label>
+              <label for="typeFilter" class="d-block p-small fw-medium mn-b-small">Type</label>
               <select
                 id="typeFilter"
                 v-model="typeFilter"
@@ -46,7 +46,7 @@ const filteredVotings = computed(() => {
             </div>
 
             <div>
-              <label for="statusFilter" class="d-block p-small t-medium mn-b-thin">Status</label>
+              <label for="statusFilter" class="d-block p-small fw-medium mn-b-small">Status</label>
               <select
                 id="statusFilter"
                 v-model="statusFilter"
@@ -81,7 +81,7 @@ const filteredVotings = computed(() => {
               Showing {{ filteredVotings.length }} of {{ votings.length }} votings
             </p>
           </div>
-          <div class="cols-3 gap-semi mobile:cols-1 tablet:cols-2">
+          <div class="cols-3 gap-small mobile:cols-1 tablet:cols-2">
             <CardVotingItem
               v-for="voting in filteredVotings"
               :key="voting._id || voting.id"

package/src/modules/governance/views/components/partials/EmptyState.vue

@@ -25,15 +25,15 @@ const handleAction = () => {
 
 <template>
   <div class="flex flex-column flex-align-center flex-justify-center pd-y-extra pd-x-medium">
-    <div class="bg-light radius-round pd-semi mn-b-medium">
+    <div class="br-black-transp-10 br-1px radius-extra pd-semi mn-b-medium">
       <slot name="icon"></slot>
     </div>
-    <h3 class="h3 t-medium mn-b-thin">{{ title }}</h3>
+    <h3 class="h3 fw-medium mn-b-small">{{ title }}</h3>
     <p class="p-regular t-grey t-center w-max-40r mn-b-semi">{{ message }}</p>
     <button
       v-if="actionText"
       @click="handleAction"
-      class="bg-main hover-bg-main-semi t-white pd-small pd-x-semi radius-medium t-medium transition-cubic-in-out cursor-pointer"
+      class="bg-main hover:bg-main-semi t-white pd-small pd-x-semi radius-medium fw-medium ease-cubic-in-out cursor-pointer"
     >
       {{ actionText }}
     </button>

package/src/modules/governance/views/components/partials/LinkedEntityCard.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { defineProps, computed } from 'vue';
 import TaskStatusBadge from './TaskStatusBadge.vue';
-import { IconOpenLink, IconCheck } from '@martyrs/src/modules/icons/icons.client.js';
+import { IconOpenLink } from '@martyrs/src/modules/icons/icons.client.js';
 
 const props = defineProps({
   entityType: {
@@ -41,33 +41,33 @@ const routePath = computed(() => config.value.path(props.entityData.id));
 <template>
   <router-link
     :to="routePath"
-    class="d-block bg-light radius-medium pd-medium br-1px br-light hover-br-main hover-bg-main-small transition-cubic-in-out"
+    class="d-block br-black-transp-10 br-1px radius-medium pd-medium hover:br-main hover:bg-main-small ease-cubic-in-out"
   >
-    <div class="flex flex-justify-between flex-v-start">
-      <div class="flex flex-v-start gap-small flex-child-1">
-        <div class="bg-white radius-medium pd-thin hover-bg-main-small transition-cubic-in-out">
-          <svg v-if="config.icon === 'target'" class="w-5r h-5r t-grey hover-t-main" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+    <div class="flex flex-justify-between flex-align-start">
+      <div class="flex flex-align-start gap-small flex-child-1">
+        <div class="br-black-transp-10 br-1px radius-medium pd-thin hover:bg-main-small ease-cubic-in-out">
+          <svg v-if="config.icon === 'target'" class="i-semi t-grey hover:t-main" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <circle cx="12" cy="12" r="10"/>
             <circle cx="12" cy="12" r="6"/>
             <circle cx="12" cy="12" r="2"/>
           </svg>
-          <svg v-else-if="config.icon === 'layers'" class="w-5r h-5r t-grey hover-t-main" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <svg v-else-if="config.icon === 'layers'" class="i-semi t-grey hover:t-main" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <polygon points="12 2 2 7 12 12 22 7 12 2"/>
             <polyline points="2 17 12 22 22 17"/>
             <polyline points="2 12 12 17 22 12"/>
           </svg>
-          <svg v-else class="w-5r h-5r t-grey hover-t-main" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <svg v-else class="i-semi t-grey hover:t-main" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <polyline points="9 11 12 14 22 4"/>
             <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
           </svg>
         </div>
         <div class="flex-child-1 min-w-0">
-          <div class="p-micro t-grey mn-b-micro">{{ config.label }}</div>
-          <h4 class="p-small t-medium mn-b-thin t-truncate">{{ displayName }}</h4>
+          <div class="p-micro t-grey mn-b-small">{{ config.label }}</div>
+          <h4 class="p-small fw-medium mn-b-small truncate">{{ displayName }}</h4>
           <TaskStatusBadge :status="entityData.status" />
         </div>
       </div>
-      <IconOpenLink class="i-small flex-shrink-0 mn-l-thin" :fill="'rgb(var(--grey))'" />
+      <IconOpenLink class="i-regular flex-shrink-0 mn-l-thin" :fill="'rgb(var(--grey))'" />
     </div>
   </router-link>
 </template>

package/src/modules/governance/views/components/partials/TaskStatusBadge.vue

@@ -9,15 +9,15 @@ const props = defineProps({
 });
 
 const statusConfig = {
-  proposed: { label: 'Proposed', color: 'bg-light' },
+  proposed: { label: 'Proposed', color: 'br-black-transp-10 br-1px' },
   voting: { label: 'Voting', color: 'bg-main-small t-main' },
   not_started: { label: 'Not Started', color: 'bg-fourth-small t-fourth' },
-  in_progress: { label: 'In Progress', color: 'bg-second-small t-second' },
+  in_progress: { label: 'In Progress', color: 'bg-second-small t-grey' },
   review: { label: 'Review', color: 'bg-fifth-small t-fifth' },
   completed: { label: 'Completed', color: 'bg-green-nice t-white' },
   blocked: { label: 'Blocked', color: 'bg-red-nice t-white' },
   cancelled: { label: 'Cancelled', color: 'bg-grey t-white' },
-  draft: { label: 'Draft', color: 'bg-light' },
+  draft: { label: 'Draft', color: 'br-black-transp-10 br-1px' },
   active: { label: 'Active', color: 'bg-green-nice t-white' },
   archived: { label: 'Archived', color: 'bg-grey t-white' },
   approved: { label: 'Approved', color: 'bg-green-nice t-white' },
@@ -29,7 +29,7 @@ const config = computed(() => statusConfig[props.status] || statusConfig.propose
 </script>
 
 <template>
-  <span :class="`pd-micro pd-x-small radius-regular p-micro t-medium ${config.color}`">
+  <span :class="`pd-thin radius-thin p-small fw-medium ${config.color}`">
     {{ config.label }}
   </span>
 </template>

package/src/modules/governance/views/components/partials/VoteForm.vue

@@ -17,23 +17,23 @@ const handleSubmit = (e) => {
 </script>
 
 <template>
-  <form @submit="handleSubmit" class="flex flex-column gap-semi">
+  <form @submit="handleSubmit" class="flex flex-column gap-small">
     <div>
-      <h4 class="p-small t-medium mn-b-small">Cast Your Vote</h4>
+      <h4 class="p-small fw-medium mn-b-small">Cast Your Vote</h4>
       <div class="cols-3 gap-regular">
         <button
           type="button"
           @click="selectedVote = 'yes'"
-          :class="`flex flex-column flex-align-center flex-justify-center pd-semi radius-medium br-2px transition-cubic-in-out ${
+          :class="`flex flex-column flex-align-center flex-justify-center pd-semi radius-medium br-2px ease-cubic-in-out ${
             selectedVote === 'yes'
               ? 'br-green-nice bg-green-small'
-              : 'br-light hover-br-green-nice'
+              : 'br-light hover:br-green-nice'
           }`"
         >
           <svg :class="`w-8r h-8r mn-b-thin ${selectedVote === 'yes' ? 'fill-green-nice' : 'fill-grey'}`" viewBox="0 0 24 24" fill="currentColor">
             <path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/>
           </svg>
-          <span :class="`t-medium ${selectedVote === 'yes' ? 't-green-nice' : 't-grey'}`">
+          <span :class="`fw-medium ${selectedVote === 'yes' ? 't-green-nice' : 't-grey'}`">
             Yes
           </span>
         </button>
@@ -41,16 +41,16 @@ const handleSubmit = (e) => {
         <button
           type="button"
           @click="selectedVote = 'no'"
-          :class="`flex flex-column flex-align-center flex-justify-center pd-semi radius-medium br-2px transition-cubic-in-out ${
+          :class="`flex flex-column flex-align-center flex-justify-center pd-semi radius-medium br-2px ease-cubic-in-out ${
             selectedVote === 'no'
               ? 'br-red-nice bg-red-small'
-              : 'br-light hover-br-red-nice'
+              : 'br-light hover:br-red-nice'
           }`"
         >
           <svg :class="`w-8r h-8r mn-b-thin ${selectedVote === 'no' ? 'fill-red-nice' : 'fill-grey'}`" viewBox="0 0 24 24" fill="currentColor">
             <path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"/>
           </svg>
-          <span :class="`t-medium ${selectedVote === 'no' ? 't-red-nice' : 't-grey'}`">
+          <span :class="`fw-medium ${selectedVote === 'no' ? 't-red-nice' : 't-grey'}`">
             No
           </span>
         </button>
@@ -58,16 +58,16 @@ const handleSubmit = (e) => {
         <button
           type="button"
           @click="selectedVote = 'abstain'"
-          :class="`flex flex-column flex-align-center flex-justify-center pd-semi radius-medium br-2px transition-cubic-in-out ${
+          :class="`flex flex-column flex-align-center flex-justify-center pd-semi radius-medium br-2px ease-cubic-in-out ${
             selectedVote === 'abstain'
-              ? 'br-grey bg-light'
-              : 'br-light hover-br-grey'
+              ? 'br-grey br-1px'
+              : 'br-light hover:br-grey'
           }`"
         >
           <svg :class="`w-8r h-8r mn-b-thin ${selectedVote === 'abstain' ? 'fill-grey' : 'fill-grey'}`" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <line x1="5" y1="12" x2="19" y2="12"/>
           </svg>
-          <span :class="`t-medium ${selectedVote === 'abstain' ? 't-grey' : 't-grey'}`">
+          <span :class="`fw-medium ${selectedVote === 'abstain' ? 't-grey' : 't-grey'}`">
             Abstain
           </span>
         </button>
@@ -75,7 +75,7 @@ const handleSubmit = (e) => {
     </div>
 
     <div>
-      <label for="comment" class="d-block p-small t-medium mn-b-thin">
+      <label for="comment" class="d-block p-small fw-medium mn-b-small">
         Comment (Optional)
       </label>
       <textarea
@@ -91,7 +91,7 @@ const handleSubmit = (e) => {
     <button
       type="submit"
       :disabled="!selectedVote"
-      class="w-100 bg-main hover-bg-main-semi t-white t-medium pd-small radius-medium transition-cubic-in-out"
+      class="w-100 bg-main hover:bg-main-semi t-white fw-medium pd-small radius-medium ease-cubic-in-out"
       :class="{ 'bg-grey cursor-not-allowed': !selectedVote }"
     >
       Submit Vote

package/src/modules/governance/views/components/partials/VotingResults.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { defineProps, computed } from 'vue';
-import { IconCheck, IconCross, IconSend } from '@martyrs/src/modules/icons/icons.client.js';
+import { IconCheckmark, IconCross, IconSend } from '@martyrs/src/modules/icons/icons.client.js';
 
 const props = defineProps({
   results: {
@@ -37,45 +37,45 @@ const getVoteColor = (vote) => {
 </script>
 
 <template>
-  <div class="flex flex-column gap-semi">
+  <div class="flex flex-column gap-small">
     <div>
       <div class="flex flex-justify-between flex-v-center mn-b-small">
-        <h3 class="h5 t-medium">Voting Results</h3>
+        <h3 class="h5 fw-medium">Voting Results</h3>
         <div :class="`flex flex-v-center gap-thin ${thresholdMet ? 't-green-nice' : 't-red-nice'}`">
-          <IconCheck v-if="thresholdMet" class="i-medium" :fill="'currentColor'" />
+          <IconCheckmark v-if="thresholdMet" class="i-medium" :fill="'currentColor'" />
           <IconCross v-else class="i-medium" :fill="'currentColor'" />
-          <span class="t-medium">{{ thresholdMet ? 'Threshold Met' : 'Threshold Not Met' }}</span>
+          <span class="fw-medium">{{ thresholdMet ? 'Threshold Met' : 'Threshold Not Met' }}</span>
         </div>
       </div>
 
-      <div class="bg-light radius-medium pd-medium mn-b-medium">
-        <div class="flex flex-justify-between flex-v-center mn-b-thin">
-          <span class="p-small t-medium t-grey">Total Votes</span>
-          <span class="h2 t-medium">{{ totalVotes }}</span>
+      <div class="br-black-transp-10 br-1px radius-medium pd-medium mn-b-medium">
+        <div class="flex flex-justify-between flex-v-center mn-b-small">
+          <span class="p-small fw-medium t-grey">Total Votes</span>
+          <span class="h2 fw-medium">{{ totalVotes }}</span>
         </div>
         <div class="p-small t-grey">
           Threshold: {{ (threshold * 100).toFixed(0) }}% approval required
         </div>
       </div>
 
-      <div class="w-100 h-8r bg-light radius-medium o-hidden flex">
+      <div class="w-100 h-8r br-black-transp-10 br-1px radius-medium o-hidden flex">
         <div
           v-if="percentageYes > 0"
-          class="bg-green-nice flex flex-center flex p-small t-white t-medium"
+          class="bg-green-nice flex flex-center flex p-small t-white fw-medium"
           :style="{ width: `${percentageYes}%` }"
         >
           <span v-if="percentageYes >= 15">{{ percentageYes.toFixed(0) }}%</span>
         </div>
         <div
           v-if="percentageNo > 0"
-          class="bg-red-nice flex flex-center flex p-small t-white t-medium"
+          class="bg-red-nice flex flex-center flex p-small t-white fw-medium"
           :style="{ width: `${percentageNo}%` }"
         >
           <span v-if="percentageNo >= 15">{{ percentageNo.toFixed(0) }}%</span>
         </div>
         <div
           v-if="percentageAbstain > 0"
-          class="bg-grey flex flex-center flex p-small t-white t-medium"
+          class="bg-grey flex flex-center flex p-small t-white fw-medium"
           :style="{ width: `${percentageAbstain}%` }"
         >
           <span v-if="percentageAbstain >= 15">{{ percentageAbstain.toFixed(0) }}%</span>
@@ -84,38 +84,38 @@ const getVoteColor = (vote) => {
 
       <div class="cols-3 gap-regular mn-t-medium">
         <div class="t-center">
-          <div class="h2 t-medium t-green-nice">{{ yesVotes }}</div>
+          <div class="h2 fw-medium t-green-nice">{{ yesVotes }}</div>
           <div class="p-small t-grey">Yes ({{ percentageYes.toFixed(1) }}%)</div>
         </div>
         <div class="t-center">
-          <div class="h2 t-medium t-red-nice">{{ noVotes }}</div>
+          <div class="h2 fw-medium t-red-nice">{{ noVotes }}</div>
           <div class="p-small t-grey">No ({{ percentageNo.toFixed(1) }}%)</div>
         </div>
         <div class="t-center">
-          <div class="h2 t-medium t-grey">{{ abstainVotes }}</div>
+          <div class="h2 fw-medium t-grey">{{ abstainVotes }}</div>
           <div class="p-small t-grey">Abstain ({{ percentageAbstain.toFixed(1) }}%)</div>
         </div>
       </div>
     </div>
 
     <div>
-      <h4 class="h5 t-medium mn-b-medium flex flex-v-center">
+      <h4 class="h5 fw-medium mn-b-medium flex flex-v-center">
         <IconSend class="i-medium mn-r-thin" :fill="'currentColor'" />
         All Votes ({{ votes.length }})
       </h4>
       <div class="flex flex-column gap-small">
-        <div v-for="(vote, index) in votes" :key="index" class="bg-light radius-medium pd-medium">
-          <div class="flex flex-justify-between flex-v-start mn-b-thin">
+        <div v-for="(vote, index) in votes" :key="index" class="br-black-transp-10 br-1px radius-medium pd-medium">
+          <div class="flex flex-justify-between flex-align-start mn-b-small">
             <div class="flex flex-v-center gap-small">
-              <div class="i-big radius-extra bg-grey flex flex-center flex t-medium">
+              <div class="i-big radius-extra bg-grey flex flex-center flex fw-medium">
                 {{ vote.userName.charAt(0) }}
               </div>
               <div>
-                <div class="p-regular t-medium">{{ vote.userName }}</div>
+                <div class="p-regular fw-medium">{{ vote.userName }}</div>
                 <div class="p-micro t-grey">{{ formatDate(vote.createdAt) }}</div>
               </div>
             </div>
-            <span :class="`t-medium t-capitalize ${getVoteColor(vote.vote)}`">
+            <span :class="`fw-medium t-capitalize ${getVoteColor(vote.vote)}`">
               {{ vote.vote }}
             </span>
           </div>

package/src/modules/icons/components/IconSearchPopup.vue

@@ -39,13 +39,13 @@
         }"
         :options="{ limit: 50 }"
         v-slot="{ items }"
-        class="cols-4 gap-small icon-grid"
+        class="cols-4 mobile:cols-2 gap-small icon-grid"
       >
         <div 
           v-for="icon in items" 
           :key="icon.id"
           @click="selectIcon(icon)"
-          class="icon-item aspect-1x1  radius-medium flex-center flex-v-center flex-column cursor-pointer hover-scale-1 pd-small"
+          class="icon-item aspect-1x1  radius-medium flex-center flex-v-center flex-column cursor-pointer hover:scale-[1.05] pd-small"
         >
           <div class="icon-preview w-3r h-3r mn-b-thin flex-center flex-v-center">
             <div 
@@ -53,7 +53,7 @@
               v-html="getIconSvg(icon)"
             ></div>
           </div>
-          <div class="t-small t-truncate w-100 t-center">{{ icon.term }}</div>
+          <div class="t-small truncate w-100 t-center">{{ icon.term }}</div>
         </div>
       </Feed>
 

package/src/modules/icons/entities/IconCash.vue

@@ -0,0 +1,23 @@
+<template>
+<svg width="100pt" height="100pt" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+<g :fill="fill">
+<path :fill="fill" d="m91.926 23.203v42.777h-72.465v-42.777h72.465m3.125-3.125h-78.715v49.027h78.715z"/>
+<path :fill="fill" d="m86.812 26.766h-9.7812v3.125h9.7812z"/>
+<path :fill="fill" d="m34.223 26.766h-9.7812v3.125h9.7812z"/>
+<path :fill="fill" d="m86.812 59.422h-9.7812v3.125h9.7812z"/>
+<path :fill="fill" d="m34.223 59.422h-9.7812v3.125h9.7812z"/>
+<path :fill="fill" d="m55.66 37.812c3.7305 0 6.7656 3.0352 6.7656 6.7656s-3.0352 6.7656-6.7656 6.7656c-3.7305 0-6.7656-3.0352-6.7656-6.7656s3.0352-6.7656 6.7656-6.7656m0-3.125c-5.4609 0-9.8906 4.4297-9.8906 9.8906s4.4297 9.8906 9.8906 9.8906c5.4609 0 9.8906-4.4297 9.8906-9.8906s-4.4297-9.8906-9.8906-9.8906z"/>
+<path :fill="fill" d="m13.008 72.629v-46.105h-3.125v49.23h78.531v-3.125z"/>
+<path :fill="fill" d="m6.375 79.16v-46.105h-3.125v49.23h78.531v-3.125z"/>
+</g>
+</svg>
+</template>
+
+<script setup>
+	const props = defineProps({
+	  fill: {
+	    type: String,
+	    default: 'rgb(var(--black))'
+	  }
+	})
+</script>

package/src/modules/icons/navigation/IconSort.vue

@@ -1,9 +1,9 @@
 <template>
   <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
-    <rect y="0" :width="order === 'desc' ? 32 : 8" height="5" rx="2.5" :fill="fill"  class="transition-linear"/>
-    <rect y="9" :width="order === 'desc' ? 24 : 16" height="5" rx="2.5" :fill="fill"  class="transition-linear"/>
-    <rect y="18" :width="order === 'desc' ? 16 : 24" height="5" rx="2.5" :fill="fill"  class="transition-linear"/>
-    <rect y="27" :width="order === 'desc' ? 8 : 32" height="5" rx="2.5" :fill="fill"  class="transition-linear"/>
+    <rect y="0" :width="order === 'desc' ? 32 : 8" height="5" rx="2.5" :fill="fill"  class="ease-linear"/>
+    <rect y="9" :width="order === 'desc' ? 24 : 16" height="5" rx="2.5" :fill="fill"  class="ease-linear"/>
+    <rect y="18" :width="order === 'desc' ? 16 : 24" height="5" rx="2.5" :fill="fill"  class="ease-linear"/>
+    <rect y="27" :width="order === 'desc' ? 8 : 32" height="5" rx="2.5" :fill="fill"  class="ease-linear"/>
   </svg>
 </template>
 

package/src/modules/icons/pages/IconsPage.vue

@@ -1,25 +1,25 @@
 <template>
   <div class="pd-medium">
-    <div class="flex-between mn-b-medium">
+    <div class="flex-justify-between mn-b-medium">
       <h2>Martyrs Icons Gallery</h2>
-      <button @click="openAddIconPopup" class="pd-small pd-medium bg-second t-white radius-medium hover-scale-1 cursor-pointer border-none">
+      <button @click="openAddIconPopup" class="pd-small pd-medium bg-second t-white radius-medium hover:scale-[1.05] cursor-pointer border-none">
         Add New Icon
       </button>
     </div>
     
     <div v-for="(category, index) in categories" :key="index" class="mn-b-large">
-      <h3 class="mn-b-medium t-medium">{{ formatCategoryName(category.name) }} ({{ category.icons.length }})</h3>
+      <h3 class="mn-b-medium fw-medium">{{ formatCategoryName(category.name) }} ({{ category.icons.length }})</h3>
       <div class="cols-6 gap-thin">
         <div 
           v-for="(icon, iconIndex) in category.icons" 
           :key="iconIndex" 
-          class="icon-card aspect-1x1 bg-light radius-medium flex-center flex-v-center flex-column flex hover-scale-1 cursor-pointer pos-relative"
+          class="icon-card aspect-1x1 bg-light radius-medium flex-center flex-v-center flex-column flex hover:scale-[1.05] cursor-pointer pos-relative"
           @click="copyIconName(icon.name, category.name)"
         >
           <div class="flex-center flex h-60">
             <component :is="icon.component" class="w-2r h-2r" />
           </div>
-          <div class="pd-t-thin pd-b-thin t-center t-small t-truncate">
+          <div class="pd-t-thin pd-b-thin t-center t-small truncate">
             {{ icon.name }}
           </div>
           <div v-if="copiedIcon === icon.name" class="pd-thin bg-black radius-small t-small t-white pos-absolute pos-t-0 pos-r-0 mn-t-thin mn-r-thin">
@@ -27,7 +27,7 @@
           </div>
           <button 
             @click.stop="openReplaceIconPopup(icon, category.name)"
-            class="replace-btn pos-absolute pos-t-0 pos-r-0 mn-t-thin mn-r-thin pd-micro bg-second radius-small hover-scale-1 cursor-pointer border-none"
+            class="replace-btn pos-absolute pos-t-0 pos-r-0 mn-t-thin mn-r-thin pd-micro bg-second radius-small hover:scale-[1.05] cursor-pointer border-none"
             title="Replace icon"
           >
             <IconRefresh class="w-1r h-1r" :fill="'rgb(var(--white))'" />
@@ -364,7 +364,7 @@ function handleIconSelected(data) {
   opacity: 1;
 }
 
-.flex-between {
+.flex-justify-between {
   display: flex;
   justify-content: space-between;
   align-items: center;

package/src/modules/inventory/components/forms/AdjustmentForm.vue

@@ -28,7 +28,7 @@
 
     <!-- Variant Selection -->
     <div class="mn-b-medium" v-if="productVariants.length > 0">
-      <p class="mn-b-small t-medium">Select Variant</p>
+      <p class="mn-b-small fw-medium">Select Variant</p>
       <Select
         v-model:select="selectedVariant"
         :options="productVariants"
@@ -41,7 +41,7 @@
 
     <!-- Storage Selection -->
     <div class="mn-b-medium">
-      <p class="mn-b-small t-medium">Select Storage</p>
+      <p class="mn-b-small fw-medium">Select Storage</p>
       <Select
         v-model:select="selectedStorage"
         :options="storageOptions"
@@ -53,7 +53,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/inventory/components/forms/HistoryView.vue

@@ -54,7 +54,7 @@
             <td class="pd-small">{{ entry.reason || 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/inventory/components/forms/StockAlertsForm.vue

@@ -6,7 +6,7 @@
     
     <!-- Variant Selection -->
     <div class="mn-b-medium">
-      <p class="mn-b-small t-medium">Alert Scope</p>
+      <p class="mn-b-small fw-medium">Alert Scope</p>
       <Select
         v-model:select="selectedVariant"
         :options="variantOptions"