From 5dd8044035b3a03f9d0bca2a5b108ff1eee7a690 Mon Sep 17 00:00:00 2001
From: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
Date: Wed, 4 Sep 2019 15:50:35 +0300
Subject: [PATCH] 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     |  2 +-
 .../Footer/__snapshots__/Footer.test.js.snap    |  2 +-
 client/src/components/layouts/global.css        | 17 +++++++++++++++++
 .../templates/Challenges/classic/classic.css    |  6 ++++++
 .../Challenges/components/reset-modal.css       |  5 -----
 5 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Footer/Footer.test.js b/client/src/components/Footer/Footer.test.js
index 109442f3b4..16140cdd10 100644
--- a/client/src/components/Footer/Footer.test.js
+++ b/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();
   });
diff --git a/client/src/components/Footer/__snapshots__/Footer.test.js.snap b/client/src/components/Footer/__snapshots__/Footer.test.js.snap
index e3ad6c2354..013453cc21 100644
--- a/client/src/components/Footer/__snapshots__/Footer.test.js.snap
+++ b/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"
 >
diff --git a/client/src/components/layouts/global.css b/client/src/components/layouts/global.css
index 8f6e4a12d7..7412f114b6 100644
--- a/client/src/components/layouts/global.css
+++ b/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;
+}
diff --git a/client/src/templates/Challenges/classic/classic.css b/client/src/templates/Challenges/classic/classic.css
index 29024a7af4..835684d216 100644
--- a/client/src/templates/Challenges/classic/classic.css
+++ b/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);
+}
diff --git a/client/src/templates/Challenges/components/reset-modal.css b/client/src/templates/Challenges/components/reset-modal.css
index 6221c4b6bd..c5376551ad 100644
--- a/client/src/templates/Challenges/components/reset-modal.css
+++ b/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;