clean up tabs

docs/src/components/ConfigTabs/index.jsx

@@ -1,18 +1,34 @@
-import React from "react";
+import React, { Children, cloneElement } from "react";
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 
 export default function ConfigTabs({ children }) {
+  const wrapped = Children.map(children, (child) => {
+    if (child?.props?.value === "ui") {
+      return cloneElement(child, {
+        className: "config-tab-ui",
+      });
+    }
+    if (child?.props?.value === "yaml") {
+      return cloneElement(child, {
+        className: "config-tab-yaml",
+      });
+    }
+    return child;
+  });
+
   return (
-    <Tabs
-      groupId="config-method"
-      defaultValue="ui"
-      values={[
-        { label: "Frigate UI", value: "ui" },
-        { label: "YAML", value: "yaml" },
-      ]}
-    >
-      {children}
-    </Tabs>
+    <div className="config-tabs-wrapper">
+      <Tabs
+        groupId="config-method"
+        defaultValue="ui"
+        values={[
+          { label: "Frigate UI", value: "ui" },
+          { label: "YAML", value: "yaml" },
+        ]}
+      >
+        {wrapped}
+      </Tabs>
+    </div>
   );
 }

docs/src/components/NavPath/index.jsx

@@ -16,10 +16,10 @@ export default function NavPath({ path }) {
             <span
               style={{
                 margin: "0 4px",
-                color: "var(--ifm-color-emphasis-500)",
+                color: "var(--ifm-color-emphasis-800)",
               }}
             >
-              ›
+              →
             </span>
           )}
           <strong>{seg}</strong>

docs/src/css/custom.css

@@ -241,4 +241,50 @@
   margin: 0 calc(-1 * var(--ifm-pre-padding));
   padding: 0 var(--ifm-pre-padding);
   border-left: 3px solid #ff000080;
+}
+
+/* ConfigTabs wrapper */
+.config-tabs-wrapper {
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 8px;
+  overflow: hidden;
+  margin-bottom: 16px;
+}
+
+.config-tabs-wrapper .tabs-container {
+  margin-bottom: 0 !important;
+}
+
+.config-tabs-wrapper .tabs {
+  background: var(--ifm-color-emphasis-100);
+  border-bottom: 1px solid var(--ifm-color-emphasis-300);
+  margin-bottom: 0;
+  padding: 0 12px;
+}
+
+.config-tabs-wrapper .tabs__item {
+  padding: 8px 16px;
+  border-radius: 0;
+}
+
+.config-tabs-wrapper .tabs__item--active {
+  border-bottom-color: var(--ifm-color-primary);
+}
+
+.config-tabs-wrapper .config-tab-ui {
+  padding: 4px 16px 16px;
+}
+
+.config-tabs-wrapper .config-tab-ui > :last-child {
+  margin-bottom: 0;
+}
+
+.config-tabs-wrapper div[class*="codeBlockContainer"] {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  margin: 0;
+}
+
+.config-tabs-wrapper .tabs-container > .margin-top--md:has(.config-tab-yaml:not([hidden])) {
+  margin-top: 0 !important;
 }