diff --git a/src/components/EditorControls.js b/src/components/EditorControls.js index 0862a73..7c2feb5 100644 --- a/src/components/EditorControls.js +++ b/src/components/EditorControls.js @@ -76,7 +76,7 @@ export default function EditorControls({ code, setCode, language, setLanguage, t - + ) @@ -97,6 +97,12 @@ const Header = styled.header` const Section = styled.div` display: flex; align-items: center; + + @media (max-width: 470px) { + .optional { + display: none; + } + } `; function langaugeToContentType(language) { diff --git a/src/components/EditorTextArea.js b/src/components/EditorTextArea.js index 31607ac..17b2ee2 100644 --- a/src/components/EditorTextArea.js +++ b/src/components/EditorTextArea.js @@ -19,7 +19,7 @@ export default function EditorTextArea({ code, setCode, language, fontSize }) { value={code} onValueChange={setCode} highlight={highlightWithLineNumbers} - placeholder={'Type some code...'} + placeholder={'Paste (or type) some code...'} padding={10} size={fontSize} textareaId='code-area' diff --git a/src/components/Menu.js b/src/components/Menu.js index e3223f5..5f06ca4 100644 --- a/src/components/Menu.js +++ b/src/components/Menu.js @@ -13,6 +13,12 @@ export const Button = styled.div` :hover { background: ${props => props.theme.highlight}; } + + @media (max-width: 640px) { + span { + display: none; + } + } `; const Menu = styled.ul` @@ -57,7 +63,7 @@ export const MenuButton = ({ label, ids, value, setValue }) => { return (