Visual Adjustment and Optimisation

- Using secondary color as CTA
- Adding Read label to Post Cards
- Changing Background color for long text and post details
- Adding overflow properties to Post Cards details
- Changing Avatar color
- Adding max-width to header content
- Adjusting markdown title margin and font weights
- Reducing page content top margin and padding
- Making tabs responsive
- Changing card animation for something more generic and visible when hovering over a card with an image

components/Avatar.js

@@ -14,7 +14,7 @@ const Container = styled.div`
 
   border-radius: 50%;
 
-  background-color: ${(props) => props.theme.secondary};
+  background-color: ${(props) => props.theme.greyDark};
   color: ${(props) => props.theme.light};
 
   overflow: hidden;

components/Header.js

@@ -24,20 +24,29 @@ const HeaderContainer = styled.header`
 
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: center;
 
   width: 100%;
   max-height: ${(props) => props.theme.headerHeight};
 
-  padding: 0.75rem 2rem;
-
   background-color: ${(props) => props.theme.darkLight};
 
   font-size: 1em;
   font-weight: bold;
   color: ${(props) => props.theme.light};
 `;
 
+const HeaderContent = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  width: 100%;
+  max-width: 1920px;
+
+  padding: 0.75rem 2rem;
+`;
+
 const LinksContainer = styled.nav`
   display: flex;
   align-items: center;
@@ -51,19 +60,25 @@ const LinksContainer = styled.nav`
 
 const SearchBarHolder = styled.div`
   position: absolute;
-  z-index: 0;
+  z-index: 1;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-  left: 0;
   top: ${(props) => (props.show ? props.theme.headerHeight : "0%")};
 
-  padding: 0 2rem;
   width: 100%;
 
+  padding: 0 2rem;
+
   transition: top ease-out 0.15s;
 `;
 
 const HeaderSearchBar = styled(SearchBar)`
   && {
+    max-width: 1856px;
+    margin: 0;
     background-color: ${(props) => props.theme.darkLight};
   }
 `;
@@ -124,6 +139,44 @@ const DrawerMenuButton = styled(HeaderButton)`
   }
 `;
 
+const menuLinks = [
+  {
+    label: "Home",
+    slug: "",
+    id: 1,
+  },
+  {
+    label: "Kit Map",
+    slug: "map",
+    id: 3,
+  },
+  {
+    label: "Challenges",
+    slug: "challenges",
+    id: 4,
+  },
+  {
+    label: "News",
+    slug: "news",
+    id: 5,
+  },
+  {
+    label: "Help",
+    slug: "help",
+    id: 6,
+  },
+  {
+    label: "Library",
+    slug: "library",
+    id: 7,
+  },
+  {
+    label: "Roadmap",
+    slug: "roadmap",
+    id: 8,
+  },
+];
+
 export default function Header() {
   const { user, isLogged } = useAuth();
 
@@ -144,127 +197,95 @@ export default function Header() {
     setOpenSearch(!openSearch);
   }
 
-  const menuLinks = [
-    {
-      label: "Home",
-      slug: "",
-      id: 1,
-    },
-    {
-      label: "Kit Map",
-      slug: "map",
-      id: 3,
-    },
-    {
-      label: "Challenges",
-      slug: "challenges",
-      id: 4,
-    },
-    {
-      label: "News",
-      slug: "news",
-      id: 5,
-    },
-    {
-      label: "Help",
-      slug: "help",
-      id: 6,
-    },
-    {
-      label: "Library",
-      slug: "library",
-      id: 7,
-    },
-    {
-      label: "Roadmap",
-      slug: "roadmap",
-      id: 8,
-    },
-  ];
-
   return (
     <>
       <HeaderContainer>
-        <Brand />
-
-        <LinksContainer>
-          {menuLinks.map((link) => (
-            <HeaderLink key={link.id} label={link.label} slug={link.slug} />
-          ))}
-        </LinksContainer>
-
-        <ButtonsRow>
-          <HeaderButton
-            inverted
-            color="dark"
-            icon={openSearch ? <CloseIcon /> : <SearchIcon />}
-            onClick={() => toggleSearch()}
-          />
-
-          <DrawerMenuButton
-            inverted
-            color="dark"
-            icon={<MenuIcon />}
-            onClick={() => toggleDrawer()}
-          />
-
-          <Drawer open={openDrawer} toggle={toggleDrawer} links={menuLinks} />
-
-          {isLogged ? (
-            <UserHeaderTools>
-              <div>
+        <HeaderContent>
+          <Brand />
+
+          <LinksContainer>
+            {menuLinks.map((link) => (
+              <HeaderLink key={link.id} label={link.label} slug={link.slug} />
+            ))}
+          </LinksContainer>
+
+          <ButtonsRow>
+            <HeaderButton
+              inverted
+              color="dark"
+              icon={openSearch ? <CloseIcon /> : <SearchIcon />}
+              onClick={() => toggleSearch()}
+            />
+
+            <DrawerMenuButton
+              inverted
+              color="dark"
+              icon={<MenuIcon />}
+              onClick={() => toggleDrawer()}
+            />
+
+            <Drawer open={openDrawer} toggle={toggleDrawer} links={menuLinks} />
+
+            {isLogged ? (
+              <UserHeaderTools>
+                <div>
+                  <DropdownMenu
+                    name="notif"
+                    trigger={
+                      <HeaderButton
+                        inverted
+                        color="dark"
+                        icon={<Notification />}
+                      />
+                    }
+                  >
+                    <b>Notifications</b>
+                    <Separator />
+                    <p>No notifications yet</p>
+                  </DropdownMenu>
+                </div>
+
+                <Link passHref href="/library/create-media">
+                  <HeaderButton inverted color="secondary" label="Share" />
+                </Link>
+
                 <DropdownMenu
-                  name="notif"
-                  trigger={
-                    <HeaderButton
-                      inverted
-                      color="dark"
-                      icon={<Notification />}
-                    />
-                  }
+                  name="user"
+                  trigger={<HeaderAvatar size={40} avatar={user.avatar} />}
                 >
-                  <b>Notifications</b>
-                  <Separator />
-                  <p>No notifications yet</p>
-                </DropdownMenu>
-              </div>
+                  <b>{user.username}</b>
 
-              <Link passHref href="/library/create-media">
-                <HeaderButton color="primary" label="Share" />
-              </Link>
-
-              <DropdownMenu
-                name="user"
-                trigger={<HeaderAvatar size={40} avatar={user.avatar} />}
-              >
-                <b>{user.username}</b>
-
-                <Separator />
+                  <Separator />
 
-                <Link
-                  passHref
-                  href={"/users/[username]"}
-                  as={`/users/${user.username}`}
-                >
-                  <a>My profile</a>
-                </Link>
-                <Link passHref href={"/settings"}>
-                  <a>Settings</a>
-                </Link>
-                <Separator />
-                <Link passHref href={"/logout"}>
-                  <a>Log out</a>
+                  <Link
+                    passHref
+                    href={"/users/[username]"}
+                    as={`/users/${user.username}`}
+                  >
+                    <a>My profile</a>
+                  </Link>
+                  <Link passHref href={"/settings"}>
+                    <a>Settings</a>
+                  </Link>
+                  <Separator />
+                  <Link passHref href={"/logout"}>
+                    <a>Log out</a>
+                  </Link>
+                </DropdownMenu>
+              </UserHeaderTools>
+            ) : (
+              <SignUpButtonHolder>
+                <Link passHref href={"/login"}>
+                  <HeaderButton
+                    inverted
+                    color="secondary"
+                    label={"Log in / Sign Up"}
+                  />
                 </Link>
-              </DropdownMenu>
-            </UserHeaderTools>
-          ) : (
-            <SignUpButtonHolder>
-              <Link passHref href={"/login"}>
-                <HeaderButton color="primary" label={"Log in / Sign Up"} />
-              </Link>
-            </SignUpButtonHolder>
-          )}
-        </ButtonsRow>
+              </SignUpButtonHolder>
+            )}
+          </ButtonsRow>
+        </HeaderContent>
       </HeaderContainer>
       <SearchBarHolder show={openSearch}>
         <HeaderSearchBar />

components/InProgress.js

@@ -15,18 +15,6 @@ const AnimatedIcon = styled(Icon)`
   position: relative;
 
   animation: float 3s ease-in-out infinite;
-
-  @keyframes float {
-    0% {
-      transform: translatey(0px);
-    }
-    50% {
-      transform: translatey(-10px);
-    }
-    100% {
-      transform: translatey(0px);
-    }
-  }
 `;
 
 const InfoTitle = styled.h3`

components/Modal.js

@@ -54,7 +54,7 @@ const ModalContainer = styled(Card)`
 const ModalHead = styled.div`
   display: flex;
 
-  background-color: #252525;
+  background-color: ${(props) => props.theme.textBackground};
   border-bottom: 1px solid ${(props) => props.theme.grey};
 
   width: 100%;

components/Path.js

@@ -2,8 +2,8 @@ import Link from "next/link";
 import { withRouter } from "next/router";
 import React from "react";
 import styled from "styled-components";
-import Icon from "./Icon";
 import ArrowIcon from "../public/icons/arrow-down.svg";
+import Icon from "./Icon";
 
 const PathContainer = styled.nav`
   display: flex;
@@ -27,6 +27,7 @@ const LinkContainer = styled.div`
 
 const Separator = styled(Icon)`
   transform: rotate(-90deg);
+  cursor: default;
 `;
 
 /***