From 86b5b0aa588072c7179a448c16a18e80d004d5cd Mon Sep 17 00:00:00 2001
From: Holly Cummins <hcummins@redhat.com>
Date: Wed, 13 Nov 2024 21:59:36 +0000
Subject: [PATCH] Improve look of tabs

---
 src/components/extensions-display/tabs.js | 59 +++++++++++++++++++++++
 src/style.css                             |  2 +
 src/templates/extension-detail.js         |  6 ++-
 3 files changed, 66 insertions(+), 1 deletion(-)
 create mode 100644 src/components/extensions-display/tabs.js

diff --git a/src/components/extensions-display/tabs.js b/src/components/extensions-display/tabs.js
new file mode 100644
index 000000000000..1ec59346b8d2
--- /dev/null
+++ b/src/components/extensions-display/tabs.js
@@ -0,0 +1,59 @@
+import styled from "styled-components"
+import {
+  Tab as UnstyledTab,
+  TabList as UnstyledTabList,
+  TabPanel as UnstyledTabPanel,
+  Tabs as UnstyledTabs
+} from "react-tabs"
+
+const Tabs = styled(UnstyledTabs)`
+  background: var(--main-background-color);
+`
+
+const TabList = styled(UnstyledTabList)`
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  padding: 0;
+  margin: 0;
+`
+
+const Tab = styled(UnstyledTab).attrs({
+  selectedClassName: "selected",
+  disabledClassName: "disabled"
+})`
+  flex-grow: 1;
+  text-align: center;
+  padding: 12px 0;
+  list-style: none;
+  cursor: pointer;
+  border-bottom: 1px solid var(--card-outline);
+
+  &:first-child {
+    border-left: none;
+  }
+
+  &.selected {
+    border-bottom: 5px var(--highlight-color) solid;
+  }
+
+  &.disabled {
+    color: var(--unlisted-text-color);
+    cursor: not-allowed;
+  }
+`
+
+const TabPanel = styled(UnstyledTabPanel).attrs({ selectedClassName: "selected" })`
+  display: none;
+
+  &.selected {
+    display: block;
+  }
+`
+
+Tab.tabsRole = "Tab"
+Tabs.tabsRole = "Tabs"
+TabPanel.tabsRole = "TabPanel"
+TabList.tabsRole = "TabList"
+
+export { Tab, TabList, Tabs, TabPanel }
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
index 64295c6a3ac5..903f3347f09d 100644
--- a/src/style.css
+++ b/src/style.css
@@ -28,6 +28,8 @@ html {
 
     --gentle-alert-background-color: #FDE9BF;
 
+    --highlight-color: #4695EB; /* not in the main site */
+
     --cta-background-color: #4695EB;
     --cta-hover-color: #cc0000;
     --code-background-color: #EFEFEF; /* not in the main site */
diff --git a/src/templates/extension-detail.js b/src/templates/extension-detail.js
index c9d9c435e183..472c1a2d01ad 100644
--- a/src/templates/extension-detail.js
+++ b/src/templates/extension-detail.js
@@ -10,7 +10,6 @@ import InstallationInstructions from "../components/extensions-display/installat
 import ExtensionImage from "../components/extension-image"
 import { qualifiedPrettyPlatform } from "../components/util/pretty-platform"
 import ContributionsChart from "../components/charts/contributions-chart"
-import { Tab, TabList, TabPanel, Tabs } from "react-tabs"
 import "react-tabs/style/react-tabs.css"
 import { getQueryParams, useQueryParamString } from "react-use-query-param-string"
 
@@ -21,6 +20,7 @@ import { initialiseDisplayModeFromLocalStorage } from "../components/util/dark-m
 import { device } from "../components/util/styles/breakpoints"
 import { useMediaQuery } from "react-responsive"
 import CodeLink from "../components/extensions-display/code-link"
+import { Tab, TabList, TabPanel, Tabs } from "../components/extensions-display/tabs"
 
 createCache({
   key: "my-select-cache",
@@ -173,6 +173,10 @@ const DocumentationHeading = styled.h2`
   font-weight: var(--font-weight-normal);
   font-size: var(--font-size-24);
   padding-bottom: 10px;
+  // noinspection CssUnknownProperty
+  @media ${device.xs} {
+    border-bottom: 1px solid var(--card-outline);
+  }
 `
 
 const Logo = ({ extension, isMobile }) => {