From c855a5f555eb483f410fa4b8a4521dcc0837236c Mon Sep 17 00:00:00 2001 From: Ali BARIN Date: Thu, 9 Dec 2021 19:51:42 +0100 Subject: [PATCH] feat: update theme --- packages/web/src/components/AppBar/index.tsx | 18 +-- packages/web/src/components/AppRow/index.tsx | 17 ++- packages/web/src/components/Drawer/index.tsx | 24 ++-- packages/web/src/components/Drawer/style.ts | 8 +- packages/web/src/components/Layout/index.tsx | 6 +- .../web/src/components/ListItemLink/index.tsx | 4 +- packages/web/src/locales/en.json | 2 +- packages/web/src/styles/theme.ts | 109 +++++++++++++++--- 8 files changed, 140 insertions(+), 48 deletions(-) diff --git a/packages/web/src/components/AppBar/index.tsx b/packages/web/src/components/AppBar/index.tsx index a3f5cc0c..15c6fa4e 100644 --- a/packages/web/src/components/AppBar/index.tsx +++ b/packages/web/src/components/AppBar/index.tsx @@ -4,10 +4,10 @@ import Toolbar from '@mui/material/Toolbar'; import IconButton from '@mui/material/IconButton'; import Typography from '@mui/material/Typography'; import MenuIcon from '@mui/icons-material/Menu'; +import SettingsIcon from '@mui/icons-material/Settings'; import HideOnScroll from 'components/HideOnScroll'; import { FormattedMessage } from 'react-intl'; -import SearchInput from 'components/SearchInput'; type AppBarProps = { onMenuClick: () => void; @@ -17,11 +17,7 @@ export default function AppBar({ onMenuClick }: AppBarProps) { return ( - theme.palette.primary.dark, - zIndex: (theme) => theme.zIndex.drawer + 1 - }}> + - {/* TODO: make Drawer in Layout togglable. */} @@ -44,7 +39,14 @@ export default function AppBar({ onMenuClick }: AppBarProps) { - + + + diff --git a/packages/web/src/components/AppRow/index.tsx b/packages/web/src/components/AppRow/index.tsx index 36206e26..6b79b7a9 100644 --- a/packages/web/src/components/AppRow/index.tsx +++ b/packages/web/src/components/AppRow/index.tsx @@ -2,7 +2,7 @@ import { Link } from 'react-router-dom'; import Card from '@mui/material/Card'; import Box from '@mui/material/Box'; import CardActionArea from '@mui/material/CardActionArea'; -import ChevronRightIcon from '@mui/icons-material/ChevronRight'; +import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'; import useFormatMessage from 'hooks/useFormatMessage'; import AppIcon from 'components/AppIcon'; @@ -14,7 +14,14 @@ type AppRowProps = { application: App; } -const countTranslation = (value: React.ReactNode) => (<>{value}
); +const countTranslation = (value: React.ReactNode) => ( + <> + + {value} + +
+ +); function AppRow(props: AppRowProps) { const formatMessage = useFormatMessage(); @@ -36,19 +43,19 @@ function AppRow(props: AppRowProps) { - + {formatMessage('app.connectionCount', { count: countTranslation(connectionCount) })} - + {formatMessage('app.flowCount', { count: countTranslation(0) })} - + theme.palette.primary.main }} /> diff --git a/packages/web/src/components/Drawer/index.tsx b/packages/web/src/components/Drawer/index.tsx index ed7b68fa..f59213a9 100644 --- a/packages/web/src/components/Drawer/index.tsx +++ b/packages/web/src/components/Drawer/index.tsx @@ -1,12 +1,13 @@ import * as React from 'react'; -import { DrawerProps } from '@mui/material/Drawer'; +import { useTheme } from '@mui/material/styles'; +import { SwipeableDrawerProps } from '@mui/material/SwipeableDrawer'; import Toolbar from '@mui/material/Toolbar'; import List from '@mui/material/List'; import Divider from '@mui/material/Divider'; import AppsIcon from '@mui/icons-material/Apps'; -import LanguageIcon from '@mui/icons-material/Language'; -import OfflineBoltIcon from '@mui/icons-material/OfflineBolt'; - +import SwapCallsIcon from '@mui/icons-material/SwapCalls'; +import ExploreIcon from '@mui/icons-material/Explore'; +import useMediaQuery from '@mui/material/useMediaQuery'; import ListItemLink from 'components/ListItemLink'; import HideOnScroll from 'components/HideOnScroll'; @@ -14,14 +15,19 @@ import useFormatMessage from 'hooks/useFormatMessage'; import * as URLS from 'config/urls'; import { Drawer as BaseDrawer } from './style'; +const iOS = typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent); -export default function Drawer(props: DrawerProps) { +export default function Drawer(props: SwipeableDrawerProps) { + const theme = useTheme(); + const matchesSmallScreens = useMediaQuery(theme.breakpoints.down('md')); const formatMessage = useFormatMessage(); return ( @@ -29,19 +35,19 @@ export default function Drawer(props: DrawerProps) { } + icon={} primary={formatMessage('drawer.flows')} to={URLS.FLOWS} /> } + icon={} primary={formatMessage('drawer.apps')} to={URLS.APPS} /> } + icon={} primary={formatMessage('drawer.explore')} to={URLS.EXPLORE} /> diff --git a/packages/web/src/components/Drawer/style.ts b/packages/web/src/components/Drawer/style.ts index 6bd47537..054c6063 100644 --- a/packages/web/src/components/Drawer/style.ts +++ b/packages/web/src/components/Drawer/style.ts @@ -1,7 +1,7 @@ import { styled, Theme, CSSObject } from '@mui/material/styles'; -import MuiDrawer from '@mui/material/Drawer'; +import MuiSwipeableDrawer from '@mui/material/SwipeableDrawer'; -const drawerWidth = 240; +const drawerWidth = 300; const openedMixin = (theme: Theme): CSSObject => ({ width: drawerWidth, @@ -18,13 +18,13 @@ const closedMixin = (theme: Theme): CSSObject => ({ duration: theme.transitions.duration.leavingScreen, }), overflowX: 'hidden', - width: `calc(${theme.spacing(7)} + 1px)`, + width: 0, [theme.breakpoints.up('sm')]: { width: `calc(${theme.spacing(9)} + 1px)`, }, }); -export const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })( +export const Drawer = styled(MuiSwipeableDrawer)( ({ theme, open }) => ({ width: drawerWidth, flexShrink: 0, diff --git a/packages/web/src/components/Layout/index.tsx b/packages/web/src/components/Layout/index.tsx index 944c6401..24d4ce8a 100644 --- a/packages/web/src/components/Layout/index.tsx +++ b/packages/web/src/components/Layout/index.tsx @@ -17,7 +17,11 @@ export default function Layout({ children }: LayoutProps) { - + diff --git a/packages/web/src/components/ListItemLink/index.tsx b/packages/web/src/components/ListItemLink/index.tsx index d96685bd..0313d869 100644 --- a/packages/web/src/components/ListItemLink/index.tsx +++ b/packages/web/src/components/ListItemLink/index.tsx @@ -26,9 +26,9 @@ export default function ListItemLink(props: ListItemLinkProps) { return (
  • - + {icon} - +
    • ); diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json index 9736627c..8cd8a847 100644 --- a/packages/web/src/locales/en.json +++ b/packages/web/src/locales/en.json @@ -1,5 +1,5 @@ { - "brandText": "automatisch", + "brandText": "Automatisch", "searchPlaceholder": "Search...", "welcomeText": "Here comes the dashboard homepage.", "drawer.dashboard": "Dashboard", diff --git a/packages/web/src/styles/theme.ts b/packages/web/src/styles/theme.ts index 4c7f51cb..a3d58815 100644 --- a/packages/web/src/styles/theme.ts +++ b/packages/web/src/styles/theme.ts @@ -1,6 +1,13 @@ import { createTheme } from '@mui/material/styles'; -const theme = createTheme(); +const referenceTheme = createTheme({ + palette: { + primary: { + main: '#0059F7', + dark: '#001F52', + } + } +}); const extendedTheme = createTheme({ palette: { @@ -10,7 +17,7 @@ const extendedTheme = createTheme({ dark: '#001F52', contrastText: '#fff' }, - divider: '#0000001F', + divider: 'rgba(194, 194, 194, .2)', common: { black: '#1D1D1D', white: '#fff' @@ -52,9 +59,12 @@ const extendedTheme = createTheme({ }, background: { paper: '#fff', - default: '#F3F7FD' + default: '#FAFAFA' } }, + shape: { + borderRadius: 4, + }, typography: { fontFamily: [ 'Inter', @@ -65,75 +75,138 @@ const extendedTheme = createTheme({ 'sans-serif', ].join(','), h1: { - fontSize: theme.typography.pxToRem(72), + fontSize: referenceTheme.typography.pxToRem(72), lineHeight: 1.11, fontWeight: 700, + [referenceTheme.breakpoints.down('sm')]: { + fontSize: referenceTheme.typography.pxToRem(48), + } }, h2: { - fontSize: theme.typography.pxToRem(48), + fontSize: referenceTheme.typography.pxToRem(48), lineHeight: 1.16, fontWeight: 700, + [referenceTheme.breakpoints.down('sm')]: { + fontSize: referenceTheme.typography.pxToRem(24), + } }, h3: { - fontSize: theme.typography.pxToRem(32), + fontSize: referenceTheme.typography.pxToRem(32), lineHeight: 1.16, fontWeight: 700, + [referenceTheme.breakpoints.down('sm')]: { + fontSize: referenceTheme.typography.pxToRem(24), + } }, h4: { - fontSize: theme.typography.pxToRem(24), + fontSize: referenceTheme.typography.pxToRem(32), lineHeight: 1.3, fontWeight: 700, + [referenceTheme.breakpoints.down('sm')]: { + fontSize: referenceTheme.typography.pxToRem(16), + } }, h5: { - fontSize: theme.typography.pxToRem(24), + fontSize: referenceTheme.typography.pxToRem(24), lineHeight: 1.3, fontWeight: 400, + [referenceTheme.breakpoints.down('sm')]: { + fontSize: referenceTheme.typography.pxToRem(16), + } }, h6: { - fontSize: theme.typography.pxToRem(20), + fontSize: referenceTheme.typography.pxToRem(20), lineHeight: 1.2, fontWeight: 500, + [referenceTheme.breakpoints.down('sm')]: { + fontSize: referenceTheme.typography.pxToRem(20), + } }, subtitle1: { - fontSize: theme.typography.pxToRem(14), + fontSize: referenceTheme.typography.pxToRem(14), lineHeight: 1.71, fontWeight: 400, + [referenceTheme.breakpoints.down('sm')]: { + fontSize: referenceTheme.typography.pxToRem(14), + }, textTransform: 'uppercase', }, subtitle2: { - fontSize: theme.typography.pxToRem(14), + fontSize: referenceTheme.typography.pxToRem(14), lineHeight: 1.14, fontWeight: 400, + [referenceTheme.breakpoints.down('sm')]: { + fontSize: referenceTheme.typography.pxToRem(14), + } }, body1: { - fontSize: theme.typography.pxToRem(16), - lineHeight: 1.5, - fontWeight: 700, - }, - body2: { - fontSize: theme.typography.pxToRem(16), + fontSize: referenceTheme.typography.pxToRem(16), lineHeight: 1.5, fontWeight: 400, + [referenceTheme.breakpoints.down('sm')]: { + fontSize: referenceTheme.typography.pxToRem(16), + } + }, + body2: { + fontSize: referenceTheme.typography.pxToRem(16), + lineHeight: 1.5, + fontWeight: 700, + [referenceTheme.breakpoints.down('sm')]: { + fontSize: referenceTheme.typography.pxToRem(16), + } }, button: { + fontSize: referenceTheme.typography.pxToRem(16), fontWeight: 700, + [referenceTheme.breakpoints.down('sm')]: { + fontSize: referenceTheme.typography.pxToRem(16), + } } }, components: { MuiButton: { styleOverrides: { root: { - padding: '12px 16px' + padding: '12px 16px', + textTransform: 'none', } } }, + MuiContainer: { + defaultProps: { + maxWidth: 'xl', + } + }, MuiCssBaseline: { styleOverrides: { + html: { + scrollBehavior: 'smooth', + }, a: { textDecoration: 'none', }, }, }, + MuiAppBar: { + styleOverrides: { + root: { + background: referenceTheme.palette.primary.main, + zIndex: referenceTheme.zIndex.drawer + 1, + } + }, + defaultProps: { + elevation: 2, + }, + }, + MuiToolbar: { + styleOverrides: { + root: { + '@media all': { + paddingRight: referenceTheme.spacing(1.5), + } + } + } + } } });