From 8b5a96159bb4fc97d1c133e436248a7db578b023 Mon Sep 17 00:00:00 2001 From: amiraabouhadid Date: Sun, 24 Nov 2024 19:30:50 +0200 Subject: [PATCH 01/14] update src for playstore and app store imgs, move qrcode and playstore btns into separate component --- .../src/components/deposit_dialog.vue | 35 ++----------- .../src/components/qr_play_store.vue | 50 +++++++++++++++++++ 2 files changed, 53 insertions(+), 32 deletions(-) create mode 100644 packages/playground/src/components/qr_play_store.vue diff --git a/packages/playground/src/components/deposit_dialog.vue b/packages/playground/src/components/deposit_dialog.vue index 69e6545b75..8be2007bb3 100644 --- a/packages/playground/src/components/deposit_dialog.vue +++ b/packages/playground/src/components/deposit_dialog.vue @@ -47,25 +47,7 @@ -
- OR -

Use ThreeFold Connect to scan this QRcode:

-
- -
-
- -
-
+ @@ -89,7 +71,6 @@ import { AppThemeSelection } from "@/utils/app_theme"; import { manual } from "@/utils/manual"; import { useProfileManagerController } from "../components/profile_manager_controller.vue"; -import QrcodeGenerator from "../components/qrcode_generator.vue"; import { useGrid, useProfileManager } from "../stores"; import { createCustomToast, ToastType } from "../utils/custom_toast"; import CopyReadonlyInput from "./copy_readonly_input.vue"; @@ -105,18 +86,6 @@ const gridStore = useGrid(); const grid = gridStore.client as GridClient; const theme = useTheme(); -const apps = [ - { - src: ``, - alt: "play-store", - url: "https://play.google.com/store/apps/details?id=org.jimber.threebotlogin&hl=en&gl=US", - }, - { - src: ``, - alt: "app-store", - url: "https://apps.apple.com/us/app/threefold-connect/id1459845885", - }, -]; const props = defineProps({ selectedName: String, depositWallet: String, @@ -184,9 +153,11 @@ import type { GridClient } from "@threefold/grid_client"; import { defineComponent } from "vue"; import { updateGrid } from "../utils/grid"; +import QRPlayStore from "./qr_play_store.vue"; export default defineComponent({ name: "DepositDialog", + components: { QRPlayStore }, }); diff --git a/packages/playground/src/components/qr_play_store.vue b/packages/playground/src/components/qr_play_store.vue new file mode 100644 index 0000000000..80a085b781 --- /dev/null +++ b/packages/playground/src/components/qr_play_store.vue @@ -0,0 +1,50 @@ + + + From b0489e28726ca0c812da31c76bc080c1661902e4 Mon Sep 17 00:00:00 2001 From: amiraabouhadid Date: Sun, 24 Nov 2024 20:03:31 +0200 Subject: [PATCH 02/14] add light mode playstore btns --- .../playground/src/components/qr_play_store.vue | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/playground/src/components/qr_play_store.vue b/packages/playground/src/components/qr_play_store.vue index 80a085b781..5926ecb427 100644 --- a/packages/playground/src/components/qr_play_store.vue +++ b/packages/playground/src/components/qr_play_store.vue @@ -5,14 +5,14 @@
-
+
@@ -23,15 +23,18 @@ const props = defineProps({ qr: String, }); - +const theme = useTheme().name.value; const apps = [ { - src: `“Get it on Google Play” badge`, + src_dark: `“Get it on Google Play” badge`, + src_light: ``, alt: "play-store", url: "https://play.google.com/store/apps/details?id=org.jimber.threebotlogin&hl=en&gl=US", }, { - src: `Download on the App Store RGB blk`, + src_dark: `Download on the App Store RGB blk + `, + src_light: `Download on the App Store RGB wht`, alt: "app-store", url: "https://apps.apple.com/us/app/threefold-connect/id1459845885", }, @@ -39,6 +42,7 @@ const apps = [ From 98851503640c5376da1d089a7a83f5b2f4872cb2 Mon Sep 17 00:00:00 2001 From: amiraabouhadid Date: Wed, 27 Nov 2024 08:29:17 +0200 Subject: [PATCH 05/14] remove light app store btns --- packages/playground/src/components/qr_play_store.vue | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/packages/playground/src/components/qr_play_store.vue b/packages/playground/src/components/qr_play_store.vue index 73c22f43ca..6cf2b44dae 100644 --- a/packages/playground/src/components/qr_play_store.vue +++ b/packages/playground/src/components/qr_play_store.vue @@ -12,7 +12,7 @@ :style="{ cursor: 'pointer', width: '9rem' }" class="mx-2" :title="app.alt" - v-html="theme == 'dark' ? app.src_dark : app.src_light" + v-html="app.src" :href="app.url" target="_blank" /> @@ -23,18 +23,15 @@ const props = defineProps({ qr: String, }); -const theme = useTheme().name.value; + const apps = [ { - src_dark: ``, - src_light: ` -`, + src: ``, alt: "Threefold Connect on Google Play Store", url: "https://play.google.com/store/apps/details?id=org.jimber.threebotlogin&hl=en&gl=US", }, { - src_dark: ``, - src_light: ``, + src: ``, alt: "Threefold Connect on Apple App Store", url: "https://apps.apple.com/us/app/threefold-connect/id1459845885", }, @@ -42,7 +39,6 @@ const apps = [