Using a hidden css style, cleaning up left/right button and card hiding.

Author: evhan55

src/components/cards/card.css

@@ -34,10 +34,6 @@
     border-bottom-right-radius: 0.75rem;
 }
 
-.right-card-hidden {
-    display: none;
-}
-
 .left-card::after, .right-card::after {
     content: "";
     position: absolute;
@@ -66,10 +62,6 @@
     transition: all 0.25s ease;
 }
 
-.right-button-hidden {
-    display: none;
-}
-
 .left-button:hover, .right-button:hover {
     box-shadow: 0 0 0 6px $extensions-transparent;
     transform: scale(1.125);
@@ -167,10 +159,6 @@
     text-align: center;
 }
 
-.step-body-hidden {
-    display: none;
-}
-
 .step-video {
     height: 256px;
 }
@@ -302,3 +290,7 @@
     background: $ui-white;
     box-shadow: 0px 0px 0px 2px $ui-black-transparent;
 }
+
+.hidden {
+    display: none;
+}

src/components/cards/cards.jsx

@@ -120,9 +120,9 @@ const NextPrevButtons = ({isRtl, onNextStep, onPrevStep, toggle}) => (
     <Fragment>
         {onNextStep ? (
             <div>
-                <div className={isRtl ? styles.leftCard : (toggle ? styles.rightCard : styles.rightCardHidden)} />
+                <div className={toggle ? (isRtl ? styles.leftCard : styles.rightCard) : styles.hidden} />
                 <div
-                    className={isRtl ? styles.leftButton : (toggle ? styles.rightButton : styles.rightButtonHidden)}
+                    className={toggle ? (isRtl ? styles.leftButton : styles.rightButton) : styles.hidden}
                     onClick={onNextStep}
                 >
                     <img
@@ -134,9 +134,9 @@ const NextPrevButtons = ({isRtl, onNextStep, onPrevStep, toggle}) => (
         ) : null}
         {onPrevStep ? (
             <div>
-                <div className={isRtl ? styles.rightCard : styles.leftCard} />
+                <div className={toggle ? (isRtl ? styles.rightCard : styles.leftCard) : styles.hidden} />
                 <div
-                    className={isRtl ? styles.rightButton : styles.leftButton}
+                    className={toggle ? (isRtl ? styles.rightButton : styles.leftButton) : styles.hidden}
                     onClick={onPrevStep}
                 >
                     <img
@@ -276,7 +276,7 @@ const Cards = props => {
                         onShowAll={onShowAll}
                         onToggleCards={onToggleCards}
                     />
-                    <div className={toggle ? styles.stepBody : styles.stepBodyHidden}>
+                    <div className={toggle ? styles.stepBody : styles.hidden}>
                         {steps[step].deckIds ? (
                             <PreviewsStep
                                 content={content}