fix

src/components/Workouts/Item.vue

@@ -39,24 +39,11 @@
               <div class="d-flex">
                 <RectangleButton
                   size="large"
-                  height="26"
-                  icon="WMi-trash"
-                  class="custom-btn ml-1"
-                  @click.native.stop="removeWorkout(workout.id)"
+                  height="31"
+                  icon="WMi-star"
+                  class="custom-btn"
+                  @click.native.stop="$_openModal('workout_special_place_holder')"
                 />
-                <!-- <router-link
-                  :to="{
-                    name: 'editWorkout',
-                    params: { id: workout.id },
-                  }"
-                >
-                  <RectangleButton
-                    size="large"
-                    height="26"
-                    icon="WMi-pencil"
-                    class="custom-btn ml-1"
-                  />
-                </router-link> -->
                 <router-link
                   :to="{
                     name: 'editWorkout',
@@ -68,12 +55,19 @@
                   <a :href="href" @click.stop="navigate">
                     <RectangleButton
                       size="large"
-                      height="26"
+                      height="31"
                       icon="WMi-pencil"
-                      class="custom-btn ml-1"
+                      class="custom-btn ml-2"
                     />
                   </a>
                 </router-link>
+                <RectangleButton
+                  size="large"
+                  height="31"
+                  icon="WMi-trash"
+                  class="custom-btn ml-2"
+                  @click.native.stop="removeWorkout(workout.id)"
+                />
               </div>
             </div>
           </div>

src/components/Workouts/Items.vue

@@ -53,6 +53,7 @@
     <div class="text-center">
       <FiltersModal @filter="load" v-if="isModal('modal_filters')" />
       <DetailModal v-if="isModal('modal_workout_detail')" />
+      <SpecialPlaceHolderModal v-if="isModal('modal_workout_special_place_holder')" />
     </div>
   </div>
 </template>
@@ -61,6 +62,7 @@ import WorkoutItem from "./Item";
 import SectionTitle from "../Global/Section/SectionTitle.vue";
 import FiltersModal from "./Modals/FiltersModal.vue";
 import DetailModal from "./Modals/Detail.vue";
+import SpecialPlaceHolderModal from "./Modals/SpecialPlaceHolder.vue";
 import { mapGetters, mapActions, mapMutations } from "vuex";
 export default {
   components: {
@@ -68,6 +70,7 @@ export default {
     SectionTitle,
     FiltersModal,
     DetailModal,
+    SpecialPlaceHolderModal,
   },
   computed: {
     ...mapGetters("workouts", [

src/components/Workouts/Modals/SpecialPlaceHolder.vue

@@ -0,0 +1,52 @@
+<template>
+  <basic-modal
+    width="900"
+    transition="slide-x-transition"
+    tag="form"
+    @submit="filterWorkotus"
+  >
+    <template #header>
+      <div class="close__modal">
+        <v-icon class="WMi-cancel-1" large @click="$_closeModal()"></v-icon>
+      </div>
+    </template>
+    <template #default>
+      <div>
+        <SectionTitle
+          title="make the workout special"
+          subTitle="Select a place holder"
+          :is-modal="true"
+        />
+      </div>
+      <div class="mt-8 mb-10">
+        <div>
+          <v-switch
+            v-model="switch1"
+            inset
+            color="#ffd600"
+            :label="`Switch 1: ${switch1.toString()}`"
+          ></v-switch>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <v-spacer></v-spacer>
+      <div class="px-4">
+        <RectangleButton
+          height="29"
+          class="btn__modal--confirm custom-btn wa__f__m__eb"
+          text="close"
+          @click="$_closeModal()"
+        />
+      </div>
+    </template>
+  </basic-modal>
+</template>
+<script>
+export default {
+  name: "modal_workout_special_place_holder",
+  data: () => ({
+    switch1: true,
+  }),
+};
+</script>