@t2ca/gatsby-theme-showcase 1.0.15 → 1.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@t2ca/gatsby-theme-showcase",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "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.5",
-    "@theme-ui/preset-bootstrap": "^0.3.0-alpha.5",
-    "@theme-ui/preset-tailwind": "^0.3.0-alpha.5",
-    "@theme-ui/sidenav": "^0.3.0-alpha.5",
-    "@theme-ui/typography": "^0.3.0-alpha.5",
+    "@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.5",
+    "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.5"
+    "theme-ui": "^0.3.0-alpha.6"
   },
   "scripts": {
     "build": "gatsby build",

package/src/components/alert.js

@@ -1,23 +1,41 @@
 /** @jsx jsx */
 import React from "react"
 import { jsx } from "theme-ui"
-import { FaExclamationTriangle } from "react-icons/fa"
+import { FaExclamationTriangle, FaCheckCircle } from "react-icons/fa"
 
-export default props => (
-  <div sx={{ variant: `alerts.error` }}>
-    <FaExclamationTriangle
-      size={40}
-      sx={{
-        flex: `0 0 auto`,
-        width: `auto`,
-        lineHeight: 1,
-        verticalAlign: `middle`,
-        fontSize: `3rem`,
-      }}
-    />
-    <div sx={{ pl: `1rem`, margin: `.5rem` }}>
-      <span sx={{ fontWeight: `extrabold` }}>Sorry, there was a problem.</span>
-      {props.children}
+export default ({ type, message, children }) =>
+  type === "error" ? (
+    <div sx={{ variant: `alerts.${type}` }}>
+      <FaExclamationTriangle
+        size={40}
+        sx={{
+          flex: `0 0 auto`,
+          width: `auto`,
+          lineHeight: 1,
+          verticalAlign: `middle`,
+          fontSize: `3rem`,
+        }}
+      />
+      <div sx={{ pl: `1rem`, margin: `.5rem` }}>
+        <span sx={{ fontWeight: `extrabold` }}>{message}</span>
+        {children}
+      </div>
     </div>
-  </div>
-)
+  ) : (
+    <div sx={{ variant: `alerts.${type}` }}>
+      <FaCheckCircle
+        size={40}
+        sx={{
+          flex: `0 0 auto`,
+          width: `auto`,
+          lineHeight: 1,
+          verticalAlign: `middle`,
+          fontSize: `3rem`,
+        }}
+      />
+      <div sx={{ pl: `1rem`, margin: `.5rem` }}>
+        <span sx={{ fontWeight: `extrabold` }}>{message}</span>
+        {children}
+      </div>
+    </div>
+  )

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/layout.js

@@ -92,12 +92,14 @@ const Layout = ({ header, main, location, children }) => {
         sx={{
           ...main,
           pt: `4.75rem`,
+          pb: [`3.75rem`, `initial`],
         }}
       >
         {children}
+        <Footer />
       </div>
 
-      {location && location.pathname === "/contact/" ? (
+      {/*      {location && location.pathname === "/contact/" ? (
         <div sx={{ display: ["none", "initial"] }}>
           <WrapperMap
             googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=AIzaSyBOY0sT1quks122bprrLM_0wrWLDWyVnMQ`}
@@ -120,9 +122,8 @@ const Layout = ({ header, main, location, children }) => {
             }
           />
         </div>
-      ) : null}
+      ) : null}*/}
 
-      <Footer />
       <MobileNavigation />
     </Styled.root>
   )

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/index.js

@@ -145,7 +145,23 @@ export default merge(
         }, 0 0 0 0 transparent`,
         opacity: 0.7,
         color: `red.8`,
-        px: `1rem`,
+        p: 3,
+        my: 3,
+        fontWeight: `medium`,
+        display: `flex`,
+        width: `100%`,
+        alignItems: `center`,
+      },
+      success: {
+        borderRadius: `sm`,
+        bg: `green.1`,
+        // border: `1px solid ${tailwind.colors.green[8]}`,
+        boxShadow: t =>
+          `inset 0 0 0 1px ${t.colors.green[8]}, 0 0 0 0 transparent`,
+        opacity: 0.7,
+        color: `green.8`,
+        p: 3,
+        my: 3,
         fontWeight: `medium`,
         display: `flex`,
         width: `100%`,

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: {