Feature/mui

codecov.yml

@@ -0,0 +1,3 @@
+ignore:
+  - "src/sources/Blheli/*"
+  - "src/sources/Blheli/**/*"

package.json

@@ -5,7 +5,11 @@
   "license": "AGPL-3.0",
   "dependencies": {
     "@babel/plugin-transform-react-jsx": "^7.16.7",
-    "@palmabit/react-cookie-law": "^0.6.2",
+    "@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",
     "autoprefixer": "^10.4.2",
     "bluejay-rtttl-parse": "^2.0.2",
     "compare-versions": "^4.1.3",

src/Components/App/index.jsx

@@ -4,6 +4,13 @@ import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import {
+  createTheme,
+  ThemeProvider,
+} from '@mui/material/styles';
+
+import Box from '@mui/material/Box';
+
 import AppSettings from '../AppSettings';
 import CookieConsent from '../CookieConsent';
 import LanguageSelection from '../LanguageSelection';
@@ -16,10 +23,21 @@ import Statusbar from '../Statusbar';
 import changelogEntries from '../../changelog.json';
 import './style.scss';
 
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#6a8347',
+      bright: '#71b238',
+      ph: '',
+    },
+  },
+});
+
 function App({
   actions,
   appSettings,
   configs,
+  cookieDone,
   escs,
   language,
   melodies,
@@ -36,45 +54,47 @@ function App({
   const isIdle = !Object.values(actions).some((element) => element);
 
   return (
-    <div>
-      <div className="main">
+    <ThemeProvider theme={theme}>
+      <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
@@ -114,32 +134,35 @@ function App({
           packetErrors={stats.packetErrors}
           version={stats.version}
         />
-      </div>
-
-      {appSettings.show &&
-        <AppSettings
-          onClose={appSettings.actions.handleClose}
-          onUpdate={appSettings.actions.handleUpdate}
-          settings={appSettings.settings}
-        />}
-
-      {melodies.show &&
-        <MelodyEditor
-          customMelodies={melodies.customMelodies}
-          defaultMelodies={melodies.defaultMelodies}
-          dummy={melodies.dummy}
-          melodies={melodies.escs}
-          onClose={melodies.actions.handleClose}
-          onDelete={melodies.actions.handleDelete}
-          onSave={melodies.actions.handleSave}
-          onWrite={melodies.actions.handleWrite}
-          writing={actions.isWriting}
-        />}
-
-      <CookieConsent onCookieAccept={onCookieAccept} />
+      </Box>
+
+      <AppSettings
+        onClose={appSettings.actions.handleClose}
+        onUpdate={appSettings.actions.handleUpdate}
+        open={appSettings.show}
+        settings={appSettings.settings}
+      />
+
+      <MelodyEditor
+        customMelodies={melodies.customMelodies}
+        defaultMelodies={melodies.defaultMelodies}
+        dummy={melodies.dummy}
+        melodies={melodies.escs}
+        onClose={melodies.actions.handleClose}
+        onDelete={melodies.actions.handleDelete}
+        onSave={melodies.actions.handleSave}
+        onWrite={melodies.actions.handleWrite}
+        open={melodies.show}
+        writing={actions.isWriting}
+      />
+
+      <CookieConsent
+        onCookieAccept={onCookieAccept}
+        show={!cookieDone}
+      />
 
       <ToastContainer />
-    </div>
+    </ThemeProvider>
   );
 }
 
@@ -169,6 +192,7 @@ App.propTypes = {
     show: PropTypes.bool.isRequired,
   }).isRequired,
   configs: PropTypes.shape({}).isRequired,
+  cookieDone: PropTypes.bool.isRequired,
   escs: PropTypes.shape({
     actions: PropTypes.shape({
       handleMasterUpdate: PropTypes.func.isRequired,

src/Components/App/style.scss

@@ -1,3 +1,5 @@
+@import '../../variables.scss';
+
 * {
   margin: 0;
   padding: 0;
@@ -7,13 +9,9 @@
 }
 
 body {
-  font-family: 'open_sansregular', 'Segoe UI', Tahoma, sans-serif;
-  font-size: 12px;
-  color: #303030;
   background-color: lightgray;
   margin: 0px;
   padding: 0px;
-  width: 100%;
   overflow-x: hidden;
 }
 
@@ -141,8 +139,10 @@ body {
 }
 
 .main {
+  /*
   padding: 0px 0px 0 0px;
   height: calc(100% - 7px);
+  */
 
   .main__header {
     background: #3d3f3e;
@@ -239,7 +239,6 @@ body {
   a {
     text-decoration: none;
     color: #000;
-    font-family: 'open_sanssemibold', Arial;
   }
 
   a:hover {
@@ -316,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;
@@ -363,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;

src/Components/AppSettings/__tests__/index.test.jsx

@@ -28,12 +28,13 @@ describe('AppSettings', () => {
       <AppSettings
         onClose={onClose}
         onUpdate={onUpdate}
+        open
         settings={settings}
       />
     );
 
     expect(screen.getByText(/settingsHeader/i)).toBeInTheDocument();
-    expect(screen.getByText(/close/i)).toBeInTheDocument();
+    expect(screen.getByTestId('CloseIcon')).toBeInTheDocument();
   });
 
   it('should handle clicks on checkbox', () => {
@@ -51,6 +52,7 @@ describe('AppSettings', () => {
       <AppSettings
         onClose={onClose}
         onUpdate={onUpdate}
+        open
         settings={settings}
       />
     );
@@ -71,11 +73,12 @@ describe('AppSettings', () => {
       <AppSettings
         onClose={onClose}
         onUpdate={onUpdate}
+        open
         settings={settings}
       />
     );
 
-    userEvent.click(screen.getByText(/close/i));
+    userEvent.click(screen.getByTestId('CloseIcon'));
     expect(onClose).toHaveBeenCalled();
   });
 
@@ -94,6 +97,7 @@ describe('AppSettings', () => {
       <AppSettings
         onClose={onClose}
         onUpdate={onUpdate}
+        open
         settings={settings}
       />
     );

src/Components/AppSettings/index.jsx

@@ -2,15 +2,17 @@ import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import React, { useCallback } from 'react';
 
+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,
   onUpdate,
+  open,
 }) {
   const { t } = useTranslation('settings');
 
@@ -43,27 +45,33 @@ function AppSettings({
         return null;
       }
     }
-
-    return null;
   });
 
   return (
-    <div className="settings">
-      <Overlay
-        headline={t('settingsHeader')}
-        onClose={onClose}
+    <Overlay
+      headline={t('settingsHeader')}
+      maxWidth='sm'
+      onClose={onClose}
+      open={open}
+    >
+      <FormControl
+        fullWidth
+        variant="standard"
       >
-        <div>
+        <Stack
+          spacing={1}
+        >
           {settingElements}
-        </div>
-      </Overlay>
-    </div>
+        </Stack>
+      </FormControl>
+    </Overlay>
   );
 }
 
 AppSettings.propTypes = {
   onClose: PropTypes.func.isRequired,
   onUpdate: PropTypes.func.isRequired,
+  open: PropTypes.bool.isRequired,
   settings: PropTypes.shape().isRequired,
 };