#581 use icons in share component and minor formatting

frontend/components/footer/Footer.vue

@@ -15,8 +15,8 @@ const connectLinks = [
   {
     name: "components._global.github",
     url: "https://github.com/activist-org/activist",
-    iconName: "cib:github",
-    iconSize: "1em",
+    iconName: "simple-icons:github",
+    iconSize: "1.05em",
   },
   {
     name: "components._global.matrix",
@@ -27,7 +27,7 @@ const connectLinks = [
   {
     name: "components._global.instagram",
     url: "https://instagram.com/activist_org",
-    iconName: "cib:instagram",
+    iconName: "simple-icons:instagram",
     iconSize: "1em",
   },
 ];

frontend/components/grid/GridGitHubShields.vue

@@ -5,7 +5,7 @@
       href="https://github.com/activist-org/activist"
       :isLoading="isLoading"
     >
-      <Icon name="cib:github" size="2em" />
+      <Icon name="simple-icons:github" size="2em" />
       <div class="pb-1 ml-4 place-self-center">
         <div class="font-semibold text-xs leading-4 ml-0.5">
           {{ $t("components.grid-github-shields.visit-us") }}

frontend/components/landing/LandingCommunityBanner.vue

@@ -10,7 +10,7 @@
         href="https://github.com/activist-org/activist"
         target="_blank"
       >
-        <Icon name="cib:github" size="1em" />
+        <Icon name="simple-icons:github" size="1.1em" />
         <p class="sr-only sm:not-sr-only">
           {{ $t("components._global.github") }}
         </p>
@@ -30,7 +30,7 @@
         href="https://instagram.com/activist_org"
         target="_blank"
       >
-        <Icon name="cib:instagram" size="1em" />
+        <Icon name="simple-icons:instagram" size="1em" />
         <p class="sr-only sm:not-sr-only">
           {{ $t("components._global.instagram") }}
         </p>

frontend/components/meta-tag/MetaTagSocialMedia.vue

@@ -0,0 +1,17 @@
+<template>
+  <div
+    class="cursor-pointer w-full h-full flex gap-2 content-center text-light-text dark:text-dark-text hover:text-light-distinct-text dark:hover:dark-distinct-text"
+  >
+    <Icon :name="props.iconName" size="1.5em" />
+    <p>{{ props.text }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from "vue";
+
+const props = defineProps<{
+  iconName: string;
+  text: string;
+}>();
+</script>

frontend/i18n/en-US.json

@@ -237,6 +237,13 @@
   "components.logo-activist.aria-label": "The activist logo that links to the home page",
   "components.logo-activist.text": "Navigate to home page",
   "components.media-map.maplibre-gl-alert": "Your browser does not support our mapping service MapLibre GL, so we won't be able to display maps.",
+  "components.meta-social-media-tag.copied": "Copied",
+  "components.meta-social-media-tag.copy-link": "Copy link",
+  "components.meta-social-media-tag.facebook": "Facebook",
+  "components.meta-social-media-tag.mastodon": "Mastodon",
+  "components.meta-social-media-tag.messenger": "Messenger",
+  "components.meta-social-media-tag.qr-code": "View QR code",
+  "components.meta-social-media-tag.telegram": "Telegram",
   "components.meta-tag-stars.label": "stars",
   "components.meta-tag.supporters_lower": "supporters",
   "components.modal-command-palette.jump-to": "Jump to",
@@ -253,7 +260,7 @@
   "components.modal-qr-code.section-2-list-1-item-2": "Adding them to flyers or cards",
   "components.modal-qr-code.section-2-list-1-item-3": "Sending them with materials for your organization",
   "components.modal-qr-code.subheader-2": "Ideas for OR code use include:",
-  "components.modal-share.header": "Share this page",
+  "components.modal-share-page.header": "Share this page",
   "components.page-breadcrumbs.aria-label": "Page breadcrumb navigation",
   "components.password-strength.invalid": "invalid",
   "components.password-strength.medium": "medium",