From 34bc2f444053662da9899865b0494efbcdecef06 Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Tue, 17 Oct 2023 11:27:06 +0200
Subject: [PATCH] Style the "share QR" link

Only available in supporting browsers.
---
 src/assets/css/getlink.scss     | 26 ++++++++++++++++++++------
 src/assets/icons/ic_share.svg   |  2 +-
 src/assets/translations/en.json |  1 +
 src/components/CopyLink.vue     |  3 ++-
 src/components/GetLink.vue      |  8 ++++++--
 5 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/assets/css/getlink.scss b/src/assets/css/getlink.scss
index 6c020e6..e923559 100644
--- a/src/assets/css/getlink.scss
+++ b/src/assets/css/getlink.scss
@@ -96,12 +96,26 @@
   }
 
   .getlink-share {
-    position: absolute;
-    right: 20px;
-    bottom: 24px;
-    width: 24px;
-    height: 17px;
-    object-fit: contain;
+    color: #161616;
+    text-align: center;
+    font-family: "Inter";
+    font-size: 11.541px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 140%; /* 16.158px */
+    letter-spacing: 0.34px;
+    text-transform: uppercase;
+    color: black;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .v-image {
+      flex: 0 0 14px;
+      width: 14px;
+      height: 10px;
+      object-fit: contain;
+      margin-left: 4px;
+    }
   }
 
   .getlink-buttons {
diff --git a/src/assets/icons/ic_share.svg b/src/assets/icons/ic_share.svg
index f0e38d5..1ef4e66 100644
--- a/src/assets/icons/ic_share.svg
+++ b/src/assets/icons/ic_share.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="17" viewBox="0 0 24 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16.2477 0.000670823C16.1384 0.00531075 16.0311 0.0307591 15.9314 0.0754688C15.7815 0.142957 15.6546 0.25192 15.5656 0.389005C15.4766 0.526231 15.4291 0.685951 15.4291 0.849038V3.32107C14.7529 3.28142 14.0829 3.28494 13.4234 3.33598C6.62122 3.86253 0.885374 9.07191 0.00664931 16.0431H0.00679109C-0.0251098 16.2933 0.0564145 16.5444 0.229528 16.7288C0.402641 16.9133 0.649181 17.0122 0.902999 16.9988C1.15679 16.9853 1.39143 16.8609 1.54355 16.6591C4.61977 12.5918 9.44481 10.1994 14.572 10.1994H15.4292V12.7494C15.4295 12.9682 15.5147 13.1784 15.6674 13.3364C15.8199 13.4945 16.0281 13.5881 16.2484 13.5978C16.4687 13.6075 16.6845 13.5326 16.8505 13.3886L23.7079 7.43851C23.8935 7.2771 24 7.04413 24 6.79934C24 6.55455 23.8935 6.3216 23.7079 6.16016L16.8505 0.210072C16.6844 0.0659577 16.4685 -0.00898088 16.2478 0.000859754L16.2477 0.000670823Z" fill="#074EE8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.2477 0.000670823C16.1384 0.00531075 16.0311 0.0307591 15.9314 0.0754688C15.7815 0.142957 15.6546 0.25192 15.5656 0.389005C15.4766 0.526231 15.4291 0.685951 15.4291 0.849038V3.32107C14.7529 3.28142 14.0829 3.28494 13.4234 3.33598C6.62122 3.86253 0.885374 9.07191 0.00664931 16.0431H0.00679109C-0.0251098 16.2933 0.0564145 16.5444 0.229528 16.7288C0.402641 16.9133 0.649181 17.0122 0.902999 16.9988C1.15679 16.9853 1.39143 16.8609 1.54355 16.6591C4.61977 12.5918 9.44481 10.1994 14.572 10.1994H15.4292V12.7494C15.4295 12.9682 15.5147 13.1784 15.6674 13.3364C15.8199 13.4945 16.0281 13.5881 16.2484 13.5978C16.4687 13.6075 16.6845 13.5326 16.8505 13.3886L23.7079 7.43851C23.8935 7.2771 24 7.04413 24 6.79934C24 6.55455 23.8935 6.3216 23.7079 6.16016L16.8505 0.210072C16.6844 0.0659577 16.4685 -0.00898088 16.2478 0.000859754L16.2477 0.000670823Z" fill="currentColor"/>
 </svg>
diff --git a/src/assets/translations/en.json b/src/assets/translations/en.json
index a6ceb20..84f9216 100644
--- a/src/assets/translations/en.json
+++ b/src/assets/translations/en.json
@@ -197,6 +197,7 @@
     "scan_title": "Scan this code to start a direct chat",
     "continue": "Continue",
     "different_link": "Get a different link",
+    "share_qr": "Share QR",
     "qr_image_copied": "Image copied to clipboard"
   },
   "profile": {
diff --git a/src/components/CopyLink.vue b/src/components/CopyLink.vue
index 8cd7f34..8da2871 100644
--- a/src/components/CopyLink.vue
+++ b/src/components/CopyLink.vue
@@ -17,6 +17,7 @@
               class="qr"
               id="room-qr"
             ></canvas>
+            <slot name="share"></slot>
           </v-col>
           <v-col align-self="center" class="public-link">
             <div class="link">{{ locationLink }}</div>
@@ -72,7 +73,7 @@ export default {
   computed: {
     popupTitle() {
       return this.$t(this.i18nQrPopupTitleKey);
-    }
+    },
   },
   methods: {
     copyRoomLink() {
diff --git a/src/components/GetLink.vue b/src/components/GetLink.vue
index aebf792..cb08762 100644
--- a/src/components/GetLink.vue
+++ b/src/components/GetLink.vue
@@ -30,8 +30,12 @@
       <div class="getlink-subtitle">{{ $t("getlink.ready_to_share") }}</div>
       <copy-link ref="qr" :locationLink="directMessageLink" i18nQrPopupTitleKey="getlink.scan_title"
         v-on:long-tap="copyQRImage">
-        <v-img v-if="shareSupported" class="clickable getlink-share" src="@/assets/icons/ic_share.svg"
-          @click="shareLink" />
+          <template v-slot:share>
+            <div v-if="shareSupported" class="clickable getlink-share" @click="shareLink">
+              <div>{{ $t("getlink.share_qr") }}</div>
+              <v-img src="@/assets/icons/ic_share.svg" />
+            </div>
+          </template>
       </copy-link>
       <div class="getlink-buttons">
         <v-btn color="black" depressed @click.stop="goHome" class="outlined-button">{{ $t("getlink.continue") }}</v-btn>