feat: update styles for swipe to back

frontend/spa/src/App.vue

@@ -25,18 +25,15 @@
           <div
               v-if="swiperBack.isActive.value"
               class="fixed top-1/2 left-0 z-50
-         w-16
+         w-20
+         h-20
          -translate-y-1/2
-         -translate-x-12
+         -translate-x-18
-         text-primary-content
          flex items-center justify-end
          shadow-xl
-         border-r
+         rounded-full
-         border-t
-         border-b
-         rounded-br-lg
-         rounded-tr-lg
          py-2
+         text-primary-content
         "
               :class="{
                 'bg-primary': swiperBack.deltaX.value < swiperBack.ACTIVATION_THRESHOLD,
@@ -45,19 +42,8 @@
               :style="{ transform: `translate(${easeOut(swiperBack.deltaX.value/10, 30)}px, -50%)` }"
 
           >
-            <svg
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
-                xmlns="http://www.w3.org/2000/svg"
+              <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="currentColor"
-                class="w-8 h-8"
-            >
-              <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15m-3 0-3-3m0 0 3-3m-3 3H15"
-              />
             </svg>
           </div>
         </section>