diff --git a/lib/components/AvatarButton.tsx b/lib/components/AvatarButton.tsx index 288973b..70bb3e0 100644 --- a/lib/components/AvatarButton.tsx +++ b/lib/components/AvatarButton.tsx @@ -23,8 +23,8 @@ export function AvatarButton(props: Props) { border: `2px solid ${theme.palette.gray.main}`, }, "&:active .MuiAvatar-root": { - backgroundColor: theme.palette.purple.dark, - color: theme.palette.purple.dark, + backgroundColor: theme.palette.purple.main, + color: theme.palette.purple.main, border: "1px solid black", }, } diff --git a/lib/components/BurgerButton.tsx b/lib/components/BurgerButton.tsx index 3788368..d4aa9ba 100644 --- a/lib/components/BurgerButton.tsx +++ b/lib/components/BurgerButton.tsx @@ -14,11 +14,11 @@ export function BurgerButton(props: IconButtonProps) { p: 0, color: "black", "&:hover": { - color: theme.palette.purple.dark, + color: theme.palette.purple.main, backgroundColor: "rgb(0 0 0 / 0)", }, "&:active": { - color: theme.palette.purple.dark, + color: theme.palette.purple.main, }, }, }, props)} diff --git a/lib/components/CloseButtonSmall.tsx b/lib/components/CloseButtonSmall.tsx index beeda8b..311c80b 100644 --- a/lib/components/CloseButtonSmall.tsx +++ b/lib/components/CloseButtonSmall.tsx @@ -12,7 +12,7 @@ export function CloseButtonSmall(props: IconButtonProps) { height: 12, width: 12, p: 0, - color: theme.palette.purple.dark, + color: theme.palette.purple.main, "&:hover": { color: theme.palette.orange.main, backgroundColor: "rgb(0 0 0 / 0)", diff --git a/lib/components/LogoutButton.tsx b/lib/components/LogoutButton.tsx index 780fbd0..6f4e0e0 100644 --- a/lib/components/LogoutButton.tsx +++ b/lib/components/LogoutButton.tsx @@ -20,7 +20,7 @@ export function LogoutButton(props: IconButtonProps) { backgroundColor: theme.palette.gray.main, }, "&:active": { - backgroundColor: theme.palette.purple.dark, + backgroundColor: theme.palette.purple.main, color: "white", }, } diff --git a/lib/components/PenaLink.tsx b/lib/components/PenaLink.tsx index 1b25c2b..f0b2833 100644 --- a/lib/components/PenaLink.tsx +++ b/lib/components/PenaLink.tsx @@ -14,11 +14,11 @@ export const PenaLink: OverridableComponent> = (props: display: "flex", gap: "3px", textUnderlinePosition: "under", - color: theme.palette.purple.main, - textDecorationColor: theme.palette.purple.dark, + color: theme.palette.purple.light, + textDecorationColor: theme.palette.purple.main, textUnderlineOffset: "2px", "&:hover": { - textDecorationColor: theme.palette.purple.main, + textDecorationColor: theme.palette.purple.light, }, "&:active": { color: "white", diff --git a/lib/components/PenaTextField.tsx b/lib/components/PenaTextField.tsx index 8b413a0..6b3e96c 100644 --- a/lib/components/PenaTextField.tsx +++ b/lib/components/PenaTextField.tsx @@ -93,7 +93,7 @@ export function PenaTextField({ border: `1px solid ${theme.palette.gray.dark}`, }, "&.Mui-focused fieldset": { - border: `2px solid ${theme.palette.purple.dark}`, + border: `2px solid ${theme.palette.purple.main}`, }, }, "& .MuiFormHelperText-root.MuiFormHelperText-contained.MuiFormHelperText-filled.Mui-error": { diff --git a/lib/components/WalletButton.tsx b/lib/components/WalletButton.tsx index c32eb1f..adc6afc 100644 --- a/lib/components/WalletButton.tsx +++ b/lib/components/WalletButton.tsx @@ -27,7 +27,7 @@ export function WalletButton(props: Props) { backgroundColor: theme.palette.gray.main, }, "&:active": { - backgroundColor: theme.palette.purple.dark, + backgroundColor: theme.palette.purple.main, color: "white", }, }, diff --git a/lib/components/theme.ts b/lib/components/theme.ts index efcf8ca..0e34498 100644 --- a/lib/components/theme.ts +++ b/lib/components/theme.ts @@ -27,17 +27,17 @@ export const penaMuiTheme = createTheme({ default: "#F2F3F7", }, purple: { - main: "#944FEE", - dark: "#7E2AEA", // from brightPurple -> from purple.main - light: "#C19AF5", // from fadePurple + main: "#7E2AEA", + dark: "#581CA7", + light: "#944FEE", }, bg: { - main: "#333647", // from lightPurple/navbarbg.main - dark: "#252734", // from darkPurple + main: "#333647", + dark: "#252734", }, gray: { - main: "#9A9AAF", // from grey2 - dark: "#4D4D4D", // from grey3 + main: "#9A9AAF", + dark: "#4D4D4D", }, orange: { main: "#FB5607", @@ -50,8 +50,8 @@ export const penaMuiTheme = createTheme({ { props: { variant: "pena-contained-dark" }, style: ({ theme }) => theme.unstable_sx({ - border: `1px solid ${theme.palette.purple.dark}`, - backgroundColor: theme.palette.purple.dark, + border: `1px solid ${theme.palette.purple.main}`, + backgroundColor: theme.palette.purple.main, minWidth: "180px", py: "9px", px: "43px", @@ -63,12 +63,12 @@ export const penaMuiTheme = createTheme({ textTransform: "none", color: "white", "&:hover": { - backgroundColor: theme.palette.purple.main, - border: `1px solid ${theme.palette.purple.main}`, + backgroundColor: theme.palette.purple.light, + border: `1px solid ${theme.palette.purple.light}`, }, "&:active": { backgroundColor: "#FFFFFF", - color: theme.palette.purple.dark, + color: theme.palette.purple.main, } }), }, @@ -91,8 +91,8 @@ export const penaMuiTheme = createTheme({ backgroundColor: theme.palette.bg.dark, }, "&:active": { - backgroundColor: theme.palette.purple.dark, - borderColor: theme.palette.purple.dark, + backgroundColor: theme.palette.purple.main, + borderColor: theme.palette.purple.main, } }), }, @@ -149,7 +149,7 @@ export const penaMuiTheme = createTheme({ { props: { variant: "pena-outlined-purple" }, style: ({ theme }) => theme.unstable_sx({ - border: `1px solid ${theme.palette.purple.dark}`, + border: `1px solid ${theme.palette.purple.main}`, backgroundColor: "rgb(0 0 0 / 0)", minWidth: "180px", py: "9px", @@ -160,7 +160,7 @@ export const penaMuiTheme = createTheme({ lineHeight: "24px", fontWeight: 400, textTransform: "none", - color: theme.palette.purple.dark, + color: theme.palette.purple.main, "&:hover": { backgroundColor: theme.palette.background.default, }, @@ -183,11 +183,11 @@ export const penaMuiTheme = createTheme({ textTransform: "none", color: "white", "&:hover": { - color: theme.palette.purple.main, + color: theme.palette.purple.light, backgroundColor: "rgb(0 0 0 / 0)", }, "&:active": { - color: theme.palette.purple.main, + color: theme.palette.purple.light, } }), }, @@ -203,11 +203,11 @@ export const penaMuiTheme = createTheme({ textTransform: "none", color: "black", "&:hover": { - color: theme.palette.purple.dark, + color: theme.palette.purple.main, backgroundColor: "rgb(0 0 0 / 0)", }, "&:active": { - color: theme.palette.purple.dark, + color: theme.palette.purple.main, } }), }, diff --git a/package.json b/package.json index 206d32f..2ef8cd7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@frontend/kitui", - "version": "1.0.36", + "version": "1.0.37", "description": "test", "main": "./dist/index.js", "module": "./dist/index.js", diff --git a/src/App.tsx b/src/App.tsx index 5c2bd5a..3407f50 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -97,20 +97,20 @@ export function App() { flexWrap: "wrap", gap: 1, }}> + -