diff --git a/assets/images/logo-dark-small.svg b/assets/images/logo-dark-small.svg index 0b4929861..6a37f3b0a 100644 --- a/assets/images/logo-dark-small.svg +++ b/assets/images/logo-dark-small.svg @@ -1,4 +1,4 @@ - + diff --git a/assets/images/logo-dark.svg b/assets/images/logo-dark.svg index 9ee80f315..d0fe1c523 100644 --- a/assets/images/logo-dark.svg +++ b/assets/images/logo-dark.svg @@ -1,9 +1,9 @@ - - - - - - - - + + + + + + + + diff --git a/assets/images/menu-arrow-icon.svg b/assets/images/menu-arrow-icon.svg index d71344f32..db1ab906d 100644 --- a/assets/images/menu-arrow-icon.svg +++ b/assets/images/menu-arrow-icon.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx index f9ca5a792..0d3cbb4b6 100644 --- a/src/components/AppLayout/AppLayout.tsx +++ b/src/components/AppLayout/AppLayout.tsx @@ -88,7 +88,7 @@ const styles = (theme: Theme) => margin: "0 8px" }, "& svg": { - marginTop: 12, + marginTop: 8, transform: "rotate(180deg)" }, "&:hover": { @@ -115,17 +115,21 @@ const styles = (theme: Theme) => }, isMenuSmallHide: { "& svg": { + marginLeft: "3px", transform: "rotate(0deg)" } }, logo: { "& svg": { - padding: "20px 50px", - width: "256px" + left: "50%", + position: "absolute", + top: "50%", + transform: "translate(-50%,-50%)" }, background: theme.palette.secondary.main, display: "block", - height: 80 + height: 80, + position: "relative" }, logoDark: { "& path": { @@ -135,7 +139,7 @@ const styles = (theme: Theme) => }, logoSmall: { "& svg": { - margin: "20px 0", + margin: 0, padding: 0, width: "80px" } @@ -143,7 +147,7 @@ const styles = (theme: Theme) => menu: { background: theme.palette.background.paper, height: "100vh", - padding: 25 + padding: "25px 20px" }, menuIcon: { "& span": { diff --git a/src/components/AppLayout/MenuList.tsx b/src/components/AppLayout/MenuList.tsx index 1a1870b47..20dd06d7a 100644 --- a/src/components/AppLayout/MenuList.tsx +++ b/src/components/AppLayout/MenuList.tsx @@ -40,12 +40,16 @@ const styles = (theme: Theme) => fill: theme.palette.common.white } }, + menuIconSmall: { + left: -5 + }, menuIsActive: { boxShadow: "0px 0px 12px 1px rgba(0,0,0,0.2)" }, menuItemHover: { "& p": { - transition: "color 0.5s ease" + fontSize: 14, + transition: "color 0.5s ease, opacity 0.3s ease-out" }, "& path": { transition: "fill 0.5s ease" @@ -121,19 +125,22 @@ const styles = (theme: Theme) => "&:hover": { color: theme.palette.primary.main }, + bottom: 0, cursor: "pointer", - display: "inline-block", fontSize: "1rem", fontWeight: 500, + left: 30, opacity: 1, paddingLeft: 16, + position: "absolute", textTransform: "uppercase", - transition: `opacity ${theme.transitions.duration.shorter}ms ease 0.1s` + transition: "opacity 0.5s ease" }, menuListItemTextHide: { + bottom: 0, + left: 30, opacity: 0, - position: "absolute", - transition: `opacity ${theme.transitions.duration.shorter}ms ease` + position: "absolute" }, subMenu: { padding: "0 15px" @@ -263,7 +270,8 @@ const MenuList = withStyles(styles, { name: "MenuList" })( > @@ -308,7 +316,8 @@ const MenuList = withStyles(styles, { name: "MenuList" })(
@@ -333,7 +342,8 @@ const MenuList = withStyles(styles, { name: "MenuList" })(
diff --git a/src/components/AppLayout/ResponsiveDrawer.tsx b/src/components/AppLayout/ResponsiveDrawer.tsx index cc8e026c0..cf109c53b 100644 --- a/src/components/AppLayout/ResponsiveDrawer.tsx +++ b/src/components/AppLayout/ResponsiveDrawer.tsx @@ -18,7 +18,7 @@ const styles = (theme: Theme) => overflow: "visible", padding: 0, position: "fixed" as "fixed", - transition: "width 0.2s ease", + transition: "width 0.3s ease", width: drawerWidthExpanded }, drawerDesktopSmall: { diff --git a/src/components/AppLayout/consts.ts b/src/components/AppLayout/consts.ts index a6d98fbba..342ad7b55 100644 --- a/src/components/AppLayout/consts.ts +++ b/src/components/AppLayout/consts.ts @@ -1,4 +1,4 @@ -export const drawerWidthExpanded = 256; +export const drawerWidthExpanded = 210; export const drawerWidth = 80; export const navigationBarHeight = 64; export const appLoaderHeight = 4; diff --git a/src/config.ts b/src/config.ts index 7737bfe0d..ccd62a385 100644 --- a/src/config.ts +++ b/src/config.ts @@ -2,7 +2,7 @@ import { SearchQueryVariables } from "./containers/BaseSearch"; import { ListSettings, ListViews } from "./types"; export const APP_MOUNT_URI = process.env.APP_MOUNT_URI || "/"; -export const API_URI = process.env.API_URI || "/graphql/"; +export const API_URI = process.env.API_URI || "http://localhost:8008/graphql/"; export const DEFAULT_INITIAL_SEARCH_DATA: SearchQueryVariables = { after: null,