fix: fixed color of x-button

src/components/GeneratedChallengesModal.vue

@@ -6,7 +6,7 @@
         <div class="relative bg-white pt-10 p-4 rounded-lg shadow-xl" style="width: 40rem">
             <button
                 @click="closeModal"
-                class="absolute top-0 right-0 m-2 text-gray-600 hover:text-gray-800"
+                class="absolute top-0 right-0 m-2 text-white"
             >
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -26,8 +26,8 @@
             <div class="text-center font-bold text-3xl mb-4 mt-2">
                 Personlig tilpassede spareutfordringer:
             </div>
-            <div class="grid grid-cols-7 sm:grid-cols-9 gap-2 p-3 pb-1 border-b-2">
-                <span class="font-bold col-span-2 md:col-span-2 sm:text-lg pt-1 mb-0">Tittel</span>
+            <div class="grid grid-cols-7 sm:grid-cols-11 gap-2 p-3 pb-1 border-b-2">
+                <span class="font-bold col-span-2 md:col-span-3 sm:text-lg pt-1 mb-0">Tittel</span>
                 <span class="font-bold col-span-2 md:col-span-2 sm:text-lg pt-1 mb-0">Målsum</span>
                 <span class="font-bold col-span-2 md:col-span-1 sm:text-lg pt-1 pr-1 md:pr-3 mb-0">Frist</span>
                 <span class="col-span-2"></span>
@@ -39,19 +39,19 @@
                     :class="{ 'bg-gray-100': index % 2 === 0 }"
                     class="grid grid-cols-7 md:grid-cols-7 sm:grid-cols-2 lg:grid-cols-7 gap-4 items-center border p-3 rounded mt-[-8px]"
                 >
-                    <span class="break-words col-span-2 md:col-span-1 lg:col-span-2 sm:text-lg" >{{ challenge.title }}</span>
-                    <span class="col-span-2 md:col-span-2 lg:col-span-1 sm:text-lg">{{ challenge.target }}</span>
-                    <span class="col-span-2 md:col-span-1 lg:col-span-2 sm:text-lg">{{ challenge.due }}</span>
+                    <span class="break-words col-span-2 md:col-span-1 lg:col-span-2 text-lg" >{{ challenge.title }}</span>
+                    <span class="col-span-2 md:col-span-2 lg:col-span-1 text-lg">{{ challenge.target }}</span>
+                    <span class="col-span-2 md:col-span-1 lg:col-span-2 text-lg">{{ challenge.due }}</span>
                     <div class="col-span-7 sm:col-start-3 sm:col-span-2 md:col-span-2 lg:col-span-2 flex items-center justify-end space-x-2">
                         <button
                             @click="declineChallenge(challenge.id)"
-                            class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-1 px-4 "
+                            class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-1 px-4 mt-[-14px] sm:mt-0"
                         >
                             Skip
                         </button>
                         <button
                             @click="acceptChallenge(challenge.id)"
-                            class="text-white font-bold py-1 px-4 "
+                            class="text-white font-bold py-1 px-4 mt-[-14px] sm:mt-0"
                         >
                             Godta
                         </button>