@dcrackel/meyersquaredui 1.0.113 → 1.0.115

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dcrackel/meyersquaredui",
   "private": false,
-  "version": "1.0.113",
+  "version": "1.0.115",
   "type": "module",
   "main": "dist/meyersquaredui.cjs.js",
   "module": "dist/meyersquaredui.esm.js",

package/src/stories/Molecules/ProgressTracker/ProgressTracker.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center justify-between w-full">
+  <div class="flex items-center justify-between w-full overflow-x-auto">
     <div
         v-for="(phase, index) in phases"
         :key="index"
@@ -16,7 +16,7 @@
       <div class="flex flex-col items-center"
            :class="{'hover:cursor-pointer': index <= currentPhase, 'hover:cursor-default': index > currentPhase}">
         <div
-            class="w-8 h-8 flex items-center justify-center rounded-full transition-all duration-300 border-2"
+            class="w-6 h-6 md:w-9 md:h-9 flex items-center justify-center rounded-full transition-all duration-300 border-2"
             :class="{
             'border-accent': isPhaseActive(index),
             'border-gray-300': !isPhaseActive(index),
@@ -24,13 +24,13 @@
             'hover:bg-gray-200': hoveredPhase === index && !isPhaseActive(index) && index <= currentPhase,
           }"
         >
-          <i :class="phase.icon"></i>
+          <i :class="[phase.icon, 'text-xs md:text-lg']"></i>
         </div>
         <BaseText
             tag="p"
             size="sm"
             :weight="highlightPhase === index ? 'bold' : 'normal'"
-            class="mt-2 transition-all duration-300"
+            class="mt-2 transition-all duration-300 text-xs md:text-sm whitespace-nowrap"
             :class="{
             'font-bold text-accent': isPhaseActive(index) || highlightPhase === index,
             'text-gray-600': !isPhaseActive(index) && highlightPhase !== index,
@@ -44,7 +44,7 @@
       <!-- Dynamic Line between icons -->
       <div
           v-if="index < phases.length - 1"
-          class="flex-grow h-1 mx-2"
+          class="flex-grow h-1 mx-2 min-w-14"
           :class="{
           'bg-accent': isPhaseActive(index + 1),
           'bg-gray-300': !isPhaseActive(index + 1),
@@ -56,10 +56,12 @@
 
 <script>
 import BaseText from "../../Atoms/BaseText/BaseText.vue";
+import Icon from "../../Atoms/Icon/Icon.vue";
 
 export default {
   name: 'ProgressTracker',
   components: {
+    Icon,
     BaseText
   },
   props: {

package/src/stories/Organisms/Cards/FencerListCard/FencerListCard.vue

@@ -10,7 +10,7 @@
       <BaseText tag="p" size="md" weight="normal">{{ clubName }}</BaseText>
       </section>
       <section class="flex md:hidden flex-col">
-        <BaseText tag="h3" size="md" weight="bold">{{ displayName }}</BaseText>
+        <BaseText tag="h3" size="sm" weight="bold">{{ displayName }}</BaseText>
         <BaseText tag="p" size="xs" weight="normal">{{ clubName }}</BaseText>
       </section>
     </div>

package/src/stories/Organisms/GridTabs/GridTabs.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="w-full rounded-lg">
+  <div class="w-full pb-2 rounded-lg bg-secondary">
     <!-- Grid Title -->
-    <div class="max-w-[1200px] w-full flex justify-between mx-auto py-8 pl-4 rounded-tr-lg rounded-tl-lg">
-      <BaseText color="primary" size="xl" tag="h3" weight="bold">{{ `Fencers in ${pools[selectedTab].Name}` }}</BaseText>
+    <div class="max-w-[1200px] w-full flex justify-between mx-auto py-4 md:py-8 pl-4 pr-4 rounded-tr-lg rounded-tl-lg">
+      <BaseText color="primary" size="" tag="h3" weight="bold" class="text-sm md:text-xl">{{ `Fencers in ${pools[selectedTab].Name}` }}</BaseText>
       <div class="flex">
-        <BaseText color="primary" size="xl" tag="h3" weight="bold">{{ `${pools[selectedTab].poolStrengthInd} Strength Indicator` }}</BaseText>
+        <BaseText color="primary" size="" tag="h3" weight="bold" class="text-sm md:text-xl">{{ `${pools[selectedTab].poolStrengthInd} Strength Indicator` }}</BaseText>
         <Tooltip :text="tooltipContent" width="w-[500px]" position="left">
           <Icon icon="fa-circle-info" color="primary" size="md" class="hidden md:block ml-2" />
         </Tooltip>
@@ -12,15 +12,15 @@
     </div>
 
     <!-- Tabs for Pools -->
-    <div class="max-w-[1200px] w-full flex mx-auto pt-4 pb-4 pl-4 bg-white rounded-tr-lg rounded-tl-lg">
+    <div class="max-w-[1200px] md:w-full flex mx-2 md:mx-auto pt-4 pb-4 pl-4 bg-white rounded-tr-lg rounded-tl-lg">
       <span v-for="(pool, index) in pools" :key="pool.PoolId">
         <BaseText
             color="primary"
-            size="md"
+            size=""
             tag="p"
             weight=""
             title=""
-            class="mr-10 border-b-2 hover:border-accent pb-2 duration-300 ease-in-out"
+            class="mr-10 border-b-2 hover:border-accent pb-2 duration-300 ease-in-out text-sm md:text-lg"
             :class="selectedTab === index ? 'border-accent' : 'border-white'"
             @click="selectTab(index)"
         >
@@ -80,7 +80,7 @@ export default {
         <strong>Strength Indicator Explanation:</strong><br/>
         - A negative score means this pool is weaker than the average.<br/>
         - A positive score means this pool is stronger than the average.<br/><br/>
-        <em>Note:</em> A small difference is expected, as tournament organizers aim to separate club members for balanced competition.
+        <em>Note:</em> Ideally, all pools would be 0. However, A small difference is expected, as tournament organizers aim to separate club members.
       `
     };
   },