fix(client): modal a11y and learn tabs on mobile (#36750)

* fix/ make modal more visible and adjust learn tabs on mob

* fix: clean up

* fix: update snapshot

client/src/components/Footer/Footer.test.js

@@ -6,7 +6,7 @@ import 'jest-dom/extend-expect';
 import Footer from './';
 
 describe('<Footer />', () => {
-  it('renders to the DOM', () => {
+  it('matches snapshot', () => {
     const tree = renderer.create(<Footer />).toJSON();
     expect(tree).toMatchSnapshot();
   });

client/src/components/Footer/__snapshots__/Footer.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Footer /> renders to the DOM 1`] = `
+exports[`<Footer /> matches snapshot 1`] = `
 <footer
   className="site-footer"
 >

client/src/components/layouts/global.css

@@ -100,6 +100,13 @@ a:focus {
 
 .modal-content {
   background-color: var(--secondary-background);
+  border-radius: 0px;
+  border: 1px solid var(--secondary-color);
+}
+
+.modal-footer,
+.modal-header {
+  border-color: var(--secondary-color);
 }
 
 /* button */
@@ -334,3 +341,13 @@ pre {
 .panel-primary {
   border-color: var(--primary-color);
 }
+
+.nav-tabs > li.active > a,
+.nav-tabs > li.active > a:hover,
+.nav-tabs > li.active > a:focus {
+  color: var(--secondary-background);
+}
+
+.nav-tabs > li > a {
+  border-radius: 0;
+}

client/src/templates/Challenges/classic/classic.css

@@ -34,3 +34,9 @@
   height: 100%;
   overflow: hidden;
 }
+#challenge-page-tabs a {
+  text-decoration: none;
+}
+#challenge-page-tabs a:hover {
+  color: var(--secondary-background);
+}

client/src/templates/Challenges/components/reset-modal.css

@@ -5,17 +5,12 @@
 .reset-modal-header {
   color: var(--danger-color);
   background-color: var(--danger-background);
-  border: none;
 }
 
 .reset-modal-header h4 {
   color: var(--danger-color);
 }
 
-.reset-modal .modal-footer {
-  border-color: var(--danger-color);
-}
-
 .reset-modal-header .close {
   color: var(--danger-color);
   font-size: 28px;