From dbf726d9e021a692254defdab8b993063b15354f Mon Sep 17 00:00:00 2001 From: jackyzha0 Date: Sat, 6 Mar 2021 16:09:51 -0800 Subject: update watermark styling --- frontend/src/components/Footer.js | 6 ++-- frontend/src/components/Form/Button.js | 2 +- frontend/src/components/Form/mixins.js | 2 +- frontend/src/components/Inputs/Code.js | 7 ++-- frontend/src/components/NewPaste.js | 17 ++++++---- frontend/src/components/Options.js | 1 - frontend/src/components/Watermark.js | 43 ++++++++++++++----------- frontend/src/components/decorators/CharLimit.js | 2 +- frontend/src/components/modals/PasteModal.js | 12 +++---- 9 files changed, 53 insertions(+), 39 deletions(-) (limited to 'frontend/src/components') diff --git a/frontend/src/components/Footer.js b/frontend/src/components/Footer.js index 1074fcb..4afc7ba 100644 --- a/frontend/src/components/Footer.js +++ b/frontend/src/components/Footer.js @@ -2,7 +2,9 @@ import React from 'react'; import styled from 'styled-components' const SpacedFooter = styled.div` - margin: 2em 0; + & > p { + font-size: 0.8em; + } & a { color: ${p => p.theme.colors.text}; } @@ -17,7 +19,7 @@ const Link = (props) => { const Footer = () => { return ( -

(c) 2020 — ,

+

(c) 2020 // ,

); } diff --git a/frontend/src/components/Form/Button.js b/frontend/src/components/Form/Button.js index 7396ca1..146919a 100644 --- a/frontend/src/components/Form/Button.js +++ b/frontend/src/components/Form/Button.js @@ -22,7 +22,7 @@ const Secondary = css` ` export const Button = styled.button` - ${p => p.secondary ? css`${Primary}` : css`${Secondary}` } + ${p => p.secondary ? css`${Secondary}` : css`${Primary}` } ` export const SubmitButton = styled.input` diff --git a/frontend/src/components/Form/mixins.js b/frontend/src/components/Form/mixins.js index ff2759f..ca338d3 100644 --- a/frontend/src/components/Form/mixins.js +++ b/frontend/src/components/Form/mixins.js @@ -46,7 +46,7 @@ export const CodeLike = css` export const ButtonLike = css` font-family: 'JetBrains Mono', serif; font-weight: 700; - padding: 0.6em 1.5em; + padding: calc(0.6em + 1px) 1.5em; margin: 2em 0; outline: 0; ` \ No newline at end of file diff --git a/frontend/src/components/Inputs/Code.js b/frontend/src/components/Inputs/Code.js index 6817db2..0767808 100644 --- a/frontend/src/components/Inputs/Code.js +++ b/frontend/src/components/Inputs/Code.js @@ -5,6 +5,9 @@ import Editor from 'react-simple-code-editor'; import {Highlighter} from "../renderers/Code"; import {CodeLike, Hover} from "../Form/mixins"; +const Wrapper = styled.div` + position: relative; +` const EditorWrapper = styled(Editor)` overflow: visible !important; @@ -31,7 +34,7 @@ const EditorWrapper = styled(Editor)` export const Code = ({content, id, readOnly, setContentCallback, ...props}) => { return ( -
+ { -
+ ); } \ No newline at end of file diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js index 5bc35a2..1420ce9 100644 --- a/frontend/src/components/NewPaste.js +++ b/frontend/src/components/NewPaste.js @@ -34,7 +34,7 @@ const NewPaste = () => { const [title, setTitle] = useState(''); const [content, setContent] = useState(''); const [pass, setPass] = useState(''); - const [language, setLanguage] = useState(LANGS.detect); + const [language, setLanguage] = useState('detect'); const [expiry, setExpiry] = useState(''); const [hash, setHash] = useState(''); const [isPreview, setIsPreview] = useState(false); @@ -138,12 +138,15 @@ const NewPaste = () => { onPassChange={(e) => { setPass(e.target.value) }} onLangChange={(e) => { setLanguage(e.target.value) }} onExpiryChange={(e) => { setExpiry(e.target.value) }} /> - - {language !== LANGS.detect && } +
+ + {language !== 'detect' && } +

diff --git a/frontend/src/components/Options.js b/frontend/src/components/Options.js index eeb79ed..97d3127 100644 --- a/frontend/src/components/Options.js +++ b/frontend/src/components/Options.js @@ -14,7 +14,6 @@ const Flex = styled.div` @media (max-width: 850px) { float: none !important; - transform: translateX(-2em); } ` diff --git a/frontend/src/components/Watermark.js b/frontend/src/components/Watermark.js index 6ab212b..2f6c8c6 100644 --- a/frontend/src/components/Watermark.js +++ b/frontend/src/components/Watermark.js @@ -1,25 +1,32 @@ import styled from "styled-components"; import React from "react"; +import Footer from "./Footer"; -const Logo = styled.h1` - position: fixed; - bottom: 0.3em; - left: 0.5em; - opacity: 0.3; - font-size: 50px; - margin: 0 0; - transition: opacity 0.5s cubic-bezier(.25,.8,.25,1); +const Logo = styled.div` + position: fixed; + bottom: 1em; + left: 2em; + opacity: 0.3; + transition: opacity 0.5s cubic-bezier(.25,.8,.25,1); + + &:hover { + opacity: 1; + } - & > a { - text-decoration: none; - position: relative; - color: ${p => p.theme.colors.text}; - } - - &:hover { - opacity: 1; - } + & > h1 { + font-size: 50px; + margin: 0 0; + + & > a { + text-decoration: none; + position: relative; + color: ${p => p.theme.colors.text}; + } + } ` export const Watermark = () => - ctrl-v +

+ ctrl-v +

+