Merge pull request #458 from BinaryStudioAcademy/task/OV-456-fix-styles

OV-456: fix styles
BinaryStudioAcademy · Sep 28, 2024 · 3d2e557 · 3d2e557
2 parents 4d81666 + c60fa26
commit 3d2e557
Show file tree

Hide file tree

Showing 20 changed files with 52 additions and 36 deletions.
diff --git a/backend/src/bundles/public-video/public-video.controller.ts b/backend/src/bundles/public-video/public-video.controller.ts
@@ -36,11 +36,8 @@ class PublicVideoController extends BaseController {
             body: { id: string };
         }>,
     ): Promise<ApiHandlerResponse> {
-        // eslint-disable-next-line no-console
-        console.log(options.body, 'options.body');
         const jwt = options.body.id;
-        // eslint-disable-next-line no-console
-        console.log(jwt, 'jwt');
+
         return {
             status: HTTPCode.OK,
             payload: await this.publicVideoService.findUrlByToken(jwt),

diff --git a/backend/src/bundles/videos/video.repository.ts b/backend/src/bundles/videos/video.repository.ts
@@ -21,8 +21,7 @@ class VideoRepository implements Repository {
 
     public async findById(id: string): Promise<VideoEntity | null> {
         const video = await this.videoModel.query().findById(id).execute();
-        // eslint-disable-next-line no-console
-        console.log(video);
+
         return video ? VideoEntity.initialize(video) : null;
     }
 

diff --git a/backend/src/common/constants/white-routes.constants.ts b/backend/src/common/constants/white-routes.constants.ts
@@ -13,7 +13,7 @@ const WHITE_ROUTES = [
     },
     {
         path: `/api/v1${ApiPath.PUBLIC_VIDEO}/`,
-        method: HTTPMethod.GET,
+        method: HTTPMethod.POST,
     },
     {
         path: /\/v1\/documentation\/.*/,

diff --git a/backend/src/common/services/token/token.services.ts b/backend/src/common/services/token/token.services.ts
@@ -34,8 +34,7 @@ class TokenService {
 
     public async getIdFromToken(token: string): Promise<string | null> {
         const payload = await this.verifyToken(token);
-        // eslint-disable-next-line no-console
-        console.log(payload);
+
         return (payload?.['id'] as string) ?? null;
     }
 }

diff --git a/frontend/src/bundles/ai-avatars/components/avatar-card/avatar-card.tsx b/frontend/src/bundles/ai-avatars/components/avatar-card/avatar-card.tsx
@@ -40,10 +40,21 @@ const AvatarCard: React.FC<Properties> = ({
     }, [dispatch, id, image]);
 
     return (
-        <Card size="sm" borderRadius="lg" boxShadow="none" maxW="500px">
-            <CardBody>
-                <Box bg="background.50" borderRadius="md" position="relative">
-                    <Image src={image} alt="AI generated avatar image" />
+        <Card size="sm" borderRadius="lg" boxShadow="none" maxW="250px">
+            <CardBody position="relative" role="group">
+                <Flex
+                    bg="background.50"
+                    borderRadius="md"
+                    position="relative"
+                    justifyContent="center"
+                >
+                    <Image
+                        objectFit="cover"
+                        objectPosition="top"
+                        height="155px"
+                        src={image}
+                        alt="AI generated avatar image"
+                    />
                     <IconButton
                         aria-label="favorite button"
                         icon={<Icon as={IconName.HEART} boxSize={5} />}
@@ -54,7 +65,7 @@ const AvatarCard: React.FC<Properties> = ({
                         right="0"
                         onClick={handleLike}
                     />
-                </Box>
+                </Flex>
                 <Box p="5px 0">
                     <Text color="typography.900" fontWeight="600">
                         {name}

diff --git a/frontend/src/bundles/ai-avatars/components/avatars-section/avatars-section.tsx b/frontend/src/bundles/ai-avatars/components/avatars-section/avatars-section.tsx
@@ -14,6 +14,7 @@ import {
 } from '~/bundles/common/components/components.js';
 
 import { AvatarCard } from '../components.js';
+import styles from './styles.module.css';
 
 type Properties = {
     subtitle: string;
@@ -62,11 +63,7 @@ const AvatarsSection: React.FC<Properties> = ({ subtitle, avatars, form }) => {
                     Pick your favorites avatars to show them here!
                 </Text>
             ) : (
-                <SimpleGrid
-                    minChildWidth="300px"
-                    justifyItems="center"
-                    spacing="40px"
-                >
+                <SimpleGrid className={styles['grid']} spacing="40px">
                     {avatars.map(({ id, imgUrl, name, style, isLiked }) => (
                         <AvatarCard
                             key={`${id}-${style}`}

diff --git a/frontend/src/bundles/ai-avatars/components/avatars-section/styles.module.css b/frontend/src/bundles/ai-avatars/components/avatars-section/styles.module.css
@@ -0,0 +1,3 @@
+.grid {
+    grid-template-columns: repeat(auto-fit, 250px);
+}
diff --git a/frontend/src/bundles/chat/pages/chat-modal.tsx b/frontend/src/bundles/chat/pages/chat-modal.tsx
@@ -52,7 +52,7 @@ const ChatModal: React.FC<Properties> = ({
                 <Chat
                     messages={messages}
                     onSendMessage={handleSendMessage}
-                    headerTitle="GPT4 Script Writer"
+                    headerTitle="AI Assistant"
                     headerComment="Your secret to crafting compelling scripts effortlessly!"
                 />
             </ModalContent>

diff --git a/frontend/src/bundles/common/components/header/header.tsx b/frontend/src/bundles/common/components/header/header.tsx
@@ -23,7 +23,7 @@ const Header: React.FC<Properties> = ({ left, center, right }) => {
                 </Box>
             )}
             <Box className={styles['center']}>{center}</Box>
-            {right && <Box className={styles['right']}>{right}</Box>};
+            {right && <Box className={styles['right']}>{right}</Box>}
         </Flex>
     );
 };

diff --git a/...l/components/video-modal-content/components/generate-script-view/generate-script-view.tsx b/...l/components/video-modal-content/components/generate-script-view/generate-script-view.tsx
@@ -50,7 +50,7 @@ const GenerateScriptView: React.FC<Properties> = ({ onClose }) => {
     return (
         <>
             <Heading className={styles['script-view-heading']} variant="H3">
-                Use Open AI to draft your video script
+                Use our AI Assistant to draft your video script
             </Heading>
             <Tabs variant="unstyled" size="sm">
                 <TabList className={styles['script-view-tab-list']}>

diff --git a/frontend/src/bundles/create-avatar/components/consent/consent.tsx b/frontend/src/bundles/create-avatar/components/consent/consent.tsx
@@ -13,7 +13,7 @@ const Consent: React.FC = () => {
     return (
         <Flex className={styles['flex-container']}>
             <Text variant={'title'} color={'background.600'} marginTop={'2vh'}>
-                Concent
+                Consent
             </Text>
             <Text variant={'body1'} color="typography.600" mb={3}>
                 To prevent misuse of technology, we just need to confirm the

diff --git a/frontend/src/bundles/home/components/video-card/video-card.tsx b/frontend/src/bundles/home/components/video-card/video-card.tsx
@@ -115,7 +115,7 @@ const VideoCard: React.FC<Properties> = ({
     }, [dispatch, id]);
 
     return (
-        <Box borderRadius="8px" bg="white" padding="7px">
+        <Box borderRadius="8px" maxWidth={'250px'} bg="white" padding="7px">
             <Box
                 position="relative"
                 role="group"

diff --git a/frontend/src/bundles/home/components/video-section/styles.module.css b/frontend/src/bundles/home/components/video-section/styles.module.css
@@ -4,3 +4,7 @@
     scrollbar-width: thin;
     scrollbar-color: #c1c1c1 #f1f1f1;
 }
+
+.grid {
+    grid-template-columns: repeat(auto-fit, 250px);
+}
diff --git a/frontend/src/bundles/home/components/video-section/video-section.tsx b/frontend/src/bundles/home/components/video-section/video-section.tsx
@@ -49,10 +49,7 @@ const VideoSection: React.FC<Properties> = ({ videos, title }) => {
                         ))}
                     </Box>
                 ) : (
-                    <SimpleGrid
-                        columns={{ sm: 2, md: 3, lg: 4 }}
-                        spacing="20px"
-                    >
+                    <SimpleGrid spacing="20px" className={styles['grid']}>
                         {videos.map(({ id, ...video }) => (
                             <VideoCard key={id} id={id} {...video} />
                         ))}

diff --git a/frontend/src/bundles/preview/components/preview-wrapper.tsx b/frontend/src/bundles/preview/components/preview-wrapper.tsx
@@ -4,8 +4,7 @@ import { Preview } from '~/bundles/preview/pages/preview.js';
 
 const PreviewWrapper: React.FC = () => {
     const { jwt } = useParams<{ jwt: string }>();
-    // eslint-disable-next-line no-console
-    console.log('PreviewWrapper', jwt);
+
     return <Preview jwt={jwt ?? ''} />;
 };
 

diff --git a/frontend/src/bundles/template/components/template-card/template-card.tsx b/frontend/src/bundles/template/components/template-card/template-card.tsx
@@ -44,7 +44,7 @@ const TemplateCard: React.FC<Properties> = ({ id, name, previewUrl }) => {
     }, [handleWarningModalClose]);
 
     return (
-        <Box borderRadius="8px" bg="white" padding="7px">
+        <Box borderRadius="8px" bg="white" maxWidth="250px" padding="7px">
             <Box
                 position="relative"
                 role="group"

diff --git a/frontend/src/bundles/template/components/templates-section/styles.module.css b/frontend/src/bundles/template/components/templates-section/styles.module.css
@@ -9,3 +9,7 @@
     background-color: white;
     color: #4a4a4a;
 }
+
+.grid {
+    grid-template-columns: repeat(auto-fit, 250px);
+}
diff --git a/frontend/src/bundles/template/components/templates-section/templates-section.tsx b/frontend/src/bundles/template/components/templates-section/templates-section.tsx
@@ -21,6 +21,7 @@ import { type Template } from '~/bundles/template/types/types.js';
 
 import { TemplateCard } from '../template-card/template-card.js';
 import { DEFAULT_TEMPLATE_PAYLOAD } from './constants.js';
+import styles from './styles.module.css';
 
 type Properties = {
     templates: Template[];
@@ -113,7 +114,11 @@ const TemplatesSection: React.FC<Properties> = ({ templates }) => {
                     </FormProvider>
                 </Flex>
             </Flex>
-            <SimpleGrid columns={{ sm: 2, md: 3, lg: 4 }} spacing="20px">
+            <SimpleGrid
+                minChildWidth="200px"
+                spacing="20px"
+                className={styles['grid']}
+            >
                 {templates.map(({ id, ...template }) => (
                     <TemplateCard key={id} {...template} id={id} />
                 ))}

diff --git a/frontend/src/bundles/voices/components/voice-section/styles.module.css b/frontend/src/bundles/voices/components/voice-section/styles.module.css
@@ -4,3 +4,7 @@
     scrollbar-width: thin;
     scrollbar-color: #c1c1c1 #f1f1f1;
 }
+
+.grid {
+    grid-template-columns: repeat(auto-fit, 250px);
+}
diff --git a/frontend/src/bundles/voices/components/voice-section/voice-section.tsx b/frontend/src/bundles/voices/components/voice-section/voice-section.tsx
@@ -50,10 +50,7 @@ const VoiceSection: React.FC<Properties> = ({ voices, title }) => {
                         ))}
                     </Box>
                 ) : (
-                    <SimpleGrid
-                        columns={{ sm: 2, md: 3, lg: 4 }}
-                        spacing="20px"
-                    >
+                    <SimpleGrid className={styles['grid']} spacing="20px">
                         {voices.map((voice) => (
                             <VoiceCard voice={voice} key={voice.shortName} />
                         ))}
-Original file line number
+Diff line change
@@ Expand Up @@
                     </Box>
                 )}
                 <Box className={styles['center']}>{center}</Box>
-                {right && <Box className={styles['right']}>{right}</Box>};
+                {right && <Box className={styles['right']}>{right}</Box>}
             </Flex>
         );
     };
@@ Expand Down @@