Improve nav link active styles

JoinColony · Feb 14, 2020 · 789b71f · 789b71f
1 parent a46bd60
commit 789b71f
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/src/modules/dashboard/components/ColonyHome/ColonyMeta/ColonyPrograms.css b/src/modules/dashboard/components/ColonyHome/ColonyMeta/ColonyPrograms.css
@@ -40,11 +40,15 @@
   white-space: nowrap;
 }
 
+.navLink:not(.navLinkActive):hover {
+  opacity: 0.8;
+}
+
+.navLink.navLinkActive {
+  color: var(--colony-black);
+}
+
 .draft .navLink {
   /* Leave room for "pending dot" */
   max-width: 87%;
 }
-
-.navLink:hover {
-  opacity: 0.8;
-}
diff --git a/src/modules/dashboard/components/ColonyHome/ColonyMeta/ColonyPrograms.css.d.ts b/src/modules/dashboard/components/ColonyHome/ColonyMeta/ColonyPrograms.css.d.ts
@@ -3,3 +3,4 @@ export const programsNav: string;
 export const baseStyles: string;
 export const draft: string;
 export const navLink: string;
+export const navLinkActive: string;
diff --git a/src/modules/dashboard/components/ColonyHome/ColonyMeta/ColonyPrograms.tsx b/src/modules/dashboard/components/ColonyHome/ColonyMeta/ColonyPrograms.tsx
@@ -123,6 +123,7 @@ const ColonyPrograms = ({
               key={id}
             >
               <NavLink
+                activeClassName={styles.navLinkActive}
                 className={styles.navLink}
                 text={title || MSG.linkUntitledProgramText}
                 title={MSG.linkProgramTitleText}