aboutsummaryrefslogtreecommitdiff
path: root/client/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/components')
-rw-r--r--client/src/components/CustomSelect/CustomSelect.jsx2
-rw-r--r--client/src/components/CustomSelect/CustomSelect.module.css2
-rw-r--r--client/src/components/Editor/Editor.jsx47
-rw-r--r--client/src/components/Editor/Editor.module.css1
-rw-r--r--client/src/components/Header/Header.jsx6
-rw-r--r--client/src/components/Header/Header.module.css4
-rw-r--r--client/src/components/prism-themes/prism-gruvbox-dark.css227
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 */
+}
+