From 75bb0d0c8b88754d9a23a39cf69ebbc92fad0c52 Mon Sep 17 00:00:00 2001 From: 0xfirefist Date: Mon, 11 Dec 2023 13:59:33 +0530 Subject: [PATCH 1/2] update fonts --- frontend/pages/_document.tsx | 2 +- frontend/pages/index.tsx | 2 +- frontend/styles/globals.css | 2 +- frontend/tailwind.config.js | 10 +++------- 4 files changed, 6 insertions(+), 10 deletions(-) diff --git a/frontend/pages/_document.tsx b/frontend/pages/_document.tsx index 039d17e6..f50372c0 100644 --- a/frontend/pages/_document.tsx +++ b/frontend/pages/_document.tsx @@ -6,7 +6,7 @@ class CustomDocument extends Document { { Select stake account diff --git a/frontend/styles/globals.css b/frontend/styles/globals.css index d3a3f9ff..ccb0ebf5 100644 --- a/frontend/styles/globals.css +++ b/frontend/styles/globals.css @@ -42,7 +42,7 @@ } .diaglogTitle { - @apply mb-8 text-center font-body text-[32px] lg:text-[44px] lg:mb-11 leading-[1.1]; + @apply mb-8 text-center font-header text-[32px] lg:text-[44px] lg:mb-11 leading-[1.1]; } .input-no-spin::-webkit-inner-spin-button { diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index 086c10f8..e51bca61 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -66,13 +66,9 @@ module.exports = { offPurple: '#745E9D', }, fontFamily: { - arboria: 'arboria, sans-serif', - roboto: 'roboto, sans-serif', - robotoMono: 'roboto-mono, monospace', - inter: 'inter, sans-serif', - poppins: 'poppins, sans-serif', - body: 'Urbanist, sans-serif', - mono: 'IBM Plex Mono, monospace', + header: ["'Red Hat Display'", 'sans-serif'], + body: ["'Red Hat Text'", 'sans-serif'], + mono: ["'Red Hat Mono'", 'monospace'], }, extend: { From c2a95614241aa01ac6c196c3fa2a007380839693 Mon Sep 17 00:00:00 2001 From: 0xfirefist Date: Mon, 11 Dec 2023 18:55:32 +0530 Subject: [PATCH 2/2] style changes --- frontend/components/Header.tsx | 2 +- frontend/components/WalletModalButton.tsx | 26 ++++++------ frontend/components/modals/LockedModal.tsx | 16 +++++--- .../panels/components/ActionButton.tsx | 24 +++++------ .../panels/components/AmountInput.tsx | 2 +- frontend/styles/globals.css | 40 ++++++++++++++----- 6 files changed, 67 insertions(+), 43 deletions(-) diff --git a/frontend/components/Header.tsx b/frontend/components/Header.tsx index c0468ab8..2e7943fa 100644 --- a/frontend/components/Header.tsx +++ b/frontend/components/Header.tsx @@ -46,7 +46,7 @@ const Header = () => {
-
+
+
+ +
) } diff --git a/frontend/components/modals/LockedModal.tsx b/frontend/components/modals/LockedModal.tsx index b4f8545d..8f78b740 100644 --- a/frontend/components/modals/LockedModal.tsx +++ b/frontend/components/modals/LockedModal.tsx @@ -233,7 +233,7 @@ function LockedModalButton({ <> diff --git a/frontend/components/panels/components/ActionButton.tsx b/frontend/components/panels/components/ActionButton.tsx index 248f31d0..83115493 100644 --- a/frontend/components/panels/components/ActionButton.tsx +++ b/frontend/components/panels/components/ActionButton.tsx @@ -16,18 +16,16 @@ export function ActionButton({ tooltipContentOnDisabled, }: ActionButtonProps) { return ( - + + + ) } diff --git a/frontend/components/panels/components/AmountInput.tsx b/frontend/components/panels/components/AmountInput.tsx index 003fa46d..8058a7fd 100644 --- a/frontend/components/panels/components/AmountInput.tsx +++ b/frontend/components/panels/components/AmountInput.tsx @@ -11,7 +11,7 @@ export function AmountInput({ amount, onAmountChange }: AmountInputProps) { autoComplete="amount" value={amount} onChange={(e) => onAmountChange(e.target.value)} - className="input-no-spin mb-8 mt-1 block h-14 w-full rounded-full bg-darkGray4 px-4 text-center text-lg font-semibold focus:outline-none" + className="input-no-spin mb-8 mt-1 block h-14 w-full bg-darkGray4 px-4 text-center text-lg font-semibold focus:outline-none" /> ) } diff --git a/frontend/styles/globals.css b/frontend/styles/globals.css index ccb0ebf5..5913a799 100644 --- a/frontend/styles/globals.css +++ b/frontend/styles/globals.css @@ -12,22 +12,32 @@ .gradient-border { @apply absolute left-8 bottom-0 h-px w-[calc(100%-64px)] bg-radial opacity-60; } + .btn-bg { + @apply absolute top-px left-px h-[calc(100%-2px)] w-[calc(100%-2px)] transition-all; + } } -.primary-btn { - @apply rounded-full h-[45px] text-xs px-8 uppercase font-mono border border-solid border-pythPurple bg-pythPurple whitespace-nowrap; +.btn { + @apply relative inline-block py-3 px-8 text-sm transition-all before:btn-bg; + @apply disabled:cursor-not-allowed disabled:opacity-40; } -.secondary-btn { - @apply rounded-full px-8 uppercase font-mono h-[45px] bg-darkGray2 leading-none transition-colors; -} +.btn--dark { + @apply bg-radial before:bg-dark; + @apply hover:text-dark hover:before:bg-light; + /* disable hover effect when disabled */ + @apply disabled:text-light disabled:before:bg-dark; -.action-btn { - @apply rounded-full px-8 uppercase font-mono leading-none h-[45px] transition-colors bg-pythPurple hover:bg-mediumSlateBlue font-semibold disabled:opacity-70 disabled:hover:bg-pythPurple; } +.btn--light { + @apply z-10 bg-radial2 text-dark before:bg-light; + @apply hover:text-light hover:before:bg-dark; + /* disable hover effect when disabled */ + @apply disabled:!text-dark disabled:before:!bg-light; +} .outlined-btn { - @apply rounded-full bg-darkGray2 px-6 py-1 transition-colors; + @apply bg-darkGray2 px-6 py-1 transition-colors; } .nav-link { @@ -35,7 +45,7 @@ } .diaglogPanel { - @apply pt-20 pb-8 px-6 lg:p-10 md:mt-[92px] flex h-full min-h-[420px] w-[calc(100%-64px)] max-w-3xl transform items-center justify-center rounded-[40px] bg-[rgba(49,47,71,0.85)] p-5 text-center align-middle shadow-xl transition-all; + @apply pt-20 pb-8 px-6 lg:p-10 md:mt-[92px] flex h-full min-h-[420px] w-[calc(100%-64px)] max-w-3xl transform items-center justify-center bg-[rgba(49,47,71)] p-5 text-center align-middle shadow-xl transition-all; } .diaglogClose { @apply absolute right-10 top-8 flex items-center leading-none; @@ -55,7 +65,7 @@ } .wallet-adapter-modal-wrapper { - @apply bg-darkGray2 max-w-[660px] rounded-4xl; + @apply bg-darkGray2 max-w-[660px] rounded-none; } .wallet-adapter-modal-title { @@ -63,7 +73,7 @@ } .wallet-adapter-modal-list { - @apply mx-auto max-w-[380px] text-light; + @apply mx-auto max-w-[380px] text-light !rounded-none; } .wallet-adapter-modal-list-more { @@ -74,6 +84,14 @@ background-color: #413e53; } +.wallet-adapter-dropdown-list-active { + @apply rounded-none; +} + +.wallet-adapter-dropdown-list-item { + @apply rounded-none +} + .wallet-adapter-modal-button-close { @apply bg-transparent; }