From 2370070fc265d20ebdc8a692204a8da2542a3f3e Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Sun, 6 Dec 2020 21:52:38 +0200
Subject: [PATCH] closes #161

---
 components/plans/StageSelector.tsx | 32 ++++++++++++++++++++++++------
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/components/plans/StageSelector.tsx b/components/plans/StageSelector.tsx
index bebeec856..92c292de7 100644
--- a/components/plans/StageSelector.tsx
+++ b/components/plans/StageSelector.tsx
@@ -123,12 +123,32 @@ const StageSelector: React.FC<StageSelectorProps> = ({
         <>
           <HStack justifyContent="center" my={4}>
             {(["SZ", "TC", "RM", "CB"] as const).map((mode) => (
-              <ModeImage
-                key={mode}
-                onClick={() => changeMode(mode)}
-                mode={mode}
-                size={32}
-              />
+              <Flex flexDir="column" alignItems="center">
+                <Box
+                  style={{
+                    filter:
+                      currentBackground.mode === mode
+                        ? undefined
+                        : "grayscale(100%)",
+                  }}
+                  cursor="pointer"
+                  mb="-6px"
+                >
+                  <ModeImage
+                    key={mode}
+                    onClick={() => changeMode(mode)}
+                    mode={mode}
+                    size={32}
+                  />
+                </Box>
+                {currentBackground.mode === mode ? (
+                  <SubText>
+                    <Trans>{mode}</Trans>
+                  </SubText>
+                ) : (
+                  <Box h={4} />
+                )}
+              </Flex>
             ))}
           </HStack>
           <RadioGroup value={currentBackground.view} onChange={changeView}>