Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-26 20:51:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #985 from zisra/x-button

Browse Source 
Make x-button more visible
This commit is contained in:
William Oldham 2024-03-06 17:06:40 +00:00 committed by GitHub
commit fcee7001ee
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/buttons/IconPatch.tsx
View File

@ -25,7 +25,7 @@ export function IconPatch(props: IconPatchProps) {
return ( return (
<div className={props.className || undefined} onClick={props.onClick}> <div className={props.className || undefined} onClick={props.onClick}>
<div <div
className={`flex items-center justify-center rounded-full border-2 border-transparent backdrop-blur-lg bg-pill-background bg-opacity-50 transition-[background-color,color,transform,border-color] duration-75 ${transparentClasses} ${clickableClasses} ${activeClasses} ${sizeClasses}`} className={`flex items-center justify-center rounded-full border-2 border-transparent bg-pill-background bg-opacity-100 transition-[background-color,color,transform,border-color] duration-75 ${transparentClasses} ${clickableClasses} ${activeClasses} ${sizeClasses}`}
> >
<Icon icon={props.icon} /> <Icon icon={props.icon} />
</div> </div>

32
themes/default.ts
View File

@ -31,7 +31,7 @@ const tokens = {
c200: "#8A293B", c200: "#8A293B",
c300: "#812435", c300: "#812435",
c400: "#701B2B", c400: "#701B2B",
} },
}, },
blue: { blue: {
c50: "#ADADF5", c50: "#ADADF5",
@ -43,7 +43,7 @@ const tokens = {
c600: "#1B1B41", c600: "#1B1B41",
c700: "#171736", c700: "#171736",
c800: "#101020", c800: "#101020",
c900: "#0B0B13" c900: "#0B0B13",
}, },
purple: { purple: {
c50: "#D5AAFF", c50: "#D5AAFF",
@ -55,7 +55,7 @@ const tokens = {
c600: "#411F64", c600: "#411F64",
c700: "#31184A", c700: "#31184A",
c800: "#221134", c800: "#221134",
c900: "#160B22" c900: "#160B22",
}, },
ash: { ash: {
c50: "#7F8D9B", c50: "#7F8D9B",
@ -67,7 +67,7 @@ const tokens = {
c600: "#172532", c600: "#172532",
c700: "#131E29", c700: "#131E29",
c800: "#101820", c800: "#101820",
c900: "#0C1216" c900: "#0C1216",
}, },
shade: { shade: {
c50: "#676790", c50: "#676790",
@ -79,9 +79,9 @@ const tokens = {
c600: "#171728", c600: "#171728",
c700: "#131322", c700: "#131322",
c800: "#0F0F1B", c800: "#0F0F1B",
c900: "#0A0A12" c900: "#0A0A12",
} },
} };
export const defaultTheme = { export const defaultTheme = {
extend: { extend: {
@ -100,25 +100,25 @@ export const defaultTheme = {
activeBackground: tokens.shade.c300, activeBackground: tokens.shade.c300,
}, },
// meta data for the theme itself // meta data for the theme itself
global: { global: {
accentA: tokens.blue.c200, accentA: tokens.blue.c200,
accentB: tokens.blue.c300, accentB: tokens.blue.c300,
}, },
// light bar // light bar
lightBar: { lightBar: {
light: tokens.blue.c400, light: tokens.blue.c400,
}, },
// Buttons // Buttons
buttons: { buttons: {
toggle: tokens.purple.c300, toggle: tokens.purple.c300,
toggleDisabled: tokens.ash.c500, toggleDisabled: tokens.ash.c500,
danger: tokens.semantic.rose.c300, danger: tokens.semantic.rose.c300,
dangerHover: tokens.semantic.rose.c200, dangerHover: tokens.semantic.rose.c200,
secondary: tokens.ash.c700, secondary: tokens.ash.c700,
secondaryText: tokens.semantic.silver.c300, secondaryText: tokens.semantic.silver.c300,
secondaryHover: tokens.ash.c700, secondaryHover: tokens.ash.c700,
@ -130,7 +130,7 @@ export const defaultTheme = {
cancel: tokens.ash.c500, cancel: tokens.ash.c500,
cancelHover: tokens.ash.c300, cancelHover: tokens.ash.c300,
}, },
// only used for body colors/textures // only used for body colors/textures
background: { background: {
main: tokens.shade.c900, main: tokens.shade.c900,
@ -144,7 +144,7 @@ export const defaultTheme = {
modal: { modal: {
background: tokens.shade.c800, background: tokens.shade.c800,
}, },
// typography // typography
type: { type: {
logo: tokens.purple.c100, logo: tokens.purple.c100,
@ -233,8 +233,8 @@ export const defaultTheme = {
}, },
saveBar: { saveBar: {
background: tokens.shade.c800 background: tokens.shade.c800,
} },
}, },
// Utilities // Utilities
@ -290,7 +290,7 @@ export const defaultTheme = {
autoPlay: { autoPlay: {
background: tokens.ash.c700, background: tokens.ash.c700,
hover: tokens.ash.c500 hover: tokens.ash.c500,
}, },
scraping: { scraping: {