refactor: refs #7347 update checkbox and icon implementation

src/css/app.scss

@@ -319,14 +319,7 @@ input::-webkit-inner-spin-button {
 .q-item > .q-item__section:has(.q-checkbox) {
     max-width: fit-content;
 }
-.vn-row > * .q-checkbox r {
+
-    min-width: 80%;
-    display: flex;
-    justify-content: space-between;
-}
-.vn-row > .q-checkbox.row.items-center {
-    max-width: fit-content;
-}
 .q-field__inner {
     .q-field__control {
         min-height: auto !important;
@@ -366,4 +359,4 @@ input::-webkit-inner-spin-button {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-evenly;
-}
+}

src/pages/Supplier/Card/SupplierConsumption.vue

@@ -283,10 +283,11 @@ const expanded = ref([]);
                     @click="props.expand = !props.expand"
                 >
                     <QTd auto-width>
-                        <QToggle
+                        <QIcon
-                            v-model="props.expand"
+                            :class="props.expand ? '' : 'rotate-270'"
-                            checked-icon="vn:eye"
+                            name="expand_circle_down"
-                            unchecked-icon="remove"
+                            size="md"
+                            :color="props.expand ? 'primary' : 'white'"
                         />
                     </QTd>
 

src/pages/Zone/ZoneUpcoming.vue

@@ -59,27 +59,11 @@ onMounted(() => weekdayStore.initStore());
                 v-for="(detail, index) in details"
                 :key="index"
                 class="full-width flex q-mb-lg"
-                style="flex-direction: column"
             >
-                <div class="column full-width">
+                <span class="header">
-                    <div class="flex">
+                    {{ getHeaderTitle(detail.shipped) }}
-                        <span class="header">
+                </span>
-                            {{ getHeaderTitle(detail.shipped) }}
+                <QTable flat :columns="columns" :rows="detail.lines" class="full-width" />
-                        </span>
-                        <span class="header">
-                            {{ getHeaderTitle(detail.shipped) }}
-                        </span>
-                        <span class="header">
-                            {{ getHeaderTitle(detail.shipped) }}
-                        </span>
-                    </div>
-                    <QTable
-                        flat
-                        :columns="columns"
-                        :rows="detail.lines"
-                        class="full-width"
-                    />
-                </div>
             </div>
         </QCard>
     </QPage>
@@ -87,7 +71,7 @@ onMounted(() => weekdayStore.initStore());
 
 <style scoped lang="scss">
 .header {
-    flex: 1 0 33%;
+    min-width: 100% !important;
     display: flex;
     align-items: center;
     padding-left: 8px;