wip

6 files changed, 55 insertions, 29 deletions

diff --git a/src/client/components/mfm.ts b/src/client/components/mfm.ts
index 9b17b18d45..f316427897 100644
--- a/src/client/components/mfm.ts
+++ b/src/client/components/mfm.ts
@@ -154,21 +154,17 @@ export default Vue.component('misskey-flavored-markdown', {
 							url: token.node.props.url,
 							rel: 'nofollow noopener',
 						},
-						attrs: {
-							style: 'color:var(--link);'
-						}
 					})];
 				}
 
 				case 'link': {
 					return [createElement('a', {
 						attrs: {
-							class: 'link',
+							class: 'link _link',
 							href: token.node.props.url,
 							rel: 'nofollow noopener',
 							target: '_blank',
 							title: token.node.props.url,
-							style: 'color:var(--link);'
 						}
 					}, genEl(token.children))];
 				}
diff --git a/src/client/components/url.vue b/src/client/components/url.vue
index 082e744001..3b0d814405 100644
--- a/src/client/components/url.vue
+++ b/src/client/components/url.vue
@@ -1,5 +1,5 @@
 <template>
-<component :is="hasRoute ? 'router-link' : 'a'" class="mk-url" :[attr]="hasRoute ? url.substr(local.length) : url" :rel="rel" :target="target">
+<component :is="hasRoute ? 'router-link' : 'a'" class="ieqqeuvs _link" :[attr]="hasRoute ? url.substr(local.length) : url" :rel="rel" :target="target">
 	<template v-if="!self">
 		<span class="schema">{{ schema }}//</span>
 		<span class="hostname">{{ hostname }}</span>
@@ -58,7 +58,7 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" scoped>
-.mk-url {
+.ieqqeuvs {
 	word-break: break-all;
 
 	> .icon {
diff --git a/src/client/pages/about.vue b/src/client/pages/about.vue
index fb1efab77c..f9b92df80e 100644
--- a/src/client/pages/about.vue
+++ b/src/client/pages/about.vue
@@ -27,17 +27,17 @@
 			<div style="margin-bottom: 1em;">{{ $t('aboutMisskeyText') }}</div>
 			<div>{{ $t('misskeyMembers') }}</div>
 			<span class="members">
-				<a href="https://github.com/syuilo" target="_blank">@syuilo</a>
-				<a href="https://github.com/AyaMorisawa" target="_blank">@AyaMorisawa</a>
-				<a href="https://github.com/mei23" target="_blank">@mei23</a>
-				<a href="https://github.com/acid-chicken" target="_blank">@acid-chicken</a>
-				<a href="https://github.com/tamaina" target="_blank">@tamaina</a>
-				<a href="https://github.com/rinsuki" target="_blank">@rinsuki</a>
+				<a href="https://github.com/syuilo" target="_blank" class="_link">@syuilo</a>
+				<a href="https://github.com/AyaMorisawa" target="_blank" class="_link">@AyaMorisawa</a>
+				<a href="https://github.com/mei23" target="_blank" class="_link">@mei23</a>
+				<a href="https://github.com/acid-chicken" target="_blank" class="_link">@acid-chicken</a>
+				<a href="https://github.com/tamaina" target="_blank" class="_link">@tamaina</a>
+				<a href="https://github.com/rinsuki" target="_blank" class="_link">@rinsuki</a>
 			</span>
 			<div style="margin-top: 1em;">{{ $t('misskeySource') }}</div>
-			<a href="https://github.com/syuilo/misskey" target="_blank" style="color: var(--link);">https://github.com/syuilo/misskey</a>
+			<mk-url url="https://github.com/syuilo/misskey"/>
 			<div style="margin-top: 1em;">{{ $t('misskeyDonate') }}</div>
-			<a href="https://www.patreon.com/syuilo" target="_blank" style="color: var(--link);">https://www.patreon.com/syuilo</a>
+			<mk-url url="https://www.patreon.com/syuilo"/>
 		</div>
 		<div class="_content">
 			<span><mfm text="<motion>❤</motion>"/> {{ $t('patrons') }}</span>
@@ -121,7 +121,6 @@ export default Vue.extend({
 		> ._content {
 			> .members {
 				> a {
-					color: var(--link);
 					margin-right: 0.5em;
 				}
 			}
diff --git a/src/client/pages/my-groups/index.vue b/src/client/pages/my-groups/index.vue
index 733c481aa6..40e7199dc2 100644
--- a/src/client/pages/my-groups/index.vue
+++ b/src/client/pages/my-groups/index.vue
@@ -8,8 +8,8 @@
 	<mk-container :body-togglable="true">
 		<template #header><fa :icon="faUsers"/> {{ $t('ownedGroups') }}</template>
 		<mk-pagination :pagination="ownedPagination" #default="{items}" ref="owned">
-			<div class="" v-for="group in items" :key="group.id">
-				<router-link :to="`/my/groups/${ group.id }`">{{ group.name }}</router-link>
+			<div class="_frame" v-for="group in items" :key="group.id">
+				<div class="_title"><router-link :to="`/my/groups/${ group.id }`" class="_link">{{ group.name }}</router-link></div>
 			</div>
 		</mk-pagination>
 	</mk-container>
@@ -17,13 +17,13 @@
 	<mk-container :body-togglable="true">
 		<template #header><fa :icon="faEnvelopeOpenText"/> {{ $t('invites') }}</template>
 		<mk-pagination :pagination="invitePagination" #default="{items}">
-			<div class="" v-for="invite in items" :key="invite.id">
-				<div class="name">{{ invite.group.name }}</div>
-				<x-avatars :user-ids="invite.group.userIds" style="margin-top:8px;"/>
-				<ui-horizon-group>
-					<ui-button @click="acceptInvite(invite)"><fa :icon="faCheck"/> {{ $t('accept') }}</ui-button>
-					<ui-button @click="rejectInvite(invite)"><fa :icon="faBan"/> {{ $t('reject') }}</ui-button>
-				</ui-horizon-group>
+			<div class="_frame" v-for="invite in items" :key="invite.id">
+				<div class="_title">{{ invite.group.name }}</div>
+				<div class="_content"><x-avatars :user-ids="invite.group.userIds"/></div>
+				<div class="_footer">
+					<mk-button @click="acceptInvite(invite)" primary inline><fa :icon="faCheck"/> {{ $t('accept') }}</mk-button>
+					<mk-button @click="rejectInvite(invite)" primary inline><fa :icon="faBan"/> {{ $t('reject') }}</mk-button>
+				</div>
 			</div>
 		</mk-pagination>
 	</mk-container>
@@ -31,8 +31,8 @@
 	<mk-container :body-togglable="true">
 		<template #header><fa :icon="faUsers"/> {{ $t('joinedGroups') }}</template>
 		<mk-pagination :pagination="joinedPagination" #default="{items}">
-			<div class="" v-for="group in items" :key="group.id">
-				<div>{{ group.name }}</div>
+			<div class="_frame" v-for="group in items" :key="group.id">
+				<div class="_title">{{ group.name }}</div>
 			</div>
 		</mk-pagination>
 	</mk-container>
diff --git a/src/client/pages/settings/2fa.vue b/src/client/pages/settings/2fa.vue
index 0affab27f3..8432bdb32d 100644
--- a/src/client/pages/settings/2fa.vue
+++ b/src/client/pages/settings/2fa.vue
@@ -46,8 +46,8 @@
 			<ol style="margin: 0; padding: 0 0 0 1em;">
 				<li>
 					<i18n path="_2fa.step1" tag="span">
-						<a href="https://authy.com/" rel="noopener" target="_blank" place="a" style="color: var(--link);">Authy</a>
-						<a href="https://support.google.com/accounts/answer/1066447" rel="noopener" target="_blank" place="b" style="color: var(--link);">Google Authenticator</a>
+						<a href="https://authy.com/" rel="noopener" target="_blank" place="a" class="_link">Authy</a>
+						<a href="https://support.google.com/accounts/answer/1066447" rel="noopener" target="_blank" place="b" class="_link">Google Authenticator</a>
 					</i18n>
 				</li>
 				<li>{{ $t('_2fa.step2') }}<br><img :src="data.qr"></li>
diff --git a/src/client/style.scss b/src/client/style.scss
index 40d39fa639..5280717839 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -301,6 +301,37 @@ a {
 	}
 }
 
+._frame {
+	position: relative;
+	border: solid 1px var(--divider);
+	border-radius: var(--radius);
+	margin: var(--marginHalf);
+
+	> ._title {
+		margin: 0;
+		padding: 16px;
+		border-bottom: solid 1px var(--divider);
+		font-weight: bold;
+	}
+
+	> ._content {
+		padding: 16px;
+
+		& + ._content {
+			border-top: solid 1px var(--divider);
+		}
+	}
+
+	> ._footer {
+		border-top: solid 1px var(--divider);
+		padding: 16px;
+	}
+}
+
+._link {
+	color: var(--link);
+}
+
 .zoom-enter-active, .zoom-leave-active {
 	transition: opacity 0.5s, transform 0.5s !important;
 }