button styling

10 files changed, 45 insertions, 30 deletions

diff --git a/frontend/src/components/Form/Button.js b/frontend/src/components/Form/Button.js
index e69de29..7396ca1 100644
--- a/frontend/src/components/Form/Button.js
+++ b/frontend/src/components/Form/Button.js
@@ -0,0 +1,30 @@
+import styled, {css} from 'styled-components'
+import {Border, ButtonLike, DropShadow, Rounded} from "./mixins";
+
+const Base = css`
+  ${DropShadow}
+  ${Rounded}
+  ${ButtonLike}
+  margin-right: 2em;
+`
+
+const Primary = css`
+  ${Base};
+  border: none;
+  color: ${p => p.theme.colors.background};
+  background-color: ${p => p.theme.colors.text};
+`
+const Secondary = css`
+  ${Base};
+  ${Border};
+  color: ${p => p.theme.colors.text};
+  background-color: ${p => p.theme.colors.background};
+`
+
+export const Button = styled.button`
+  ${p => p.secondary ? css`${Primary}` : css`${Secondary}` }
+`
+
+export const SubmitButton = styled.input`
+  ${Primary}
+`
\ No newline at end of file
diff --git a/frontend/src/components/Form/Input.js b/frontend/src/components/Form/Input.js
index 4dbc002..e000cfb 100644
--- a/frontend/src/components/Form/Input.js
+++ b/frontend/src/components/Form/Input.js
@@ -1,4 +1,3 @@
-import React from "react";
 import styled from 'styled-components'
 import {Border, DropShadow, InputLike, Rounded} from "./mixins";
 
diff --git a/frontend/src/components/Form/index.js b/frontend/src/components/Form/index.js
deleted file mode 100644
index e69de29..0000000
--- a/frontend/src/components/Form/index.js
+++ /dev/null
diff --git a/frontend/src/components/Form/mixins.js b/frontend/src/components/Form/mixins.js
index 55d6259..38ea394 100644
--- a/frontend/src/components/Form/mixins.js
+++ b/frontend/src/components/Form/mixins.js
@@ -24,7 +24,7 @@ export const InputLike = css`
 export const ButtonLike = css`
   font-family: 'JetBrains Mono', serif;
   font-weight: 700;
-  padding: 0.8em 2em;
+  padding: 0.6em 1.5em;
   margin: 2em 0;
   outline: 0;
 `
\ No newline at end of file
diff --git a/frontend/src/components/Inputs/Dropdown.js b/frontend/src/components/Inputs/Dropdown.js
index a3f3b48..9f7c246 100644
--- a/frontend/src/components/Inputs/Dropdown.js
+++ b/frontend/src/components/Inputs/Dropdown.js
@@ -1,14 +1,14 @@
 import Dropdown from "react-dropdown";
-import FloatingLabel from "../decorators/FloatingLabel";
 import React from "react";
 import styled from 'styled-components';
 import {LANGS, THEMES} from "../renderers/Code";
 import {Labelled} from "./shared";
-import {Border, InputLike, Rounded} from "../Form/mixins";
+import {Border, DropShadow, InputLike, Rounded} from "../Form/mixins";
 
 const StyledDropdown = styled(Dropdown)`
   ${Border}
   ${Rounded}
+  ${DropShadow}
   ${InputLike}
   cursor: pointer;
   
diff --git a/frontend/src/components/Inputs/shared.js b/frontend/src/components/Inputs/shared.js
index 4239e89..2f6ee3f 100644
--- a/frontend/src/components/Inputs/shared.js
+++ b/frontend/src/components/Inputs/shared.js
@@ -2,14 +2,9 @@ import styled from "styled-components";
 import React from "react";
 import FloatingLabel from "../decorators/FloatingLabel";
 
-export const Wrapper = styled.div`
-    display: block;
-    margin-left: 2em;
-`
-
-export const Labelled = ({label, value, children}) => <Wrapper>
+export const Labelled = ({label, value, children}) => <div>
   <FloatingLabel label={label} value={value} >
     <span>{label}</span>
     {children}
   </FloatingLabel>
-</Wrapper>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js
index 9447611..f741c7e 100644
--- a/frontend/src/components/NewPaste.js
+++ b/frontend/src/components/NewPaste.js
@@ -9,12 +9,7 @@ import styled from 'styled-components'
 import CodeRenderer from './renderers/Code'
 import Latex from './renderers/Latex'
 import Markdown from './renderers/Markdown'
-
-const Button = styled.button`
-    margin-right: 0 !important;
-    margin-left: 2em !important;
-    height: calc(16px + 1.6em + 2px);
-`
+import {Button, SubmitButton} from "./Form/Button";
 
 const Flex = styled.div`
     display: flex;
@@ -143,7 +138,7 @@ const NewPaste = () =>  {
                 onPassChange={(e) => { setPass(e.target.value) }} 
                 onLangChange={(e) => { setLanguage(e.target.value) }} 
                 onExpiryChange={(e) => { setExpiry(e.target.value) }} />
-            <input className="lt-button lt-shadow lt-hover" type="submit" value="new paste" />
+            <SubmitButton type="submit" value="new paste" />
             <Button
                 className="lt-shadow lt-hover"
                 type="button"
diff --git a/frontend/src/components/Options.js b/frontend/src/components/Options.js
index fb7e88c..eeb79ed 100644
--- a/frontend/src/components/Options.js
+++ b/frontend/src/components/Options.js
@@ -7,6 +7,10 @@ const Flex = styled.div`
     display: flex;
     flex-direction: row;
     transform: translateY(0.2em);
+    
+    & > *:not(:first-child) {
+      margin-left: 2em;
+    }
 
     @media (max-width: 850px) {
         float: none !important;
diff --git a/frontend/src/components/decorators/CharLimit.js b/frontend/src/components/decorators/CharLimit.js
index 1b5de91..5201377 100644
--- a/frontend/src/components/decorators/CharLimit.js
+++ b/frontend/src/components/decorators/CharLimit.js
@@ -8,21 +8,12 @@ const Chars = styled.p`
     font-size: 0.8em;
     writing-mode: vertical-rl;
     top: 50%;
-    transform: translate(5em, -50%);
+    transform: translate(4em, -50%);
     right: 0;
     transition: all 0.5s cubic-bezier(.25,.8,.25,1);
 
-    ${props =>
-        ((props.content.length / props.maxLength) > 0.5) &&
-        css`
-        color: #111111;
-    `};
-
-    ${props =>
-        ((props.content.length / props.maxLength) > 1) &&
-        css`
-        color: #ee1111;
-    `};
+    ${p => ((p.content.length / p.maxLength) > 0.5) && ` color: ${p.theme.colors.text}; `};
+    ${p => ((p.content.length / p.maxLength) > 1) && ` color: ${p.theme.colors.error}; `};
 `;
 
 const CharLimit = (props) => {
diff --git a/frontend/src/theme/ThemeProvider.js b/frontend/src/theme/ThemeProvider.js
index a104a5a..d9edcb0 100644
--- a/frontend/src/theme/ThemeProvider.js
+++ b/frontend/src/theme/ThemeProvider.js
@@ -6,6 +6,7 @@ const theme = {
     background: '#faf9f5',
     border: '#565656',
     text: '#111111',
+    error: '#ee1111',
   },
 }