From 46f3736f44b20ae2e90b0774ad723db5d648eba9 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 14 Oct 2021 01:27:45 +0900
Subject: [PATCH] :art:

---
 src/client/components/signup.vue        |  2 +-
 src/client/components/ui/button.vue     | 27 +++++++++++++++++++++----
 src/client/pages/welcome.entrance.a.vue |  2 +-
 src/client/pages/welcome.entrance.b.vue |  2 +-
 src/client/pages/welcome.entrance.c.vue |  2 +-
 src/client/themes/_dark.json5           |  2 ++
 src/client/themes/_light.json5          |  2 ++
 src/client/themes/d-astro.json5         |  2 ++
 src/client/themes/d-future.json5        |  2 ++
 src/client/ui/_common_/sidebar.vue      |  2 +-
 10 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/src/client/components/signup.vue b/src/client/components/signup.vue
index b420bca5a3..cb25eadf06 100644
--- a/src/client/components/signup.vue
+++ b/src/client/components/signup.vue
@@ -56,7 +56,7 @@
 		</label>
 		<captcha v-if="meta.enableHcaptcha" class="_formBlock captcha" provider="hcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" :sitekey="meta.hcaptchaSiteKey"/>
 		<captcha v-if="meta.enableRecaptcha" class="_formBlock captcha" provider="recaptcha" ref="recaptcha" v-model="reCaptchaResponse" :sitekey="meta.recaptchaSiteKey"/>
-		<MkButton class="_formBlock" type="submit" :disabled="shouldDisableSubmitting" primary data-cy-signup-submit>{{ $ts.start }}</MkButton>
+		<MkButton class="_formBlock" type="submit" :disabled="shouldDisableSubmitting" gradate data-cy-signup-submit>{{ $ts.start }}</MkButton>
 	</template>
 </form>
 </template>
diff --git a/src/client/components/ui/button.vue b/src/client/components/ui/button.vue
index e74c4f550b..5f36be0d76 100644
--- a/src/client/components/ui/button.vue
+++ b/src/client/components/ui/button.vue
@@ -1,6 +1,6 @@
 <template>
 <button v-if="!link" class="bghgjjyj _button"
-	:class="{ inline, primary, danger, rounded, full }"
+	:class="{ inline, primary, gradate, danger, rounded, full }"
 	:type="type"
 	@click="$emit('click', $event)"
 	@mousedown="onMousedown"
@@ -11,7 +11,7 @@
 	</div>
 </button>
 <MkA v-else class="bghgjjyj _button"
-	:class="{ inline, primary, danger, rounded, full }"
+	:class="{ inline, primary, gradate, danger, rounded, full }"
 	:to="to"
 	@mousedown="onMousedown"
 >
@@ -36,6 +36,11 @@ export default defineComponent({
 			required: false,
 			default: false
 		},
+		gradate: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 		rounded: {
 			type: Boolean,
 			required: false,
@@ -137,8 +142,8 @@ export default defineComponent({
 	padding: 8px 14px;
 	text-align: center;
 	font-weight: normal;
-	font-size: 0.9em;
-	line-height: 24px;
+	font-size: 0.8em;
+	line-height: 22px;
 	box-shadow: none;
 	text-decoration: none;
 	background: var(--buttonBg);
@@ -177,6 +182,20 @@ export default defineComponent({
 		}
 	}
 
+	&.gradate {
+		font-weight: bold;
+		color: var(--fgOnAccent) !important;
+		background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+
+		&:not(:disabled):hover {
+			background: var(--X8);
+		}
+
+		&:not(:disabled):active {
+			background: var(--X8);
+		}
+	}
+
 	&.danger {
 		color: #ff2a2a;
 
diff --git a/src/client/pages/welcome.entrance.a.vue b/src/client/pages/welcome.entrance.a.vue
index 467a6fb1ad..13f0993793 100644
--- a/src/client/pages/welcome.entrance.a.vue
+++ b/src/client/pages/welcome.entrance.a.vue
@@ -27,7 +27,7 @@
 					<div class="desc" v-html="meta.description || $ts.headlineMisskey"></div>
 				</div>
 				<div class="action">
-					<MkButton @click="signup()" inline primary data-cy-signup style="margin-right: 12px;">{{ $ts.signup }}</MkButton>
+					<MkButton @click="signup()" inline gradate data-cy-signup style="margin-right: 12px;">{{ $ts.signup }}</MkButton>
 					<MkButton @click="signin()" inline data-cy-signin>{{ $ts.login }}</MkButton>
 				</div>
 				<div class="status" v-if="onlineUsersCount && stats">
diff --git a/src/client/pages/welcome.entrance.b.vue b/src/client/pages/welcome.entrance.b.vue
index a5c12f09e2..163fc1e35f 100644
--- a/src/client/pages/welcome.entrance.b.vue
+++ b/src/client/pages/welcome.entrance.b.vue
@@ -12,7 +12,7 @@
 				<div class="desc" v-html="meta.description || $ts.headlineMisskey"></div>
 			</div>
 			<div class="action">
-				<MkButton class="signup" @click="signup()" inline primary>{{ $ts.signup }}</MkButton>
+				<MkButton class="signup" @click="signup()" inline gradate>{{ $ts.signup }}</MkButton>
 				<MkButton class="signin" @click="signin()" inline>{{ $ts.login }}</MkButton>
 			</div>
 			<div class="status" v-if="onlineUsersCount && stats">
diff --git a/src/client/pages/welcome.entrance.c.vue b/src/client/pages/welcome.entrance.c.vue
index 2c8db6e264..bf1c9b1998 100644
--- a/src/client/pages/welcome.entrance.c.vue
+++ b/src/client/pages/welcome.entrance.c.vue
@@ -24,7 +24,7 @@
 						<div class="desc" v-html="meta.description || $ts.headlineMisskey"></div>
 					</div>
 					<div class="action">
-						<MkButton @click="signup()" inline primary>{{ $ts.signup }}</MkButton>
+						<MkButton @click="signup()" inline gradate>{{ $ts.signup }}</MkButton>
 						<MkButton @click="signin()" inline>{{ $ts.login }}</MkButton>
 					</div>
 					<div class="status" v-if="onlineUsersCount && stats">
diff --git a/src/client/themes/_dark.json5 b/src/client/themes/_dark.json5
index 22f4dc13d4..d8be16f60a 100644
--- a/src/client/themes/_dark.json5
+++ b/src/client/themes/_dark.json5
@@ -57,6 +57,8 @@
 		cwHoverBg: '#707b97',
 		buttonBg: 'rgba(255, 255, 255, 0.05)',
 		buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
+		buttonGradateA: '@accent',
+		buttonGradateB: ':hue<20<@accent',
 		inputBorder: 'rgba(255, 255, 255, 0.1)',
 		inputBorderHover: 'rgba(255, 255, 255, 0.2)',
 		listItemHoverBg: 'rgba(255, 255, 255, 0.03)',
diff --git a/src/client/themes/_light.json5 b/src/client/themes/_light.json5
index 64b92dba8a..251aa36c7a 100644
--- a/src/client/themes/_light.json5
+++ b/src/client/themes/_light.json5
@@ -57,6 +57,8 @@
 		cwHoverBg: '#bbc4ce',
 		buttonBg: 'rgba(0, 0, 0, 0.05)',
 		buttonHoverBg: 'rgba(0, 0, 0, 0.1)',
+		buttonGradateA: '@accent',
+		buttonGradateB: ':hue<20<@accent',
 		inputBorder: 'rgba(0, 0, 0, 0.1)',
 		inputBorderHover: 'rgba(0, 0, 0, 0.2)',
 		listItemHoverBg: 'rgba(0, 0, 0, 0.03)',
diff --git a/src/client/themes/d-astro.json5 b/src/client/themes/d-astro.json5
index 08846dec20..2350e3d46d 100644
--- a/src/client/themes/d-astro.json5
+++ b/src/client/themes/d-astro.json5
@@ -46,6 +46,8 @@
 		navIndicator: '@accent',
 		accentLighten: ':lighten<10<@accent',
 		buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
+		buttonGradateA: '@accent',
+		buttonGradateB: ':hue<-20<@accent',
 		driveFolderBg: ':alpha<0.3<@accent',
 		fgHighlighted: ':lighten<3<@fg',
 		panelHeaderBg: ':lighten<3<@panel',
diff --git a/src/client/themes/d-future.json5 b/src/client/themes/d-future.json5
index 05ffe87bf0..1882609121 100644
--- a/src/client/themes/d-future.json5
+++ b/src/client/themes/d-future.json5
@@ -21,5 +21,7 @@
 		mentionMe: '@accent',
 		hashtag: '#70c0e8',
 		link: '#e88080',
+		buttonGradateA: '@accent',
+		buttonGradateB: ':saturate<30<:hue<30<@accent',
 	},
 }
diff --git a/src/client/ui/_common_/sidebar.vue b/src/client/ui/_common_/sidebar.vue
index 33aea31c39..d00327b096 100644
--- a/src/client/ui/_common_/sidebar.vue
+++ b/src/client/ui/_common_/sidebar.vue
@@ -372,7 +372,7 @@ export default defineComponent({
 						right: 0;
 						bottom: 0;
 						border-radius: 999px;
-						background: var(--accent);
+						background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
 					}
 					
 					&:hover, &.active {