From 75e8bdd2d4cdaefe28ed40a7735c993f98d15754 Mon Sep 17 00:00:00 2001 From: jackyzha0 Date: Sat, 6 Mar 2021 16:32:09 -0800 Subject: refactor form -> common --- frontend/src/components/Common/Button.js | 31 +++++++++++++++ frontend/src/components/Common/Input.js | 9 +++++ frontend/src/components/Common/mixins.js | 52 +++++++++++++++++++++++++ frontend/src/components/Form/Button.js | 31 --------------- frontend/src/components/Form/Input.js | 9 ----- frontend/src/components/Form/mixins.js | 52 ------------------------- frontend/src/components/Inputs/Code.js | 2 +- frontend/src/components/Inputs/Dropdown.js | 2 +- frontend/src/components/Inputs/Password.js | 2 +- frontend/src/components/Inputs/Text.js | 2 +- frontend/src/components/NewPaste.js | 3 +- frontend/src/components/PasteInfo.js | 27 ++++++------- frontend/src/components/ViewPaste.js | 5 --- frontend/src/components/modals/PasswordModal.js | 2 +- frontend/src/components/modals/PasteModal.js | 4 +- frontend/src/components/renderers/Code.js | 2 +- frontend/src/components/renderers/Raw.js | 6 +-- 17 files changed, 115 insertions(+), 126 deletions(-) create mode 100644 frontend/src/components/Common/Button.js create mode 100644 frontend/src/components/Common/Input.js create mode 100644 frontend/src/components/Common/mixins.js delete mode 100644 frontend/src/components/Form/Button.js delete mode 100644 frontend/src/components/Form/Input.js delete mode 100644 frontend/src/components/Form/mixins.js (limited to 'frontend') diff --git a/frontend/src/components/Common/Button.js b/frontend/src/components/Common/Button.js new file mode 100644 index 0000000..290e52a --- /dev/null +++ b/frontend/src/components/Common/Button.js @@ -0,0 +1,31 @@ +import styled, {css} from 'styled-components' +import {Border, ButtonLike, DropShadow, Rounded} from "./mixins"; + +const Base = css` + ${DropShadow} + ${Rounded} + ${ButtonLike} + margin-right: 2em; + cursor: pointer; +` + +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`${Secondary}` : css`${Primary}` } +` + +export const SubmitButton = styled.input` + ${Primary} +` \ No newline at end of file diff --git a/frontend/src/components/Common/Input.js b/frontend/src/components/Common/Input.js new file mode 100644 index 0000000..e000cfb --- /dev/null +++ b/frontend/src/components/Common/Input.js @@ -0,0 +1,9 @@ +import styled from 'styled-components' +import {Border, DropShadow, InputLike, Rounded} from "./mixins"; + +export const Input = styled.input` + ${Border} + ${Rounded} + ${DropShadow} + ${InputLike} +` \ No newline at end of file diff --git a/frontend/src/components/Common/mixins.js b/frontend/src/components/Common/mixins.js new file mode 100644 index 0000000..ff2759f --- /dev/null +++ b/frontend/src/components/Common/mixins.js @@ -0,0 +1,52 @@ +import {css} from 'styled-components'; + +export const DropShadow = css` + box-shadow: 0 14px 28px rgba(27, 33, 48,0.06), 0 10px 10px rgba(27, 33, 48,0.02); +` + +export const Hover = css` + opacity: 0.5; + transition: all 0.5s cubic-bezier(.25,.8,.25,1); + + & ~ pre { + transition: all 0.5s cubic-bezier(.25,.8,.25,1); + opacity: 0.5; + } + + &:focus, &:hover, &:focus span, &:focus ~ pre { + opacity: 1; + } +` + +export const Rounded = css` + border-radius: 3px; +` + +export const Border = css` + border: 1px solid ${p => p.theme.colors.border}; +` + +export const InputLike = css` + ${Hover} + font-family: 'JetBrains Mono', monospace; + width: 100%; + font-size: 0.8em; + padding: 0.6em; + outline: none; + margin: 1.7em 0; +` + +export const CodeLike = css` + font-family: JetBrains Mono !important; + font-size: 13px !important; + line-height: 1.6em !important; + white-space: pre-wrap; +` + +export const ButtonLike = css` + font-family: 'JetBrains Mono', serif; + font-weight: 700; + padding: 0.6em 1.5em; + margin: 2em 0; + outline: 0; +` \ No newline at end of file diff --git a/frontend/src/components/Form/Button.js b/frontend/src/components/Form/Button.js deleted file mode 100644 index 290e52a..0000000 --- a/frontend/src/components/Form/Button.js +++ /dev/null @@ -1,31 +0,0 @@ -import styled, {css} from 'styled-components' -import {Border, ButtonLike, DropShadow, Rounded} from "./mixins"; - -const Base = css` - ${DropShadow} - ${Rounded} - ${ButtonLike} - margin-right: 2em; - cursor: pointer; -` - -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`${Secondary}` : css`${Primary}` } -` - -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 deleted file mode 100644 index e000cfb..0000000 --- a/frontend/src/components/Form/Input.js +++ /dev/null @@ -1,9 +0,0 @@ -import styled from 'styled-components' -import {Border, DropShadow, InputLike, Rounded} from "./mixins"; - -export const Input = styled.input` - ${Border} - ${Rounded} - ${DropShadow} - ${InputLike} -` \ No newline at end of file diff --git a/frontend/src/components/Form/mixins.js b/frontend/src/components/Form/mixins.js deleted file mode 100644 index ca338d3..0000000 --- a/frontend/src/components/Form/mixins.js +++ /dev/null @@ -1,52 +0,0 @@ -import {css} from 'styled-components'; - -export const DropShadow = css` - box-shadow: 0 14px 28px rgba(27, 33, 48,0.06), 0 10px 10px rgba(27, 33, 48,0.02); -` - -export const Hover = css` - opacity: 0.5; - transition: all 0.5s cubic-bezier(.25,.8,.25,1); - - & ~ pre { - transition: all 0.5s cubic-bezier(.25,.8,.25,1); - opacity: 0.5; - } - - &:focus, &:hover, &:focus span, &:focus ~ pre { - opacity: 1; - } -` - -export const Rounded = css` - border-radius: 3px; -` - -export const Border = css` - border: 1px solid ${p => p.theme.colors.border}; -` - -export const InputLike = css` - ${Hover} - font-family: 'JetBrains Mono', monospace; - width: 100%; - font-size: 0.8em; - padding: 0.6em; - outline: none; - margin: 1.7em 0; -` - -export const CodeLike = css` - font-family: JetBrains Mono !important; - font-size: 13px !important; - line-height: 1.6em !important; - white-space: pre-wrap; -` - -export const ButtonLike = css` - font-family: 'JetBrains Mono', serif; - font-weight: 700; - 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 0767808..adb1536 100644 --- a/frontend/src/components/Inputs/Code.js +++ b/frontend/src/components/Inputs/Code.js @@ -3,7 +3,7 @@ import styled from 'styled-components' import CharLimit from "../decorators/CharLimit"; import Editor from 'react-simple-code-editor'; import {Highlighter} from "../renderers/Code"; -import {CodeLike, Hover} from "../Form/mixins"; +import {CodeLike, Hover} from "../Common/mixins"; const Wrapper = styled.div` position: relative; diff --git a/frontend/src/components/Inputs/Dropdown.js b/frontend/src/components/Inputs/Dropdown.js index 27106dc..7166681 100644 --- a/frontend/src/components/Inputs/Dropdown.js +++ b/frontend/src/components/Inputs/Dropdown.js @@ -3,7 +3,7 @@ import React from "react"; import styled from 'styled-components'; import {LANGS, THEMES} from "../renderers/Code"; import {Labelled} from "../decorators/Labelled"; -import {Border, DropShadow, InputLike, Rounded} from "../Form/mixins"; +import {Border, DropShadow, InputLike, Rounded} from "../Common/mixins"; const StyledDropdown = styled(Dropdown)` ${Border} diff --git a/frontend/src/components/Inputs/Password.js b/frontend/src/components/Inputs/Password.js index 6394dd2..6877574 100644 --- a/frontend/src/components/Inputs/Password.js +++ b/frontend/src/components/Inputs/Password.js @@ -1,6 +1,6 @@ import React from "react"; import {Labelled} from "../decorators/Labelled"; -import {Input} from "../Form/Input"; +import {Input} from "../Common/Input"; export const Password = (props) => { return ( diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js index 1420ce9..b322351 100644 --- a/frontend/src/components/NewPaste.js +++ b/frontend/src/components/NewPaste.js @@ -4,12 +4,11 @@ import OptionsContainer from './Options' import Error from './Err' import { PostNewPaste } from '../helpers/httpHelper' import PasteModal from './modals/PasteModal' -import { LANGS } from './renderers/Code' import styled from 'styled-components' import CodeRenderer from './renderers/Code' import Latex from './renderers/Latex' import Markdown from './renderers/Markdown' -import {Button, SubmitButton} from "./Form/Button"; +import {Button, SubmitButton} from "./Common/Button"; const Flex = styled.div` display: flex; diff --git a/frontend/src/components/PasteInfo.js b/frontend/src/components/PasteInfo.js index 114d0e1..cb48b20 100644 --- a/frontend/src/components/PasteInfo.js +++ b/frontend/src/components/PasteInfo.js @@ -3,6 +3,7 @@ import styled from 'styled-components' import { useHistory } from 'react-router-dom'; import { Theme } from './Inputs' import { exportComponentAsPNG } from "react-component-export-image"; +import {Button} from "./Common/Button"; const Bold = styled.span` font-weight: 700 @@ -13,14 +14,11 @@ const StyledDiv = styled.div` margin: 2em 0; ` -const Button = styled.button` - margin-right: 0 !important; - margin-left: 2em !important; - height: calc(16px + 1.6em); +const ShiftedButton = styled(Button)` margin-top: 1.6em !important; ` -const SpacedText = styled.span` +const SpacedText = styled.p` margin-right: 1em; ` @@ -28,7 +26,6 @@ const Flex = styled.div` float: right; display: flex; flex-direction: row; - transform: translateY(0.2em); ` const PasteInfo = (props) => { @@ -42,12 +39,12 @@ const PasteInfo = (props) => { const buttonTxt = props.isRenderMode ? 'text' : 'render' if (props.lang === 'latex' || props.lang === 'markdown') { return ( - + ); } } @@ -55,18 +52,18 @@ const PasteInfo = (props) => { return (
- - + {renderable()} { return (
- - - - { diff --git a/frontend/src/components/modals/PasteModal.js b/frontend/src/components/modals/PasteModal.js index a6d637f..e7dbed2 100644 --- a/frontend/src/components/modals/PasteModal.js +++ b/frontend/src/components/modals/PasteModal.js @@ -1,10 +1,10 @@ import React from 'react'; import Modal from 'react-modal'; -import {Form, LeftPad, ModalHeader, modalStyles, RightPad} from './shared' +import {Form, ModalHeader, modalStyles} from './shared' import { useHistory } from 'react-router-dom'; import { Text } from '../Inputs' import { useClipboard } from 'use-clipboard-copy'; -import {Button} from "../Form/Button"; +import {Button} from "../Common/Button"; const PasteModal = (props) => { const history = useHistory(); diff --git a/frontend/src/components/renderers/Code.js b/frontend/src/components/renderers/Code.js index d110f79..5c8457c 100644 --- a/frontend/src/components/renderers/Code.js +++ b/frontend/src/components/renderers/Code.js @@ -3,7 +3,7 @@ import SyntaxHighlighter from 'react-syntax-highlighter'; import virtualizedRenderer from 'react-syntax-highlighter-virtualized-renderer'; import { atomOneLight, ascetic, atomOneDark, dracula, ocean } from 'react-syntax-highlighter/dist/esm/styles/hljs'; import styled from 'styled-components' -import {Border, CodeLike, DropShadow, Hover, Rounded} from "../Form/mixins"; +import {Border, CodeLike, DropShadow, Rounded} from "../Common/mixins"; export const THEMES = Object.freeze({ 'atom': atomOneLight, diff --git a/frontend/src/components/renderers/Raw.js b/frontend/src/components/renderers/Raw.js index d4dc830..182bfff 100644 --- a/frontend/src/components/renderers/Raw.js +++ b/frontend/src/components/renderers/Raw.js @@ -1,12 +1,10 @@ import React, { useState, useEffect } from 'react'; import styled from 'styled-components' import { FetchPaste } from '../../helpers/httpHelper' +import {CodeLike} from "../Common/mixins"; const RawText = styled.pre` - word-wrap: break-word; - white-space: pre-wrap; - line-height: initial; - font-size: 0.8em; + ${CodeLike} padding: 0 1em; ` -- cgit v1.2.3