mirrors/smov
mirrors/smov
1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-20 14:37:43 +01:00
Code Issues Wiki Activity

Make x-button more visible

Browse source
This commit is contained in:
Isra 2024-03-06 10:56:06 -06:00
parent 89bc201b73
commit b74a4cd4c6
2 changed files with 19 additions and 42 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 (
<div className={props.className || undefined} onClick={props.onClick}>
<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} />
</div>

59
themes/default.ts
View file

@ -31,7 +31,7 @@ const tokens = {
c200: "#8A293B",
c300: "#812435",
c400: "#701B2B",
}
},
},
blue: {
c50: "#ADADF5",
@ -43,7 +43,7 @@ const tokens = {
c600: "#1B1B41",
c700: "#171736",
c800: "#101020",
c900: "#0B0B13"
c900: "#0B0B13",
},
purple: {
c50: "#D5AAFF",
@ -55,7 +55,7 @@ const tokens = {
c600: "#411F64",
c700: "#31184A",
c800: "#221134",
c900: "#160B22"
c900: "#160B22",
},
ash: {
c50: "#7F8D9B",
@ -67,7 +67,7 @@ const tokens = {
c600: "#172532",
c700: "#131E29",
c800: "#101820",
c900: "#0C1216"
c900: "#0C1216",
},
shade: {
c50: "#676790",
@ -77,11 +77,11 @@ const tokens = {
c400: "#272741",
c500: "#1E1E32",
c600: "#171728",
c700: "#131322",
c700: "#000000",
c800: "#0F0F1B",
c900: "#0A0A12"
}
}
c900: "#0A0A12",
},
};
export const defaultTheme = {
extend: {
@ -94,31 +94,29 @@ export const defaultTheme = {
// Branding
pill: {
background: tokens.shade.c300,
backgroundHover: tokens.shade.c200,
background: tokens.shade.c400,
backgroundHover: tokens.shade.c500,
highlight: tokens.blue.c200,
activeBackground: tokens.shade.c300,
},
// meta data for the theme itself
global: {
accentA: tokens.blue.c200,
accentB: tokens.blue.c300,
},
// light bar
lightBar: {
light: tokens.blue.c400,
},
// Buttons
buttons: {
toggle: tokens.purple.c300,
toggleDisabled: tokens.ash.c500,
danger: tokens.semantic.rose.c300,
dangerHover: tokens.semantic.rose.c200,
secondary: tokens.ash.c700,
secondaryText: tokens.semantic.silver.c300,
secondaryHover: tokens.ash.c700,
@ -130,7 +128,7 @@ export const defaultTheme = {
cancel: tokens.ash.c500,
cancelHover: tokens.ash.c300,
},
// only used for body colors/textures
background: {
main: tokens.shade.c900,
@ -140,11 +138,6 @@ export const defaultTheme = {
accentB: tokens.blue.c500,
},
// Modals
modal: {
background: tokens.shade.c800,
},
// typography
type: {
logo: tokens.purple.c100,
@ -154,7 +147,6 @@ export const defaultTheme = {
divider: tokens.ash.c500,
secondary: tokens.ash.c100,
danger: tokens.semantic.red.c100,
success: tokens.semantic.green.c100,
link: tokens.purple.c100,
linkHover: tokens.purple.c50,
},
@ -162,7 +154,6 @@ export const defaultTheme = {
// search bar
search: {
background: tokens.shade.c500,
hoverBackground: tokens.shade.c600,
focused: tokens.shade.c400,
placeholder: tokens.shade.c100,
icon: tokens.shade.c100,
@ -233,28 +224,14 @@ export const defaultTheme = {
},
saveBar: {
background: tokens.shade.c800
}
background: tokens.shade.c800,
},
},
// Utilities
utils: {
divider: tokens.ash.c300,
},
// Onboarding
onboarding: {
bar: tokens.shade.c400,
barFilled: tokens.purple.c300,
divider: tokens.shade.c200,
card: tokens.shade.c800,
cardHover: tokens.shade.c700,
border: tokens.shade.c600,
good: tokens.purple.c100,
best: tokens.semantic.yellow.c100,
link: tokens.purple.c100,
},
// Error page
errors: {
card: tokens.shade.c800,
@ -290,7 +267,7 @@ export const defaultTheme = {
autoPlay: {
background: tokens.ash.c700,
hover: tokens.ash.c500
hover: tokens.ash.c500,
},
scraping: {