client: fix axe devtools issues

Author: 0l1v3rr

client/public/index.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta
       name="description"
-      content="Dynamically generated, customizable technologies cards for your GitHub README."
+      content="Display your favorite technologies, tools, or the tech stack your project uses with these fully customizable, good-looking cards on your GitHub README!"
     />
     <meta http-equiv="Cache-Control" content="no-store, no-cache" />
     <meta http-equiv="Pragma" content="no-cache" />

client/src/App.tsx

@@ -12,7 +12,7 @@ const App = () => {
     <div className="bg-gh-bg w-full min-h-screen overflow-x-hidden select-none pb-5">
       <Header />
 
-      <main className="flex gap-4 mx-4 md:mx-32 lg:mx-36 mt-6 flex-col lg:flex-row">
+      <main className="flex gap-4 mx-4 sm:mx-10 md:mx-32 lg:mx-36 mt-6 flex-col lg:flex-row">
         <Options setLink={(link: string) => setLink(link)} />
         <Preview link={link} />
       </main>

client/src/components/input/ColorInput.tsx

@@ -65,6 +65,7 @@ const ColorInput: FC<ColorInputProps> = (props) => {
           onChange={(e) => props.setValue(e.target.value)}
           type="color"
           autoComplete="off"
+          aria-label="Select Color"
           className="text-base border border-solid rounded-md px-2 py-1 
             leading-none cursor-pointer border-gh-button-border 
             bg-gh-button hover:bg-gh-button-active hover:border-gh-button-border-active

client/src/components/input/Input.tsx

@@ -67,6 +67,7 @@ const Input: FC<InputProps> = (props) => {
 
         <button
           type="button"
+          aria-label="Clear"
           onMouseDown={() => props.setValue("")}
           className={twMerge(
             `absolute top-1/2 -translate-y-1/2 cursor-pointer right-2

client/src/pages/Options.tsx

@@ -233,7 +233,7 @@ const Options: FC<OptionsProps> = (props) => {
           <SecondaryButton
             onClick={() => setCard(newCard())}
             text="Reset"
-            className="text-red-500 font-semibold"
+            className="text-red-400 font-semibold"
           />
         </div>
       </div>