gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: navbar avatar height, background colors (#42076)

Browse Source 
* fix: navbar avatar height

* fix: prevent avatar background change when hovered or focused
This commit is contained in:
Kristofer Koishigawa
2021-05-11 03:45:16 +09:00
committed by GitHub
parent e1c00138a9
commit 94d4b2f553
2 changed files with 17 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
client/src/components/Header/components/universalNav.css
View File

@ -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;

9
cypress/integration/learn/common-components/navbar.js
View File

@ -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);
});
});