safely remove style.css

7 files changed, 60 insertions, 154 deletions

diff --git a/frontend/src/components/renderers/Latex.js b/frontend/src/components/renderers/Latex.js
index fd3d4e2..b2be6da 100644
--- a/frontend/src/components/renderers/Latex.js
+++ b/frontend/src/components/renderers/Latex.js
@@ -40,4 +40,15 @@ const Latex = (props) => {
     }
 }
 
-export default Latex
\ No newline at end of file
+const StyledLatex = styled(Latex)`
+    /* fix weird symbol height in render mode */
+    .large-op {
+        transform: translateY(-0.55em);
+    }
+    
+    .small-op {
+        transform: translateY(-0.1em);
+    }
+`
+
+export default StyledLatex
\ No newline at end of file
diff --git a/frontend/src/components/renderers/Markdown.js b/frontend/src/components/renderers/Markdown.js
index 16f5e37..f69d176 100644
--- a/frontend/src/components/renderers/Markdown.js
+++ b/frontend/src/components/renderers/Markdown.js
@@ -9,6 +9,41 @@ const Content = styled.div`
     img {
         max-width: 100%;
     }
+    
+    h3 {
+        font-weight: bold;
+    }
+
+    hr {
+        border-top: 1px solid ${p => p.theme.colors.text};
+        border-style: solid;
+    }
+
+    code {
+        background: ${p => p.theme.colors.codeHighlight};
+        font-size: 0.8em;
+    }
+    
+    pre {
+        padding: 0.7em;
+        background: ${p => p.theme.colors.codeHighlight};
+    }
+    
+    pre > code {
+        background: none;
+    }
+    
+    table {
+        width: 100%;
+    }
+    
+    code, pre {
+        background: none;
+        font-family: 'JetBrains Mono', monospace;
+        padding: initial;
+        border-radius: 3px;
+        outline: none;
+    }
 `
 const Markdown = ({content}) => {
     return <Content>
diff --git a/frontend/src/pages/_app.js b/frontend/src/pages/_app.js
index 7e99f01..eb205e3 100644
--- a/frontend/src/pages/_app.js
+++ b/frontend/src/pages/_app.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import ThemeProvider from "../theme/ThemeProvider";
 import GlobalStyle from "../theme/GlobalStyle";
-import '../theme/style.css';
 import {Watermark} from "../components/Watermark";
 import styled from "styled-components";
 
diff --git a/frontend/src/pages/index.js b/frontend/src/pages/index.js
index 141ebac..36bcad7 100644
--- a/frontend/src/pages/index.js
+++ b/frontend/src/pages/index.js
@@ -10,6 +10,10 @@ import Markdown from '../components/renderers/Markdown'
 import {Button, SubmitButton} from "../components/Common/Button";
 import {newPaste} from "../http/shared";
 
+const Container = styled.form`
+  width: 100%;
+`
+
 const Flex = styled.div`
     display: flex;
     flex-direction: row;
@@ -115,7 +119,7 @@ const NewPaste = () =>  {
   }
 
   return (
-    <form onSubmit={handleSubmit}>
+    <Container onSubmit={handleSubmit}>
       <PasteModal hash={hash} />
       <Text
         label="title"
@@ -143,7 +147,7 @@ const NewPaste = () =>  {
       </div>
       <br />
       <Error ref={ErrorLabel} />
-    </form>
+    </Container>
   );
 }
 
diff --git a/frontend/src/theme/GlobalStyle.js b/frontend/src/theme/GlobalStyle.js
index 94e4b57..2942687 100644
--- a/frontend/src/theme/GlobalStyle.js
+++ b/frontend/src/theme/GlobalStyle.js
@@ -8,4 +8,10 @@ export default createGlobalStyle`
       font-family: 'JetBrains Mono', monospace;
       color: ${(p) => p.theme.colors.text};
   }
+  
+  @media all and (max-width: 1000px) {
+    .lt-content-column {
+        padding: 0 calc(5vw + 1em) 0 5vw !important;
+    }
+  }
 `
\ No newline at end of file
diff --git a/frontend/src/theme/ThemeProvider.js b/frontend/src/theme/ThemeProvider.js
index 942bc40..57d57ef 100644
--- a/frontend/src/theme/ThemeProvider.js
+++ b/frontend/src/theme/ThemeProvider.js
@@ -4,6 +4,7 @@ import { ThemeProvider } from 'styled-components'
 const theme = {
   colors: {
     background: '#faf9f5',
+    codeHighlight: '#00000008',
     border: '#565656',
     text: '#111111',
     error: '#ee1111',
diff --git a/frontend/src/theme/style.css b/frontend/src/theme/style.css
deleted file mode 100644
index 10b955b..0000000
--- a/frontend/src/theme/style.css
+++ /dev/null
@@ -1,150 +0,0 @@
-@media all and (max-width: 1000px) {
-    .lt-content-column {
-        padding: 0 calc(5vw + 1em) 0 5vw !important;
-    }
-}
-
-form {
-    width: 100%;
-}
-
-textarea, input[type=text], input[type=password], .Dropdown-root {
-    width: 100%;
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 0.8em;
-    padding: calc(0.8em - 1px);
-    border-radius: 3px;
-    border: 1px solid #565656;
-    outline: none;
-    margin: 1.7em 0;
-}
-
-/* fix weird symbol height in render mode */
-.large-op {
-    transform: translateY(-0.55em);
-}
-
-.small-op {
-    transform: translateY(-0.1em);
-}
-
-code, pre {
-    background: #00000000;
-    font-family: 'JetBrains Mono', monospace;
-    padding: initial;
-    border-radius: 3px;
-    outline: none;
-}
-
-.Dropdown-root {
-    cursor: pointer;
-}
-
-.Dropdown-root:hover, .Dropdown-root.is-open {
-    opacity: 1;
-}
-
-.Dropdown-root + label {
-    top: 0.5em;
-    opacity: 0;
-}
-
-.Dropdown-root.is-open + label, .Dropdown-root:hover + label {
-    opacity: 1;
-    top: -0.1em;
-}
-
-.Dropdown-placeholder {
-    width: 5.5em;
-}
-
-.Dropdown-menu {
-    border-top: 1px solid #111111;
-    margin-top: 0.5em;
-    bottom: auto;
-}
-
-.Dropdown-option {
-    margin-top: 0.5em;
-    transition: all 0.5s cubic-bezier(.25,.8,.25,1);
-}
-
-.Dropdown-option:hover {
-    font-weight: 700;
-    opacity: 0.4;
-}
-
-textarea, input[type=text], input[type=password], .Dropdown-root {
-    opacity: 0.5;
-    transition: opacity 0.5s cubic-bezier(.25,.8,.25,1);
-}
-
-textarea:focus, input[type=text]:focus, input[type=password]:focus {
-    opacity: 1;
-}
-
-input[type=password] {
-    font-weight: 700;
-}
-
-textarea {
-    height: max(40vh, 100%);
-    resize: vertical;
-    min-height: 40vh;
-}
-
-a {
-    color: #111111;
-}
-
-input[type=submit], button[type=submit] {
-    font-family: 'JetBrains Mono', serif;
-    font-weight: 700;
-    color: #faf9f5;
-    background-color: #111111;
-    padding: 0.8em 2em;
-    margin: 2em 0;
-    outline: 0;
-}
-
-button[type=button] {
-    font-family: 'JetBrains Mono', serif;
-    font-weight: 700;
-    width: 8em;
-    padding: calc(0.8em - 1px) 1.5em;
-    border-radius: 3px;
-    color: #111111;
-    background-color: #faf9f5;
-    border: 1px solid #565656;
-    outline: none;
-    margin: 2em 2em;
-}
-
-
-/* fixing markdown renderer */
-.md h3 {
-    font-weight: bold;
-}
-
-.md hr {
-    border-top: 1px solid #000;
-    border-style: solid;
-}
-
-.md code {
-    background: #00000008;
-    font-size: 0.8em;
-}
-
-.md pre {
-    padding: 0.7em;
-    background: #00000008;
-}
-
-.md pre > code {
-    background: none;
-}
-
-.md table {
-    width: 100%;
-}
\ No newline at end of file