feat(frontend): Update button text to "Short it !" and enhance button styles

Author: HeiTang

src/pages/index.astro

@@ -45,7 +45,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
               <path d="M19.4 15a1 1 0 0 0 .2 1.1l.1.1a2 2 0 0 1 0 2.8 2 2 0 0 1-2.8 0l-.1-.1a1 1 0 0 0-1.1-.2 1 1 0 0 0-.6.9V20a2 2 0 0 1-4 0v-.2a1 1 0 0 0-.7-.9 1 1 0 0 0-1 .2l-.2.1a2 2 0 1 1-2.8-2.8l.1-.1a1 1 0 0 0 .2-1.1 1 1 0 0 0-.9-.6H4a2 2 0 0 1 0-4h.2a1 1 0 0 0 .9-.7 1 1 0 0 0-.2-1l-.1-.2a2 2 0 1 1 2.8-2.8l.1.1a1 1 0 0 0 1.1.2 1 1 0 0 0 .6-.9V4a2 2 0 0 1 4 0v.2a1 1 0 0 0 .7.9 1 1 0 0 0 1-.2l.2-.1a2 2 0 1 1 2.8 2.8l-.1.1a1 1 0 0 0-.2 1.1 1 1 0 0 0 .9.6H20a2 2 0 0 1 0 4h-.2a1 1 0 0 0-.9.7z"></path>
             </svg>
           </button>
-          <button id="btn" class="flat-btn flat-btn-inline hidden" disabled>Shorten</button>
+          <button id="btn" class="flat-btn flat-btn-inline hidden" disabled>Short it !</button>
         </div>
       </div>
       <div id="aliasPanel" class="alias-panel is-collapsed">

src/scripts/index-page.ts

@@ -136,12 +136,12 @@ export function initIndexPage(config: IndexPageConfig): void {
     const valid = inputUrl.value.trim().startsWith('http');
     aliasController.syncSubmitButton(submitButton, valid);
     if (isAuthorizedMode()) {
-      submitButton.textContent = 'Create';
+      submitButton.textContent = 'Short it !';
       submitButton.disabled = !(valid && turnstileVerified);
       return;
     }
 
-    submitButton.textContent = 'Shorten';
+    submitButton.textContent = 'Short it !';
     submitButton.disabled = !valid;
   };
 

src/styles/global.css

@@ -227,7 +227,7 @@ html.is-redirecting .redirect-overlay {
 }
 
 .icon-btn {
-  @apply inline-flex h-9 w-9 items-center justify-center rounded-md bg-transparent text-slate-400 transition-colors hover:text-slate-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-500/50 disabled:cursor-not-allowed disabled:opacity-50;
+  @apply inline-flex h-9 w-9 items-center justify-center rounded-lg bg-transparent text-slate-400 transition-all duration-200 hover:bg-cyan-400/10 hover:text-cyan-300 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/40 disabled:cursor-not-allowed disabled:opacity-50;
 }
 
 .alias-shell {
@@ -267,7 +267,7 @@ html.is-redirecting .redirect-overlay {
 }
 
 .flat-btn {
-  @apply shrink-0 rounded-md border border-blue-400 bg-blue-500 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-blue-400 disabled:cursor-not-allowed disabled:opacity-50;
+  @apply shrink-0 rounded-lg border border-cyan-400/60 bg-cyan-500/15 px-4 py-2.5 text-sm font-semibold text-cyan-300 transition-all duration-200 hover:border-cyan-300 hover:bg-cyan-400/25 hover:text-cyan-100 hover:shadow-[0_0_16px_rgba(56,189,248,0.15)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:shadow-none;
 }
 
 .flat-btn-inline {
@@ -306,7 +306,7 @@ html.is-redirecting .redirect-overlay {
 }
 
 .icon-btn-sm {
-  @apply inline-flex h-8 w-8 items-center justify-center rounded-lg text-slate-400 transition-colors hover:bg-white/10 hover:text-slate-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20;
+  @apply inline-flex h-8 w-8 items-center justify-center rounded-lg text-slate-400 transition-all duration-200 hover:bg-cyan-400/10 hover:text-cyan-300 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/30;
 }
 
 .qr-container {