Resolve #747

7 files changed, 79 insertions, 86 deletions

diff --git a/src/client/app/common/views/components/integrations.integration.vue b/src/client/app/common/views/components/integrations.integration.vue
new file mode 100644
index 0000000000..4008054b68
--- /dev/null
+++ b/src/client/app/common/views/components/integrations.integration.vue
@@ -0,0 +1,44 @@
+<template>
+<a class="zxrjzpcj" :href="url" :class="service" target="_blank">
+	<fa :icon="icon" size="lg" fixed-width /><span>{{ text }}</span>
+</a>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: ['url', 'text', 'icon', 'service']
+});
+</script>
+
+<style lang="stylus" scoped>
+.zxrjzpcj
+	padding 6px 8px 6px 6px
+	border-radius 32px
+
+	&:hover
+		text-decoration none
+
+	&.twitter
+		color #fff
+		background #1da1f3
+
+		&:hover
+			background #0c87cf
+
+	&.github
+		color #fff
+		background #171515
+
+		&:hover
+			background #000
+
+	&.discord
+		color #fff
+		background #7289da
+
+		&:hover
+			background #4968ce
+
+</style>
diff --git a/src/client/app/common/views/components/integrations.vue b/src/client/app/common/views/components/integrations.vue
new file mode 100644
index 0000000000..7a341a14fd
--- /dev/null
+++ b/src/client/app/common/views/components/integrations.vue
@@ -0,0 +1,26 @@
+<template>
+<div class="nbogcrmo" :v-if="user.twitter || user.github || user.discord">
+	<x-integration v-if="user.twitter" service="twitter" :url="`https://twitter.com/${user.twitter.screenName}`" :text="user.twitter.screenName" :icon="['fab', 'twitter']"/>
+	<x-integration v-if="user.github" service="github" :url="`https://github.com/${user.github.login}`" :text="user.github.login" :icon="['fab', 'github']"/>
+	<x-integration v-if="user.discord" service="discord" :url="`https://discordapp.com/users/${user.discord.id}`" :text="`${user.discord.username}#${user.discord.discriminator}`" :icon="['fab', 'discord']"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XIntegration from './integrations.integration.vue';
+
+export default Vue.extend({
+	components: {
+		XIntegration
+	},
+	props: ['user']
+});
+</script>
+
+<style lang="stylus" scoped>
+.nbogcrmo
+	> *
+		margin-right 10px
+
+</style>
diff --git a/src/client/app/desktop/views/home/user/user.header.vue b/src/client/app/desktop/views/home/user/user.header.vue
index e478506afe..5271c28d0d 100644
--- a/src/client/app/desktop/views/home/user/user.header.vue
+++ b/src/client/app/desktop/views/home/user/user.header.vue
@@ -23,6 +23,7 @@
 		<div class="description">
 			<mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
 			<p v-else class="empty">{{ $t('no-description') }}</p>
+			<x-integrations :user="user" style="margin-top:16px;"/>
 		</div>
 		<div class="fields" v-if="user.fields">
 			<dl class="field" v-for="(field, i) in user.fields" :key="i">
@@ -52,9 +53,13 @@ import Vue from 'vue';
 import i18n from '../../../../i18n';
 import * as age from 's-age';
 import XUserMenu from '../../../../common/views/components/user-menu.vue';
+import XIntegrations from '../../../../common/views/components/integrations.vue';
 
 export default Vue.extend({
 	i18n: i18n('desktop/views/pages/user/user.header.vue'),
+	components: {
+		XIntegrations
+	},
 	props: ['user'],
 	computed: {
 		style(): any {
diff --git a/src/client/app/desktop/views/home/user/user.home.vue b/src/client/app/desktop/views/home/user/user.home.vue
index b19a02e046..6e69072109 100644
--- a/src/client/app/desktop/views/home/user/user.home.vue
+++ b/src/client/app/desktop/views/home/user/user.home.vue
@@ -1,6 +1,5 @@
 <template>
 <div class="lnctpgve">
-	<x-integrations :user="user" v-if="user.twitter || user.github || user.discord"/>
 	<mk-note-detail v-for="n in user.pinnedNotes" :key="n.id" :note="n" :compact="true"/>
 	<!--<mk-calendar @chosen="warp" :start="new Date(user.createdAt)"/>-->
 	<div class="activity">
@@ -17,11 +16,8 @@
 <script lang="ts">
 import Vue from 'vue';
 import i18n from '../../../../i18n';
-import parseAcct from '../../../../../../misc/acct/parse';
-import Progress from '../../../../common/scripts/loading';
 import XTimeline from './user.timeline.vue';
 import XPhotos from './user.photos.vue';
-import XIntegrations from './user.integrations.vue';
 import XActivity from '../../../../common/views/components/activity.vue';
 
 export default Vue.extend({
@@ -29,7 +25,6 @@ export default Vue.extend({
 	components: {
 		XTimeline,
 		XPhotos,
-		XIntegrations,
 		XActivity
 	},
 	props: {
diff --git a/src/client/app/desktop/views/home/user/user.integrations.integration.vue b/src/client/app/desktop/views/home/user/user.integrations.integration.vue
deleted file mode 100644
index 4791226881..0000000000
--- a/src/client/app/desktop/views/home/user/user.integrations.integration.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-<a :href="url" :class="service" target="_blank">
-	<fa :icon="icon" size="lg" fixed-width />
-	<div>{{ text }}</div>
-</a>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	props: ['url', 'text', 'icon', 'service']
-});
-</script>
diff --git a/src/client/app/desktop/views/home/user/user.integrations.vue b/src/client/app/desktop/views/home/user/user.integrations.vue
deleted file mode 100644
index a2be48b3b8..0000000000
--- a/src/client/app/desktop/views/home/user/user.integrations.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-<div class="usertwitxxxgithxxdiscxxxintegrat" :v-if="user.twitter || user.github || user.discord">
-	<x-integration v-if="user.twitter" service="twitter" :url="`https://twitter.com/${user.twitter.screenName}`" :text="user.twitter.screenName" :icon="['fab', 'twitter']"/>
-	<x-integration v-if="user.github" service="github" :url="`https://github.com/${user.github.login}`" :text="user.github.login" :icon="['fab', 'github']"/>
-	<x-integration v-if="user.discord" service="discord" :url="`https://discordapp.com/users/${user.discord.id}`" :text="`${user.discord.username}#${user.discord.discriminator}`" :icon="['fab', 'discord']"/>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import XIntegration from './user.integrations.integration.vue';
-
-export default Vue.extend({
-	components: {
-		XIntegration
-	},
-	props: ['user']
-});
-</script>
-
-<style lang="stylus" scoped>
-.usertwitxxxgithxxdiscxxxintegrat
-	display flex
-
-	> a
-		display flex
-		flex 1
-		align-items center
-		padding 16px
-		box-shadow var(--shadow)
-		border-radius var(--round)
-
-		&:not(:last-child)
-			margin-right 16px
-
-		&:hover
-			text-decoration none
-
-		> div
-			padding-left .2em
-			line-height 1.3em
-			flex 1 0
-			word-wrap anywhere
-
-		&.twitter
-			color #fff
-			background #1da1f3
-
-			&:hover
-				background #0c87cf
-
-		&.github
-			color #fff
-			background #171515
-
-			&:hover
-				background #000
-
-		&.discord
-			color #fff
-			background #7289da
-
-			&:hover
-				background #4968ce
-
-</style>
diff --git a/src/client/app/mobile/views/pages/user/index.vue b/src/client/app/mobile/views/pages/user/index.vue
index 57d9d2d812..c2c38f9886 100644
--- a/src/client/app/mobile/views/pages/user/index.vue
+++ b/src/client/app/mobile/views/pages/user/index.vue
@@ -23,6 +23,7 @@
 				</div>
 				<div class="description">
 					<mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
+					<x-integrations :user="user" style="margin:16px 0;"/>
 				</div>
 				<div class="fields" v-if="user.fields">
 					<dl class="field" v-for="(field, i) in user.fields" :key="i">
@@ -86,11 +87,13 @@ import Progress from '../../../../common/scripts/loading';
 import XUserMenu from '../../../../common/views/components/user-menu.vue';
 import XHome from './home.vue';
 import { getStaticImageUrl } from '../../../../common/scripts/get-static-image-url';
+import XIntegrations from '../../../../common/views/components/integrations.vue';
 
 export default Vue.extend({
 	i18n: i18n('mobile/views/pages/user.vue'),
 	components: {
-		XHome
+		XHome,
+		XIntegrations
 	},
 	data() {
 		return {