add icons

SteveBloX · May 20, 2024 · f3a75e6 · f3a75e6
1 parent cdbe01a
commit f3a75e6
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -3,6 +3,10 @@
   <title>Trackmania Username Generator</title>
   <link rel="stylesheet" href="styles.css" />
   <script src="https://cdn.tailwindcss.com"></script>
+  <link
+    rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+  />
 </head>
 <body>
   <div id="container">
@@ -82,7 +86,7 @@ <h3 class="font-bold">Code:</h3>
         id="copy"
         class="py-2.5 px-5 me-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
       >
-        Copy
+        Copy <i class="fa-solid fa-copy ml-1"></i>
       </button>
     </div>
     <p class="text-sm text-gray-500 mb-1">Text formatting coming soon!</p>
@@ -97,7 +101,7 @@ <h3 class="font-bold">Code:</h3>
       id="expandGradient"
       class="py-2.5 px-5 me-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
     >
-      Expand
+      Expand <i class="fa-solid fa-chevron-up"></i>
     </button>
   </div>
 

diff --git a/main.js b/main.js
@@ -134,10 +134,12 @@ expandGradientButton.addEventListener("click", () => {
   if (gradientExpanded) {
     gradientPreview.style.height = "8rem";
     expandGradientButton.style.bottom = "8.2rem";
-    expandGradientButton.innerText = "Collapse";
+    expandGradientButton.innerHTML =
+      'Collapse <i class="fa-solid fa-chevron-down"></i>';
   } else {
     gradientPreview.style.height = "0.5rem";
     expandGradientButton.style.bottom = "0.4rem";
-    expandGradientButton.innerText = "Expand";
+    expandGradientButton.innerHTML =
+      'Expand <i class="fa-solid fa-chevron-up"></i>';
   }
 });
diff --git a/styles.css b/styles.css
@@ -27,9 +27,6 @@ body {
   width: 100%;
   transition: .5s all;
 }
-#gradient:hover{
-  height: 8rem;
-}
 #expandGradient {
   position: fixed;
   bottom: .4rem;