Skip to content

Commit

Permalink
Improve look of tabs
Browse files Browse the repository at this point in the history
  • Loading branch information
holly-cummins committed Nov 13, 2024
1 parent 2647646 commit 408635b
Show file tree
Hide file tree
Showing 3 changed files with 66 additions and 1 deletion.
59 changes: 59 additions & 0 deletions src/components/extensions-display/tabs.js
Original file line number Diff line number Diff line change
@@ -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 }
2 changes: 2 additions & 0 deletions src/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down
6 changes: 5 additions & 1 deletion src/templates/extension-detail.js
Original file line number Diff line number Diff line change
Expand Up @@ -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"

Expand All @@ -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",
Expand Down Expand Up @@ -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 }) => {
Expand Down

0 comments on commit 408635b

Please sign in to comment.