style: make buttons more compact across admin pages

- Reduce base .btn padding from px-5 py-2.5 to px-4 py-2
- Change rounded-xl to rounded-lg for buttons
- Remove hover:scale effect for cleaner look
- Fix large buttons in AdminBanSystem, AdminBroadcastDetail
- Compact toggle buttons in AdminPromoOfferSend
This commit is contained in:
c0mrade
2026-02-02 07:56:53 +03:00
parent 0c9d09280c
commit 68c9cee52f
4 changed files with 7 additions and 7 deletions

View File

@@ -509,7 +509,7 @@ export default function AdminBanSystem() {
href="https://t.me/fringg"
target="_blank"
rel="noopener noreferrer"
className="flex w-full items-center justify-center gap-3 rounded-xl bg-gradient-to-r from-[#0088cc] to-[#0099dd] px-4 py-3 font-medium text-white transition-all duration-200 hover:scale-[1.02] hover:from-[#0077bb] hover:to-[#0088cc] hover:shadow-lg hover:shadow-[#0088cc]/20"
className="flex w-full items-center justify-center gap-2 rounded-lg bg-gradient-to-r from-[#0088cc] to-[#0099dd] px-4 py-2 text-sm font-medium text-white transition-all duration-200 hover:from-[#0077bb] hover:to-[#0088cc] hover:shadow-lg hover:shadow-[#0088cc]/20"
>
<svg className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
@@ -520,7 +520,7 @@ export default function AdminBanSystem() {
{/* Back Button */}
<button
onClick={() => window.history.back()}
className="flex w-full items-center justify-center gap-2 rounded-xl border border-dark-600 bg-dark-700 px-4 py-3 font-medium text-dark-200 transition-all duration-200 hover:border-dark-500 hover:bg-dark-600 hover:text-dark-100"
className="flex w-full items-center justify-center gap-2 rounded-lg border border-dark-600 bg-dark-700 px-4 py-2 text-sm font-medium text-dark-200 transition-all duration-200 hover:border-dark-500 hover:bg-dark-600 hover:text-dark-100"
>
<svg
className="h-5 w-5"

View File

@@ -352,7 +352,7 @@ export default function AdminBroadcastDetail() {
<button
onClick={() => stopMutation.mutate(broadcast.id)}
disabled={stopMutation.isPending}
className="flex w-full items-center justify-center gap-2 rounded-xl border border-error-500/30 bg-error-500/20 py-3 text-error-400 transition-colors hover:bg-error-500/30 disabled:opacity-50"
className="flex w-full items-center justify-center gap-2 rounded-lg border border-error-500/30 bg-error-500/20 px-4 py-2 text-sm text-error-400 transition-colors hover:bg-error-500/30 disabled:opacity-50"
>
<StopIcon />
{stopMutation.isPending ? t('admin.broadcasts.stopping') : t('admin.broadcasts.stop')}

View File

@@ -350,7 +350,7 @@ export default function AdminPromoOfferSend() {
<div className="mb-4 flex gap-2">
<button
onClick={() => setSendMode('segment')}
className={`flex flex-1 items-center justify-center gap-2 rounded-lg border py-3 text-sm font-medium transition-colors ${
className={`flex flex-1 items-center justify-center gap-2 rounded-lg border py-2.5 text-sm font-medium transition-colors ${
sendMode === 'segment'
? 'border-accent-500 bg-accent-500/10 text-accent-400'
: 'border-dark-600 text-dark-400 hover:text-dark-200'
@@ -361,7 +361,7 @@ export default function AdminPromoOfferSend() {
</button>
<button
onClick={() => setSendMode('user')}
className={`flex flex-1 items-center justify-center gap-2 rounded-lg border py-3 text-sm font-medium transition-colors ${
className={`flex flex-1 items-center justify-center gap-2 rounded-lg border py-2.5 text-sm font-medium transition-colors ${
sendMode === 'user'
? 'border-accent-500 bg-accent-500/10 text-accent-400'
: 'border-dark-600 text-dark-400 hover:text-dark-200'

View File

@@ -592,7 +592,7 @@
/* Buttons - Dark */
.btn {
@apply inline-flex items-center justify-center gap-2 rounded-xl px-5 py-2.5 text-sm font-medium transition-all duration-300 ease-smooth hover:scale-[1.02] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-dark-900 active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50;
@apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all duration-200 ease-smooth focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-dark-900 active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50;
}
.btn-primary {
@@ -612,7 +612,7 @@
}
.btn-icon {
@apply rounded-xl p-2.5 text-dark-400 transition-all duration-300 hover:scale-110 hover:bg-dark-800 hover:text-dark-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent-500/50 active:scale-95;
@apply rounded-lg p-2 text-dark-400 transition-all duration-200 hover:bg-dark-800 hover:text-dark-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent-500/50 active:scale-95;
}
/* Highlighted button for onboarding */