diff --git a/src/components/channel/InputArea.tsx b/src/components/channel/InputArea.tsx index 9a87aee..4af4603 100644 --- a/src/components/channel/InputArea.tsx +++ b/src/components/channel/InputArea.tsx @@ -431,7 +431,15 @@ export default function InputArea({ channel }: Readonly) { size='md' resize='none' textOverflow='ellipsis' - focusBorderColor={getColorValue('focusBorderColor')} + _hover={{ + background: getColorValue('inputBackground') + }} + _focus={{ + background: getColorValue('inputBackground') + }} + variant='filled' + background={getColorValue('inputBackground')} + focusBorderColor='transparent' onKeyDown={handleKeyDown} onChange={handleChange} value={inputContent} diff --git a/src/components/modals/UserProfileModal.tsx b/src/components/modals/UserProfileModal.tsx index a87a7c7..5cbbc45 100644 --- a/src/components/modals/UserProfileModal.tsx +++ b/src/components/modals/UserProfileModal.tsx @@ -49,7 +49,7 @@ export default function UserProfileModal({
- + @{user.username} {user.presence && ( diff --git a/src/constants/themes.ts b/src/constants/themes.ts index 8e553f8..d171418 100644 --- a/src/constants/themes.ts +++ b/src/constants/themes.ts @@ -4,6 +4,7 @@ export interface ThemeColors { sidebarButtonActive: string; ternaryBackground: string; sidebarButtonHover: string; + inputBackground: string; focusBorderColor: string; modalBackground: string; sidebarBackground: string; @@ -37,16 +38,17 @@ export const themes: Theme[] = [ baseTheme: 'dark', colors: { appBackground: '#333333', - ternaryBackground: '#292929', + ternaryBackground: '#272727', sidebarBackground: '#2E2E2E', modalBackground: '#2E2E2E', primaryBackground: '#333333', secondaryBackground: '#3F3F3F', + inputBackground: '#474747', focusBorderColor: '#FFFFFF21', sidebarButtonHover: '#ffffff10', sidebarButtonActive: '#ffffff20', messageHover: '#00000020', - guildsBackground: '#252525', + guildsBackground: '#232323', separatorColor: '#ffffff20', tooltipBackground: '#181818', iconLinkBackground: '#2E2E2E', @@ -67,10 +69,11 @@ export const themes: Theme[] = [ colors: { appBackground: '#EBEBEB', ternaryBackground: '#FAFAFA', - sidebarBackground: '#F1F1F1', + sidebarBackground: '#E7E7E7', modalBackground: '#F1F1F1', - primaryBackground: '#E2E2E2', + primaryBackground: '#E0E0E0', secondaryBackground: '#EBEBEB', + inputBackground: '#FFFFFF', focusBorderColor: '#0000005E', sidebarButtonHover: '#00000010', sidebarButtonActive: '#00000020', @@ -79,8 +82,8 @@ export const themes: Theme[] = [ separatorColor: '#00000020', tooltipBackground: '#BEBEBE', iconLinkBackground: '#F1F1F1', - textColor: '#0F0F0F', - textMutedColor: '#292929', + textColor: '#202020', + textMutedColor: '#3B3B3B', textBlockedColor: '#ee5959', statusIndicatorBorderColor: '#252525', statusIndicatorOnlineColor: '#2ed458', @@ -101,6 +104,7 @@ export const themes: Theme[] = [ primaryBackground: '#000000', secondaryBackground: '#181818', focusBorderColor: '#3B3B3B', + inputBackground: '#080808', sidebarButtonHover: '#ffffff10', sidebarButtonActive: '#ffffff20', messageHover: '#2E2E2E20', @@ -130,6 +134,7 @@ export const themes: Theme[] = [ modalBackground: '#110C18', secondaryBackground: '#191120', focusBorderColor: '#392947', + inputBackground: '#1F1627', sidebarButtonHover: '#ffffff10', sidebarButtonActive: '#ffffff20', messageHover: '#00000020', @@ -158,6 +163,7 @@ export const themes: Theme[] = [ secondaryBackground: '#00000015', ternaryBackground: '#0000009C', focusBorderColor: '#FFFFFF2A', + inputBackground: '#FFFFFF10', sidebarBackground: '#0000008F', sidebarButtonHover: '#ffffff10', sidebarButtonActive: '#ffffff20', @@ -187,6 +193,7 @@ export const themes: Theme[] = [ secondaryBackground: '#0000001E', ternaryBackground: '#0000009A', focusBorderColor: '#FFFFFF2A', + inputBackground: '#FFFFFF10', sidebarBackground: '#0000008F', sidebarButtonHover: '#ffffff10', sidebarButtonActive: '#ffffff20', @@ -216,6 +223,7 @@ export const themes: Theme[] = [ secondaryBackground: '#00000015', ternaryBackground: '#0000009C', focusBorderColor: '#FFFFFF2A', + inputBackground: '#FFFFFF10', sidebarBackground: '#0000008F', sidebarButtonHover: '#ffffff10', sidebarButtonActive: '#ffffff20', @@ -245,6 +253,7 @@ export const themes: Theme[] = [ secondaryBackground: '#0000003A', ternaryBackground: '#00000098', focusBorderColor: '#FFFFFF2A', + inputBackground: '#FFFFFF10', sidebarBackground: '#0000007A', sidebarButtonHover: '#ffffff10', sidebarButtonActive: '#ffffff20', @@ -274,6 +283,7 @@ export const themes: Theme[] = [ secondaryBackground: '#0000003A', ternaryBackground: '#00000098', focusBorderColor: '#FFFFFF2A', + inputBackground: '#FFFFFF10', sidebarBackground: '#0000007A', sidebarButtonHover: '#ffffff10', sidebarButtonActive: '#ffffff20',