feat: ui improvements

Author: selimdoyranli

components/Dialog/AppCreditsDialog/AppCreditsDialog.component.scss

@@ -4,12 +4,20 @@
   #{$vs-dialog} {
     background-color: var(--color-ui-03);
     box-shadow: var(--box-shadow-01);
-  }
 
-  &__body {
-    padding: calc(#{$spacer} * 4);
-    color: var(--color-text-02);
-    font-size: var(--font-size-text-20);
-    text-align: center;
+    &__content {
+      padding: calc(#{$spacer} * 8);
+      color: var(--color-text-02);
+      font-size: var(--font-size-text-20);
+      text-align: center;
+    }
+
+    &__footer {
+      display: flex;
+      flex-direction: column;
+      max-width: 50%;
+      margin: 0 auto;
+      padding-bottom: calc(#{$spacer} * 4);
+    }
   }
 }

components/Dialog/AppCreditsDialog/AppCreditsDialog.component.vue

@@ -2,27 +2,18 @@
 vs-dialog.app-credits-dialog(v-model="dialog.isOpen" blur @close="handleClose")
   template(#header)
     AppLogo.mt-4
-  .app-credits-dialog__body
-    p(v-html="$t('credits.description')")
+
+  p(v-html="$t('credits.description')")
+
   template(#footer)
-    vs-button.mx-auto(transparent href="https://github.com/selimdoyranli/4in1crop" blank)
+    vs-button(color="#171515" href="https://github.com/selimdoyranli/4in1crop" blank)
       AppIcon.me-1(name="charm:github" color="var(--color-text-02)")
       span.color-text-02 Github repository
 
     // Buymeacoffee Button
-    script(
-      type="text/javascript"
-      src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js"
-      data-name="bmc-button"
-      data-slug="selimdoyranli"
-      data-color="#FFDD00"
-      data-emoji
-      data-font="Inter"
-      data-text="Buy me a coffee"
-      data-outline-color="#000000"
-      data-font-color="#000000"
-      data-coffee-color="#ffffff"
-    )
+    vs-button(color="#FD0" href="https://www.buymeacoffee.com/selimdoyranli" blank)
+      AppIcon.me-1(name="simple-icons:buymeacoffee" color="var(--color-text-02)")
+      span.color-text-02 Donate
 </template>
 
 <script>

components/Menu/AspectRatioSelectMenu/AspectRatioSelectMenu.component.vue

@@ -4,7 +4,7 @@
   .aspect-ratio-select-menu__group.aspect-ratio-select-menu__group--standard
     .aspect-ratio-select-menu-item(
       v-for="ratio in aspectRatio.standard.list"
-      :key="ratio"
+      :key="ratio.key"
       :class="[getSelectedClass(ratio)]"
       @click="selectRatio(ratio)"
     )
@@ -14,7 +14,7 @@
   .aspect-ratio-select-menu__group.aspect-ratio-select-menu__group--social
     .aspect-ratio-select-menu-item(
       v-for="ratio in aspectRatio.social.list"
-      :key="ratio"
+      :key="ratio.key"
       :class="[getSelectedClass(ratio)]"
       @click="selectRatio(ratio)"
     )

components/Panel/CropPanel/CropPanel.component.vue

@@ -30,7 +30,8 @@
       span.crop-panel-footer__label
         template(v-if="type === cropTypeEnum.FREE")
           span {{ $t('editor.freeform') }}
-          span(v-if="selectedFreeFormRatio && selectedFreeFormRatio.key !== cropTypeEnum.FREE")   ({{ selectedFreeFormRatio.title }})
+          span(v-if="selectedFreeFormRatio && selectedFreeFormRatio.key !== cropTypeEnum.FREE")  
+            | ({{ selectedFreeFormRatio.title.replace(/<\/?[^>]+(>|$)/g, '') }})
         template(v-else) {{ aspectRatio }}
 
       template(v-if="panel.cropper")