fix

src/components/Programs/Item.vue

@@ -14,8 +14,8 @@
             v-if="role === 'admin'"
             @click="verifyProgram(program.id)"
             size="large"
-            class="custom-btn ml-1"
-            height="32"
+            class="custom-btn"
+            height="35"
             :icon="program.verified ? 'WMi-cancel' : 'WMi-ok'"
           />
           <router-link
@@ -24,8 +24,8 @@
           >
             <RectangleButton
               size="large"
-              class="custom-btn ml-1"
-              height="32"
+              class="custom-btn ml-2"
+              height="35"
               icon="WMi-align-left"
             />
           </router-link>
@@ -37,17 +37,25 @@
           >
             <RectangleButton
               size="large"
-              class="custom-btn ml-1"
-              height="32"
+              class="custom-btn ml-2"
+              height="35"
               icon="WMi-pencil"
             />
           </router-link>
+          <RectangleButton
+            v-if="role === 'admin'"
+            @click="$_openModal('program_special_place_holder')"
+            size="large"
+            class="custom-btn ml-2"
+            height="35"
+            icon="WMi-star"
+          />
           <RectangleButton
             v-if="role === 'admin'"
             @click="removeProgram(program.id)"
             size="large"
-            class="custom-btn ml-1"
-            height="32"
+            class="custom-btn ml-2"
+            height="35"
             icon="WMi-trash"
           />
         </div>

src/components/Programs/Items.vue

@@ -59,6 +59,7 @@
       <FiltersModal @filter="load" v-if="isModal('modal_filters')" />
       <ProgramDetailModal @filter="load" v-if="isModal('modal_program_detail')" />
       <UserDetailModal v-if="isModal('modal_user_detail')" />
+      <SpecialPlaceHolderModal v-if="isModal('modal_program_special_place_holder')" />
     </div>
   </div>
 </template>
@@ -68,6 +69,7 @@ import ProgramItem from "./Item.vue";
 import FiltersModal from "./Modals/FiltersModal.vue";
 import ProgramDetailModal from "./Modals/Detail.vue";
 import UserDetailModal from "@/components/Users/Modals/Detail.vue";
+import SpecialPlaceHolderModal from "./Modals/SpecialPlaceHolder.vue";
 import { mapGetters, mapActions, mapMutations } from "vuex";
 import { UserStorage } from "@/utils/storage";
 export default {
@@ -77,6 +79,7 @@ export default {
     FiltersModal,
     ProgramDetailModal,
     UserDetailModal,
+    SpecialPlaceHolderModal,
   },
   data: () => ({
     role: UserStorage.getRole() ? UserStorage.getRole() : null,

src/components/Programs/Modals/SpecialPlaceHolder.vue

@@ -0,0 +1,83 @@
+<template>
+  <basic-modal width="900" transition="slide-x-transition">
+    <template #header>
+      <div class="close__modal">
+        <v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon>
+      </div>
+    </template>
+    <template #default>
+      <div>
+        <SectionTitle
+          title="make the program special"
+          subTitle="Select a place holder"
+          :is-modal="true"
+        />
+      </div>
+      <div class="mt-8 mb-10">
+        <v-switch
+          v-for="item in placeHolders"
+          :key="item.id"
+          v-model="switches[item.id]"
+          inset
+          color="#ffd600"
+          :label="item.name"
+          class="special__place__holder"
+          @change="changeSwitch"
+        ></v-switch>
+      </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="save"
+          @click="$_closeModal()"
+        />
+      </div>
+    </template>
+  </basic-modal>
+</template>
+<script>
+export default {
+  name: "modal_program_special_place_holder",
+  data: () => ({
+    form: {},
+    placeHolders: [
+      {
+        id: 1,
+        name: "Home latest program",
+      },
+      {
+        id: 2,
+        name: "Home special program",
+      },
+    ],
+    switches: [],
+  }),
+  methods: {
+    changeSwitch(id) {
+      const value = this.switches[id];
+      console.log(id, value, this.switches);
+      // if (value) {
+      //   this.form.special_views.push(id);
+      // } else {
+      //   this.$delete(
+      //     this.form.special_views,
+      //     this.form.special_views.findIndex((x) => x === id)
+      //   );
+      // }
+    },
+  },
+};
+</script>
+<style lang="scss">
+/* -------------------- switch ------------------------------*/
+.v-input--switch.special__place__holder label {
+  margin-bottom: 0;
+  color: var(--color-white) !important;
+  font-family: "montserrat-light" !important;
+  font-size: 26px !important;
+}
+</style>

src/components/Workouts/Items.vue

@@ -62,7 +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/SpecialPlaceHolder.vue";
+import SpecialPlaceHolderModal from "./Modals/SpecialPlaceHolder.vue";
 import { mapGetters, mapActions, mapMutations } from "vuex";
 export default {
   components: {

src/components/Workouts/Modals/SpecialPlaceHolder.vue

@@ -2,7 +2,7 @@
   <basic-modal width="900" transition="slide-x-transition">
     <template #header>
       <div class="close__modal">
-        <v-icon class="WMi-cancel-1" large @click="$_closeModal()"></v-icon>
+        <v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon>
       </div>
     </template>
     <template #default>
@@ -14,15 +14,16 @@
         />
       </div>
       <div class="mt-8 mb-10">
-        <div>
-          <SpecialPlaceHolderItem
-            v-for="item in placeHolders"
-            :key="item.id"
-            :item="item"
-            v-model="switches[item.id]"
-            @change="changeSwitch(item.id)"
-          />
-        </div>
+        <v-switch
+          v-for="item in placeHolders"
+          :key="item.id"
+          v-model="switches[item.id]"
+          inset
+          color="#ffd600"
+          :label="item.name"
+          class="special__place__holder"
+          @change="changeSwitch"
+        ></v-switch>
       </div>
     </template>
     <template #footer>
@@ -31,7 +32,7 @@
         <RectangleButton
           height="29"
           class="btn__modal--confirm custom-btn wa__f__m__eb"
-          text="close"
+          text="save"
           @click="$_closeModal()"
         />
       </div>
@@ -39,12 +40,8 @@
   </basic-modal>
 </template>
 <script>
-import SpecialPlaceHolderItem from "./Item.vue";
 export default {
   name: "modal_workout_special_place_holder",
-  components: {
-    SpecialPlaceHolderItem,
-  },
   data: () => ({
     form: {},
     placeHolders: [
@@ -75,3 +72,12 @@ export default {
   },
 };
 </script>
+<style lang="scss">
+/* -------------------- switch ------------------------------*/
+.v-input--switch.special__place__holder label {
+  margin-bottom: 0;
+  color: var(--color-white) !important;
+  font-family: "montserrat-light" !important;
+  font-size: 26px !important;
+}
+</style>

src/components/Workouts/Modals/SpecialPlaceHolder/Item.vue

@@ -1,38 +0,0 @@
-<template>
-  <v-switch
-    v-model="placeHolder"
-    inset
-    color="#ffd600"
-    :label="item.name"
-    class="special__place__holder"
-    @change="$emit('change')"
-  ></v-switch>
-</template>
-<script>
-export default {
-  name: "special_place_holder_item",
-  props: {
-    value: {},
-    item: {},
-  },
-  computed: {
-    placeHolder: {
-      get() {
-        return this.value;
-      },
-      set(value) {
-        this.$emit("input", value);
-      },
-    },
-  },
-};
-</script>
-<style lang="scss">
-/* -------------------- switch ------------------------------*/
-.v-input--switch.special__place__holder label {
-  margin-bottom: 0;
-  color: var(--color-white) !important;
-  font-family: "montserrat-light" !important;
-  font-size: 26px !important;
-}
-</style>

src/styles/vuetify/_modify.scss

@@ -283,7 +283,7 @@ input::placeholder {
 /* -------------------- button on modal ------------------------------*/
 .close__modal {
     position: absolute;
-    top: 0;
+    top: 13%;
     right: 0;
     cursor: pointer;
 }