From 92f6efa772337a3f9f40ed0ad6f2f4eaee0c31d3 Mon Sep 17 00:00:00 2001
From: Thiago Chaves <thiago.coh@gmail.com>
Date: Fri, 15 Jul 2022 01:32:31 +0300
Subject: [PATCH] Small stylesheet simplification

---
 src/pages/expression-sets/details.tsx  |  2 +-
 src/pages/expression-sets/practice.tsx |  6 +++---
 src/styles/components.css              | 24 ++++--------------------
 3 files changed, 8 insertions(+), 24 deletions(-)

diff --git a/src/pages/expression-sets/details.tsx b/src/pages/expression-sets/details.tsx
index ba4c04f..2774193 100644
--- a/src/pages/expression-sets/details.tsx
+++ b/src/pages/expression-sets/details.tsx
@@ -50,7 +50,7 @@ const ExpressionSetDetailsPage: NextPage = () => {
             }}
             passHref
           >
-            <a className="navigation-item-bottom text-navigation grow">
+            <a className="navigation-item bottom text-navigation grow">
               <span>Practice this set</span>
             </a>
           </Link>
diff --git a/src/pages/expression-sets/practice.tsx b/src/pages/expression-sets/practice.tsx
index 53cbda9..9884310 100644
--- a/src/pages/expression-sets/practice.tsx
+++ b/src/pages/expression-sets/practice.tsx
@@ -59,19 +59,19 @@ function ExpressionCardPracticeView({
           {revealed ? (
             <>
               <Link href={{ pathname, query }} passHref>
-                <a className="navigation-item-bottom text-navigation grow">
+                <a className="navigation-item bottom text-navigation grow">
                   <div>Wrong</div>
                 </a>
               </Link>
               <Link href={{ pathname, query }} passHref>
-                <a className="navigation-item-bottom text-navigation grow">
+                <a className="navigation-item bottom text-navigation grow">
                   <div>Right</div>
                 </a>
               </Link>
             </>
           ) : (
             <button
-              className="navigation-item-bottom text-navigation grow"
+              className="navigation-item bottom text-navigation grow"
               onClick={() => setRevealed(true)}
             >
               Reveal
diff --git a/src/styles/components.css b/src/styles/components.css
index 8b31d83..567190f 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -93,6 +93,10 @@
   height: 64px;
 }
 
+.navigation-item.bottom {
+  height: 80px;
+}
+
 .navigation-item:hover {
   background-color: antiquewhite;
 }
@@ -101,26 +105,6 @@
   background-color: bisque;
 }
 
-.navigation-item-bottom {
-  display: flex;
-  flex-shrink: 0;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-
-  background-color: lavenderblush;
-  border: 1px solid darkslategray;
-  height: 80px;
-}
-
-.navigation-item-bottom:hover {
-  background-color: antiquewhite;
-}
-
-.navigation-item-bottom.active {
-  background-color: bisque;
-}
-
 .icon-button {
   display: flex;
   align-items: center;