fix(federatedfilessharing): Use social media icons from core rather than inline SVGs

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

apps/federatedfilesharing/src/components/PersonalSettings.vue

@@ -13,7 +13,7 @@
 				:title="copyLinkTooltip"
 				:aria-label="copyLinkTooltip"
 				class="clipboard"
-				type="tertiary-no-background"
+				type="tertiary"
 				@click.prevent="copyCloudId">
 				<template #icon>
 					<Clipboard :size="20" />
@@ -26,22 +26,19 @@
 			<NcButton @click="goTo(shareFacebookUrl)">
 				{{ t('federatedfilesharing', 'Facebook') }}
 				<template #icon>
-					<Facebook :size="20" />
+					<img class="social-button__icon social-button__icon--bright" :src="urlFacebookIcon">
 				</template>
 			</NcButton>
 			<NcButton @click="goTo(shareXUrl)">
 				{{ t('federatedfilesharing', 'formerly Twitter') }}
 				<template #icon>
-					<svg width="20"
-						height="20"
-						viewBox="0 0 15 15"
-						xmlns="http://www.w3.org/2000/svg"><path fill="black" d="m 3.384891,2.6 c -0.3882,0 -0.61495,0.4362184 -0.39375,0.7558594 L 6.5841098,8.4900156 2.9770785,12.707422 C 2.7436785,12.979821 2.9370285,13.4 3.2958285,13.4 H 3.694266 c 0.176,0 0.3430313,-0.07714 0.4570313,-0.210938 L 7.294266,9.5065156 9.6602817,12.887891 C 9.8762817,13.208984 10.25229,13.4 10.743485,13.4 h 1.900391 c 0.3882,0 0.61575,-0.436688 0.39375,-0.754688 L 9.2466097,7.2195156 12.682547,3.1941408 C 12.881744,2.9601408 12.715528,2.6 12.407473,2.6 h -0.506566 c -0.175,0 -0.34186,0.076453 -0.45586,0.2197656 L 8.5405785,6.2058438 6.3790317,3.1132812 C 6.1568442,2.7913687 5.6965004,2.6 5.3958285,2.6 Z" /></svg>
+					<img class="social-button__icon" :src="urlXIcon">
 				</template>
 			</NcButton>
 			<NcButton @click="goTo(shareMastodonUrl)">
 				{{ t('federatedfilesharing', 'Mastodon') }}
 				<template #icon>
-					<Mastodon :size="20" />
+					<img class="social-button__icon" :src="urlMastodonIcon">
 				</template>
 			</NcButton>
 			<NcButton class="social-button__website-button"
@@ -76,6 +73,8 @@
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
+import { imagePath } from '@nextcloud/router'
 import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import Mastodon from 'vue-material-design-icons/Mastodon.vue'
@@ -93,6 +92,14 @@ export default {
 		Web,
 		Clipboard,
 	},
+	setup() {
+		return {
+			t,
+			urlFacebookIcon: imagePath('core', 'facebook'),
+			urlMastodonIcon: imagePath('core', 'mastodon'),
+			urlXIcon: imagePath('core', 'x'),
+		}
+	},
 	data() {
 		return {
 			color: loadState('federatedfilesharing', 'color'),
@@ -162,14 +169,27 @@ export default {
 <style lang="scss" scoped>
 	.social-button {
 		margin-top: 0.5rem;
+
 		button {
 			display: inline-flex;
 			margin-inline-start: 0.5rem;
 			margin-top: 1rem;
 		}
+
 		&__website-button {
 			width: min(100%, 400px) !important;
 		}
+
+		&__icon {
+			height: 20px;
+			width: 20px;
+			filter: var(--background-invert-if-dark);
+
+			&--bright {
+				// Some logos like the Facebook logo have bright color schema
+				filter: var(--background-invert-if-bright);
+			}
+		}
 	}
 	.cloud-id-text {
 		display: flex;

core/img/mastodon.svg

@@ -1 +1 @@
-<svg width="16" height="16" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8" fill="#2b90d2"/><path d="m13.183 9.2819c-0.1566 0.80567-1.4026 1.6874-2.8336 1.8583-0.74623 0.08903-1.4809 0.17088-2.2644 0.13494-1.2813-0.05872-2.2923-0.30582-2.2923-0.30582 0 0.12473 0.0077 0.24349 0.02307 0.35456 0.16657 1.2645 1.2538 1.3402 2.2837 1.3755 1.0395 0.03557 1.9651-0.25629 1.9651-0.25629l0.0427 0.93975s-0.72709 0.39044-2.0223 0.46224c-0.71423 0.03926-1.6011-0.01798-2.634-0.29136-2.2402-0.59294-2.6255-2.9809-2.6844-5.4039-0.01797-0.7194-0.00687-1.3977-0.00687-1.9651 0-2.4776 1.6233-3.2038 1.6233-3.2038 0.81852-0.37591 2.223-0.53399 3.6832-0.54593h0.035867c1.4601 0.011937 2.8656 0.17002 3.6841 0.54593 0 0 1.6233 0.72623 1.6233 3.2038 0 0 0.02036 1.828-0.22639 3.0971" fill="#fff" stroke-width=".049227"/><path d="m11.494 6.377v3h-1.1885v-2.9118c0-0.6138-0.25826-0.92535-0.77484-0.92535-0.57116 0-0.85742 0.36957-0.85742 1.1004v1.5938h-1.1815v-1.5938c0-0.73078-0.28632-1.1004-0.85748-1.1004-0.51658 0-0.77484 0.31155-0.77484 0.92535v2.9118h-1.1885v-3c0-0.61313 0.15611-1.1004 0.46969-1.4608 0.32336-0.36047 0.74684-0.54525 1.2725-0.54525 0.6082 0 1.0688 0.23377 1.3733 0.70137l0.29604 0.49627 0.2961-0.49627c0.30447-0.4676 0.76505-0.70137 1.3733-0.70137 0.52563 0 0.9491 0.18479 1.2725 0.54525 0.31352 0.36047 0.46963 0.84769 0.46963 1.4608" fill="#2b90d9" stroke-width=".049227"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path fill="inherit" d="M17.194 5.542c-.235-1.719-1.757-3.074-3.562-3.336C13.328 2.16 12.174 2 9.502 2h-.02c-2.673 0-3.246.161-3.55.206-1.755.255-3.357 1.472-3.746 3.212-.187.857-.207 1.806-.172 2.677.05 1.25.06 2.497.174 3.741.08.827.22 1.647.416 2.454.37 1.49 1.866 2.731 3.331 3.237a9.07 9.07 0 0 0 4.873.253c.178-.04.354-.087.528-.141.392-.123.853-.26 1.191-.502a.038.038 0 0 0 .016-.03v-1.205a.035.035 0 0 0-.014-.027.035.035 0 0 0-.015-.007.038.038 0 0 0-.016 0 13.713 13.713 0 0 1-3.162.364c-1.833 0-2.326-.856-2.467-1.213a3.707 3.707 0 0 1-.214-.955.035.035 0 0 1 .028-.036.037.037 0 0 1 .016 0c1.019.242 2.063.364 3.11.364.253 0 .504 0 .756-.007 1.054-.029 2.164-.082 3.201-.281.026-.005.052-.01.074-.016 1.636-.31 3.192-1.28 3.35-3.736.006-.097.02-1.013.02-1.113.001-.341.112-2.42-.016-3.697zm-2.517 6.13h-1.72V7.527c0-.873-.369-1.318-1.12-1.318-.826 0-1.24.527-1.24 1.567v2.268h-1.71V7.776c0-1.04-.414-1.567-1.24-1.567-.747 0-1.12.445-1.121 1.318v4.145H4.807V7.4c0-.873.227-1.566.68-2.08.467-.513 1.08-.776 1.84-.776.88 0 1.545.333 1.988.999l.428.707.429-.707c.443-.666 1.108-.999 1.987-.999.76 0 1.372.263 1.84.776.454.514.68 1.207.68 2.08z" style="stroke-width:.206161"/></svg>