styles: added styles

app.css

@@ -30,6 +30,45 @@ body {
   min-height: 100vh;
 }
 
+.__control--is-focused {
+  border: none !important;
+  box-shadow: none !important;
+}
+
 i {
   width: 20px
+}
+
+* ::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 8px;
+  height: 8px;
+}
+
+* ::-webkit-scrollbar-thumb, html ::-webkit-scrollbar-thumb {
+  cursor: pointer;
+  border-radius: 5px;
+  background: #ccc;
+  -webkit-transition: color .2s ease;
+  transition: color .2s ease;
+}
+
+.dark * ::-webkit-scrollbar-thumb, html.dark ::-webkit-scrollbar-thumb {
+  cursor: pointer;
+  border-radius: 5px;
+  background: #202225;
+  -webkit-transition: color .2s ease;
+  transition: color .2s ease;
+}
+
+* ::-webkit-scrollbar-track, html ::-webkit-scrollbar-track {
+  background: #f2f2f2;
+  border-radius: 0;
+  border: 4px solid transparent;
+  border-radius: 8px;
+}
+
+.dark * ::-webkit-scrollbar-track, html.dark ::-webkit-scrollbar-track {
+  background: #2e3338;
+  border-radius: 0;
 }

components/Form/Input.tsx

@@ -1,7 +1,7 @@
 import { Field } from 'formik'
 
 const Input = ({ name, placeholder }:InputProps):JSX.Element => {
-	return <Field name={name} className='text-black w-full h-10 border border-grey-light rounded px-3 relative focus:shadow outline-none' placeholder={placeholder}/>
+	return <Field name={name} className='border border-grey-light dark:border-transparent text-black dark:bg-very-black dark:text-white w-full h-10 rounded px-3 relative outline-none' placeholder={placeholder}/>
 }
 
 interface InputProps {
@@ -9,5 +9,4 @@ interface InputProps {
   placeholder?: string
 }
 
-export default Input
-
+export default Input

components/Tag.tsx

@@ -60,7 +60,7 @@ const Tag = ({
 						? 'font-bg dark:text-white bg-discord-blurple text-black'
 						: github
 							? 'bg-gray-900 text-white'
-							: 'bg-little-white-hover dark:bg-very-black'
+							: `bg-little-white-hover dark:bg-very-black ${props.onClick ? 'hover:bg-little-white dark:hover:bg-discord-dark-hover transition duration-100 ease-in' : '' }`
 					: `bg-little-white dark:bg-discord-black ${props.onClick ? 'hover:bg-little-white-hover dark:hover:bg-discord-dark-hover transition duration-100 ease-in' : '' }`
 			} ${!blurple && !github ? 'text-black dark:text-gray-400' : ''} ${
 				circular ? `rounded-3xl ${bigger ? 'px-3.5 py-2.5' : 'px-2.5 py-1.5'}` : `rounded ${bigger ? 'px-3 py-2' : 'px-2 py-1'}`