From dbad5b081f2c7d5ef564ba11833fb5877360f55c Mon Sep 17 00:00:00 2001
From: selimdoyranli <selimdoyranli@gmail.com>
Date: Tue, 23 May 2023 18:00:54 +0300
Subject: [PATCH] feat: ui improvements

---
 .../AppCreditsDialog.component.scss           | 20 +++++++++++-----
 .../AppCreditsDialog.component.vue            | 23 ++++++-------------
 .../AspectRatioSelectMenu.component.vue       |  4 ++--
 .../Panel/CropPanel/CropPanel.component.vue   |  3 ++-
 4 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/components/Dialog/AppCreditsDialog/AppCreditsDialog.component.scss b/components/Dialog/AppCreditsDialog/AppCreditsDialog.component.scss
index 3970dfd..cbba9a2 100644
--- a/components/Dialog/AppCreditsDialog/AppCreditsDialog.component.scss
+++ b/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);
+    }
   }
 }
diff --git a/components/Dialog/AppCreditsDialog/AppCreditsDialog.component.vue b/components/Dialog/AppCreditsDialog/AppCreditsDialog.component.vue
index 50b7493..4b63975 100644
--- a/components/Dialog/AppCreditsDialog/AppCreditsDialog.component.vue
+++ b/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>
diff --git a/components/Menu/AspectRatioSelectMenu/AspectRatioSelectMenu.component.vue b/components/Menu/AspectRatioSelectMenu/AspectRatioSelectMenu.component.vue
index 9fad199..7dc0886 100644
--- a/components/Menu/AspectRatioSelectMenu/AspectRatioSelectMenu.component.vue
+++ b/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)"
     )
diff --git a/components/Panel/CropPanel/CropPanel.component.vue b/components/Panel/CropPanel/CropPanel.component.vue
index f6fd890..b2695c8 100644
--- a/components/Panel/CropPanel/CropPanel.component.vue
+++ b/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") &nbsp; ({{ selectedFreeFormRatio.title }})
+          span(v-if="selectedFreeFormRatio && selectedFreeFormRatio.key !== cropTypeEnum.FREE") &nbsp;
+            | ({{ selectedFreeFormRatio.title.replace(/<\/?[^>]+(>|$)/g, '') }})
         template(v-else) {{ aspectRatio }}
 
       template(v-if="panel.cropper")