From 72ba7f4554bcaa7986d1c4af761118e831d1515a Mon Sep 17 00:00:00 2001
From: Davit <davedabyeet@gmail.com>
Date: Mon, 11 Sep 2023 16:06:20 +0400
Subject: [PATCH] same sidebar styles and new ant icons

---
 src/components/NavTabs/NavTabsSkeleton.tsx    |  31 ++--
 src/components/NavTabs/StylednavTabs.tsx      | 168 +-----------------
 src/components/NavTabs/index.js               | 102 +++++++----
 .../ProjectNavTabs/ProjectNavTabsSkeleton.tsx |  74 +++-----
 .../ProjectNavTabs/StyledProjectNavTabs.tsx   | 107 +----------
 src/components/ProjectNavTabs/index.js        |  58 +++---
 src/components/link/DeployTargets.js          |   2 +-
 src/components/link/Project.js                |   2 +-
 src/components/link/ProjectChildPageLink.js   |   2 +-
 9 files changed, 142 insertions(+), 404 deletions(-)

diff --git a/src/components/NavTabs/NavTabsSkeleton.tsx b/src/components/NavTabs/NavTabsSkeleton.tsx
index 8a06b2dd..eaebc104 100644
--- a/src/components/NavTabs/NavTabsSkeleton.tsx
+++ b/src/components/NavTabs/NavTabsSkeleton.tsx
@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 import Skeleton from 'react-loading-skeleton';
 
+import { CheckSquareOutlined, ReadOutlined, RocketOutlined, SaveOutlined } from '@ant-design/icons';
 import BackupsLink from 'components/link/Backups';
 import DeploymentsLink from 'components/link/Deployments';
 import EnvironmentLink from 'components/link/Environment';
@@ -15,25 +16,29 @@ interface NavSkeletonProps {
 }
 
 const NavTabsSkeleton: FC<NavSkeletonProps> = ({ activeTab, projectName, openshiftProjectName }) => (
-  <StyledNavigation className="navigation">
-    <li className={`overview ${activeTab == 'overview' ? 'active' : ''} deployLink`}>
-      <EnvironmentLink environmentSlug={openshiftProjectName} projectSlug={projectName} className="deployLink">
-        Environment Overview
+  <StyledNavigation>
+    <li className={`overview ${activeTab == 'overview' ? 'active' : ''} linkContainer`}>
+      <EnvironmentLink environmentSlug={openshiftProjectName} projectSlug={projectName} className="navLink">
+        <ReadOutlined className="icon" />
+        <span className="destination"> Environment Overview</span>
       </EnvironmentLink>
     </li>
-    <li className={`deployments ${activeTab == 'deployments' ? 'active' : ''} deployLink`}>
-      <DeploymentsLink environmentSlug={openshiftProjectName} projectSlug={projectName} className="deployLink">
-        Deployments
+    <li className={`deployments ${activeTab == 'deployments' ? 'active' : ''} linkContainer`}>
+      <DeploymentsLink environmentSlug={openshiftProjectName} projectSlug={projectName} className="navLink">
+        <RocketOutlined className="icon" />
+        <span className="destination"> Deployments</span>
       </DeploymentsLink>
     </li>
-    <li className={`backups ${activeTab == 'backups' ? 'active' : ''} deployLink`}>
-      <BackupsLink environmentSlug={openshiftProjectName} projectSlug={projectName} className="deployLink">
-        Backups
+    <li className={`backups ${activeTab == 'backups' ? 'active' : ''} linkContainer`}>
+      <BackupsLink environmentSlug={openshiftProjectName} projectSlug={projectName} className="navLink">
+        <SaveOutlined className="icon" />
+        <span className="destination"> Backups</span>
       </BackupsLink>
     </li>
-    <li className={`tasks ${activeTab == 'tasks' ? 'active' : ''} ${'deployLink'}`}>
-      <TasksLink environmentSlug={openshiftProjectName} projectSlug={projectName} className="deployLink">
-        Tasks
+    <li className={`tasks ${activeTab == 'tasks' ? 'active' : ''} ${'linkContainer'}`}>
+      <TasksLink environmentSlug={openshiftProjectName} projectSlug={projectName} className="navLink">
+        <CheckSquareOutlined className="icon" />
+        <span className="destination"> Tasks</span>
       </TasksLink>
     </li>
     <Skeleton style={{ height: '50px', lineHeight: '0.5' }} />
diff --git a/src/components/NavTabs/StylednavTabs.tsx b/src/components/NavTabs/StylednavTabs.tsx
index 15d0bfa1..e003bc0b 100644
--- a/src/components/NavTabs/StylednavTabs.tsx
+++ b/src/components/NavTabs/StylednavTabs.tsx
@@ -1,167 +1,3 @@
-import { bp, color } from 'lib/variables';
-import styled from 'styled-components';
+import { StyledNavigation as NavStyles } from 'components/Organizations/NavTabs/StyledNavTabs';
 
-export const StyledNavigation = styled.ul`
-  background: ${props => props.theme.backgrounds.sidebar};
-  border-right: 1px solid ${props => props.theme.borders.input};
-  margin: 0;
-  z-index: 10;
-  @media ${bp.tabletUp} {
-    min-width: 30%;
-    padding-bottom: 60px;
-  }
-  @media ${bp.wideUp} {
-    min-width: 25%;
-  }
-
-  li {
-    border-bottom: 1px solid ${props => props.theme.borders.input};
-    margin: 0;
-    padding: 0;
-    position: relative;
-    transition: all 0.2s ease;
-
-    &:hover {
-      background-color: ${color.white} !important;
-    }
-
-    &::before {
-      background-color: ${color.linkBlue};
-      background-position: center center;
-      background-repeat: no-repeat;
-      content: '';
-      display: block;
-      height: 59px;
-      left: 0;
-      position: absolute;
-      top: 0;
-      transition: all 0.3s ease-in-out;
-      width: 45px;
-    }
-
-    a {
-      color: ${props => props.theme.texts.navigation};
-      display: block;
-      padding: 20px 20px 19px 60px;
-      @media ${bp.wideUp} {
-        padding-left: calc((100vw / 16) * 1);
-      }
-    }
-
-    &.active {
-      background-color: ${props => props.theme.backgrounds.content};
-      border-right: 1px solid ${props => props.theme.backgrounds.content};
-      width: calc(100% + 1px);
-
-      a {
-        color: ${props => props.theme.texts.navigation};
-      }
-    }
-
-    &.overview {
-      &::before {
-        background-image: url('/static/images/overview.svg');
-        background-size: 18px;
-      }
-
-      &.active::before {
-        background-image: url('/static/images/overview-active.svg');
-      }
-    }
-
-    &.deployments {
-      &::before {
-        background-image: url('/static/images/deployments.svg');
-        background-size: 21px 16px;
-      }
-
-      &.active::before {
-        background-image: url('/static/images/deployments-active.svg');
-      }
-    }
-
-    &.backups {
-      &::before {
-        background-image: url('/static/images/backups.svg');
-        background-size: 19px;
-      }
-
-      &.active::before {
-        background-image: url('/static/images/backups-active.svg');
-      }
-    }
-
-    &.tasks {
-      &::before {
-        background-image: url('/static/images/tasks.svg');
-        background-size: 16px;
-      }
-
-      &.active::before {
-        background-image: url('/static/images/tasks-active.svg');
-      }
-    }
-    
-    &.environmentVariables {
-      &::before {
-        background-image: url('/static/images/variables.svg');
-        background-size: 22px;
-      }
-      &.active::before {
-        background-image: url('/static/images/variables-active.svg');
-      }
-    }
-    
-    &.problems {
-      &::before {
-        background-image: url('/static/images/problems.svg');
-        background-size: 16px;
-      }
-
-      &.active::before {
-        background-image: url('/static/images/problems-active.svg');
-      }
-    }
-
-    &.facts {
-      &::before {
-        background-image: url('/static/images/facts.svg');
-        background-size: 16px;
-      }
-
-      &.active::before {
-        background-image: url('/static/images/facts-active.svg');
-      }
-    }
-
-    &.insights {
-      &::before {
-        background-image: url('/static/images/insights.svg');
-        background-size: 16px;
-      }
-
-      &.active::before {
-        background-image: url('/static/images/insights-active.svg');
-      }
-    }
-  }
-
-  .deployLink {
-    a {
-      color: ${props => props.theme.texts.navigation};
-      display: block;
-      padding: 20px 20px 19px 60px;
-      transition: color 0.2s ease;
-      @media ${bp.wideUp} {
-        padding-left: calc((100vw / 16) * 1);
-      }
-      &:hover {
-        color: ${color.darkGrey};
-      }
-    }
-
-    .active a {
-      color: ${color.black};
-    }
-  }
-`;
+export const StyledNavigation = NavStyles;
diff --git a/src/components/NavTabs/index.js b/src/components/NavTabs/index.js
index da1d8f28..21b89bef 100644
--- a/src/components/NavTabs/index.js
+++ b/src/components/NavTabs/index.js
@@ -1,97 +1,121 @@
 import React from 'react';
 
+import getConfig from 'next/config';
+
+import {
+  AlertOutlined,
+  BarChartOutlined,
+  CheckSquareOutlined,
+  LockOutlined,
+  ReadOutlined,
+  RocketOutlined,
+  SaveOutlined,
+  TagsOutlined,
+} from '@ant-design/icons';
 import BackupsLink from 'components/link/Backups';
 import DeploymentsLink from 'components/link/Deployments';
 import EnvironmentLink from 'components/link/Environment';
+import EnvironmentVariablesLink from 'components/link/EnvironmentVariables';
 import FactsLink from 'components/link/Facts';
 import InsightsLink from 'components/link/Insights';
-import EnvironmentVariablesLink from 'components/link/EnvironmentVariables';
-import getConfig from "next/config";
-const { publicRuntimeConfig } = getConfig();
-import {StyledNavigation} from "./StylednavTabs";
 import ProblemsLink from 'components/link/Problems';
 import TasksLink from 'components/link/Tasks';
 
+import { StyledNavigation } from './StylednavTabs';
+
+const { publicRuntimeConfig } = getConfig();
+
 const NavTabs = ({ activeTab, environment }) => (
-  <StyledNavigation className="navigation">
-    <li className={`overview ${activeTab == 'overview' ? 'active' : ''} deployLink`}>
+  <StyledNavigation>
+    <li className={`overview ${activeTab == 'overview' ? 'active' : ''} linkContainer`}>
       <EnvironmentLink
         environmentSlug={environment.openshiftProjectName}
         projectSlug={environment.project.name}
-        className="deployLink"
+        className="navLink"
       >
-        Environment Overview
+        <ReadOutlined className="icon" />
+        <span className="destination"> Environment Overview</span>
       </EnvironmentLink>
     </li>
-    <li className={`deployments ${activeTab == 'deployments' ? 'active' : ''} deployLink`}>
+
+    <li className={`deployments ${activeTab == 'deployments' ? 'active' : ''} linkContainer`}>
       <DeploymentsLink
         environmentSlug={environment.openshiftProjectName}
         projectSlug={environment.project.name}
-        className="deployLink"
+        className="navLink"
       >
-        Deployments
+        <RocketOutlined className="icon" />
+        <span className="destination"> Deployments</span>
       </DeploymentsLink>
     </li>
-    <li className={`backups ${activeTab == 'backups' ? 'active' : ''} deployLink`}>
+
+    <li className={`backups ${activeTab == 'backups' ? 'active' : ''} linkContainer`}>
       <BackupsLink
         environmentSlug={environment.openshiftProjectName}
         projectSlug={environment.project.name}
-        className="deployLink"
+        className="navLink"
       >
-        Backups
+        <SaveOutlined className="icon" />
+        <span className="destination"> Backups</span>
       </BackupsLink>
     </li>
-    <li className={`tasks ${activeTab == 'tasks' ? 'active' : ''} ${'deployLink'}`}>
+
+    <li className={`tasks ${activeTab == 'tasks' ? 'active' : ''} ${'linkContainer'}`}>
       <TasksLink
         environmentSlug={environment.openshiftProjectName}
         projectSlug={environment.project.name}
-        className="deployLink"
+        className="navLink"
       >
-        Tasks
+        <CheckSquareOutlined className="icon" />
+        <span className="destination"> Tasks</span>
       </TasksLink>
     </li>
-    {publicRuntimeConfig.LAGOON_UI_VIEW_ENV_VARIABLES == null && <li
-      className={`environmentVariables ${activeTab == 'environmentVariables' ? 'active' : ''} ${"deployLink"}`}
-    >
-      <EnvironmentVariablesLink
-        environmentSlug={environment.openshiftProjectName}
-        projectSlug={environment.project.name}
-        className="deployLink"
-      >
-        Variables
-      </EnvironmentVariablesLink>
-    </li>
-    }
+
+    {publicRuntimeConfig.LAGOON_UI_VIEW_ENV_VARIABLES == null && (
+      <li className={`environmentVariables ${activeTab == 'environmentVariables' ? 'active' : ''} ${'linkContainer'}`}>
+        <EnvironmentVariablesLink
+          environmentSlug={environment.openshiftProjectName}
+          projectSlug={environment.project.name}
+          className="navLink"
+        >
+          <LockOutlined className="icon" />
+          <span className="destination"> Variables</span>
+        </EnvironmentVariablesLink>
+      </li>
+    )}
     {environment.project.problemsUi == 1 && (
-      <li className={`problems ${activeTab == 'problems' ? 'active' : ''} deployLink`}>
-      <ProblemsLink
+      <li className={`problems ${activeTab == 'problems' ? 'active' : ''} linkContainer`}>
+        <ProblemsLink
           environmentSlug={environment.openshiftProjectName}
           projectSlug={environment.project.name}
-          className="deployLink"
+          className="navLink"
         >
-          Problems
+          <AlertOutlined className="icon" />
+          <span className="destination"> Problems</span>
         </ProblemsLink>
       </li>
     )}
     {environment.project.factsUi == 1 && (
-      <li className={`facts ${activeTab == 'facts' ? 'active' : ''} ${'deployLink'}`}>
+      <li className={`facts ${activeTab == 'facts' ? 'active' : ''} ${'linkContainer'}`}>
         <FactsLink
           environmentSlug={environment.openshiftProjectName}
           projectSlug={environment.project.name}
-          className="deployLink"
+          className="navLink"
         >
-          Facts
+          <TagsOutlined className="icon" />
+          <span className="destination"> Facts</span>
         </FactsLink>
       </li>
     )}
     {environment.project.factsUi == 1 && (
-      <li className={`insights ${activeTab == 'insights' ? 'active' : ''} deployLink`}>
+      <li className={`insights ${activeTab == 'insights' ? 'active' : ''} linkContainer`}>
         <InsightsLink
           environmentSlug={environment.openshiftProjectName}
           projectSlug={environment.project.name}
-          className="deployLink"
+          className="navLink"
         >
-          Insights
+          <BarChartOutlined className="icon" />
+          <span className="destination"> Insights</span>
         </InsightsLink>
       </li>
     )}
diff --git a/src/components/ProjectNavTabs/ProjectNavTabsSkeleton.tsx b/src/components/ProjectNavTabs/ProjectNavTabsSkeleton.tsx
index e727a9bd..b7e23c78 100644
--- a/src/components/ProjectNavTabs/ProjectNavTabsSkeleton.tsx
+++ b/src/components/ProjectNavTabs/ProjectNavTabsSkeleton.tsx
@@ -1,55 +1,39 @@
-import React, { FC } from "react";
-import ProjectChildPageLink from "components/link/ProjectChildPageLink";
-import ProjectLink from "components/link/Project";
-import DeployTargetsLink from "components/link/DeployTargets";
-import { StyledProjectNavTabs } from "./StyledProjectNavTabs";
-import Skeleton from "react-loading-skeleton";
+import React, { FC } from 'react';
+
+import { DeploymentUnitOutlined, KeyOutlined, ReadOutlined } from '@ant-design/icons';
+import DeployTargetsLink from 'components/link/DeployTargets';
+import ProjectLink from 'components/link/Project';
+import ProjectChildPageLink from 'components/link/ProjectChildPageLink';
+
+import { StyledProjectNavTabs } from './StyledProjectNavTabs';
 
 interface ProjectNavTabsSkeleton {
   activeTab: string;
   projectName: string;
 }
 
-const ProjectNavTabsSkeleton: FC<ProjectNavTabsSkeleton> = ({
-  activeTab,
-  projectName,
-}) => (
-  <StyledProjectNavTabs className="navigation">
-      <li
-        className={`overview ${
-          activeTab == "overview" ? "active" : ""
-        } deployLink`}
-      >
-        <ProjectLink projectSlug={projectName}>Project Overview</ProjectLink>
+const ProjectNavTabsSkeleton: FC<ProjectNavTabsSkeleton> = ({ activeTab, projectName }) => (
+  <StyledProjectNavTabs>
+    <li className={`overview ${activeTab == 'overview' ? 'active' : ''} linkContainer`}>
+      <ProjectLink projectSlug={projectName} className="navLink">
+        <ReadOutlined className="icon" />
+        <span className="destination"> Project Overview</span>
+      </ProjectLink>
+    </li>
+    <li className={`variables ${activeTab == 'variables' ? 'active' : ''} linkContainer`}>
+      <ProjectChildPageLink childPage={'variables'} projectSlug={projectName} className="navLink">
+        <KeyOutlined className="icon" />
+        <span className="destination"> Variables</span>
+      </ProjectChildPageLink>
+    </li>
+    {activeTab == 'deployTargets' && (
+      <li className={`deployTargets ${activeTab == 'deployTargets' ? 'active' : ''} linkContainer`}>
+        <DeployTargetsLink className="navLink" projectSlug={projectName}>
+          <DeploymentUnitOutlined className="icon" />
+          <span className="destination"> Deploy Targets</span>
+        </DeployTargetsLink>
       </li>
-      <li
-        className={`variables ${
-          activeTab == "variables" ? "active" : ""
-        } deployLink`}
-      >
-        <ProjectChildPageLink
-          childPage={"variables"}
-          projectSlug={projectName}
-        >
-          Variables
-        </ProjectChildPageLink>
-
-      </li>
-      { activeTab == "deployTargets" && (
-          <li
-              className={`deployTargets ${
-                  activeTab == "deployTargets" ? "active" : ""
-              } deployLink`}
-          >
-              <DeployTargetsLink
-                  projectSlug={projectName}
-              >
-                  Deploy Targets
-              </DeployTargetsLink>
-          </li>
-      )}
-
-    {/*<Skeleton style={{ height: "50px", lineHeight: "0.5" }} />*/}
+    )}
   </StyledProjectNavTabs>
 );
 
diff --git a/src/components/ProjectNavTabs/StyledProjectNavTabs.tsx b/src/components/ProjectNavTabs/StyledProjectNavTabs.tsx
index f32580af..a939c108 100644
--- a/src/components/ProjectNavTabs/StyledProjectNavTabs.tsx
+++ b/src/components/ProjectNavTabs/StyledProjectNavTabs.tsx
@@ -1,106 +1,3 @@
-import styled from "styled-components";
-import { bp, color } from "lib/variables";
+import { StyledNavigation as Nav } from "components/Organizations/NavTabs/StyledNavTabs";
 
-export const StyledProjectNavTabs = styled.ul`
-  background: ${props => props.theme.backgrounds.sidebar};
-  border-right: 1px solid ${props => props.theme.borders.input};
-  margin: 0;
-  z-index: 10;
-
-  @media ${bp.tabletUp} {
-    min-width: 30%;
-    padding-bottom: 60px;
-  }
-  @media ${bp.wideUp} {
-    min-width: 25%;
-  }
-  li {
-    border-bottom: 1px solid ${props => props.theme.borders.input};
-    margin: 0;
-    padding: 0;
-    position: relative;
-    &:hover {
-      background-color: ${color.white};
-    }
-    &::before {
-      background-color: ${color.linkBlue};
-      background-position: center center;
-      background-repeat: no-repeat;
-      content: "";
-      display: block;
-      height: 59px;
-      left: 0;
-      position: absolute;
-      top: 0;
-      transition: all 0.3s ease-in-out;
-      width: 45px;
-    }
-    a {
-      color: ${props => props.theme.texts.navigation};
-      display: block;
-      padding: 20px 20px 19px 60px;
-      @media ${bp.wideUp} {
-        padding-left: calc((100vw / 16) * 1);
-      }
-    }
-    &.active {
-      &::before {
-        // background-color: ${color.almostWhite};
-      }
-      &:hover {
-        background-color: white;
-      }
-      background-color: ${props => props.theme.backgrounds.content};
-      border-right: 1px solid ${(props)=>props.theme.backgrounds.content};
-      width: calc(100% + 1px);
-      a {
-        color: ${props => props.theme.texts.navigation};
-      }
-    }
-    &.overview {
-      &::before {
-        background-image: url("/static/images/overview.svg");
-        background-size: 18px;
-      }
-      &.active::before {
-        background-image: url("/static/images/overview-active.svg");
-      }
-    }
-    &.variables {
-      &::before {
-        background-image: url("/static/images/variables.svg");
-        background-size: 22px;
-      }
-      &.active::before {
-        background-image: url("/static/images/variables-active.svg");
-      }
-    }
-    &.deployTargets {
-      &::before {
-        background-image: url("/static/images/target-sidebar.svg");
-        background-size: 22px;
-      }
-      &.active::before {
-        background-image: url("/static/images/target-sidebar-active.svg");
-      }
-    }
-  }
-
-  .deployLink {
-    a {
-      color: ${props => props.theme.texts.navigation};
-      display: block;
-      padding: 20px 20px 19px 60px;
-      @media ${bp.wideUp} {
-        padding-left: calc((100vw / 16) * 1);
-      }
-      &:hover{
-        color: ${color.darkGrey};
-      }
-    }
-
-    .active a {
-      color: ${color.black};
-    }
-  }
-`;
+export const StyledProjectNavTabs = Nav;
\ No newline at end of file
diff --git a/src/components/ProjectNavTabs/index.js b/src/components/ProjectNavTabs/index.js
index 6053abad..c902d9ed 100644
--- a/src/components/ProjectNavTabs/index.js
+++ b/src/components/ProjectNavTabs/index.js
@@ -1,46 +1,38 @@
-import React from "react";
+import React from 'react';
+
+import getConfig from 'next/config';
+
+import { DeploymentUnitOutlined, KeyOutlined, ReadOutlined } from '@ant-design/icons';
+import DeployTargetsLink from 'components/link/DeployTargets';
+import ProjectLink from 'components/link/Project';
 import ProjectVariablesLink from 'components/link/ProjectVariables';
-import ProjectLink from "components/link/Project";
-import DeployTargetsLink from "components/link/DeployTargets";
-import { StyledProjectNavTabs } from "./StyledProjectNavTabs";
-import getConfig from "next/config";
+
+import { StyledProjectNavTabs } from './StyledProjectNavTabs';
+
 const { publicRuntimeConfig } = getConfig();
 
 const ProjectNavTabs = ({ activeTab, project }) => {
   return (
     <StyledProjectNavTabs className="navigation">
-      <li
-        className={`overview ${
-          activeTab === "overview" ? "active" : ""
-        } deployLink`}
-      >
-        <ProjectLink projectSlug={project.name}>Project Overview</ProjectLink>
+      <li className={`overview ${activeTab === 'overview' ? 'active' : ''} linkContainer`}>
+        <ProjectLink projectSlug={project.name} className="navLink">
+          <ReadOutlined className="icon" />
+          <span className="destination"> Project Overview</span>
+        </ProjectLink>
       </li>
-      {publicRuntimeConfig.LAGOON_UI_VIEW_ENV_VARIABLES == null && 
-        <li
-          className={`variables ${
-            activeTab === "variables" ? "active" : ""
-          } deployLink`}
-        >
-          <ProjectVariablesLink
-            projectSlug={project.name}
-            className="deployLink"
-          >
-            Variables
+      {publicRuntimeConfig.LAGOON_UI_VIEW_ENV_VARIABLES == null && (
+        <li className={`variables ${activeTab === 'variables' ? 'active' : ''} linkContainer`}>
+          <ProjectVariablesLink projectSlug={project.name} className="navLink">
+            <KeyOutlined className="icon" />
+            <span className="destination"> Variables</span>
           </ProjectVariablesLink>
         </li>
-      }
+      )}
       {project.deployTargetConfigs.length > 0 && (
-        <li
-          className={`deployTargets ${
-            activeTab === "deployTargets" ? "active" : ""
-          } deployLink`}
-        >
-          <DeployTargetsLink
-            projectSlug={project.name}
-            className="deployLink"
-          >
-            Deploy Targets
+        <li className={`deployTargets ${activeTab === 'deployTargets' ? 'active' : ''} linkContainer`}>
+          <DeployTargetsLink projectSlug={project.name} className="navLink">
+            <DeploymentUnitOutlined className="icon" />
+            <span className="destination"> Deploy Targets</span>
           </DeployTargetsLink>
         </li>
       )}
diff --git a/src/components/link/DeployTargets.js b/src/components/link/DeployTargets.js
index 8370c585..f599cc82 100644
--- a/src/components/link/DeployTargets.js
+++ b/src/components/link/DeployTargets.js
@@ -11,7 +11,7 @@ export const getLinkData = (projectSlug) => ({
 const DeployTargetsLink = ({
   projectSlug,
   children,
-  className = null,
+  className = '',
   prefetch = false,
 }) => {
   const linkData = getLinkData(projectSlug);
diff --git a/src/components/link/Project.js b/src/components/link/Project.js
index 9a092bc8..9dbbb341 100644
--- a/src/components/link/Project.js
+++ b/src/components/link/Project.js
@@ -11,7 +11,7 @@ export const getLinkData = projectSlug => ({
 /**
  * Links to the project page given the project name.
  */
-const ProjectLink = ({ projectSlug, children, className = null, prefetch = false }) => {
+const ProjectLink = ({ projectSlug, children, className = '', prefetch = false }) => {
   const linkData = getLinkData(projectSlug);
 
   return (
diff --git a/src/components/link/ProjectChildPageLink.js b/src/components/link/ProjectChildPageLink.js
index db44feaa..e6c86014 100644
--- a/src/components/link/ProjectChildPageLink.js
+++ b/src/components/link/ProjectChildPageLink.js
@@ -12,7 +12,7 @@ const ProjectChildPageLink = ({
   childPage,
   projectSlug,
   children,
-  className = null,
+  className = '',
   prefetch = false
 }) => {
   const linkData = getLinkData(childPage, projectSlug);