Refined bottom navigation bar on mobile

src/components/navigation/BottomNavigation.tsx

@@ -1,5 +1,5 @@
 import { Message, Group, Inbox } from "@styled-icons/boxicons-solid";
-import { At } from "@styled-icons/boxicons-regular";
+import { Search } from "@styled-icons/boxicons-regular";
 import { useHistory, useLocation } from "react-router";
 import styled, { css } from "styled-components";
 
@@ -13,11 +13,16 @@ import { useSelf } from "../../context/revoltjs/hooks";
 import UserIcon from "../common/user/UserIcon";
 import IconButton from "../ui/IconButton";
 
-const NavigationBase = styled.div`
+const Base = styled.div`
+    background: var(--secondary-background);
+`;
+
+const Navbar = styled.div`
     z-index: 100;
+    max-width: 500px;
+    margin: 0 auto;
     display: flex;
     height: var(--bottom-navigation-height);
-    background: var(--secondary-background);
 `;
 
 const Button = styled.a<{ active: boolean }>`
@@ -30,6 +35,11 @@ const Button = styled.a<{ active: boolean }>`
         height: 100%;
     }
 
+    > div,
+    > a > div {
+        padding: 0 20px;
+    }
+
     ${(props) =>
         props.active &&
         css`
@@ -53,7 +63,8 @@ export function BottomNavigation({ lastOpened }: Props) {
     const homeActive = !(friendsActive || settingsActive);
 
     return (
-        <NavigationBase>
+        <Base>
+            <Navbar>
                 <Button active={homeActive}>
                     <IconButton
                         onClick={() => {
@@ -79,8 +90,15 @@ export function BottomNavigation({ lastOpened }: Props) {
                         </IconButton>
                     </ConditionalLink>
                 </Button>
-            {/*<Button active={friendsActive}>
+                {/*<Button active={searchActive}>
-                <ConditionalLink active={friendsActive} to="/friends">
+                    <ConditionalLink active={searchActive} to="/search">
+                        <IconButton>
+                            <Search size={25} />
+                        </IconButton>
+                    </ConditionalLink>
+                </Button>
+                <Button active={inboxActive}>
+                    <ConditionalLink active={inboxActive} to="/inbox">
                         <IconButton>
                             <Inbox size={25} />
                         </IconButton>
@@ -93,7 +111,9 @@ export function BottomNavigation({ lastOpened }: Props) {
                         </IconButton>
                     </ConditionalLink>
                 </Button>
-        </NavigationBase>
+            </Navbar>
+        </Base>
+        
     );
 }
 

src/pages/settings/GenericSettings.tsx

@@ -74,7 +74,7 @@ export function GenericSettings({
                     name="theme-color"
                     content={
                         isTouchscreenDevice
-                            ? theme["primary-header"]
+                            ? theme["background"]
                             : theme["background"]
                     }
                 />