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.

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

ui/app/components/app/permission-page-container/index.scss

@@ -261,7 +261,7 @@
     border-top: none;
     align-items: center;
 
-    header {
+    footer {
       width: 300px;
     }
   }

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;

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>

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 () {

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>
     )

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>
     )

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;
       }
     }
   }
-}
+}

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

ui/app/pages/settings/networks-tab/index.scss

@@ -60,7 +60,7 @@
         width: 93%;
       }
 
-      header {
+      footer {
         padding: 10px 0px;
       }
     }