From ac4e1d4e269f562ecd7506fd361b4b3cda1bde4b Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Thu, 27 Feb 2020 18:00:20 -0400
Subject: [PATCH] Remove faux `<header>` elements (#8131)

We have been using the HTML `header` tag in various footers. The
`footer` tag is generally more appropriate for use in a footer.
---
 .../gas-customization/gas-modal-page-container/index.scss | 2 +-
 .../components/app/permission-page-container/index.scss   | 2 +-
 ui/app/components/ui/page-container/index.scss            | 4 ++--
 .../page-container-footer.component.js                    | 8 ++++----
 .../tests/page-container-footer.component.test.js         | 4 ++--
 .../confirm-add-suggested-token.component.js              | 4 ++--
 .../confirm-add-token/confirm-add-token.component.js      | 4 ++--
 .../pages/first-time-flow/metametrics-opt-in/index.scss   | 6 +++---
 ui/app/pages/keychains/reveal-seed.js                     | 4 ++--
 ui/app/pages/settings/networks-tab/index.scss             | 2 +-
 10 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/index.scss b/ui/app/components/app/gas-customization/gas-modal-page-container/index.scss
index b9e0f59c4..76c7d502c 100644
--- a/ui/app/components/app/gas-customization/gas-modal-page-container/index.scss
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/index.scss
@@ -24,7 +24,7 @@
     }
 
     &__footer {
-      header {
+      footer {
         padding-top: 12px;
         padding-bottom: 12px;
       }
diff --git a/ui/app/components/app/permission-page-container/index.scss b/ui/app/components/app/permission-page-container/index.scss
index c3a6a65a0..a7ba97151 100644
--- a/ui/app/components/app/permission-page-container/index.scss
+++ b/ui/app/components/app/permission-page-container/index.scss
@@ -261,7 +261,7 @@
     border-top: none;
     align-items: center;
 
-    header {
+    footer {
       width: 300px;
     }
   }
diff --git a/ui/app/components/ui/page-container/index.scss b/ui/app/components/ui/page-container/index.scss
index 003c5a0e2..8e292ba67 100644
--- a/ui/app/components/ui/page-container/index.scss
+++ b/ui/app/components/ui/page-container/index.scss
@@ -55,7 +55,7 @@
     border-top: 1px solid $geyser;
     flex: 0 0 auto;
 
-    header {
+    footer {
       display: flex;
       flex-flow: row;
       justify-content: center;
@@ -63,7 +63,7 @@
       flex: 0 0 auto;
     }
 
-    footer {
+    &-secondary {
       display: flex;
       flex-flow: row;
       justify-content: space-around;
diff --git a/ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js b/ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js
index b9c0b554a..5468999a4 100644
--- a/ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js
+++ b/ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js
@@ -38,7 +38,7 @@ export default class PageContainerFooter extends Component {
     return (
       <div className="page-container__footer">
 
-        <header>
+        <footer>
           {!hideCancel && (
             <Button
               type={cancelButtonType || 'default'}
@@ -61,12 +61,12 @@ export default class PageContainerFooter extends Component {
           >
             { submitText || this.context.t('next') }
           </Button>
-        </header>
+        </footer>
 
         {children && (
-          <footer>
+          <div className="page-container__footer-secondary">
             {children}
-          </footer>
+          </div>
         )}
 
       </div>
diff --git a/ui/app/components/ui/page-container/page-container-footer/tests/page-container-footer.component.test.js b/ui/app/components/ui/page-container/page-container-footer/tests/page-container-footer.component.test.js
index f4f821f4c..691ad3d8f 100644
--- a/ui/app/components/ui/page-container/page-container-footer/tests/page-container-footer.component.test.js
+++ b/ui/app/components/ui/page-container/page-container-footer/tests/page-container-footer.component.test.js
@@ -27,7 +27,7 @@ describe('Page Footer', function () {
     assert.equal(wrapper.find('.page-container__footer').length, 1)
   })
 
-  it('should render a footer inside page-container__footer when given children', function () {
+  it('should render a secondary footer inside page-container__footer when given children', function () {
     const wrapper = shallow(
       <PageFooter>
         <div>Works</div>
@@ -35,7 +35,7 @@ describe('Page Footer', function () {
       { context: { t: sinon.spy((k) => `[${k}]`) } }
     )
 
-    assert.equal(wrapper.find('.page-container__footer footer').length, 1)
+    assert.equal(wrapper.find('.page-container__footer-secondary').length, 1)
   })
 
   it('renders two button components', function () {
diff --git a/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js b/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
index 7904e8f79..34b85a09c 100644
--- a/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
+++ b/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
@@ -106,7 +106,7 @@ export default class ConfirmAddSuggestedToken extends Component {
           </div>
         </div>
         <div className="page-container__footer">
-          <header>
+          <footer>
             <Button
               type="default"
               large
@@ -130,7 +130,7 @@ export default class ConfirmAddSuggestedToken extends Component {
             >
               { this.context.t('addToken') }
             </Button>
-          </header>
+          </footer>
         </div>
       </div>
     )
diff --git a/ui/app/pages/confirm-add-token/confirm-add-token.component.js b/ui/app/pages/confirm-add-token/confirm-add-token.component.js
index d918d7e39..8e73eac3e 100644
--- a/ui/app/pages/confirm-add-token/confirm-add-token.component.js
+++ b/ui/app/pages/confirm-add-token/confirm-add-token.component.js
@@ -86,7 +86,7 @@ export default class ConfirmAddToken extends Component {
           </div>
         </div>
         <div className="page-container__footer">
-          <header>
+          <footer>
             <Button
               type="default"
               large
@@ -109,7 +109,7 @@ export default class ConfirmAddToken extends Component {
             >
               { this.context.t('addTokens') }
             </Button>
-          </header>
+          </footer>
         </div>
       </div>
     )
diff --git a/ui/app/pages/first-time-flow/metametrics-opt-in/index.scss b/ui/app/pages/first-time-flow/metametrics-opt-in/index.scss
index 6c2e37785..afded8345 100644
--- a/ui/app/pages/first-time-flow/metametrics-opt-in/index.scss
+++ b/ui/app/pages/first-time-flow/metametrics-opt-in/index.scss
@@ -49,7 +49,7 @@
     font-weight: normal;
     line-height: 21px;
     font-size: 16px;
-    margin-top: 12px; 
+    margin-top: 12px;
   }
 
   &__committments {
@@ -128,9 +128,9 @@
         margin-right: 16px;
       }
 
-      header {
+      footer {
         padding: 0px;
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/ui/app/pages/keychains/reveal-seed.js b/ui/app/pages/keychains/reveal-seed.js
index 37506c497..238a5937e 100644
--- a/ui/app/pages/keychains/reveal-seed.js
+++ b/ui/app/pages/keychains/reveal-seed.js
@@ -102,7 +102,7 @@ class RevealSeedPage extends Component {
   renderPasswordPromptFooter () {
     return (
       <div className="page-container__footer">
-        <header>
+        <footer>
           <Button
             type="default"
             large
@@ -120,7 +120,7 @@ class RevealSeedPage extends Component {
           >
             {this.context.t('next')}
           </Button>
-        </header>
+        </footer>
       </div>
     )
   }
diff --git a/ui/app/pages/settings/networks-tab/index.scss b/ui/app/pages/settings/networks-tab/index.scss
index b9f4245f9..920bd64b4 100644
--- a/ui/app/pages/settings/networks-tab/index.scss
+++ b/ui/app/pages/settings/networks-tab/index.scss
@@ -60,7 +60,7 @@
         width: 93%;
       }
 
-      header {
+      footer {
         padding: 10px 0px;
       }
     }