Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Styling #301

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Styling #301

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
75bb0d0
update fonts
Dec 11, 2023
c2a9561
style changes
Dec 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const Header = () => {
</Link>
</div>
<div className="flex items-center justify-end space-x-2">
<div className="flex w-[200px] justify-end">
<div className="solana-wallet-button flex w-[200px] justify-end [&_button]:!rounded-none">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why !rounded_none, I'm curious

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LOL seems like it's to give more priority to the style and override another rule

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lets not do it this way, this is not very friendly to future maintainers, we can just override the solana-wallet-button class in globals.css

<WalletMultiButtonDynamic
style={{
padding: '0 18px',
Expand Down
26 changes: 14 additions & 12 deletions frontend/components/WalletModalButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,19 @@ import { WalletModalButton as SolanaWalletModalButton } from '@solana/wallet-ada

export function WalletModalButton() {
return (
<SolanaWalletModalButton
style={{
padding: '0 64px',
border: 'solid',
borderWidth: '1px',
borderColor: 'rgb(113 66 207)',
borderRadius: '9999px',
whiteSpace: 'nowrap',
background: 'rgb(113 66 207)',
height: '45px',
}}
/>
<div className="[&_button]:!rounded-none">
<SolanaWalletModalButton
style={{
padding: '0 64px',
border: 'solid',
borderWidth: '1px',
borderColor: 'rgb(113 66 207)',
borderRadius: '9999px',
whiteSpace: 'nowrap',
background: 'rgb(113 66 207)',
height: '45px',
}}
/>
</div>
)
}
16 changes: 11 additions & 5 deletions frontend/components/modals/LockedModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,7 @@ function LockedModalButton({
<>
<button
type="button"
className="primary-btn min-w-[145px] px-8 py-3 text-base font-semibold hover:bg-blueGemHover disabled:bg-valhalla"
className="btn btn--light"
onClick={() =>
unvestedLockAll.mutate({
mainStakeAccount: mainStakeAccount as StakeAccount,
Expand All @@ -260,12 +260,14 @@ function LockedModalButton({
Stake all
</Tooltip>
) : (
'Stake all'
<span className="relative inline-flex items-center whitespace-nowrap">
Stake all
</span>
)}
</button>
<button
type="button"
className="primary-btn min-w-[145px] px-8 py-3 text-base font-semibold hover:bg-blueGemHover disabled:bg-valhalla"
className="btn btn--dark"
onClick={() =>
unvestedUnlockAll.mutate({
mainStakeAccount: mainStakeAccount as StakeAccount,
Expand Down Expand Up @@ -294,10 +296,14 @@ function LockedModalButton({
}
className="m-4"
>
Unstake all
<span className="relative inline-flex items-center whitespace-nowrap">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<span className="relative inline-flex items-center whitespace-nowrap"> could be refactored I guess

Unstake all
</span>
</Tooltip>
) : (
'Unstake all'
<span className="relative inline-flex items-center whitespace-nowrap">
Unstake all
</span>
)}
</button>
</>
Expand Down
24 changes: 11 additions & 13 deletions frontend/components/panels/components/ActionButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,16 @@ export function ActionButton({
tooltipContentOnDisabled,
}: ActionButtonProps) {
return (
<button
className="action-btn text-base "
onClick={onAction}
disabled={isActionDisabled || isActionLoading}
>
{isActionLoading ? (
<Spinner />
) : isActionDisabled ? (
<Tooltip content={tooltipContentOnDisabled}>{actionLabel}</Tooltip>
) : (
actionLabel
)}
</button>
<Tooltip content={tooltipContentOnDisabled}>
<button
className="btn btn--light"
onClick={onAction}
disabled={isActionDisabled || isActionLoading}
>
<span className="relative inline-flex items-center whitespace-nowrap">
{isActionLoading ? <Spinner /> : actionLabel}
</span>
</button>
</Tooltip>
)
}
2 changes: 1 addition & 1 deletion frontend/components/panels/components/AmountInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
/>
)
}
2 changes: 1 addition & 1 deletion frontend/pages/_document.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ class CustomDocument extends Document {
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;600;700&family=Urbanist:wght@400;600;700&display=swap"
href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@300;400;600&family=Red+Hat+Mono&family=Red+Hat+Text&display=swap"
rel="stylesheet"
/>
<link
Expand Down
2 changes: 1 addition & 1 deletion frontend/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ const Staking: NextPage = () => {
<Dialog.Panel className="w-full max-w-md transform rounded-2xl border-2 border-purpleHeart bg-jaguar p-10 text-left align-middle shadow-xl transition-all">
<Dialog.Title
as="h3"
className="text-md font-inter font-bold leading-6 "
className="text-md font-header font-bold leading-6 "
>
Select stake account
</Dialog.Title>
Expand Down
42 changes: 30 additions & 12 deletions frontend/styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,37 +12,47 @@
.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 {
@apply text-light text-sm hover:text-white;
}

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

.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 {
Expand All @@ -55,15 +65,15 @@
}

.wallet-adapter-modal-wrapper {
@apply bg-darkGray2 max-w-[660px] rounded-4xl;
@apply bg-darkGray2 max-w-[660px] rounded-none;
}

.wallet-adapter-modal-title {
@apply text-[32px] md:text-[44px] font-body max-w-[480px] leading-[1.1] text-light;
}

.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 {
Expand All @@ -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;
}
Expand Down
10 changes: 3 additions & 7 deletions frontend/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
Loading