refactor: Revamp UI and colorscheme

- We gruvbox now :)

client/src/components/CustomSelect/CustomSelect.jsx

@@ -20,7 +20,15 @@ const CustomSelect = ({ options, onSelect }) => {
   return (
     <div className={styles.select}>
       <div className={styles.selected__option} onClick={toggleDropdown}>
-        {selectedOption ? selectedOption.label : "Select an option"}
+        {selectedOption ? (
+          <>
+            <span>&#x3c;&#x2f;&#x3e;</span>
+            <span>{selectedOption.label}</span>
+            <span>&#9660;</span>
+          </>
+        ) : (
+          "Select an option"
+        )}
       </div>
       {isOpen && (
         <div className={styles.options}>

client/src/components/CustomSelect/CustomSelect.module.css

@@ -1,32 +1,42 @@
 .select {
   position: relative;
   display: inline-block;
+  width: 12rem;
+  text-align: center;
+  background-color: var(--color-yellow);
+  color: var(--color-dark);
+  border-radius: 10px;
 }
 
 .selected__option {
   cursor: pointer;
   padding: 10px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
+  border: none;
+  display: flex;
+  justify-content: space-between;
 }
 
 .options {
   position: absolute;
-  top: 100%;
+  top: 140%;
   left: 0;
   width: 100%;
-  border: 1px solid #ccc;
-  border-top: none;
-  border-radius: 0 0 4px 4px;
-  background-color: #ebdbb2;
+  border: none;
+  border-radius: 10px;
+  background-color: var(--color-yellow);
   z-index: 1;
 }
 
 .option {
   padding: 10px;
-  color: #282828;
+  color: var(--color-dark);
+  border-bottom: var(--color-dark) 1px solid;
   cursor: pointer;
+  transition: all 0.3s ease;
   &:hover {
-    background-color: #f0f0f0;
+    scale: 1.1;
+  }
+  &:last-child {
+    border-bottom: none;
   }
 }

client/src/components/Editor/Editor.jsx

@@ -25,6 +25,10 @@ const Editor = () => {
   };
 
   const handleClick = async () => {
+    if (!text) {
+      alert("Please enter some text!");
+      return;
+    }
     const response = await fetch(`${SERVER_BASE_URL}/bin`, {
       method: "POST",
       headers: {

client/src/components/Editor/Editor.module.css

@@ -29,6 +29,7 @@
   font-size: 16px;
   line-height: 1.5rem;
   text-align: right;
+  color: var(--color-light);
 }
 
 .codespace {
@@ -39,7 +40,7 @@
 }
 
 .codespace__textarea {
-  caret-color: white;
+  caret-color: var(--color-light);
   background: transparent;
   position: absolute;
   color: transparent;
@@ -70,16 +71,19 @@
   right: 3rem;
   height: 6rem;
   width: 6rem;
-  background-color: #ebdbb2;
-  color: white;
+  background-color: var(--color-yellow);
   border: none;
   border-radius: 50%;
   cursor: pointer;
   transition: 0.3s;
   z-index: 1;
+  &:hover {
+    transform: scale(1.1);
+  }
 }
 
 .btn__icon {
   height: 3rem;
   width: 3rem;
+  filter: invert(11%) sepia(0%) saturate(0%) hue-rotate(158deg) brightness(100%) contrast(88%);
 }

client/src/components/Header/Header.jsx

@@ -6,7 +6,7 @@ import CustomSelect from "../CustomSelect/CustomSelect";
 const Header = ({ isSelectVisible, onLanguageChange }) => {
   return (
     <div className={styles.header}>
-      <h1>minibin</h1>
+      <h1><span className={styles.header__mini}>mini</span>bin</h1>
       {isSelectVisible && (
         <CustomSelect
           options={SUPPORTED_LANGUAGES}

client/src/components/Header/Header.module.css

@@ -2,35 +2,14 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin: 2rem;
+  margin: 0.5rem 2rem;
+  color: var(--color-light);
 }
 
 .header h1 {
   margin: 0;
 }
 
-.languages {
-  background-color: #ebdbb2;
-  border: none;
-  border-radius: 10px;
-  padding: 0.5rem 1rem;
-  font-family: inherit;
-  font-size: inherit;
-  cursor: inherit;
-  line-height: inherit;
-  width: 8rem;
-  outline: none;
-  color: #282828;
-  appearance: none;
-  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23131313%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
-  background-repeat: no-repeat;
-  background-position: right 0.7rem top 50%;
-  background-size: 0.65rem auto;
+.header__mini{
+  color: var(--color-yellow);
 }
-
-.languages__option {
-  cursor: pointer;
-  background: #ebdbb2;
-  color: #282828;
-}
-

client/src/index.css

@@ -1,3 +1,4 @@
+@import url(variables.css);
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
@@ -16,6 +17,7 @@ body {
   margin: 0;
   width: 100vw;
   height: 100vh;
+  background-color: var(--color-dark);
 }
 
 h1 {

client/src/variables.css

@@ -0,0 +1,5 @@
+:root {
+    --color-dark: #282828;
+    --color-light: #ebdbb2;
+    --color-yellow: #fabd2f;
+}