diff --git a/package.json b/package.json index c8a0c0a..7f515d6 100644 --- a/package.json +++ b/package.json @@ -9,10 +9,12 @@ "lint": "eslint --fix ./src/**/*.js" }, "dependencies": { + "@smooth-ui/core-sc": "^7.0.4", "@yarnpkg/pnpify": "^2.3.3", "jquery": "^3.5.1", "next": "^9.5.5", "next-optimized-images": "^2.6.2", + "polished": "^4.0.3", "preact": "^10.5.4", "prop-types": "15.7.2", "react": "^16.13.1", @@ -20,6 +22,7 @@ "react-is": "^16.13.1", "react-slick": "^0.27.11", "react-spring": "^8.0.27", + "reakit": "^1.2.4", "resolve": "^1.17.0", "slick-carousel": "^1.8.1", "styled-components": "^4.4.1", diff --git a/src/components/Errors/Errors.js b/src/components/Errors/Errors.js new file mode 100644 index 0000000..7e7c97b --- /dev/null +++ b/src/components/Errors/Errors.js @@ -0,0 +1,79 @@ +import React, { useState } from 'react'; +import styled from 'styled-components'; +import { lighten } from 'polished'; +import Typography from '../Typography'; + +const Headline = styled(Typography)` + line-height: 1.5rem; +`; + +const Container = styled.div` + width: 28rem; + position: fixed; + bottom: 2rem; + left: 50%; + transform: translateX(-50%); + color: ${({ theme }) => theme.color.danger}; + background: ${({ theme }) => lighten(0.53, theme.color.danger)}; + border: 1px solid ${({ theme }) => lighten(0.45, theme.color.danger)}; + padding: 2rem; + z-index: 1; + border-radius: .25rem; + font-size: 1rem; + line-height: 1.4rem; + box-shadow: 0 .5rem 1rem -.25rem rgba(0,0,0,.1); + text-align: left; +`; + +const CloseButton = styled.span` + position: absolute; + top: 2rem; + right: 2rem; + cursor: pointer; + opacity: 1; + transition: opacity 200ms ease-out; + + &:hover { + opacity: .6; + } +`; + +const Title = styled(Headline)` + +`; + +const ErrorEl = styled.div` + padding-top: 1rem; + border-top: 1px solid ${({ theme }) => lighten(0.45, theme.color.danger)}; + + & > p { + margin-top: 0; + margin-bottom: 0.5rem; + } +`; + +const getErrorTitle = (errors) => { + if (errors.length === 1) return 'An unexpected error has occurred'; + return `${errors.length} unexpected errors have occurred`; +}; + +const Errors = ({ errors }) => { + const [isOpened, setIsOpened] = useState(true); + const onClose = () => setIsOpened(false); + + return (errors.length > 0 && isOpened ? ( + + ✕ + {getErrorTitle(errors)} + {errors.map((error) => ( + + {error.split('\n').map((errorLine) => ( +

{errorLine}

+ ))} + + ))} + + ) : null); +}; + +export default Errors; diff --git a/src/components/Errors/index.js b/src/components/Errors/index.js new file mode 100644 index 0000000..2776183 --- /dev/null +++ b/src/components/Errors/index.js @@ -0,0 +1,3 @@ +import Errors from './Errors'; + +export default Errors; diff --git a/src/lib/theme/dark/color.js b/src/lib/theme/dark/color.js index 8a75a82..16ba17e 100644 --- a/src/lib/theme/dark/color.js +++ b/src/lib/theme/dark/color.js @@ -8,6 +8,7 @@ export default { typoPrimary: '#fff', typoSecondary: '#6F767D', typoTertiary: '#77777c', + danger: '#ce1126', typoAccent: 'rgb(143, 75, 0)', }; diff --git a/src/lib/theme/light/color.js b/src/lib/theme/light/color.js index d5e2263..f4b77eb 100644 --- a/src/lib/theme/light/color.js +++ b/src/lib/theme/light/color.js @@ -8,6 +8,7 @@ export default { typoPrimary: '#252525', typoSecondary: '#6F767D', typoTertiary: '#77777c', + danger: '#ce1126', typoAccent: 'rgb(143, 75, 0)', }; diff --git a/src/pages/index.js b/src/pages/index.js index b4697ec..794b41e 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -2,6 +2,7 @@ import React from 'react'; import styled, { ThemeProvider } from 'styled-components'; import { space } from 'styled-system'; +import Errors from '../components/Errors'; import Typography from '../components/Typography'; import OuterRow from '../components/Layout/OuterRow'; // import Feature from '../components/_project/home/Feature' @@ -43,9 +44,10 @@ const ButtonWrapper = styled('div')` `; const Index = (props) => { - const { contributors, photoUrls } = props; + const { contributors, photoUrls, errors } = props; return ( + US-Iran Relations @@ -155,7 +157,9 @@ const Index = (props) => { <> -