refactor: improve view-options component (#647)

ArkEcosystemArchive · Sep 15, 2021 · a424818 · a424818
1 parent 7e85be4
commit a424818
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/resources/assets/css/_buttons.css b/resources/assets/css/_buttons.css
@@ -187,3 +187,12 @@ a.button-secondary {
 .dark .button-icon-primary:hover {
     @apply shadow-none;
 }
+
+.view-option-button {
+    @apply relative;
+}
+.view-option-button.active:not(:focus-visible)::before {
+    content: "";
+    @apply absolute bottom-0 left-0 right-0 bg-theme-primary-600;
+    height: 3px;
+}
diff --git a/resources/views/tables/view-options.blade.php b/resources/views/tables/view-options.blade.php
@@ -9,10 +9,10 @@
     <button
         type="button"
         :class="{
-            '{{ $selectedClasses }} focus-visible:border-transparent': tableView === 'grid',
+            '{{ $selectedClasses }} active': tableView === 'grid',
             '{{ $unselectedClasses }}': tableView !== 'grid',
         }"
-        class="py-2 px-3 focus-visible:rounded border-b-3"
+        class="p-3 focus-visible:rounded view-option-button"
         @click="tableView = 'grid'"
         @if ($disabled) disabled @endif
     >
@@ -22,10 +22,10 @@ class="py-2 px-3 focus-visible:rounded border-b-3"
     <button
         type="button"
         :class="{
-            '{{ $selectedClasses }} focus-visible:border-transparent': tableView === 'list',
+            '{{ $selectedClasses }} active': tableView === 'list',
             '{{ $unselectedClasses }}': tableView !== 'list',
         }"
-        class="py-2 px-3 focus-visible:rounded border-b-3"
+        class="p-3 focus-visible:rounded view-option-button"
         @click="tableView = 'list'"
         @if ($disabled) disabled @endif
     >