diff options
Diffstat (limited to 'client/src/components')
-rw-r--r-- | client/src/components/CustomSelect/CustomSelect.jsx | 2 | ||||
-rw-r--r-- | client/src/components/CustomSelect/CustomSelect.module.css | 2 | ||||
-rw-r--r-- | client/src/components/Editor/Editor.jsx | 47 | ||||
-rw-r--r-- | client/src/components/Editor/Editor.module.css | 1 | ||||
-rw-r--r-- | client/src/components/Header/Header.jsx | 6 | ||||
-rw-r--r-- | client/src/components/Header/Header.module.css | 4 | ||||
-rw-r--r-- | client/src/components/prism-themes/prism-gruvbox-dark.css | 227 |
7 files changed, 149 insertions, 140 deletions
diff --git a/client/src/components/CustomSelect/CustomSelect.jsx b/client/src/components/CustomSelect/CustomSelect.jsx index 2f98b34..f588d38 100644 --- a/client/src/components/CustomSelect/CustomSelect.jsx +++ b/client/src/components/CustomSelect/CustomSelect.jsx @@ -4,7 +4,7 @@ import styles from "./CustomSelect.module.css"; const CustomSelect = ({ options, onSelect }) => { const [isOpen, setIsOpen] = useState(false); const [selectedOption, setSelectedOption] = useState( - options.length > 0 ? options[0] : null + options.length > 0 ? options[0] : null, ); const toggleDropdown = () => { diff --git a/client/src/components/CustomSelect/CustomSelect.module.css b/client/src/components/CustomSelect/CustomSelect.module.css index 1cd7b64..81f9e62 100644 --- a/client/src/components/CustomSelect/CustomSelect.module.css +++ b/client/src/components/CustomSelect/CustomSelect.module.css @@ -46,7 +46,7 @@ width: 8rem; font-size: 14px; } - + .selected__option { padding: 8px; } diff --git a/client/src/components/Editor/Editor.jsx b/client/src/components/Editor/Editor.jsx index 0a78ca8..8ff2ff7 100644 --- a/client/src/components/Editor/Editor.jsx +++ b/client/src/components/Editor/Editor.jsx @@ -49,29 +49,34 @@ const Editor = () => { if (response.ok) { const isURL = URL_REGEX.test(text); if (isURL) { - navigator.clipboard.writeText(`${CLIENT_BASE_URL}/r/${data.id}`).then(function () { - alert("Short URL copied to clipboard!"); - }, function (err) { - try { - var successful = document.execCommand('copy'); + navigator.clipboard.writeText(`${CLIENT_BASE_URL}/r/${data.id}`).then( + function () { alert("Short URL copied to clipboard!"); - } catch (err) { - console.log('Oops, unable to copy'); - } - }); - } - else { - navigator.clipboard.writeText(`${CLIENT_BASE_URL}/r/${data.id}`).then(function () { - navigator.clipboard.writeText(`${CLIENT_BASE_URL}/${data.id}`); - alert("URL copied to clipboard!"); - }, function (err) { - try { - var successful = document.execCommand('copy'); + }, + function (err) { + try { + var successful = document.execCommand("copy"); + alert("Short URL copied to clipboard!"); + } catch (err) { + console.log("Oops, unable to copy"); + } + }, + ); + } else { + navigator.clipboard.writeText(`${CLIENT_BASE_URL}/r/${data.id}`).then( + function () { + navigator.clipboard.writeText(`${CLIENT_BASE_URL}/${data.id}`); alert("URL copied to clipboard!"); - } catch (err) { - console.log('Oops, unable to copy'); - } - }); + }, + function (err) { + try { + var successful = document.execCommand("copy"); + alert("URL copied to clipboard!"); + } catch (err) { + console.log("Oops, unable to copy"); + } + }, + ); } navigate(`/${data.id}`); } else { diff --git a/client/src/components/Editor/Editor.module.css b/client/src/components/Editor/Editor.module.css index 702847d..62c6759 100644 --- a/client/src/components/Editor/Editor.module.css +++ b/client/src/components/Editor/Editor.module.css @@ -69,7 +69,6 @@ } @media screen and (max-width: 768px) { - .btn__save { bottom: 2rem; right: 2rem; diff --git a/client/src/components/Header/Header.jsx b/client/src/components/Header/Header.jsx index 712696c..9682104 100644 --- a/client/src/components/Header/Header.jsx +++ b/client/src/components/Header/Header.jsx @@ -7,7 +7,11 @@ import CustomSelect from "../CustomSelect/CustomSelect"; const Header = ({ isSelectVisible, onLanguageChange }) => { return ( <div className={styles.header}> - <Link to="/"><h1><span className={styles.header__mini}>mini</span>bin</h1></Link> + <Link to="/"> + <h1> + <span className={styles.header__mini}>mini</span>bin + </h1> + </Link> {isSelectVisible && ( <CustomSelect options={SUPPORTED_LANGUAGES} diff --git a/client/src/components/Header/Header.module.css b/client/src/components/Header/Header.module.css index 193894c..9717e14 100644 --- a/client/src/components/Header/Header.module.css +++ b/client/src/components/Header/Header.module.css @@ -19,7 +19,7 @@ color: inherit; } -.header__mini{ +.header__mini { color: var(--color-yellow); } @@ -27,7 +27,7 @@ .header { margin: 0.5rem 1rem; } - + .header h1 { font-size: 2rem; } diff --git a/client/src/components/prism-themes/prism-gruvbox-dark.css b/client/src/components/prism-themes/prism-gruvbox-dark.css index bfdd903..b0ab2b1 100644 --- a/client/src/components/prism-themes/prism-gruvbox-dark.css +++ b/client/src/components/prism-themes/prism-gruvbox-dark.css @@ -8,116 +8,117 @@ * @version 1.0 */ - code[class*="language-"], - pre[class*="language-"] { - color: #ebdbb2; /* fg1 / fg */ - direction: ltr; - text-align: left; - white-space: pre; - word-spacing: normal; - line-height: 1.5; - - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; - } - - pre[class*="language-"]::-moz-selection, - pre[class*="language-"] ::-moz-selection, - code[class*="language-"]::-moz-selection, - code[class*="language-"] ::-moz-selection { - color: #fbf1c7; /* fg0 */ - background: #7c6f64; /* bg4 */ - } - - pre[class*="language-"]::selection, - pre[class*="language-"] ::selection, - code[class*="language-"]::selection, - code[class*="language-"] ::selection { - color: #fbf1c7; /* fg0 */ - background: #7c6f64; /* bg4 */ - } - - .token.comment, - .token.prolog, - .token.cdata { - color: #a89984; /* fg4 / gray1 */ - } - - .token.delimiter, - .token.boolean, - .token.keyword, - .token.selector, - .token.important, - .token.atrule { - color: #fb4934; /* red2 */ - } - - .token.operator, - .token.punctuation, - .token.attr-name { - color: #a89984; /* fg4 / gray1 */ - } - - .token.tag, - .token.tag .punctuation, - .token.doctype, - .token.builtin { - color: #fabd2f; /* yellow2 */ - } - - .token.entity, - .token.number, - .token.symbol { - color: #d3869b; /* purple2 */ - } - - .token.property, - .token.constant, - .token.variable { - color: #fb4934; /* red2 */ - } - - .token.string, - .token.char { - color: #b8bb26; /* green2 */ - } - - .token.attr-value, - .token.attr-value .punctuation { - color: #a89984; /* fg4 / gray1 */ - } - - .token.url { - color: #b8bb26; /* green2 */ - text-decoration: underline; - } - - .token.function { - color: #fabd2f; /* yellow2 */ - } - - .token.regex { - background: #b8bb26; /* green2 */ - } - - .token.bold { - font-weight: bold; - } - - .token.italic { - font-style: italic; - } - - .token.inserted { - background: #a89984; /* fg4 / gray1 */ - } - - .token.deleted { - background: #fb4934; /* red2 */ - }
\ No newline at end of file +code[class*="language-"], +pre[class*="language-"] { + color: #ebdbb2; /* fg1 / fg */ + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + color: #fbf1c7; /* fg0 */ + background: #7c6f64; /* bg4 */ +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + color: #fbf1c7; /* fg0 */ + background: #7c6f64; /* bg4 */ +} + +.token.comment, +.token.prolog, +.token.cdata { + color: #a89984; /* fg4 / gray1 */ +} + +.token.delimiter, +.token.boolean, +.token.keyword, +.token.selector, +.token.important, +.token.atrule { + color: #fb4934; /* red2 */ +} + +.token.operator, +.token.punctuation, +.token.attr-name { + color: #a89984; /* fg4 / gray1 */ +} + +.token.tag, +.token.tag .punctuation, +.token.doctype, +.token.builtin { + color: #fabd2f; /* yellow2 */ +} + +.token.entity, +.token.number, +.token.symbol { + color: #d3869b; /* purple2 */ +} + +.token.property, +.token.constant, +.token.variable { + color: #fb4934; /* red2 */ +} + +.token.string, +.token.char { + color: #b8bb26; /* green2 */ +} + +.token.attr-value, +.token.attr-value .punctuation { + color: #a89984; /* fg4 / gray1 */ +} + +.token.url { + color: #b8bb26; /* green2 */ + text-decoration: underline; +} + +.token.function { + color: #fabd2f; /* yellow2 */ +} + +.token.regex { + background: #b8bb26; /* green2 */ +} + +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.inserted { + background: #a89984; /* fg4 / gray1 */ +} + +.token.deleted { + background: #fb4934; /* red2 */ +} + |