chore: fix button styles

cloudy-apps · Apr 2, 2024 · f8c01bc · f8c01bc
1 parent a01d6ae
commit f8c01bc
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 32 deletions.
diff --git a/assets/next.svg b/assets/next.svg
diff --git a/assets/previous.svg b/assets/previous.svg
diff --git a/assets/shuffle.svg b/assets/shuffle.svg
diff --git a/components/App.vue b/components/App.vue
@@ -46,28 +46,52 @@
         <div
           class="p-3 bg-gray-100 border-t border-gray-200 flex justify-between rounded-b-lg overflow-hidden"
         >
-          <button
-            :disabled="index <= 0"
-            @click="prevCard"
-            class="py-1 px-2 border border-blue-400 text-blue-500 font-semibold border rounded"
-          >
-            <img src="/assets/previous.svg" class="w-12 h-12" alt="Previous" />
+          <button @click="prevCard()" class="p-2">
+            <svg
+              class="w-12 h-12"
+              alt="Previous"
+              xmlns="http://www.w3.org/2000/svg"
+              height="24"
+              viewBox="0 -960 960 960"
+              width="24"
+            >
+              <path
+                fill="currentColor"
+                d="M220-240v-480h80v480h-80Zm520 0L380-480l360-240v480Zm-80-240Zm0 90v-180l-136 90 136 90Z"
+              />
+            </svg>
           </button>
 
-          <button
-            :disabled="index <= 0"
-            @click="shuffle"
-            class="py-1 px-2 border border-blue-400 text-blue-500 font-semibold border rounded"
-          >
-            <img src="/assets/shuffle.svg" class="w-12 h-12" alt="Shuffle" />
+          <button @click="shuffle()" class="p-2">
+            <svg
+              class="w-12 h-12"
+              alt="Shuffle"
+              xmlns="http://www.w3.org/2000/svg"
+              height="24"
+              viewBox="0 -960 960 960"
+              width="24"
+            >
+              <path
+                fill="currentColor"
+                d="M560-160v-80h104L537-367l57-57 126 126v-102h80v240H560Zm-344 0-56-56 504-504H560v-80h240v240h-80v-104L216-160Zm151-377L160-744l56-56 207 207-56 56Z"
+              />
+            </svg>
           </button>
 
-          <button
-            :disabled="index >= cards.length - 1"
-            @click="nextCard"
-            class="py-1 px-2 border border-blue-400 text-blue-500 font-semibold rounded"
-          >
-            <img src="/assets/next.svg" class="w-12 h-12" alt="Next" />
+          <button @click="nextCard()" class="p-2">
+            <svg
+              class="w-12 h-12"
+              alt="Next"
+              xmlns="http://www.w3.org/2000/svg"
+              height="24"
+              viewBox="0 -960 960 960"
+              width="24"
+            >
+              <path
+                fill="currentColor"
+                d="M660-240v-480h80v480h-80Zm-440 0v-480l360 240-360 240Zm80-240Zm0 90 136-90-136-90v180Z"
+              />
+            </svg>
           </button>
         </div>
       </div>
@@ -107,7 +131,7 @@ function prevCard() {
   if (index.value > 0) {
     index.value--;
   } else {
-    index.value = cards.length - 1;
+    index.value = cards.value.length - 1;
   }
 
   setTimeout(() => (animated.value = true));
@@ -117,7 +141,7 @@ function nextCard() {
   animated.value = false;
   unflip();
 
-  if (index.value < cards.length - 1) {
+  if (index.value < cards.value.length - 1) {
     index.value++;
   } else {
     index.value = 0;
@@ -126,17 +150,19 @@ function nextCard() {
   setTimeout(() => (animated.value = true));
 }
 
-async function speak () {
+async function speak() {
   const card = cards.value[index.value];
   speechSynthesis.speak(
     Object.assign(
-      new SpeechSynthesisUtterance(showTranslation.value ? card.back : card.front),
-      { lang: showTranslation.value ? 'en' : lang.value }
+      new SpeechSynthesisUtterance(
+        showTranslation.value ? card.back : card.front
+      ),
+      { lang: showTranslation.value ? "en" : lang.value }
     )
   );
-};
+}
 
-function handleKeyDown (event) {
+function handleKeyDown(event) {
   if (event.key === "d" || event.key === "ArrowLeft") {
     prevCard();
   }
@@ -160,7 +186,7 @@ function handleKeyDown (event) {
   if (event.key === "p" && canSpeak.value) {
     speak();
   }
-};
+}
 
 onMounted(async () => {
   window.addEventListener("keydown", handleKeyDown);