From e629dba77a373b7faa70ebdc11204e175cb9c9c5 Mon Sep 17 00:00:00 2001
From: Andrei Kuchuk <kreezag@gmail.com>
Date: Sun, 11 Aug 2024 13:00:32 +0400
Subject: [PATCH] #96 polish inspector-page-timeline table styles

---
 src/assets/mixins.scss                        |  2 +-
 .../inspector-page-timeline.vue               | 39 +++++++++----------
 .../smtp-page-preview/smtp-page-preview.vue   |  8 ++--
 src/shared/ui/table-base/table-base.vue       |  2 +-
 4 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/src/assets/mixins.scss b/src/assets/mixins.scss
index 35f65652..63ebbdbb 100644
--- a/src/assets/mixins.scss
+++ b/src/assets/mixins.scss
@@ -29,7 +29,7 @@
 }
 
 @mixin border-style {
-  @apply border-gray-300 dark:border-gray-500 divide-gray-300 dark:divide-gray-500;
+  @apply border border-gray-300 dark:border-gray-500 divide-gray-300 dark:divide-gray-500;
 }
 
 @mixin text-responsive {
diff --git a/src/screens/inspector/ui/inspector-page-timeline/inspector-page-timeline.vue b/src/screens/inspector/ui/inspector-page-timeline/inspector-page-timeline.vue
index 73161959..a3e5114e 100644
--- a/src/screens/inspector/ui/inspector-page-timeline/inspector-page-timeline.vue
+++ b/src/screens/inspector/ui/inspector-page-timeline/inspector-page-timeline.vue
@@ -110,7 +110,14 @@ const segmentRows = computed(() => {
       </div>
     </div>
 
-    <div v-if="segmentRows.length > 0" class="inspector-page-timeline__body">
+    <div
+      v-if="segmentRows.length > 0"
+      class="inspector-page-timeline__body"
+      :style="{
+        'background-size': `${(100 / (COLUMNS_NUMBER + 1)).toFixed(2)}% 20%`,
+        'background-position': `-${(100 / (COLUMNS_NUMBER + 1)).toFixed(2)}% auto`,
+      }"
+    >
       <div
         class="inspector-page-timeline__body-cells"
         :class="`grid-cols-${COLUMNS_NUMBER + 1}`"
@@ -124,12 +131,7 @@ const segmentRows = computed(() => {
         </div>
       </div>
 
-      <div
-        class="inspector-page-timeline__segments"
-        :style="{
-          'background-size': `${(100 / COLUMNS_NUMBER).toFixed(2)}% 20%`,
-        }"
-      >
+      <div class="inspector-page-timeline__segments">
         <div
           v-for="segmentRow in segmentRows"
           :key="`${segmentRow.label} - ${segmentRow.duration}`"
@@ -215,13 +217,16 @@ const segmentRows = computed(() => {
 }
 
 .inspector-page-timeline__body {
-  @apply border border-gray-50 dark:border-gray-600;
+  @include border-style;
+  @apply bg-gradient-to-r from-gray-300 dark:from-gray-900 from-[1px] to-transparent to-[1px];
+  @apply border-l-transparent;
 }
 
 .inspector-page-timeline__body-cells {
-  @apply grid grid-cols-6 divide-x border-b;
+  @include border-style;
+  @apply grid grid-cols-6;
+  @apply border-x-0 border-t-0;
   @apply font-bold text-center text-2xs sm:text-xs md:text-sm;
-  @apply divide-gray-50 dark:divide-gray-600 border-gray-50 dark:border-gray-600;
 }
 
 .inspector-page-timeline__body-cell {
@@ -229,23 +234,15 @@ const segmentRows = computed(() => {
 }
 
 .inspector-page-timeline__segments {
-  background-image: linear-gradient(to right, #dedede 1px, transparent 1px);
-
-  .dark & {
-    background-image: linear-gradient(
-      to right,
-      rgba(255, 255, 255, 0.04) 1px,
-      transparent 1px
-    );
-  }
+  @apply block;
 }
 
 .inspector-page-timeline__segment {
-  @apply mt-2 text-right cursor-pointer;
+  @apply text-right cursor-pointer;
 }
 
 .inspector-page-timeline__segment-label {
-  @apply text-2xs md:text-xs font-bold whitespace-nowrap px-2 pb-1 opacity-20 overflow-auto;
+  @apply text-2xs md:text-xs font-bold whitespace-nowrap px-2 py-1 opacity-20 overflow-auto;
 
   .inspector-page-timeline__segment:hover & {
     @apply opacity-100;
diff --git a/src/screens/smtp/ui/smtp-page-preview/smtp-page-preview.vue b/src/screens/smtp/ui/smtp-page-preview/smtp-page-preview.vue
index 294cd3d2..a3a76ad9 100644
--- a/src/screens/smtp/ui/smtp-page-preview/smtp-page-preview.vue
+++ b/src/screens/smtp/ui/smtp-page-preview/smtp-page-preview.vue
@@ -142,13 +142,13 @@ const currentDevice = ref(props.device);
 
   &::after {
     @include border-style;
-    @apply border bg-gray-100 dark:bg-gray-900 rounded-full block w-12 h-12 my-4;
+    @apply bg-gray-100 dark:bg-gray-900 rounded-full block w-12 h-12 my-4;
     content: "";
   }
 
   &::before {
     @include border-style;
-    @apply border bg-gray-100 dark:bg-gray-900 rounded-full block w-3 h-3 my-2;
+    @apply bg-gray-100 dark:bg-gray-900 rounded-full block w-3 h-3 my-2;
     content: "";
   }
 }
@@ -158,13 +158,13 @@ const currentDevice = ref(props.device);
 
   &::before {
     @include border-style;
-    @apply border bg-gray-100 dark:bg-gray-900 rounded-full block w-3 h-3 my-2;
+    @apply bg-gray-100 dark:bg-gray-900 rounded-full block w-3 h-3 my-2;
     content: "";
   }
 
   &::after {
     @include border-style;
-    @apply border bg-gray-100 dark:bg-gray-900 rounded-full block w-8 h-8 my-3;
+    @apply bg-gray-100 dark:bg-gray-900 rounded-full block w-8 h-8 my-3;
     content: "";
   }
 }
diff --git a/src/shared/ui/table-base/table-base.vue b/src/shared/ui/table-base/table-base.vue
index 6ede27f9..047cb119 100644
--- a/src/shared/ui/table-base/table-base.vue
+++ b/src/shared/ui/table-base/table-base.vue
@@ -10,7 +10,7 @@
 @import "src/assets/mixins";
 .table-base {
   @include border-style;
-  @apply bg-gray-100 dark:bg-gray-800 text-sm border divide-y;
+  @apply bg-gray-100 dark:bg-gray-800 text-sm divide-y;
 }
 </style>