@dcrackel/hematournamentui 1.0.173 → 1.0.174

package/src/stories/Organisms/ComplexInputs/DatePicker/DatePicker.vue

@@ -3,11 +3,12 @@
     <!--    when invalid is true, box should be red-->
     <VueDatePicker
         v-model="selectedDate"
-        :enable-time-picker="false"
-        :format="'MM/dd/yyyy'"
+        :format="dateFormat"
         :min-date="minDate"
-        mode="date"
-        placeholder="Select Start Date"
+        :mode="pickerMode"
+        placeholder="Select Date or Time"
+        :class="{'dp__input_invalid': invalid}"
+        v-bind="datePickerAttrs"
     />
   </div>
 </template>
@@ -17,7 +18,7 @@ import VueDatePicker from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css';
 
 export default {
-  components: {VueDatePicker},
+  components: { VueDatePicker },
   props: {
     setDate: {
       type: [Date, String],
@@ -27,36 +28,70 @@ export default {
     invalid: {
       type: Boolean,
       default: false
+    },
+    pickerMode: {
+      type: String,
+      default: 'date', // or 'time' or 'datetime'
+      validator: value => ['date', 'time', 'datetime'].includes(value)
     }
   },
   data() {
     return {
-      selectedDate: this.setDate ? new Date(this.setDate) : null,
-      minDate: new Date()
+      selectedDate: this.parseDate(this.setDate),
+      minDate: this.getOneYearAgo()
     };
   },
+  computed: {
+    datePickerAttrs() {
+      return this.pickerMode === 'time' ? { 'time-picker': true } : {};
+    },
+    dateFormat() {
+      if (this.pickerMode === 'time') return 'HH:mm:ss';
+      if (this.pickerMode === 'datetime') return 'MM/dd/yyyy HH:mm:ss';
+      return 'MM/dd/yyyy';
+    }
+  },
   watch: {
     selectedDate(newDate) {
       this.$emit("update:selectedDate", newDate);
     }
+  },
+  methods: {
+    getOneYearAgo() {
+      return new Date(new Date().setFullYear(new Date().getFullYear() - 1));
+    },
+    parseDate(date) {
+      console.log(date);
+      if (typeof date === 'string') {
+        if (this.pickerMode === 'time') {
+          console.log('PICKER TIME', date);
+          const [hours, minutes, seconds] = date.split(':').map(Number);
+          return { hours, minutes, seconds: seconds || 0 };
+        }
+        const [year, month, day] = date.split('-').map(Number);
+        return new Date(year, month - 1, day); // Months are 0-based in JavaScript Date
+      }
+      return date;
+    }
   }
 }
 </script>
 
 <style scoped>
 :deep(.dp__pointer.dp__input_readonly.dp__input.dp__input_icon_pad.dp__input_reg) {
-  color: rgb(43, 50, 75);
+  color: rgb(178, 177, 183);
   font-size: 14px;
   border-radius: 8px;
+  border: 1px solid #D5E4EE;
 }
 
 :deep(.dp__input_invalid) {
   box-shadow: 0 0;
-  border: 1px solid rgb(213, 228, 238);
+  border: 1px solid rgb(255, 0, 0);
 }
 
 :deep(.dp__input_valid) {
   box-shadow: 0 0;
-  border: 1px solid rgb(255, 0, 0);
+  border: 1px solid rgb(213, 228, 238);
 }
 </style>

package/src/stories/Organisms/ComplexInputs/DropDown/DropDownMenu.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="flex flex-row w-full relative" :class="[alignEnd ? 'justify-end' : '']">
     <div class="z-10 rounded-lg px-2 py-2 flex flex-row justify-between border border-dropdownSelect" :class="width" @click="handleDropDown()">
-      <BaseText v-if="label.length > 1" :text="label" color="quaternary" size="sm" weight="normal" />
+      <BaseText v-if="label.length > 1" :text="label" color="quinary" size="sm" weight="normal" />
       <BaseText :text="selectedItem.text" color="secondary" size="sm" weight="normal" />
-      <i class="fa-solid fa-chevron-down text-xs" />
+      <i class="fa-solid fa-chevron-down text-xs text-quinary" />
     </div>
     <transition name="fade-in-down">
       <div v-if="isDropDownOpen" class="flex flex-col shadow-lg mt-9 z-20 rounded-b-xl absolute bg-neutral border border-dropdownSelect" :class="dropDownWidth">
         <a v-for="item in items" :key="item.id" @click="handleClick(item)" class="hover:bg-dropdownSelect py-1 px-2 border-b border-l border-r border-dropdownSelect">
-          <BaseText :text="item.text" color="primary" size="sm" weight="normal" class="py-0.5" />
+          <BaseText :text="item.text" color="quinary" size="sm" weight="normal" class="py-0.5" />
         </a>
       </div>
     </transition>

package/src/stories/Organisms/Form/EditEvent/EditEvent.stories.js

@@ -0,0 +1,34 @@
+import EditEvent from './EditEvent.vue';
+import singleEventMock from "../../../../mocks/singleEventMock.js";
+import eventRules from "../../../../mocks/eventRules.js";
+
+export default {
+    title: 'Organisms/Forms/EditEvent',
+    component: EditEvent,
+    args: {
+        event: singleEventMock,
+        weapons: [
+            {text: 'Longsword', link: 1},
+            {text: 'Saber', link: 2},
+            {text: 'Rapier', link: 3}
+        ],
+        rules: eventRules
+    },
+    argTypes: {
+        event: { control: 'object' },
+        weapons: { control: 'object' },
+        rules: { control: 'object' }
+    },
+};
+
+export const Default = {
+    args: {
+        event: singleEventMock,
+        rules: eventRules,
+        weapons: [
+            {text: 'Longsword', link: 1},
+            {text: 'Saber', link: 2},
+            {text: 'Rapier', link: 3}
+        ],
+    }
+};

package/src/stories/Organisms/Form/EditEvent/EditEvent.vue

@@ -0,0 +1,385 @@
+<template>
+  <div class="border border-dropdownSelect rounded-lg p-9 bg-neutral">
+
+    <div class="w-full flex flex-row justify-center my-4">
+      <BaseText :color="'primaryHighlight'" :size="'2xl'" :text="'Add New Event'" :weight="'normal'"
+                data-testid="text-add-tournament"/>
+    </div>
+    <div class="w-full flex flex-row justify-center my-4">
+      <BaseText :color="'quinary'" :size="'sm'" :text="'Please fill in the basic information required for your event, including the event name, start date, start time, number of rings, and weapon form.'"
+                :weight="'normal'" data-testid="text-registration"/>
+    </div>
+
+    <div class="mb-4">
+      <BaseText :color="'quaternary'" :size="'xs'" :text="'BASIC INFORMATION'" class="border-b mb-5"/>
+      <TitledInput :inputValue="localEvent.EventName" :invalid="validation.EventName" placeholder="Enter Event Name"
+                   title="Event Name" @update:value="handleEventNameChange" />
+    </div>
+
+    <div class="flex flex-row mb-3">
+      <div class="mr-1 w-full">
+        <BaseText :color="'quinary'" :invalid="validation.startDate" :size="'sm'" :text="'Start Date'"
+                  :weight="'normal'" class="mb-1" data-testid="text-start-date"/>
+        <DatePicker :invalid="validation.Date" :setDate="localEvent.Date"
+                    @update:selectedDate="handleDateUpdate"/>
+      </div>
+    </div>
+
+    <div class="mb-4">
+      <BaseText :color="'quinary'" :invalid="validation.StartTime" :size="'sm'" :text="'Start Time'"
+                :weight="'normal'" class="mb-1" data-testid="text-start-date"/>
+      <DatePicker :invalid="validation.StartTime" :setDate="localEvent.StartTime" pickerMode="time"
+                  @update:selectedDate="handleTimeUpdate"/>
+    </div>
+
+    <div class="mb-4">
+      <TitledInput :inputValue="localEvent.NumberOfRings" :invalid="validation.NumberOfRings" placeholder="Enter Event Name"
+                   title="Number of Rings" @update:value="handleNumberOfRingsChange" />
+    </div>
+
+    <div class="mb-2 flex">
+      <div class="mt-1 h-10 w-52"><Toggle :checked="eventConfig.maxFencers" label="Limit Fencers Allow in" :labelLeft="false" @update:checked="handleMaxFencersToggle"/></div>
+      <TitledInput v-if="eventConfig.maxFencers" :inputValue="eventConfig.maxFencerCount" :invalid="validation.maxFencerCount" placeholder="Max Fencer Allow in"
+                   title="" @update:value="handleMaxFencerCountChange" />
+    </div>
+
+    <div class="mb-4">
+      <BaseText :color="'quinary'" :invalid="validation.WeaponId" :size="'sm'" :text="'Weapon Form'"
+                :weight="'normal'" class="mb-1" data-testid="text-start-date"/>
+      <DropDownMenu :label="selectedWeapon" :items="weapons" :selected-item="selectedWeapon" :alignEnd="false" :width="'w-full'" @update:selectedItem="handleWeaponChange" />
+    </div>
+
+    <!-- Pool Configuration -->
+    <div class="mb-4 mt-8">
+      <BaseText :color="'quaternary'" :size="'xs'" :text="'POOL CONFIGURATION'" class="border-b mb-5"/>
+    </div>
+    <div class="w-full flex flex-col mb-3 ml-1">
+      <BaseText :color="'quinary'" :size="'sm'" :text="'Configure the pool stage settings for your event. These options determine the elements displayed on the director\'s screen and influence how fencers advance to the Direct Elimination (DE) stage. You can choose to use a Timer, Pass Counter, or both.'"
+                :weight="'normal'" data-testid="text-registration"/>
+    </div>
+
+    <div class="mb-4">
+      <BaseText :color="'quinary'" :invalid="validation.startDate" :size="'sm'" :text="'Seed Pools From'"
+                :weight="'normal'" class="mb-1" data-testid="text-start-date"/>
+      <DropDownMenu :label="eventConfig.seedWith" :items="seedWithOptions" :selected-item="selectedItem" :alignEnd="false" :width="'w-full'" @update:selectedItem="handleSeedWithChange" />
+    </div>
+
+    <div class="mb-2 flex">
+      <div class="mt-1 h-10 w-52"><Toggle :checked="eventConfig.poolTimer" label="Using a Timer" :labelLeft="false" @update:checked="handlePoolTimerToggle"/></div>
+      <TitledInput v-if="eventConfig.poolTimer" :inputValue="eventConfig.poolTime" :invalid="validation.poolTime" placeholder="Enter Time in Seconds"
+                   title="" @update:value="handlePoolTimeChange" />
+    </div>
+
+    <div class="mb-2 flex">
+      <div class="mt-1 h-10 w-52"><Toggle :checked="eventConfig.boutCounter" label="Using Pass Counter" :labelLeft="false" @update:checked="handleBoutCounterToggle"/></div>
+      <TitledInput v-if="eventConfig.boutCounter" :inputValue="eventConfig.boutCount" :invalid="validation.boutCount" placeholder="Enter Number of Passes"
+                   title="" @update:value="handleBoutCountChange" />
+    </div>
+
+    <div class="mb-2 flex">
+      <div class="mt-1 h-10 w-52"><Toggle :checked="eventConfig.poolMax" label="Max Points" :labelLeft="false" @update:checked="handlePoolMaxToggle"/></div>
+      <TitledInput :inputValue="eventConfig.poolMaxPoints" :invalid="validation.poolMaxPoints" placeholder="Enter Pool Max Points"
+                   title="" @update:value="handlePoolMaxPointsChange" />
+    </div>
+
+    <!-- Direct Elimination -->
+    <div class="mb-4 mt-8"><BaseText :color="'quaternary'" :size="'xs'" :text="'DIRECT ELIMINATION CONFIGURATION'" class="border-b mb-5"/></div>
+    <div class="w-full flex flex-col mb-3 ml-1">
+      <BaseText :color="'quinary'" :size="'sm'" :text="'Define the criteria for promoting fencers to the Direct Elimination (DE) stage. These options specify how fencers advance based on their performance metrics. Ensure the correct order of criteria to reflect their importance in the promotion process.'"
+                :weight="'normal'" data-testid="text-registration"/>
+    </div>
+
+    <div class="mb-2 flex">
+      <div class="mt-1 h-10 w-52"><Toggle :checked="eventConfig.DETimer" label="DE Timer" :labelLeft="false" @update:checked="handleDETimerToggle"/></div>
+      <TitledInput v-if="eventConfig.DETimer" :inputValue="eventConfig.DETime" :invalid="validation.DETime" placeholder="Enter Time in Seconds"
+                   title="" @update:value="handleDETimeChange" />
+    </div>
+
+    <div class="mb-2 flex">
+      <div class="mt-1 h-10 w-52"><Toggle :checked="eventConfig.DEBoutCounter" label="DE Pass Counter" :labelLeft="false" @update:checked="handleDEBoutCountToggle"/></div>
+      <TitledInput v-if="eventConfig.DEBoutCounter" :inputValue="eventConfig.DEBoutCount" :invalid="validation.DEBoutCount" placeholder="Enter Number of Passes"
+                   title="" @update:value="handleDEBoutCountChange" />
+    </div>
+
+    <div class="mb-2 flex">
+      <div class="mt-1 h-10 w-52"><Toggle :checked="eventConfig.DEMax" label="Max Points" :labelLeft="false" @update:checked="handleDEMaxPointsChange"/></div>
+      <TitledInput :inputValue="eventConfig.DEMaxPoints" :invalid="validation.DEMaxPoints" placeholder="Enter DE Max Points"
+                   title="" @update:value="handleDEMaxPointsChange" />
+    </div>
+
+    <!-- Direct Elimination Promotion -->
+    <div class="mb-4 mt-8">
+      <BaseText :color="'quaternary'" :size="'xs'" :text="'DIRECT ELIMINATION PROMOTION CRITERIA'" class="border-b mb-5"/>
+    </div>
+    <div class="w-full flex mb-3 ml-1">
+      <BaseText :color="'quinary'" :size="'sm'" :text="'Define the criteria for promoting fencers to the Direct Elimination (DE) stage. These options specify how fencers advance based on their performance metrics. Ensure the correct order of criteria to reflect their importance in the promotion process.'"
+                :weight="'normal'" data-testid="text-registration"/>
+    </div>
+
+    <div class="mb-2 mt-8 flex flex-col">
+      <BaseText :color="'quinary'" :size="'sm'" :text="'Specify the number or percentage of participants to be promoted to the Direct Elimination (DE) stage. You can enter either a whole number or a percentage.'"
+                :weight="'normal'" data-testid="text-registration" class="mb-4"/>
+      <TitledInput :inputValue="eventConfig.DEPromotionAmount" :invalid="validation.DEPromotionAmount" placeholder="Enter Number or Percent.."
+                   title="" @update:value="handleDEPromotionAmountChange" />
+    </div>
+
+    <div class="mt-8 mb-4">
+      <MultiSelect
+          label="Select and arrange the statistical criteria that will be used to promote participants to the Direct Elimination (DE) stage. The order of these criteria is crucial as it determines the priority for promotion. Choose up to three stats from the available options."
+          :initialSelectedTags="eventConfig.DEPromationOrder"
+          :availableTags="['Win Percent', 'Win Count', 'Indicator', 'Points Scored']"
+          @update:selectedTags="handleMultiSelect"
+      />
+    </div>
+    <div class="mt-8 h-10 w-52">
+      <Toggle :checked="eventConfig.ThirdPlaceBout" :label="thirdPlaceLabel" :labelLeft="false" @update:checked="handleThirdPlaceToggle"/>
+    </div>
+
+    <div class="flex flex-row justify-center my-10">
+      <BaseButton class="w-1/2 ml-1" color="neutral" label="Cancel" size="sm" type="primary" @click="handleCancel"/>
+      <BaseButton class="w-1/2 mr-1 transition-all duration-300 ease-in-out" color="neutral" :label="saveButtonLabel" selected=selected size="sm" type="primary"
+                  @click="handleSubmit"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import TitledInput from "../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue";
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+import DatePicker from "../../ComplexInputs/DatePicker/DatePicker.vue";
+import DropDownMenu from "../../ComplexInputs/DropDown/DropDownMenu.vue";
+import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+import Toggle from "../../../Molecules/Inputs/Toggle/Toggle.vue";
+import MultiSelect from "../../../Molecules/Inputs/MultiSelect/MultiSelect.vue";
+
+export default {
+  name: 'EditEvent',
+  components: { BaseText, MultiSelect, DropDownMenu, DatePicker, TitledInput, Toggle, BaseButton },
+  props: {
+    event: {
+      type: Object,
+      required: true
+    },
+    weapons: {
+      type: Array,
+      required: true
+    },
+    rules: {
+      type: Array,
+      required: true
+    },
+    saveButtonLabel: {
+      type: String,
+      default: 'Save'
+    }
+  },
+  data() {
+    return {
+      selectedItem: 'Longsword',
+      localEvent: { ...this.event },
+      validation: {
+        name: false,
+        imageLink: false,
+        address: false,
+        coordinates: false,
+        startDate: false,
+        totalDays: false,
+        description: false,
+        visibility: false
+      },
+      eventConfig: {
+        seedWith: 'M2 - MeyerSquared',
+        maxFencers: false,
+        maxFencerCount: 64,
+        boutCounter: false,
+        boutCount: 5,
+        poolTimer: false,
+        poolMax: true,
+        DEMax: true,
+        ThirdPlaceBout: true,
+        poolTime: 120,
+        poolMaxPoints: 7,
+        DETimer: false,
+        DETime: 120,
+        DEBoutCounter: false,
+        DEBoutCount: 7,
+        DEMaxPoints: 7,
+        DEPromotionAmount: '100%',
+        DEPromationOrder: ['Win Percent', 'Indicator', 'Points Scored']
+      },
+      seedWithOptions: [
+        { text: 'M2 - MeyerSquared', link: '' },
+        { text: 'HR - Hema Rating', link: '' },
+        { text: 'Manual', link: '' }
+      ],
+      thirdPlaceOptions: [
+        {
+          id: "btn1",
+          label: "Tie for 3rd Place",
+          defaultBgColor: "bg-natural",
+          selectedBgColor: "bg-eventBoxBlue"
+        },
+        {
+          id: "btn2",
+          label: "3rd Place Fence Off",
+          defaultBgColor: "bg-natural",
+          selectedBgColor: "bg-eventBoxBlue"
+        }
+      ]
+    };
+  },
+  computed: {
+    thirdPlaceLabel(){
+      return this.eventConfig.ThirdPlaceBout ? '3rd Place Fence Off' : 'Tie for 3rd Place'
+    },
+    selectedWeapon() {
+      const weapon = this.weapons.find(w => w.link === this.event.WeaponId);
+      return weapon ? weapon.text : '';
+    },
+    updatedEvent() {
+      const updatedEvent = { ...this.localEvent };
+
+      updatedEvent.EventName = this.eventConfig.EventName;
+      updatedEvent.Date = this.eventConfig.Date;
+      updatedEvent.StartTime = this.eventConfig.StartTime;
+      updatedEvent.NumberOfRings = this.eventConfig.NumberOfRings;
+      updatedEvent.WeaponId = this.eventConfig.WeaponId;
+
+      updatedEvent.rules = this.rules.reduce((acc, rule) => {
+        switch (rule.RuleName) {
+          case "PoolTime":
+            if (this.eventConfig.poolTimer) {
+              acc.push({ ...rule, RuleValue: String(this.eventConfig.poolTime) });
+            }
+            break;
+          case "PoolMaxPoints":
+            if (this.eventConfig.poolMax) {
+              acc.push({ ...rule, RuleValue: String(this.eventConfig.poolMaxPoints) });
+            }
+            break;
+          case "DETime":
+            if (this.eventConfig.DEMax) {
+              acc.push({ ...rule, RuleValue: String(this.eventConfig.DETime) });
+            }
+            break;
+          case "DEMaxPoints":
+            if (this.eventConfig.DEMax) {
+              acc.push({ ...rule, RuleValue: String(this.eventConfig.DEMaxPoints) });
+            }
+            break;
+          case "DE3rdFenceOff":
+            acc.push({ ...rule, RuleValue: String(this.eventConfig.ThirdPlaceBout) });
+            break;
+          case "DEPromationOrder1":
+            acc.push({ ...rule, RuleValue: this.eventConfig.DEPromationOrder.join(",") });
+            break;
+          case "DENumOfPromotion":
+            acc.push({ ...rule, RuleValue: this.eventConfig.DEPromotionAmount });
+            break;
+          case "PoolSeeding":
+            acc.push({ ...rule, RuleValue: this.eventConfig.seedWith });
+            break;
+          case "PoolNumOfPasses":
+            if (this.eventConfig.boutCounter) {
+              acc.push({ ...rule, RuleValue: String(this.eventConfig.boutCount) });
+            }
+            break;
+          case "DENumOfPasses":
+            if (this.eventConfig.DEBoutCounter) {
+              acc.push({ ...rule, RuleValue: String(this.eventConfig.DEBoutCount) });
+            }
+            break;
+          case "CutOffNumber":
+            if (this.eventConfig.maxFencers) {
+              acc.push({ ...rule, RuleValue: String(this.eventConfig.maxFencerCount) });
+            }
+            break;
+
+          default:
+            acc.push(rule);
+        }
+        return acc;
+      }, []);
+
+      return updatedEvent;
+    }
+  },
+  methods: {
+    handleEventNameChange(value) {
+      this.eventConfig.EventName = value;
+    },
+    handleDateUpdate(value) {
+      this.eventConfig.Date = value;
+    },
+    handleTimeUpdate(value) {
+      this.eventConfig.StartTime = `${value.hours}:${value.minutes}`;
+    },
+    handleWeaponChange(value) {
+      this.eventConfig.WeaponId = value.link;
+    },
+    handleNumberOfRingsChange(value) {
+      this.eventConfig.NumberOfRings = value;
+    },
+    handleSeedWithChange(value) {
+      this.eventConfig.seedWith = value.text;
+    },
+    handlePoolTimerToggle(value) {
+      this.eventConfig.poolTimer = value;
+    },
+    handlePoolTimeChange(value) {
+      this.eventConfig.poolTime = value;
+    },
+    handleBoutCounterToggle(value) {
+      this.eventConfig.boutCounter = value;
+    },
+    handleBoutCountChange(value) {
+      this.eventConfig.boutCount = value;
+    },
+    handlePoolMaxToggle(value) {
+      this.eventConfig.poolMax = value;
+    },
+    handlePoolMaxPointsChange(value) {
+      this.eventConfig.poolMaxPoints = value;
+    },
+    handleDETimerToggle(value) {
+      this.eventConfig.DETimer = value;
+    },
+    handleDETimeChange(value) {
+      this.eventConfig.DETime = value;
+    },
+    handleDEBoutCountToggle(value) {
+      this.eventConfig.DEBoutCounter = value;
+    },
+    handleDEBoutCountChange(value) {
+      this.eventConfig.DEBoutCount = value;
+    },
+    handleMaxFencersToggle(value) {
+      this.eventConfig.maxFencers = value;
+    },
+    handleMaxFencerCountChange(value) {
+      this.eventConfig.maxFencerCount = value;
+    },
+    handleDEMaxPointsChange(value) {
+      this.eventConfig.DEMaxPoints = value;
+    },
+    handleThirdPlaceToggle(value) {
+      this.eventConfig.ThirdPlaceBout = value;
+    },
+    handleDEPromotionAmountChange(value) {
+      this.eventConfig.DEPromotionAmount = value;
+    },
+    handleMultiSelect(value) {
+      this.eventConfig.DEPromationOrder = value;
+    },
+    handleSubmit() {
+      console.log(this.updatedEvent);
+      this.$emit('update:submit', this.updatedEvent);
+    },
+    handleCancel() {
+      this.$emit('update:cancel');
+    }
+  }
+};
+</script>
+

package/src/stories/Templates/TournamentManagement/AddTournament/PageOne/AddTournamentPageOne.stories.js

@@ -1,6 +1,7 @@
 import AddTournamentPageOne from './AddTournamentPageOne.vue';
 import mockLocation from '../../../../../mocks/locationMock.js';
 import mockPersons from '../../../../../mocks/personsMock.js';
+
 export default {
     title: 'Templates/TournamentManagement/AddTournament/PageOne',
     component: AddTournamentPageOne,

package/src/stories/Templates/TournamentManagement/EditTournament/EditBasic/EditTournamentBasicInfo.vue

@@ -4,7 +4,7 @@
     <section class="w-full">
       <BaseText :color="'quaternary'" :size="'xs'" :text="'IMAGE'" class="border-b mb-5"/>
       <div class="w-full flex flex-col mb-3">
-        <BaseText :color="'primaryHighlight'" :size="'sm'" :text="'Cover Image'"
+        <BaseText :color="'quinary'" :size="'sm'" :text="'Cover Image'"
                   :weight="'normal'" class="mb-1 ml-1" data-testid="text-cover-image"/>
         <div class="w-full flex justify-center">
           <div class="w-3/4">
@@ -19,34 +19,33 @@
                      :title="'Tournament Name'" @update:value="value => localTournament.Name = value"/>
       </div>
       <div class="mb-3">
-        <BaseText :color="'primaryHighlight'" :invalid="validation.address" :size="'sm'" :text="'Address'"
+        <BaseText :color="'quinary'" :invalid="validation.address" :size="'sm'" :text="'Address'"
                   :weight="'normal'" class="mb-1 ml-1" data-testid="text-address"/>
         <FindLocation :invalid="validation.address" :locations="locations" :placeholder="tournamentAddress"
                       :addBorder=true
                       @update-location="handleAddressUpdate"/>
       </div>
       <div class="mb-3">
-        <BaseText :color="'primaryHighlight'" :invalid="validation.description" :size="'sm'" :text="'Description'"
+        <BaseText :color="'quinary'" :invalid="validation.description" :size="'sm'" :text="'Description'"
                   :weight="'normal'" class="mb-1 ml-1" data-testid="text-description"/>
         <TextBoxEditor :initialContent="localTournament.Description" :invalid="validation.description"
                        @update:editorContent="handleEditorUpdate"/>
       </div>
       <div class="flex flex-row justify-center mb-3">
         <div class="flex flex-col w-1/2 mr-1">
-          <BaseText :color="'primaryHighlight'" :invalid="validation.startDate" :size="'sm'" :text="'Start Date'"
+          <BaseText :color="'quinary'" :invalid="validation.startDate" :size="'sm'" :text="'Start Date'"
                     :weight="'normal'"
                     class="mb-1 ml-1" data-testid="text-start-date"/>
-          <DatePicker :invalid="validation.startDate" :setDate="tournament.StartDate"
-                      @update:selectedDate="handleDateUpdate"/>
+          <DatePicker :invalid="validation.startDate" :setDate="tournament.StartDate" @update:selectedDate="handleDateUpdate"/>
         </div>
         <div class="flex flex-col w-1/2 ml-1">
-          <BaseText :color="'primaryHighlight'" class="mb-1 ml-1" text="Total Days"/>
+          <BaseText :color="'quinary'" class="mb-1 ml-1" text="Total Days"/>
           <BaseInput :addBorder="true" :placeholder="totalDays" @update:value="handleTotalDays"/>
         </div>
       </div>
       <div class="flex flex-row justify-center my-10">
         <BaseButton class="w-1/2 ml-1" color="neutral" label="Cancel" size="sm" type="primary" @click="handleCancel"/>
-        <BaseButton class="w-1/2 mr-1" color="neutral" :label="saveButtonLabel" selected=selected size="sm" type="primary"
+        <BaseButton class="w-1/2 mr-1 transition-all duration-300 ease-in-out" color="neutral" :label="saveButtonLabel" selected=selected size="sm" type="primary"
                     @click="handleSubmit"/>
       </div>
     </section>

package/src/stories/Templates/TournamentManagement/EditTournament/EditDetails/EditTournamentDetails.vue

@@ -4,7 +4,7 @@
     <section class="w-3/4">
       <BaseText :color="'quaternary'" :size="'xs'" :text="'DETAIL INFORMATION'" class="border-b mb-5"/>
       <div class="flex flex-col pb-4 mb-10">
-        <BaseText :color="'primaryHighlight'" :invalid="validation.visibility" :size="'sm'"
+        <BaseText :color="'quinary'" :invalid="validation.visibility" :size="'sm'"
                   :text="'Tournament Visibility'" :weight="'normal'" class="mb-2" data-testid="text-visibility"/>
         <BaseRadioGroup :invalid="validation.visibility" :items="visibilityItems" :value="selectedVisibility" @update:value="handleVisibleChange"/>
       </div>
@@ -12,7 +12,7 @@
       <section>
         <BaseText :color="'quaternary'" :size="'xs'" :text="'MEYERSQUARED - M2'" class="border-b mb-6 "/>
         <div class="w-full flex flex-col mb-3 ml-1">
-          <BaseText :color="'primaryHighlight'" :size="'sm'" :text="'Would you like to run your tournament with MeyerSquared (M2)? If you choose \'No,\' your tournament will be listed on our calendar, and users will be provided with a link to your website.'"
+          <BaseText :color="'quinary'" :size="'sm'" :text="'Would you like to run your tournament with MeyerSquared (M2)? If you choose \'No,\' your tournament will be listed on our calendar, and users will be provided with a link to your website.'"
                     :weight="'normal'" data-testid="text-registration"/>
         </div>
         <section class="flex w-full justify-center mb-6">
@@ -39,7 +39,7 @@
 
       <BaseText :color="'quaternary'" :size="'xs'" :text="'TOURNAMENT TAGS'" class="border-b mb-6"/>
       <div class="w-full flex flex-col mb-3 ml-1">
-        <BaseText :color="'primaryHighlight'" :size="'sm'" :text="'Tags are used to help users easily find tournaments they are interested in. Each tag acts as a button that users can click to apply a one-click filter on tournaments. Choose tags that accurately represent the key aspects of the tournament, such as the type of weapons used, skill level, or special themes.'"
+        <BaseText :color="'quinary'" :size="'sm'" :text="'Tags are used to help users easily find tournaments they are interested in. Each tag acts as a button that users can click to apply a one-click filter on tournaments. Choose tags that accurately represent the key aspects of the tournament, such as the type of weapons used, skill level, or special themes.'"
                   :weight="'normal'" data-testid="text-external-links"/>
       </div>
       <div class="mb-10">
@@ -48,17 +48,17 @@
 
       <BaseText :color="'quaternary'" :size="'xs'" :text="'CONTACT INFORMATION'" class="border-b mb-5"/>
       <div class="mb-10">
-        <BaseText :color="'primaryHighlight'" :invalid="false" :size="'sm'" :text="'Primary Contact'"
+        <BaseText :color="'quinary'" :invalid="false" :size="'sm'" :text="'Primary Contact'"
                   :weight="'normal'" class="mb-1 ml-1" data-testid="text-address"/>
         <div class="w-full flex flex-col mb-3 ml-1">
-          <BaseText :color="'primaryHighlight'" :size="'sm'" :text="'This is the person to contact for any questions or concerns about the tournament.'"
+          <BaseText :color="'quinary'" :size="'sm'" :text="'This is the person to contact for any questions or concerns about the tournament.'"
                     :weight="'normal'" data-testid="text-registration"/>
         </div>
         <FindPerson :addBorder="true" :persons="persons" addNewText="Add New Person" @personSelected="handlePersonChange"/>
       </div>
       <div class="flex flex-row justify-center">
         <BaseButton class="w-1/2 ml-1" color="neutral" label="Cancel" size="sm" type="primary" @click="handleCancel"/>
-        <BaseButton class="w-1/2 mr-1" color="neutral" :label="saveButtonLabel" selected=selected size="sm" type="primary" @click="handleSubmit"/>
+        <BaseButton class="w-1/2 mr-1 transition-all duration-300 ease-in-out" color="neutral" :label="saveButtonLabel" selected=selected size="sm" type="primary" @click="handleSubmit"/>
       </div>
     </section>
   </div>

package/tailwind.config.js

@@ -58,6 +58,7 @@ module.exports = {
                 alarmText: '#F90229',
                 alert: '#FFD255',
                 bright: '#6190f2',
+                toggleBackground: '#A9C4D6',
                 dropdownSelect: '#D5E4EE',
                 neutral: '#FFFFFF',
                 primary: '#141B33',