feat: add fullscreen profile image

client/src/components/Common/TwitterFullscreen.tsx

@@ -0,0 +1,89 @@
+import styled, { css } from 'styled-components'
+import { Close } from 'react-ionicons'
+import theme from '../../styles/ThemeStyles'
+
+interface ITwitterFullscreen {
+  isOpen: boolean
+  type: 'cover' | 'profile'
+  srcImg?: string
+  altImg?: string
+  onClose?: () => void
+}
+
+interface IWrapper {
+  isOpen: boolean
+}
+
+interface IImage {
+  imgType: 'cover' | 'profile'
+}
+
+export default function TwitterFullscreen(props: ITwitterFullscreen) {
+  return (
+    <Wrapper isOpen={props.isOpen}>
+      <Overlay onClick={props.onClose} />
+      <CloseButton onClick={props.onClose}>
+        <Close color="#ffffff" />
+      </CloseButton>
+      <Image imgType={props.type} src={props.srcImg} alt={props.altImg} />
+    </Wrapper>
+  )
+}
+
+const Wrapper = styled.div<IWrapper>`
+  position: fixed;
+  inset: 0;
+  opacity: 0;
+  z-index: 99;
+  visibility: hidden;
+  background: rgba(0, 0, 0, 0.75);
+  transition: ${theme.transition.ease};
+
+  ${props =>
+    props.isOpen &&
+    css`
+      opacity: 1;
+      visibility: visible;
+    `}
+`
+
+const Overlay = styled.div`
+  position: fixed;
+  inset: 0;
+  cursor: pointer;
+`
+
+const CloseButton = styled.button`
+  position: fixed;
+  top: 2rem;
+  left: 2rem;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  transition: ${theme.transition.ease};
+  background: rgba(255, 255, 255, 0.2);
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.3);
+  }
+
+  span {
+    display: grid;
+    place-items: center;
+  }
+`
+
+const Image = styled.img<IImage>`
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  ${props => props.imgType === 'profile' && `border-radius: 50%`};
+
+  ${props =>
+    props.imgType === 'cover' &&
+    css`
+      height: 30rem;
+    `}
+`

client/src/components/Core/UserInfo.tsx

@@ -1,20 +1,28 @@
 import styled from 'styled-components'
+import { useState } from 'react'
 import { LocationOutline } from 'react-ionicons'
 
 import theme from '../../styles/ThemeStyles'
 import TwitterBox from '../Common/TwitterBox'
+import TwitterFullscreen from '../Common/TwitterFullscreen'
 
 import useAuth from '../../hooks/useAuth'
 import { useUsersTweets } from '../../hooks/tweets'
 
-export default function UserInfo() {
+type Props = {
+  onOpen: () => void
+}
+
+export default function UserInfo(props: Props) {
   const { user } = useAuth()
   const { tweetsCount } = useUsersTweets()
 
+  const [open, setOpen] = useState<boolean>(false)
+
   return (
     <TwitterBox>
       <Center>
-        <Avatar>
+        <Avatar onClick={props.onOpen}>
           <img
             src={`/img/users/${user.image || 'not_found.jpg'}`}
             alt={`${user.name} Cover`}
@@ -62,6 +70,7 @@ const Avatar = styled.div`
   height: 5rem;
   overflow: hidden;
   border-radius: 50%;
+  cursor: pointer;
 
   img {
     width: 100%;

client/src/containers/Profile.tsx

@@ -15,10 +15,13 @@ import useAuth from '../hooks/useAuth'
 import TwitterBox from '../components/Common/TwitterBox'
 import Tweet from '../components/Common/Tweet'
 import { useUsersTweets } from '../hooks/tweets'
+import TwitterFullscreen from '../components/Common/TwitterFullscreen'
 
 type Params = { username: string }
 
 export default function Profile() {
+  const [openCover, setOpenCover] = useState<boolean>(false)
+  const [openPicture, setOpenPicture] = useState<boolean>(false)
   const [tab, setTab] = useState<string>('tweets')
 
   const dispatch = useDispatch()
@@ -34,15 +37,29 @@ export default function Profile() {
 
   return (
     <Wrapper>
-      <Cover>
+      <Cover onClick={() => setOpenCover(true)}>
         {user.cover && (
           <img src={`/img/covers/${user.cover}`} alt={`${user.name} Cover`} />
         )}
       </Cover>
+      <TwitterFullscreen
+        type="cover"
+        isOpen={openCover}
+        srcImg={`/img/covers/${user.cover}`}
+        altImg={`${user.name} Cover`}
+        onClose={() => setOpenCover(false)}
+      />
+      <TwitterFullscreen
+        type="profile"
+        isOpen={openPicture}
+        srcImg={`/img/users/${user.image || 'not_found.jpg'}`}
+        altImg={`${user.name} Cover`}
+        onClose={() => setOpenPicture(false)}
+      />
       <TwitterContainer size="md">
         <Content>
           <Group style={{ width: 320 }}>
-            <UserInfo />
+            <UserInfo onOpen={() => setOpenPicture(true)} />
             <UserActions />
           </Group>
           <Main>
@@ -99,6 +116,7 @@ const Cover = styled.div`
   width: 100%;
   height: 17rem;
   overflow: hidden;
+  cursor: pointer;
   background: ${theme.colors.blue};
 
   img {

client/src/styles/GlobalStyles.tsx

@@ -9,6 +9,7 @@ const GlobalStyles = createGlobalStyle`
     outline: 0;
     font: inherit;
     box-sizing: border-box;
+    background: transparent;
   }
 
   body {
@@ -31,6 +32,10 @@ const GlobalStyles = createGlobalStyle`
   ol {
     list-style: none;
   }
+
+  button {
+    cursor: pointer;
+  }
 `
 
 export default GlobalStyles