Feat/UI design

components/Calendar/YearCalendar.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import Calendar from "@components/Calendar/Calendar";
 import styled from "styled-components";
 import { randomInt } from "crypto";
+import FancyRender from "@components/Loading/FancyRender";
 
 export default function YearCalendar({ withRelativeTop = false, year }) {
   // 📣 Filling & Init the YearCalendar
@@ -21,18 +22,20 @@ export default function YearCalendar({ withRelativeTop = false, year }) {
   // 📣 Final Rendering
   //--------------------------------
   return (
-    <YearCalendarBox>
-      {year_dates.map((date) => {
-        return <Calendar key={date + randomInt} date={date} />;
-      })}
-    </YearCalendarBox>
+    <FancyRender >
+      <YearCalendarBox>
+        {year_dates.map((date) => {
+          return <Calendar key={date + Math.random()} date={date} />;
+        })}
+      </YearCalendarBox>
+    </FancyRender>
   );
 }
 
 // 📣 Styling
 //--------------------------------
 const YearCalendarBox = styled.div`
-  top: -200px;
+  top: -150px;
   position: relative;
   display: flex;
   flex-direction: row;

components/Calendar/calendar.tsx

@@ -5,6 +5,7 @@ import { randomInt } from "crypto";
 import { useRouter } from "next/router";
 import { useSelector, useDispatch } from "react-redux";
 import { SelectedDateInterface, updateDate } from "@redux/actions";
+import { Divider, Tooltip } from "@mui/material";
 
 interface RootState {
   selectedDate: SelectedDateInterface;
@@ -71,7 +72,9 @@ export default function Calendar(props) {
   function renderCalendar() {
     return (
       <CalendarBox>
-        <h2>{monthsArray[month - 1]}</h2>
+        <Tooltip title={"Check "+ monthsArray[month - 1] + " commits "}><MonthBox>
+          {monthsArray[month - 1]}
+        </MonthBox></Tooltip>
         <HeadDaysOfTheWeek>
           {weekdaysArray.map((day) => {
             return (
@@ -85,9 +88,9 @@ export default function Calendar(props) {
           {calendar.map((day) => {
             return (
               <DayOfMonth onClick={(e) => handleClickDayOfMonth(day, e)}>
-                <i key={day + randomInt}>
-                  {day} {parseInt(day) == state.day && month == state.month && year == state.year ? "selected" : null}
-                </i>
+                <DayBox key={day + randomInt} selected={parseInt(day) == state.day && month == state.month && year == state.year ? "selected" : null}>
+                  {day}
+                </DayBox>
               </DayOfMonth>
             );
           })}
@@ -103,6 +106,27 @@ export default function Calendar(props) {
 
 // 📣 Styling
 //--------------------------------
+
+const MonthBox = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #ffffff14;
+  padding: 10px;
+  border-radius: 5px;
+  transition:  0.7s;
+
+  &:hover {
+    background-color: #363167;
+    cursor: pointer;
+  }
+
+  h2 {
+    margin-right: 6px;
+  }
+`;
+
+const ScanButton = styled.div``;
 const HeadDaysOfTheWeek = styled.div`
   display: flex;
   li {
@@ -183,3 +207,18 @@ const CalendarBox = styled.div`
     opacity: 0.9;
   }
 `;
+
+// CSS
+const DayBox: any = styled.div`
+  background-color: ${(props: any) => (props.selected ? "white" : null)};
+  color: ${(props: any) => (props.selected ? "black" : "white")};
+  padding: 5px;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: 0.2s;
+
+  &:hover {
+    background-color: ${(props: any) => (props.selected ? "white" : "#101417")};
+    color: ${(props: any) => (props.selected ? "black" : "white")};
+  }
+`;

components/Footer/Footer.tsx

@@ -1,28 +1,29 @@
 import React from "react";
 import styled from "styled-components";
 
-export default function Footer() {
+export default function Footer(props ) {
   return (
-    <FooterWrapper>
+    <FooterWrapper home={props.home}>
       © 2022 Sweave &nbsp;&nbsp;⏤{" "}
       <ul>
-        <li> About</li>
+        <li>About</li>
         <li>Privacy</li>
-        <li>Pizza</li>
+        <li>Kit</li>
         <li>Contribute</li>
       </ul>
     </FooterWrapper>
   );
 }
 
-const FooterWrapper = styled.div`
+const FooterWrapper: any = styled.div`
   position: relative;
-  bottom: -85vh;
-  padding-left: 130px;
   font-size: 14px;
   display: flex;
   margin: auto;
-  text-align: center;
+  justify-content: center;
+  font-size: 12px;
+  margin-top: ${(props : any) => (props.home ? "8%" : "2%")};
+  padding-bottom: ${(props : any) => (props.home ? "0%" : "3%")};
 
   ul {
     margin: 0;

components/Header/Header.tsx

@@ -0,0 +1,155 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import logo from "@images/gitstory.png";
+import Image from "next/image";
+import { useRouter } from "next/router";
+import { useSession, signIn, signOut, getSession } from "next-auth/react";
+import Cookies from "js-cookie";
+import GitHubIcon from "@mui/icons-material/GitHub";
+import LogoutIcon from "@mui/icons-material/Logout";
+
+export default function Header({ withLeftPart = true, withPaddings = false }) {
+  const { data: session } = useSession();
+
+  const [headerSearchValue, setHeaderSearchValue] = useState([]);
+  const router = useRouter();
+  const slug = router.query.slug || [];
+
+  const handleHeaderSearchTextChange = (e) => {
+    let parsedValues = e.target.value.split("/");
+    setHeaderSearchValue(parsedValues);
+  };
+
+  async function saveGitHubSessionToCookie() {
+    const sessionInfo = await getSession();
+    sessionInfo ? Cookies.set("github_at", sessionInfo.accessToken) : Cookies.remove("github_at");
+  }
+
+  const keyPress = (e) => {
+    if (e.keyCode == 13) {
+      router.push("/calendar/github/" + headerSearchValue[0] + "/" + headerSearchValue[1]);
+    }
+  };
+
+  const goHome = () => {
+    router.push("/");
+  };
+
+
+  // Execute functions
+  saveGitHubSessionToCookie();
+
+  const ProfileBox = () => {
+    if (session) {
+      return (
+        <>
+          <SessionWrapper>
+            <span>{session.user.name}</span>
+            <img src={session.user.image}></img>
+            <a aria-label="Logout" onClick={() => signOut()}>
+              <LogoutIcon sx={{ fontSize: 17 }} />
+            </a>
+          </SessionWrapper>
+        </>
+      );
+    }
+    return (
+      <>
+        <BtnSignInWithGitHub onClick={() => signIn()}>
+          Sign in with GitHub <GitHubIcon sx={{ fontSize: 13 }} />
+        </BtnSignInWithGitHub>
+      </>
+    );
+  };
+
+  return (
+    <HeaderWrapper withPaddings={withPaddings}>
+      <LeftWrapper withLeftPart={withLeftPart}>
+        <img onClick={goHome} src="/img/index_logo.png" width="120" height="34" />
+        <SearchBoxHeader
+          onKeyDown={keyPress}
+          onChange={handleHeaderSearchTextChange}
+          placeholder="Explore GitHub projects, e.g. : vercel/next.js"
+        ></SearchBoxHeader>
+      </LeftWrapper>
+      <RightWrapper>
+        <ProfileBox></ProfileBox>
+      </RightWrapper>
+    </HeaderWrapper>
+  );
+}
+
+const LogoWrapper = styled.div``;
+const SearchBoxHeader = styled.input`
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.37), rgba(0, 0, 0, 0.37));
+  border: 1px solid rgb(255 255 255 / 0%);
+  box-sizing: border-box;
+  border-radius: 7px;
+  padding-left: 16px;
+  font-size: 14px;
+  margin-left: 20px;
+  width: 600px;
+  height: 40px;
+  color: white;
+  transition: all 0.3s ease-in-out;
+
+  &:focus {
+    outline: none;
+    width: 700px;
+    font-size: 16px;
+  }
+  ::placeholder {
+    color: rgba(255, 255, 255, 0.13);
+  }
+`;
+
+const BtnSignInWithGitHub = styled.button`
+  background-color: #0a0e12;
+  color: white;
+  font-size: 14px;
+  font-family: "Inter";
+  cursor: pointer;
+  border: none;
+  border-radius: 5px;
+  padding: 12px;
+`;
+
+const SessionWrapper = styled.div`
+  justify-content: space-between;
+  //center horizontal
+  display: flex;
+  align-items: center;
+
+  a {
+    cursor: pointer;
+  }
+
+  span {
+    margin-right: 20px;
+  }
+
+  img {
+    width: 30px;
+    border-radius: 25px;
+    margin-right: 20px;
+  }
+`;
+const RightWrapper = styled.div``;
+// CSS
+const HeaderWrapper :any = styled.div`
+display: flex;
+justify-content: space-between;
+padding-left: ${(props: any) => (props.withPaddings === true ? 130 : 0)}px;
+padding-right: ${(props: any) => (props.withPaddings  === true ? 130 : 0)}px;
+padding-top: ${(props: any) => (props.withPaddings  === true ? 30 : 0)}px;
+`;
+
+const LeftWrapper :any  = styled.div`
+opacity: ${(props: any) => (props.withLeftPart  === true ? 1 : 0)};
+display: flex;
+img {
+  cursor: pointer;
+  justify-self: center;
+  margin-top: 5px;
+}
+`;