🎨

packages/frontend/src/pages/admin/other-settings.vue

@@ -46,7 +46,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<div class="_gaps_m">
 						<MkSwitch v-model="enableFanoutTimeline">
 							<template #label>{{ i18n.ts.enable }}</template>
-							<template #caption>{{ i18n.ts._serverSettings.fanoutTimelineDescription }}</template>
+							<template #caption>
+								<div>{{ i18n.ts._serverSettings.fanoutTimelineDescription }}</div>
+								<div><MkLink target="_blank" url="https://misskey-hub.net/docs/for-admin/features/ftt/">{{ i18n.ts.details }}</MkLink></div>
+							</template>
 						</MkSwitch>
 
 						<MkSwitch v-model="enableFanoutTimelineDbFallback">
@@ -103,6 +106,7 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkInput from '@/components/MkInput.vue';
+import MkLink from '@/components/MkLink.vue';
 
 const enableServerMachineStats = ref<boolean>(false);
 const enableIdenticonGeneration = ref<boolean>(false);

packages/frontend/src/pages/admin/system-webhook.item.vue

@@ -4,33 +4,42 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="$style.main">
-	<span :class="$style.icon">
-		<i v-if="!entity.isActive" class="ti ti-player-pause"/>
-		<i v-else-if="entity.latestStatus === null" class="ti ti-circle"/>
-		<i
-			v-else-if="[200, 201, 204].includes(entity.latestStatus)"
-			class="ti ti-check"
-			:style="{ color: 'var(--success)' }"
-		/>
-		<i v-else class="ti ti-alert-triangle" :style="{ color: 'var(--error)' }"/>
-	</span>
-	<span :class="$style.text">{{ entity.name || entity.url }}</span>
-	<span :class="$style.suffix">
-		<MkTime v-if="entity.latestSentAt" :time="entity.latestSentAt" style="margin-right: 8px"/>
-		<button :class="$style.suffixButton" @click="onEditClick">
-			<i class="ti ti-settings"></i>
-		</button>
-		<button :class="$style.suffixButton" @click="onDeleteClick">
-			<i class="ti ti-trash"></i>
-		</button>
-	</span>
-</div>
+	<MkFolder>
+		<template #label>{{ entity.name || entity.url }}</template>
+		<template #icon>
+			<i v-if="!entity.isActive" class="ti ti-player-pause"/>
+			<i v-else-if="entity.latestStatus === null" class="ti ti-circle"/>
+			<i
+				v-else-if="[200, 201, 204].includes(entity.latestStatus)"
+				class="ti ti-check"
+				:style="{ color: 'var(--success)' }"
+			/>
+			<i v-else class="ti ti-alert-triangle" :style="{ color: 'var(--error)' }"/>
+		</template>
+		<template #suffix>
+			<MkTime v-if="entity.latestSentAt" :time="entity.latestSentAt" style="margin-right: 8px"/>
+			<span v-else>-</span>
+		</template>
+
+		<div>
+			<div class="_buttons">
+				<MkButton @click="onEditClick">
+					<i class="ti ti-settings"></i> {{ i18n.ts.edit }}
+				</MkButton>
+				<MkButton danger @click="onDeleteClick">
+					<i class="ti ti-trash"></i> {{ i18n.ts.delete }}
+				</MkButton>
+			</div>
+		</div>
+	</MkFolder>
 </template>
 
 <script lang="ts" setup>
 import { entities } from 'misskey-js';
 import { toRefs } from 'vue';
+import MkFolder from '@/components/MkFolder.vue';
+import { i18n } from '@/i18n.js';
+import MkButton from '@/components/MkButton.vue';
 
 const emit = defineEmits<{
 	(ev: 'edit', value: entities.SystemWebhook): void;
@@ -54,64 +63,10 @@ function onDeleteClick() {
 </script>
 
 <style module lang="scss">
-.main {
-	display: flex;
-	align-items: center;
-	width: 100%;
-	box-sizing: border-box;
-	padding: 10px 14px;
-	background: var(--buttonBg);
-	border: none;
-	border-radius: 6px;
-	font-size: 0.9em;
-
-	&:hover {
-		text-decoration: none;
-		background: var(--buttonHoverBg);
-	}
-
-	&.active {
-		color: var(--accent);
-		background: var(--buttonHoverBg);
-	}
-}
-
 .icon {
 	margin-right: 0.75em;
 	flex-shrink: 0;
 	text-align: center;
 	color: var(--fgTransparentWeak);
 }
-
-.text {
-	flex-shrink: 1;
-	white-space: normal;
-	padding-right: 12px;
-	text-align: center;
-}
-
-.suffix {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
-	gaps: 4px;
-	margin-left: auto;
-	margin-right: -8px;
-	opacity: 0.7;
-	white-space: nowrap;
-}
-
-.suffixButton {
-	background: transparent;
-	border: none;
-	border-radius: 9999px;
-	margin-top: -8px;
-	margin-bottom: -8px;
-	padding: 8px;
-
-	&:hover {
-		background: var(--buttonBg);
-	}
-}
 </style>

packages/frontend/src/pages/admin/system-webhook.vue

@@ -11,8 +11,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 	<MkSpacer :contentMax="900">
 		<div class="_gaps_m">
-			<MkButton :class="$style.linkButton" full @click="onCreateWebhookClicked">
-				{{ i18n.ts._webhookSettings.createWebhook }}
+			<MkButton primary @click="onCreateWebhookClicked">
+				<i class="ti ti-plus"></i> {{ i18n.ts._webhookSettings.createWebhook }}
 			</MkButton>
 
 			<FormSection>
@@ -89,8 +89,5 @@ definePageMetadata(() => ({
 </script>
 
 <style module lang="scss">
-.linkButton {
-	text-align: left;
-	padding: 10px 18px;
-}
+
 </style>