From 94d4b2f553fefff51e801d2fc4d7d8d6da7c3adc Mon Sep 17 00:00:00 2001
From: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com>
Date: Tue, 11 May 2021 03:45:16 +0900
Subject: [PATCH] fix: navbar avatar height, background colors (#42076)

* fix: navbar avatar height

* fix: prevent avatar background change when hovered or focused
---
 client/src/components/Header/components/universalNav.css | 9 +++++++++
 cypress/integration/learn/common-components/navbar.js    | 9 ++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Header/components/universalNav.css b/client/src/components/Header/components/universalNav.css
index 836e31343e..466fc45847 100644
--- a/client/src/components/Header/components/universalNav.css
+++ b/client/src/components/Header/components/universalNav.css
@@ -196,6 +196,11 @@
   width: 31px;
 }
 
+.navatar .avatar-nav-link:hover,
+.navatar .avatar-nav-link:focus {
+  background-color: var(--theme-color);
+}
+
 .navatar .default-border {
   border: none;
 }
@@ -205,6 +210,10 @@
   background: var(--secondary-background);
 }
 
+.navatar .avatar-container {
+  height: 100%;
+}
+
 .navatar .avatar-container svg,
 .navatar .avatar-container img {
   object-fit: cover;
diff --git a/cypress/integration/learn/common-components/navbar.js b/cypress/integration/learn/common-components/navbar.js
index 2c9e431fad..5d09c454fe 100644
--- a/cypress/integration/learn/common-components/navbar.js
+++ b/cypress/integration/learn/common-components/navbar.js
@@ -6,7 +6,8 @@ const selectors = {
   navigationLinks: '.nav-list',
   avatarContainer: '.avatar-container',
   defaultAvatar: '.avatar-container',
-  menuButton: '.toggle-button-nav'
+  menuButton: '.toggle-button-nav',
+  avatarImage: '.avatar-container .avatar'
 };
 
 let appHasStarted;
@@ -99,4 +100,10 @@ describe('Navbar', () => {
     cy.get(selectors.avatarContainer).should('have.class', 'default-border');
     cy.get(selectors.defaultAvatar).should('exist');
   });
+
+  it('Should have a profile image with dimensions that are <= 31px', () => {
+    cy.login();
+    cy.get(selectors.avatarImage).invoke('width').should('lte', 31);
+    cy.get(selectors.avatarImage).invoke('height').should('lte', 31);
+  });
 });