fix colors

tnfAngel-Chat · May 9, 2024 · 980d461 · 980d461
1 parent 4c96581
commit 980d461
Show file tree

Hide file tree

Showing 6 changed files with 148 additions and 145 deletions.
diff --git a/src/components/channel/ChannelTopBarContent.tsx b/src/components/channel/ChannelTopBarContent.tsx
@@ -6,7 +6,7 @@ import useThemeColors from '@/hooks/useThemeColors';
 import { toggleChannelMembers } from '@/store/slices/collapsiblesSlice';
 import { ChannelTypes } from '@/types/enums/ChannelTypes';
 import type { Channel } from '@/types/interfaces/Channel';
-import { Center, Flex, Icon, IconButton, Spacer, useDisclosure } from '@chakra-ui/react';
+import {  Flex, Icon, IconButton, Spacer, useDisclosure } from '@chakra-ui/react';
 import { useState } from 'react';
 import { MdAlternateEmail, MdMenu, MdNumbers, MdPeople, MdPhone, MdSearch, MdVideocam } from 'react-icons/md';
 import { useDispatch } from 'react-redux';
@@ -21,7 +21,12 @@ export type UserTopBarProps = {
 	channelRef: any;
 };
 
-export default function ChannelTopBarContent({ channel, userSidebarRef, channelFlexRef, channelRef }: Readonly<UserTopBarProps>) {
+export default function ChannelTopBarContent({
+	channel,
+	userSidebarRef,
+	channelFlexRef,
+	channelRef
+}: Readonly<UserTopBarProps>) {
 	const dispatch = useDispatch();
 	const { getColorValue } = useThemeColors();
 	const recipient = client.users.resolve(channel.type === ChannelTypes.DirectMessage ? channel.recipient : '');
@@ -32,126 +37,110 @@ export default function ChannelTopBarContent({ channel, userSidebarRef, channelF
 
 	return (
 		<>
-			<Flex gap='8px' h='100%' minW='30px' maxH='100%'>
+			<Flex gap='8px' h='100%' minW='30px' maxH='100%' alignItems='center'>
 				{isMobile && (
-					<Center>
-						<IconButton
-							aria-label='Show menu'
-							bg='transparent'
-							size='sm'
-							fontSize='24px'
-							icon={<MdMenu />}
-							onClick={() => {
-								if (mobileShowSidebar) {
-									channelFlexRef.current?.scrollIntoView({
-										behavior: 'smooth'
-									});
-									setMobileShowSidebar(false);
-								} else {
-									channelRef.current?.scrollIntoView({
-										behavior: 'smooth'
-									});
-									setMobileShowSidebar(true);
-								}
-							}}
-						/>
-					</Center>
-				)}
-				<Center>
-					<Icon
-						color={getColorValue('textMutedColor')}
-						as={channel.type === ChannelTypes.Text ? MdNumbers : MdAlternateEmail}
-						boxSize='24px'
-					/>
-				</Center>
-				<Center minW='0px'>
-					{channel.type === ChannelTypes.DirectMessage ? (
-						<UserProfileModal isOpen={isOpen} onClose={onClose} user={recipient} />
-					) : null}
-					<OverflownText
-						fontSize='lg'
-						_hover={{
-							cursor: channel.type === ChannelTypes.DirectMessage ? 'pointer' : undefined
+					<IconButton
+						aria-label='Show menu'
+						bg='transparent'
+						size='sm'
+						fontSize='24px'
+						icon={<MdMenu />}
+						onClick={() => {
+							if (mobileShowSidebar) {
+								channelFlexRef.current?.scrollIntoView({
+									behavior: 'smooth'
+								});
+								setMobileShowSidebar(false);
+							} else {
+								channelRef.current?.scrollIntoView({
+									behavior: 'smooth'
+								});
+								setMobileShowSidebar(true);
+							}
 						}}
-						onClick={channel.type === ChannelTypes.DirectMessage ? onOpen : undefined}
-					>
-						{channel.type === ChannelTypes.DirectMessage ? recipient.username : channel.name}
-					</OverflownText>
-				</Center>
-				{channel.type === ChannelTypes.DirectMessage ? (
-					<Center>
+					/>
+				)}
+				<Icon
+					color={getColorValue('textMutedColor')}
+					as={channel.type === ChannelTypes.Text ? MdNumbers : MdAlternateEmail}
+					boxSize='24px'
+				/>
+				{channel.type === ChannelTypes.DirectMessage && (
+					<UserProfileModal isOpen={isOpen} onClose={onClose} user={recipient} />
+				)}
+				<OverflownText
+					fontSize='lg'
+					_hover={{
+						cursor: channel.type === ChannelTypes.DirectMessage ? 'pointer' : undefined
+					}}
+					onClick={channel.type === ChannelTypes.DirectMessage ? onOpen : undefined}
+				>
+					{channel.type === ChannelTypes.DirectMessage ? recipient.username : channel.name}
+				</OverflownText>
+				{channel.type === ChannelTypes.DirectMessage && (
+					<>
 						<StatusIndicator status={recipient.status} size='13' positioned={false} />
-					</Center>
-				) : null}
-				{channel.type === ChannelTypes.DirectMessage && recipient.presence ? (
-					<Center minW='0px'>
-						<OverflownText fontSize='sm' color={getColorValue('textMutedColor')}>
-							{recipient.presence}
-						</OverflownText>
-					</Center>
-				) : null}
+						{recipient.presence && (
+							<OverflownText fontSize='sm' color={getColorValue('textMutedColor')}>
+								{recipient.presence}
+							</OverflownText>
+						)}
+					</>
+				)}
 			</Flex>
 			<Spacer />
 			<Flex gap={['5px', '10px', '24px']}>
 				{(channel.type === ChannelTypes.DirectMessage || channel.type === ChannelTypes.Group) && (
 					<>
-						<Center>
-							<IconButton
-								aria-label='Start Call'
-								bg='transparent'
-								size='sm'
-								fontSize='24px'
-								icon={<MdPhone />}
-							/>
-						</Center>
-						<Center>
-							<IconButton
-								aria-label='Start Video Call'
-								bg='transparent'
-								size='sm'
-								fontSize='24px'
-								icon={<MdVideocam />}
-							/>
-						</Center>
-					</>
-				)}
-				{channel.type === ChannelTypes.Group || channel.type === ChannelTypes.Text ? (
-					<Center>
 						<IconButton
-							aria-label='Toggle Members'
+							aria-label='Start Call'
 							bg='transparent'
 							size='sm'
 							fontSize='24px'
-							onClick={() => {
-								if (!isMobile) {
-									dispatch(toggleChannelMembers());
-								} else {
-									if (mobileShowUsers) {
-										userSidebarRef.current?.scrollIntoView({
-											behavior: 'smooth'
-										});
-										setMobileShowUsers(false);
-									} else {
-										channelRef.current?.scrollIntoView({
-											behavior: 'smooth'
-										});
-										setMobileShowUsers(true);
-									}
-								}
-							}}
-							icon={<MdPeople />}
+							icon={<MdPhone />}
+						/>
+						<IconButton
+							aria-label='Start Video Call'
+							bg='transparent'
+							size='sm'
+							fontSize='24px'
+							icon={<MdVideocam />}
 						/>
-					</Center>
-				) : null}
-				<Center>
+					</>
+				)}
+				{(channel.type === ChannelTypes.Group || channel.type === ChannelTypes.Text) && (
 					<IconButton
-						aria-label='Search Messages'
+						aria-label='Toggle Members'
 						bg='transparent'
 						size='sm'
 						fontSize='24px'
-						icon={<MdSearch />}
+						onClick={() => {
+							if (!isMobile) {
+								dispatch(toggleChannelMembers());
+							} else {
+								if (mobileShowUsers) {
+									userSidebarRef.current?.scrollIntoView({
+										behavior: 'smooth'
+									});
+									setMobileShowUsers(false);
+								} else {
+									channelRef.current?.scrollIntoView({
+										behavior: 'smooth'
+									});
+									setMobileShowUsers(true);
+								}
+							}
+						}}
+						icon={<MdPeople />}
 					/>
-				</Center>
+				)}
+				<IconButton
+					aria-label='Search Messages'
+					bg='transparent'
+					size='sm'
+					fontSize='24px'
+					icon={<MdSearch />}
+				/>
 			</Flex>
 		</>
 	);

diff --git a/src/components/layout/MainSidebar.tsx b/src/components/layout/MainSidebar.tsx
@@ -102,27 +102,29 @@ export function DirectChannelLink({ channel, isSelected }: Readonly<DirectChanne
 							}
 						/>
 					</Center>
-					<Flex minW='0px' alignItems='start' direction='column'>
+					<Flex
+						minW='0px'
+						alignItems='start'
+						direction='column'
+						color={isSelected ? getColorValue('textColor') : getColorValue('textMutedColor')}
+					>
 						<Box w='100%'>
-							<OverflownText
-								fontSize='md'
-								tooltipPlacement='top'
-								fontWeight='600'
-								color={isSelected ? getColorValue('textColor') : getColorValue('textMutedColor')}
-							>
+							<OverflownText fontSize='md' tooltipPlacement='top' fontWeight='600'>
 								{channel.type === ChannelTypes.DirectMessage ? recipient.username : channel.name}
 							</OverflownText>
 						</Box>
 
-						{channel.type === ChannelTypes.DirectMessage ? (
-							recipient.presence ? (
-								<Text fontSize='sm' noOfLines={1}>
-									{recipient.presence}
-								</Text>
-							) : null
-						) : channel.type === ChannelTypes.Group ? (
-							<Text fontSize='sm'>{channel.recipients.length} Members</Text>
-						) : null}
+						{channel.type === ChannelTypes.DirectMessage
+							? recipient.presence && (
+									<Text fontSize='sm' noOfLines={1}>
+										{recipient.presence}
+									</Text>
+								)
+							: channel.type === ChannelTypes.Group && (
+									<Text fontSize='sm' noOfLines={1}>
+										{channel.recipients.length} Members
+									</Text>
+								)}
 					</Flex>
 				</Flex>
 				{isHovering ? (

diff --git a/src/components/layout/ProfileBox.tsx b/src/components/layout/ProfileBox.tsx
@@ -1,47 +1,51 @@
 import { client } from '@/client';
-import { Box, Center, Flex, IconButton, Spacer, useDisclosure } from '@chakra-ui/react';
+import { Box, Flex, IconButton, Spacer, useDisclosure } from '@chakra-ui/react';
 import { MdSettings } from 'react-icons/md';
 import OverflownText from '../misc/OverflownText';
 import SettingsModal from '../modals/SettingsModal';
 import Avatar from '../user/Avatar';
 import StatusIndicator from '../user/StatusIndicator';
+import useThemeColors from '@/hooks/useThemeColors';
 
 export default function ProfileBox() {
+	const { getColorValue } = useThemeColors();
 	const { isOpen, onOpen, onClose } = useDisclosure();
 	const user = client.user;
 
 	return (
 		<Box w='100%' h='100%' maxW='100%' maxH='100%' py={['10px', '15px']} px={['15px', '20px']}>
 			<Flex minW='0px' h='100%' gap='5px'>
 				<Flex minW='0px' gap='12px' alignItems='left'>
-					<Center>
+					<Box>
 						<Avatar
 							size='40'
 							src={user.avatar}
 							alt='Avatar'
 							indicator={<StatusIndicator status={user.status} size='15' />}
 						/>
-					</Center>
-					<Center w='100%' minW='0px'>
-						<Flex textAlign='left' w='100%' maxW='100%' minW='0px' direction='column'>
+					</Box>
+					<Box w='100%' minW='0px'>
+						<Flex textAlign='left' w='100%' maxW='100%' minW='0px' gap='0px' direction='column'>
 							<OverflownText fontSize='md'>{user.username}</OverflownText>
-							{user.presence ? <OverflownText fontSize='sm' >{user.presence}</OverflownText> : null}
+							{user.presence && (
+								<OverflownText fontSize='sm' color={getColorValue('textMutedColor')}>
+									{user.presence}
+								</OverflownText>
+							)}
 						</Flex>
-					</Center>
+					</Box>
 				</Flex>
 				<Spacer />
-				<Flex gap='24px'>
+				<Flex gap='24px' alignItems='center'>
 					<SettingsModal isOpen={isOpen} onOpen={onOpen} onClose={onClose} />
-					<Center>
-						<IconButton
-							aria-label='Open settings'
-							bg='transparent'
-							size='sm'
-							fontSize='24px'
-							onClick={onOpen}
-							icon={<MdSettings />}
-						/>
-					</Center>
+					<IconButton
+						aria-label='Open settings'
+						bg='transparent'
+						size='sm'
+						fontSize='24px'
+						onClick={onOpen}
+						icon={<MdSettings />}
+					/>
 				</Flex>
 			</Flex>
 		</Box>

diff --git a/src/components/layout/UsersSidebar.tsx b/src/components/layout/UsersSidebar.tsx
@@ -46,11 +46,16 @@ export function UserListItem({ user, onClick }: Readonly<UserListItemProps>) {
 						<OverflownText fontSize='md' tooltipPlacement='top'>
 							{user.username}
 						</OverflownText>
-						{user.presence ? (
-							<OverflownText minW='0px' fontSize='sm' tooltipPlacement='top'>
+						{user.presence && (
+							<OverflownText
+								minW='0px'
+								color={getColorValue('textMutedColor')}
+								fontSize='sm'
+								tooltipPlacement='top'
+							>
 								{user.presence}
 							</OverflownText>
-						) : null}
+						)}
 					</Box>
 				</Center>
 			</Flex>

diff --git a/src/components/modals/SettingsModal.tsx b/src/components/modals/SettingsModal.tsx
@@ -13,7 +13,6 @@ import {
 	ModalHeader,
 	ModalOverlay,
 	Stack,
-	Switch,
 	Text
 } from '@chakra-ui/react';
 import { MdKeyboardArrowDown } from 'react-icons/md';

diff --git a/src/components/modals/UserProfileModal.tsx b/src/components/modals/UserProfileModal.tsx
@@ -52,11 +52,15 @@ export default function UserProfileModal({
 									<OverflownText fontSize='xl' tooltipPlacement='top'>
 										@{user.username}
 									</OverflownText>
-									{user.presence ? (
-										<OverflownText fontSize='sm' tooltipPlacement='top'>
+									{user.presence && (
+										<OverflownText
+											fontSize='sm'
+											color={getColorValue('textMutedColor')}
+											tooltipPlacement='top'
+										>
 											{user.presence}
 										</OverflownText>
-									) : null}
+									)}
 								</Box>
 							</Center>
 						</Flex>