asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

added dark mode for reference

Browse Source
This commit is contained in:
Shahed Nasser
2022-04-22 15:33:49 +03:00
parent 5fbfa2a438
commit c1afef4641
26 changed files with 239 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
www/reference/src/components/ColorModeToggler/index.css Normal file
View File

@@ -0,0 +1,17 @@
.dark-mode-toggler {
background: transparent;
border: 0;
border-radius: 50%;
height: 32px;
width: 32px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin-left: 5px;
color: var(--theme-ui-colors-text)
}
.dark-mode-toggler:hover {
background-color: #00000010;
}

26
www/reference/src/components/ColorModeToggler/index.js Normal file
View File

@@ -0,0 +1,26 @@
import "./index.css"
import DarkMode from "../icons/dark-mode"
import LightMode from "../icons/light-mode"
import React from 'react'
import { ThemeToggler } from 'gatsby-plugin-dark-mode'
import { useColorMode } from 'theme-ui'
export default function ColorModeToggler () {
const [colorMode, setColorMode] = useColorMode()
return (
<ThemeToggler>
{({ theme, toggleTheme }) => (
<button onClick={() => {
const mode = theme == 'dark' ? 'light' : 'dark';
toggleTheme(mode);
setColorMode(mode);
}} className="dark-mode-toggler">
{theme == "light" && <LightMode />}
{theme == "dark" && <DarkMode />}
</button>
)}
</ThemeToggler>
)
}

11
www/reference/src/components/content/code-box.js
View File

@@ -1,6 +1,7 @@
import React from "react"
import { Flex, Box, Text } from "theme-ui"
import { Box, Flex, Text } from "theme-ui"
import CopyToClipboard from "../CopyToClipboard"
import React from "react"
const CodeBox = ({ header, children, shell, content, allowCopy }) => {
return (
@@ -8,7 +9,7 @@ const CodeBox = ({ header, children, shell, content, allowCopy }) => {
sx={{
background: "fadedContrast",
borderRadius: "small",
boxShadow: "0 0 0 1px rgb(0 0 0 / 7%)",
boxShadow: "0 0 0 1px var(--theme-ui-colors-primaryLight)",
alignSelf: "flex-start",
marginLeft: "auto",
marginRight: "auto",
@@ -18,7 +19,7 @@ const CodeBox = ({ header, children, shell, content, allowCopy }) => {
>
<Box
sx={{
bg: "faded",
bg: "primary",
p: "8px 10px",
letterSpacing: "0.01em",
borderRadius: "8px 8px 0 0",
@@ -31,7 +32,7 @@ const CodeBox = ({ header, children, shell, content, allowCopy }) => {
alignItems: "baseline",
}}
>
<Text variant="small" sx={{ fontWeight: "400" }}>
<Text variant="small" sx={{ fontWeight: "400", color: "light" }}>
{header.toUpperCase()}
</Text>
{allowCopy ? (

9
www/reference/src/components/content/parameters.js
View File

@@ -1,8 +1,9 @@
import React from "react"
import { Flex, Text, Box } from "theme-ui"
import { Box, Flex, Text } from "theme-ui"
import Description from "./description"
import Markdown from "react-markdown"
import NestedCollapsible from "./collapsible"
import Description from "./description"
import React from "react"
const Parameters = ({ params, type }) => {
const getDescriptions = (title, items) => {
@@ -33,7 +34,7 @@ const Parameters = ({ params, type }) => {
>
<Flex sx={{ alignItems: "baseline", fontSize: "0" }}>
<Text mr={2}>{prop.property || prop.name}</Text>
<Text color={"gray"}>
<Text color={"#707070"}>
{prop.type || prop.schema?.type || nested?.title}
</Text>
{prop.required ? (

5
www/reference/src/components/icons/clipboard.js
View File

@@ -1,7 +1,6 @@
import { Image } from "@theme-ui/components"
import React from "react"
import Logo from "../../assets/clipboard.svg"
import React from "react"
const Clipboard = () => {
return (
@@ -9,7 +8,7 @@ const Clipboard = () => {
src={Logo}
sx={{
height: "100%",
fill: "#000",
fill: "light",
cursor: 'pointer'
}}
/>

20
www/reference/src/components/icons/dark-mode.js Normal file
View File

@@ -0,0 +1,20 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
export default function DarkMode(props) {
return (
<svg viewBox="0 0 24 24" width={24} height={24} {...props}>
<path
fill="currentColor"
d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"
/>
</svg>
);
}

12
www/reference/src/components/icons/github.js
View File

@@ -1,15 +1,17 @@
import { Image } from "@theme-ui/components"
import React from "react"
import Logo from "../../assets/github.svg"
import LogoLight from "../../assets/github-light.svg"
import React from "react"
import { useColorMode } from 'theme-ui'
const GitHub = () => {
const [colorMode, setColorMode] = useColorMode()
return (
<Image
src={Logo}
src={colorMode == 'light' ? Logo : LogoLight}
sx={{
height: "20px",
fill: "#000",
height: "24px",
}}
/>
)

20
www/reference/src/components/icons/light-mode.js Normal file
View File

@@ -0,0 +1,20 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
export default function LightMode(props) {
return (
<svg viewBox="0 0 24 24" width={24} height={24} {...props}>
<path
fill="currentColor"
d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"
/>
</svg>
);
}

1
www/reference/src/components/layout.js
View File

@@ -35,6 +35,7 @@ const Layout = ({ data, api, children }) => {
fontFamily: "body",
flexGrow: "1",
}}
className="layout-container"
>
<Sidebar data={data} api={api} />
<ContentBox>{children}</ContentBox>

12
www/reference/src/components/side-bar/index.js
View File

@@ -2,11 +2,13 @@ import { Box, Flex, Image } from "theme-ui"
import React, { useEffect, useState } from "react"
import Logo from "../../assets/logo.svg"
import LogoDark from "../../assets/logo-dark.svg"
import LogoMuted from "../../assets/logo-muted.svg"
import SideBarItem from "./sidebar-item"
import SideBarSelector from "./sidebar-selector"
import { navigate } from "gatsby"
import styled from "@emotion/styled"
import { useColorMode } from 'theme-ui'
const SideBarContainer = styled(Flex)`
@media screen and (max-width: 848px) {
@@ -26,6 +28,7 @@ const SideBarFade = styled(Box)`
const Sidebar = ({ data, api }) => {
const [scrollPos, setScrollPos] = useState(0)
const [colorMode, setColorMode] = useColorMode()
useEffect(() => {
const nav = document.querySelector("#nav")
@@ -47,24 +50,25 @@ const Sidebar = ({ data, api }) => {
top: "0",
bottom: "0",
height: "100vh",
backgroundColor: "light",
backgroundColor: "var(--theme-ui-colors-background)",
boxShadow: "sidebarShadow",
minWidth: "var(--side-bar-width)",
flexDirection: "column",
}}
className="sidebar-container"
>
<Flex
sx={{
px: "4",
pt: "3",
background: "light",
background: "var(--theme-ui-colors-background)",
width: "calc(var(--side-bar-width) - 1px)",
flexDirection: "column",
}}
>
<Flex>
<Image
src={Logo}
src={colorMode == 'light' ? Logo : LogoDark}
alt="Medusa logo"
onClick={() => navigate("/")}
sx={{
@@ -96,7 +100,7 @@ const Sidebar = ({ data, api }) => {
return <SideBarItem item={s} key={i} />
})}
</Flex>
<Flex sx={{ py: 4, px: 4, borderTop: "1px solid #efefef" }}>
<Flex sx={{ py: 4, px: 4, borderTop: "1px solid var(--theme-ui-colors-separator)" }}>
<Image src={LogoMuted} alt="Medusa Type" sx={{ height: "10px" }} />
</Flex>
</SideBarContainer>

16
www/reference/src/components/side-bar/sidebar-item.js
View File

@@ -81,8 +81,12 @@ const SideBarItem = ({ item }) => {
height: "25px",
justifyContent: "space-between",
"&:hover, &.active": {
backgroundColor: "faded",
backgroundColor: "primary",
color: "light"
},
"&:hover svg, &.active svg": {
color: "light"
}
}}
className={
currentSection === convertToKebabCase(section.section_name)
@@ -90,7 +94,7 @@ const SideBarItem = ({ item }) => {
: null
}
>
{section.section_name} <ChevronDown />
{section.section_name} <ChevronDown fill={"light"} />
</Flex>
}
open={isOpen}
@@ -114,13 +118,15 @@ const SideBarItem = ({ item }) => {
cursor: "pointer",
mb: "8px",
textDecoration: "none",
color: "black",
color: "text",
height: "25px",
"&:hover": {
backgroundColor: "faded",
backgroundColor: "primary",
color: "light"
},
"&.active": {
backgroundColor: "faded",
backgroundColor: "primary",
color: "light"
},
}}
>

7
www/reference/src/components/side-bar/sidebar-selector.js
View File

@@ -1,8 +1,9 @@
import React, { useContext } from "react"
import { Flex, Select } from "theme-ui"
import { navigate } from "gatsby-link"
import NavigationContext from "../../context/navigation-context"
import React, { useContext } from "react"
import ChevronDown from "../icons/chevron-down"
import NavigationContext from "../../context/navigation-context"
import { navigate } from "gatsby-link"
const SideBarSelector = ({ api }) => {
const { reset } = useContext(NavigationContext)

2
www/reference/src/components/topbar.js
View File

@@ -2,6 +2,7 @@ import { Box, Flex, Link, Select } from "@theme-ui/components"
import React, { useContext } from "react"
import ChevronDown from "./icons/chevron-down"
import ColorModeToggler from "./ColorModeToggler"
import GitHub from "../components/icons/github"
import NavigationContext from "../context/navigation-context"
import Search from "./search"
@@ -116,6 +117,7 @@ const Topbar = ({ data, api }) => {
<GitHub />
</Link>
<Search data={data} />
<ColorModeToggler />
</Flex>
</Flex>
)