From 6806df9669074046380a78f26b005e945b000a03 Mon Sep 17 00:00:00 2001
From: Tessa <qanderson@all-inbox.com>
Date: Sun, 7 Jan 2024 21:43:09 -0600
Subject: [PATCH 01/15] initial setup for the modal share page component

---
 frontend/components/modal/ModalSharePage.vue | 53 ++++++++++++++++++++
 frontend/package.json                        |  1 +
 frontend/pages/events/[id]/about.vue         | 13 ++++-
 frontend/yarn.lock                           |  6 +++
 4 files changed, 72 insertions(+), 1 deletion(-)
 create mode 100644 frontend/components/modal/ModalSharePage.vue

diff --git a/frontend/components/modal/ModalSharePage.vue b/frontend/components/modal/ModalSharePage.vue
new file mode 100644
index 000000000..c4807225b
--- /dev/null
+++ b/frontend/components/modal/ModalSharePage.vue
@@ -0,0 +1,53 @@
+<template>
+    <ModalBase>
+        <template #modalDisplay>
+            <DialogTitle class="font-display flex justify-between">
+                <p class="text-3xl md:responsive-h2 font-bold">
+                    {{ $t("Share this page") }}
+                </p>
+            </DialogTitle>
+            <div
+                class="flex flex-col items-center md:grid md:grid-cols-2 md:grid-rows-1 pb-6 space-y-6 lg:grid-cols-3 lg:grid-rows-1 lg:pb-0 lg:space-y-0 lg:space-x-6 lg:mr-14 lg:pr-8">
+                <div class="items-center space-y-4 text-left col-span-2 pt-2 font-medium">
+                    <s-telegram
+                        @popup-close="onClose"
+                        @popup-open="onOpen"
+                        @popup-block="onBlock"
+                        @popup-focus="onFocus"
+                        :window-features="windowFeatures"
+                        :share-options="shareOptions"
+                        :use-native-behavior="useNativeBehavior"
+                        :native-behavior-options="nativeBehaviorOptions"
+                    >
+                        <!-- icon component -->
+                    </s-telegram>
+                </div>
+            </div>
+        </template>
+    </ModalBase>
+</template>
+
+<script setup lang="ts">
+import { STelegram } from 'vue-socials';
+const windowFeatures = {};
+const shareOptions = {
+    url: 'https://github.com/',
+    text: 'Text',
+};
+
+const useNativeBehavior = false;
+
+const nativeBehaviorOptions = {
+     onClose: () => {},
+      onOpen: () => {},
+      onBlock: () => {},
+      onFocus: () => {},
+    };
+</script>
+
+<script>
+export default {
+  name: 'STelegramSharing',
+  components: { STelegram },
+}
+</script>
\ No newline at end of file
diff --git a/frontend/package.json b/frontend/package.json
index 177476cb0..e01c7e7c1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -52,6 +52,7 @@
     "tailwindcss": "^3.3.2",
     "uuid": "^9.0.1",
     "v-calendar": "^3.1.1",
+    "vue-socials": "^2.0.4",
     "zxcvbn": "^4.4.2"
   }
 }
diff --git a/frontend/pages/events/[id]/about.vue b/frontend/pages/events/[id]/about.vue
index 9bea02a7e..4d0cba562 100644
--- a/frontend/pages/events/[id]/about.vue
+++ b/frontend/pages/events/[id]/about.vue
@@ -39,9 +39,9 @@
           ariaLabel="components.btn-labeled.support-event-aria-label"
         />
         <BtnLabeled
+          @click="openShareModal"
           class="hidden md:block w-max"
           :cta="true"
-          linkTo="/"
           label="components.btn-labeled.share-event"
           fontSize="sm"
           leftIcon="bi:box-arrow-up"
@@ -105,4 +105,15 @@ const event: Event = {
   imageURL: "/images/tech-from-below.svg",
   socialLinks: ["climate_org@mastodon", "climate_org@email.com"],
 };
+
 </script>
+
+<!-- <script> -->
+//  export default {
+  //  methods: {
+    //  openShareModal() {
+      //  alert('Share Modal should open');
+    //  },
+  //  },
+//  };
+<!-- </script> -->
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 9792baf19..cf2b48e29 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -8681,6 +8681,11 @@ vue-screen-utils@^1.0.0-beta.13:
   resolved "https://registry.yarnpkg.com/vue-screen-utils/-/vue-screen-utils-1.0.0-beta.13.tgz#0c739e19f6ffbffab63184aba7b6d710b6a63681"
   integrity sha512-EJ/8TANKhFj+LefDuOvZykwMr3rrLFPLNb++lNBqPOpVigT2ActRg6icH9RFQVm4nHwlHIHSGm5OY/Clar9yIg==
 
+vue-socials@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/vue-socials/-/vue-socials-2.0.4.tgz#fc1e2c0cb0e9cd483b3afc59459de5ef87fa7719"
+  integrity sha512-jmMRklJexBwFOiaoXV30n3FF3HnRgO95ucBKwVUdop6Ux0JT1LYGqOH1sq6WOut6za+o8NfBS+z5yiah6GFFcg==
+
 vue-template-compiler@^2.7.14:
   version "2.7.16"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz#c81b2d47753264c77ac03b9966a46637482bb03b"
@@ -8771,6 +8776,7 @@ wide-align@^1.1.2:
     string-width "^1.0.2 || 2 || 3 || 4"
 
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+  name wrap-ansi-cjs
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==

From dea41d815e3b11bc530d229c2fd886c589bd23d2 Mon Sep 17 00:00:00 2001
From: Tessa <qanderson@all-inbox.com>
Date: Sat, 13 Jan 2024 19:27:41 -0600
Subject: [PATCH 02/15] feat: add support for share options and icons for
 social media platforms

---
 frontend/components/modal/ModalSharePage.vue | 120 +++++++++++++++----
 1 file changed, 94 insertions(+), 26 deletions(-)

diff --git a/frontend/components/modal/ModalSharePage.vue b/frontend/components/modal/ModalSharePage.vue
index cfc873e6f..78360bf55 100644
--- a/frontend/components/modal/ModalSharePage.vue
+++ b/frontend/components/modal/ModalSharePage.vue
@@ -1,14 +1,9 @@
+<!-- Brief note to self: Refactor code to minimize duplication/redundancy. Add CSS styling to align with Figma design. Add support for the export default names and components. Confirm verbiage we'd like to use in the various share options i.e body of messages i.e email, sms, etc-->
 <template>
     <ModalBase>
         <template #normalDisplay>
-            <BtnAction 
-                @click="openShareModal" 
-                class="hidden md:block w-max" 
-                :cta="true"
-                label="components.btn-action.share-event" 
-                fontSize="sm" 
-                leftIcon="bi:box-arrow-up" 
-                iconSize="1.25em"
+            <BtnAction @click="openShareModal" class="hidden md:block w-max" :cta="true"
+                label="components.btn-action.share-event" fontSize="sm" leftIcon="bi:box-arrow-up" iconSize="1.25em"
                 ariaLabel="components.btn-action.share-event-aria-label" />
         </template>
         <template #modalDisplay>
@@ -20,11 +15,66 @@
             <div
                 class="flex flex-col items-center md:grid md:grid-cols-2 md:grid-rows-1 pb-6 space-y-6 lg:grid-cols-3 lg:grid-rows-1 lg:pb-0 lg:space-y-0 lg:space-x-6 lg:mr-14 lg:pr-8">
                 <div class="items-center space-y-4 text-left col-span-2 pt-2 font-medium">
-                    <s-telegram @popup-close="onClose" @popup-open="onOpen" @popup-block="onBlock" @popup-focus="onFocus"
-                        :window-features="windowFeatures" :share-options="shareOptions"
-                        :use-native-behavior="useNativeBehavior" :native-behavior-options="nativeBehaviorOptions">
-                        <!-- icon component -->
-                    </s-telegram>
+                    <div class="flex space-x-2 lg:space-x-3">
+                        <s-telegram @popup-close="onClose" @popup-open="onOpen" @popup-block="onBlock"
+                            @popup-focus="onFocus" :window-features="windowFeatures" :share-options="shareOptions"
+                            :use-native-behavior="useNativeBehavior" :native-behavior-options="nativeBehaviorOptions">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+                                <path fill="currentColor"
+                                    d="M16 .5C7.437.5.5 7.438.5 16S7.438 31.5 16 31.5c8.563 0 15.5-6.938 15.5-15.5S24.562.5 16 .5m7.613 10.619l-2.544 11.988c-.188.85-.694 1.056-1.4.656l-3.875-2.856l-1.869 1.8c-.206.206-.381.381-.781.381l.275-3.944l7.181-6.488c.313-.275-.069-.431-.482-.156l-8.875 5.587l-3.825-1.194c-.831-.262-.85-.831.175-1.231l14.944-5.763c.694-.25 1.3.169 1.075 1.219z" />
+                            </svg>
+                        </s-telegram>
+                        <s-twitter @popup-close="onClose" @popup-open="onOpen" @popup-block="onBlock" @popup-focus="onFocus"
+                            :window-features="windowFeatures" :share-options="shareOptions"
+                            :use-native-behavior="useNativeBehavior">
+                            <!-- your icon component -->
+                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+                                <path fill="currentColor"
+                                    d="M31.937 6.093a13.359 13.359 0 0 1-3.765 1.032a6.603 6.603 0 0 0 2.885-3.631a13.683 13.683 0 0 1-4.172 1.579a6.56 6.56 0 0 0-11.178 5.973c-5.453-.255-10.287-2.875-13.52-6.833a6.458 6.458 0 0 0-.891 3.303a6.555 6.555 0 0 0 2.916 5.457a6.518 6.518 0 0 1-2.968-.817v.079a6.567 6.567 0 0 0 5.26 6.437a6.758 6.758 0 0 1-1.724.229c-.421 0-.823-.041-1.224-.115a6.59 6.59 0 0 0 6.14 4.557a13.169 13.169 0 0 1-8.135 2.801a13.01 13.01 0 0 1-1.563-.088a18.656 18.656 0 0 0 10.079 2.948c12.067 0 18.661-9.995 18.661-18.651c0-.276 0-.557-.021-.839a13.132 13.132 0 0 0 3.281-3.396z" />
+                            </svg>
+                        </s-twitter>
+                        <s-email :share-options="shareOptions">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+                                <path fill="currentColor"
+                                    d="M32 6v20c0 1.135-.865 2-2 2h-2V9.849l-12 8.62l-12-8.62V28H2c-1.135 0-2-.865-2-2V6c0-.568.214-1.068.573-1.422A1.973 1.973 0 0 1 2 4h.667L16 13.667L29.333 4H30c.568 0 1.068.214 1.427.578c.359.354.573.854.573 1.422" />
+                            </svg>
+                        </s-email>
+                        <Icon name="bi:qr-code-scan" size="2em" :alt="$t('components.modal-qr-code.img-alt-text')" />
+                    </div>
+                    <div class="flex space-x-2 lg:space-x-3">
+                        <s-mastodon :window-features="windowFeatures" :share-options="shareOptions"
+                            :use-native-behavior="useNativeBehavior" @popup-close="onClose" @popup-open="onOpen"
+                            @popup-block="onBlock" @popup-focus="onFocus">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+                                <path fill="currentColor"
+                                    d="M30.921 10.505c0-6.943-4.547-8.975-4.547-8.975C24.082.473 20.145.03 16.051-.001h-.099C11.863.03 7.925.472 5.635 1.53c0 0-4.553 2.032-4.553 8.975c0 1.588-.031 3.489.021 5.505c.167 6.792 1.245 13.479 7.521 15.14c2.896.767 5.38.928 7.38.819c3.631-.204 5.667-1.297 5.667-1.297l-.12-2.636s-2.593.819-5.505.719c-2.885-.099-5.932-.307-6.396-3.853a7.018 7.018 0 0 1-.067-.995s2.832.692 6.427.859c2.192.099 4.249-.129 6.344-.38c4.005-.473 7.5-2.948 7.937-5.203c.687-3.552.629-8.677.629-8.677zm-5.364 8.948h-3.328v-8.161c0-1.719-.724-2.595-2.172-2.595c-1.599 0-2.401 1.037-2.401 3.084v4.469h-3.312v-4.469c0-2.047-.803-3.084-2.401-3.084c-1.448 0-2.172.876-2.172 2.595v8.156H6.443v-8.401c0-1.719.437-3.083 1.317-4.093c.907-1.011 2.089-1.532 3.563-1.532c1.704 0 2.995.657 3.849 1.969L16 8.782l.828-1.391c.855-1.312 2.145-1.969 3.849-1.969c1.473 0 2.661.521 3.568 1.532c.875 1.011 1.312 2.375 1.312 4.093z" />
+                            </svg>
+                        </s-mastodon>
+                        <s-facebook-messenger :window-features="windowFeatures" :share-options="shareOptions"
+                            :use-native-behavior="useNativeBehavior" @popup-close="onClose" @popup-open="onOpen"
+                            @popup-block="onBlock" @popup-focus="onFocus">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+                                <path fill="currentColor"
+                                    d="M0 15.521C0 6.599 6.984 0 16 0s16 6.599 16 15.521c0 8.917-6.984 15.521-16 15.521c-1.615 0-3.172-.214-4.625-.615a1.266 1.266 0 0 0-.854.068l-3.188 1.401a1.282 1.282 0 0 1-1.802-1.135l-.094-2.854a1.281 1.281 0 0 0-.422-.906A15.192 15.192 0 0 1-.001 15.522zm11.094-2.922l-4.693 7.469c-.469.703.427 1.521 1.094 1l5.052-3.828a.944.944 0 0 1 1.161 0l3.729 2.802a2.41 2.41 0 0 0 3.469-.641l4.693-7.469c.469-.703-.427-1.505-1.094-1l-5.052 3.828a.923.923 0 0 1-1.146 0l-3.734-2.802a2.398 2.398 0 0 0-3.479.641" />
+                            </svg>
+                        </s-facebook-messenger>
+                        <s-facebook-workplace :window-features="windowFeatures" :share-options="shareOptions"
+                            :use-native-behavior="useNativeBehavior" @popup-close="onClose" @popup-open="onOpen"
+                            @popup-block="onBlock" @popup-focus="onFocus">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+                                <path fill="currentColor"
+                                    d="M32 16c0-8.839-7.167-16-16-16C7.161 0 0 7.161 0 16c0 7.984 5.849 14.604 13.5 15.803V20.626H9.437v-4.625H13.5v-3.527c0-4.009 2.385-6.223 6.041-6.223c1.751 0 3.584.312 3.584.312V10.5h-2.021c-1.984 0-2.604 1.235-2.604 2.5v3h4.437l-.713 4.625H18.5v11.177C26.145 30.603 32 23.983 32 15.999z" />
+                            </svg>
+                        </s-facebook-workplace>
+                        <s-sms :window-features="windowFeatures" :share-options="shareOptions"
+                            :use-native-behavior="useNativeBehavior" @popup-close="onClose" @popup-open="onOpen"
+                            @popup-block="onBlock" @popup-focus="onFocus">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+                                <path fill="currentColor"
+                                    d="M16 27.885h12.698c.797 0 1.458-.448 1.458-1v-2.557c-.333.333-.859.542-1.458.542H3.307c-.594 0-1.125-.208-1.464-.542v2.557c0 .547.656 1 1.464 1zm0 1.938h13.922c1.146 0 2.078-.688 2.078-1.526c0-.068-.01-.135-.021-.198L29.838 5.417c-.068-.531-.474-.953-.927-1.125l1.62 19.203v3.391c0 .76-.818 1.38-1.839 1.38H3.307c-1.01 0-1.839-.625-1.839-1.38v-3.391l1.62-19.203c-.453.177-.859.599-.927 1.125L.02 28.089a.848.848 0 0 0-.021.203c0 .839.927 1.531 2.073 1.531zm12.51-25.87l-.036-.422c0-.026 0-.047-.005-.078l-.01-.094c-.083-.672-.635-1.188-1.443-1.188H4.98c-.802 0-1.354.51-1.438 1.182l-.005.099l-.005.078l-.042.422l-1.635 19.547c0 .547.651 1 1.453 1h25.396c.802 0 1.453-.453 1.458-1zm-7.583 12.406c-.354.932-1.167 1.599-2.057 2c-.969.448-2.047.62-3.109.635a13.708 13.708 0 0 1-3.354-.359c-.557-.125-1.13-.276-1.656-.505c-.474-.208-.859-.677-.849-1.208c.01-.536.396-.99.891-1.182c.516-.208 1.01-.12 1.516.057a9.57 9.57 0 0 0 3.495.51c.672-.021 1.849-.38 1.661-1.422c-.042-.234-.224-.557-.458-.776c-.188-.182-.573-.359-.823-.427c-.552-.151-1.12-.26-1.677-.385c-1.13-.245-1.729-.432-2.729-1.042c-.88-.521-1.073-.859-1.208-1.651c-.177-1.031.328-1.854 1.161-2.479c1.859-1.411 3.641-1.365 5.839-.964c.542.104 1.188.193 1.661.479c.464.281.729.849.526 1.38c-.188.5-.667.573-1.182.521c-.552-.063-.781-.208-1.302-.307c-1.099-.198-1.5-.365-2.557-.068c-.417.12-.984.521-.771 1.042c.177.438.839.578 1.234.682c1.083.292 1.932.625 3.01.943c1.01.292 1.776.854 2.406 1.745c.563.792.682 1.885.344 2.792z" />
+                            </svg>
+                        </s-sms>
+                    </div>
                 </div>
             </div>
         </template>
@@ -34,15 +84,9 @@
 <script setup lang="ts">
 import type { BtnAction } from "~/types/btn-props";
 import ModalBase from "~/components/modal/ModalBase.vue";
-import { STelegram } from 'vue-socials';
+import { STelegram, STwitter, SEmail, SMastodon, SFacebookMessenger, SFacebookWorkplace, SSms } from 'vue-socials';
 console.log("hello");
 
-// defineProps<{
-// cta: BtnAction["cta"];
-// label: BtnAction["label"];
-// ariaLabel: BtnAction["ariaLabel"];
-// }>();
-
 const isOpen = ref(false);
 
 const openShareModal = () => {
@@ -55,8 +99,20 @@ const closeShareModal = () => {
 
 const windowFeatures = {};
 const shareOptions = {
-    url: 'https://github.com/',
-    text: 'Text',
+    url: 'https://activist.org/',
+    text: '',
+    hashtags: ['activist', 'activism'],
+    via: 'twitterdev', // replace with Activist's twitter handle
+    mail: 'google@gmail.com',
+    cc: [''],
+    bcc: [''],
+    subject: 'Share this site!',
+    body: 'Check out this site! https://activist.org/',
+    domain: 'https://mas.to',
+    redirectUri: 'https://www.domain.com/',
+    appId: 123456789,
+    to: undefined,
+    number: '+1(999)999-99-99',
 };
 
 const useNativeBehavior = false;
@@ -70,8 +126,20 @@ const nativeBehaviorOptions = {
 </script>
 
 <!-- <script> -->
-export default {
-  name: 'STelegramSharing',
-  components: { STelegram },
-}
+<!-- export default { -->
+  <!-- name: 'STelegramSharing', -->
+  <!-- components: { STelegram }, -->
+  <!-- name: 'STwitterSharing', -->
+  <!-- components: { STwitter }, -->
+  <!-- name: 'SEmailSharing', -->
+  <!-- components: { SEmail }, -->
+  <!-- name: 'SMastodonSharing', -->
+  <!-- components: { SMastodon }, -->
+  <!-- name: 'SFacebookMessengerSharing', -->
+  <!-- components: { SFacebookMessenger }, -->
+  <!-- name: 'SFacebookWorkplaceSharing', -->
+  <!-- components: { SFacebookWorkplace }, -->
+  <!-- name: 'SSmsSharing', -->
+  <!-- components: { SSms }, -->
+<!-- } -->
 <!-- </script> -->
\ No newline at end of file

From 1e9bc5b49d74a5390098efbdf89ffabc0ec0e452 Mon Sep 17 00:00:00 2001
From: Tessa <qanderson@all-inbox.com>
Date: Mon, 15 Jan 2024 23:13:02 -0600
Subject: [PATCH 03/15] load button action props into modal share page
 component

---
 frontend/pages/events/[id]/about.vue | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/frontend/pages/events/[id]/about.vue b/frontend/pages/events/[id]/about.vue
index 7bb3b4cee..25636f30e 100644
--- a/frontend/pages/events/[id]/about.vue
+++ b/frontend/pages/events/[id]/about.vue
@@ -28,13 +28,9 @@
           ariaLabel="components.btn-action.support-event-aria-label"
         />
         <BtnAction
-          class="md:hidden w-fit"
           :cta="true"
-          fontSize="sm"
-          leftIcon="IconSupport"
-          iconSize="1.25em"
-          :counter="event.supporters"
-          ariaLabel="components.btn-action.support-event-aria-label"
+          ariaLabel="components.btn-action.share-event-aria-label"
+          label="components.btn-action.share-event"
         />
         <ModalSharePage/>
       </div>

From cecc73d9de0f98058e46647edc38ab07bbd81982 Mon Sep 17 00:00:00 2001
From: Tessa <anderson.quintessa@gmail.com>
Date: Mon, 22 Jan 2024 00:01:55 -0600
Subject: [PATCH 04/15] feat: switched to bootstrap icons (from core UI brands)

---
 frontend/components/modal/ModalSharePage.vue | 182 +++++++++++++++----
 frontend/pages/events/[id]/about.vue         |   5 +-
 2 files changed, 145 insertions(+), 42 deletions(-)

diff --git a/frontend/components/modal/ModalSharePage.vue b/frontend/components/modal/ModalSharePage.vue
index 78360bf55..d9237b048 100644
--- a/frontend/components/modal/ModalSharePage.vue
+++ b/frontend/components/modal/ModalSharePage.vue
@@ -2,9 +2,8 @@
 <template>
     <ModalBase>
         <template #normalDisplay>
-            <BtnAction @click="openShareModal" class="hidden md:block w-max" :cta="true"
-                label="components.btn-action.share-event" fontSize="sm" leftIcon="bi:box-arrow-up" iconSize="1.25em"
-                ariaLabel="components.btn-action.share-event-aria-label" />
+            <BtnAction @click="openShareModal" class="hidden md:block w-max" :cta=props.cta :label=props.label
+                :aria-label=props.ariaLabel fontSize="sm" leftIcon="bi:box-arrow-up" iconSize="1.25em" />
         </template>
         <template #modalDisplay>
             <DialogTitle class="font-display flex justify-between">
@@ -19,60 +18,143 @@
                         <s-telegram @popup-close="onClose" @popup-open="onOpen" @popup-block="onBlock"
                             @popup-focus="onFocus" :window-features="windowFeatures" :share-options="shareOptions"
                             :use-native-behavior="useNativeBehavior" :native-behavior-options="nativeBehaviorOptions">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-                                <path fill="currentColor"
-                                    d="M16 .5C7.437.5.5 7.438.5 16S7.438 31.5 16 31.5c8.563 0 15.5-6.938 15.5-15.5S24.562.5 16 .5m7.613 10.619l-2.544 11.988c-.188.85-.694 1.056-1.4.656l-3.875-2.856l-1.869 1.8c-.206.206-.381.381-.781.381l.275-3.944l7.181-6.488c.313-.275-.069-.431-.482-.156l-8.875 5.587l-3.825-1.194c-.831-.262-.85-.831.175-1.231l14.944-5.763c.694-.25 1.3.169 1.075 1.219z" />
-                            </svg>
+                            <div
+                                style="width: 100%; height: 100%; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex">
+                                <div style="width: 28px; height: 28px; position: relative">
+                                    <svg width="32" height="32" viewBox="0 0 16 16" fill="none"
+                                        xmlns="http://www.w3.org/2000/svg">
+                                        <path
+                                            d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8.28672 5.90599C7.50861 6.22963 5.95346 6.8995 3.6213 7.91558C3.2426 8.06618 3.04421 8.21351 3.02615 8.35757C2.99563 8.60103 3.30052 8.6969 3.71569 8.82745C3.77216 8.8452 3.83068 8.8636 3.89067 8.8831C4.29913 9.01588 4.84859 9.17121 5.13423 9.17738C5.39334 9.18298 5.68253 9.07616 6.0018 8.85692C8.18081 7.38603 9.30563 6.64258 9.37625 6.62655C9.42607 6.61524 9.49511 6.60102 9.54188 6.6426C9.58866 6.68418 9.58406 6.76291 9.57911 6.78404C9.5489 6.9128 8.35212 8.02543 7.73279 8.60121C7.53971 8.78071 7.40276 8.90804 7.37476 8.93712C7.31204 9.00226 7.24812 9.06388 7.18669 9.1231C6.80722 9.48891 6.52265 9.76324 7.20245 10.2112C7.52913 10.4265 7.79055 10.6045 8.05134 10.7821C8.33616 10.9761 8.62023 11.1695 8.98778 11.4105C9.08142 11.4718 9.17086 11.5356 9.25796 11.5977C9.58942 11.834 9.88721 12.0463 10.2551 12.0124C10.4689 11.9928 10.6897 11.7918 10.8018 11.1923C11.0668 9.77545 11.5878 6.70567 11.7082 5.44069C11.7187 5.32986 11.7055 5.18802 11.6948 5.12576C11.6842 5.06349 11.6619 4.97478 11.581 4.90911C11.4851 4.83133 11.3371 4.81493 11.2709 4.8161C10.9701 4.8214 10.5084 4.98192 8.28672 5.90599Z"
+                                            fill="black" />
+                                    </svg>
+                                </div>
+                                <div
+                                    style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word">
+                                    Telegram</div>
+                            </div>
                         </s-telegram>
                         <s-twitter @popup-close="onClose" @popup-open="onOpen" @popup-block="onBlock" @popup-focus="onFocus"
                             :window-features="windowFeatures" :share-options="shareOptions"
                             :use-native-behavior="useNativeBehavior">
-                            <!-- your icon component -->
-                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-                                <path fill="currentColor"
-                                    d="M31.937 6.093a13.359 13.359 0 0 1-3.765 1.032a6.603 6.603 0 0 0 2.885-3.631a13.683 13.683 0 0 1-4.172 1.579a6.56 6.56 0 0 0-11.178 5.973c-5.453-.255-10.287-2.875-13.52-6.833a6.458 6.458 0 0 0-.891 3.303a6.555 6.555 0 0 0 2.916 5.457a6.518 6.518 0 0 1-2.968-.817v.079a6.567 6.567 0 0 0 5.26 6.437a6.758 6.758 0 0 1-1.724.229c-.421 0-.823-.041-1.224-.115a6.59 6.59 0 0 0 6.14 4.557a13.169 13.169 0 0 1-8.135 2.801a13.01 13.01 0 0 1-1.563-.088a18.656 18.656 0 0 0 10.079 2.948c12.067 0 18.661-9.995 18.661-18.651c0-.276 0-.557-.021-.839a13.132 13.132 0 0 0 3.281-3.396z" />
-                            </svg>
+                            <div
+                                style="width: 100%; height: 100%; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex">
+                                <div style="width: 28px; height: 28px; position: relative">
+                                    <svg width="32" height="32" viewBox="0 0 16 16" fill="currentColor"
+                                        xmlns="http://www.w3.org/2000/svg">
+                                        <path
+                                            d="M5.02601 15C11.0636 15 14.3673 9.99705 14.3673 5.66585C14.3673 5.5251 14.3673 5.38435 14.3609 5.2436C15.0012 4.78297 15.5582 4.20079 16 3.54183C15.411 3.80413 14.7771 3.97687 14.1112 4.06004C14.7899 3.65699 15.3085 3.01083 15.5582 2.24311C14.9244 2.62057 14.2201 2.88927 13.471 3.03642C12.8691 2.39665 12.0176 2 11.0764 2C9.26451 2 7.79192 3.47146 7.79192 5.28199C7.79192 5.53789 7.82393 5.7874 7.87515 6.03051C5.14766 5.89616 2.72749 4.58465 1.10764 2.60138C0.825931 3.0876 0.665866 3.65059 0.665866 4.25197C0.665866 5.39075 1.2485 6.39518 2.12565 6.98376C1.58784 6.96457 1.08203 6.81742 0.640256 6.57431C0.640256 6.58711 0.640256 6.5999 0.640256 6.61909C0.640256 8.20571 1.77351 9.53642 3.27171 9.83711C2.9964 9.91388 2.70828 9.95226 2.40736 9.95226C2.19608 9.95226 1.9912 9.93307 1.79272 9.89469C2.20888 11.1998 3.42537 12.1467 4.85954 12.1722C3.73269 13.0551 2.31773 13.5797 0.781113 13.5797C0.518608 13.5797 0.256102 13.5669 0 13.5349C1.44698 14.4562 3.17567 15 5.02601 15Z"
+                                            fill="black" />
+                                    </svg>
+                                </div>
+                                <div
+                                    style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word">
+                                    @activist_org
+                                </div>
+                            </div>
                         </s-twitter>
                         <s-email :share-options="shareOptions">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-                                <path fill="currentColor"
-                                    d="M32 6v20c0 1.135-.865 2-2 2h-2V9.849l-12 8.62l-12-8.62V28H2c-1.135 0-2-.865-2-2V6c0-.568.214-1.068.573-1.422A1.973 1.973 0 0 1 2 4h.667L16 13.667L29.333 4H30c.568 0 1.068.214 1.427.578c.359.354.573.854.573 1.422" />
-                            </svg>
+                            <div
+                                style="width: 100%; height: 100%; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex">
+                                <div style="width: 28px; height: 28px; position: relative">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+                                        <path fill="black"
+                                            d="M32 6v20c0 1.135-.865 2-2 2h-2V9.849l-12 8.62l-12-8.62V28H2c-1.135 0-2-.865-2-2V6c0-.568.214-1.068.573-1.422A1.973 1.973 0 0 1 2 4h.667L16 13.667L29.333 4H30c.568 0 1.068.214 1.427.578c.359.354.573.854.573 1.422" />
+                                    </svg>
+                                </div>
+                                <div
+                                    style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word">
+                                    Email
+                                </div>
+                            </div>
                         </s-email>
-                        <Icon name="bi:qr-code-scan" size="2em" :alt="$t('components.modal-qr-code.img-alt-text')" />
+                        <div
+                            style="width: 100%; height: 100%; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex">
+                            <div style="width: 28px; height: 28px; position: relative">
+                                <Icon name="bi:qr-code-scan" size="2em"
+                                    :alt="$t('components.modal-qr-code.img-alt-text')" />
+                            </div>
+                            <div
+                                style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word">
+                                View QR code
+                            </div>
+                        </div>
                     </div>
                     <div class="flex space-x-2 lg:space-x-3">
                         <s-mastodon :window-features="windowFeatures" :share-options="shareOptions"
                             :use-native-behavior="useNativeBehavior" @popup-close="onClose" @popup-open="onOpen"
                             @popup-block="onBlock" @popup-focus="onFocus">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-                                <path fill="currentColor"
-                                    d="M30.921 10.505c0-6.943-4.547-8.975-4.547-8.975C24.082.473 20.145.03 16.051-.001h-.099C11.863.03 7.925.472 5.635 1.53c0 0-4.553 2.032-4.553 8.975c0 1.588-.031 3.489.021 5.505c.167 6.792 1.245 13.479 7.521 15.14c2.896.767 5.38.928 7.38.819c3.631-.204 5.667-1.297 5.667-1.297l-.12-2.636s-2.593.819-5.505.719c-2.885-.099-5.932-.307-6.396-3.853a7.018 7.018 0 0 1-.067-.995s2.832.692 6.427.859c2.192.099 4.249-.129 6.344-.38c4.005-.473 7.5-2.948 7.937-5.203c.687-3.552.629-8.677.629-8.677zm-5.364 8.948h-3.328v-8.161c0-1.719-.724-2.595-2.172-2.595c-1.599 0-2.401 1.037-2.401 3.084v4.469h-3.312v-4.469c0-2.047-.803-3.084-2.401-3.084c-1.448 0-2.172.876-2.172 2.595v8.156H6.443v-8.401c0-1.719.437-3.083 1.317-4.093c.907-1.011 2.089-1.532 3.563-1.532c1.704 0 2.995.657 3.849 1.969L16 8.782l.828-1.391c.855-1.312 2.145-1.969 3.849-1.969c1.473 0 2.661.521 3.568 1.532c.875 1.011 1.312 2.375 1.312 4.093z" />
-                            </svg>
+                            <div
+                                style="width: 100%; height: 100%; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex">
+                                <div style="width: 28px; height: 28px; position: relative">
+                                    <svg width="32" height="32" viewBox="0 0 16 16" fill="none"
+                                        xmlns="http://www.w3.org/2000/svg">
+                                        <path
+                                            d="M11.1909 12.1951C13.2058 11.9557 14.9602 10.7205 15.1807 9.59184C15.5281 7.81389 15.4994 5.25305 15.4994 5.25305C15.4994 1.78217 13.2139 0.764795 13.2139 0.764795C12.0615 0.23818 10.0826 0.0167234 8.02678 0H7.97627C5.92041 0.0167234 3.94286 0.23818 2.79039 0.764795C2.79039 0.764795 0.504754 1.78217 0.504754 5.25305C0.504754 5.46347 0.503661 5.68479 0.502523 5.91519C0.499363 6.55506 0.495857 7.26496 0.514458 8.00596C0.597458 11.4003 1.13991 14.7456 4.2941 15.5762C5.74843 15.9592 6.99707 16.0394 8.0027 15.9844C9.82637 15.8838 10.8501 15.3369 10.8501 15.3369L10.79 14.0204C10.79 14.0204 9.48674 14.4292 8.02314 14.3794C6.57306 14.3299 5.04223 14.2238 4.8077 12.4524C4.78604 12.2968 4.77521 12.1304 4.77521 11.9557C4.77521 11.9557 6.19869 12.3019 8.0027 12.3841C9.10579 12.4345 10.1403 12.3198 11.1909 12.1951ZM12.8034 9.72502H11.13V5.64588C11.13 4.786 10.7664 4.34955 10.039 4.34955C9.23486 4.34955 8.83182 4.86729 8.83182 5.89104V8.12379H7.16825V5.89104C7.16825 4.86729 6.76512 4.34955 5.96093 4.34955C5.2336 4.34955 4.86997 4.786 4.86997 5.64588V9.72502H3.19653V5.52235C3.19653 4.66342 3.41634 3.98086 3.85785 3.47588C4.31314 2.9709 4.90939 2.71204 5.64955 2.71204C6.5059 2.71204 7.15439 3.03952 7.58317 3.69458L7.99999 4.38981L8.4169 3.69458C8.84559 3.03952 9.49409 2.71204 10.3505 2.71204C11.0906 2.71204 11.6868 2.9709 12.1422 3.47588C12.5836 3.98086 12.8034 4.66342 12.8034 5.52235V9.72502Z"
+                                            fill="black" />
+                                    </svg>
+                                </div>
+                                <div
+                                    style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word">
+                                    Mastodon
+                                </div>
+                            </div>
                         </s-mastodon>
                         <s-facebook-messenger :window-features="windowFeatures" :share-options="shareOptions"
                             :use-native-behavior="useNativeBehavior" @popup-close="onClose" @popup-open="onOpen"
                             @popup-block="onBlock" @popup-focus="onFocus">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-                                <path fill="currentColor"
-                                    d="M0 15.521C0 6.599 6.984 0 16 0s16 6.599 16 15.521c0 8.917-6.984 15.521-16 15.521c-1.615 0-3.172-.214-4.625-.615a1.266 1.266 0 0 0-.854.068l-3.188 1.401a1.282 1.282 0 0 1-1.802-1.135l-.094-2.854a1.281 1.281 0 0 0-.422-.906A15.192 15.192 0 0 1-.001 15.522zm11.094-2.922l-4.693 7.469c-.469.703.427 1.521 1.094 1l5.052-3.828a.944.944 0 0 1 1.161 0l3.729 2.802a2.41 2.41 0 0 0 3.469-.641l4.693-7.469c.469-.703-.427-1.505-1.094-1l-5.052 3.828a.923.923 0 0 1-1.146 0l-3.734-2.802a2.398 2.398 0 0 0-3.479.641" />
-                            </svg>
+                            <div
+                                style="width: 100%; height: 100%; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex">
+                                <div style="width: 28px; height: 28px; position: relative">
+                                    <svg width="32" height="32" viewBox="0 0 16 16" fill="none"
+                                        xmlns="http://www.w3.org/2000/svg">
+                                        <path
+                                            d="M0 7.76C0 3.30112 3.49336 0 8 0C12.5066 0 16 3.30112 16 7.76C16 12.2189 12.5066 15.52 8 15.52C7.19053 15.52 6.41392 15.4131 5.68424 15.2125C5.5424 15.1734 5.39157 15.1845 5.25696 15.2438L3.66907 15.9448C3.25371 16.1282 2.78485 15.8328 2.77093 15.3789L2.72736 13.9558C2.722 13.7805 2.64312 13.6166 2.51245 13.4997C0.95584 12.1076 0 10.0923 0 7.76ZM5.54604 6.3011L3.19604 10.0294C2.97052 10.3872 3.41033 10.7904 3.74724 10.5348L6.27153 8.61899C6.44228 8.48939 6.67825 8.4887 6.84972 8.61731L8.71884 10.0192C9.27969 10.4398 10.0802 10.2921 10.454 9.69902L12.804 5.97067C13.0295 5.61286 12.5897 5.20966 12.2528 5.46534L9.72849 7.3811C9.55772 7.5107 9.32177 7.51139 9.15028 7.38275L7.28121 5.98094C6.72033 5.5603 5.91985 5.70798 5.54604 6.3011Z"
+                                            fill="black" />
+                                    </svg>
+                                </div>
+                                <div
+                                    style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word">
+                                    Messenger
+                                </div>
+                            </div>
                         </s-facebook-messenger>
                         <s-facebook-workplace :window-features="windowFeatures" :share-options="shareOptions"
                             :use-native-behavior="useNativeBehavior" @popup-close="onClose" @popup-open="onOpen"
                             @popup-block="onBlock" @popup-focus="onFocus">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-                                <path fill="currentColor"
-                                    d="M32 16c0-8.839-7.167-16-16-16C7.161 0 0 7.161 0 16c0 7.984 5.849 14.604 13.5 15.803V20.626H9.437v-4.625H13.5v-3.527c0-4.009 2.385-6.223 6.041-6.223c1.751 0 3.584.312 3.584.312V10.5h-2.021c-1.984 0-2.604 1.235-2.604 2.5v3h4.437l-.713 4.625H18.5v11.177C26.145 30.603 32 23.983 32 15.999z" />
-                            </svg>
+                            <div
+                                style="width: 100%; height: 100%; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex">
+                                <div style="width: 28px; height: 28px; position: relative">
+                                    <svg width="32" height="32" viewBox="0 0 16 16" fill="none"
+                                        xmlns="http://www.w3.org/2000/svg">
+                                        <path
+                                            d="M16 8.0486C16 3.60314 12.418 -0.000610352 7.99949 -0.000610352C3.58095 -0.000610352 -0.000976562 3.60314 -0.000976562 8.0486C-0.000976562 12.0662 2.92468 15.3962 6.74942 16V10.3753H4.71805V8.0486H6.74942V6.27526C6.74942 4.25792 7.94383 3.14361 9.77132 3.14361C10.6466 3.14361 11.5622 3.30082 11.5622 3.30082V5.28168H10.5534C9.55951 5.28168 9.24957 5.90215 9.24957 6.53869V8.0486H11.4684L11.1137 10.3753H9.24957V16C13.0743 15.3962 16 12.0662 16 8.0486Z"
+                                            fill="black" />
+                                    </svg>
+                                </div>
+                                <div
+                                    style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word">
+                                    Facebook
+                                </div>
+                            </div>
                         </s-facebook-workplace>
                         <s-sms :window-features="windowFeatures" :share-options="shareOptions"
                             :use-native-behavior="useNativeBehavior" @popup-close="onClose" @popup-open="onOpen"
                             @popup-block="onBlock" @popup-focus="onFocus">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-                                <path fill="currentColor"
-                                    d="M16 27.885h12.698c.797 0 1.458-.448 1.458-1v-2.557c-.333.333-.859.542-1.458.542H3.307c-.594 0-1.125-.208-1.464-.542v2.557c0 .547.656 1 1.464 1zm0 1.938h13.922c1.146 0 2.078-.688 2.078-1.526c0-.068-.01-.135-.021-.198L29.838 5.417c-.068-.531-.474-.953-.927-1.125l1.62 19.203v3.391c0 .76-.818 1.38-1.839 1.38H3.307c-1.01 0-1.839-.625-1.839-1.38v-3.391l1.62-19.203c-.453.177-.859.599-.927 1.125L.02 28.089a.848.848 0 0 0-.021.203c0 .839.927 1.531 2.073 1.531zm12.51-25.87l-.036-.422c0-.026 0-.047-.005-.078l-.01-.094c-.083-.672-.635-1.188-1.443-1.188H4.98c-.802 0-1.354.51-1.438 1.182l-.005.099l-.005.078l-.042.422l-1.635 19.547c0 .547.651 1 1.453 1h25.396c.802 0 1.453-.453 1.458-1zm-7.583 12.406c-.354.932-1.167 1.599-2.057 2c-.969.448-2.047.62-3.109.635a13.708 13.708 0 0 1-3.354-.359c-.557-.125-1.13-.276-1.656-.505c-.474-.208-.859-.677-.849-1.208c.01-.536.396-.99.891-1.182c.516-.208 1.01-.12 1.516.057a9.57 9.57 0 0 0 3.495.51c.672-.021 1.849-.38 1.661-1.422c-.042-.234-.224-.557-.458-.776c-.188-.182-.573-.359-.823-.427c-.552-.151-1.12-.26-1.677-.385c-1.13-.245-1.729-.432-2.729-1.042c-.88-.521-1.073-.859-1.208-1.651c-.177-1.031.328-1.854 1.161-2.479c1.859-1.411 3.641-1.365 5.839-.964c.542.104 1.188.193 1.661.479c.464.281.729.849.526 1.38c-.188.5-.667.573-1.182.521c-.552-.063-.781-.208-1.302-.307c-1.099-.198-1.5-.365-2.557-.068c-.417.12-.984.521-.771 1.042c.177.438.839.578 1.234.682c1.083.292 1.932.625 3.01.943c1.01.292 1.776.854 2.406 1.745c.563.792.682 1.885.344 2.792z" />
-                            </svg>
+                            <div
+                                style="width: 100%; height: 100%; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex">
+                                <div style="width: 28px; height: 28px; position: relative">
+                                    <svg width="32" height="32" viewBox="0 0 16 16" fill="none"
+                                        xmlns="http://www.w3.org/2000/svg">
+                                        <path
+                                            d="M13.6013 2.32644C12.1074 0.824899 10.1154 0 7.99428 0C3.62651 0 0.0684247 3.55809 0.0646233 7.92587C0.0646233 9.32478 0.429555 10.6857 1.1214 11.8907L0 16L4.20432 14.8976C5.36373 15.5286 6.6676 15.8632 7.99428 15.8632H7.99808C12.3659 15.8632 15.9239 12.3051 15.9277 7.93348C15.9239 5.81611 15.099 3.82419 13.6013 2.32644ZM7.99428 14.5213C6.80826 14.5213 5.64884 14.2019 4.63767 13.6013L4.39819 13.4569L1.90449 14.1107L2.56973 11.6778L2.41387 11.4269C1.75243 10.3778 1.40651 9.16512 1.40651 7.92207C1.40651 4.29556 4.36397 1.33809 7.99808 1.33809C9.75812 1.33809 11.4117 2.02613 12.6586 3.26919C13.9016 4.51604 14.5859 6.16964 14.5859 7.92968C14.5821 11.5676 11.6246 14.5213 7.99428 14.5213ZM11.6094 9.58708C11.4117 9.48824 10.4386 9.00927 10.2561 8.94084C10.0736 8.87622 9.94059 8.84201 9.81134 9.03968C9.67829 9.23735 9.29815 9.68591 9.18411 9.81516C9.07007 9.94821 8.95223 9.96341 8.75456 9.86458C8.55689 9.76574 7.91825 9.55667 7.16178 8.88002C6.57257 8.35543 6.17723 7.70539 6.05938 7.50772C5.94534 7.31005 6.04798 7.20361 6.14682 7.10478C6.23425 7.01734 6.34449 6.87289 6.44332 6.75885C6.54216 6.64481 6.57637 6.56118 6.64099 6.42813C6.70562 6.29508 6.67521 6.18104 6.62579 6.08221C6.57637 5.98337 6.18103 5.00642 6.01377 4.61107C5.85411 4.22333 5.69065 4.27655 5.56901 4.27275C5.45497 4.26515 5.32192 4.26515 5.18887 4.26515C5.05582 4.26515 4.84295 4.31456 4.66048 4.51224C4.47801 4.70991 3.96863 5.18888 3.96863 6.16584C3.96863 7.14279 4.67949 8.08173 4.77832 8.21478C4.87716 8.34783 6.17343 10.3474 8.16154 11.2065C8.63291 11.4117 9.00165 11.5334 9.29055 11.6246C9.76572 11.7767 10.1953 11.7539 10.5374 11.7044C10.9175 11.6474 11.7082 11.2255 11.8755 10.7617C12.0389 10.2979 12.0389 9.90259 11.9895 9.81896C11.9401 9.73533 11.8071 9.68591 11.6094 9.58708Z"
+                                            fill="black" />
+                                    </svg>
+                                </div>
+                                <div
+                                    style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word">
+                                    Text
+                                </div>
+                            </div>
                         </s-sms>
                     </div>
                 </div>
@@ -85,7 +167,12 @@
 import type { BtnAction } from "~/types/btn-props";
 import ModalBase from "~/components/modal/ModalBase.vue";
 import { STelegram, STwitter, SEmail, SMastodon, SFacebookMessenger, SFacebookWorkplace, SSms } from 'vue-socials';
-console.log("hello");
+
+const props = defineProps<{
+    cta: BtnAction["cta"];
+    label: BtnAction["label"];
+    ariaLabel: BtnAction["ariaLabel"];
+}>();
 
 const isOpen = ref(false);
 
@@ -101,13 +188,13 @@ const windowFeatures = {};
 const shareOptions = {
     url: 'https://activist.org/',
     text: '',
-    hashtags: ['activist', 'activism'],
-    via: 'twitterdev', // replace with Activist's twitter handle
+    hashtags: ['activism', 'organizing'],
+    via: '@activist_org', // replace with Activist's twitter handle
     mail: 'google@gmail.com',
     cc: [''],
     bcc: [''],
-    subject: 'Share this site!',
-    body: 'Check out this site! https://activist.org/',
+    subject: 'Share Brandenburg Gate Climate Demo!', // will need to update this to be dynamic to the event/organization/group name
+    body: 'Check out tBrandenburg Gate Climate Demo! https://activist.org/', // will need to update this to be dynamic to the event/organization/group name + link to event/organization/group page
     domain: 'https://mas.to',
     redirectUri: 'https://www.domain.com/',
     appId: 123456789,
@@ -123,8 +210,24 @@ const nativeBehaviorOptions = {
     onBlock: () => { },
     onFocus: () => { },
 };
+
 </script>
 
+<!-- <script> -->
+<!-- // import { defineComponent } from "vue"; -->
+<!-- //  -->
+<!-- // export default defineComponent({ -->
+    <!-- // components: { -->
+        <!-- //  STelegram,  -->
+    <!-- // }, -->
+    <!-- // setup() { -->
+        <!-- // return { -->
+            <!-- // ...data(), -->
+            <!-- // ...nativeBehaviorOptions, -->
+        <!-- // }; -->
+    <!-- // }, -->
+<!-- // }); -->
+<!-- </script> -->
 <!-- <script> -->
 <!-- export default { -->
   <!-- name: 'STelegramSharing', -->
@@ -142,4 +245,5 @@ const nativeBehaviorOptions = {
   <!-- name: 'SSmsSharing', -->
   <!-- components: { SSms }, -->
 <!-- } -->
-<!-- </script> -->
\ No newline at end of file
+<!-- </script> -->
+<!-- :cta=props.cta :label=props.label :aria-label=props.ariaLabel  -->
diff --git a/frontend/pages/events/[id]/about.vue b/frontend/pages/events/[id]/about.vue
index 25636f30e..7ab045d95 100644
--- a/frontend/pages/events/[id]/about.vue
+++ b/frontend/pages/events/[id]/about.vue
@@ -27,12 +27,11 @@
           :counter="event.supporters"
           ariaLabel="components.btn-action.support-event-aria-label"
         />
-        <BtnAction
+        <ModalSharePage
           :cta="true"
-          ariaLabel="components.btn-action.share-event-aria-label"
           label="components.btn-action.share-event"
+          ariaLabel="components.btn-action.share-event-aria-label"
         />
-        <ModalSharePage/>
       </div>
     </HeaderAppPage>
     <div class="pt-3 pb-6 space-y-6 lg:pt-4">

From 73630bd6458776bbf65bc83aa7e9745c54b88832 Mon Sep 17 00:00:00 2001
From: Tessa <anderson.quintessa@gmail.com>
Date: Tue, 23 Jan 2024 23:15:15 -0600
Subject: [PATCH 05/15] feat: add support for sharing an event/organization,
 add function to dynamically set share option props, adding in QR Modal

---
 frontend/components/modal/ModalSharePage.vue | 70 +++++++++++++-------
 frontend/pages/events/[id]/about.vue         |  1 +
 frontend/types/event.d.ts                    |  2 +-
 3 files changed, 47 insertions(+), 26 deletions(-)

diff --git a/frontend/components/modal/ModalSharePage.vue b/frontend/components/modal/ModalSharePage.vue
index d9237b048..cf0b03da5 100644
--- a/frontend/components/modal/ModalSharePage.vue
+++ b/frontend/components/modal/ModalSharePage.vue
@@ -2,8 +2,8 @@
 <template>
     <ModalBase>
         <template #normalDisplay>
-            <BtnAction @click="openShareModal" class="hidden md:block w-max" :cta=props.cta :label=props.label
-                :aria-label=props.ariaLabel fontSize="sm" leftIcon="bi:box-arrow-up" iconSize="1.25em" />
+            <BtnAction class="hidden md:block w-max" :cta=props.cta :label=props.label :aria-label=props.ariaLabel
+                fontSize="sm" leftIcon="bi:box-arrow-up" iconSize="1.25em" />
         </template>
         <template #modalDisplay>
             <DialogTitle class="font-display flex justify-between">
@@ -67,17 +67,25 @@
                                 </div>
                             </div>
                         </s-email>
-                        <div
-                            style="width: 100%; height: 100%; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex">
-                            <div style="width: 28px; height: 28px; position: relative">
-                                <Icon name="bi:qr-code-scan" size="2em"
-                                    :alt="$t('components.modal-qr-code.img-alt-text')" />
-                            </div>
-                            <div
-                                style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word">
-                                View QR code
-                            </div>
-                        </div>
+                        <ModalBase>
+                            <template #normalDisplay>
+                                <div
+                                    style="width: 100%; height: 100%; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex">
+                                    <div style="width: 28px; height: 28px; position: relative">
+                                        <Icon name="bi:qr-code-scan" size="2em"
+                                            :alt="$t('components.modal-qr-code.img-alt-text')" />
+                                    </div>
+                                    <span
+                                        style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word">
+                                        View QR code
+                                    </span>                                
+                                </div>
+                            </template>
+                            <template #modalDisplay>
+                                <ModalQRCode v-if=props.organization :entityName=props?.organization?.name />
+                                <ModalQRCode v-if=props.event :entityName=props?.event?.name />              
+                            </template>
+                        </ModalBase>
                     </div>
                     <div class="flex space-x-2 lg:space-x-3">
                         <s-mastodon :window-features="windowFeatures" :share-options="shareOptions"
@@ -167,38 +175,50 @@
 import type { BtnAction } from "~/types/btn-props";
 import ModalBase from "~/components/modal/ModalBase.vue";
 import { STelegram, STwitter, SEmail, SMastodon, SFacebookMessenger, SFacebookWorkplace, SSms } from 'vue-socials';
+import type { Event } from "~/types/event";
+import type { Organization } from "~/types/organization";
 
 const props = defineProps<{
     cta: BtnAction["cta"];
     label: BtnAction["label"];
     ariaLabel: BtnAction["ariaLabel"];
+    organization?: Organization;
+    event?: Event;
+    // group?: Group; // add group when we have it
 }>();
 
-const isOpen = ref(false);
-
-const openShareModal = () => {
-    isOpen.value = true;
+const checkEntityType = () => {
+    if (props.event) {
+        return setData(props.event);
+    } else if (props.organization) {
+        return setData(props.organization);
+    }
+    // add group when we have it
 };
 
-const closeShareModal = () => {
-    isOpen.value = false;
-}
+const setData = (data: Event | Organization) => {
+    return {
+        subject: `Share ${data.name}!`,
+        body: `Check out ${data.name}!`,
+        url: "onlineLocation" in data ? data?.onlineLocation : "",
+    };
+};
 
 const windowFeatures = {};
 const shareOptions = {
-    url: 'https://activist.org/',
+    url: checkEntityType()?.url || "https://activist.org/en",
     text: '',
     hashtags: ['activism', 'organizing'],
-    via: '@activist_org', // replace with Activist's twitter handle
+    via: '@activist_org', 
     mail: 'google@gmail.com',
     cc: [''],
     bcc: [''],
-    subject: 'Share Brandenburg Gate Climate Demo!', // will need to update this to be dynamic to the event/organization/group name
-    body: 'Check out tBrandenburg Gate Climate Demo! https://activist.org/', // will need to update this to be dynamic to the event/organization/group name + link to event/organization/group page
+    subject: checkEntityType()?.subject || "Share this!", 
+    body: checkEntityType()?.body || "Check this out!",
     domain: 'https://mas.to',
     redirectUri: 'https://www.domain.com/',
     appId: 123456789,
-    to: undefined,
+    to: undefined,    
     number: '+1(999)999-99-99',
 };
 
diff --git a/frontend/pages/events/[id]/about.vue b/frontend/pages/events/[id]/about.vue
index 7ab045d95..265611a91 100644
--- a/frontend/pages/events/[id]/about.vue
+++ b/frontend/pages/events/[id]/about.vue
@@ -31,6 +31,7 @@
           :cta="true"
           label="components.btn-action.share-event"
           ariaLabel="components.btn-action.share-event-aria-label"
+          :event="event"
         />
       </div>
     </HeaderAppPage>
diff --git a/frontend/types/event.d.ts b/frontend/types/event.d.ts
index 476f131e7..a31fced47 100644
--- a/frontend/types/event.d.ts
+++ b/frontend/types/event.d.ts
@@ -7,7 +7,7 @@ export interface Event {
   description: string;
   getInvolvedDescription: string;
   inPersonLocation?: string;
-  onlineLocation?: sting;
+  onlineLocation?: string;
   date: datetime;
   supporters: number;
   imageURL?: string;

From e2a739eff5e5dea01b7524890b10b0df75248ef8 Mon Sep 17 00:00:00 2001
From: Tessa <anderson.quintessa@gmail.com>
Date: Sat, 27 Jan 2024 16:56:12 -0600
Subject: [PATCH 06/15] add support to copy content + link, updatted icons,
 adding util file

---
 frontend/components/modal/ModalSharePage.vue | 152 ++++++++-----------
 frontend/pages/organizations/[id]/about.vue  |  68 ++-------
 frontend/utils/ModalSharePage.ts             | 127 ++++++++++++++++
 3 files changed, 205 insertions(+), 142 deletions(-)
 create mode 100644 frontend/utils/ModalSharePage.ts

diff --git a/frontend/components/modal/ModalSharePage.vue b/frontend/components/modal/ModalSharePage.vue
index cf0b03da5..2c9b0b251 100644
--- a/frontend/components/modal/ModalSharePage.vue
+++ b/frontend/components/modal/ModalSharePage.vue
@@ -56,9 +56,11 @@
                             <div
                                 style="width: 100%; height: 100%; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex">
                                 <div style="width: 28px; height: 28px; position: relative">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-                                        <path fill="black"
-                                            d="M32 6v20c0 1.135-.865 2-2 2h-2V9.849l-12 8.62l-12-8.62V28H2c-1.135 0-2-.865-2-2V6c0-.568.214-1.068.573-1.422A1.973 1.973 0 0 1 2 4h.667L16 13.667L29.333 4H30c.568 0 1.068.214 1.427.578c.359.354.573.854.573 1.422" />
+                                    <svg width="32" height="32" viewBox="0 0 16 16" fill="none"
+                                        xmlns="http://www.w3.org/2000/svg">
+                                        <path
+                                            d="M0 4C0 2.89543 0.895431 2 2 2H14C15.1046 2 16 2.89543 16 4V12C16 13.1046 15.1046 14 14 14H2C0.895431 14 0 13.1046 0 12V4ZM2 3C1.44772 3 1 3.44772 1 4V4.2169L8 8.4169L15 4.2169V4C15 3.44772 14.5523 3 14 3H2ZM15 5.3831L10.2919 8.20794L15 11.1052V5.3831ZM14.9662 12.2586L9.32583 8.7876L8 9.5831L6.67417 8.7876L1.03376 12.2586C1.14774 12.6855 1.53715 13 2 13H14C14.4628 13 14.8523 12.6855 14.9662 12.2586ZM1 11.1052L5.70808 8.20794L1 5.3831V11.1052Z"
+                                            fill="black" />
                                     </svg>
                                 </div>
                                 <div
@@ -78,12 +80,12 @@
                                     <span
                                         style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word">
                                         View QR code
-                                    </span>                                
+                                    </span>
                                 </div>
                             </template>
                             <template #modalDisplay>
                                 <ModalQRCode v-if=props.organization :entityName=props?.organization?.name />
-                                <ModalQRCode v-if=props.event :entityName=props?.event?.name />              
+                                <ModalQRCode v-if=props.event :entityName=props?.event?.name />
                             </template>
                         </ModalBase>
                     </div>
@@ -126,44 +128,35 @@
                                 </div>
                             </div>
                         </s-facebook-messenger>
-                        <s-facebook-workplace :window-features="windowFeatures" :share-options="shareOptions"
-                            :use-native-behavior="useNativeBehavior" @popup-close="onClose" @popup-open="onOpen"
-                            @popup-block="onBlock" @popup-focus="onFocus">
-                            <div
-                                style="width: 100%; height: 100%; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex">
-                                <div style="width: 28px; height: 28px; position: relative">
-                                    <svg width="32" height="32" viewBox="0 0 16 16" fill="none"
-                                        xmlns="http://www.w3.org/2000/svg">
-                                        <path
-                                            d="M16 8.0486C16 3.60314 12.418 -0.000610352 7.99949 -0.000610352C3.58095 -0.000610352 -0.000976562 3.60314 -0.000976562 8.0486C-0.000976562 12.0662 2.92468 15.3962 6.74942 16V10.3753H4.71805V8.0486H6.74942V6.27526C6.74942 4.25792 7.94383 3.14361 9.77132 3.14361C10.6466 3.14361 11.5622 3.30082 11.5622 3.30082V5.28168H10.5534C9.55951 5.28168 9.24957 5.90215 9.24957 6.53869V8.0486H11.4684L11.1137 10.3753H9.24957V16C13.0743 15.3962 16 12.0662 16 8.0486Z"
-                                            fill="black" />
-                                    </svg>
-                                </div>
-                                <div
-                                    style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word">
-                                    Facebook
-                                </div>
+                        <div @click="copyToClipboard('Share Brandenburg Gate Climate Demo!', 'http://localhost:3000/en/events/1')"
+                            class="cursor-pointer"
+                            style="width: 100%; height: 100%; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex">
+                            <div style="width: 28px; height: 28px; position: relative">
+                                <svg v-if="!contentCopied" width="32" height="32" viewBox="0 0 16 16" fill="none"
+                                    xmlns="http://www.w3.org/2000/svg">
+                                    <path
+                                        d="M4.71488 6.54244L3.34312 7.9142C2.17155 9.08577 2.17155 10.9853 3.34312 12.1568C4.51469 13.3284 6.41419 13.3284 7.58576 12.1568L9.41419 10.3284C10.5858 9.15684 10.5858 7.25735 9.41419 6.08577C9.16625 5.83784 8.88572 5.64237 8.58638 5.49938L7.99998 6.08578C7.939 6.14675 7.88754 6.21365 7.8456 6.28461C8.16104 6.37499 8.45862 6.54442 8.70708 6.79288C9.48813 7.57393 9.48813 8.84026 8.70708 9.62131L6.87866 11.4497C6.09761 12.2308 4.83128 12.2308 4.05023 11.4497C3.26918 10.6687 3.26918 9.40236 4.05023 8.62131L4.84283 7.8287C4.73064 7.40858 4.68799 6.97375 4.71488 6.54244Z"
+                                        fill="black" />
+                                    <path
+                                        d="M6.58576 4.67156C5.41419 5.84313 5.41419 7.74263 6.58576 8.9142C6.8337 9.16214 7.11424 9.3576 7.41358 9.5006L8.18917 8.72501C7.86083 8.63732 7.55046 8.46468 7.29287 8.2071C6.51182 7.42605 6.51182 6.15972 7.29287 5.37867L9.1213 3.55024C9.90235 2.76919 11.1687 2.76919 11.9497 3.55024C12.7308 4.33129 12.7308 5.59762 11.9497 6.37867L11.1571 7.17128C11.2693 7.5914 11.312 8.02623 11.2851 8.45754L12.6568 7.08577C13.8284 5.9142 13.8284 4.01471 12.6568 2.84313C11.4853 1.67156 9.58576 1.67156 8.41419 2.84313L6.58576 4.67156Z"
+                                        fill="black" />
+                                </svg>
+                                <svg v-if="contentCopied" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-copy-check"
+                                    width="32" height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#00b341"
+                                    fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                    <path
+                                        d="M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z" />
+                                    <path
+                                        d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" />
+                                    <path d="M11 14l2 2l4 -4" />
+                                </svg>
                             </div>
-                        </s-facebook-workplace>
-                        <s-sms :window-features="windowFeatures" :share-options="shareOptions"
-                            :use-native-behavior="useNativeBehavior" @popup-close="onClose" @popup-open="onOpen"
-                            @popup-block="onBlock" @popup-focus="onFocus">
                             <div
-                                style="width: 100%; height: 100%; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex">
-                                <div style="width: 28px; height: 28px; position: relative">
-                                    <svg width="32" height="32" viewBox="0 0 16 16" fill="none"
-                                        xmlns="http://www.w3.org/2000/svg">
-                                        <path
-                                            d="M13.6013 2.32644C12.1074 0.824899 10.1154 0 7.99428 0C3.62651 0 0.0684247 3.55809 0.0646233 7.92587C0.0646233 9.32478 0.429555 10.6857 1.1214 11.8907L0 16L4.20432 14.8976C5.36373 15.5286 6.6676 15.8632 7.99428 15.8632H7.99808C12.3659 15.8632 15.9239 12.3051 15.9277 7.93348C15.9239 5.81611 15.099 3.82419 13.6013 2.32644ZM7.99428 14.5213C6.80826 14.5213 5.64884 14.2019 4.63767 13.6013L4.39819 13.4569L1.90449 14.1107L2.56973 11.6778L2.41387 11.4269C1.75243 10.3778 1.40651 9.16512 1.40651 7.92207C1.40651 4.29556 4.36397 1.33809 7.99808 1.33809C9.75812 1.33809 11.4117 2.02613 12.6586 3.26919C13.9016 4.51604 14.5859 6.16964 14.5859 7.92968C14.5821 11.5676 11.6246 14.5213 7.99428 14.5213ZM11.6094 9.58708C11.4117 9.48824 10.4386 9.00927 10.2561 8.94084C10.0736 8.87622 9.94059 8.84201 9.81134 9.03968C9.67829 9.23735 9.29815 9.68591 9.18411 9.81516C9.07007 9.94821 8.95223 9.96341 8.75456 9.86458C8.55689 9.76574 7.91825 9.55667 7.16178 8.88002C6.57257 8.35543 6.17723 7.70539 6.05938 7.50772C5.94534 7.31005 6.04798 7.20361 6.14682 7.10478C6.23425 7.01734 6.34449 6.87289 6.44332 6.75885C6.54216 6.64481 6.57637 6.56118 6.64099 6.42813C6.70562 6.29508 6.67521 6.18104 6.62579 6.08221C6.57637 5.98337 6.18103 5.00642 6.01377 4.61107C5.85411 4.22333 5.69065 4.27655 5.56901 4.27275C5.45497 4.26515 5.32192 4.26515 5.18887 4.26515C5.05582 4.26515 4.84295 4.31456 4.66048 4.51224C4.47801 4.70991 3.96863 5.18888 3.96863 6.16584C3.96863 7.14279 4.67949 8.08173 4.77832 8.21478C4.87716 8.34783 6.17343 10.3474 8.16154 11.2065C8.63291 11.4117 9.00165 11.5334 9.29055 11.6246C9.76572 11.7767 10.1953 11.7539 10.5374 11.7044C10.9175 11.6474 11.7082 11.2255 11.8755 10.7617C12.0389 10.2979 12.0389 9.90259 11.9895 9.81896C11.9401 9.73533 11.8071 9.68591 11.6094 9.58708Z"
-                                            fill="black" />
-                                    </svg>
-                                </div>
-                                <div
-                                    style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word">
-                                    Text
-                                </div>
+                                style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word">
+                                Copy Link
                             </div>
-                        </s-sms>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -174,16 +167,17 @@
 <script setup lang="ts">
 import type { BtnAction } from "~/types/btn-props";
 import ModalBase from "~/components/modal/ModalBase.vue";
-import { STelegram, STwitter, SEmail, SMastodon, SFacebookMessenger, SFacebookWorkplace, SSms } from 'vue-socials';
+import { STelegram, STwitter, SEmail, SMastodon, SFacebookMessenger } from 'vue-socials';
 import type { Event } from "~/types/event";
 import type { Organization } from "~/types/organization";
+// import entityProps from "~/frontend/utils/ModalSharePage.vue";
 
 const props = defineProps<{
     cta: BtnAction["cta"];
     label: BtnAction["label"];
     ariaLabel: BtnAction["ariaLabel"];
-    organization?: Organization;
     event?: Event;
+    organization?: Organization;
     // group?: Group; // add group when we have it
 }>();
 
@@ -200,29 +194,37 @@ const setData = (data: Event | Organization) => {
     return {
         subject: `Share ${data.name}!`,
         body: `Check out ${data.name}!`,
-        url: "onlineLocation" in data ? data?.onlineLocation : "",
+        url: getCurrentUrl(),
+        text: `Check out ${data.name}!`,
     };
 };
 
+// function to grab the url to the base id of the event/org/group
+const getCurrentUrl = () => {
+    const url = window.location.href;
+    return url.substring(0, url.lastIndexOf("/"));
+};
+
 const windowFeatures = {};
+
 const shareOptions = {
     url: checkEntityType()?.url || "https://activist.org/en",
-    text: '',
+    text: checkEntityType()?.text || "Check this out!",
     hashtags: ['activism', 'organizing'],
-    via: '@activist_org', 
-    mail: 'google@gmail.com',
+    via: 'activist_org',
+    mail: '',
     cc: [''],
     bcc: [''],
-    subject: checkEntityType()?.subject || "Share this!", 
-    body: checkEntityType()?.body || "Check this out!",
-    domain: 'https://mas.to',
+    subject: checkEntityType()?.subject || "Share this!",
+    body: `${checkEntityType()?.body}   ${checkEntityType()?.url}` || "Check this out!",
     redirectUri: 'https://www.domain.com/',
     appId: 123456789,
-    to: undefined,    
-    number: '+1(999)999-99-99',
+    to: undefined,
+    number: '+1(312)758-7765',
 };
 
 const useNativeBehavior = false;
+const contentCopied = ref(false);
 
 const nativeBehaviorOptions = {
     onClose: () => { },
@@ -231,39 +233,17 @@ const nativeBehaviorOptions = {
     onFocus: () => { },
 };
 
-</script>
+const copyToClipboard = (name: string, url: string) => {
+    navigator.clipboard.writeText(`${name} ${url}`)
+        .then(() => {
+            console.log(`Copied text to clipboard: ${name} ${url}`);
+            contentCopied.value = true;
+            setTimeout(() => { contentCopied.value = true }, 100)
+        })
+        .catch((error) => {
+            console.error(`Could not copy text: ${error}`);
+            contentCopied.value = false;
+        });
+};
 
-<!-- <script> -->
-<!-- // import { defineComponent } from "vue"; -->
-<!-- //  -->
-<!-- // export default defineComponent({ -->
-    <!-- // components: { -->
-        <!-- //  STelegram,  -->
-    <!-- // }, -->
-    <!-- // setup() { -->
-        <!-- // return { -->
-            <!-- // ...data(), -->
-            <!-- // ...nativeBehaviorOptions, -->
-        <!-- // }; -->
-    <!-- // }, -->
-<!-- // }); -->
-<!-- </script> -->
-<!-- <script> -->
-<!-- export default { -->
-  <!-- name: 'STelegramSharing', -->
-  <!-- components: { STelegram }, -->
-  <!-- name: 'STwitterSharing', -->
-  <!-- components: { STwitter }, -->
-  <!-- name: 'SEmailSharing', -->
-  <!-- components: { SEmail }, -->
-  <!-- name: 'SMastodonSharing', -->
-  <!-- components: { SMastodon }, -->
-  <!-- name: 'SFacebookMessengerSharing', -->
-  <!-- components: { SFacebookMessenger }, -->
-  <!-- name: 'SFacebookWorkplaceSharing', -->
-  <!-- components: { SFacebookWorkplace }, -->
-  <!-- name: 'SSmsSharing', -->
-  <!-- components: { SSms }, -->
-<!-- } -->
-<!-- </script> -->
-<!-- :cta=props.cta :label=props.label :aria-label=props.ariaLabel  -->
+</script>
\ No newline at end of file
diff --git a/frontend/pages/organizations/[id]/about.vue b/frontend/pages/organizations/[id]/about.vue
index 59233f144..aebcf9f20 100644
--- a/frontend/pages/organizations/[id]/about.vue
+++ b/frontend/pages/organizations/[id]/about.vue
@@ -1,75 +1,31 @@
 <template>
-  <div
-    class="flex flex-col px-4 xl:px-8 text-light-text dark:text-dark-text bg-light-content dark:bg-dark-content"
-  >
+  <div class="flex flex-col px-4 xl:px-8 text-light-text dark:text-dark-text bg-light-content dark:bg-dark-content">
+
     <Head>
       <Title>{{ organization.name }}</Title>
     </Head>
     <HeaderAppPage :organization="organization">
       <div class="flex space-x-2 lg:space-x-3">
-        <BtnAction
-          class="w-max"
-          :cta="true"
-          label="components.btn-action.support"
-          fontSize="sm"
-          leftIcon="IconSupport"
-          iconSize="1.25em"
-          :counter="organization.supporters"
-          ariaLabel="
+        <BtnAction class="w-max" :cta="true" label="components.btn-action.support" fontSize="sm" leftIcon="IconSupport"
+          iconSize="1.25em" :counter="organization.supporters" ariaLabel="
             components.btn-action.support-organization-aria-label
-          "
-        />
-        <BtnAction
-          class="hidden md:block w-max"
-          :cta="true"
-          label="components.btn-action.share-organization"
-          fontSize="sm"
-          leftIcon="bi:box-arrow-up"
-          iconSize="1.25em"
-          ariaLabel="
-            components.btn-action.share-organization-aria-label
-          "
-        />
-        <BtnAction
-          class="md:hidden w-max"
-          :cta="true"
-          label="components.btn-action.share"
-          fontSize="sm"
-          leftIcon="bi:box-arrow-up"
-          iconSize="1.25em"
-          ariaLabel="
-            components.btn-action.share-organization-aria-label
-          "
-        />
+          " />
+        <ModalSharePage :cta="true" label="components.btn-action.share-organization"
+          ariaLabel="components.btn-action.share-organization-aria-label" :organization="organization" />
       </div>
     </HeaderAppPage>
     <div class="pt-3 pb-6 space-y-6 lg:pt-4">
       <div
-        class="pb-6 grid grid-cols-1 grid-rows-2 space-y-6 lg:grid-cols-3 lg:grid-rows-1 lg:pb-0 lg:space-y-0 lg:space-x-6 lg:mr-6"
-      >
-        <CardAbout
-          class="lg:col-span-2"
-          aboutType="organization"
-          :organization="organization"
-        />
+        class="pb-6 grid grid-cols-1 grid-rows-2 space-y-6 lg:grid-cols-3 lg:grid-rows-1 lg:pb-0 lg:space-y-0 lg:space-x-6 lg:mr-6">
+        <CardAbout class="lg:col-span-2" aboutType="organization" :organization="organization" />
         <div class="w-full h-full">
           <MediaImageCarousel />
         </div>
       </div>
-      <CardOrgApplicationVote
-        v-if="organization.status === 'pending'"
-        @up-vote="upVotes++"
-        @down-vote="downVotes++"
-        title="Votes in favor"
-        :organizations="organizationsInFavor"
-        :up-votes="upVotes"
-        :down-votes="downVotes"
-      />
+      <CardOrgApplicationVote v-if="organization.status === 'pending'" @up-vote="upVotes++" @down-vote="downVotes++"
+        title="Votes in favor" :organizations="organizationsInFavor" :up-votes="upVotes" :down-votes="downVotes" />
       <CardGetInvolved :organization="organization" />
-      <CardConnect
-        :social-links="organization.socialLinks"
-        :userIsAdmin="true"
-      />
+      <CardConnect :social-links="organization.socialLinks" :userIsAdmin="true" />
       <!-- <CardDonate
         :userIsAdmin="true"
         :donationPrompt="organization.donationPrompt"
diff --git a/frontend/utils/ModalSharePage.ts b/frontend/utils/ModalSharePage.ts
new file mode 100644
index 000000000..e9dee5656
--- /dev/null
+++ b/frontend/utils/ModalSharePage.ts
@@ -0,0 +1,127 @@
+import { STelegram } from 'vue-socials'
+
+import type { Event } from "~/types/event";
+import type { Organization } from "~/types/organization";
+
+export const entityProps = defineProps<{
+    organization?: Organization;
+    event?: Event;
+    // group?: Group; // add group when we have it
+}>();
+
+const contentCopied = ref(false);
+
+const checkEntityType = () => {
+    if (entityProps.event) {
+        return setData(entityProps.event);
+    } else if (entityProps.organization) {
+        return setData(entityProps.organization);
+    }
+    // add group when we have it
+};
+
+// function to grab the url to the base id of the event/org/group
+const getCurrentUrl = () => {
+    const url = window.location.href;
+    return url.substring(0, url.lastIndexOf("/"));
+};
+
+const setData = (data: Event | Organization) => {
+    return {
+        subject: `Share ${data.name}!`,
+        body: `Check out ${data.name}!`,
+        url: getCurrentUrl(),
+        text: `Check out ${data.name}!`,
+    };
+};
+
+export const copyToClipboard = (name: string, url: string) => {
+    navigator.clipboard.writeText(`${name} ${url}`)
+    .then(() => {
+        console.log(`Copied text to clipboard: ${name} ${url}`);
+        contentCopied.value = true;
+        setTimeout(() => { contentCopied.value = false }, 5000)
+    })
+    .catch((error) => {
+        console.error(`Could not copy text: ${error}`);
+        contentCopied.value = false;
+    });
+};
+
+export default {
+  name: 'STelegramSharing',
+  
+  components: { STelegram },
+  
+  data() {
+    return {
+        windowFeatures: {},
+        shareOptions: {
+        url: checkEntityType()?.url || "https://activist.org/en",
+        text: checkEntityType()?.text || "Check this out!",
+        hashtags: ['activism', 'organizing'],
+        via: 'activist_org',
+        mail: '',
+        cc: [''],
+        bcc: [''],
+        subject: checkEntityType()?.subject || "Share this!",
+        body: `${checkEntityType()?.body}   ${checkEntityType()?.url}` || "Check this out!",
+        redirectUri: 'https://www.domain.com/',
+        appId: 123456789,
+        to: undefined,
+        number: '+1(312)758-7765',
+    },  
+    useNativeBehavior: false
+    // {
+    //   windowFeatures: {},
+    //   shareOptions: {
+        // url: 'https://github.com/',
+        // text: 'Text',
+    //   },
+    //   useNativeBehavior: false,
+    // }
+  }
+},
+  
+  methods: {
+    onClose() {},
+    onOpen() {},
+    onBlock() {},
+    onFocus() {},
+  }
+};
+
+// <!-- <script> -->
+// <!-- // import { defineComponent } from "vue"; -->
+// <!-- //  -->
+// <!-- // export default defineComponent({ -->
+    // <!-- // components: { -->
+        // <!-- //  STelegram,  -->
+    // <!-- // }, -->
+    // <!-- // setup() { -->
+        // <!-- // return { -->
+            // <!-- // ...data(), -->
+            // <!-- // ...nativeBehaviorOptions, -->
+        // <!-- // }; -->
+    // <!-- // }, -->
+// <!-- // }); -->
+// <!-- </script> -->
+// <!-- <script> -->
+// <!-- export default { -->
+//   <!-- name: 'STelegramSharing', -->
+//   <!-- components: { STelegram }, -->
+//   <!-- name: 'STwitterSharing', -->
+//   <!-- components: { STwitter }, -->
+//   <!-- name: 'SEmailSharing', -->
+//   <!-- components: { SEmail }, -->
+//   <!-- name: 'SMastodonSharing', -->
+//   <!-- components: { SMastodon }, -->
+//   <!-- name: 'SFacebookMessengerSharing', -->
+//   <!-- components: { SFacebookMessenger }, -->
+//   <!-- name: 'SFacebookWorkplaceSharing', -->
+//   <!-- components: { SFacebookWorkplace }, -->
+//   <!-- name: 'SSmsSharing', -->
+//   <!-- components: { SSms }, -->
+// <!-- } -->
+// <!-- </script> -->
+// <!-- :cta=props.cta :label=props.label :aria-label=props.ariaLabel  -->

From 17e409e1bc2456b7b875974a9b7cd72b8ca61a55 Mon Sep 17 00:00:00 2001
From: Tessa <anderson.quintessa@gmail.com>
Date: Wed, 14 Feb 2024 18:48:06 -0600
Subject: [PATCH 07/15] feat: optimize promise handling, naming, and CSS

---
 frontend/components/card/CardAbout.vue       |   1 +
 frontend/components/modal/ModalSharePage.vue | 137 +++++++++----------
 frontend/utils/ModalSharePage.ts             |  27 ++--
 3 files changed, 80 insertions(+), 85 deletions(-)

diff --git a/frontend/components/card/CardAbout.vue b/frontend/components/card/CardAbout.vue
index e3efb8f41..0633b0b76 100644
--- a/frontend/components/card/CardAbout.vue
+++ b/frontend/components/card/CardAbout.vue
@@ -72,4 +72,5 @@ defineProps<{
   organization?: Organization;
   event?: Event;
 }>();
+
 </script>
diff --git a/frontend/components/modal/ModalSharePage.vue b/frontend/components/modal/ModalSharePage.vue
index 2c9b0b251..3c528fc93 100644
--- a/frontend/components/modal/ModalSharePage.vue
+++ b/frontend/components/modal/ModalSharePage.vue
@@ -1,4 +1,3 @@
-<!-- Brief note to self: Refactor code to minimize duplication/redundancy. Add CSS styling to align with Figma design. Add support for the export default names and components. Confirm verbiage we'd like to use in the various share options i.e body of messages i.e email, sms, etc-->
 <template>
     <ModalBase>
         <template #normalDisplay>
@@ -77,10 +76,9 @@
                                         <Icon name="bi:qr-code-scan" size="2em"
                                             :alt="$t('components.modal-qr-code.img-alt-text')" />
                                     </div>
-                                    <span
-                                        style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word">
+                                    <div class="flex space-x-2 lg:space-x-3">
                                         View QR code
-                                    </span>
+                                    </div>
                                 </div>
                             </template>
                             <template #modalDisplay>
@@ -89,46 +87,46 @@
                             </template>
                         </ModalBase>
                     </div>
-                    <div class="flex space-x-2 lg:space-x-3">
-                        <s-mastodon :window-features="windowFeatures" :share-options="shareOptions"
-                            :use-native-behavior="useNativeBehavior" @popup-close="onClose" @popup-open="onOpen"
-                            @popup-block="onBlock" @popup-focus="onFocus">
-                            <div
-                                style="width: 100%; height: 100%; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex">
-                                <div style="width: 28px; height: 28px; position: relative">
-                                    <svg width="32" height="32" viewBox="0 0 16 16" fill="none"
-                                        xmlns="http://www.w3.org/2000/svg">
-                                        <path
-                                            d="M11.1909 12.1951C13.2058 11.9557 14.9602 10.7205 15.1807 9.59184C15.5281 7.81389 15.4994 5.25305 15.4994 5.25305C15.4994 1.78217 13.2139 0.764795 13.2139 0.764795C12.0615 0.23818 10.0826 0.0167234 8.02678 0H7.97627C5.92041 0.0167234 3.94286 0.23818 2.79039 0.764795C2.79039 0.764795 0.504754 1.78217 0.504754 5.25305C0.504754 5.46347 0.503661 5.68479 0.502523 5.91519C0.499363 6.55506 0.495857 7.26496 0.514458 8.00596C0.597458 11.4003 1.13991 14.7456 4.2941 15.5762C5.74843 15.9592 6.99707 16.0394 8.0027 15.9844C9.82637 15.8838 10.8501 15.3369 10.8501 15.3369L10.79 14.0204C10.79 14.0204 9.48674 14.4292 8.02314 14.3794C6.57306 14.3299 5.04223 14.2238 4.8077 12.4524C4.78604 12.2968 4.77521 12.1304 4.77521 11.9557C4.77521 11.9557 6.19869 12.3019 8.0027 12.3841C9.10579 12.4345 10.1403 12.3198 11.1909 12.1951ZM12.8034 9.72502H11.13V5.64588C11.13 4.786 10.7664 4.34955 10.039 4.34955C9.23486 4.34955 8.83182 4.86729 8.83182 5.89104V8.12379H7.16825V5.89104C7.16825 4.86729 6.76512 4.34955 5.96093 4.34955C5.2336 4.34955 4.86997 4.786 4.86997 5.64588V9.72502H3.19653V5.52235C3.19653 4.66342 3.41634 3.98086 3.85785 3.47588C4.31314 2.9709 4.90939 2.71204 5.64955 2.71204C6.5059 2.71204 7.15439 3.03952 7.58317 3.69458L7.99999 4.38981L8.4169 3.69458C8.84559 3.03952 9.49409 2.71204 10.3505 2.71204C11.0906 2.71204 11.6868 2.9709 12.1422 3.47588C12.5836 3.98086 12.8034 4.66342 12.8034 5.52235V9.72502Z"
-                                            fill="black" />
-                                    </svg>
-                                </div>
-                                <div
-                                    style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word">
-                                    Mastodon
-                                </div>
-                            </div>
-                        </s-mastodon>
-                        <s-facebook-messenger :window-features="windowFeatures" :share-options="shareOptions"
-                            :use-native-behavior="useNativeBehavior" @popup-close="onClose" @popup-open="onOpen"
-                            @popup-block="onBlock" @popup-focus="onFocus">
-                            <div
-                                style="width: 100%; height: 100%; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex">
-                                <div style="width: 28px; height: 28px; position: relative">
-                                    <svg width="32" height="32" viewBox="0 0 16 16" fill="none"
-                                        xmlns="http://www.w3.org/2000/svg">
-                                        <path
-                                            d="M0 7.76C0 3.30112 3.49336 0 8 0C12.5066 0 16 3.30112 16 7.76C16 12.2189 12.5066 15.52 8 15.52C7.19053 15.52 6.41392 15.4131 5.68424 15.2125C5.5424 15.1734 5.39157 15.1845 5.25696 15.2438L3.66907 15.9448C3.25371 16.1282 2.78485 15.8328 2.77093 15.3789L2.72736 13.9558C2.722 13.7805 2.64312 13.6166 2.51245 13.4997C0.95584 12.1076 0 10.0923 0 7.76ZM5.54604 6.3011L3.19604 10.0294C2.97052 10.3872 3.41033 10.7904 3.74724 10.5348L6.27153 8.61899C6.44228 8.48939 6.67825 8.4887 6.84972 8.61731L8.71884 10.0192C9.27969 10.4398 10.0802 10.2921 10.454 9.69902L12.804 5.97067C13.0295 5.61286 12.5897 5.20966 12.2528 5.46534L9.72849 7.3811C9.55772 7.5107 9.32177 7.51139 9.15028 7.38275L7.28121 5.98094C6.72033 5.5603 5.91985 5.70798 5.54604 6.3011Z"
-                                            fill="black" />
-                                    </svg>
-                                </div>
-                                <div
-                                    style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word">
-                                    Messenger
-                                </div>
-                            </div>
-                        </s-facebook-messenger>
-                        <div @click="copyToClipboard('Share Brandenburg Gate Climate Demo!', 'http://localhost:3000/en/events/1')"
+                    <!-- <div class="flex space-x-2 lg:space-x-3"> -->
+                        <!-- <s-mastodon :window-features="windowFeatures" :share-options="shareOptions" -->
+                            <!-- :use-native-behavior="useNativeBehavior" @popup-close="onClose" @popup-open="onOpen" -->
+                            <!-- @popup-block="onBlock" @popup-focus="onFocus"> -->
+                            <!-- <div -->
+                                <!-- style="width: 100%; height: 100%; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex"> -->
+                                <!-- <div style="width: 28px; height: 28px; position: relative"> -->
+                                    <!-- <svg width="32" height="32" viewBox="0 0 16 16" fill="none" -->
+                                        <!-- xmlns="http://www.w3.org/2000/svg"> -->
+                                        <!-- <path -->
+                                            <!-- d="M11.1909 12.1951C13.2058 11.9557 14.9602 10.7205 15.1807 9.59184C15.5281 7.81389 15.4994 5.25305 15.4994 5.25305C15.4994 1.78217 13.2139 0.764795 13.2139 0.764795C12.0615 0.23818 10.0826 0.0167234 8.02678 0H7.97627C5.92041 0.0167234 3.94286 0.23818 2.79039 0.764795C2.79039 0.764795 0.504754 1.78217 0.504754 5.25305C0.504754 5.46347 0.503661 5.68479 0.502523 5.91519C0.499363 6.55506 0.495857 7.26496 0.514458 8.00596C0.597458 11.4003 1.13991 14.7456 4.2941 15.5762C5.74843 15.9592 6.99707 16.0394 8.0027 15.9844C9.82637 15.8838 10.8501 15.3369 10.8501 15.3369L10.79 14.0204C10.79 14.0204 9.48674 14.4292 8.02314 14.3794C6.57306 14.3299 5.04223 14.2238 4.8077 12.4524C4.78604 12.2968 4.77521 12.1304 4.77521 11.9557C4.77521 11.9557 6.19869 12.3019 8.0027 12.3841C9.10579 12.4345 10.1403 12.3198 11.1909 12.1951ZM12.8034 9.72502H11.13V5.64588C11.13 4.786 10.7664 4.34955 10.039 4.34955C9.23486 4.34955 8.83182 4.86729 8.83182 5.89104V8.12379H7.16825V5.89104C7.16825 4.86729 6.76512 4.34955 5.96093 4.34955C5.2336 4.34955 4.86997 4.786 4.86997 5.64588V9.72502H3.19653V5.52235C3.19653 4.66342 3.41634 3.98086 3.85785 3.47588C4.31314 2.9709 4.90939 2.71204 5.64955 2.71204C6.5059 2.71204 7.15439 3.03952 7.58317 3.69458L7.99999 4.38981L8.4169 3.69458C8.84559 3.03952 9.49409 2.71204 10.3505 2.71204C11.0906 2.71204 11.6868 2.9709 12.1422 3.47588C12.5836 3.98086 12.8034 4.66342 12.8034 5.52235V9.72502Z" -->
+                                            <!-- fill="black" /> -->
+                                    <!-- </svg> -->
+                                <!-- </div> -->
+                                <!-- <div -->
+                                    <!-- style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word"> -->
+                                    <!-- Mastodon -->
+                                <!-- </div> -->
+                            <!-- </div> -->
+                        <!-- </s-mastodon> -->
+                        <!-- <s-facebook-messenger :window-features="windowFeatures" :share-options="shareOptions" -->
+                            <!-- :use-native-behavior="useNativeBehavior" @popup-close="onClose" @popup-open="onOpen" -->
+                            <!-- @popup-block="onBlock" @popup-focus="onFocus"> -->
+                            <!-- <div -->
+                                <!-- style="width: 100%; height: 100%; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex"> -->
+                                <!-- <div style="width: 28px; height: 28px; position: relative"> -->
+                                    <!-- <svg width="32" height="32" viewBox="0 0 16 16" fill="none" -->
+                                        <!-- xmlns="http://www.w3.org/2000/svg"> -->
+                                        <!-- <path -->
+                                            <!-- d="M0 7.76C0 3.30112 3.49336 0 8 0C12.5066 0 16 3.30112 16 7.76C16 12.2189 12.5066 15.52 8 15.52C7.19053 15.52 6.41392 15.4131 5.68424 15.2125C5.5424 15.1734 5.39157 15.1845 5.25696 15.2438L3.66907 15.9448C3.25371 16.1282 2.78485 15.8328 2.77093 15.3789L2.72736 13.9558C2.722 13.7805 2.64312 13.6166 2.51245 13.4997C0.95584 12.1076 0 10.0923 0 7.76ZM5.54604 6.3011L3.19604 10.0294C2.97052 10.3872 3.41033 10.7904 3.74724 10.5348L6.27153 8.61899C6.44228 8.48939 6.67825 8.4887 6.84972 8.61731L8.71884 10.0192C9.27969 10.4398 10.0802 10.2921 10.454 9.69902L12.804 5.97067C13.0295 5.61286 12.5897 5.20966 12.2528 5.46534L9.72849 7.3811C9.55772 7.5107 9.32177 7.51139 9.15028 7.38275L7.28121 5.98094C6.72033 5.5603 5.91985 5.70798 5.54604 6.3011Z" -->
+                                            <!-- fill="black" /> -->
+                                    <!-- </svg> -->
+                                <!-- </div> -->
+                                <!-- <div -->
+                                    <!-- style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word"> -->
+                                    <!-- Messenger -->
+                                <!-- </div> -->
+                            <!-- </div> -->
+                        <!-- </s-facebook-messenger> -->
+                        <div @click="copyToClipboard(props?.event?.name ? props?.event?.name : props?.organization?.name ? props?.organization?.name : '', getCurrentUrl())"
                             class="cursor-pointer"
                             style="width: 100%; height: 100%; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex">
                             <div style="width: 28px; height: 28px; position: relative">
@@ -154,12 +152,12 @@
                             </div>
                             <div
                                 style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word">
-                                Copy Link
+                                Copy
                             </div>
                         </div>
                     </div>
                 </div>
-            </div>
+            <!-- </div> -->
         </template>
     </ModalBase>
 </template>
@@ -170,7 +168,7 @@ import ModalBase from "~/components/modal/ModalBase.vue";
 import { STelegram, STwitter, SEmail, SMastodon, SFacebookMessenger } from 'vue-socials';
 import type { Event } from "~/types/event";
 import type { Organization } from "~/types/organization";
-// import entityProps from "~/frontend/utils/ModalSharePage.vue";
+import { OrganizeImportsMode } from "typescript";
 
 const props = defineProps<{
     cta: BtnAction["cta"];
@@ -181,16 +179,16 @@ const props = defineProps<{
     // group?: Group; // add group when we have it
 }>();
 
-const checkEntityType = () => {
+const getEntityType = () => {
     if (props.event) {
-        return setData(props.event);
+        return setEntityInfo(props.event);
     } else if (props.organization) {
-        return setData(props.organization);
+        return setEntityInfo(props.organization);
     }
-    // add group when we have it
 };
 
-const setData = (data: Event | Organization) => {
+const setEntityInfo = (data: typeof props.event | typeof props.organization) => {
+    if(!data) return;
     return {
         subject: `Share ${data.name}!`,
         body: `Check out ${data.name}!`,
@@ -205,27 +203,24 @@ const getCurrentUrl = () => {
     return url.substring(0, url.lastIndexOf("/"));
 };
 
-const windowFeatures = {};
-
 const shareOptions = {
-    url: checkEntityType()?.url || "https://activist.org/en",
-    text: checkEntityType()?.text || "Check this out!",
+    url: getCurrentUrl() || "https://activist.org/en",
+    text: getEntityType()?.text || "Check this out!",
     hashtags: ['activism', 'organizing'],
     via: 'activist_org',
     mail: '',
     cc: [''],
     bcc: [''],
-    subject: checkEntityType()?.subject || "Share this!",
-    body: `${checkEntityType()?.body}   ${checkEntityType()?.url}` || "Check this out!",
+    subject: getEntityType()?.subject || "Share this!",
+    body: `${getEntityType()?.body}   ${getEntityType()?.url}` || "Check this out!",
     redirectUri: 'https://www.domain.com/',
-    appId: 123456789,
-    to: undefined,
-    number: '+1(312)758-7765',
+    // appId: 842766727626496, Facebook Messenger App ID
 };
 
 const useNativeBehavior = false;
 const contentCopied = ref(false);
 
+// No specific actions should be taken on these events, but we can customize the behavior if needed
 const nativeBehaviorOptions = {
     onClose: () => { },
     onOpen: () => { },
@@ -233,17 +228,15 @@ const nativeBehaviorOptions = {
     onFocus: () => { },
 };
 
-const copyToClipboard = (name: string, url: string) => {
-    navigator.clipboard.writeText(`${name} ${url}`)
-        .then(() => {
-            console.log(`Copied text to clipboard: ${name} ${url}`);
-            contentCopied.value = true;
-            setTimeout(() => { contentCopied.value = true }, 100)
-        })
-        .catch((error) => {
-            console.error(`Could not copy text: ${error}`);
-            contentCopied.value = false;
-        });
+const copyToClipboard = async (name: string, url: string) => {
+    try {
+        await navigator.clipboard.writeText(`${name} ${url}`);
+        contentCopied.value = true;
+        setTimeout(() => { contentCopied.value = false }, 3000)
+    } catch(error) {
+        console.error(`Could not copy text: ${error}`);
+        contentCopied.value = false;
+    };
 };
 
 </script>
\ No newline at end of file
diff --git a/frontend/utils/ModalSharePage.ts b/frontend/utils/ModalSharePage.ts
index e9dee5656..63e0bcaa3 100644
--- a/frontend/utils/ModalSharePage.ts
+++ b/frontend/utils/ModalSharePage.ts
@@ -1,4 +1,5 @@
-import { STelegram } from 'vue-socials'
+import { defineProps } from 'vue';
+import { STelegram, STwitter, SEmail, SMastodon, SFacebookMessenger } from 'vue-socials';
 
 import type { Event } from "~/types/event";
 import type { Organization } from "~/types/organization";
@@ -11,7 +12,7 @@ export const entityProps = defineProps<{
 
 const contentCopied = ref(false);
 
-const checkEntityType = () => {
+export const checkEntityType = () => {
     if (entityProps.event) {
         return setData(entityProps.event);
     } else if (entityProps.organization) {
@@ -48,10 +49,17 @@ export const copyToClipboard = (name: string, url: string) => {
     });
 };
 
-export default {
+const socialShareData =  {
   name: 'STelegramSharing',
-  
   components: { STelegram },
+//   <!-- name: 'STwitterSharing', -->
+//   <!-- components: { STwitter }, -->
+//   <!-- name: 'SEmailSharing', -->
+//   <!-- components: { SEmail }, -->
+//   <!-- name: 'SMastodonSharing', -->
+//   <!-- components: { SMastodon }, -->
+//   <!-- name: 'SFacebookMessengerSharing', -->
+//   <!-- components: { SFacebookMessenger }, -->
   
   data() {
     return {
@@ -71,15 +79,7 @@ export default {
         to: undefined,
         number: '+1(312)758-7765',
     },  
-    useNativeBehavior: false
-    // {
-    //   windowFeatures: {},
-    //   shareOptions: {
-        // url: 'https://github.com/',
-        // text: 'Text',
-    //   },
-    //   useNativeBehavior: false,
-    // }
+    useNativeBehavior: false,
   }
 },
   
@@ -91,6 +91,7 @@ export default {
   }
 };
 
+export default entityProps;
 // <!-- <script> -->
 // <!-- // import { defineComponent } from "vue"; -->
 // <!-- //  -->

From a9d61afa72f13a74d39a7336f31eab88ff3d120b Mon Sep 17 00:00:00 2001
From: Tessa <anderson.quintessa@gmail.com>
Date: Thu, 15 Feb 2024 23:36:42 -0600
Subject: [PATCH 08/15] abstracted share icon logic into a re-usable component

---
 frontend/components/SocialMediaShareIcon.vue |  29 +++++
 frontend/components/modal/ModalSharePage.vue | 112 +++++--------------
 2 files changed, 60 insertions(+), 81 deletions(-)
 create mode 100644 frontend/components/SocialMediaShareIcon.vue

diff --git a/frontend/components/SocialMediaShareIcon.vue b/frontend/components/SocialMediaShareIcon.vue
new file mode 100644
index 000000000..93a4f1dd0
--- /dev/null
+++ b/frontend/components/SocialMediaShareIcon.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="cursor-pointer"
+    style="width: 100%; height: 100%; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex">
+    <div style="iconStyle">
+      <svg width="32" height="32" viewBox="0 0 16 16" :fill="fillColor" xmlns="http://www.w3.org/2000/svg">
+        <path :d="iconPath" />
+      </svg>
+    </div>
+    <div>{{ text }}</div>
+  </div>
+</template>
+  
+<script>
+
+const iconStyle = {
+  width: '28px', height: '28px', position: 'relative'
+};
+
+export default {
+  props: {
+    iconPath: String,
+    fillColor: String,
+    text: String,
+    onClick: Function,
+    iconStyle: iconStyle,
+    textStyle: Object,
+  }
+};
+</script>
\ No newline at end of file
diff --git a/frontend/components/modal/ModalSharePage.vue b/frontend/components/modal/ModalSharePage.vue
index 3c528fc93..4c6406b66 100644
--- a/frontend/components/modal/ModalSharePage.vue
+++ b/frontend/components/modal/ModalSharePage.vue
@@ -17,56 +17,24 @@
                         <s-telegram @popup-close="onClose" @popup-open="onOpen" @popup-block="onBlock"
                             @popup-focus="onFocus" :window-features="windowFeatures" :share-options="shareOptions"
                             :use-native-behavior="useNativeBehavior" :native-behavior-options="nativeBehaviorOptions">
-                            <div
-                                style="width: 100%; height: 100%; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex">
-                                <div style="width: 28px; height: 28px; position: relative">
-                                    <svg width="32" height="32" viewBox="0 0 16 16" fill="none"
-                                        xmlns="http://www.w3.org/2000/svg">
-                                        <path
-                                            d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8.28672 5.90599C7.50861 6.22963 5.95346 6.8995 3.6213 7.91558C3.2426 8.06618 3.04421 8.21351 3.02615 8.35757C2.99563 8.60103 3.30052 8.6969 3.71569 8.82745C3.77216 8.8452 3.83068 8.8636 3.89067 8.8831C4.29913 9.01588 4.84859 9.17121 5.13423 9.17738C5.39334 9.18298 5.68253 9.07616 6.0018 8.85692C8.18081 7.38603 9.30563 6.64258 9.37625 6.62655C9.42607 6.61524 9.49511 6.60102 9.54188 6.6426C9.58866 6.68418 9.58406 6.76291 9.57911 6.78404C9.5489 6.9128 8.35212 8.02543 7.73279 8.60121C7.53971 8.78071 7.40276 8.90804 7.37476 8.93712C7.31204 9.00226 7.24812 9.06388 7.18669 9.1231C6.80722 9.48891 6.52265 9.76324 7.20245 10.2112C7.52913 10.4265 7.79055 10.6045 8.05134 10.7821C8.33616 10.9761 8.62023 11.1695 8.98778 11.4105C9.08142 11.4718 9.17086 11.5356 9.25796 11.5977C9.58942 11.834 9.88721 12.0463 10.2551 12.0124C10.4689 11.9928 10.6897 11.7918 10.8018 11.1923C11.0668 9.77545 11.5878 6.70567 11.7082 5.44069C11.7187 5.32986 11.7055 5.18802 11.6948 5.12576C11.6842 5.06349 11.6619 4.97478 11.581 4.90911C11.4851 4.83133 11.3371 4.81493 11.2709 4.8161C10.9701 4.8214 10.5084 4.98192 8.28672 5.90599Z"
-                                            fill="black" />
-                                    </svg>
-                                </div>
-                                <div
-                                    style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word">
-                                    Telegram</div>
-                            </div>
+                            <SocialMediaShareIcon
+                                icon-path="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8.28672 5.90599C7.50861 6.22963 5.95346 6.8995 3.6213 7.91558C3.2426 8.06618 3.04421 8.21351 3.02615 8.35757C2.99563 8.60103 3.30052 8.6969 3.71569 8.82745C3.77216 8.8452 3.83068 8.8636 3.89067 8.8831C4.29913 9.01588 4.84859 9.17121 5.13423 9.17738C5.39334 9.18298 5.68253 9.07616 6.0018 8.85692C8.18081 7.38603 9.30563 6.64258 9.37625 6.62655C9.42607 6.61524 9.49511 6.60102 9.54188 6.6426C9.58866 6.68418 9.58406 6.76291 9.57911 6.78404C9.5489 6.9128 8.35212 8.02543 7.73279 8.60121C7.53971 8.78071 7.40276 8.90804 7.37476 8.93712C7.31204 9.00226 7.24812 9.06388 7.18669 9.1231C6.80722 9.48891 6.52265 9.76324 7.20245 10.2112C7.52913 10.4265 7.79055 10.6045 8.05134 10.7821C8.33616 10.9761 8.62023 11.1695 8.98778 11.4105C9.08142 11.4718 9.17086 11.5356 9.25796 11.5977C9.58942 11.834 9.88721 12.0463 10.2551 12.0124C10.4689 11.9928 10.6897 11.7918 10.8018 11.1923C11.0668 9.77545 11.5878 6.70567 11.7082 5.44069C11.7187 5.32986 11.7055 5.18802 11.6948 5.12576C11.6842 5.06349 11.6619 4.97478 11.581 4.90911C11.4851 4.83133 11.3371 4.81493 11.2709 4.8161C10.9701 4.8214 10.5084 4.98192 8.28672 5.90599Z"
+                                fill-color="black" text="Telegram"
+                                style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word" />
                         </s-telegram>
                         <s-twitter @popup-close="onClose" @popup-open="onOpen" @popup-block="onBlock" @popup-focus="onFocus"
                             :window-features="windowFeatures" :share-options="shareOptions"
                             :use-native-behavior="useNativeBehavior">
-                            <div
-                                style="width: 100%; height: 100%; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex">
-                                <div style="width: 28px; height: 28px; position: relative">
-                                    <svg width="32" height="32" viewBox="0 0 16 16" fill="currentColor"
-                                        xmlns="http://www.w3.org/2000/svg">
-                                        <path
-                                            d="M5.02601 15C11.0636 15 14.3673 9.99705 14.3673 5.66585C14.3673 5.5251 14.3673 5.38435 14.3609 5.2436C15.0012 4.78297 15.5582 4.20079 16 3.54183C15.411 3.80413 14.7771 3.97687 14.1112 4.06004C14.7899 3.65699 15.3085 3.01083 15.5582 2.24311C14.9244 2.62057 14.2201 2.88927 13.471 3.03642C12.8691 2.39665 12.0176 2 11.0764 2C9.26451 2 7.79192 3.47146 7.79192 5.28199C7.79192 5.53789 7.82393 5.7874 7.87515 6.03051C5.14766 5.89616 2.72749 4.58465 1.10764 2.60138C0.825931 3.0876 0.665866 3.65059 0.665866 4.25197C0.665866 5.39075 1.2485 6.39518 2.12565 6.98376C1.58784 6.96457 1.08203 6.81742 0.640256 6.57431C0.640256 6.58711 0.640256 6.5999 0.640256 6.61909C0.640256 8.20571 1.77351 9.53642 3.27171 9.83711C2.9964 9.91388 2.70828 9.95226 2.40736 9.95226C2.19608 9.95226 1.9912 9.93307 1.79272 9.89469C2.20888 11.1998 3.42537 12.1467 4.85954 12.1722C3.73269 13.0551 2.31773 13.5797 0.781113 13.5797C0.518608 13.5797 0.256102 13.5669 0 13.5349C1.44698 14.4562 3.17567 15 5.02601 15Z"
-                                            fill="black" />
-                                    </svg>
-                                </div>
-                                <div
-                                    style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word">
-                                    @activist_org
-                                </div>
-                            </div>
+                            <SocialMediaShareIcon
+                                icon-path="M5.02601 15C11.0636 15 14.3673 9.99705 14.3673 5.66585C14.3673 5.5251 14.3673 5.38435 14.3609 5.2436C15.0012 4.78297 15.5582 4.20079 16 3.54183C15.411 3.80413 14.7771 3.97687 14.1112 4.06004C14.7899 3.65699 15.3085 3.01083 15.5582 2.24311C14.9244 2.62057 14.2201 2.88927 13.471 3.03642C12.8691 2.39665 12.0176 2 11.0764 2C9.26451 2 7.79192 3.47146 7.79192 5.28199C7.79192 5.53789 7.82393 5.7874 7.87515 6.03051C5.14766 5.89616 2.72749 4.58465 1.10764 2.60138C0.825931 3.0876 0.665866 3.65059 0.665866 4.25197C0.665866 5.39075 1.2485 6.39518 2.12565 6.98376C1.58784 6.96457 1.08203 6.81742 0.640256 6.57431C0.640256 6.58711 0.640256 6.5999 0.640256 6.61909C0.640256 8.20571 1.77351 9.53642 3.27171 9.83711C2.9964 9.91388 2.70828 9.95226 2.40736 9.95226C2.19608 9.95226 1.9912 9.93307 1.79272 9.89469C2.20888 11.1998 3.42537 12.1467 4.85954 12.1722C3.73269 13.0551 2.31773 13.5797 0.781113 13.5797C0.518608 13.5797 0.256102 13.5669 0 13.5349C1.44698 14.4562 3.17567 15 5.02601 15Z"
+                                fill-color=" black" text="@activist_org"
+                                style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word" />
                         </s-twitter>
                         <s-email :share-options="shareOptions">
-                            <div
-                                style="width: 100%; height: 100%; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex">
-                                <div style="width: 28px; height: 28px; position: relative">
-                                    <svg width="32" height="32" viewBox="0 0 16 16" fill="none"
-                                        xmlns="http://www.w3.org/2000/svg">
-                                        <path
-                                            d="M0 4C0 2.89543 0.895431 2 2 2H14C15.1046 2 16 2.89543 16 4V12C16 13.1046 15.1046 14 14 14H2C0.895431 14 0 13.1046 0 12V4ZM2 3C1.44772 3 1 3.44772 1 4V4.2169L8 8.4169L15 4.2169V4C15 3.44772 14.5523 3 14 3H2ZM15 5.3831L10.2919 8.20794L15 11.1052V5.3831ZM14.9662 12.2586L9.32583 8.7876L8 9.5831L6.67417 8.7876L1.03376 12.2586C1.14774 12.6855 1.53715 13 2 13H14C14.4628 13 14.8523 12.6855 14.9662 12.2586ZM1 11.1052L5.70808 8.20794L1 5.3831V11.1052Z"
-                                            fill="black" />
-                                    </svg>
-                                </div>
-                                <div
-                                    style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word">
-                                    Email
-                                </div>
-                            </div>
+                            <SocialMediaShareIcon
+                                icon-path="M0 4C0 2.89543 0.895431 2 2 2H14C15.1046 2 16 2.89543 16 4V12C16 13.1046 15.1046 14 14 14H2C0.895431 14 0 13.1046 0 12V4ZM2 3C1.44772 3 1 3.44772 1 4V4.2169L8 8.4169L15 4.2169V4C15 3.44772 14.5523 3 14 3H2ZM15 5.3831L10.2919 8.20794L15 11.1052V5.3831ZM14.9662 12.2586L9.32583 8.7876L8 9.5831L6.67417 8.7876L1.03376 12.2586C1.14774 12.6855 1.53715 13 2 13H14C14.4628 13 14.8523 12.6855 14.9662 12.2586ZM1 11.1052L5.70808 8.20794L1 5.3831V11.1052Z"
+                                fill-color=" black" text="Email"
+                                style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word" />
                         </s-email>
                         <ModalBase>
                             <template #normalDisplay>
@@ -91,40 +59,19 @@
                         <!-- <s-mastodon :window-features="windowFeatures" :share-options="shareOptions" -->
                             <!-- :use-native-behavior="useNativeBehavior" @popup-close="onClose" @popup-open="onOpen" -->
                             <!-- @popup-block="onBlock" @popup-focus="onFocus"> -->
-                            <!-- <div -->
-                                <!-- style="width: 100%; height: 100%; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex"> -->
-                                <!-- <div style="width: 28px; height: 28px; position: relative"> -->
-                                    <!-- <svg width="32" height="32" viewBox="0 0 16 16" fill="none" -->
-                                        <!-- xmlns="http://www.w3.org/2000/svg"> -->
-                                        <!-- <path -->
-                                            <!-- d="M11.1909 12.1951C13.2058 11.9557 14.9602 10.7205 15.1807 9.59184C15.5281 7.81389 15.4994 5.25305 15.4994 5.25305C15.4994 1.78217 13.2139 0.764795 13.2139 0.764795C12.0615 0.23818 10.0826 0.0167234 8.02678 0H7.97627C5.92041 0.0167234 3.94286 0.23818 2.79039 0.764795C2.79039 0.764795 0.504754 1.78217 0.504754 5.25305C0.504754 5.46347 0.503661 5.68479 0.502523 5.91519C0.499363 6.55506 0.495857 7.26496 0.514458 8.00596C0.597458 11.4003 1.13991 14.7456 4.2941 15.5762C5.74843 15.9592 6.99707 16.0394 8.0027 15.9844C9.82637 15.8838 10.8501 15.3369 10.8501 15.3369L10.79 14.0204C10.79 14.0204 9.48674 14.4292 8.02314 14.3794C6.57306 14.3299 5.04223 14.2238 4.8077 12.4524C4.78604 12.2968 4.77521 12.1304 4.77521 11.9557C4.77521 11.9557 6.19869 12.3019 8.0027 12.3841C9.10579 12.4345 10.1403 12.3198 11.1909 12.1951ZM12.8034 9.72502H11.13V5.64588C11.13 4.786 10.7664 4.34955 10.039 4.34955C9.23486 4.34955 8.83182 4.86729 8.83182 5.89104V8.12379H7.16825V5.89104C7.16825 4.86729 6.76512 4.34955 5.96093 4.34955C5.2336 4.34955 4.86997 4.786 4.86997 5.64588V9.72502H3.19653V5.52235C3.19653 4.66342 3.41634 3.98086 3.85785 3.47588C4.31314 2.9709 4.90939 2.71204 5.64955 2.71204C6.5059 2.71204 7.15439 3.03952 7.58317 3.69458L7.99999 4.38981L8.4169 3.69458C8.84559 3.03952 9.49409 2.71204 10.3505 2.71204C11.0906 2.71204 11.6868 2.9709 12.1422 3.47588C12.5836 3.98086 12.8034 4.66342 12.8034 5.52235V9.72502Z" -->
-                                            <!-- fill="black" /> -->
-                                    <!-- </svg> -->
-                                <!-- </div> -->
-                                <!-- <div -->
-                                    <!-- style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word"> -->
-                                    <!-- Mastodon -->
-                                <!-- </div> -->
-                            <!-- </div> -->
+                            <!-- <SocialMediaShareIcon -->
+                                <!-- icon-path="M11.1909 12.1951C13.2058 11.9557 14.9602 10.7205 15.1807 9.59184C15.5281 7.81389 15.4994 5.25305 15.4994 5.25305C15.4994 1.78217 13.2139 0.764795 13.2139 0.764795C12.0615 0.23818 10.0826 0.0167234 8.02678 0H7.97627C5.92041 0.0167234 3.94286 0.23818 2.79039 0.764795C2.79039 0.764795 0.504754 1.78217 0.504754 5.25305C0.504754 5.46347 0.503661 5.68479 0.502523 5.91519C0.499363 6.55506 0.495857 7.26496 0.514458 8.00596C0.597458 11.4003 1.13991 14.7456 4.2941 15.5762C5.74843 15.9592 6.99707 16.0394 8.0027 15.9844C9.82637 15.8838 10.8501 15.3369 10.8501 15.3369L10.79 14.0204C10.79 14.0204 9.48674 14.4292 8.02314 14.3794C6.57306 14.3299 5.04223 14.2238 4.8077 12.4524C4.78604 12.2968 4.77521 12.1304 4.77521 11.9557C4.77521 11.9557 6.19869 12.3019 8.0027 12.3841C9.10579 12.4345 10.1403 12.3198 11. -->
+                    <!-- 1909 12.1951ZM12.8034 9.72502H11.13V5.64588C11.13 4.786 10.7664 4.34955 10.039 4.34955C9.23486 4.34955 8.83182 4.86729 8.83182 5.89104V8.12379H7.16825V5.89104C7.16825 4.86729 6.76512 4.34955 5.96093 4.34955C5.2336 4.34955 4.86997 4.786 4.86997 5.64588V9.72502H3.19653V5.52235C3.19653 4.66342 3.41634 3.98086 3.85785 3.47588C4.31314 2.9709 4.90939 2.71204 5.64955 2.71204C6.5059 2.71204 7.15439 3.03952 7.58317 3.69458L7.99999 4.38981L8.4169 3.69458C8.84559 3.03952 9.49409 2.71204 10.3505 2.71204C11.0906 2.71204 11.6868 2.9709 12.1422 3.47588C12.5836 3.98086 12.8034 4.66342 12.8034 5.52235V9.72502Z" -->
+                                <!-- fill-color="black" text="Mastodon" -->
+                                <!-- style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word" /> -->
                         <!-- </s-mastodon> -->
                         <!-- <s-facebook-messenger :window-features="windowFeatures" :share-options="shareOptions" -->
                             <!-- :use-native-behavior="useNativeBehavior" @popup-close="onClose" @popup-open="onOpen" -->
                             <!-- @popup-block="onBlock" @popup-focus="onFocus"> -->
-                            <!-- <div -->
-                                <!-- style="width: 100%; height: 100%; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex"> -->
-                                <!-- <div style="width: 28px; height: 28px; position: relative"> -->
-                                    <!-- <svg width="32" height="32" viewBox="0 0 16 16" fill="none" -->
-                                        <!-- xmlns="http://www.w3.org/2000/svg"> -->
-                                        <!-- <path -->
-                                            <!-- d="M0 7.76C0 3.30112 3.49336 0 8 0C12.5066 0 16 3.30112 16 7.76C16 12.2189 12.5066 15.52 8 15.52C7.19053 15.52 6.41392 15.4131 5.68424 15.2125C5.5424 15.1734 5.39157 15.1845 5.25696 15.2438L3.66907 15.9448C3.25371 16.1282 2.78485 15.8328 2.77093 15.3789L2.72736 13.9558C2.722 13.7805 2.64312 13.6166 2.51245 13.4997C0.95584 12.1076 0 10.0923 0 7.76ZM5.54604 6.3011L3.19604 10.0294C2.97052 10.3872 3.41033 10.7904 3.74724 10.5348L6.27153 8.61899C6.44228 8.48939 6.67825 8.4887 6.84972 8.61731L8.71884 10.0192C9.27969 10.4398 10.0802 10.2921 10.454 9.69902L12.804 5.97067C13.0295 5.61286 12.5897 5.20966 12.2528 5.46534L9.72849 7.3811C9.55772 7.5107 9.32177 7.51139 9.15028 7.38275L7.28121 5.98094C6.72033 5.5603 5.91985 5.70798 5.54604 6.3011Z" -->
-                                            <!-- fill="black" /> -->
-                                    <!-- </svg> -->
-                                <!-- </div> -->
-                                <!-- <div -->
-                                    <!-- style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word"> -->
-                                    <!-- Messenger -->
-                                <!-- </div> -->
-                            <!-- </div> -->
+                            <!-- <SocialMediaShareIcon -->
+                                <!-- icon-path="M0 7.76C0 3.30112 3.49336 0 8 0C12.5066 0 16 3.30112 16 7.76C16 12.2189 12.5066 15.52 8 15.52C7.19053 15.52 6.41392 15.4131 5.68424 15.2125C5.5424 15.1734 5.39157 15.1845 5.25696 15.2438L3.66907 15.9448C3.25371 16.1282 2.78485 15.8328 2.77093 15.3789L2.72736 13.9558C2.722 13.7805 2.64312 13.6166 2.51245 13.4997C0.95584 12.1076 0 10.0923 0 7.76ZM5.54604 6.3011L3.19604 10.0294C2.97052 10.3872 3.41033 10.7904 3.74724 10.5348L6.27153 8.61899C6.44228 8.48939 6.67825 8.4887 6.84972 8.61731L8.71884 10.0192C9.27969 10.4398 10.0802 10.2921 10.454 9.69902L12.804 5.97067C13.0295 5.61286 12.5897 5.20966 12.2528 5.46534L9.72849 7.3811C9.55772 7.5107 9.32177 7.51139 9.15028 7.38275L7.28121 5.98094C6.72033 5.5603 5.91985 5.70798 5.54604 6.3011Z" -->
+                                <!-- fill-color="black" text="Messenger" -->
+                                <!-- style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word" /> -->
                         <!-- </s-facebook-messenger> -->
                         <div @click="copyToClipboard(props?.event?.name ? props?.event?.name : props?.organization?.name ? props?.organization?.name : '', getCurrentUrl())"
                             class="cursor-pointer"
@@ -139,9 +86,10 @@
                                         d="M6.58576 4.67156C5.41419 5.84313 5.41419 7.74263 6.58576 8.9142C6.8337 9.16214 7.11424 9.3576 7.41358 9.5006L8.18917 8.72501C7.86083 8.63732 7.55046 8.46468 7.29287 8.2071C6.51182 7.42605 6.51182 6.15972 7.29287 5.37867L9.1213 3.55024C9.90235 2.76919 11.1687 2.76919 11.9497 3.55024C12.7308 4.33129 12.7308 5.59762 11.9497 6.37867L11.1571 7.17128C11.2693 7.5914 11.312 8.02623 11.2851 8.45754L12.6568 7.08577C13.8284 5.9142 13.8284 4.01471 12.6568 2.84313C11.4853 1.67156 9.58576 1.67156 8.41419 2.84313L6.58576 4.67156Z"
                                         fill="black" />
                                 </svg>
-                                <svg v-if="contentCopied" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-copy-check"
-                                    width="32" height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#00b341"
-                                    fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                <svg v-if="contentCopied" xmlns="http://www.w3.org/2000/svg"
+                                    class="icon icon-tabler icon-tabler-copy-check" width="32" height="32"
+                                    viewBox="0 0 24 24" stroke-width="1.5" stroke="#00b341" fill="none"
+                                    stroke-linecap="round" stroke-linejoin="round">
                                     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                     <path
                                         d="M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z" />
@@ -165,10 +113,10 @@
 <script setup lang="ts">
 import type { BtnAction } from "~/types/btn-props";
 import ModalBase from "~/components/modal/ModalBase.vue";
-import { STelegram, STwitter, SEmail, SMastodon, SFacebookMessenger } from 'vue-socials';
+import { STelegram, STwitter, SEmail, SMastodon, SFacebookMessenger, SFacebook } from 'vue-socials';
 import type { Event } from "~/types/event";
 import type { Organization } from "~/types/organization";
-import { OrganizeImportsMode } from "typescript";
+import SocialMediaShareIcon from "@/components/SocialMediaShareIcon.vue";
 
 const props = defineProps<{
     cta: BtnAction["cta"];
@@ -188,7 +136,7 @@ const getEntityType = () => {
 };
 
 const setEntityInfo = (data: typeof props.event | typeof props.organization) => {
-    if(!data) return;
+    if (!data) return;
     return {
         subject: `Share ${data.name}!`,
         body: `Check out ${data.name}!`,
@@ -228,12 +176,14 @@ const nativeBehaviorOptions = {
     onFocus: () => { },
 };
 
+const windowFeatures = {};
+
 const copyToClipboard = async (name: string, url: string) => {
     try {
         await navigator.clipboard.writeText(`${name} ${url}`);
         contentCopied.value = true;
         setTimeout(() => { contentCopied.value = false }, 3000)
-    } catch(error) {
+    } catch (error) {
         console.error(`Could not copy text: ${error}`);
         contentCopied.value = false;
     };

From 437f61ac04d29f6718f1a63c75f0446ca002341a Mon Sep 17 00:00:00 2001
From: Tessa <anderson.quintessa@gmail.com>
Date: Fri, 16 Feb 2024 01:46:18 -0600
Subject: [PATCH 09/15] adding mastodon

---
 frontend/components/modal/ModalSharePage.vue | 45 ++++++++++++--------
 1 file changed, 27 insertions(+), 18 deletions(-)

diff --git a/frontend/components/modal/ModalSharePage.vue b/frontend/components/modal/ModalSharePage.vue
index 4c6406b66..15e249f7b 100644
--- a/frontend/components/modal/ModalSharePage.vue
+++ b/frontend/components/modal/ModalSharePage.vue
@@ -55,24 +55,32 @@
                             </template>
                         </ModalBase>
                     </div>
-                    <!-- <div class="flex space-x-2 lg:space-x-3"> -->
-                        <!-- <s-mastodon :window-features="windowFeatures" :share-options="shareOptions" -->
-                            <!-- :use-native-behavior="useNativeBehavior" @popup-close="onClose" @popup-open="onOpen" -->
-                            <!-- @popup-block="onBlock" @popup-focus="onFocus"> -->
-                            <!-- <SocialMediaShareIcon -->
-                                <!-- icon-path="M11.1909 12.1951C13.2058 11.9557 14.9602 10.7205 15.1807 9.59184C15.5281 7.81389 15.4994 5.25305 15.4994 5.25305C15.4994 1.78217 13.2139 0.764795 13.2139 0.764795C12.0615 0.23818 10.0826 0.0167234 8.02678 0H7.97627C5.92041 0.0167234 3.94286 0.23818 2.79039 0.764795C2.79039 0.764795 0.504754 1.78217 0.504754 5.25305C0.504754 5.46347 0.503661 5.68479 0.502523 5.91519C0.499363 6.55506 0.495857 7.26496 0.514458 8.00596C0.597458 11.4003 1.13991 14.7456 4.2941 15.5762C5.74843 15.9592 6.99707 16.0394 8.0027 15.9844C9.82637 15.8838 10.8501 15.3369 10.8501 15.3369L10.79 14.0204C10.79 14.0204 9.48674 14.4292 8.02314 14.3794C6.57306 14.3299 5.04223 14.2238 4.8077 12.4524C4.78604 12.2968 4.77521 12.1304 4.77521 11.9557C4.77521 11.9557 6.19869 12.3019 8.0027 12.3841C9.10579 12.4345 10.1403 12.3198 11. -->
-                    <!-- 1909 12.1951ZM12.8034 9.72502H11.13V5.64588C11.13 4.786 10.7664 4.34955 10.039 4.34955C9.23486 4.34955 8.83182 4.86729 8.83182 5.89104V8.12379H7.16825V5.89104C7.16825 4.86729 6.76512 4.34955 5.96093 4.34955C5.2336 4.34955 4.86997 4.786 4.86997 5.64588V9.72502H3.19653V5.52235C3.19653 4.66342 3.41634 3.98086 3.85785 3.47588C4.31314 2.9709 4.90939 2.71204 5.64955 2.71204C6.5059 2.71204 7.15439 3.03952 7.58317 3.69458L7.99999 4.38981L8.4169 3.69458C8.84559 3.03952 9.49409 2.71204 10.3505 2.71204C11.0906 2.71204 11.6868 2.9709 12.1422 3.47588C12.5836 3.98086 12.8034 4.66342 12.8034 5.52235V9.72502Z" -->
-                                <!-- fill-color="black" text="Mastodon" -->
-                                <!-- style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word" /> -->
-                        <!-- </s-mastodon> -->
+                    <div class="flex space-x-2 lg:space-x-3">
+                        <s-mastodon :window-features="windowFeatures" :share-options="shareOptions"
+                            :use-native-behavior="useNativeBehavior" @popup-close="onClose" @popup-open="onOpen"
+                            @popup-block="onBlock" @popup-focus="onFocus">
+                            <SocialMediaShareIcon
+                                icon-path="M11.1909 12.1951C13.2058 11.9557 14.9602 10.7205 15.1807 9.59184C15.5281 7.81389 15.4994 5.25305 15.4994 5.25305C15.4994 1.78217 13.2139 0.764795 13.2139 0.764795C12.0615 0.23818 10.0826 0.0167234 8.02678 0H7.97627C5.92041 0.0167234 3.94286 0.23818 2.79039 0.764795C2.79039 0.764795 0.504754 1.78217 0.504754 5.25305C0.504754 5.46347 0.503661 5.68479 0.502523 5.91519C0.499363 6.55506 0.495857 7.26496 0.514458 8.00596C0.597458 11.4003 1.13991 14.7456 4.2941 15.5762C5.74843 15.9592 6.99707 16.0394 8.0027 15.9844C9.82637 15.8838 10.8501 15.3369 10.8501 15.3369L10.79 14.0204C10.79 14.0204 9.48674 14.4292 8.02314 14.3794C6.57306 14.3299 5.04223 14.2238 4.8077 12.4524C4.78604 12.2968 4.77521 12.1304 4.77521 11.9557C4.77521 11.9557 6.19869 12.3019 8.0027 12.3841C9.10579 12.4345 10.1403 12.3198 11.
+                        1909 12.1951ZM12.8034 9.72502H11.13V5.64588C11.13 4.786 10.7664 4.34955 10.039 4.34955C9.23486 4.34955 8.83182 4.86729 8.83182 5.89104V8.12379H7.16825V5.89104C7.16825 4.86729 6.76512 4.34955 5.96093 4.34955C5.2336 4.34955 4.86997 4.786 4.86997 5.64588V9.72502H3.19653V5.52235C3.19653 4.66342 3.41634 3.98086 3.85785 3.47588C4.31314 2.9709 4.90939 2.71204 5.64955 2.71204C6.5059 2.71204 7.15439 3.03952 7.58317 3.69458L7.99999 4.38981L8.4169 3.69458C8.84559 3.03952 9.49409 2.71204 10.3505 2.71204C11.0906 2.71204 11.6868 2.9709 12.1422 3.47588C12.5836 3.98086 12.8034 4.66342 12.8034 5.52235V9.72502Z"
+                                fill-color="black" text="Mastodon"
+                                style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word" />
+                        </s-mastodon>
                         <!-- <s-facebook-messenger :window-features="windowFeatures" :share-options="shareOptions" -->
-                            <!-- :use-native-behavior="useNativeBehavior" @popup-close="onClose" @popup-open="onOpen" -->
-                            <!-- @popup-block="onBlock" @popup-focus="onFocus"> -->
-                            <!-- <SocialMediaShareIcon -->
-                                <!-- icon-path="M0 7.76C0 3.30112 3.49336 0 8 0C12.5066 0 16 3.30112 16 7.76C16 12.2189 12.5066 15.52 8 15.52C7.19053 15.52 6.41392 15.4131 5.68424 15.2125C5.5424 15.1734 5.39157 15.1845 5.25696 15.2438L3.66907 15.9448C3.25371 16.1282 2.78485 15.8328 2.77093 15.3789L2.72736 13.9558C2.722 13.7805 2.64312 13.6166 2.51245 13.4997C0.95584 12.1076 0 10.0923 0 7.76ZM5.54604 6.3011L3.19604 10.0294C2.97052 10.3872 3.41033 10.7904 3.74724 10.5348L6.27153 8.61899C6.44228 8.48939 6.67825 8.4887 6.84972 8.61731L8.71884 10.0192C9.27969 10.4398 10.0802 10.2921 10.454 9.69902L12.804 5.97067C13.0295 5.61286 12.5897 5.20966 12.2528 5.46534L9.72849 7.3811C9.55772 7.5107 9.32177 7.51139 9.15028 7.38275L7.28121 5.98094C6.72033 5.5603 5.91985 5.70798 5.54604 6.3011Z" -->
-                                <!-- fill-color="black" text="Messenger" -->
-                                <!-- style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word" /> -->
+                        <!-- :use-native-behavior="useNativeBehavior" @popup-close="onClose" @popup-open="onOpen" -->
+                        <!-- @popup-block="onBlock" @popup-focus="onFocus"> -->
+                        <!-- <SocialMediaShareIcon -->
+                        <!-- icon-path="M0 7.76C0 3.30112 3.49336 0 8 0C12.5066 0 16 3.30112 16 7.76C16 12.2189 12.5066 15.52 8 15.52C7.19053 15.52 6.41392 15.4131 5.68424 15.2125C5.5424 15.1734 5.39157 15.1845 5.25696 15.2438L3.66907 15.9448C3.25371 16.1282 2.78485 15.8328 2.77093 15.3789L2.72736 13.9558C2.722 13.7805 2.64312 13.6166 2.51245 13.4997C0.95584 12.1076 0 10.0923 0 7.76ZM5.54604 6.3011L3.19604 10.0294C2.97052 10.3872 3.41033 10.7904 3.74724 10.5348L6.27153 8.61899C6.44228 8.48939 6.67825 8.4887 6.84972 8.61731L8.71884 10.0192C9.27969 10.4398 10.0802 10.2921 10.454 9.69902L12.804 5.97067C13.0295 5.61286 12.5897 5.20966 12.2528 5.46534L9.72849 7.3811C9.55772 7.5107 9.32177 7.51139 9.15028 7.38275L7.28121 5.98094C6.72033 5.5603 5.91985 5.70798 5.54604 6.3011Z" -->
+                        <!-- fill-color="black" text="Messenger" -->
+                        <!-- style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word" /> -->
                         <!-- </s-facebook-messenger> -->
+                        <!-- <s-facebook :href=getCurrentUrl() @popup-close="onClose" @popup-open="onOpen" @popup-block="onBlock" -->
+                        <!-- @popup-focus="onFocus" :window-features="windowFeatures" :share-options="shareOptions" -->
+                        <!-- :use-native-behavior="useNativeBehavior" :native-behavior-options="nativeBehaviorOptions"> -->
+                        <!-- <SocialMediaShareIcon -->
+                        <!-- icon-path="M16 8.0486C16 3.60314 12.418 -0.000610352 7.99949 -0.000610352C3.58095 -0.000610352 -0.000976562 3.60314 -0.000976562 8.0486C-0.000976562 12.0662 2.92468 15.3962 6.74942 16V10.3753H4.71805V8.0486H6.74942V6.27526C6.74942 4.25792 7.94383 3.14361 9.77132 3.14361C10.6466 3.14361 11.5622 3.30082 11.5622 3.30082V5.28168H10.5534C9.55951 5.28168 9.24957 5.90215 9.24957 6.53869V8.0486H11.4684L11.1137 10.3753H9.24957V16C13.0743 15.3962 16 12.0662 16 8.0486Z" -->
+                        <!-- fill-color=" black" text="Facebook" -->
+                        <!-- style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word" /> -->
+                        <!-- </s-facebook> -->                                  
                         <div @click="copyToClipboard(props?.event?.name ? props?.event?.name : props?.organization?.name ? props?.organization?.name : '', getCurrentUrl())"
                             class="cursor-pointer"
                             style="width: 100%; height: 100%; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex">
@@ -105,7 +113,7 @@
                         </div>
                     </div>
                 </div>
-            <!-- </div> -->
+            </div>
         </template>
     </ModalBase>
 </template>
@@ -113,7 +121,7 @@
 <script setup lang="ts">
 import type { BtnAction } from "~/types/btn-props";
 import ModalBase from "~/components/modal/ModalBase.vue";
-import { STelegram, STwitter, SEmail, SMastodon, SFacebookMessenger, SFacebook } from 'vue-socials';
+import { STelegram, STwitter, SEmail, SMastodon, SFacebookMessenger, SFacebook, SSms } from 'vue-socials';
 import type { Event } from "~/types/event";
 import type { Organization } from "~/types/organization";
 import SocialMediaShareIcon from "@/components/SocialMediaShareIcon.vue";
@@ -162,6 +170,7 @@ const shareOptions = {
     subject: getEntityType()?.subject || "Share this!",
     body: `${getEntityType()?.body}   ${getEntityType()?.url}` || "Check this out!",
     redirectUri: 'https://www.domain.com/',
+    domain: 'https://mas.to',
     // appId: 842766727626496, Facebook Messenger App ID
 };
 

From 420b2b0412938ff6af27ce02c5ead0dc860f156a Mon Sep 17 00:00:00 2001
From: Tessa <anderson.quintessa@gmail.com>
Date: Fri, 23 Feb 2024 19:10:40 -0600
Subject: [PATCH 10/15] feat: format doc with prettier + add API composition +
 TS support for social icon sharing

---
 frontend/components/SocialMediaShareIcon.vue |  56 ++-
 frontend/components/modal/ModalSharePage.vue | 490 ++++++++++++-------
 frontend/pages/events/[id]/about.vue         |  10 -
 3 files changed, 361 insertions(+), 195 deletions(-)

diff --git a/frontend/components/SocialMediaShareIcon.vue b/frontend/components/SocialMediaShareIcon.vue
index 93a4f1dd0..e1214f61a 100644
--- a/frontend/components/SocialMediaShareIcon.vue
+++ b/frontend/components/SocialMediaShareIcon.vue
@@ -1,29 +1,43 @@
 <template>
-  <div class="cursor-pointer"
-    style="width: 100%; height: 100%; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex">
-    <div style="iconStyle">
-      <svg width="32" height="32" viewBox="0 0 16 16" :fill="fillColor" xmlns="http://www.w3.org/2000/svg">
-        <path :d="iconPath" />
+  <div
+    class="cursor-pointer"
+    style="
+      width: 100%;
+      height: 100%;
+      justify-content: flex-start;
+      align-items: center;
+      gap: 12px;
+      display: inline-flex;
+    "
+  >
+    <div :style="iconStyle">
+      <svg
+        width="32"
+        height="32"
+        viewBox="0 0 16 16"
+        fill="props.fillColor"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path :d="props.iconPath" />
       </svg>
     </div>
-    <div>{{ text }}</div>
+    <div :textStyle="props.textStyle"> {{ props.text }}</div>
   </div>
 </template>
-  
-<script>
+
+<script setup lang="ts">
+import { defineProps } from 'vue';
 
 const iconStyle = {
-  width: '28px', height: '28px', position: 'relative'
-};
+  width: "28px",
+  height: "28px",
+  position: "relative",
+} as const;
 
-export default {
-  props: {
-    iconPath: String,
-    fillColor: String,
-    text: String,
-    onClick: Function,
-    iconStyle: iconStyle,
-    textStyle: Object,
-  }
-};
-</script>
\ No newline at end of file
+const props = defineProps<{
+  iconPath: string;
+  fillColor: string;
+  text: string;
+  textStyle: Object;
+}>();
+</script>
diff --git a/frontend/components/modal/ModalSharePage.vue b/frontend/components/modal/ModalSharePage.vue
index 15e249f7b..4e3b02272 100644
--- a/frontend/components/modal/ModalSharePage.vue
+++ b/frontend/components/modal/ModalSharePage.vue
@@ -1,177 +1,338 @@
 <template>
-    <ModalBase>
-        <template #normalDisplay>
-            <BtnAction class="hidden md:block w-max" :cta=props.cta :label=props.label :aria-label=props.ariaLabel
-                fontSize="sm" leftIcon="bi:box-arrow-up" iconSize="1.25em" />
-        </template>
-        <template #modalDisplay>
-            <DialogTitle class="font-display flex justify-between">
-                <p class="text-3xl md:responsive-h2 font-bold">
-                    {{ $t("components.modal-share.header") }}
-                </p>
-            </DialogTitle>
-            <div
-                class="flex flex-col items-center md:grid md:grid-cols-2 md:grid-rows-1 pb-6 space-y-6 lg:grid-cols-3 lg:grid-rows-1 lg:pb-0 lg:space-y-0 lg:space-x-6 lg:mr-14 lg:pr-8">
-                <div class="items-center space-y-4 text-left col-span-2 pt-2 font-medium">
-                    <div class="flex space-x-2 lg:space-x-3">
-                        <s-telegram @popup-close="onClose" @popup-open="onOpen" @popup-block="onBlock"
-                            @popup-focus="onFocus" :window-features="windowFeatures" :share-options="shareOptions"
-                            :use-native-behavior="useNativeBehavior" :native-behavior-options="nativeBehaviorOptions">
-                            <SocialMediaShareIcon
-                                icon-path="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8.28672 5.90599C7.50861 6.22963 5.95346 6.8995 3.6213 7.91558C3.2426 8.06618 3.04421 8.21351 3.02615 8.35757C2.99563 8.60103 3.30052 8.6969 3.71569 8.82745C3.77216 8.8452 3.83068 8.8636 3.89067 8.8831C4.29913 9.01588 4.84859 9.17121 5.13423 9.17738C5.39334 9.18298 5.68253 9.07616 6.0018 8.85692C8.18081 7.38603 9.30563 6.64258 9.37625 6.62655C9.42607 6.61524 9.49511 6.60102 9.54188 6.6426C9.58866 6.68418 9.58406 6.76291 9.57911 6.78404C9.5489 6.9128 8.35212 8.02543 7.73279 8.60121C7.53971 8.78071 7.40276 8.90804 7.37476 8.93712C7.31204 9.00226 7.24812 9.06388 7.18669 9.1231C6.80722 9.48891 6.52265 9.76324 7.20245 10.2112C7.52913 10.4265 7.79055 10.6045 8.05134 10.7821C8.33616 10.9761 8.62023 11.1695 8.98778 11.4105C9.08142 11.4718 9.17086 11.5356 9.25796 11.5977C9.58942 11.834 9.88721 12.0463 10.2551 12.0124C10.4689 11.9928 10.6897 11.7918 10.8018 11.1923C11.0668 9.77545 11.5878 6.70567 11.7082 5.44069C11.7187 5.32986 11.7055 5.18802 11.6948 5.12576C11.6842 5.06349 11.6619 4.97478 11.581 4.90911C11.4851 4.83133 11.3371 4.81493 11.2709 4.8161C10.9701 4.8214 10.5084 4.98192 8.28672 5.90599Z"
-                                fill-color="black" text="Telegram"
-                                style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word" />
-                        </s-telegram>
-                        <s-twitter @popup-close="onClose" @popup-open="onOpen" @popup-block="onBlock" @popup-focus="onFocus"
-                            :window-features="windowFeatures" :share-options="shareOptions"
-                            :use-native-behavior="useNativeBehavior">
-                            <SocialMediaShareIcon
-                                icon-path="M5.02601 15C11.0636 15 14.3673 9.99705 14.3673 5.66585C14.3673 5.5251 14.3673 5.38435 14.3609 5.2436C15.0012 4.78297 15.5582 4.20079 16 3.54183C15.411 3.80413 14.7771 3.97687 14.1112 4.06004C14.7899 3.65699 15.3085 3.01083 15.5582 2.24311C14.9244 2.62057 14.2201 2.88927 13.471 3.03642C12.8691 2.39665 12.0176 2 11.0764 2C9.26451 2 7.79192 3.47146 7.79192 5.28199C7.79192 5.53789 7.82393 5.7874 7.87515 6.03051C5.14766 5.89616 2.72749 4.58465 1.10764 2.60138C0.825931 3.0876 0.665866 3.65059 0.665866 4.25197C0.665866 5.39075 1.2485 6.39518 2.12565 6.98376C1.58784 6.96457 1.08203 6.81742 0.640256 6.57431C0.640256 6.58711 0.640256 6.5999 0.640256 6.61909C0.640256 8.20571 1.77351 9.53642 3.27171 9.83711C2.9964 9.91388 2.70828 9.95226 2.40736 9.95226C2.19608 9.95226 1.9912 9.93307 1.79272 9.89469C2.20888 11.1998 3.42537 12.1467 4.85954 12.1722C3.73269 13.0551 2.31773 13.5797 0.781113 13.5797C0.518608 13.5797 0.256102 13.5669 0 13.5349C1.44698 14.4562 3.17567 15 5.02601 15Z"
-                                fill-color=" black" text="@activist_org"
-                                style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word" />
-                        </s-twitter>
-                        <s-email :share-options="shareOptions">
-                            <SocialMediaShareIcon
-                                icon-path="M0 4C0 2.89543 0.895431 2 2 2H14C15.1046 2 16 2.89543 16 4V12C16 13.1046 15.1046 14 14 14H2C0.895431 14 0 13.1046 0 12V4ZM2 3C1.44772 3 1 3.44772 1 4V4.2169L8 8.4169L15 4.2169V4C15 3.44772 14.5523 3 14 3H2ZM15 5.3831L10.2919 8.20794L15 11.1052V5.3831ZM14.9662 12.2586L9.32583 8.7876L8 9.5831L6.67417 8.7876L1.03376 12.2586C1.14774 12.6855 1.53715 13 2 13H14C14.4628 13 14.8523 12.6855 14.9662 12.2586ZM1 11.1052L5.70808 8.20794L1 5.3831V11.1052Z"
-                                fill-color=" black" text="Email"
-                                style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word" />
-                        </s-email>
-                        <ModalBase>
-                            <template #normalDisplay>
-                                <div
-                                    style="width: 100%; height: 100%; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex">
-                                    <div style="width: 28px; height: 28px; position: relative">
-                                        <Icon name="bi:qr-code-scan" size="2em"
-                                            :alt="$t('components.modal-qr-code.img-alt-text')" />
-                                    </div>
-                                    <div class="flex space-x-2 lg:space-x-3">
-                                        View QR code
-                                    </div>
-                                </div>
-                            </template>
-                            <template #modalDisplay>
-                                <ModalQRCode v-if=props.organization :entityName=props?.organization?.name />
-                                <ModalQRCode v-if=props.event :entityName=props?.event?.name />
-                            </template>
-                        </ModalBase>
-                    </div>
-                    <div class="flex space-x-2 lg:space-x-3">
-                        <s-mastodon :window-features="windowFeatures" :share-options="shareOptions"
-                            :use-native-behavior="useNativeBehavior" @popup-close="onClose" @popup-open="onOpen"
-                            @popup-block="onBlock" @popup-focus="onFocus">
-                            <SocialMediaShareIcon
-                                icon-path="M11.1909 12.1951C13.2058 11.9557 14.9602 10.7205 15.1807 9.59184C15.5281 7.81389 15.4994 5.25305 15.4994 5.25305C15.4994 1.78217 13.2139 0.764795 13.2139 0.764795C12.0615 0.23818 10.0826 0.0167234 8.02678 0H7.97627C5.92041 0.0167234 3.94286 0.23818 2.79039 0.764795C2.79039 0.764795 0.504754 1.78217 0.504754 5.25305C0.504754 5.46347 0.503661 5.68479 0.502523 5.91519C0.499363 6.55506 0.495857 7.26496 0.514458 8.00596C0.597458 11.4003 1.13991 14.7456 4.2941 15.5762C5.74843 15.9592 6.99707 16.0394 8.0027 15.9844C9.82637 15.8838 10.8501 15.3369 10.8501 15.3369L10.79 14.0204C10.79 14.0204 9.48674 14.4292 8.02314 14.3794C6.57306 14.3299 5.04223 14.2238 4.8077 12.4524C4.78604 12.2968 4.77521 12.1304 4.77521 11.9557C4.77521 11.9557 6.19869 12.3019 8.0027 12.3841C9.10579 12.4345 10.1403 12.3198 11.
-                        1909 12.1951ZM12.8034 9.72502H11.13V5.64588C11.13 4.786 10.7664 4.34955 10.039 4.34955C9.23486 4.34955 8.83182 4.86729 8.83182 5.89104V8.12379H7.16825V5.89104C7.16825 4.86729 6.76512 4.34955 5.96093 4.34955C5.2336 4.34955 4.86997 4.786 4.86997 5.64588V9.72502H3.19653V5.52235C3.19653 4.66342 3.41634 3.98086 3.85785 3.47588C4.31314 2.9709 4.90939 2.71204 5.64955 2.71204C6.5059 2.71204 7.15439 3.03952 7.58317 3.69458L7.99999 4.38981L8.4169 3.69458C8.84559 3.03952 9.49409 2.71204 10.3505 2.71204C11.0906 2.71204 11.6868 2.9709 12.1422 3.47588C12.5836 3.98086 12.8034 4.66342 12.8034 5.52235V9.72502Z"
-                                fill-color="black" text="Mastodon"
-                                style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word" />
-                        </s-mastodon>
-                        <!-- <s-facebook-messenger :window-features="windowFeatures" :share-options="shareOptions" -->
-                        <!-- :use-native-behavior="useNativeBehavior" @popup-close="onClose" @popup-open="onOpen" -->
-                        <!-- @popup-block="onBlock" @popup-focus="onFocus"> -->
-                        <!-- <SocialMediaShareIcon -->
-                        <!-- icon-path="M0 7.76C0 3.30112 3.49336 0 8 0C12.5066 0 16 3.30112 16 7.76C16 12.2189 12.5066 15.52 8 15.52C7.19053 15.52 6.41392 15.4131 5.68424 15.2125C5.5424 15.1734 5.39157 15.1845 5.25696 15.2438L3.66907 15.9448C3.25371 16.1282 2.78485 15.8328 2.77093 15.3789L2.72736 13.9558C2.722 13.7805 2.64312 13.6166 2.51245 13.4997C0.95584 12.1076 0 10.0923 0 7.76ZM5.54604 6.3011L3.19604 10.0294C2.97052 10.3872 3.41033 10.7904 3.74724 10.5348L6.27153 8.61899C6.44228 8.48939 6.67825 8.4887 6.84972 8.61731L8.71884 10.0192C9.27969 10.4398 10.0802 10.2921 10.454 9.69902L12.804 5.97067C13.0295 5.61286 12.5897 5.20966 12.2528 5.46534L9.72849 7.3811C9.55772 7.5107 9.32177 7.51139 9.15028 7.38275L7.28121 5.98094C6.72033 5.5603 5.91985 5.70798 5.54604 6.3011Z" -->
-                        <!-- fill-color="black" text="Messenger" -->
-                        <!-- style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word" /> -->
-                        <!-- </s-facebook-messenger> -->
-                        <!-- <s-facebook :href=getCurrentUrl() @popup-close="onClose" @popup-open="onOpen" @popup-block="onBlock" -->
-                        <!-- @popup-focus="onFocus" :window-features="windowFeatures" :share-options="shareOptions" -->
-                        <!-- :use-native-behavior="useNativeBehavior" :native-behavior-options="nativeBehaviorOptions"> -->
-                        <!-- <SocialMediaShareIcon -->
-                        <!-- icon-path="M16 8.0486C16 3.60314 12.418 -0.000610352 7.99949 -0.000610352C3.58095 -0.000610352 -0.000976562 3.60314 -0.000976562 8.0486C-0.000976562 12.0662 2.92468 15.3962 6.74942 16V10.3753H4.71805V8.0486H6.74942V6.27526C6.74942 4.25792 7.94383 3.14361 9.77132 3.14361C10.6466 3.14361 11.5622 3.30082 11.5622 3.30082V5.28168H10.5534C9.55951 5.28168 9.24957 5.90215 9.24957 6.53869V8.0486H11.4684L11.1137 10.3753H9.24957V16C13.0743 15.3962 16 12.0662 16 8.0486Z" -->
-                        <!-- fill-color=" black" text="Facebook" -->
-                        <!-- style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word" /> -->
-                        <!-- </s-facebook> -->                                  
-                        <div @click="copyToClipboard(props?.event?.name ? props?.event?.name : props?.organization?.name ? props?.organization?.name : '', getCurrentUrl())"
-                            class="cursor-pointer"
-                            style="width: 100%; height: 100%; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex">
-                            <div style="width: 28px; height: 28px; position: relative">
-                                <svg v-if="!contentCopied" width="32" height="32" viewBox="0 0 16 16" fill="none"
-                                    xmlns="http://www.w3.org/2000/svg">
-                                    <path
-                                        d="M4.71488 6.54244L3.34312 7.9142C2.17155 9.08577 2.17155 10.9853 3.34312 12.1568C4.51469 13.3284 6.41419 13.3284 7.58576 12.1568L9.41419 10.3284C10.5858 9.15684 10.5858 7.25735 9.41419 6.08577C9.16625 5.83784 8.88572 5.64237 8.58638 5.49938L7.99998 6.08578C7.939 6.14675 7.88754 6.21365 7.8456 6.28461C8.16104 6.37499 8.45862 6.54442 8.70708 6.79288C9.48813 7.57393 9.48813 8.84026 8.70708 9.62131L6.87866 11.4497C6.09761 12.2308 4.83128 12.2308 4.05023 11.4497C3.26918 10.6687 3.26918 9.40236 4.05023 8.62131L4.84283 7.8287C4.73064 7.40858 4.68799 6.97375 4.71488 6.54244Z"
-                                        fill="black" />
-                                    <path
-                                        d="M6.58576 4.67156C5.41419 5.84313 5.41419 7.74263 6.58576 8.9142C6.8337 9.16214 7.11424 9.3576 7.41358 9.5006L8.18917 8.72501C7.86083 8.63732 7.55046 8.46468 7.29287 8.2071C6.51182 7.42605 6.51182 6.15972 7.29287 5.37867L9.1213 3.55024C9.90235 2.76919 11.1687 2.76919 11.9497 3.55024C12.7308 4.33129 12.7308 5.59762 11.9497 6.37867L11.1571 7.17128C11.2693 7.5914 11.312 8.02623 11.2851 8.45754L12.6568 7.08577C13.8284 5.9142 13.8284 4.01471 12.6568 2.84313C11.4853 1.67156 9.58576 1.67156 8.41419 2.84313L6.58576 4.67156Z"
-                                        fill="black" />
-                                </svg>
-                                <svg v-if="contentCopied" xmlns="http://www.w3.org/2000/svg"
-                                    class="icon icon-tabler icon-tabler-copy-check" width="32" height="32"
-                                    viewBox="0 0 24 24" stroke-width="1.5" stroke="#00b341" fill="none"
-                                    stroke-linecap="round" stroke-linejoin="round">
-                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                                    <path
-                                        d="M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z" />
-                                    <path
-                                        d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" />
-                                    <path d="M11 14l2 2l4 -4" />
-                                </svg>
-                            </div>
-                            <div
-                                style="color: rgba(0, 0, 0, 0.85); font-size: 20px; font-family: Red Hat Text; font-weight: 600; word-wrap: break-word">
-                                Copy
-                            </div>
-                        </div>
-                    </div>
+  <ModalBase>
+    <template #normalDisplay>
+      <BtnAction
+        class="hidden md:block w-max"
+        :cta="props.cta"
+        :label="props.label"
+        :aria-label="props.ariaLabel"
+        fontSize="sm"
+        leftIcon="bi:box-arrow-up"
+        iconSize="1.25em"
+      />
+    </template>
+    <template #modalDisplay>
+      <DialogTitle class="font-display flex justify-between">
+        <p class="text-3xl md:responsive-h2 font-bold">
+          {{ $t("components.modal-share.header") }}
+        </p>
+      </DialogTitle>
+      <div
+        class="flex flex-col items-center md:grid md:grid-cols-2 md:grid-rows-1 pb-6 space-y-6 lg:grid-cols-3 lg:grid-rows-1 lg:pb-0 lg:space-y-0 lg:space-x-6 lg:mr-14 lg:pr-8"
+      >
+        <div
+          class="items-center space-y-4 text-left col-span-2 pt-2 font-medium"
+        >
+          <div class="flex space-x-2 lg:space-x-3">
+            <s-telegram
+              @popup-close="onClose"
+              @popup-open="onOpen"
+              @popup-block="onBlock"
+              @popup-focus="onFocus"
+              :window-features="windowFeatures"
+              :share-options="shareOptions"
+              :use-native-behavior="useNativeBehavior"
+              :native-behavior-options="nativeBehaviorOptions"
+            >
+              <SocialMediaShareIcon
+                icon-path="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8.28672 5.90599C7.50861 6.22963 5.95346 6.8995 3.6213 7.91558C3.2426 8.06618 3.04421 8.21351 3.02615 8.35757C2.99563 8.60103 3.30052 8.6969 3.71569 8.82745C3.77216 8.8452 3.83068 8.8636 3.89067 8.8831C4.29913 9.01588 4.84859 9.17121 5.13423 9.17738C5.39334 9.18298 5.68253 9.07616 6.0018 8.85692C8.18081 7.38603 9.30563 6.64258 9.37625 6.62655C9.42607 6.61524 9.49511 6.60102 9.54188 6.6426C9.58866 6.68418 9.58406 6.76291 9.57911 6.78404C9.5489 6.9128 8.35212 8.02543 7.73279 8.60121C7.53971 8.78071 7.40276 8.90804 7.37476 8.93712C7.31204 9.00226 7.24812 9.06388 7.18669 9.1231C6.80722 9.48891 6.52265 9.76324 7.20245 10.2112C7.52913 10.4265 7.79055 10.6045 8.05134 10.7821C8.33616 10.9761 8.62023 11.1695 8.98778 11.4105C9.08142 11.4718 9.17086 11.5356 9.25796 11.5977C9.58942 11.834 9.88721 12.0463 10.2551 12.0124C10.4689 11.9928 10.6897 11.7918 10.8018 11.1923C11.0668 9.77545 11.5878 6.70567 11.7082 5.44069C11.7187 5.32986 11.7055 5.18802 11.6948 5.12576C11.6842 5.06349 11.6619 4.97478 11.581 4.90911C11.4851 4.83133 11.3371 4.81493 11.2709 4.8161C10.9701 4.8214 10.5084 4.98192 8.28672 5.90599Z"
+                fill-color="black"
+                text="Telegram"
+                textStyle="
+                  color: rgba(0, 0, 0, 0.85);
+                  font-size: 20px;
+                  font-family: Red Hat Text;
+                  font-weight: 600;
+                  word-wrap: break-word;
+                "
+              />
+            </s-telegram>
+            <s-twitter
+              @popup-close="onClose"
+              @popup-open="onOpen"
+              @popup-block="onBlock"
+              @popup-focus="onFocus"
+              :window-features="windowFeatures"
+              :share-options="shareOptions"
+              :use-native-behavior="useNativeBehavior"
+            >
+              <SocialMediaShareIcon
+                icon-path="M5.02601 15C11.0636 15 14.3673 9.99705 14.3673 5.66585C14.3673 5.5251 14.3673 5.38435 14.3609 5.2436C15.0012 4.78297 15.5582 4.20079 16 3.54183C15.411 3.80413 14.7771 3.97687 14.1112 4.06004C14.7899 3.65699 15.3085 3.01083 15.5582 2.24311C14.9244 2.62057 14.2201 2.88927 13.471 3.03642C12.8691 2.39665 12.0176 2 11.0764 2C9.26451 2 7.79192 3.47146 7.79192 5.28199C7.79192 5.53789 7.82393 5.7874 7.87515 6.03051C5.14766 5.89616 2.72749 4.58465 1.10764 2.60138C0.825931 3.0876 0.665866 3.65059 0.665866 4.25197C0.665866 5.39075 1.2485 6.39518 2.12565 6.98376C1.58784 6.96457 1.08203 6.81742 0.640256 6.57431C0.640256 6.58711 0.640256 6.5999 0.640256 6.61909C0.640256 8.20571 1.77351 9.53642 3.27171 9.83711C2.9964 9.91388 2.70828 9.95226 2.40736 9.95226C2.19608 9.95226 1.9912 9.93307 1.79272 9.89469C2.20888 11.1998 3.42537 12.1467 4.85954 12.1722C3.73269 13.0551 2.31773 13.5797 0.781113 13.5797C0.518608 13.5797 0.256102 13.5669 0 13.5349C1.44698 14.4562 3.17567 15 5.02601 15Z"
+                fill-color=" black"
+                text="@activist_org"
+                textStyle="
+                  color: rgba(0, 0, 0, 0.85);
+                  font-size: 20px;
+                  font-family: Red Hat Text;
+                  font-weight: 600;
+                  word-wrap: break-word;
+                "
+              />
+            </s-twitter>
+            <s-email :share-options="shareOptions">
+              <SocialMediaShareIcon
+                icon-path="M0 4C0 2.89543 0.895431 2 2 2H14C15.1046 2 16 2.89543 16 4V12C16 13.1046 15.1046 14 14 14H2C0.895431 14 0 13.1046 0 12V4ZM2 3C1.44772 3 1 3.44772 1 4V4.2169L8 8.4169L15 4.2169V4C15 3.44772 14.5523 3 14 3H2ZM15 5.3831L10.2919 8.20794L15 11.1052V5.3831ZM14.9662 12.2586L9.32583 8.7876L8 9.5831L6.67417 8.7876L1.03376 12.2586C1.14774 12.6855 1.53715 13 2 13H14C14.4628 13 14.8523 12.6855 14.9662 12.2586ZM1 11.1052L5.70808 8.20794L1 5.3831V11.1052Z"
+                fill-color=" black"
+                text="Email"
+                textStyle="
+                  color: rgba(0, 0, 0, 0.85);
+                  font-size: 20px;
+                  font-family: Red Hat Text;
+                  font-weight: 600;
+                  word-wrap: break-word;
+                "
+              />
+            </s-email>
+            <ModalBase>
+              <template #normalDisplay>
+                <div
+                  style="
+                    width: 100%;
+                    height: 100%;
+                    justify-content: flex-start;
+                    align-items: center;
+                    gap: 12px;
+                    display: inline-flex;
+                  "
+                >
+                  <div style="width: 28px; height: 28px; position: relative">
+                    <Icon
+                      name="bi:qr-code-scan"
+                      size="2em"
+                      :alt="$t('components.modal-qr-code.img-alt-text')"
+                    />
+                  </div>
+                  <div class="flex space-x-2 lg:space-x-3">View QR code</div>
                 </div>
+              </template>
+              <template #modalDisplay>
+                <ModalQRCode
+                  v-if="props.organization"
+                  :entityName="props?.organization?.name"
+                />
+                <ModalQRCode
+                  v-if="props.event"
+                  :entityName="props?.event?.name"
+                />
+              </template>
+            </ModalBase>
+          </div>
+          <div class="flex space-x-2 lg:space-x-3">
+            <s-mastodon
+              @popup-close="onClose"
+              @popup-open="onOpen"
+              @popup-block="onBlock"
+              @popup-focus="onFocus"
+              :window-features="windowFeatures"
+              :share-options="shareOptions"
+              :use-native-behavior="useNativeBehavior"
+            >
+              <SocialMediaShareIcon
+                icon-path="M11.1909 12.1951C13.2058 11.9557 14.9602 10.7205 15.1807 9.59184C15.5281 7.81389 15.4994 5.25305 15.4994 5.25305C15.4994 1.78217 13.2139 0.764795 13.2139 0.764795C12.0615 0.23818 10.0826 0.0167234 8.02678 0H7.97627C5.92041 0.0167234 3.94286 0.23818 2.79039 0.764795C2.79039 0.764795 0.504754 1.78217 0.504754 5.25305C0.504754 5.46347 0.503661 5.68479 0.502523 5.91519C0.499363 6.55506 0.495857 7.26496 0.514458 8.00596C0.597458 11.4003 1.13991 14.7456 4.2941 15.5762C5.74843 15.9592 6.99707 16.0394 8.0027 15.9844C9.82637 15.8838 10.8501 15.3369 10.8501 15.3369L10.79 14.0204C10.79 14.0204 9.48674 14.4292 8.02314 14.3794C6.57306 14.3299 5.04223 14.2238 4.8077 12.4524C4.78604 12.2968 4.77521 12.1304 4.77521 11.9557C4.77521 11.9557 6.19869 12.3019 8.0027 12.3841C9.10579 12.4345 10.1403 12.3198 11.
+                        1909 12.1951ZM12.8034 9.72502H11.13V5.64588C11.13 4.786 10.7664 4.34955 10.039 4.34955C9.23486 4.34955 8.83182 4.86729 8.83182 5.89104V8.12379H7.16825V5.89104C7.16825 4.86729 6.76512 4.34955 5.96093 4.34955C5.2336 4.34955 4.86997 4.786 4.86997 5.64588V9.72502H3.19653V5.52235C3.19653 4.66342 3.41634 3.98086 3.85785 3.47588C4.31314 2.9709 4.90939 2.71204 5.64955 2.71204C6.5059 2.71204 7.15439 3.03952 7.58317 3.69458L7.99999 4.38981L8.4169 3.69458C8.84559 3.03952 9.49409 2.71204 10.3505 2.71204C11.0906 2.71204 11.6868 2.9709 12.1422 3.47588C12.5836 3.98086 12.8034 4.66342 12.8034 5.52235V9.72502Z"
+                fill-color="black"
+                text="Mastodon"
+                textStyle="
+                  color: rgba(0, 0, 0, 0.85);
+                  font-size: 20px;
+                  font-family: Red Hat Text;
+                  font-weight: 600;
+                  word-wrap: break-word;
+                "
+              />
+            </s-mastodon>
+            <!-- <s-facebook-messenger -->
+              <!-- @popup-close="onClose" -->
+              <!-- @popup-open="onOpen" -->
+              <!-- @popup-block="onBlock" -->
+              <!-- @popup-focus="onFocus" -->
+              <!-- :window-features="windowFeatures" -->
+              <!-- :share-options="shareOptions" -->
+              <!-- :use-native-behavior="useNativeBehavior" -->
+            <!-- > -->
+              <!-- <SocialMediaShareIcon -->
+                <!-- icon-path="M0 7.76C0 3.30112 3.49336 0 8 0C12.5066 0 16 3.30112 16 7.76C16 12.2189 12.5066 15.52 8 15.52C7.19053 15.52 6.41392 15.4131 5.68424 15.2125C5.5424 15.1734 5.39157 15.1845 5.25696 15.2438L3.66907 15.9448C3.25371 16.1282 2.78485 15.8328 2.77093 15.3789L2.72736 13.9558C2.722 13.7805 2.64312 13.6166 2.51245 13.4997C0.95584 12.1076 0 10.0923 0 7.76ZM5.54604 6.3011L3.19604 10.0294C2.97052 10.3872 3.41033 10.7904 3.74724 10.5348L6.27153 8.61899C6.44228 8.48939 6.67825 8.4887 6.84972 8.61731L8.71884 10.0192C9.27969 10.4398 10.0802 10.2921 10.454 9.69902L12.804 5.97067C13.0295 5.61286 12.5897 5.20966 12.2528 5.46534L9.72849 7.3811C9.55772 7.5107 9.32177 7.51139 9.15028 7.38275L7.28121 5.98094C6.72033 5.5603 5.91985 5.70798 5.54604 6.3011Z" -->
+                <!-- fill-color="black" -->
+                <!-- text="Messenger" -->
+                <!-- style=" -->
+                  <!-- /* color: rgba(0, 0, 0, 0.85); */ -->
+                  <!-- /* font-size: 20px; */ -->
+                  <!-- /* font-family: Red Hat Text; */ -->
+                  <!-- /* font-weight: 600; */ -->
+                  <!-- /* word-wrap: break-word; */ -->
+                <!-- /* " */ -->
+              <!-- /> -->
+            <!-- </s-facebook-messenger> -->
+            <!-- <s-facebook -->
+              <!-- @popup-close="onClose" -->
+              <!-- @popup-open="onOpen" -->
+              <!-- @popup-block="onBlock" -->
+              <!-- @popup-focus="onFocus" -->
+              <!-- :href="getCurrentUrl()" -->
+              <!-- :window-features="windowFeatures" -->
+              <!-- :share-options="shareOptions" -->
+              <!-- :use-native-behavior="useNativeBehavior" -->
+              <!-- :native-behavior-options="nativeBehaviorOptions" -->
+            <!-- > -->
+              <!-- <SocialMediaShareIcon -->
+                <!-- icon-path="M16 8.0486C16 3.60314 12.418 -0.000610352 7.99949 -0.000610352C3.58095 -0.000610352 -0.000976562 3.60314 -0.000976562 8.0486C-0.000976562 12.0662 2.92468 15.3962 6.74942 16V10.3753H4.71805V8.0486H6.74942V6.27526C6.74942 4.25792 7.94383 3.14361 9.77132 3.14361C10.6466 3.14361 11.5622 3.30082 11.5622 3.30082V5.28168H10.5534C9.55951 5.28168 9.24957 5.90215 9.24957 6.53869V8.0486H11.4684L11.1137 10.3753H9.24957V16C13.0743 15.3962 16 12.0662 16 8.0486Z" -->
+                <!-- fill-color=" black" -->
+                <!-- text="Facebook" -->
+                <!-- style=" -->
+                  <!-- /* color: rgba(0, 0, 0, 0.85); */ -->
+                  <!-- /* font-size: 20px; */ -->
+                  <!-- /* font-family: Red Hat Text; */ -->
+                  <!-- /* font-weight: 600; */ -->
+                  <!-- /* word-wrap: break-word; */ -->
+                <!-- /* " */ -->
+              <!-- /> -->
+            <!-- </s-facebook> -->
+            <div
+              @click="
+                copyToClipboard(
+                  props?.event?.name
+                    ? props?.event?.name
+                    : props?.organization?.name
+                      ? props?.organization?.name
+                      : '',
+                  getCurrentUrl()
+                )
+              "
+              class="cursor-pointer"
+              style="
+                width: 100%;
+                height: 100%;
+                justify-content: flex-start;
+                align-items: center;
+                gap: 12px;
+                display: inline-flex;
+              "
+            >
+              <div style="width: 28px; height: 28px; position: relative">
+                <svg
+                  v-if="!contentCopied"
+                  width="32"
+                  height="32"
+                  viewBox="0 0 16 16"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M4.71488 6.54244L3.34312 7.9142C2.17155 9.08577 2.17155 10.9853 3.34312 12.1568C4.51469 13.3284 6.41419 13.3284 7.58576 12.1568L9.41419 10.3284C10.5858 9.15684 10.5858 7.25735 9.41419 6.08577C9.16625 5.83784 8.88572 5.64237 8.58638 5.49938L7.99998 6.08578C7.939 6.14675 7.88754 6.21365 7.8456 6.28461C8.16104 6.37499 8.45862 6.54442 8.70708 6.79288C9.48813 7.57393 9.48813 8.84026 8.70708 9.62131L6.87866 11.4497C6.09761 12.2308 4.83128 12.2308 4.05023 11.4497C3.26918 10.6687 3.26918 9.40236 4.05023 8.62131L4.84283 7.8287C4.73064 7.40858 4.68799 6.97375 4.71488 6.54244Z"
+                    fill="black"
+                  />
+                  <path
+                    d="M6.58576 4.67156C5.41419 5.84313 5.41419 7.74263 6.58576 8.9142C6.8337 9.16214 7.11424 9.3576 7.41358 9.5006L8.18917 8.72501C7.86083 8.63732 7.55046 8.46468 7.29287 8.2071C6.51182 7.42605 6.51182 6.15972 7.29287 5.37867L9.1213 3.55024C9.90235 2.76919 11.1687 2.76919 11.9497 3.55024C12.7308 4.33129 12.7308 5.59762 11.9497 6.37867L11.1571 7.17128C11.2693 7.5914 11.312 8.02623 11.2851 8.45754L12.6568 7.08577C13.8284 5.9142 13.8284 4.01471 12.6568 2.84313C11.4853 1.67156 9.58576 1.67156 8.41419 2.84313L6.58576 4.67156Z"
+                    fill="black"
+                  />
+                </svg>
+                <svg
+                  v-if="contentCopied"
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="icon icon-tabler icon-tabler-copy-check"
+                  width="32"
+                  height="32"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="#00b341"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                  <path
+                    d="M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z"
+                  />
+                  <path
+                    d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1"
+                  />
+                  <path d="M11 14l2 2l4 -4" />
+                </svg>
+              </div>
+              <div
+                style="
+                  color: rgba(0, 0, 0, 0.85);
+                  font-size: 16px;
+                  font-family: Red Hat Text;
+                  font-weight: 600;
+                  word-wrap: break-word;
+                "
+              >
+                Copy
+              </div>
             </div>
-        </template>
-    </ModalBase>
+          </div>
+        </div>
+      </div>
+    </template>
+  </ModalBase>
 </template>
 
 <script setup lang="ts">
 import type { BtnAction } from "~/types/btn-props";
 import ModalBase from "~/components/modal/ModalBase.vue";
-import { STelegram, STwitter, SEmail, SMastodon, SFacebookMessenger, SFacebook, SSms } from 'vue-socials';
+import {
+  STelegram,
+  STwitter,
+  SEmail,
+  SMastodon,
+  //   SFacebookMessenger,
+  //   SFacebook,
+  //   SSms,
+} from "vue-socials";
 import type { Event } from "~/types/event";
 import type { Organization } from "~/types/organization";
 import SocialMediaShareIcon from "@/components/SocialMediaShareIcon.vue";
 
 const props = defineProps<{
-    cta: BtnAction["cta"];
-    label: BtnAction["label"];
-    ariaLabel: BtnAction["ariaLabel"];
-    event?: Event;
-    organization?: Organization;
-    // group?: Group; // add group when we have it
+  cta: BtnAction["cta"];
+  label: BtnAction["label"];
+  ariaLabel: BtnAction["ariaLabel"];
+  event?: Event;
+  organization?: Organization;
+  // group?: Group; // add group when we have it
 }>();
 
 const getEntityType = () => {
-    if (props.event) {
-        return setEntityInfo(props.event);
-    } else if (props.organization) {
-        return setEntityInfo(props.organization);
-    }
+  if (props.event) {
+    return setEntityInfo(props.event);
+  } else if (props.organization) {
+    return setEntityInfo(props.organization);
+  }
 };
 
-const setEntityInfo = (data: typeof props.event | typeof props.organization) => {
-    if (!data) return;
-    return {
-        subject: `Share ${data.name}!`,
-        body: `Check out ${data.name}!`,
-        url: getCurrentUrl(),
-        text: `Check out ${data.name}!`,
-    };
+const setEntityInfo = (
+  data: typeof props.event | typeof props.organization
+) => {
+  if (!data) return;
+  return {
+    subject: `Share ${data.name}!`,
+    body: `Check out ${data.name}!`,
+    url: getCurrentUrl(),
+    text: `Check out ${data.name}!`,
+  };
 };
 
-// function to grab the url to the base id of the event/org/group
+// Function to grab the url to the base id of the event/org/group.
 const getCurrentUrl = () => {
-    const url = window.location.href;
-    return url.substring(0, url.lastIndexOf("/"));
+  const url = window.location.href;
+  return url.substring(0, url.lastIndexOf("/"));
 };
 
 const shareOptions = {
-    url: getCurrentUrl() || "https://activist.org/en",
-    text: getEntityType()?.text || "Check this out!",
-    hashtags: ['activism', 'organizing'],
-    via: 'activist_org',
-    mail: '',
-    cc: [''],
-    bcc: [''],
-    subject: getEntityType()?.subject || "Share this!",
-    body: `${getEntityType()?.body}   ${getEntityType()?.url}` || "Check this out!",
-    redirectUri: 'https://www.domain.com/',
-    domain: 'https://mas.to',
-    // appId: 842766727626496, Facebook Messenger App ID
+  url: getCurrentUrl() || "https://activist.org/en",
+  text: getEntityType()?.text || "Check this out!",
+  hashtags: ["activism", "organizing"],
+  via: "activist_org",
+  mail: "",
+  cc: [""],
+  bcc: [""],
+  subject: getEntityType()?.subject || "Share this!",
+  body:
+    `${getEntityType()?.body}   ${getEntityType()?.url}` || "Check this out!",
+  redirectUri: "https://www.domain.com/",
+  domain: "https://mas.to",
+  // appId: 842766727626496, Facebook Messenger App ID
 };
 
 const useNativeBehavior = false;
@@ -179,23 +340,24 @@ const contentCopied = ref(false);
 
 // No specific actions should be taken on these events, but we can customize the behavior if needed
 const nativeBehaviorOptions = {
-    onClose: () => { },
-    onOpen: () => { },
-    onBlock: () => { },
-    onFocus: () => { },
+  onClose: () => {},
+  onOpen: () => {},
+  onBlock: () => {},
+  onFocus: () => {},
 };
 
 const windowFeatures = {};
 
 const copyToClipboard = async (name: string, url: string) => {
-    try {
-        await navigator.clipboard.writeText(`${name} ${url}`);
-        contentCopied.value = true;
-        setTimeout(() => { contentCopied.value = false }, 3000)
-    } catch (error) {
-        console.error(`Could not copy text: ${error}`);
-        contentCopied.value = false;
-    };
+  try {
+    await navigator.clipboard.writeText(`${name} ${url}`);
+    contentCopied.value = true;
+    setTimeout(() => {
+      contentCopied.value = false;
+    }, 3000);
+  } catch (error) {
+    console.error(`Could not copy text: ${error}`);
+    contentCopied.value = false;
+  }
 };
-
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/pages/events/[id]/about.vue b/frontend/pages/events/[id]/about.vue
index 265611a91..30b1b3529 100644
--- a/frontend/pages/events/[id]/about.vue
+++ b/frontend/pages/events/[id]/about.vue
@@ -82,13 +82,3 @@ const event: Event = {
 };
 
 </script>
-
-<!-- <script> -->
-//  export default {
-  //  methods: {
-    //  openShareModal() {
-      //  alert('Share Modal should open');
-    //  },
-  //  },
-//  };
-<!-- </script> -->

From 9b679143b057549ce134cc1273f058156b6d6404 Mon Sep 17 00:00:00 2001
From: Tessa <anderson.quintessa@gmail.com>
Date: Fri, 23 Feb 2024 19:23:01 -0600
Subject: [PATCH 11/15] re-format organization about page

---
 frontend/pages/organizations/[id]/about.vue | 52 ++++++++++++++++-----
 1 file changed, 40 insertions(+), 12 deletions(-)

diff --git a/frontend/pages/organizations/[id]/about.vue b/frontend/pages/organizations/[id]/about.vue
index aebcf9f20..acbbd19c4 100644
--- a/frontend/pages/organizations/[id]/about.vue
+++ b/frontend/pages/organizations/[id]/about.vue
@@ -1,31 +1,59 @@
 <template>
-  <div class="flex flex-col px-4 xl:px-8 text-light-text dark:text-dark-text bg-light-content dark:bg-dark-content">
-
+  <div
+    class="flex flex-col px-4 xl:px-8 text-light-text dark:text-dark-text bg-light-content dark:bg-dark-content"
+  >
     <Head>
       <Title>{{ organization.name }}</Title>
     </Head>
     <HeaderAppPage :organization="organization">
       <div class="flex space-x-2 lg:space-x-3">
-        <BtnAction class="w-max" :cta="true" label="components.btn-action.support" fontSize="sm" leftIcon="IconSupport"
-          iconSize="1.25em" :counter="organization.supporters" ariaLabel="
+        <BtnAction
+          class="w-max"
+          :cta="true"
+          label="components.btn-action.support"
+          fontSize="sm"
+          leftIcon="IconSupport"
+          iconSize="1.25em"
+          :counter="organization.supporters"
+          ariaLabel="
             components.btn-action.support-organization-aria-label
-          " />
-        <ModalSharePage :cta="true" label="components.btn-action.share-organization"
-          ariaLabel="components.btn-action.share-organization-aria-label" :organization="organization" />
+          "
+        />
+        <ModalSharePage
+          :cta="true"
+          label="components.btn-action.share-organization"
+          ariaLabel="components.btn-action.share-organization-aria-label"
+          :organization="organization"
+        />
       </div>
     </HeaderAppPage>
     <div class="pt-3 pb-6 space-y-6 lg:pt-4">
       <div
-        class="pb-6 grid grid-cols-1 grid-rows-2 space-y-6 lg:grid-cols-3 lg:grid-rows-1 lg:pb-0 lg:space-y-0 lg:space-x-6 lg:mr-6">
-        <CardAbout class="lg:col-span-2" aboutType="organization" :organization="organization" />
+        class="pb-6 grid grid-cols-1 grid-rows-2 space-y-6 lg:grid-cols-3 lg:grid-rows-1 lg:pb-0 lg:space-y-0 lg:space-x-6 lg:mr-6"
+      >
+        <CardAbout
+          class="lg:col-span-2"
+          aboutType="organization"
+          :organization="organization"
+        />
         <div class="w-full h-full">
           <MediaImageCarousel />
         </div>
       </div>
-      <CardOrgApplicationVote v-if="organization.status === 'pending'" @up-vote="upVotes++" @down-vote="downVotes++"
-        title="Votes in favor" :organizations="organizationsInFavor" :up-votes="upVotes" :down-votes="downVotes" />
+      <CardOrgApplicationVote
+        v-if="organization.status === 'pending'"
+        @up-vote="upVotes++"
+        @down-vote="downVotes++"
+        title="Votes in favor"
+        :organizations="organizationsInFavor"
+        :up-votes="upVotes"
+        :down-votes="downVotes"
+      />
       <CardGetInvolved :organization="organization" />
-      <CardConnect :social-links="organization.socialLinks" :userIsAdmin="true" />
+      <CardConnect
+        :social-links="organization.socialLinks"
+        :userIsAdmin="true"
+      />
       <!-- <CardDonate
         :userIsAdmin="true"
         :donationPrompt="organization.donationPrompt"

From 5e4f504b1c71d66ddc5f6e71bc9c1a3a84ecab4b Mon Sep 17 00:00:00 2001
From: Tessa <anderson.quintessa@gmail.com>
Date: Sat, 24 Feb 2024 09:21:48 -0600
Subject: [PATCH 12/15] fix icon path for mastodon

---
 frontend/components/modal/ModalSharePage.vue | 83 ++++++++++----------
 1 file changed, 41 insertions(+), 42 deletions(-)

diff --git a/frontend/components/modal/ModalSharePage.vue b/frontend/components/modal/ModalSharePage.vue
index 4e3b02272..7adbc4f30 100644
--- a/frontend/components/modal/ModalSharePage.vue
+++ b/frontend/components/modal/ModalSharePage.vue
@@ -128,8 +128,7 @@
               :use-native-behavior="useNativeBehavior"
             >
               <SocialMediaShareIcon
-                icon-path="M11.1909 12.1951C13.2058 11.9557 14.9602 10.7205 15.1807 9.59184C15.5281 7.81389 15.4994 5.25305 15.4994 5.25305C15.4994 1.78217 13.2139 0.764795 13.2139 0.764795C12.0615 0.23818 10.0826 0.0167234 8.02678 0H7.97627C5.92041 0.0167234 3.94286 0.23818 2.79039 0.764795C2.79039 0.764795 0.504754 1.78217 0.504754 5.25305C0.504754 5.46347 0.503661 5.68479 0.502523 5.91519C0.499363 6.55506 0.495857 7.26496 0.514458 8.00596C0.597458 11.4003 1.13991 14.7456 4.2941 15.5762C5.74843 15.9592 6.99707 16.0394 8.0027 15.9844C9.82637 15.8838 10.8501 15.3369 10.8501 15.3369L10.79 14.0204C10.79 14.0204 9.48674 14.4292 8.02314 14.3794C6.57306 14.3299 5.04223 14.2238 4.8077 12.4524C4.78604 12.2968 4.77521 12.1304 4.77521 11.9557C4.77521 11.9557 6.19869 12.3019 8.0027 12.3841C9.10579 12.4345 10.1403 12.3198 11.
-                        1909 12.1951ZM12.8034 9.72502H11.13V5.64588C11.13 4.786 10.7664 4.34955 10.039 4.34955C9.23486 4.34955 8.83182 4.86729 8.83182 5.89104V8.12379H7.16825V5.89104C7.16825 4.86729 6.76512 4.34955 5.96093 4.34955C5.2336 4.34955 4.86997 4.786 4.86997 5.64588V9.72502H3.19653V5.52235C3.19653 4.66342 3.41634 3.98086 3.85785 3.47588C4.31314 2.9709 4.90939 2.71204 5.64955 2.71204C6.5059 2.71204 7.15439 3.03952 7.58317 3.69458L7.99999 4.38981L8.4169 3.69458C8.84559 3.03952 9.49409 2.71204 10.3505 2.71204C11.0906 2.71204 11.6868 2.9709 12.1422 3.47588C12.5836 3.98086 12.8034 4.66342 12.8034 5.52235V9.72502Z"
+                icon-path="M11.1909 12.1951C13.2058 11.9557 14.9602 10.7205 15.1807 9.59184C15.5281 7.81389 15.4994 5.25305 15.4994 5.25305C15.4994 1.78217 13.2139 0.764795 13.2139 0.764795C12.0615 0.23818 10.0826 0.0167234 8.02678 0H7.97627C5.92041 0.0167234 3.94286 0.23818 2.79039 0.764795C2.79039 0.764795 0.504754 1.78217 0.504754 5.25305C0.504754 5.46347 0.503661 5.68479 0.502523 5.91519C0.499363 6.55506 0.495857 7.26496 0.514458 8.00596C0.597458 11.4003 1.13991 14.7456 4.2941 15.5762C5.74843 15.9592 6.99707 16.0394 8.0027 15.9844C9.82637 15.8838 10.8501 15.3369 10.8501 15.3369L10.79 14.0204C10.79 14.0204 9.48674 14.4292 8.02314 14.3794C6.57306 14.3299 5.04223 14.2238 4.8077 12.4524C4.78604 12.2968 4.77521 12.1304 4.77521 11.9557C4.77521 11.9557 6.19869 12.3019 8.0027 12.3841C9.10579 12.4345 10.1403 12.3198 11.1909 12.1951ZM12.8034 9.72502H11.13V5.64588C11.13 4.786 10.7664 4.34955 10.039 4.34955C9.23486 4.34955 8.83182 4.86729 8.83182 5.89104V8.12379H7.16825V5.89104C7.16825 4.86729 6.76512 4.34955 5.96093 4.34955C5.2336 4.34955 4.86997 4.786 4.86997 5.64588V9.72502H3.19653V5.52235C3.19653 4.66342 3.41634 3.98086 3.85785 3.47588C4.31314 2.9709 4.90939 2.71204 5.64955 2.71204C6.5059 2.71204 7.15439 3.03952 7.58317 3.69458L7.99999 4.38981L8.4169 3.69458C8.84559 3.03952 9.49409 2.71204 10.3505 2.71204C11.0906 2.71204 11.6868 2.9709 12.1422 3.47588C12.5836 3.98086 12.8034 4.66342 12.8034 5.52235V9.72502Z"
                 fill-color="black"
                 text="Mastodon"
                 textStyle="
@@ -142,50 +141,50 @@
               />
             </s-mastodon>
             <!-- <s-facebook-messenger -->
-              <!-- @popup-close="onClose" -->
-              <!-- @popup-open="onOpen" -->
-              <!-- @popup-block="onBlock" -->
-              <!-- @popup-focus="onFocus" -->
-              <!-- :window-features="windowFeatures" -->
-              <!-- :share-options="shareOptions" -->
-              <!-- :use-native-behavior="useNativeBehavior" -->
+            <!-- @popup-close="onClose" -->
+            <!-- @popup-open="onOpen" -->
+            <!-- @popup-block="onBlock" -->
+            <!-- @popup-focus="onFocus" -->
+            <!-- :window-features="windowFeatures" -->
+            <!-- :share-options="shareOptions" -->
+            <!-- :use-native-behavior="useNativeBehavior" -->
             <!-- > -->
-              <!-- <SocialMediaShareIcon -->
-                <!-- icon-path="M0 7.76C0 3.30112 3.49336 0 8 0C12.5066 0 16 3.30112 16 7.76C16 12.2189 12.5066 15.52 8 15.52C7.19053 15.52 6.41392 15.4131 5.68424 15.2125C5.5424 15.1734 5.39157 15.1845 5.25696 15.2438L3.66907 15.9448C3.25371 16.1282 2.78485 15.8328 2.77093 15.3789L2.72736 13.9558C2.722 13.7805 2.64312 13.6166 2.51245 13.4997C0.95584 12.1076 0 10.0923 0 7.76ZM5.54604 6.3011L3.19604 10.0294C2.97052 10.3872 3.41033 10.7904 3.74724 10.5348L6.27153 8.61899C6.44228 8.48939 6.67825 8.4887 6.84972 8.61731L8.71884 10.0192C9.27969 10.4398 10.0802 10.2921 10.454 9.69902L12.804 5.97067C13.0295 5.61286 12.5897 5.20966 12.2528 5.46534L9.72849 7.3811C9.55772 7.5107 9.32177 7.51139 9.15028 7.38275L7.28121 5.98094C6.72033 5.5603 5.91985 5.70798 5.54604 6.3011Z" -->
-                <!-- fill-color="black" -->
-                <!-- text="Messenger" -->
-                <!-- style=" -->
-                  <!-- /* color: rgba(0, 0, 0, 0.85); */ -->
-                  <!-- /* font-size: 20px; */ -->
-                  <!-- /* font-family: Red Hat Text; */ -->
-                  <!-- /* font-weight: 600; */ -->
-                  <!-- /* word-wrap: break-word; */ -->
-                <!-- /* " */ -->
-              <!-- /> -->
+            <!-- <SocialMediaShareIcon -->
+            <!-- icon-path="M0 7.76C0 3.30112 3.49336 0 8 0C12.5066 0 16 3.30112 16 7.76C16 12.2189 12.5066 15.52 8 15.52C7.19053 15.52 6.41392 15.4131 5.68424 15.2125C5.5424 15.1734 5.39157 15.1845 5.25696 15.2438L3.66907 15.9448C3.25371 16.1282 2.78485 15.8328 2.77093 15.3789L2.72736 13.9558C2.722 13.7805 2.64312 13.6166 2.51245 13.4997C0.95584 12.1076 0 10.0923 0 7.76ZM5.54604 6.3011L3.19604 10.0294C2.97052 10.3872 3.41033 10.7904 3.74724 10.5348L6.27153 8.61899C6.44228 8.48939 6.67825 8.4887 6.84972 8.61731L8.71884 10.0192C9.27969 10.4398 10.0802 10.2921 10.454 9.69902L12.804 5.97067C13.0295 5.61286 12.5897 5.20966 12.2528 5.46534L9.72849 7.3811C9.55772 7.5107 9.32177 7.51139 9.15028 7.38275L7.28121 5.98094C6.72033 5.5603 5.91985 5.70798 5.54604 6.3011Z" -->
+            <!-- fill-color="black" -->
+            <!-- text="Messenger" -->
+            <!-- style=" -->
+            <!-- /* color: rgba(0, 0, 0, 0.85); */ -->
+            <!-- /* font-size: 20px; */ -->
+            <!-- /* font-family: Red Hat Text; */ -->
+            <!-- /* font-weight: 600; */ -->
+            <!-- /* word-wrap: break-word; */ -->
+            <!-- /* " */ -->
+            <!-- /> -->
             <!-- </s-facebook-messenger> -->
             <!-- <s-facebook -->
-              <!-- @popup-close="onClose" -->
-              <!-- @popup-open="onOpen" -->
-              <!-- @popup-block="onBlock" -->
-              <!-- @popup-focus="onFocus" -->
-              <!-- :href="getCurrentUrl()" -->
-              <!-- :window-features="windowFeatures" -->
-              <!-- :share-options="shareOptions" -->
-              <!-- :use-native-behavior="useNativeBehavior" -->
-              <!-- :native-behavior-options="nativeBehaviorOptions" -->
+            <!-- @popup-close="onClose" -->
+            <!-- @popup-open="onOpen" -->
+            <!-- @popup-block="onBlock" -->
+            <!-- @popup-focus="onFocus" -->
+            <!-- :href="getCurrentUrl()" -->
+            <!-- :window-features="windowFeatures" -->
+            <!-- :share-options="shareOptions" -->
+            <!-- :use-native-behavior="useNativeBehavior" -->
+            <!-- :native-behavior-options="nativeBehaviorOptions" -->
             <!-- > -->
-              <!-- <SocialMediaShareIcon -->
-                <!-- icon-path="M16 8.0486C16 3.60314 12.418 -0.000610352 7.99949 -0.000610352C3.58095 -0.000610352 -0.000976562 3.60314 -0.000976562 8.0486C-0.000976562 12.0662 2.92468 15.3962 6.74942 16V10.3753H4.71805V8.0486H6.74942V6.27526C6.74942 4.25792 7.94383 3.14361 9.77132 3.14361C10.6466 3.14361 11.5622 3.30082 11.5622 3.30082V5.28168H10.5534C9.55951 5.28168 9.24957 5.90215 9.24957 6.53869V8.0486H11.4684L11.1137 10.3753H9.24957V16C13.0743 15.3962 16 12.0662 16 8.0486Z" -->
-                <!-- fill-color=" black" -->
-                <!-- text="Facebook" -->
-                <!-- style=" -->
-                  <!-- /* color: rgba(0, 0, 0, 0.85); */ -->
-                  <!-- /* font-size: 20px; */ -->
-                  <!-- /* font-family: Red Hat Text; */ -->
-                  <!-- /* font-weight: 600; */ -->
-                  <!-- /* word-wrap: break-word; */ -->
-                <!-- /* " */ -->
-              <!-- /> -->
+            <!-- <SocialMediaShareIcon -->
+            <!-- icon-path="M16 8.0486C16 3.60314 12.418 -0.000610352 7.99949 -0.000610352C3.58095 -0.000610352 -0.000976562 3.60314 -0.000976562 8.0486C-0.000976562 12.0662 2.92468 15.3962 6.74942 16V10.3753H4.71805V8.0486H6.74942V6.27526C6.74942 4.25792 7.94383 3.14361 9.77132 3.14361C10.6466 3.14361 11.5622 3.30082 11.5622 3.30082V5.28168H10.5534C9.55951 5.28168 9.24957 5.90215 9.24957 6.53869V8.0486H11.4684L11.1137 10.3753H9.24957V16C13.0743 15.3962 16 12.0662 16 8.0486Z" -->
+            <!-- fill-color=" black" -->
+            <!-- text="Facebook" -->
+            <!-- style=" -->
+            <!-- /* color: rgba(0, 0, 0, 0.85); */ -->
+            <!-- /* font-size: 20px; */ -->
+            <!-- /* font-family: Red Hat Text; */ -->
+            <!-- /* font-weight: 600; */ -->
+            <!-- /* word-wrap: break-word; */ -->
+            <!-- /* " */ -->
+            <!-- /> -->
             <!-- </s-facebook> -->
             <div
               @click="

From 7e0e55e4d06eb5f05e224d3ee833b223dfb564ca Mon Sep 17 00:00:00 2001
From: Tessa <anderson.quintessa@gmail.com>
Date: Sat, 24 Feb 2024 11:16:39 -0600
Subject: [PATCH 13/15] fix formatting

---
 frontend/components/SocialMediaShareIcon.vue |   4 +-
 frontend/components/modal/ModalSharePage.vue |   4 +-
 frontend/i18n/check_repeat_i18n_values.py    |  14 +-
 frontend/i18n/check_unused_i18n_keys.py      |  17 ++-
 frontend/pages/events/[id]/about.vue         |   1 -
 frontend/utils/ModalSharePage.ts             | 128 -------------------
 6 files changed, 27 insertions(+), 141 deletions(-)
 delete mode 100644 frontend/utils/ModalSharePage.ts

diff --git a/frontend/components/SocialMediaShareIcon.vue b/frontend/components/SocialMediaShareIcon.vue
index e1214f61a..4564e1ea8 100644
--- a/frontend/components/SocialMediaShareIcon.vue
+++ b/frontend/components/SocialMediaShareIcon.vue
@@ -21,12 +21,12 @@
         <path :d="props.iconPath" />
       </svg>
     </div>
-    <div :textStyle="props.textStyle"> {{ props.text }}</div>
+    <div :textStyle="props.textStyle">{{ props.text }}</div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { defineProps } from 'vue';
+import { defineProps } from "vue";
 
 const iconStyle = {
   width: "28px",
diff --git a/frontend/components/modal/ModalSharePage.vue b/frontend/components/modal/ModalSharePage.vue
index 7adbc4f30..394193cc7 100644
--- a/frontend/components/modal/ModalSharePage.vue
+++ b/frontend/components/modal/ModalSharePage.vue
@@ -192,8 +192,8 @@
                   props?.event?.name
                     ? props?.event?.name
                     : props?.organization?.name
-                      ? props?.organization?.name
-                      : '',
+                    ? props?.organization?.name
+                    : '',
                   getCurrentUrl()
                 )
               "
diff --git a/frontend/i18n/check_repeat_i18n_values.py b/frontend/i18n/check_repeat_i18n_values.py
index 810db69e8..db9d8d0d3 100644
--- a/frontend/i18n/check_repeat_i18n_values.py
+++ b/frontend/i18n/check_repeat_i18n_values.py
@@ -16,12 +16,13 @@
 with open(f"{this_directory}/en-US.json") as f:
     en_us_json_dict = json.loads(f.read())
 
+
 def lower_and_remove_punctuation(value):
     return value.lower().translate(str.maketrans("", "", string.punctuation))
 
+
 all_json_values = [
-    lower_and_remove_punctuation(value=v)
-    for v in list(en_us_json_dict.values())
+    lower_and_remove_punctuation(value=v) for v in list(en_us_json_dict.values())
 ]
 
 json_repeat_value_counts = {
@@ -33,7 +34,8 @@ def lower_and_remove_punctuation(value):
     i18n_keys = [
         k
         for k, v in en_us_json_dict.items()
-        if repeat_value == lower_and_remove_punctuation(value=v) and k[-len("_lower"):] != "_lower"
+        if repeat_value == lower_and_remove_punctuation(value=v)
+        and k[-len("_lower") :] != "_lower"
     ]
 
     # Needed as we're removing keys that are set to lowercase above.
@@ -55,7 +57,7 @@ def lower_and_remove_punctuation(value):
 
             common_character = False
 
-        if common_prefix := '.'.join(common_prefix.split('.')[:-1]):
+        if common_prefix := ".".join(common_prefix.split(".")[:-1]):
             print(f"Suggested new key: {common_prefix}._global.IDENTIFIER_KEY")
         else:
             print("Suggested new key: _global.IDENTIFIER_KEY")
@@ -75,7 +77,9 @@ def lower_and_remove_punctuation(value):
         value_to_be = "values are"
 
     print("")
-    raise ValueError(f"{len(json_repeat_value_counts)} repeat i18n {value_to_be} present. Please combine given the suggestions above.")
+    raise ValueError(
+        f"{len(json_repeat_value_counts)} repeat i18n {value_to_be} present. Please combine given the suggestions above."
+    )
 
 else:
     print("\nSuccess: no repeat i18n values found.")
diff --git a/frontend/i18n/check_unused_i18n_keys.py b/frontend/i18n/check_unused_i18n_keys.py
index 96dd2af13..f771a4efd 100644
--- a/frontend/i18n/check_unused_i18n_keys.py
+++ b/frontend/i18n/check_unused_i18n_keys.py
@@ -12,7 +12,11 @@
 
 this_directory = str(Path(__file__).parent.resolve())
 frontend_directory = "/".join(this_directory.split("/")[:-1])
-directories_to_skip = [this_directory, f"{frontend_directory}/.nuxt", f"{frontend_directory}/node_modules"]
+directories_to_skip = [
+    this_directory,
+    f"{frontend_directory}/.nuxt",
+    f"{frontend_directory}/node_modules",
+]
 file_types_to_check = [".vue", ".ts", ".js"]
 
 with open(f"{this_directory}/en-US.json") as f:
@@ -20,7 +24,12 @@
 
 files_to_check = []
 for root, dirs, files in os.walk(frontend_directory):
-    files_to_check.extend(os.path.join(root, file) for file in files if all(root[:len(d)] != d for d in directories_to_skip) and any(file[-len(t):] == t for t in file_types_to_check))
+    files_to_check.extend(
+        os.path.join(root, file)
+        for file in files
+        if all(root[: len(d)] != d for d in directories_to_skip)
+        and any(file[-len(t) :] == t for t in file_types_to_check)
+    )
 
 all_keys = list(en_us_json_dict.keys())
 used_keys = []
@@ -37,7 +46,9 @@
 if unused_keys := list(set(all_keys) - set(used_keys)):
     to_be = "are" if len(unused_keys) > 1 else "is"
     key_to_be = "keys that are" if len(unused_keys) > 1 else "key that is"
-    raise ValueError(f"There {to_be} {len(unused_keys)} i18n {key_to_be} unused. Please remove or assign the following keys:\n{', '.join(unused_keys)}")
+    raise ValueError(
+        f"There {to_be} {len(unused_keys)} i18n {key_to_be} unused. Please remove or assign the following keys:\n{', '.join(unused_keys)}"
+    )
 
 else:
     print("\nSuccess: all i18n keys are used in the project.")
diff --git a/frontend/pages/events/[id]/about.vue b/frontend/pages/events/[id]/about.vue
index 1e3fb007d..618ad4a9d 100644
--- a/frontend/pages/events/[id]/about.vue
+++ b/frontend/pages/events/[id]/about.vue
@@ -114,5 +114,4 @@ const event: Event = {
   imageURL: "/images/tech-from-below.svg",
   socialLinks: ["climate_org@mastodon", "climate_org@email.com"],
 };
-
 </script>
diff --git a/frontend/utils/ModalSharePage.ts b/frontend/utils/ModalSharePage.ts
deleted file mode 100644
index 63e0bcaa3..000000000
--- a/frontend/utils/ModalSharePage.ts
+++ /dev/null
@@ -1,128 +0,0 @@
-import { defineProps } from 'vue';
-import { STelegram, STwitter, SEmail, SMastodon, SFacebookMessenger } from 'vue-socials';
-
-import type { Event } from "~/types/event";
-import type { Organization } from "~/types/organization";
-
-export const entityProps = defineProps<{
-    organization?: Organization;
-    event?: Event;
-    // group?: Group; // add group when we have it
-}>();
-
-const contentCopied = ref(false);
-
-export const checkEntityType = () => {
-    if (entityProps.event) {
-        return setData(entityProps.event);
-    } else if (entityProps.organization) {
-        return setData(entityProps.organization);
-    }
-    // add group when we have it
-};
-
-// function to grab the url to the base id of the event/org/group
-const getCurrentUrl = () => {
-    const url = window.location.href;
-    return url.substring(0, url.lastIndexOf("/"));
-};
-
-const setData = (data: Event | Organization) => {
-    return {
-        subject: `Share ${data.name}!`,
-        body: `Check out ${data.name}!`,
-        url: getCurrentUrl(),
-        text: `Check out ${data.name}!`,
-    };
-};
-
-export const copyToClipboard = (name: string, url: string) => {
-    navigator.clipboard.writeText(`${name} ${url}`)
-    .then(() => {
-        console.log(`Copied text to clipboard: ${name} ${url}`);
-        contentCopied.value = true;
-        setTimeout(() => { contentCopied.value = false }, 5000)
-    })
-    .catch((error) => {
-        console.error(`Could not copy text: ${error}`);
-        contentCopied.value = false;
-    });
-};
-
-const socialShareData =  {
-  name: 'STelegramSharing',
-  components: { STelegram },
-//   <!-- name: 'STwitterSharing', -->
-//   <!-- components: { STwitter }, -->
-//   <!-- name: 'SEmailSharing', -->
-//   <!-- components: { SEmail }, -->
-//   <!-- name: 'SMastodonSharing', -->
-//   <!-- components: { SMastodon }, -->
-//   <!-- name: 'SFacebookMessengerSharing', -->
-//   <!-- components: { SFacebookMessenger }, -->
-  
-  data() {
-    return {
-        windowFeatures: {},
-        shareOptions: {
-        url: checkEntityType()?.url || "https://activist.org/en",
-        text: checkEntityType()?.text || "Check this out!",
-        hashtags: ['activism', 'organizing'],
-        via: 'activist_org',
-        mail: '',
-        cc: [''],
-        bcc: [''],
-        subject: checkEntityType()?.subject || "Share this!",
-        body: `${checkEntityType()?.body}   ${checkEntityType()?.url}` || "Check this out!",
-        redirectUri: 'https://www.domain.com/',
-        appId: 123456789,
-        to: undefined,
-        number: '+1(312)758-7765',
-    },  
-    useNativeBehavior: false,
-  }
-},
-  
-  methods: {
-    onClose() {},
-    onOpen() {},
-    onBlock() {},
-    onFocus() {},
-  }
-};
-
-export default entityProps;
-// <!-- <script> -->
-// <!-- // import { defineComponent } from "vue"; -->
-// <!-- //  -->
-// <!-- // export default defineComponent({ -->
-    // <!-- // components: { -->
-        // <!-- //  STelegram,  -->
-    // <!-- // }, -->
-    // <!-- // setup() { -->
-        // <!-- // return { -->
-            // <!-- // ...data(), -->
-            // <!-- // ...nativeBehaviorOptions, -->
-        // <!-- // }; -->
-    // <!-- // }, -->
-// <!-- // }); -->
-// <!-- </script> -->
-// <!-- <script> -->
-// <!-- export default { -->
-//   <!-- name: 'STelegramSharing', -->
-//   <!-- components: { STelegram }, -->
-//   <!-- name: 'STwitterSharing', -->
-//   <!-- components: { STwitter }, -->
-//   <!-- name: 'SEmailSharing', -->
-//   <!-- components: { SEmail }, -->
-//   <!-- name: 'SMastodonSharing', -->
-//   <!-- components: { SMastodon }, -->
-//   <!-- name: 'SFacebookMessengerSharing', -->
-//   <!-- components: { SFacebookMessenger }, -->
-//   <!-- name: 'SFacebookWorkplaceSharing', -->
-//   <!-- components: { SFacebookWorkplace }, -->
-//   <!-- name: 'SSmsSharing', -->
-//   <!-- components: { SSms }, -->
-// <!-- } -->
-// <!-- </script> -->
-// <!-- :cta=props.cta :label=props.label :aria-label=props.ariaLabel  -->

From b0256f0158562521a2f472ad698ba6f0d6dde5f0 Mon Sep 17 00:00:00 2001
From: Tessa <anderson.quintessa@gmail.com>
Date: Sat, 24 Feb 2024 11:19:08 -0600
Subject: [PATCH 14/15] fix prettier error

---
 frontend/components/modal/ModalSharePage.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/components/modal/ModalSharePage.vue b/frontend/components/modal/ModalSharePage.vue
index 394193cc7..7adbc4f30 100644
--- a/frontend/components/modal/ModalSharePage.vue
+++ b/frontend/components/modal/ModalSharePage.vue
@@ -192,8 +192,8 @@
                   props?.event?.name
                     ? props?.event?.name
                     : props?.organization?.name
-                    ? props?.organization?.name
-                    : '',
+                      ? props?.organization?.name
+                      : '',
                   getCurrentUrl()
                 )
               "

From 4a46349d3aa26be8fcb18cab47bae0c516e6fbb1 Mon Sep 17 00:00:00 2001
From: Andrew Tavis McAllister <andrew.t.mcallister@gmail.com>
Date: Sun, 3 Mar 2024 23:42:55 +0100
Subject: [PATCH 15/15] Ruff format of i18n repeat value check

---
 frontend/i18n/check_repeat_i18n_values.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/i18n/check_repeat_i18n_values.py b/frontend/i18n/check_repeat_i18n_values.py
index db9d8d0d3..b07bc298a 100644
--- a/frontend/i18n/check_repeat_i18n_values.py
+++ b/frontend/i18n/check_repeat_i18n_values.py
@@ -6,10 +6,10 @@
 """
 
 
-from collections import Counter
 import json
-from pathlib import Path
 import string
+from collections import Counter
+from pathlib import Path
 
 this_directory = str(Path(__file__).parent.resolve())