@ozdao/martyrs 0.2.570 → 0.2.572

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

@@ -4,7 +4,7 @@ import { useRoute } from 'vue-router';
 import CardMilestoneItem from '../blocks/CardMilestoneItem.vue';
 import EmptyState from '../partials/EmptyState.vue';
 import { mockInitiatives, mockMilestones } from '../../../data/mockData';
-import { IconArrow, IconCalendar, IconTime, IconEntityInfo, IconCheck } from '@martyrs/src/modules/icons/icons.client.js';
+import { IconArrow, IconCalendar, IconTime, IconEntityInfo, IconCheckmark } from '@martyrs/src/modules/icons/icons.client.js';
 
 const route = useRoute();
 
@@ -31,66 +31,66 @@ const formatDate = (dateString) => {
 </script>
 
 <template>
-  <div v-if="!initiative" class="min-h-100vh bg-light flex flex-center flex">
+  <div v-if="!initiative" class="min-h-100vh flex flex-center flex">
     <div class="t-center">
-      <h2 class="h2 t-medium mn-b-thin">Initiative not found</h2>
-      <router-link :to="{ name: 'Initiatives' }" class="t-main hover-t-main-semi">
+      <h2 class="h2 fw-medium mn-b-small">Initiative not found</h2>
+      <router-link :to="{ name: 'Initiatives' }" class="t-main hover:t-main-semi">
         Back to initiatives
       </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: 'Initiative', params: { id: route.params.id } }"
-        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 initiative
       </router-link>
 
-      <div class="bg-white radius-semi o-hidden pd-semi mn-b-semi">
-        <div class="flex flex-justify-between flex-v-start mn-b-semi">
+      <div class="bg-light radius-semi o-hidden pd-semi mn-b-semi">
+        <div class="flex flex-justify-between flex-align-start mn-b-semi">
           <div class="flex-child-1">
-            <h1 class="h1 t-medium mn-b-thin">{{ initiative.title }}</h1>
+            <h1 class="h1 fw-medium mn-b-small">{{ initiative.title }}</h1>
             <p class="p-semi t-grey mn-b-medium">{{ initiative.description }}</p>
-            <div class="flex flex-v-center gap-semi p-small">
+            <div class="flex flex-v-center gap-small p-small">
               <div v-if="initiative.date" class="flex flex-v-center gap-thin t-grey">
-                <IconCalendar class="i-small" :fill="'currentColor'" />
+                <IconCalendar class="i-regular" :fill="'currentColor'" />
                 <span>Started {{ formatDate(initiative.date) }}</span>
               </div>
               <div v-if="initiative.targetReleaseDate" class="flex flex-v-center gap-thin t-grey">
-                <IconCalendar class="i-small" :fill="'currentColor'" />
+                <IconCalendar class="i-regular" :fill="'currentColor'" />
                 <span>Target {{ formatDate(initiative.targetReleaseDate) }}</span>
               </div>
             </div>
           </div>
         </div>
 
-        <div class="br-t br-1px br-light pd-t-semi">
+        <div class="br-t-1px br-black-transp-10 pd-x-semi">
           <div class="flex flex-justify-between flex-v-center mn-b-small">
-            <span class="p-small t-medium t-grey">Overall Progress</span>
-            <span class="h2 t-medium">{{ overallProgress }}%</span>
+            <span class="p-small fw-medium t-grey">Overall Progress</span>
+            <span class="h2 fw-medium">{{ overallProgress }}%</span>
           </div>
-          <div class="w-100 bg-light radius-round h-3r o-hidden mn-b-medium">
+          <div class="w-100 bg-white radius-extra h-3r o-hidden mn-b-medium">
             <div
-              class="bg-main h-100 transition-cubic-in-out"
+              class="bg-main h-100 ease-cubic-in-out"
               :style="{ width: `${overallProgress}%` }"
             />
           </div>
-          <div class="flex flex-v-center gap-semi p-small">
+          <div class="flex flex-v-center gap-small p-small">
             <div class="flex flex-v-center gap-thin">
-              <div class="w-3r h-3r bg-green-nice radius-round" />
+              <div class="w-3r h-3r bg-green-nice radius-extra" />
               <span class="t-grey">{{ completedMilestones.length }} Completed</span>
             </div>
             <div class="flex flex-v-center gap-thin">
-              <div class="w-3r h-3r bg-main radius-round" />
+              <div class="w-3r h-3r bg-main radius-extra" />
               <span class="t-grey">{{ inProgressMilestones.length }} In Progress</span>
             </div>
             <div class="flex flex-v-center gap-thin">
-              <div class="w-3r h-3r bg-grey radius-round" />
+              <div class="w-3r h-3r bg-grey radius-extra" />
               <span class="t-grey">{{ notStartedMilestones.length }} Not Started</span>
             </div>
           </div>
@@ -98,7 +98,7 @@ const formatDate = (dateString) => {
       </div>
 
       <div class="mn-b-semi">
-        <h2 class="h2 t-medium">Milestones Roadmap</h2>
+        <h2 class="h2 fw-medium">Milestones Roadmap</h2>
         <p class="p-regular t-grey mn-t-micro">Track progress across all milestones</p>
       </div>
 
@@ -108,14 +108,14 @@ const formatDate = (dateString) => {
         message="Create milestones to start tracking progress on this initiative."
       />
 
-      <div v-else class="flex flex-column gap-semi">
+      <div v-else class="flex flex-column gap-small">
         <div v-if="inProgressMilestones.length > 0">
           <div class="flex flex-v-center gap-thin mn-b-medium">
             <IconTime class="i-medium" :fill="'rgb(var(--main))'" />
-            <h3 class="p-semi t-medium">In Progress</h3>
+            <h3 class="p-semi fw-medium">In Progress</h3>
             <span class="p-small t-grey">({{ inProgressMilestones.length }})</span>
           </div>
-          <div class="cols-3 gap-semi">
+          <div class="cols-3 gap-small">
             <CardMilestoneItem
               v-for="milestone in inProgressMilestones"
               :key="milestone.id"
@@ -127,10 +127,10 @@ const formatDate = (dateString) => {
         <div v-if="notStartedMilestones.length > 0">
           <div class="flex flex-v-center gap-thin mn-b-medium">
             <IconEntityInfo class="i-medium" :fill="'rgb(var(--grey))'" />
-            <h3 class="p-semi t-medium">Not Started</h3>
+            <h3 class="p-semi fw-medium">Not Started</h3>
             <span class="p-small t-grey">({{ notStartedMilestones.length }})</span>
           </div>
-          <div class="cols-3 gap-semi">
+          <div class="cols-3 gap-small">
             <CardMilestoneItem
               v-for="milestone in notStartedMilestones"
               :key="milestone.id"
@@ -141,11 +141,11 @@ const formatDate = (dateString) => {
 
         <div v-if="completedMilestones.length > 0">
           <div class="flex flex-v-center gap-thin mn-b-medium">
-            <IconCheck class="i-medium" :fill="'rgb(var(--green-nice))'" />
-            <h3 class="p-semi t-medium">Completed</h3>
+            <IconCheckmark class="i-medium" :fill="'rgb(var(--green-nice))'" />
+            <h3 class="p-semi fw-medium">Completed</h3>
             <span class="p-small t-grey">({{ completedMilestones.length }})</span>
           </div>
-          <div class="cols-3 gap-semi">
+          <div class="cols-3 gap-small">
             <CardMilestoneItem
               v-for="milestone in completedMilestones"
               :key="milestone.id"

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

@@ -47,16 +47,15 @@ const hasActiveFilters = computed(() =>
 </script>
 
 <template>
-  <div class="min-h-100vh bg-light">
-    <div class="w-max-66r mn-auto pd-medium pd-y-semi">
+  <div class="pd-medium mobile:pd-thin">
       <div class="flex flex-justify-between flex-v-center mn-b-semi">
         <div>
-          <h1 class="h1 t-medium">Initiatives</h1>
-          <p class="p-regular t-grey mn-t-thin">Manage and track all your initiatives</p>
+          <h1 class="h1 fw-medium">Initiatives</h1>
+          <p class="p-small t-transp mn-t-thin">Manage and track all your initiatives</p>
         </div>
         <router-link
           :to="{ name: 'Create Initiative' }"
-          class="bg-main hover-bg-main-semi t-white t-medium pd-small pd-x-semi radius-medium flex flex-v-center gap-thin transition-cubic-in-out cursor-pointer"
+          class="bg-main hover:bg-main-semi t-white fw-medium pd-small pd-x-semi radius-medium flex flex-v-center gap-thin ease-cubic-in-out cursor-pointer"
           style="text-decoration: none;"
         >
           <IconPlus class="i-medium" :fill="'currentColor'" />
@@ -64,7 +63,7 @@ const hasActiveFilters = computed(() =>
         </router-link>
       </div>
 
-      <div class="bg-white radius-medium pd-medium mn-b-semi">
+      <div class="bg-light radius-medium pd-medium mn-b-semi">
         <div class="flex flex-column gap-regular mobile:flex-row">
           <div class="flex-child-1 pos-relative">
             <IconSearch class="i-medium pos-absolute pos-l-small pos-t-regular" :fill="'rgb(var(--grey))'" />
@@ -72,30 +71,30 @@ const hasActiveFilters = computed(() =>
               v-model="searchQuery"
               type="text"
               placeholder="Search initiatives by name, description..."
-              class="w-100 pd-small pd-l-extra br-1px br-light radius-medium"
+              class="w-100 pd-small pd-l-extra radius-medium bg-white"
               style="outline: none;"
             />
           </div>
 
           <button
             @click="showFilters = !showFilters"
-            class="flex flex-v-center gap-thin pd-medium br-1px br-light radius-medium hover-bg-light transition-cubic-in-out cursor-pointer bg-white"
+            class="flex flex-v-center gap-thin pd-small radius-medium hover:bg-white ease-cubic-in-out cursor-pointer bg-white"
           >
             <IconFilter class="i-medium" :fill="'currentColor'" />
             Filters
-            <span v-if="hasActiveFilters" class="pd-micro pd-x-thin bg-main-small t-main radius-regular p-micro t-medium">
+            <span v-if="hasActiveFilters" class="pd-thin radius-thin bg-main-small t-main p-small fw-medium">
               Active
             </span>
           </button>
         </div>
 
-        <div v-if="showFilters" class="mn-t-medium pd-t-medium br-t br-1px br-light">
+        <div v-if="showFilters" class="mn-t-medium pd-x-medium br-t-1px br-black-transp-10">
           <div class="cols-3 gap-regular mobile:cols-1">
             <div>
-              <label class="d-block p-small t-medium mn-b-thin">Status</label>
+              <label class="d-block p-small fw-medium mn-b-small">Status</label>
               <select
                 v-model="statusFilter"
-                class="w-100 pd-small br-1px br-light radius-medium"
+                class="w-100 pd-small radius-medium bg-white"
                 style="outline: none;"
               >
                 <option value="all">All Statuses</option>
@@ -108,10 +107,10 @@ const hasActiveFilters = computed(() =>
             </div>
 
             <div>
-              <label class="d-block p-small t-medium mn-b-thin">Risk Level</label>
+              <label class="d-block p-small fw-medium mn-b-small">Risk Level</label>
               <select
                 v-model="riskFilter"
-                class="w-100 pd-small br-1px br-light radius-medium"
+                class="w-100 pd-small radius-medium bg-white"
                 style="outline: none;"
               >
                 <option value="all">All Risks</option>
@@ -124,7 +123,7 @@ const hasActiveFilters = computed(() =>
             <div class="flex flex-align-end">
               <button
                 @click="clearFilters"
-                class="w-100 pd-small br-1px br-light radius-medium hover-bg-light transition-cubic-in-out cursor-pointer bg-white"
+                class="w-100 pd-small radius-medium hover:bg-light ease-cubic-in-out cursor-pointer bg-white"
               >
                 Clear All Filters
               </button>
@@ -133,11 +132,11 @@ const hasActiveFilters = computed(() =>
         </div>
       </div>
 
-      <div v-if="filteredInitiatives.length === 0 && initiatives.length > 0" class="bg-white radius-medium pd-extra t-center">
-        <p class="p-semi t-grey mn-b-thin">No initiatives match your filters</p>
+      <div v-if="filteredInitiatives.length === 0 && initiatives.length > 0" class="br-black-transp-10 br-1px radius-medium pd-semi t-center">
+        <p class="p-small t-transp mn-b-small">No initiatives match your filters</p>
         <button
           @click="clearFilters"
-          class="t-main hover-t-main-semi t-medium cursor-pointer bg-transparent border-none"
+          class="t-main hover:t-main-semi fw-medium cursor-pointer bg-transparent border-none"
         >
           Clear filters
         </button>
@@ -151,7 +150,7 @@ const hasActiveFilters = computed(() =>
           @action="$router.push({ name: 'Create Initiative' })"
         >
           <template #icon>
-            <svg class="w-12r h-12r t-grey" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <svg class="i-big t-transp" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <circle cx="12" cy="12" r="10"/>
               <path d="M8 14s1.5 2 4 2 4-2 4-2"/>
               <line x1="9" y1="9" x2="9.01" y2="9"/>
@@ -162,10 +161,10 @@ const hasActiveFilters = computed(() =>
       </div>
 
       <div v-else>
-        <div class="mn-b-medium p-small t-grey">
+        <div class="mn-b-medium p-small t-transp">
           Showing {{ filteredInitiatives.length }} of {{ initiatives.length }} initiatives
         </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">
           <CardInitiativeItem
             v-for="initiative in filteredInitiatives"
             :key="initiative._id || initiative.id"
@@ -173,6 +172,5 @@ const hasActiveFilters = computed(() =>
           />
         </div>
       </div>
-    </div>
   </div>
 </template>

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

@@ -41,60 +41,60 @@ const handleProposeTask = (data) => {
 </script>
 
 <template>
-  <div v-if="!milestone" class="min-h-100vh bg-light flex flex-center flex">
+  <div v-if="!milestone" class="min-h-100vh flex flex-center flex">
     <div class="t-center">
-      <h2 class="h2 t-medium mn-b-thin">Milestone not found</h2>
-      <router-link :to="{ name: 'Initiatives' }" class="t-main hover-t-main-semi">
+      <h2 class="h2 fw-medium mn-b-small">Milestone not found</h2>
+      <router-link :to="{ name: 'Initiatives' }" class="t-main hover:t-main-semi">
         Back to initiatives
       </router-link>
     </div>
   </div>
 
-  <div v-else class="min-h-100vh bg-light">
-    <div class="w-max-80r 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: 'Initiative', params: { id: milestone.initiativeId } }"
-        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 initiative
       </router-link>
 
-      <div class="bg-white radius-semi o-hidden pd-semi mn-b-semi">
-        <div class="flex flex-justify-between flex-v-start mn-b-semi">
+      <div class="bg-light radius-semi o-hidden pd-semi 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">
               <TaskStatusBadge :status="milestone.status" />
               <div class="flex flex-v-center p-small t-grey">
-                <IconCalendar class="i-small mn-r-micro" :fill="'currentColor'" />
+                <IconCalendar class="i-regular mn-r-micro" :fill="'currentColor'" />
                 {{ formatDate(milestone.startDate) }} - {{ formatDate(milestone.dueDate) }}
               </div>
             </div>
-            <h1 class="h1 t-medium mn-b-small">{{ milestone.name }}</h1>
+            <h1 class="h1 fw-medium mn-b-small">{{ milestone.name }}</h1>
             <p class="p-semi t-grey">{{ milestone.description }}</p>
           </div>
           <button
             @click="showTaskForm = true"
-            class="bg-main hover-bg-main-semi t-white t-medium pd-small pd-x-medium radius-medium flex flex-v-center gap-thin transition-cubic-in-out mn-l-medium"
+            class="bg-main hover:bg-main-semi t-white fw-medium pd-small pd-x-medium radius-medium flex flex-v-center gap-thin ease-cubic-in-out mn-l-medium"
           >
             <IconPlus class="i-medium" :fill="'currentColor'" />
             Propose Task
           </button>
         </div>
 
-        <div class="br-t br-1px br-light pd-t-semi">
+        <div class="br-t-1px br-black-transp-10 pd-x-semi">
           <div class="flex flex-justify-between flex-v-center mn-b-small">
-            <span class="p-small t-medium t-grey">Progress</span>
-            <span class="h2 t-medium">{{ milestone.progress }}%</span>
+            <span class="p-small fw-medium t-grey">Progress</span>
+            <span class="h2 fw-medium">{{ milestone.progress }}%</span>
           </div>
-          <div class="w-100 bg-light radius-round h-3r o-hidden">
+          <div class="w-100 bg-white radius-extra h-3r o-hidden">
             <div
-              class="bg-main h-100 transition-cubic-in-out"
+              class="bg-main h-100 ease-cubic-in-out"
               :style="{ width: `${milestone.progress}%` }"
             />
           </div>
-          <div class="mn-t-medium flex flex-v-center gap-semi p-small t-grey">
+          <div class="mn-t-medium flex flex-v-center gap-small p-small t-grey">
             <div class="flex flex-v-center gap-thin">
               <img
                 :src="milestone.owner.avatar"
@@ -103,7 +103,7 @@ const handleProposeTask = (data) => {
               />
               <div>
                 <div class="p-micro t-grey">Owner</div>
-                <div class="t-medium">{{ milestone.owner.name }}</div>
+                <div class="fw-medium">{{ milestone.owner.name }}</div>
               </div>
             </div>
             <div v-if="milestone.contributors.length > 0">
@@ -125,7 +125,7 @@ const handleProposeTask = (data) => {
       </div>
 
       <div class="mn-b-semi">
-        <h2 class="h2 t-medium">Tasks</h2>
+        <h2 class="h2 fw-medium">Tasks</h2>
       </div>
 
       <EmptyState
@@ -137,10 +137,10 @@ const handleProposeTask = (data) => {
       />
 
       <div v-else class="cols-6 gap-regular">
-        <div v-for="column in columns" :key="column.id" class="bg-light radius-medium pd-medium">
+        <div v-for="column in columns" :key="column.id" class="br-black-transp-10 br-1px radius-medium pd-medium">
           <div class="flex flex-justify-between flex-v-center mn-b-medium">
-            <h3 class="t-medium">{{ column.title }}</h3>
-            <span class="bg-white t-grey p-micro t-medium pd-micro pd-x-thin radius-round">
+            <h3 class="fw-medium">{{ column.title }}</h3>
+            <span class="bg-light t-grey p-micro fw-medium pd-micro pd-x-thin radius-extra">
               {{ getTasksForColumn(column.status).length }}
             </span>
           </div>
@@ -155,10 +155,10 @@ const handleProposeTask = (data) => {
       </div>
 
       <div v-if="showTaskForm" class="fixed inset-0 bg-dark-overlay flex flex-center flex z-50" @click.self="showTaskForm = false">
-        <div class="bg-white radius-medium pd-semi w-max-30r">
+        <div class="bg-light radius-medium pd-semi w-max-30r">
           <div class="flex flex-justify-between flex-v-center mn-b-medium">
-            <h3 class="h3 t-medium">Propose Task</h3>
-            <button @click="showTaskForm = false" class="t-grey hover-t-dark transition-cubic-in-out">
+            <h3 class="h3 fw-medium">Propose Task</h3>
+            <button @click="showTaskForm = false" class="t-grey hover:t-dark ease-cubic-in-out">
               <IconCross class="i-medium" :fill="'currentColor'" />
             </button>
           </div>