Added banner

Author: leoronne

.gitignore

@@ -28,3 +28,5 @@ yarn-error.log*
 firebase.json
 
 /.firebase
+
+*.psd

src/assets/img/banner.png

@@ -15,6 +15,7 @@ import { APIUser, APIRepo } from '../../@types';
 import api from '../../services/api';
 import notify from '../../services/toast';
 import kFormatter from '../../utils/kFormatter';
+import useWindowSize from '../../utils/useWindowSize';
 
 interface Data {
   user?: APIUser;
@@ -30,29 +31,6 @@ const Profile: React.FC = () => {
   const [organizations, setOrgs] = useState([]);
   const [loading, setLoading] = useState(true);
 
-  function useWindowSize() {
-    const [windowSize, setWindowSize] = useState({
-      width: undefined,
-      height: undefined,
-    });
-
-    useEffect(() => {
-      function handleResize() {
-        setWindowSize({
-          width: window.innerWidth,
-          height: window.innerHeight,
-        });
-      }
-
-      window.addEventListener('resize', handleResize);
-
-      handleResize();
-
-      return () => window.removeEventListener('resize', handleResize);
-    }, []);
-
-    return windowSize;
-  }
   const size = useWindowSize();
 
   useEffect(() => {

src/pages/Profile/index.tsx

@@ -54,6 +54,7 @@ import {
 
 import { APIRepo } from '../../@types';
 import api from '../../services/api';
+import useWindowSize from '../../utils/useWindowSize';
 
 interface Data {
   repo?: APIRepo;
@@ -100,6 +101,20 @@ const Repo: React.FC = () => {
     return percentage.toFixed(2);
   };
 
+  const size = useWindowSize();
+
+  useEffect(() => {
+    const element = document.getElementById('main-content');
+    const elementRepo = document.getElementById('main-repo');
+    if (size.width <= 561 || size.height <= 768) {
+      element.style.height = 'calc(100% - 54px)';
+      if (elementRepo) elementRepo.style.height = 'auto';
+    } else if (size.width > 561) {
+      element.style.height = '100%';
+      elementRepo.style.height = 'calc(100vh - 94px)';
+    }
+  }, [size]);
+
   useEffect(() => {
     async function loadRepoInfo() {
       setLoading(true);
@@ -147,7 +162,7 @@ const Repo: React.FC = () => {
         const contributorsResponse = await api.get(`repos/${username}/${reponame}/contributors`);
         const contributors = contributorsResponse.data;
         const shuffledContributors = contributors.sort(() => 0.5 - Math.random());
-        const slicedContributors = shuffledContributors.slice(0, 10);
+        const slicedContributors = shuffledContributors.slice(0, 7);
         setContributors(slicedContributors);
       } catch (err) {
         const error = err?.response?.data?.message ? err.response.data.message : err.message;
@@ -226,7 +241,7 @@ const Repo: React.FC = () => {
 
   if (loading) {
     return (
-      <Container id="main-profile">
+      <Container id="main-repo">
         <Loader>
           <ClipLoader size={25} color="#6a737d" />
         </Loader>
@@ -243,7 +258,7 @@ const Repo: React.FC = () => {
   }
 
   return (
-    <Container>
+    <Container id="main-repo">
       <Header>
         <HeaderInfo>
           <Breadcrumb>

src/pages/Repo/index.tsx

@@ -52,6 +52,7 @@ export const Tabs = styled.div`
   ::-webkit-scrollbar-thumb {
     background: var(--gray-light);
   }
+
   ::-webkit-scrollbar {
     height: 5px !important;
     width: 5px !important;
@@ -187,7 +188,7 @@ export const RightSide = styled.div`
 
   @media (max-width: 560px) {
     grid-template-columns: repeat(1, 1fr);
-    padding: 60px 15px 50px 15px;
+    padding: 60px 15px 90px 15px;
   }
 `;
 

src/pages/Repo/styles.ts

@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react';
+
+export default function useWindowSize() {
+  const [windowSize, setWindowSize] = useState({
+    width: undefined,
+    height: undefined,
+  });
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    }
+
+    window.addEventListener('resize', handleResize);
+
+    handleResize();
+
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return windowSize;
+}