Added some basic shared components, utils, hooks

client/src/shared/components/Modal/Styles.js

@@ -0,0 +1,82 @@
+import styled, { css } from 'styled-components';
+
+import Icon from 'shared/components/Icon';
+import { color, mixin, zIndexValues } from 'shared/utils/styles';
+
+export const ScrollOverlay = styled.div`
+  z-index: ${zIndexValues.modal};
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  ${mixin.scrollableY}
+`;
+
+export const ClickableOverlay = styled.div`
+  min-height: 100%;
+  background: ${mixin.rgba(color.textLightBlue, 0.7)};
+  ${props => clickOverlayStyles[props.variant]}
+`;
+
+const clickOverlayStyles = {
+  center: css`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 50px;
+  `,
+  aside: css`
+    text-align: right;
+  `,
+};
+
+export const StyledModal = styled.div`
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  background: #fff;
+  ${props => modalStyles[props.variant]}
+`;
+
+const modalStyles = {
+  center: css`
+    max-width: 600px;
+    vertical-align: middle;
+    text-align: left;
+    ${mixin.boxShadowMedium}
+  `,
+  aside: css`
+    min-height: 100vh;
+    max-width: 500px;
+    text-align: left;
+    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
+  `,
+};
+
+export const CloseIcon = styled(Icon)`
+  position: absolute;
+  font-size: 25px;
+  color: ${color.textDark};
+  ${mixin.clickable}
+  ${props => closeIconStyles[props.variant]}
+`;
+
+const closeIconStyles = {
+  center: css`
+    top: 8px;
+    right: 10px;
+    padding: 7px 7px 0;
+  `,
+  aside: css`
+    top: 10px;
+    left: -50px;
+    width: 40px;
+    height: 40px;
+    padding-top: 8px;
+    border-radius: 40px;
+    text-align: center;
+    background: #fff;
+    opacity: 0.5;
+  `,
+};