improve user-integration display in the user page (#3541)

* improve user-integration display in the user page

* delete unnecessary comma

6 files changed, 82 insertions, 94 deletions

diff --git a/src/client/app/desktop/views/pages/user/user.discord.vue b/src/client/app/desktop/views/pages/user/user.discord.vue
deleted file mode 100644
index 576b6ed46e..0000000000
--- a/src/client/app/desktop/views/pages/user/user.discord.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-<a class="lkafjvabenanajk17kwqpsatoushincb" :href="`https://discordapp.com/users/${user.discord.id}`" target="_blank">
-	<div>
-		<span><fa :icon="['fab', 'discord']"/>@{{ user.discord.username }}#{{ user.discord.discriminator }}</span>
-	</div>
-</a>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	props: ['user']
-});
-</script>
-
-<style lang="stylus" scoped>
-.lkafjvabenanajk17kwqpsatoushincb
-	margin-left 8px
-	color #fff
-
-	div
-		padding 32px
-		background #7289da
-		border-radius 6px
-		color #fff
-
-</style>
diff --git a/src/client/app/desktop/views/pages/user/user.github.vue b/src/client/app/desktop/views/pages/user/user.github.vue
deleted file mode 100644
index ec0f21c5a7..0000000000
--- a/src/client/app/desktop/views/pages/user/user.github.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-<a class="aqooishiizumijmihokohinatamihoaz" :href="`https://github.com/${user.github.login}`" target="_blank">
-	<div>
-		<span><fa :icon="['fab', 'github']"/>@{{ user.github.login }}</span>
-	</div>
-</a>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	props: ['user']
-});
-</script>
-
-<style lang="stylus" scoped>
-.aqooishiizumijmihokohinatamihoaz
-	margin-left 8px
-	color #fff
-
-	div
-		padding 32px
-		background #171515
-		border-radius 6px
-		color #fff
-
-</style>
diff --git a/src/client/app/desktop/views/pages/user/user.integrations.integration.vue b/src/client/app/desktop/views/pages/user/user.integrations.integration.vue
new file mode 100644
index 0000000000..4791226881
--- /dev/null
+++ b/src/client/app/desktop/views/pages/user/user.integrations.integration.vue
@@ -0,0 +1,14 @@
+<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/pages/user/user.integrations.vue b/src/client/app/desktop/views/pages/user/user.integrations.vue
new file mode 100644
index 0000000000..d796ff9321
--- /dev/null
+++ b/src/client/app/desktop/views/pages/user/user.integrations.vue
@@ -0,0 +1,63 @@
+<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
+	> a
+		display flex
+		align-items center
+		padding 32px 38px
+		box-shadow var(--shadow)
+		border-radius var(--round)
+
+		&:not(:last-child)
+			margin-bottom 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/desktop/views/pages/user/user.twitter.vue b/src/client/app/desktop/views/pages/user/user.twitter.vue
deleted file mode 100644
index d312c8c624..0000000000
--- a/src/client/app/desktop/views/pages/user/user.twitter.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-<a class="adsvaidqfznoartcbplullnejvxjphcn" :href="`https://twitter.com/${user.twitter.screenName}`" target="_blank">
-	<div>
-		<span><fa :icon="['fab', 'twitter']"/>@{{ user.twitter.screenName }}</span>
-	</div>
-</a>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	props: ['user']
-});
-</script>
-
-<style lang="stylus" scoped>
-.adsvaidqfznoartcbplullnejvxjphcn
-	margin-left 8px
-	color #fff
-
-	div
-		padding 32px
-		background #1a94f2
-		border-radius 6px
-		color #fff
-
-</style>
diff --git a/src/client/app/desktop/views/pages/user/user.vue b/src/client/app/desktop/views/pages/user/user.vue
index 1333d313fe..5cd63545f7 100644
--- a/src/client/app/desktop/views/pages/user/user.vue
+++ b/src/client/app/desktop/views/pages/user/user.vue
@@ -12,9 +12,7 @@
 			<div class="side">
 				<div class="instance" v-if="!$store.getters.isSignedIn"><mk-instance/></div>
 				<x-profile :user="user"/>
-				<x-twitter :user="user" v-if="!user.host && user.twitter"/>
-				<x-github :user="user" v-if="!user.host && user.github"/>
-				<x-discord :user="user" v-if="!user.host && user.discord"/>
+				<x-integrations :user="user" v-if="!user.host"/>
 				<mk-calendar @chosen="warp" :start="new Date(user.createdAt)"/>
 				<mk-activity :user="user"/>
 				<x-photos :user="user"/>
@@ -38,9 +36,7 @@ import XProfile from './user.profile.vue';
 import XPhotos from './user.photos.vue';
 import XFollowersYouKnow from './user.followers-you-know.vue';
 import XFriends from './user.friends.vue';
-import XTwitter from './user.twitter.vue';
-import XGithub from './user.github.vue'; // ?MEM: Don't fix the intentional typo. (XGitHub -> `<x-git-hub>`)
-import XDiscord from './user.discord.vue';
+import XIntegrations from './user.integrations.vue';
 
 export default Vue.extend({
 	i18n: i18n(),
@@ -51,9 +47,7 @@ export default Vue.extend({
 		XPhotos,
 		XFollowersYouKnow,
 		XFriends,
-		XTwitter,
-		XGithub, // ?MEM: Don't fix the intentional typo. (see L41)
-		XDiscord
+		XIntegrations
 	},
 	data() {
 		return {
@@ -87,7 +81,8 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .xygkxeaeontfaokvqmiblezmhvhostak
-	width 980px
+	max-width 980px
+	min-width 720px
 	padding 16px
 	margin 0 auto