zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

[D1X] Add interstitials, component tweaks, placeholders (#4697)

Browse source 
* Add interstitials, component tweaks, placeholders

* Tweak feed card styles

* Port over same fix to ProfileCard

* Add browse more link on desktop

* Rm Gemfile

* Update logContext

* Update logContext

* Add click metric to cards

* Pass through props to ProfileCard.Link

* 2-up grid for profile cards on desktop web

* Add secondary_inverted button color

* Use inverted button color

* Adjust follow button layout

* Update skeleton

* Use round button

* Translate
This commit is contained in:
Eric Bailey 2024-07-02 21:34:18 -05:00 • committed by GitHub
parent 6af78de9ee
commit 0598fc2faa
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 564 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

71
src/components/Button.tsx
View file

@ -21,6 +21,7 @@ export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'gradient'
export type ButtonColor =
| 'primary'
| 'secondary'
| 'secondary_inverted'
| 'negative'
| 'gradient_sky'
| 'gradient_midnight'
@ -217,6 +218,43 @@ export const Button = React.forwardRef<View, ButtonProps>(
borderWidth: 1,
})
if (!disabled) {
baseStyles.push(a.border, {
borderColor: t.palette.contrast_300,
})
hoverStyles.push(t.atoms.bg_contrast_50)
} else {
baseStyles.push(a.border, {
borderColor: t.palette.contrast_200,
})
}
} else if (variant === 'ghost') {
if (!disabled) {
baseStyles.push(t.atoms.bg)
hoverStyles.push({
backgroundColor: t.palette.contrast_25,
})
}
}
} else if (color === 'secondary_inverted') {
if (variant === 'solid') {
if (!disabled) {
baseStyles.push({
backgroundColor: t.palette.contrast_900,
})
hoverStyles.push({
backgroundColor: t.palette.contrast_950,
})
} else {
baseStyles.push({
backgroundColor: t.palette.contrast_700,
})
}
} else if (variant === 'outline') {
baseStyles.push(a.border, t.atoms.bg, {
borderWidth: 1,
})
if (!disabled) {
baseStyles.push(a.border, {
borderColor: t.palette.contrast_300,
@ -344,6 +382,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
const gradient = {
primary: tokens.gradients.sky,
secondary: tokens.gradients.sky,
secondary_inverted: tokens.gradients.sky,
negative: tokens.gradients.sky,
gradient_sky: tokens.gradients.sky,
gradient_midnight: tokens.gradients.midnight,
@ -499,6 +538,38 @@ export function useSharedButtonTextStyles() {
})
}
}
} else if (color === 'secondary_inverted') {
if (variant === 'solid' || variant === 'gradient') {
if (!disabled) {
baseStyles.push({
color: t.palette.white,
})
} else {
baseStyles.push({
color: t.palette.contrast_400,
})
}
} else if (variant === 'outline') {
if (!disabled) {
baseStyles.push({
color: t.palette.contrast_600,
})
} else {
baseStyles.push({
color: t.palette.contrast_300,
})
}
} else if (variant === 'ghost') {
if (!disabled) {
baseStyles.push({
color: t.palette.contrast_600,
})
} else {
baseStyles.push({
color: t.palette.contrast_300,
})
}
}
} else if (color === 'negative') {
if (variant === 'solid' || variant === 'gradient') {
if (!disabled) {