Header icon color now changes on hover (reactplay#762)

* Unline moved to the back of the text * Changed the header icon colors on hover * Remove unwanted code * Github icon color set to white on hover Co-authored-by: Murtuzaali Surti <[email protected]>
t-trafer · Oct 30, 2022 · 266a6a8 · 266a6a8
1 parent fcf6a9d
commit 266a6a8
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/src/common/header/HeaderNav.jsx b/src/common/header/HeaderNav.jsx
@@ -121,7 +121,7 @@ const HeaderNav = ({ showBrowse }) => {
  className="app-header-btn app-header-btn--default"
  data-testid="ideas-btn"
  >
- <FaLightbulb className="icon" />
+ <FaLightbulb className="icon idea-icon" />
  <span className="btn-label">Idea</span>
  </Link>
  </li>
@@ -134,7 +134,7 @@ const HeaderNav = ({ showBrowse }) => {
  className="app-header-btn app-header-btn--default umami--click--github"
  data-testid="github-btn"
  >
- <BsGithub className="icon" />
+ <BsGithub className="icon github-icon" />
  <span className="btn-label">GitHub</span>
  </a>
  </li>
@@ -147,7 +147,7 @@ const HeaderNav = ({ showBrowse }) => {
  className="app-header-btn app-header-btn--default"
  data-testid="twitter-btn"
  >
- <BsTwitter className="icon" />
+ <BsTwitter className="icon twitter-icon" />
  <span className="btn-label">Twitter</span>
  </a>
  </li>
@@ -158,7 +158,7 @@ const HeaderNav = ({ showBrowse }) => {
  onClick={handleClick}
  data-testid="share-btn"
  >
- <IoHeartSharp className="icon" />
+ <IoHeartSharp className="icon share-icon" />
  <span className="btn-label">Share</span>
  </button>
  </li>

diff --git a/src/common/header/header.css b/src/common/header/header.css
@@ -244,6 +244,22 @@
  fill: var(--color-neutral-10);
 }
 
+.header-links > li > .app-header-btn:hover .share-icon {
+ fill: #a83f39;
+}
+
+.header-links > li > .app-header-btn:hover .github-icon {
+ fill: #ffffff;
+}
+
+.header-links > li > .app-header-btn:hover .idea-icon {
+ fill: #ffbb73 ;
+}
+
+.header-links > li > .app-header-btn:hover .twitter-icon {
+ fill: #00acee;
+}
+
 .header-links > li > .app-header-btn .btn-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);