From ae0ff60ccbc582ec77c245fcf4d3bfba284ca4a8 Mon Sep 17 00:00:00 2001
From: Rob Dominguez <rob.dominguez@hasura.io>
Date: Mon, 22 Apr 2024 08:06:23 -0500
Subject: [PATCH] UI: refactor tabs (#379)

---
 src/css/custom.css | 36 +++++++++++++++++++++++++++++++-----
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/css/custom.css b/src/css/custom.css
index 64ba6efa1..7aff3a69c 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -39,6 +39,7 @@
   --next-prev-border-color: #e5e7eb;
   --search-dark-bg-color: #28334f;
   --ifm-color-info-dark: #c6d6ff;
+  --purple-pill: #8c49fa;
   --ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15,12.5,L10,7.5L5,12.5" stroke="gray" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg>');
 }
 
@@ -373,7 +374,9 @@ ol li {
   background-color: var(--base-neutral-0);
   padding: 0;
   padding: 4px 8px 4px 16px;
-  box-shadow: 0px 1px 2px 0px rgba(28, 38, 63, 0.06), 0px 1px 3px 0px rgba(28, 38, 63, 0.1);
+  box-shadow:
+    0px 1px 2px 0px rgba(28, 38, 63, 0.06),
+    0px 1px 3px 0px rgba(28, 38, 63, 0.1);
   width: 120px;
 }
 
@@ -404,7 +407,9 @@ ol li {
   top: calc(100% - var(--ifm-navbar-item-padding-vertical) + 0.6rem);
   width: 120px;
   min-width: 120px;
-  box-shadow: 0px 1px 2px 0px rgba(28, 38, 63, 0.06), 0px 1px 3px 0px rgba(28, 38, 63, 0.1);
+  box-shadow:
+    0px 1px 2px 0px rgba(28, 38, 63, 0.06),
+    0px 1px 3px 0px rgba(28, 38, 63, 0.1);
   margin-top: -6px;
 }
 
@@ -439,7 +444,9 @@ ol li {
   max-width: 370px;
   width: 100%;
   padding: 8px 20px 8px 16px;
-  box-shadow: 0px 1px 2px 0px rgba(28, 38, 63, 0.06), 0px 1px 3px 0px rgba(28, 38, 63, 0.1);
+  box-shadow:
+    0px 1px 2px 0px rgba(28, 38, 63, 0.06),
+    0px 1px 3px 0px rgba(28, 38, 63, 0.1);
   background-color: var(--base-neutral-0);
   border: 1px solid transparent;
 }
@@ -456,7 +463,9 @@ div:has(> .DocSearch.DocSearch-Button) {
 .DocSearch-Button:focus,
 .DocSearch-Button:hover {
   border: 1px solid var(--primary-blue-600);
-  box-shadow: 0px 1px 2px 0px rgba(28, 38, 63, 0.06), 0px 1px 3px 0px rgba(28, 38, 63, 0.1) !important;
+  box-shadow:
+    0px 1px 2px 0px rgba(28, 38, 63, 0.06),
+    0px 1px 3px 0px rgba(28, 38, 63, 0.1) !important;
 }
 
 .DocSearch-Button-Keys {
@@ -726,7 +735,7 @@ iframe {
 .tabs__item--active,
 .tabs__item--active:hover {
   border-bottom-color: var(--primary-blue-600);
-  background-color: #8c49fa;
+  background-color: var(--purple-pill);
   color: var(--base-neutral-0) !important;
   box-shadow: 0px 1px 2px 0px rgba(28, 38, 63, 0.05);
 }
@@ -1447,3 +1456,20 @@ table td {
   box-shadow: var(--ifm-global-shadow-md);
   cursor: pointer;
 }
+
+/* Additional styling for .tabs-container */
+.tabs-container {
+  padding: 1rem;
+  padding-bottom: 1rem;
+  border-radius: 0.5rem;
+  border: solid 1px var(--purple-pill);
+  box-shadow: var(--ifm-global-shadow-md);
+}
+
+[data-theme='dark'] .tabs-container {
+  background: var(--color-gray-82);
+}
+
+.tabs-container code {
+  background: var(--color-gray-74);
+}