From bc669164db43bc608f02ec7e2e719983c5ef62ec Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Mon, 28 Sep 2020 01:35:48 +0300
Subject: [PATCH] titles for icons

---
 .../src/components/root/IconNavBar.tsx        | 36 ++++++++-----------
 1 file changed, 15 insertions(+), 21 deletions(-)

diff --git a/frontend-react/src/components/root/IconNavBar.tsx b/frontend-react/src/components/root/IconNavBar.tsx
index a3a1b5f41..a44c7b4dd 100644
--- a/frontend-react/src/components/root/IconNavBar.tsx
+++ b/frontend-react/src/components/root/IconNavBar.tsx
@@ -92,13 +92,16 @@ export const navIcons: {
 
 const IconNavBar = () => {
   const { t } = useTranslation()
-  const { darkerBgColor, textColor, themeColorWithShade } = useContext(
-    MyThemeContext
-  )
+  const {
+    darkerBgColor,
+    textColor,
+    themeColorWithShade,
+    grayWithShade,
+  } = useContext(MyThemeContext)
   const location = useLocation()
 
   return (
-    <Flex bg={darkerBgColor} justifyContent="center" py={2} flexWrap="wrap">
+    <Flex bg={darkerBgColor} py={2} justifyContent="center" flexWrap="wrap">
       <Suspense fallback={null}>
         {navIcons.map(({ displayName, code, menuItems }) => {
           const codesTogether =
@@ -109,28 +112,19 @@ const IconNavBar = () => {
             <Flex
               flexDirection="column"
               alignItems="center"
-              mx={2}
+              justifyContent="center"
+              m="5px 15px"
               color={textColor}
             >
               {location.pathname !== "/" &&
               codesTogether.includes(location.pathname) ? (
-                <Box
-                  h="5px"
-                  w="5px"
-                  mb={1}
-                  bgColor={themeColorWithShade}
-                  borderRadius="50%"
-                  lineHeight="0.5rem"
-                />
+                <Box color={themeColorWithShade} fontSize="0.75em">
+                  {displayName}
+                </Box>
               ) : (
-                <Box
-                  h="5px"
-                  w="5px"
-                  mb={1}
-                  bgColor={darkerBgColor}
-                  borderRadius="50%"
-                  lineHeight="0.5rem"
-                />
+                <Box color={grayWithShade} fontSize="0.75em">
+                  {displayName}
+                </Box>
               )}
               <Image
                 src={`${process.env.PUBLIC_URL}/navIcons/${code}.png`}