Fix extra spacing below project nav (#7024)

* Fix extra spacing in project nav * Add a snapshot test to ensure nav styling is not mistakenly changed in future * update yarn.lock * improve nav css - use flexbox to make nav respond better to different heights instead of using magic number - ensure browsers have same heights so changing them doesn't change height of navbar and doesn't cause icons/text to shift Co-authored-by: Chris Breiding <[email protected]> Co-authored-by: Chris Breiding <[email protected]>
cypress-io · Apr 17, 2020 · ae5ae1f · ae5ae1f · cypress-bot · Apr 17, 2020
1 parent de58acb
commit ae5ae1f
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 15 deletions.
diff --git a/packages/desktop-gui/cypress/integration/project_nav_spec.js b/packages/desktop-gui/cypress/integration/project_nav_spec.js
@@ -49,19 +49,22 @@ describe('Project Nav', function () {
       cy.get('.navbar-default')
     })
 
-    it('displays \'Tests\' nav as active', () => {
+    it('displays "Tests" nav as active', () => {
       cy.get('.navbar-default').contains('a', 'Tests')
       .should('have.class', 'active')
     })
 
-    describe('when project loads', function () {
-      beforeEach(() => {
-        cy.wait(600)
-      })
+    it('displays "Tests" page when project loads', () => {
+      cy.contains('integration')
+      cy.get('.list-as-table').should('be.visible')
+      cy.percySnapshot()
+    })
 
-      it('displays \'Tests\' page', () => {
-        cy.contains('integration')
-      })
+    it('displays "Tests" page when switching to a beta browser', () => {
+      cy.get('.browsers .dropdown-chosen').click()
+      cy.contains('.browsers', 'beta').first().click()
+      cy.get('.list-as-table').should('be.visible')
+      cy.percySnapshot()
     })
 
     describe('runs page', function () {

diff --git a/packages/desktop-gui/src/app/nav.scss b/packages/desktop-gui/src/app/nav.scss
@@ -38,16 +38,21 @@
       i {
         font-size: 11px;
         color: #555;
+        margin-right: 5px;
       }
     }
 
     > li {
+      display: flex;
+
       > div,
       > a {
-        font-size: 13px;
+        align-items: center;
         color: #444;
-        padding: 1px 20px 0 20px;
-        line-height: 40px;
+        display: flex;
+        font-size: 13px;
+        justify-content: center;
+        padding: 0 20px;
       }
 
       > a  {
@@ -178,14 +183,17 @@
   }
 
   .dropdown-chosen {
-    border-radius: 4px;
+    background: #f6f6f6;
     border: 1px solid #c7c7c7;
-    line-height: 28px !important;
-    background-color: #f6f6f6;
+    border-radius: 4px;
+    display: flex;
+    height: 34px;
+    justify-content: center;
 
     img {
+      margin-right: 5px;
       position: relative;
-      top: -1px;
+      top: 1px;
     }
 
     &.disabled,
@@ -194,6 +202,10 @@
     }
   }
 
+  .dropdown-toggle {
+    margin-left: 4px;
+  }
+
   .fa-check-circle, .fa-sync-alt {
     margin-right: 3px;
   }