diff --git a/src/fireedge/package.json b/src/fireedge/package.json
index d80e8c51f3..2ee0efcb3b 100644
--- a/src/fireedge/package.json
+++ b/src/fireedge/package.json
@@ -62,6 +62,7 @@
"react-json-pretty": "^2.2.0",
"react-redux": "^7.2.0",
"react-router-dom": "^5.2.0",
+ "react-transition-group": "^4.4.1",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0",
"remove": "^0.1.5",
@@ -96,6 +97,7 @@
"eslint": "^6.1.0",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-cypress": "^2.11.1",
+ "file-loader": "^6.0.0",
"jloboescalona-eslint-config": "^1.1.0",
"node-sass": "^4.12.0",
"nodemon": "^1.18.10",
diff --git a/src/fireedge/src/public/assets/fonts/Lato-Regular.eot b/src/fireedge/src/public/assets/fonts/Lato-Regular.eot
deleted file mode 100644
index 11e3f2a5f0..0000000000
Binary files a/src/fireedge/src/public/assets/fonts/Lato-Regular.eot and /dev/null differ
diff --git a/src/fireedge/src/public/assets/fonts/Lato-Regular.ttf b/src/fireedge/src/public/assets/fonts/Lato-Regular.ttf
deleted file mode 100644
index 74decd9ebb..0000000000
Binary files a/src/fireedge/src/public/assets/fonts/Lato-Regular.ttf and /dev/null differ
diff --git a/src/fireedge/src/public/assets/fonts/Lato-Regular.woff b/src/fireedge/src/public/assets/fonts/Lato-Regular.woff
deleted file mode 100644
index ae1307ff5f..0000000000
Binary files a/src/fireedge/src/public/assets/fonts/Lato-Regular.woff and /dev/null differ
diff --git a/src/fireedge/src/public/assets/fonts/Lato-Regular.woff2 b/src/fireedge/src/public/assets/fonts/Lato-Regular.woff2
deleted file mode 100644
index 3bf9843328..0000000000
Binary files a/src/fireedge/src/public/assets/fonts/Lato-Regular.woff2 and /dev/null differ
diff --git a/src/fireedge/src/public/assets/fonts/Ubuntu-Bold.ttf b/src/fireedge/src/public/assets/fonts/Ubuntu-Bold.ttf
deleted file mode 100644
index 4af149acd8..0000000000
Binary files a/src/fireedge/src/public/assets/fonts/Ubuntu-Bold.ttf and /dev/null differ
diff --git a/src/fireedge/src/public/assets/fonts/Ubuntu-Light.ttf b/src/fireedge/src/public/assets/fonts/Ubuntu-Light.ttf
deleted file mode 100644
index 0e9f90d7cb..0000000000
Binary files a/src/fireedge/src/public/assets/fonts/Ubuntu-Light.ttf and /dev/null differ
diff --git a/src/fireedge/src/public/assets/fonts/Ubuntu-Medium.ttf b/src/fireedge/src/public/assets/fonts/Ubuntu-Medium.ttf
deleted file mode 100644
index 5296045e96..0000000000
Binary files a/src/fireedge/src/public/assets/fonts/Ubuntu-Medium.ttf and /dev/null differ
diff --git a/src/fireedge/src/public/assets/fonts/Ubuntu-Regular.ttf b/src/fireedge/src/public/assets/fonts/Ubuntu-Regular.ttf
deleted file mode 100644
index dbb834a4dd..0000000000
Binary files a/src/fireedge/src/public/assets/fonts/Ubuntu-Regular.ttf and /dev/null differ
diff --git a/src/fireedge/src/public/assets/fonts/Ubuntu/ubuntu.eot b/src/fireedge/src/public/assets/fonts/Ubuntu/ubuntu.eot
new file mode 100644
index 0000000000..793406f379
Binary files /dev/null and b/src/fireedge/src/public/assets/fonts/Ubuntu/ubuntu.eot differ
diff --git a/src/fireedge/src/public/assets/fonts/Ubuntu/ubuntu.svg b/src/fireedge/src/public/assets/fonts/Ubuntu/ubuntu.svg
new file mode 100644
index 0000000000..66a4f6b91c
--- /dev/null
+++ b/src/fireedge/src/public/assets/fonts/Ubuntu/ubuntu.svg
@@ -0,0 +1,363 @@
+
+
+
diff --git a/src/fireedge/src/public/assets/fonts/Ubuntu/ubuntu.ttf b/src/fireedge/src/public/assets/fonts/Ubuntu/ubuntu.ttf
new file mode 100644
index 0000000000..54cc79c438
Binary files /dev/null and b/src/fireedge/src/public/assets/fonts/Ubuntu/ubuntu.ttf differ
diff --git a/src/fireedge/src/public/assets/fonts/Ubuntu/ubuntu.woff b/src/fireedge/src/public/assets/fonts/Ubuntu/ubuntu.woff
new file mode 100644
index 0000000000..2fc163ffb0
Binary files /dev/null and b/src/fireedge/src/public/assets/fonts/Ubuntu/ubuntu.woff differ
diff --git a/src/fireedge/src/public/assets/fonts/Ubuntu/ubuntu.woff2 b/src/fireedge/src/public/assets/fonts/Ubuntu/ubuntu.woff2
new file mode 100644
index 0000000000..a590b8a9e5
Binary files /dev/null and b/src/fireedge/src/public/assets/fonts/Ubuntu/ubuntu.woff2 differ
diff --git a/src/fireedge/src/public/assets/theme/defaults.js b/src/fireedge/src/public/assets/theme/defaults.js
new file mode 100644
index 0000000000..0aaa41fcb1
--- /dev/null
+++ b/src/fireedge/src/public/assets/theme/defaults.js
@@ -0,0 +1,22 @@
+export const breakpoints = {
+ xs: 0,
+ sm: 600,
+ md: 960,
+ lg: 1280,
+ xl: 1920,
+ // DEVICES
+ tablet: 640,
+ laptop: 1024,
+ desktop: 1280
+};
+
+export const toolbar = {
+ regular: 56,
+ xs: 48,
+ sm: 64
+};
+
+export const sidebar = {
+ minified: 60,
+ fixed: 240
+};
diff --git a/src/fireedge/src/public/assets/theme/fonts.js b/src/fireedge/src/public/assets/theme/fonts.js
new file mode 100644
index 0000000000..a6b1b7f915
--- /dev/null
+++ b/src/fireedge/src/public/assets/theme/fonts.js
@@ -0,0 +1,29 @@
+import ubuntuEot from 'client/assets/fonts/Ubuntu/ubuntu.eot';
+import ubuntuSvg from 'client/assets/fonts/Ubuntu/ubuntu.svg';
+import ubuntuTtf from 'client/assets/fonts/Ubuntu/ubuntu.ttf';
+import ubuntuWoff from 'client/assets/fonts/Ubuntu/ubuntu.woff';
+import ubuntuWoffTwo from 'client/assets/fonts/Ubuntu/ubuntu.woff2';
+
+const UbuntuFont = {
+ fontFamily: 'Ubuntu',
+ fontStyle: 'normal',
+ fontWeight: 400,
+ src: `
+ local('Ubuntu'), local('Ubuntu Regular'), local('Ubuntu-Regular'),
+ url(/static/${ubuntuEot}?#iefix) format('embedded-opentype'),
+ url(/static/${ubuntuWoffTwo}) format('woff2'),
+ url(/static/${ubuntuWoff}) format('woff'),
+ url(/static/${ubuntuTtf}) format('truetype'),
+ url(/static/${ubuntuSvg}#Ubuntu) format('svg');
+ `
+};
+
+export default UbuntuFont;
+
+/*
+ src: url('webfont.eot?#iefix') format('embedded-opentype'), -> IE6-IE8
+ url('webfont.woff2') format('woff2') -> Super Modern Browsers
+ url('webfont.woff') format('woff') -> Pretty Modern Browsers
+ url('webfont.ttf') format('truetype') -> Safari, Android, iOS
+ url('webfont.svg#svgFontName') format('svg') -> Legacy iOS
+ */
diff --git a/src/fireedge/src/public/assets/theme.js b/src/fireedge/src/public/assets/theme/index.js
similarity index 73%
rename from src/fireedge/src/public/assets/theme.js
rename to src/fireedge/src/public/assets/theme/index.js
index 3ba75349d2..ad1ed6222f 100644
--- a/src/fireedge/src/public/assets/theme.js
+++ b/src/fireedge/src/public/assets/theme/index.js
@@ -4,31 +4,40 @@ import {
createGenerateClassName
} from '@material-ui/core';
+import UbuntuFont from 'client/assets/theme/fonts';
+import { toolbar, breakpoints } from 'client/assets/theme/defaults';
+
+const { xs, sm } = breakpoints;
+
export const generateClassName = createGenerateClassName({
productionPrefix: 'one-'
});
-export const defaultBreakpoints = {
- xs: 0,
- sm: 600,
- md: 960,
- lg: 1280,
- xl: 1920,
- // DEVICES
- tablet: 640,
- laptop: 1024,
- desktop: 1280
-};
-
-export const sidebarWidth = {
- minified: 60,
- fixed: 240
-};
-
export default responsiveFontSizes(
createMuiTheme({
+ breakpoints: {
+ values: breakpoints,
+ keys: Object.keys(breakpoints)
+ },
typography: {
- fontFamily: ['Ubuntu', 'Lato'].join(',')
+ fontFamily: [
+ '"Ubuntu"',
+ 'Roboto',
+ 'Helvetica',
+ 'Arial',
+ 'sans-serif'
+ ].join(',')
+ },
+ mixins: {
+ toolbar: {
+ minHeight: toolbar.regular,
+ [`@media (min-width:${xs}px) and (orientation: landscape)`]: {
+ minHeight: toolbar.xs
+ },
+ [`@media (min-width:${sm}px)`]: {
+ minHeight: toolbar.sm
+ }
+ }
},
overrides: {
MuiFormControl: {
@@ -72,10 +81,7 @@ export default responsiveFontSizes(
},
MuiCssBaseline: {
'@global': {
- body: {
- // height: '100vh'
- }
- // '@font-face': [UbuntuFont]
+ '@font-face': [UbuntuFont]
}
}
},
diff --git a/src/fireedge/src/public/components/FormControl/InputCode.js b/src/fireedge/src/public/components/FormControl/InputCode.js
index 0a0454d0cb..378ca047d5 100644
--- a/src/fireedge/src/public/components/FormControl/InputCode.js
+++ b/src/fireedge/src/public/components/FormControl/InputCode.js
@@ -13,8 +13,9 @@ const InputCode = ({ code, language, ...props }) => {
};
return (
-
+
{
@@ -33,9 +33,25 @@ const InternalLayout = ({ authRoute, label, children }) => {
-
- {children}
-
+
+
+ {children}
+
+
diff --git a/src/fireedge/src/public/components/HOC/InternalLayout/styles.js b/src/fireedge/src/public/components/HOC/InternalLayout/styles.js
index 8a38bdd871..31515daf5d 100644
--- a/src/fireedge/src/public/components/HOC/InternalLayout/styles.js
+++ b/src/fireedge/src/public/components/HOC/InternalLayout/styles.js
@@ -1,5 +1,5 @@
import { makeStyles } from '@material-ui/core';
-import { sidebarWidth } from 'client/assets/theme';
+import { sidebar, toolbar } from 'client/assets/theme/defaults';
export default makeStyles(theme => ({
root: {
@@ -14,19 +14,26 @@ export default makeStyles(theme => ({
duration: theme.transitions.duration.enteringScreen
}),
[theme.breakpoints.up('lg')]: {
- marginLeft: sidebarWidth.minified
+ marginLeft: sidebar.minified
}
},
isDrawerFixed: {
[theme.breakpoints.up('lg')]: {
- marginLeft: sidebarWidth.fixed
+ marginLeft: sidebar.fixed
}
},
main: {
- paddingTop: 64,
paddingBottom: 30,
height: '100vh',
- width: '100%'
+ width: '100%',
+ // paddingTop: 64
+ paddingTop: toolbar.regular,
+ [`${theme.breakpoints.up('xs')} and (orientation: landscape)`]: {
+ paddingTop: toolbar.xs
+ },
+ [theme.breakpoints.up('sm')]: {
+ paddingTop: toolbar.sm
+ }
},
scrollable: {
paddingTop: theme.spacing(2),
@@ -43,5 +50,25 @@ export default makeStyles(theme => ({
boxShadow: 'inset 0 0 0 10px',
color: theme.palette.primary.light
}
- }
+ },
+ /* ROUTES TRANSITIONS */
+ appear: {},
+ appearActive: {},
+ enter: {
+ opacity: 0
+ },
+ enterActive: {
+ opacity: 1,
+ transition: 'opacity 300ms'
+ },
+ exit: {
+ opacity: 1,
+ transform: 'scale(1)'
+ },
+ exitActive: {
+ opacity: 0,
+ transition: 'opacity 300ms'
+ },
+ enterDone: {},
+ exitDone: {}
}));
diff --git a/src/fireedge/src/public/components/Header/index.js b/src/fireedge/src/public/components/Header/index.js
index f7bd88e6c2..96dc1ed8ec 100644
--- a/src/fireedge/src/public/components/Header/index.js
+++ b/src/fireedge/src/public/components/Header/index.js
@@ -31,20 +31,18 @@ import Zone from 'client/components/Header/Zone';
import headerStyles from 'client/components/Header/styles';
const Header = ({ title }) => {
- const { fixMenu } = useGeneral();
+ const { isFixMenu, fixMenu } = useGeneral();
const classes = headerStyles();
const isUpLg = useMediaQuery(theme => theme.breakpoints.up('lg'));
+ const handleFixMenu = () => fixMenu(true);
+
return React.useMemo(
() => (
{!isUpLg && (
- fixMenu(true)}
- edge="start"
- color="inherit"
- >
+
)}
@@ -60,7 +58,7 @@ const Header = ({ title }) => {
),
- [fixMenu, isUpLg]
+ [isFixMenu, fixMenu, isUpLg]
);
};
diff --git a/src/fireedge/src/public/components/Sidebar/index.js b/src/fireedge/src/public/components/Sidebar/index.js
index bf1f4b0198..12c08c6ad9 100644
--- a/src/fireedge/src/public/components/Sidebar/index.js
+++ b/src/fireedge/src/public/components/Sidebar/index.js
@@ -50,6 +50,8 @@ const Sidebar = () => {
const { isFixMenu, fixMenu } = useGeneral();
const isUpLg = useMediaQuery(theme => theme.breakpoints.up('lg'));
+ const handleSwapMenu = () => fixMenu(!isFixMenu);
+
return React.useMemo(
() => (
{
/>
fixMenu(!isFixMenu)}
+ onClick={handleSwapMenu}
>
{isUpLg ? : }
diff --git a/src/fireedge/src/public/components/Sidebar/styles.js b/src/fireedge/src/public/components/Sidebar/styles.js
index 3d5c793336..e06d4cbc1e 100644
--- a/src/fireedge/src/public/components/Sidebar/styles.js
+++ b/src/fireedge/src/public/components/Sidebar/styles.js
@@ -1,5 +1,5 @@
import { makeStyles } from '@material-ui/core';
-import { sidebarWidth } from 'client/assets/theme';
+import { sidebar, toolbar } from 'client/assets/theme/defaults';
export default makeStyles(theme => ({
// -------------------------------
@@ -7,6 +7,7 @@ export default makeStyles(theme => ({
// -------------------------------
drawerPaper: {
width: 0,
+ visibility: 'hidden',
whiteSpace: 'nowrap',
overflowX: 'hidden',
flexShrink: 0,
@@ -15,10 +16,11 @@ export default makeStyles(theme => ({
duration: theme.transitions.duration.leavingScreen
}),
[theme.breakpoints.up('lg')]: {
- width: sidebarWidth.minified,
+ width: sidebar.minified,
+ visibility: 'visible',
// CONTAINER ONLY WHEN EXPANDED
'&:hover': {
- width: sidebarWidth.fixed,
+ width: sidebar.fixed,
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
@@ -42,16 +44,17 @@ export default makeStyles(theme => ({
}
},
drawerFixed: {
- width: '100%',
+ width: sidebar.fixed,
+ visibility: 'visible',
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
}),
- [theme.breakpoints.only('md')]: {
- width: sidebarWidth.fixed
+ [theme.breakpoints.only('xs')]: {
+ width: '100%'
},
[theme.breakpoints.up('lg')]: {
- width: sidebarWidth.fixed,
+ width: sidebar.fixed,
'& #logo__text__top, & #logo__text__bottom': {
visibility: 'visible !important'
},
@@ -68,8 +71,14 @@ export default makeStyles(theme => ({
alignItems: 'center',
padding: '1rem',
overflow: 'hidden',
- height: 64, // appbar height
- minHeight: 64 // appbar height
+ height: toolbar.regular,
+ minHeight: toolbar.regular,
+ [`${theme.breakpoints.up('xs')} and (orientation: landscape)`]: {
+ minHeight: toolbar.xs
+ },
+ [theme.breakpoints.up('sm')]: {
+ minHeight: toolbar.sm
+ }
},
svg: {
minWidth: 100
diff --git a/src/fireedge/src/public/containers/Login/index.js b/src/fireedge/src/public/containers/Login/index.js
index f8e4a3653f..aabba9cedd 100644
--- a/src/fireedge/src/public/containers/Login/index.js
+++ b/src/fireedge/src/public/containers/Login/index.js
@@ -19,7 +19,8 @@ import {
Box,
Container,
Slide,
- LinearProgress
+ LinearProgress,
+ useMediaQuery
} from '@material-ui/core';
import useAuth from 'client/hooks/useAuth';
@@ -29,6 +30,7 @@ import FormUser from 'client/containers/Login/FormUser';
import Form2fa from 'client/containers/Login/Form2fa';
import FormGroup from 'client/containers/Login/FormGroup';
import loginStyles from 'client/containers/Login/styles';
+import Logo from 'client/icons/logo';
const STEP = {
USER_FORM: 0,
@@ -38,6 +40,7 @@ const STEP = {
function Login() {
const classes = loginStyles();
+ const isMobile = useMediaQuery(theme => theme.breakpoints.only('xs'));
const [user, setUser] = useState(undefined);
const [step, setStep] = useState(STEP.USER_FORM);
const {
@@ -70,10 +73,15 @@ function Login() {
};
return (
-
- {isLoading && }
+
+ {isLoading && }
- 
+
justifyContent: 'center',
height: '100vh'
},
+ loading: {
+ height: 4,
+ width: '100%',
+ [theme.breakpoints.only('xs')]: {
+ top: 0,
+ position: 'fixed'
+ }
+ },
paper: {
overflow: 'hidden',
padding: theme.spacing(3),
- minHeight: 400
- },
- logo: {
- display: 'block',
- width: '50%',
- margin: '0 auto',
- paddingBottom: theme.spacing(3)
+ minHeight: 400,
+ [theme.breakpoints.only('xs')]: {
+ border: 'none',
+ height: 'calc(100vh - 4px)',
+ backgroundColor: 'transparent'
+ }
},
form: {
display: 'flex',
diff --git a/src/fireedge/src/public/containers/TestApi/index.js b/src/fireedge/src/public/containers/TestApi/index.js
index dfa0863685..1d893f7b15 100644
--- a/src/fireedge/src/public/containers/TestApi/index.js
+++ b/src/fireedge/src/public/containers/TestApi/index.js
@@ -15,19 +15,22 @@
import React, { useState, useMemo } from 'react';
import { TextField, Grid, MenuItem } from '@material-ui/core';
+
import Commands from 'server/utils/constants/commands';
import { Translate, Tr } from 'client/components/HOC';
import InputCode from 'client/components/FormControl/InputCode';
import ResponseForm from 'client/containers/TestApi/ResponseForm';
+import testapiStyles from 'client/containers/TestApi/styles';
const TestApi = () => {
+ const classes = testapiStyles();
const [name, setName] = useState('acl.addrule');
const [response, setResponse] = useState('');
const handleChangeCommand = evt => setName(evt?.target?.value);
const handleChangeResponse = res => setResponse(res);
return (
-
+
({
+ root: {
+ minHeight: '100%'
+ }
+}));
diff --git a/src/fireedge/src/public/hooks/useAuth.js b/src/fireedge/src/public/hooks/useAuth.js
index 5543fe642a..3ff2b49190 100644
--- a/src/fireedge/src/public/hooks/useAuth.js
+++ b/src/fireedge/src/public/hooks/useAuth.js
@@ -80,12 +80,9 @@ export default function useAuth() {
return serviceAuth
.getUser(baseURL)
- .then(user =>
- serviceGroups.getGroups().then(groups => {
- dispatch(setGroups(groups));
- dispatch(successAuth({ user }));
- })
- )
+ .then(user => dispatch(successAuth({ user })))
+ .then(serviceGroups.getGroups)
+ .then(groups => dispatch(setGroups(groups)))
.catch(err => dispatch(failureAuth({ error: err })));
}, [dispatch, baseURL, jwtName, authUser]);
diff --git a/src/fireedge/src/public/icons/logo.js b/src/fireedge/src/public/icons/logo.js
index 9ebe9b4201..aef0ed12a0 100644
--- a/src/fireedge/src/public/icons/logo.js
+++ b/src/fireedge/src/public/icons/logo.js
@@ -58,8 +58,8 @@ const Logo = ({ width, height, spinner, withText, viewBox, ...props }) => {
y={280}
fill={textColor.top}
fontSize={125}
- fontFamily="Ubuntu,Lato"
- fontWeight={500}
+ fontFamily="Ubuntu"
+ fontWeight={800}
>
{'Open'}
@@ -69,8 +69,8 @@ const Logo = ({ width, height, spinner, withText, viewBox, ...props }) => {
y={430}
fill={textColor.bottom}
fontSize={125}
- fontFamily="Ubuntu,Lato"
- fontWeight={500}
+ fontFamily="Ubuntu"
+ fontWeight={800}
>
{'Nebula'}
diff --git a/src/fireedge/src/public/router/index.js b/src/fireedge/src/public/router/index.js
index f74a27d617..a17bb763bf 100644
--- a/src/fireedge/src/public/router/index.js
+++ b/src/fireedge/src/public/router/index.js
@@ -15,6 +15,7 @@
import React from 'react';
import { Route, Switch } from 'react-router-dom';
+import { TransitionGroup } from 'react-transition-group';
import { InternalLayout, MainLayout } from 'client/components/HOC';
import Error404 from 'client/containers/Error404';
@@ -24,28 +25,32 @@ const renderRoute = ({
label = '',
path = '',
authenticated = true,
- component: Component
+ component: Component,
+ ...route
}) => (
(
-
+ component={props => (
+
)}
+ {...route}
/>
);
const Router = () => (
-
- {endpoints?.map(({ routes, ...endpoint }) =>
- endpoint.path ? renderRoute(endpoint) : routes?.map(renderRoute)
- )}
-
-
+
+
+ {endpoints?.map(({ routes, ...endpoint }) =>
+ endpoint.path ? renderRoute(endpoint) : routes?.map(renderRoute)
+ )}
+
+
+
);
diff --git a/src/fireedge/webpack.config.js b/src/fireedge/webpack.config.js
index 43c97e96ae..b54f35b1de 100644
--- a/src/fireedge/webpack.config.js
+++ b/src/fireedge/webpack.config.js
@@ -38,6 +38,18 @@ const js = {
}
};
+const fonts = {
+ test: /\.(ttf|woff|woff2|svg|eot)$/i,
+ include: [path.resolve(__dirname, 'src/public/assets/fonts/')],
+ use: {
+ loader: 'file-loader',
+ options: {
+ name: '[name].[ext]',
+ outputPath: 'fonts'
+ }
+ }
+};
+
const alias = {
alias: {
server: path.resolve(__dirname, 'src/'),
@@ -57,7 +69,7 @@ const serverConfig = {
'index.js': path.resolve(__dirname, 'src/index.js')
},
module: {
- rules: [js]
+ rules: [js, fonts]
},
output: {
path: path.resolve(__dirname, 'dist'),
@@ -74,7 +86,7 @@ const clientConfig = {
'app.js': path.resolve(__dirname, 'src/public/front-app.js')
},
module: {
- rules: [js]
+ rules: [js, fonts]
},
optimization: {
splitChunks: {