styles

nahuel-rtms · Feb 2, 2023 · e30dbe2 · e30dbe2 · vercel · Feb 2, 2023
1 parent 18d230c
commit e30dbe2
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 36 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "framer-motion": "^6.4.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.6.0",
+    "react-icons": "^4.7.1",
     "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"

diff --git a/src/components/Body/Card.js b/src/components/Body/Card.js
@@ -3,9 +3,9 @@ import Modal from "../Modal";
 
 function Card (props) {
     return (
-        <GridItem w='100%' bg='whiteAlpha.900' shadow={'md'} h='350px' display={'flex'} flexDirection='column' alignItems='center' justifyContent='center'>
-            <Image src={props.image} alt='image' boxSize='150px'/>
-            <Text fontSize='lg' m={'18px'} color='blackAlpha.800'>{props.title}</Text>
+        <GridItem w='100%' bgGradient='linear(to-t, #fffff5, #edede9)' shadow={'base'} h='390px' display={'flex'} flexDirection='column' alignItems='center' justifyContent='center'>
+            <Image src={props.image} alt='image' mt='3%' mb='3%' boxSize='230px' boxShadow='dark-lg'/>
+            <Text fontSize='lg' m={'18px'} color='blackAlpha.700'>{props.title}</Text>
             <Modal title = { props.title } image = { props.image }/>
          </GridItem>
     )

diff --git a/src/components/Modal.js b/src/components/Modal.js
@@ -38,6 +38,10 @@ function MovieModal (props) {
     const noteRef = useRef();
 
     const addLabel = (label) => {
+      //aniadir solo las labels que no se repitan
+      if (noteLabel.includes(label)) {
+        return
+      }
       setNoteLabel([...noteLabel, label])
     }
 
@@ -56,17 +60,17 @@ function MovieModal (props) {
 
     return (
         <>
-          <Button onClick={onOpen}>Save</Button>
+          <Button onClick={onOpen} bgColor='yellow.200' color='blackAlpha.700' _hover={{backgroundColor: 'yellow.300'}}>Select</Button>
 
           <Modal isOpen={isOpen} onClose={onClose}>
             <ModalOverlay />
             <ModalContent align='center'>
-              <ModalHeader>{props.title}</ModalHeader>
+              <ModalHeader mt='4%' >{props.title}</ModalHeader>
               <ModalCloseButton />
               <ModalBody>
                 <Flex direction='column' justify='center' align='center' mb='2%'>
-                  <Image src={props.image} alt='image' boxSize='150px' mb='8%' />
-                  <Textarea placeholder='Writte your notes about the movie' ref={noteRef}/>
+                  <Image src={props.image} alt='image' boxSize='380px' mb='8%' />
+                  <Textarea w='95%' placeholder='Writte your notes about the movie' ref={noteRef}/>
                 </Flex>
                 <HStack spacing={4}>
 
@@ -86,7 +90,7 @@ function MovieModal (props) {
                           <Input placeholder='New Label' onKeyPress={event => { if (event.key === 'Enter') { addLabel(labelInputRef.current.value); onClose() }}} ref={labelInputRef} />
                           <VStack spacing={2}>
                             {labels ? labels.map((label, index) => (
-                              <Button key={index} onClick={addLabel}>{label}</Button>
+                              <Button key={index} onClick={() => addLabel(label)}>{label}</Button>
                             )): null}
                           </VStack>
                         </PopoverBody>
@@ -100,9 +104,9 @@ function MovieModal (props) {
               </ModalBody>
 
               <ModalFooter>
-                <Button colorScheme='blue' mr={3} onClick={handleSubmit}>
-                  Add
-                </Button>
+                  <Button colorScheme='green' mr='42%' onClick={handleSubmit}>
+                    Add
+                  </Button>
               </ModalFooter>
             </ModalContent>
           </Modal>

diff --git a/src/components/NavBar.js b/src/components/NavBar.js
@@ -1,8 +1,9 @@
-import { Input, Flex, Image, Text, IconButton, Button } from "@chakra-ui/react";
-import { SearchIcon, SettingsIcon } from "@chakra-ui/icons";
+import { Input, Flex, Text, Button, Icon, InputGroup, Kbd, InputRightElement } from "@chakra-ui/react";
 import MovieContext from '../contexts/MovieContext';
 import { useContext, useRef } from 'react';
 import AuthContext from '../contexts/AuthContext';
+import { BiMovie } from 'react-icons/bi'
+import { RiLogoutBoxRLine } from 'react-icons/ri'
 
 
 function NavBar () {
@@ -17,19 +18,20 @@ function NavBar () {
     const { currentUser, logout } = useContext(AuthContext);
 
     return (
-        <Flex w='100vw' h='10vh' bg='yellow.300' boxShadow='base'>
-            <Flex w='35%' align='center'>
-                <Image src='play-button.png' alt='Logo' h='70%' ml='2%'/>
-                <Text ml='2%' fontSize='18'>Movie Notes</Text>
+        <Flex  w='100vw' h='10vh' bg='yellow.300' boxShadow='base'>
+            <Flex ml='3%' w='35%' align='center'>
+                <Icon as={BiMovie} h={12} w={12} color='green.600'/>
+                <Text ml='2%' fontSize='1.4em' color='green.700'>Movie Notes</Text>
             </Flex>
             <Flex w='30%' alignItems='center'>
-                <IconButton onClick={() => Search()} aria-label='Search database' icon={<SearchIcon />} mr='1%'/>
-                <Input ref={inputRef} variant='filled' placeholder='Search' />
+                <InputGroup>
+                    <InputRightElement opacity='70%' mr='2%' pointerEvents='none' children={<Kbd>⏎</Kbd>}/>
+                    <Input ref={inputRef} variant='filled' placeholder='Search for some movie' onKeyPress={event => { if (event.key === 'Enter') {Search()}}} />
+                </InputGroup>
             </Flex>
-            <Flex w='35%' align='center' justify='right'>
-                <Text mr='5%'>{currentUser.displayName}</Text>
-                <Button mr='2%' colorScheme='yellow' variant='outline' onClick={() => logout()}>LogOut</Button>
-                <IconButton aria-label='Settings' icon={<SettingsIcon />} mr='3%'/>
+            <Flex w='31%' mr='4%' align='center' justify='right'>
+                <Text mr='5%' color='blackAlpha.700' fontSize='1.2em'>{currentUser.displayName}</Text>
+                <Button mr='2%' h='50%' colorScheme='yellow' variant='outline' rightIcon={<Icon as={RiLogoutBoxRLine} h={5} w={5}/>} onClick={() => logout()}>Logout</Button>
             </Flex>
 
         </Flex>

diff --git a/src/components/Side/SideItems.js b/src/components/Side/SideItems.js
@@ -1,16 +1,16 @@
-import { Text, Flex } from "@chakra-ui/react";
-import { ChevronRightIcon } from "@chakra-ui/icons";
+import { Text, Flex, Icon } from "@chakra-ui/react";
 import MovieContext from "../../contexts/MovieContext";
 import { useContext } from "react";
+import { MdLabelOutline } from 'react-icons/md'
 
 function SideItems ({name}) {
 
     const { setSideSelect } = useContext(MovieContext);
 
     return (
-        <Flex w='100%' h='9%' align={'center'} _active={{boxShadow: 'inner'}} _hover={{bg:'yellow.200'}} onClick={() => setSideSelect(name)}>
-            <ChevronRightIcon ml='10%'/>
-            <Text color='blackAlpha.900' ml='10%'>{name}</Text>
+        <Flex w='100%' h='9%' boxShadow='base' align={'center'} _active={{boxShadow: 'inner'}} _hover={{bg:'yellow.100'}} onClick={() => setSideSelect(name)}>
+            <Icon as={MdLabelOutline} h={6} w={6} ml='10%' color='blackAlpha.700'/>
+            <Text color='blackAlpha.800' ml='10%'>{name}</Text>
         </Flex>
     )
 }