Skip to content

Commit

Permalink
Added roboto font, more MUI refactoring. #164
Browse files Browse the repository at this point in the history
  • Loading branch information
stylesuxx committed Jan 7, 2022
1 parent 1c91adc commit ab5e6b2
Show file tree
Hide file tree
Showing 26 changed files with 348 additions and 528 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"dependencies": {
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"@fontsource/roboto": "^4.5.1",
"@mui/icons-material": "^5.2.5",
"@mui/material": "^5.2.7",
"@palmabit/react-cookie-law": "^0.6.2",
Expand Down
70 changes: 37 additions & 33 deletions src/Components/App/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import {
ThemeProvider,
} from '@mui/material/styles';

import Box from '@mui/material/Box';

import AppSettings from '../AppSettings';
import CookieConsent from '../CookieConsent';
import LanguageSelection from '../LanguageSelection';
Expand Down Expand Up @@ -50,44 +52,46 @@ function App({

return (
<ThemeProvider theme={theme}>
<div className="main">
<Box className="main">
<header className="main__header">
<div className="main__bar">
<div className="main__logo" />

<PortPicker
hasPort={serial.connected}
hasSerial={serial.hasSerial}
isIdle={isIdle}
onChangePort={serial.actions.handleChangePort}
onConnect={serial.actions.handleConnect}
onDisconnect={serial.actions.handleDisconnect}
onSetBaudRate={serial.actions.handleSetBaudRate}
onSetPort={serial.actions.handleSetPort}
open={serial.open}
ports={serial.portNames}
/>

<div className="main__settings">
<LanguageSelection
current={language.current}
languages={language.available}
onChange={language.actions.handleChange}
<Box className="mui-fixed">
<div className="main__bar">
<div className="main__logo" />

<PortPicker
hasPort={serial.connected}
hasSerial={serial.hasSerial}
isIdle={isIdle}
onChangePort={serial.actions.handleChangePort}
onConnect={serial.actions.handleConnect}
onDisconnect={serial.actions.handleDisconnect}
onSetBaudRate={serial.actions.handleSetBaudRate}
onSetPort={serial.actions.handleSetPort}
open={serial.open}
ports={serial.portNames}
/>

<div className="button button--dark">
<button
onClick={appSettings.actions.handleOpen}
type="button"
>
{t('settings')}
</button>
</div>
<div className="main__settings">
<LanguageSelection
current={language.current}
languages={language.available}
onChange={language.actions.handleChange}
/>

<div className="button button--dark">
<button
onClick={appSettings.actions.handleOpen}
type="button"
>
{t('settings')}
</button>
</div>

</div>
</div>
</div>

<Log messages={serial.log} />
<Log messages={serial.log} />
</Box>
</header>

<MainContent
Expand Down Expand Up @@ -126,7 +130,7 @@ function App({
packetErrors={stats.packetErrors}
version={stats.version}
/>
</div>
</Box>

<AppSettings
onClose={appSettings.actions.handleClose}
Expand Down
12 changes: 7 additions & 5 deletions src/Components/App/style.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import '../../variables.scss';

* {
margin: 0;
padding: 0;
Expand All @@ -7,9 +9,6 @@
}

body {
font-family: 'open_sansregular', 'Segoe UI', Tahoma, sans-serif;
font-size: 12px;
color: #303030;
background-color: lightgray;
margin: 0px;
padding: 0px;
Expand Down Expand Up @@ -140,8 +139,10 @@ body {
}

.main {
/*
padding: 0px 0px 0 0px;
height: calc(100% - 7px);
*/

.main__header {
background: #3d3f3e;
Expand Down Expand Up @@ -238,7 +239,6 @@ body {
a {
text-decoration: none;
color: #000;
font-family: 'open_sanssemibold', Arial;
}

a:hover {
Expand Down Expand Up @@ -315,9 +315,11 @@ body {
border-radius: 4px;
border: 1px solid var(--color-tertiary);
color: var(--color-tertiary);
/*
font-family: 'open_sanssemibold', Arial;
font-size: 12px;
line-height: 13px;
*/
display: block;
width: 100%;
transition: all ease 0.2s;
Expand Down Expand Up @@ -362,7 +364,7 @@ body {
.content_wrapper {
padding: 20px;
position: relative;
margin-bottom: 50px;
margin-bottom: 70px;

@media only screen and (max-width: 600px) {
margin-bottom: 120px;
Expand Down
35 changes: 15 additions & 20 deletions src/Components/AppSettings/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,12 @@ import { useTranslation } from 'react-i18next';
import PropTypes from 'prop-types';
import React from 'react';

import Divider from '@mui/material/Divider';
import FormControl from '@mui/material/FormControl';
import Stack from '@mui/material/Stack';

import Checkbox from '../Input/Checkbox';
import Overlay from '../Overlay';

import './style.scss';

function AppSettings({
settings,
onClose,
Expand Down Expand Up @@ -47,25 +44,23 @@ function AppSettings({
});

return (
<div className="settings">
<Overlay
headline={t('settingsHeader')}
maxWidth='sm'
onClose={onClose}
open={open}
<Overlay
headline={t('settingsHeader')}
maxWidth='sm'
onClose={onClose}
open={open}
>
<FormControl
fullWidth
variant="standard"
>
<FormControl
fullWidth
variant="standard"
<Stack
spacing={1}
>
<Stack
spacing={2}
>
{settingElements}
</Stack>
</FormControl>
</Overlay>
</div>
{settingElements}
</Stack>
</FormControl>
</Overlay>
);
}

Expand Down
5 changes: 0 additions & 5 deletions src/Components/AppSettings/style.scss

This file was deleted.

13 changes: 12 additions & 1 deletion src/Components/Buttonbar/GenericButton/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,20 @@ import Button from '@mui/material/Button';
function GenericButton({
className,
disabled,
fullWidth,
onClick,
sx,
text,
variant,
}) {
return (
<Button
className={className}
disabled={disabled}
fullWidth={fullWidth}
onClick={onClick}
variant="contained"
sx={sx}
variant={variant}
>
{text}
</Button>
Expand All @@ -24,12 +29,18 @@ function GenericButton({
GenericButton.defaultProps = {
className: null,
disabled: false,
fullWidth: false,
sx: null,
variant: 'contained',
};
GenericButton.propTypes = {
className: PropTypes.string,
disabled: PropTypes.bool,
fullWidth: PropTypes.bool,
onClick: PropTypes.func.isRequired,
sx: PropTypes.shape({}),
text: PropTypes.string.isRequired,
variant: PropTypes.string,
};

export default GenericButton;
Loading

0 comments on commit ab5e6b2

Please sign in to comment.