Merge pull request #23 from tnfAngel-Chat/dev

better theme colors
tnfAngel-Chat · May 9, 2024 · d680585 · d680585
2 parents 095c0c8 + a7ad096
commit d680585
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 8 deletions.
diff --git a/src/components/channel/InputArea.tsx b/src/components/channel/InputArea.tsx
@@ -431,7 +431,15 @@ export default function InputArea({ channel }: Readonly<InputBoxProps>) {
 									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
@@ -49,7 +49,7 @@ export default function UserProfileModal({
 							</Center>
 							<Center>
 								<Box textAlign='left'>
-									<OverflownText fontSize='xl' tooltipPlacement='top'>
+									<OverflownText fontSize='xl' tooltipPlacement='top' fontWeight='bold'>
 										@{user.username}
 									</OverflownText>
 									{user.presence && (

diff --git 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',