@t2ca/gatsby-theme-showcase 1.0.14 → 1.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@t2ca/gatsby-theme-showcase",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "main": "index.js",
   "license": "MIT",
   "devDependencies": {
@@ -26,18 +26,18 @@
     "@emotion/styled": "^10.0.17",
     "@hot-loader/react-dom": "^16.9.0",
     "@mdx-js/mdx": "^1.4.0",
-    "@theme-ui/components": "^0.3.0-alpha.4",
-    "@theme-ui/preset-bootstrap": "^0.3.0-alpha.4",
-    "@theme-ui/preset-tailwind": "^0.3.0-alpha.4",
-    "@theme-ui/sidenav": "^0.3.0-alpha.4",
-    "@theme-ui/typography": "^0.3.0-alpha.4",
+    "@theme-ui/components": "^0.3.0-alpha.6",
+    "@theme-ui/preset-bootstrap": "^0.3.0-alpha.6",
+    "@theme-ui/preset-tailwind": "^0.3.0-alpha.6",
+    "@theme-ui/sidenav": "^0.3.0-alpha.6",
+    "@theme-ui/typography": "^0.3.0-alpha.6",
     "deepmerge": "^4.0.0",
     "gatsby": "^2.13.3",
     "gatsby-image": "^2.2.7",
     "gatsby-plugin-emotion": "^4.1.2",
     "gatsby-plugin-mdx": "^1.0.33",
     "gatsby-plugin-sharp": "^2.2.9",
-    "gatsby-plugin-theme-ui": "^0.3.0-alpha.4",
+    "gatsby-plugin-theme-ui": "^0.3.0-alpha.6",
     "gatsby-remark-images": "^3.1.7",
     "gatsby-source-filesystem": "^2.1.4",
     "gatsby-transformer-json": "^2.2.2",
@@ -49,7 +49,7 @@
     "react-spring": "^8.0.27",
     "react-switch": "^5.0.0",
     "remark-slug": "^5.1.2",
-    "theme-ui": "^0.3.0-alpha.4"
+    "theme-ui": "^0.3.0-alpha.6"
   },
   "scripts": {
     "build": "gatsby build",

package/src/components/footer.js

@@ -1,11 +1,11 @@
 /** @jsx jsx */
 import React from "react"
-import { jsx, Flex, Container } from "theme-ui"
+import { jsx, Box, Container } from "theme-ui"
 
 export default ({ name }) => {
   return (
-    <Flex sx={{ backgroundColor: "#1b1c1d", color: "white" }}>
-      <Container sx={{ px: 3, py: 4 }}>{name}</Container>
-    </Flex>
+    <Box bg="#1b1c1d" sx={{ color: `white` }} p={4}>
+      <Container>{name}</Container>
+    </Box>
   )
 }

package/src/components/header.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React from "react"
 import { Link } from "gatsby"
-import { jsx, Container, Flex } from "theme-ui"
+import { jsx, Container, Box } from "theme-ui"
 
 import MenuButton from "./menu-button"
 import NavLink from "./nav-link"
@@ -9,10 +9,11 @@ import ColorModeToggle from "./color-mode-toggle"
 
 export default ({ setMenuOpen, styles, menuOpen, nav, name, menuList }) => {
   return (
-    <Flex
+    <Box
+      p={4}
       sx={{ ...styles, position: `fixed`, zIndex: `100`, width: `100%`, py: 2 }}
     >
-      <Container sx={{ py: 0, px: 4 }}>
+      <Container>
         <div
           sx={{
             display: `flex`,
@@ -63,6 +64,6 @@ export default ({ setMenuOpen, styles, menuOpen, nav, name, menuList }) => {
           </div>
         </div>
       </Container>
-    </Flex>
+    </Box>
   )
 }

package/src/components/navigation-mobile.js

@@ -1,13 +1,11 @@
 /** @jsx jsx */
 import React from "react"
-import { jsx, useColorMode } from "theme-ui"
+import { jsx } from "theme-ui"
 import { Link } from "gatsby"
 
 import Icon from "./icon"
 
-const MobileNavItem = ({ linkTo, label, icon, isDark }) => {
-  const [colorMode] = useColorMode()
-
+const MobileNavItem = ({ linkTo, label, icon }) => {
   const linkStyles = {
     borderRadius: 1,
     color: `text`,

package/src/gatsby-plugin-theme-ui/styles.js

@@ -1,8 +1,8 @@
 export default {
   Container: {
-    // py: 3,
-    // width: ["100%", "90%"],
-    // maxWidth: "1168px",
+    py: 3,
+    width: ["100%", "90%"],
+    maxWidth: "1168px",
   },
   Header: {
     primary: {