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; }