Design change

V2/tezex/src/App.css

@@ -1,8 +1,9 @@
 .App {
   text-align: center;
   align: center;
-  height: 100vh;
-  width: 100vw;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;

V2/tezex/src/components/nav/NavHome.tsx

@@ -11,31 +11,12 @@ import style from "./style";
 import useStyles from "../../hooks/styles";
 
 interface NavTabProps {
+  id: number;
   label: string;
   href: string;
   scalingKey?: string;
 }
 
-function NavTab(props: NavTabProps) {
-  const navigate = useNavigate();
-
-  const _props = {
-    label: props.label,
-    href: props.href,
-  };
-  const styles = useStyles(style, props.scalingKey);
-  return (
-    <Tab
-      sx={styles.navHome.tab}
-      onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
-        event.preventDefault();
-        navigate(props.href);
-      }}
-      {..._props}
-    />
-  );
-}
-
 export interface INavHome {
   scalingKey?: string;
 }
@@ -67,15 +48,43 @@ export const NavHome: FC<INavHome> = (props) => {
     } else return "/home/add";
   }, [sessionInfo]);
 
+  function NavTab(props: NavTabProps) {
+    const navigate = useNavigate();
+
+    const _props = {
+      label: props.label,
+      href: props.href,
+    };
+    const styles = useStyles(style, props.scalingKey);
+    return (
+      <Tab
+        sx={{
+          ...styles.navHome.tab,
+          color: value === props.id ? "#FFFFFF" : "selectedHomeTab.dark",
+        }}
+        onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+          event.preventDefault();
+          navigate(props.href);
+        }}
+        {..._props}
+      />
+    );
+  }
   return (
     <Tabs
       value={value}
       sx={styles.navHome.root}
       onChange={handleChange}
       aria-label="nav-home-tabs"
     >
-      <NavTab label="Swap" href="/home/swap" scalingKey={props.scalingKey} />
       <NavTab
+        id={0}
+        label="Swap"
+        href="/home/swap"
+        scalingKey={props.scalingKey}
+      />
+      <NavTab
+        id={1}
         label="Liquidity"
         href={liquidityHref()}
         scalingKey={props.scalingKey}

V2/tezex/src/components/nav/style.js

@@ -116,8 +116,9 @@ const style = (theme, scale = 1) => {
         "& .MuiTabs-flexContainer": {
           justifyContent: "space-between",
           height: `calc(2.98vw * ${scale})`,
-          minWidth: `calc(15.34vw * ${scale})`,
-          maxWidth: `calc(15.34vw * ${scale})`,
+
+          minWidth: `calc(30.56vw * ${scale})`,
+          maxWidth: `calc(30.56vw * ${scale})`,
           border: "0.07vw solid #EDEDED",
           borderRadius: `calc(.48vw * ${scale})`,
           display: "flex",
@@ -153,12 +154,12 @@ const style = (theme, scale = 1) => {
           alignItems: "center",
           justifyContent: "center",
           fontSize: `calc(1.11vw * ${scale})`,
+          fontWeight: `700`,
           minHeight: `calc(2.91vw * ${scale})`,
-          minWidth: `calc(3.0vw * ${scale})`,
+          minWidth: `calc(15.0vw * ${scale})`,
           padding: `calc(.0vw * ${scale}) calc(1.66vw * ${scale}) calc(.0vw * ${scale}) calc(1.66vw * ${scale}) `,
           zIndex: 2,
 
-          color: "text.primary",
           textTransform: "initial",
         },
         wrapper: {

V2/tezex/src/components/swap/style.js

@@ -8,11 +8,11 @@ const style = (theme, scale = 1) => {
     },
     paperBox: {
       display: "flex",
-      justifyContent: "space-between",
+      justifyContent: "center",
       alignItems: "center",
       paddingTop: `calc(5.2vw * ${scale})`,
-      paddingLeft: `calc(1.6vw * ${scale})`,
-      paddingRight: `calc(1.11vw * ${scale})`,
+      paddingLeft: `calc(2.4 * 1.6vw * ${scale})`,
+      paddingRight: `calc(2.4 * 1.6vw * ${scale})`,
     },
     paper: {
       position: "absolute",

V2/tezex/src/components/ui/elements/inputs/slippage.tsx

@@ -211,12 +211,28 @@ const SlippageInput: FC<ISlippage> = (props) => {
           }}
           onClick={() => handleSlippageTabClick("0")}
         >
-          <Button disabled={selectedId !== "0"} sx={styles.slippageTab}>
+          <Button
+            disabled={selectedId !== "0"}
+            sx={{
+              ...styles.slippageTab,
+              "&.MuiButton-text": {
+                color: selectedId === "0" ? "#FFFFFF" : "text.primary",
+              },
+            }}
+          >
             0.5%
           </Button>
         </Box>
         <Box onClick={() => handleSlippageTabClick("1")}>
-          <Button disabled={selectedId !== "1"} sx={styles.slippageTab}>
+          <Button
+            disabled={selectedId !== "1"}
+            sx={{
+              ...styles.slippageTab,
+              "&.MuiButton-text": {
+                color: selectedId === "1" ? "#FFFFFF" : "text.primary",
+              },
+            }}
+          >
             1.0%
           </Button>
         </Box>

V2/tezex/src/components/ui/elements/inputs/style.js

@@ -11,7 +11,7 @@ const style = (theme, scale = 1) => {
         alignItems: "center",
         alignContent: "center",
         justifyContent: "space-between",
-        width: `calc(15.2vw * ${scale})`,
+        width: `calc(13.2vw * ${scale})`,
         maxHeight: `calc(2.7vw * ${scale})`,
         minHeight: `calc(2.7vw * ${scale})`,
         borderRadius: `calc(.55vw * ${scale})`,
@@ -72,7 +72,7 @@ const style = (theme, scale = 1) => {
         zIndex: 10,
 
         backgroundColor: "selectedHomeTab.main",
-        color: "text.primary",
+        color: "selectedHomeTab.dark",
         textTransform: "initial",
       },
       wrapper: {

V2/tezex/src/components/ui/views/header/index.tsx

@@ -15,11 +15,7 @@ import Container from "@mui/material/Container";
 import style from "./style";
 import useStyles from "../../../../hooks/styles";
 
-export interface IHeader {
-  openMenu: boolean;
-  toggleMenu: () => void;
-}
-export const Header: FC<IHeader> = (props) => {
+export const Header: FC = (props) => {
   const scalingKey = "header";
   const styles = useStyles(style, scalingKey);
 
@@ -57,11 +53,6 @@ export const Header: FC<IHeader> = (props) => {
             <Grid2 md={2} sx={styles.wallet}>
               <Wallet variant={"header"} scalingKey={scalingKey} />
             </Grid2>
-            <Grid2 md={1} sx={props.openMenu ? styles.hide : styles.menu}>
-              <IconButton onClick={props.toggleMenu}>
-                <MenuIcon />
-              </IconButton>
-            </Grid2>
           </Grid2>
         </Toolbar>
       </Container>

V2/tezex/src/components/ui/views/header/style.js

@@ -112,7 +112,7 @@ const style = (theme, scale = 1) => {
     },
 
     wallet: {
-      display: { xs: "none", sm: "none", md: "flex" },
+      display: { xs: "flex", sm: "flex", md: "flex" },
       position: "absolute",
       right: "0px",
       //left: `calc(51vw * ${scale})`,

V2/tezex/src/components/ui/views/layout/index.tsx

@@ -1,9 +1,9 @@
 import React, { FC, useState, useEffect, useCallback } from "react";
 import { Header } from "../header";
+import Footer from "../footer";
 
 import { BrowserView, MobileView } from "react-device-detect";
 import { MainWindow } from "../main-window";
-import { SideBar } from "../sidebar";
 import Box from "@mui/material/Box";
 
 import style from "./style";
@@ -49,14 +49,14 @@ export const Layout: FC<ILayout> = (props) => {
         <header>
           <BrowserView>
             <Box sx={styles.header}>
-              <Header openMenu={openMenu} toggleMenu={toggleMenu} />
+              <Header />
             </Box>
           </BrowserView>
           <MobileView>
             <Box
               sx={styles.isMobileLandscape ? styles.hide : styles.headerMobile}
             >
-              <Header openMenu={openMenu} toggleMenu={toggleMenu} />
+              <Header />
             </Box>
           </MobileView>
         </header>
@@ -67,27 +67,18 @@ export const Layout: FC<ILayout> = (props) => {
           {/* Bottom space for bars or notification */}
           <Box sx={styles.bottomSpace}></Box>
         </Box>
-      </Box>
 
-      <MobileView>
         <Box
-          sx={
-            openMenu
-              ? styles.sideBar
-              : props.isLandScape
-              ? styles.sideBarShow
-              : styles.sideBarHidden
-          }
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "flex-end",
+            height: "70vw",
+          }}
         >
-          <SideBar openMenu={openMenu} toggleMenu={toggleMenu} />
-        </Box>
-      </MobileView>
-
-      <BrowserView>
-        <Box sx={openMenu ? styles.sideBar : styles.hide}>
-          <SideBar openMenu={openMenu} toggleMenu={toggleMenu} />
+          <Footer />
         </Box>
-      </BrowserView>
+      </Box>
     </Box>
   );
 };

V2/tezex/src/components/ui/views/layout/style.js

@@ -3,8 +3,7 @@ const style = (theme, scale = 1) => {
   return {
     root: {
       display: "flex",
-      minWidth: "100vw",
-      maxWidth: "100vw",
+      maxWidth: "100%",
       height: "100%",
       justifyContent: "space-between",
       flexDirection: "row",