Merge pull request #24 from tnfAngel-Chat:dev

fix spacings & improvements
tnfAngel-Chat · May 9, 2024 · 3999077 · 3999077
2 parents d680585 + 8e93a41
commit 3999077
Show file tree

Hide file tree

Showing 11 changed files with 77 additions and 83 deletions.
diff --git a/src/components/channel/Channel.tsx b/src/components/channel/Channel.tsx
@@ -133,10 +133,14 @@ export default function Channel({ channel }: Readonly<MessagesBoxProps>) {
 	}
 
 	useEffect(() => {
-		mainRef.current?.scrollIntoView({
-			behavior: 'smooth'
-		});
-	}, []);
+		setTimeout(
+			() =>
+				mainRef.current?.scrollIntoView({
+					behavior: 'smooth'
+				}),
+			50
+		);
+	}, [channel.id]);
 
 	return (
 		<Stack w='100%' h='100%' ref={mainRef} wordBreak='break-all' className='adjustScreen'>
@@ -162,9 +166,9 @@ export default function Channel({ channel }: Readonly<MessagesBoxProps>) {
 
 						return (
 							<>
-								{isHeadless ? null : <MessageGroupSpacer />}
+								{!isHeadless && <MessageGroupSpacer />}
 								{MessageElement}
-								{i === stateMessages.length - 1 ? <MessageGroupSpacer /> : null}
+								{i === stateMessages.length - 1 && <MessageGroupSpacer />}
 							</>
 						);
 					})}

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 {  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';
@@ -60,23 +60,32 @@ export default function ChannelTopBarContent({
 						}}
 					/>
 				)}
-				<Icon
-					color={getColorValue('textMutedColor')}
-					as={channel.type === ChannelTypes.Text ? MdNumbers : MdAlternateEmail}
-					boxSize='24px'
-				/>
+				<Flex gap={['3px', '5px', '10px']} alignItems='center' minW='0px'>
+					<Icon
+						color={getColorValue('textMutedColor')}
+						as={
+							channel.type === ChannelTypes.Text
+								? MdNumbers
+								: channel.type === ChannelTypes.Group
+									? MdPeople
+									: MdAlternateEmail
+						}
+						boxSize='24px'
+					/>
+					<OverflownText
+						fontSize='lg'
+						fontWeight='600'
+						_hover={{
+							cursor: channel.type === ChannelTypes.DirectMessage ? 'pointer' : undefined
+						}}
+						onClick={channel.type === ChannelTypes.DirectMessage ? onOpen : undefined}
+					>
+						{channel.type === ChannelTypes.DirectMessage ? recipient.username : channel.name}
+					</OverflownText>
+				</Flex>
 				{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} />

diff --git a/src/components/channel/Message.tsx b/src/components/channel/Message.tsx
@@ -66,10 +66,10 @@ export default function Message({ message, headless, onShowAuthor, ...props }: M
 					</Box>
 				)}
 				<Box textAlign='left'>
-					{headless ? null : (
+					{!headless && (
 						<Flex gap='6px' alignItems='center'>
 							<Text
-								className='text-bold'
+								fontWeight='600'
 								fontSize='md'
 								onClick={onShowAuthor}
 								_hover={{

diff --git a/src/components/friends/FriendsTopBarContent.tsx b/src/components/friends/FriendsTopBarContent.tsx
@@ -10,67 +10,55 @@ import OverflownText from '../misc/OverflownText';
 export default function FriendsTopBarContent({
 	friendsFlexRef,
 	friendsRef
-}: {
+}: Readonly<{
 	friendsFlexRef: any;
 	friendsRef: any;
-}) {
+}>) {
 	const { getColorValue } = useThemeColors();
 	const { isMobile } = useDevice();
 	const [mobileShowSidebar, setMobileShowSidebar] = useState(true);
 
 	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) {
-									friendsFlexRef.current?.scrollIntoView({
-										behavior: 'smooth'
-									});
-									setMobileShowSidebar(false);
-								} else {
-									friendsRef.current?.scrollIntoView({
-										behavior: 'smooth'
-									});
-									setMobileShowSidebar(true);
-								}
-							}}
-						/>
-					</Center>
-				)}
-				<Center>
-					<Icon color={getColorValue('textMutedColor')} as={MdPeople} boxSize='24px' />
-				</Center>
-				<Center minW='0px'>
-					<OverflownText fontSize='lg'>Friends</OverflownText>
-				</Center>
-				<Center minW='0px'>
-					<OverflownText fontSize='sm' color={getColorValue('textMutedColor')}>
-						20
-					</OverflownText>
-				</Center>
-			</Flex>
-			<Spacer />
-			<Flex gap='24px'>
-				<Center>
 					<IconButton
-						aria-label='Search Friend'
+						aria-label='Show menu'
 						bg='transparent'
 						size='sm'
 						fontSize='24px'
-						icon={<MdSearch />}
+						icon={<MdMenu />}
+						onClick={() => {
+							if (mobileShowSidebar) {
+								friendsFlexRef.current?.scrollIntoView({
+									behavior: 'smooth'
+								});
+								setMobileShowSidebar(false);
+							} else {
+								friendsRef.current?.scrollIntoView({
+									behavior: 'smooth'
+								});
+								setMobileShowSidebar(true);
+							}
+						}}
 					/>
-				</Center>
-				<Center>
-					<IconButton aria-label='Add Friend' bg='transparent' size='sm' fontSize='24px' icon={<MdAdd />} />
-				</Center>
+				)}
+				<Flex gap='3px' alignItems='center' minW='0px'>
+					<Icon color={getColorValue('textMutedColor')} as={MdPeople} boxSize='24px' />
+
+					<OverflownText fontSize='lg' fontWeight='600'>
+						Friends
+					</OverflownText>
+				</Flex>
+
+				<OverflownText fontSize='sm' color={getColorValue('textMutedColor')}>
+					20
+				</OverflownText>
+			</Flex>
+			<Spacer />
+			<Flex gap={['5px', '10px', '24px']} alignItems='center'>
+				<IconButton aria-label='Search Friend' bg='transparent' size='sm' fontSize='24px' icon={<MdSearch />} />
+				<IconButton aria-label='Add Friend' bg='transparent' size='sm' fontSize='24px' icon={<MdAdd />} />
 			</Flex>
 		</>
 	);

diff --git a/src/components/general/AppWrapper.tsx b/src/components/general/AppWrapper.tsx
@@ -39,6 +39,7 @@ export default function AppWrapper({ children }: any) {
 								scrollSnapType='x mandatory'
 								scrollSnapStop='always'
 								scrollBehavior='smooth'
+								style={{ scrollbarWidth: 'none' }}
 								overflow='auto'
 							>
 								{children}

diff --git a/src/components/layout/GuildSidebar.tsx b/src/components/layout/GuildSidebar.tsx
@@ -9,7 +9,7 @@ import { Box, Center, Flex, Icon, Stack } from '@chakra-ui/react';
 import Link from 'next/link';
 import { useState } from 'react';
 import { MdNumbers } from 'react-icons/md';
-import { useDispatch, useSelector } from 'react-redux';
+import {  useSelector } from 'react-redux';
 import OverflownText from '../misc/OverflownText';
 import ProfileBox from './ProfileBox';
 
@@ -98,7 +98,7 @@ export default function GuildSidebar({ guild }: { guild: IGuild }) {
 				bg={getColorValue('ternaryBackground')}
 				alignItems='center'
 			>
-				<OverflownText fontWeight='bold'>{guild.name}</OverflownText>
+				<OverflownText fontWeight='600'>{guild.name}</OverflownText>
 			</Flex>
 			<Box h='100%' w='100%' bg={getColorValue('sidebarBackground')} overflow='auto' padding='10px'>
 				<GuildSidebarContent guild={guild} />

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' fontWeight='bold'>
+									<OverflownText fontSize='xl' tooltipPlacement='top' fontWeight='600'>
 										@{user.username}
 									</OverflownText>
 									{user.presence && (

diff --git a/src/components/screens/GuildChannelScreen.tsx b/src/components/screens/GuildChannelScreen.tsx
@@ -53,13 +53,9 @@ export default function GuildChannelScreen() {
 		return <ChannelLoadingScreen guild={undefined} />;
 	}
 
-	console.log(selectedState);
-
 	const channel = channels.find((channel) => channel.id === selectedState.guilds[guild.id]);
 
 	if (!channel) {
-		console.log('Sending to friends (no channel) GuildchannelScreen');
-
 		router.prefetch(`/guilds/${guild.id}`);
 		router.push(`/guilds/${guild.id}`);
 

diff --git a/src/components/screens/GuildScreen.tsx b/src/components/screens/GuildScreen.tsx
@@ -26,8 +26,6 @@ export default function GuildScreen() {
 	const guild = guildsState.guilds.find((guildState) => guildState.id === selectedState.selectedGuild);
 
 	if (!guild) {
-		console.log('Sending to friends (no guild) GuildScreen');
-
 		router.prefetch('/friends');
 		router.push('/friends');
 

diff --git a/src/components/user/StatusIndicator.tsx b/src/components/user/StatusIndicator.tsx
@@ -43,6 +43,8 @@ export default function StatusIndicator({ status, size, positioned = true, toolt
 			<Box
 				w={`${size}px`}
 				h={`${size}px`}
+				minW={`${size}px`}
+				minH={`${size}px`}
 				position='relative'
 				borderWidth='2px'
 				borderRadius='50%'

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -12,10 +12,6 @@ body {
 	user-select: none;
 }
 
-.text-bold {
-	font-weight: 600;
-}
-
 
 .adjustScreen {
 	min-width: 200px;