make sort reverse isolated per option

client/src/components/AmountMissing.module.css

@@ -22,7 +22,7 @@
     font-size: 1.4rem;
     display: flex;
     text-align: center;
-    margin-top: 1px;
+    margin-top: 6px;
     color: var(--color-grey);
     margin-bottom: 3rem;
 }

client/src/components/ScrollButton.module.css

@@ -9,7 +9,7 @@
     align-items: center;
     justify-content: space-between;
     bottom: 9rem;
-    right: 7%;
+    right: var(--number-right-placement);
     width: 9.5rem;
     height: 9.5rem;
     border: 1px solid var(--color-red);

client/src/components/Sort.js

@@ -5,14 +5,13 @@ import styles from "./Sort.module.css";
 
 const Sort = ({ setEpisodesShown }) => {
     const options = ["episode number", "date removed"];
-    const [sortOption, setSortOption] = useState(options[0]);
-    const [reverse, setReverse] = useState(false);
+    const [selected, setSelected] = useState({ name: options[0], reverse: false });
 
     useEffect(() => {
         setEpisodesShown((episodesShown) => {
             return [...episodesShown].sort((a, b) => {
-                [a, b] = reverse ? [a, b] : [b, a];
-                switch (sortOption) {
+                [a, b] = selected.reverse ? [a, b] : [b, a];
+                switch (selected.name) {
                     case "episode number":
                         return a.episode_number - b.episode_number;
                     case "date removed":
@@ -22,51 +21,66 @@ const Sort = ({ setEpisodesShown }) => {
                 }
             });
         });
-    }, [sortOption, setEpisodesShown, reverse]);
+    }, [selected, setEpisodesShown]);
 
     return (
         <div className={styles.sort}>
-            {options.map((o, i) => {
-                return <Option option={o} key={o} index={i} />;
+            <p>sort by</p>
+            <div className={styles.options}>
+                {options.map((o, i) => {
+                    return (
+                        <Option
+                            optionName={o}
+                            key={o}
+                            index={i}
+                            selected={selected}
+                            setSelected={setSelected}
+                        />
+                    );
+                })}
+            </div>
+        </div>
+    );
+};
+
+function Option({ optionName, index, selected, setSelected }) {
+    const [reverse, setReverse] = useState(false);
+    const isSelected = selected.name === optionName;
+
+    return (
+        <div
+            className={classnames(styles.option, {
+                [styles.selected]: isSelected,
             })}
+            onClick={() => {
+                if (isSelected) {
+                    setReverse((reverse) => !reverse);
+                    setSelected({ name: optionName, reverse: !reverse });
+                } else {
+                    setSelected({ name: optionName, reverse: reverse });
+                }
+            }}
+        >
+            <input
+                type="radio"
+                id={optionName + index}
+                name={optionName + " option"}
+                value={optionName}
+                className="sr-only"
+            />
+            <label className={styles.label} htmlFor={optionName + index}>
+                {optionName
+                    .split(" ")
+                    .map((word) => word[0].toUpperCase() + word.slice(1))
+                    .join(" ")}
+            </label>
             <Arrow
-                onClick={() => setReverse((reverse) => !reverse)}
                 className={classnames(styles.icon, {
                     [styles.iconReverse]: reverse,
                 })}
             />
         </div>
     );
-
-    function Option({ option, index }) {
-        return (
-            <div
-                className={styles.option}
-                onClick={() => {
-                    setSortOption(option);
-                }}
-            >
-                <input
-                    type="radio"
-                    id={option + index}
-                    name={option + " option"}
-                    value={option}
-                    className="sr-only"
-                />
-                <label
-                    className={classnames(styles.label, {
-                        [styles.selected]: sortOption === option,
-                    })}
-                    htmlFor={option + index}
-                >
-                    {option
-                        .split(" ")
-                        .map((word) => word[0].toUpperCase() + word.slice(1))
-                        .join(" ")}
-                </label>
-            </div>
-        );
-    }
-};
+}
 
 export default Sort;

client/src/components/Sort.module.css

@@ -1,14 +1,22 @@
 .sort {
     position: fixed;
+    right: var(--number-right-placement);
+    /* display: flex; */
+}
+
+.options {
     display: flex;
-    height: min-content;
 }
 
-.option {
+.option .label {
+    color: var(--color-grey-secondary);
+    padding: 0.25em 0.5em;
+    border: 1px solid var(--color-grey-secondary);
     cursor: pointer;
 }
 
-.option .selected {
+.option.selected .label {
+    color: var(--color-white);
     border: 1px solid var(--color-white);
 }
 
@@ -20,8 +28,3 @@
 .iconReverse {
     transform: rotate(90deg);
 }
-
-.option label {
-    padding: 0.25em 0.5em;
-    border: 1px solid var(--color-grey);
-}

client/src/index.css

@@ -17,6 +17,8 @@
 
     --font-family-primary: Oswald, sans-serif;
     --font-family-secondary: Roboto, sans-serif;
+
+    --number-right-placement: 7%;
 }
 
 *,
@@ -60,6 +62,7 @@ a {
 .shake {
     animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
 }
+
 @keyframes shake {
     10%,
     90% {