@ozdao/martyrs 0.2.571 → 0.2.574

package/src/modules/governance/views/components/pages/Roadmap.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();
 const activeTab = ref('milestones');
@@ -32,62 +32,62 @@ 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-b br-1px br-light mn-b-semi">
-          <div class="flex gap-semi">
+        <div class="br-b-1px br-black-transp-10 mn-b-semi">
+          <div class="flex gap-small">
             <button
               @click="activeTab = 'milestones'"
-              :class="`pd-b-medium pd-x-thin br-b-2px t-medium transition-cubic-in-out ${
+              :class="`pd-b-medium pd-x-thin br-b-2px fw-medium ease-cubic-in-out ${
                 activeTab === 'milestones'
                   ? 'br-main t-main'
-                  : 'br-transparent t-grey hover-t-dark'
+                  : 'br-transparent t-grey hover:t-dark'
               }`"
             >
               Milestones
             </button>
             <button
               @click="activeTab = 'releases'"
-              :class="`pd-b-medium pd-x-thin br-b-2px t-medium transition-cubic-in-out ${
+              :class="`pd-b-medium pd-x-thin br-b-2px fw-medium ease-cubic-in-out ${
                 activeTab === 'releases'
                   ? 'br-main t-main'
-                  : 'br-transparent t-grey hover-t-dark'
+                  : 'br-transparent t-grey hover:t-dark'
               }`"
             >
               Releases
@@ -95,28 +95,28 @@ const formatDate = (dateString) => {
           </div>
         </div>
 
-        <div v-if="activeTab === 'milestones'" class="br-t br-1px br-light pd-t-semi">
+        <div v-if="activeTab === 'milestones'" 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>
@@ -125,7 +125,7 @@ const formatDate = (dateString) => {
 
       <template v-if="activeTab === 'milestones'">
         <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>
 
@@ -135,14 +135,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"
@@ -154,10 +154,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"
@@ -168,11 +168,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"
@@ -185,7 +185,7 @@ const formatDate = (dateString) => {
 
       <template v-else>
         <div class="mn-b-semi">
-          <h2 class="h2 t-medium">Release History</h2>
+          <h2 class="h2 fw-medium">Release History</h2>
           <p class="p-regular t-grey mn-t-micro">All releases for this product</p>
         </div>
 
@@ -199,33 +199,33 @@ const formatDate = (dateString) => {
           <div
             v-for="(release, index) in initiative.releases"
             :key="index"
-            class="bg-white radius-medium o-hidden pd-semi hover-scale-1 transition-cubic-in-out"
+            class="br-black-transp-10 br-1px radius-medium o-hidden pd-semi hover:scale-[1.05] ease-cubic-in-out"
           >
-            <div class="flex flex-justify-between flex-v-start mn-b-medium">
+            <div class="flex flex-justify-between flex-align-start mn-b-medium">
               <div class="flex-child-1">
-                <div class="flex flex-v-center gap-small mn-b-thin">
-                  <h3 class="h3 t-medium">{{ release.version }}</h3>
+                <div class="flex flex-v-center gap-small mn-b-small">
+                  <h3 class="h3 fw-medium">{{ release.version }}</h3>
                   <span
-                    :class="`pd-micro pd-x-small radius-round p-small t-medium ${
+                    :class="`pd-micro pd-x-small radius-extra p-small fw-medium ${
                       release.status === 'released'
                         ? 'bg-green-small t-green-nice'
                         : release.status === 'in_progress'
                         ? 'bg-main-small t-main'
-                        : 'bg-light t-grey'
+                        : 'br-black-transp-10 br-1px t-grey'
                     }`"
                   >
                     {{ release.status }}
                   </span>
                 </div>
                 <div class="flex flex-v-center gap-thin p-small t-grey mn-b-small">
-                  <IconCalendar class="i-small" :fill="'currentColor'" />
+                  <IconCalendar class="i-regular" :fill="'currentColor'" />
                   <span>{{ formatDate(release.date) }}</span>
                 </div>
               </div>
             </div>
             <p class="p-regular t-grey t-line-relaxed">{{ release.notes }}</p>
-            <div v-if="release.migrations && release.migrations.length > 0" class="mn-t-medium pd-t-medium br-t br-1px br-light">
-              <h4 class="p-small t-medium t-grey mn-b-thin">Migrations</h4>
+            <div v-if="release.migrations && release.migrations.length > 0" class="mn-t-medium pd-x-medium br-t-1px br-black-transp-10">
+              <h4 class="p-small fw-medium t-grey mn-b-small">Migrations</h4>
               <ul class="pd-l-semi p-small t-grey flex flex-column gap-micro" style="list-style: disc;">
                 <li v-for="(migration, idx) in release.migrations" :key="idx">{{ migration }}</li>
               </ul>