fix(): Fixing minor UI issues

Author: ar1603

src/components/WavyBackground/WavyBackground.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { createNoise3D } from 'simplex-noise';
+import { Noise } from '../Noise';
 
 const WavyBackground = ({
   children,
@@ -110,20 +111,21 @@ const WavyBackground = ({
     <div
       className={'flex flex-col items-center justify-center'}
       style={{
-        height: '15vh',
+        height: '50vh',
         zIndex: 0,
+        transform: 'translateY(-16vh)',
         overflowX: 'clip',
         mixBlendMode: 'lighten',
       }}
     >
+      <Noise />
       <canvas
         className="inset-0 z-0"
         ref={canvasRef}
         id="canvas"
         style={{
           zIndex: -1,
-          height: '100vh',
-          width: '100%',
+          width: '100vw',
           ...(isSafari ? { filter: `blur(${blur}px)` } : {}),
         }}
       ></canvas>

src/screens/articles/components/CommentBox.tsx

@@ -7,6 +7,8 @@ import {
   Button,
   VStack,
   Text,
+  Avatar,
+  Textarea,
 } from '@chakra-ui/react';
 import { useAddComment, useGetComments } from '@services';
 import { useMemo, useState } from 'react';
@@ -84,9 +86,12 @@ const CommentBox = ({ articleKey }: { articleKey: string }) => {
                   borderStyle={'dashed'}
                   mb={2}
                 >
-                  <Heading size={'md'}>
-                    🤖{comment.name} 📫{comment.email}
-                  </Heading>
+                  <HStack>
+                    <Avatar name={comment.name} size={'sm'} bg="teal.500" />
+                    <Heading size={'sm'} verticalAlign={'middle'}>
+                      {comment.name} 📫{comment.email}
+                    </Heading>
+                  </HStack>
                   <Text
                     as={'span'}
                     fontSize={'md'}
@@ -117,20 +122,21 @@ const CommentBox = ({ articleKey }: { articleKey: string }) => {
         <Divider />
         <Text alignSelf={'start'}>Add a Comment</Text>
         <HStack columnGap={4} w={'100%'}>
-          <Input
-            type="text"
-            placeholder="Enter email"
-            value={state.email}
-            onChange={(e) => setState({ ...state, email: e.target.value })}
-          />
+          <Avatar size="sm" bg="gray.500" name={state.name} />
           <Input
             type="text"
             placeholder="Enter Name"
             value={state.name}
             onChange={(e) => setState({ ...state, name: e.target.value })}
           />
+          <Input
+            type="email"
+            placeholder="Enter email"
+            value={state.email}
+            onChange={(e) => setState({ ...state, email: e.target.value })}
+          />
         </HStack>
-        <Input
+        <Textarea
           placeholder="Add a comment"
           value={state.comment}
           onChange={(e) => setState({ ...state, comment: e.target.value })}

src/screens/articles/components/SideViewer.tsx

@@ -61,7 +61,11 @@ const SideViewer = ({
       <Divider />
 
       <HStack w={'100%'} justifyContent={'space-evenly'}>
-        <Button size={'sm'} onClick={() => likeArticle({ articleKey })}>
+        <Button
+          size={'sm'}
+          onClick={() => likeArticle({ articleKey })}
+          _active={{ bg: 'green.500' }}
+        >
           Like Article👍
         </Button>
         <Button

src/screens/mainFlow/CoverContent/CoverContent.tsx

@@ -15,7 +15,7 @@ const MusicMap: Record<CharacterType, string> = {
 const CoverContent = () => {
   const { t } = useTranslation();
   const [characterType, setCharacterType] = useState<CharacterType>(
-    CharacterType.REAP,
+    CharacterType.COPERNICUS,
   );
 
   return (

src/screens/mainFlow/contents/Work.tsx

@@ -128,7 +128,14 @@ const WorkUIData = () => {
 const Work = () => {
   const { t } = useTranslation();
   return (
-    <Box zIndex={0} minH={'100vh'} width={'99vw'} id="work" paddingX={32}>
+    <Box
+      zIndex={0}
+      minH={'100vh'}
+      width={'99vw'}
+      id="work"
+      paddingX={32}
+      overflow={'clip'}
+    >
       <Heading position={'sticky'} top={'10vh'} zIndex={3}>
         {t('work.title')}
       </Heading>

src/screens/mainFlow/contents/projects/HeroText.tsx

@@ -14,6 +14,7 @@ const HeroText = ({ opacity }: { opacity: MotionValue<number> }) => {
         top: '8vh',
         overflowX: 'hidden',
         fontSize: '5xl',
+        textShadow: '0 0 1rem #000',
       }}
     >
       <Text

src/screens/mainFlow/contents/projects/Projects.tsx

@@ -30,7 +30,15 @@ const Projects = () => {
       >
         <WavyBackground />
       </motion.div>
-      <Wrap style={{ zIndex: 0 }} spacing={16} justify="center" mx={24} mb={24}>
+      <Wrap
+        style={{ zIndex: 0 }}
+        spacing={16}
+        justify="center"
+        mx={24}
+        mb={24}
+        transform="translateY(-50vh)"
+        marginBottom={'-30vh'}
+      >
         {PROJECT_DATA.map(({ title, tags, icon, description, link }, index) => (
           <Card
             key={index}