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 576b6ed46..000000000
--- 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 ec0f21c5a..000000000
--- 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 000000000..479122688
--- /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 000000000..d796ff932
--- /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 d312c8c62..000000000
--- 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 1333d313f..5cd63545f 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