From 37f05def31112563fd9d8f3b0c9bf8cebb607d86 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Sat, 6 Mar 2021 15:44:54 -0800
Subject: fix modal zindex

---
 frontend/src/components/Form/mixins.js          |  4 ++--
 frontend/src/components/Inputs/Code.js          |  5 ++++-
 frontend/src/components/Inputs/Dropdown.js      |  4 ++--
 frontend/src/components/NewPaste.js             | 10 +++++-----
 frontend/src/components/modals/PasswordModal.js | 13 +------------
 frontend/src/components/modals/PasteModal.js    | 13 +------------
 frontend/src/components/modals/shared.js        | 15 +++++++++++++++
 7 files changed, 30 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/Form/mixins.js b/frontend/src/components/Form/mixins.js
index 600a861..ff2759f 100644
--- a/frontend/src/components/Form/mixins.js
+++ b/frontend/src/components/Form/mixins.js
@@ -38,8 +38,8 @@ export const InputLike = css`
 
 export const CodeLike = css`
   font-family: JetBrains Mono !important;
-  font-size: 14px !important;
-  line-height: 1.2em !important;
+  font-size: 13px !important;
+  line-height: 1.6em !important;
   white-space: pre-wrap;
 `
 
diff --git a/frontend/src/components/Inputs/Code.js b/frontend/src/components/Inputs/Code.js
index d5e063a..6817db2 100644
--- a/frontend/src/components/Inputs/Code.js
+++ b/frontend/src/components/Inputs/Code.js
@@ -18,10 +18,13 @@ const EditorWrapper = styled(Editor)`
     min-height: 40vh;
   }
   
+  & pre {
+    z-index: -1 !important;
+  }
+  
   & > textarea {
     ${Hover}
     padding: 0.6em !important;
-    z-index: 1;
     outline: none !important;
   }
 `
diff --git a/frontend/src/components/Inputs/Dropdown.js b/frontend/src/components/Inputs/Dropdown.js
index 851a692..27106dc 100644
--- a/frontend/src/components/Inputs/Dropdown.js
+++ b/frontend/src/components/Inputs/Dropdown.js
@@ -102,7 +102,7 @@ export const Language = (props) => {
     <GenericDropdown
       {...props}
       options={options}
-      placeholder={LANGS.detect}
+      placeholder='detect'
       label='language'
     />
   );
@@ -118,7 +118,7 @@ export const Theme = (props) => {
     <GenericDropdown
       {...props}
       options={options}
-      placeholder={'atom'}
+      placeholder='atom'
       label='theme'
     />
   );
diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js
index 14a8024..5bc35a2 100644
--- a/frontend/src/components/NewPaste.js
+++ b/frontend/src/components/NewPaste.js
@@ -139,11 +139,11 @@ const NewPaste = () =>  {
                 onLangChange={(e) => { setLanguage(e.target.value) }} 
                 onExpiryChange={(e) => { setExpiry(e.target.value) }} />
             <SubmitButton type="submit" value="new paste" />
-            <Button
-                type="button"
-                onClick={() => setIsPreview(!isPreview)}>
-                preview
-            </Button>
+            {language !== LANGS.detect && <Button
+              type="button"
+              onClick={() => setIsPreview(!isPreview)}>
+              preview
+            </Button>}
             <br />
             <Error ref={ErrorLabel} />
         </form>
diff --git a/frontend/src/components/modals/PasswordModal.js b/frontend/src/components/modals/PasswordModal.js
index bf25eeb..637e20a 100644
--- a/frontend/src/components/modals/PasswordModal.js
+++ b/frontend/src/components/modals/PasswordModal.js
@@ -1,20 +1,9 @@
 import React, { useRef } from 'react';
 import Modal from 'react-modal';
 import { Password } from '../Inputs'
-import { RightPad, LeftPad, ModalHeader, Padding } from './shared'
+import {RightPad, LeftPad, ModalHeader, Padding, modalStyles} from './shared'
 import Error from '../Err';
 
-const modalStyles = {
-    content: {
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
-        width: '400px',
-        height: '250px',
-        border: '1px solid #11111188'
-    }
-};
-
 const PasswordModal = (props) => {
     const ErrorLabel = useRef(null);
     Modal.setAppElement('body');
diff --git a/frontend/src/components/modals/PasteModal.js b/frontend/src/components/modals/PasteModal.js
index 6c74e19..c91bbb4 100644
--- a/frontend/src/components/modals/PasteModal.js
+++ b/frontend/src/components/modals/PasteModal.js
@@ -1,21 +1,10 @@
 import React from 'react';
 import Modal from 'react-modal';
-import { LeftPad, ModalHeader, RightPad } from './shared'
+import {LeftPad, ModalHeader, modalStyles, RightPad} from './shared'
 import { useHistory } from 'react-router-dom';
 import { Text } from '../Inputs'
 import { useClipboard } from 'use-clipboard-copy';
 
-const modalStyles = {
-    content: {
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
-        width: '500px',
-        height: '250px',
-        border: '1px solid #11111188'
-    }
-};
-
 const PasteModal = (props) => {
     const history = useHistory();
     const fullURL = `${window.location.origin}/${props.hash}`;
diff --git a/frontend/src/components/modals/shared.js b/frontend/src/components/modals/shared.js
index d63be06..7c38dc2 100644
--- a/frontend/src/components/modals/shared.js
+++ b/frontend/src/components/modals/shared.js
@@ -1,5 +1,20 @@
 import styled from 'styled-components'
 
+export const modalStyles = {
+  content: {
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '500px',
+    height: '250px',
+    border: '1px solid #11111188',
+  },
+};
+
+export const Form = styled.form`
+  z-index: 999;
+`
+
 export const RightPad = styled.div`
     margin-right: 3em;
 `
-- 
cgit v1.2.3