fix

src/components/Bookmarks/Workouts/Workouts.vue

@@ -38,7 +38,7 @@
                   size="large"
                   height="26"
                   icon="WMi-trash"
-                  class="custom-btn custom-icon ml-1"
+                  class="custom-btn ml-1"
                   @click.native="deleteBookmarkWorkout(workout.id)"
                 />
               </div>

src/components/Global/Button/RectangleButton.vue

@@ -3,10 +3,13 @@
     :text="textMode"
     depressed
     :height="height"
-    x-small
     :width="width"
     :class="`color-${color} ${bgColor}`"
     :type="type"
+    :x-small="xs"
+    :small="sm"
+    :large="lg"
+    :x-large="xl"
   >
     <template v-if="text">
       <template v-if="icon"
@@ -50,6 +53,13 @@ export default {
       type: String,
       default: "button",
     },
+    xs: {
+      type: Boolean,
+      default: true,
+    },
+    sm: Boolean,
+    lg: Boolean,
+    xl: Boolean,
   },
 };
 </script>
@@ -57,17 +67,14 @@ export default {
 .custom-btn {
   border: 2px solid var(--color-white) !important;
 }
-.custom-icon {
-  padding: 5px !important;
-}
 .filter-btn .v-btn__content .v-icon,
 .filter-btn .v-btn__content .v-icon::before {
   margin-left: 0 !important;
 }
-.modal__icon::before {
-  margin-right: 0 !important;
-  margin-left: 0 !important;
-}
+// .modal__icon::before {
+//   margin-right: 0 !important;
+//   margin-left: 0 !important;
+// }
 @import "../../../styles/setup/variables.scss";
 @each $color, $value in $allColors {
   .v-btn.color-#{ "" + $color} {
@@ -77,4 +84,4 @@ export default {
     background-color: $value !important;
   }
 }
-</style>
+</style>

src/components/Global/Section/Back.vue

@@ -19,9 +19,10 @@ export default {
   display: flex;
   align-items: baseline;
   letter-spacing: 2px;
+  width: max-content;
   color: var(--color-gray) !important;
 }
 .wa__back i {
   font-size: 13px;
 }
-</style>
+</style>

src/components/ProgramSeries/Item.vue

@@ -40,14 +40,14 @@
             size="large"
             height="35"
             width="48"
-            class="ml-1 custom-btn custom-icon"
+            class="ml-1 custom-btn"
             icon="WMi-yoga-posture"
           />
           <RectangleButton
             size="large"
             height="35"
             width="48"
-            class="ml-1 custom-btn custom-icon"
+            class="ml-1 custom-btn"
             icon="WMi-pencil"
           />
           <RectangleButton
@@ -55,7 +55,7 @@
             size="large"
             height="35"
             width="48"
-            class="ml-1 custom-btn custom-icon"
+            class="ml-1 custom-btn"
             icon=" WMi-trash"
             @click.native.prevent="deleteSeriesFromProgram(series.id)"
           />

src/components/Programs/Items.vue

@@ -29,7 +29,7 @@
               <RectangleButton
                 icon="WMi-plus"
                 size="xx-large"
-                class="custom-btn custom-icon"
+                class="custom-btn"
                 height="54"
                 :text-mode="true"
               />

src/components/Users/Item.vue

@@ -2,7 +2,7 @@
   <div class="user__card">
     <v-row>
       <v-col cols="3">
-        <div class="d-flex align-center mt-1 h-100" style="overflow: hidden">
+        <div class="d-flex align-center h-100" style="overflow: hidden">
           <div style="line-height: 14px">
             <div class="user__name wa__f__m__eb">
               {{ user.first_name }} {{ user.last_name }}
@@ -43,7 +43,7 @@
           <RectangleButton
             height="35"
             width="48"
-            class="ml-1 custom-btn custom-icon"   
+            class="ml-1 custom-btn"   
             icon="WMi-gold-medal"
             @click.native="chageRole"
             v-if="role === 'admin'"
@@ -53,7 +53,7 @@
           <RectangleButton
             height="35"
             width="48"
-            class="ml-1 custom-btn custom-icon"
+            class="ml-1 custom-btn"
             size="large"
             icon="WMi-pencil"
           />
@@ -61,7 +61,7 @@
           <RectangleButton
             height="35"
             width="48"
-            class="ml-1 custom-btn custom-icon"
+            class="ml-1 custom-btn"
             icon=" WMi-trash"
             size="large"
             @click.native="removeUser(user.id)"

src/components/Workouts/Item.vue

@@ -41,7 +41,7 @@
                   size="large"
                   height="26"
                   icon="WMi-trash"
-                  class="custom-btn custom-icon ml-1"
+                  class="custom-btn ml-1"
                   @click.native="removeWorkout(workout.id)"
                 />
                 <router-link
@@ -54,7 +54,7 @@
                     size="large"
                     height="26"
                     icon="WMi-pencil"
-                    class="custom-btn custom-icon ml-1"
+                    class="custom-btn ml-1"
                   />
                 </router-link>
               </div>

src/components/WorkoutsSeries/Item.vue

@@ -45,14 +45,14 @@
                   size="large"
                   height="26"
                   icon="WMi-trash"
-                  class="custom-btn custom-icon ml-1"
+                  class="custom-btn ml-1"
                   @click.native="removeWorkoutFromSeries(seriesWorkout)"
                 />
                 <RectangleButton
                   size="large"
                   height="26"
                   icon="WMi-pencil"
-                  class="custom-btn custom-icon ml-1"
+                  class="custom-btn ml-1"
                 />
               </div> -->
             </div>