Initializes PopupBase

Author: velopert

src/components/common/PopupBase.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import OpaqueLayer from './OpaqueLayer';
+import zIndexes from '../../lib/styles/zIndexes';
+
+const PopupBaseBlock = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: ${zIndexes.Popup};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  & > .wrapper {
+    width: 25rem;
+    background: white;
+    padding: 2rem 1.5rem;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.09);
+  }
+`;
+
+interface PopupBaseProps {
+  visible: boolean;
+}
+
+const PopupBase: React.SFC<PopupBaseProps> = ({ visible }) => {
+  return (
+    <>
+      <OpaqueLayer visible={visible} />
+      <PopupBaseBlock>
+        <div className="wrapper">Hey tehre!</div>
+      </PopupBaseBlock>
+    </>
+  );
+};
+
+export default PopupBase;

src/components/write/QuillEditor.tsx

@@ -14,6 +14,8 @@ import TitleTextarea from './TitleTextarea';
 import { getScrollTop } from '../../lib/utils';
 import convertToMarkdown from '../../lib/convertToMarkdown';
 
+import PopupBase from '../common/PopupBase';
+
 Quill.register('modules/markdownShortcuts', MarkdownShortcuts);
 
 export interface QuillEditorProps {}
@@ -78,6 +80,20 @@ const Editor = styled.div`
       overflow-x: auto;
     }
 
+    h1,
+    h2,
+    h3,
+    h4 {
+      margin-top: 0.5em;
+      margin-bottom: 0.5em;
+    }
+
+    p + h1,
+    p + h2,
+    p + h3,
+    p + h4 {
+      margin-top: 1.5em;
+    }
     ul,
     ol {
       padding-left: 0;
@@ -110,6 +126,11 @@ const Editor = styled.div`
       }
     }
     ${postStyles}
+
+    p + blockquote, blockquote + p {
+      margin-top: 1rem;
+      margin-bottom: 1rem;
+    }
   }
   .ql-editor.ql-blank::before {
     left: 0px;
@@ -418,6 +439,7 @@ export default class QuillEditor extends React.Component<
             />
           )}
         </Editor>
+        <PopupBase visible={true} />
       </QuillEditorWrapper>
     );
   }

src/lib/styles/zIndexes.ts

@@ -2,6 +2,7 @@ const zIndexes = {
   OpaqueLayer: 10,
   AuthModal: 20,
   Toolbar: 10,
+  Popup: 25,
 };
 
 export default zIndexes;