Fix: Styling Issues

- Darkmode was not rendered correctly (reported in issue #1).
- No error message if new configuration file name was empty.

Author: Timo Stark

ui/src/configurationEditor/ConfigurationEditor.tsx

@@ -131,7 +131,7 @@ export function ConfigurationEditor(props: ConfigurationEditorProps) {
     };
 
     const content = (
-        <Box
+        <Grid
             sx={{width: "100%", height: "100vh"}}
             style={{
                 position: "absolute",
@@ -143,21 +143,20 @@ export function ConfigurationEditor(props: ConfigurationEditorProps) {
                 backgroundColor: "transparent"
             }}
         >
-            <Box
+            <Grid
                 style={{
                     display: "flex",
                     width: "75%",
                     height: "100vh",
-                    borderLeft: "2px solid blue",
                     flexDirection: "column",
-                    backgroundColor: "rgba(255,255,255,1)",
                     alignItems: "flex-start"
                 }}
+                sx={{backgroundColor: "background.default",  borderLeft: "2px solid", borderColor: "primary.dark"}}
             >
                 <Close onClick={handleNewConfigurationFileSlide} sx={{cursor: 'pointer'}} />
                 <NewConfigurationFile nginxInstance={props.nginxInstance} instanceService={instanceService}/>
-            </Box>
-        </Box>
+            </Grid>
+        </Grid>
     );
 
     const handleExportConfigurationFile = async () => {

ui/src/configurationEditor/NewConfigurationFile.tsx

@@ -18,6 +18,12 @@ export function NewConfigurationFile(props: NewConfigurationFileProps) {
 
     const saveConfigurationToFile: any = () => {
         const content = Base64.encode(configurationFileContent)
+
+        if (!fileName) {
+            props.instanceService.displayErrorMessage(`Filename can not be empty!`);
+            return;
+        }
+
         props.instanceService.sendConfigurationToFile(`/etc/nginx/conf.d/${fileName}`, props.nginxInstance.id, content).then((data: any) => {
             props.instanceService.reloadNGINX(props.nginxInstance.id).then((data: any) => {
                 props.instanceService.displaySuccessMessage("Configuration successfully updated!");
@@ -47,7 +53,7 @@ export function NewConfigurationFile(props: NewConfigurationFileProps) {
                     style={{minHeight: "20rem"}}
             />
             <Box>
-                <Button variant={"outlined"} startIcon={<PublishIcon/>}
+                <Button variant={"contained"} startIcon={<PublishIcon/>}
                         onClick={saveConfigurationToFile}
                         style={{marginLeft: "0.5rem"}}>Publish</Button>
             </Box>

ui/src/configurationUI/ConfigurationUi.tsx

@@ -43,7 +43,7 @@ export function ConfigurationUi(props: ConfigurationUiProps) {
             return (
                 <Box paddingTop={1}>
                     <Typography variant={"h5"} paddingBottom={1}>Mounted Volumes</Typography>
-                    <TableContainer component={Paper}>
+                    <TableContainer>
                         <Table sx={{minWidth: 650}} aria-label="simple table">
                             <TableHead>
                                 <TableRow>
@@ -103,7 +103,7 @@ export function ConfigurationUi(props: ConfigurationUiProps) {
                     borderLeft: "1px solid eee",
                     boxShadow: "-3px 0px 5px rgb(0 0 0 / 20%)",
                     flexDirection: "column",
-                    backgroundColor: "rgba(255,255,255,1)",
+                    backgroundColor: "primary.light",
                     alignItems: "flex-start"
                 }}
             >
@@ -138,7 +138,7 @@ export function ConfigurationUi(props: ConfigurationUiProps) {
                     height: "100vh",
                     borderLeft: "2px solid blue",
                     flexDirection: "column",
-                    backgroundColor: "rgba(255,255,255,1)",
+                    backgroundColor: "primary.light",
                     alignItems: "flex-start"
                 }}
             >
@@ -156,11 +156,11 @@ export function ConfigurationUi(props: ConfigurationUiProps) {
             <Slide direction="left" in={locationSlide} mountOnEnter unmountOnExit>
                 {contentLocation}
             </Slide>
-            <TableContainer component={Paper}>
-                <Table sx={{minWidth: 650}} aria-label="simple table">
+            <TableContainer>
+                <Table>
                     <TableHead>
                         <TableRow>
-                            <TableCell>Server
+                            <TableCell color="text.secondary">Server
                                 {/*<Tooltip title="New Virtual Server">*/}
                                 {/*    <IconButton onClick={handleChangeServer} sx={{fontSize:"0.9rem"}}>*/}
                                 {/*        <Add/>*/}

ui/src/instances/NginxInstances.tsx

@@ -96,48 +96,6 @@ export function NginxInstance() {
         setTabValue(newValue);
     };
 
-    const Pre = styled.pre`
-      text-align: left;
-      margin: 1em 0;
-      padding: 0.5em;
-      overflow: scroll;
-    `;
-
-    const Line = styled.div`
-      display: table-row;
-    `;
-
-    const LineNo = styled.span`
-      display: table-cell;
-      text-align: right;
-      padding-right: 1em;
-      user-select: none;
-      opacity: 0.5;
-    `;
-
-    const LineContent = styled.span`
-      display: table-cell;
-    `;
-
-    const listTheme = createTheme({
-        typography: {
-            h3: {
-                fontSize: 30,
-            },
-            subtitle2: {
-                fontSize: 13,
-                opacity: .6,
-                overflow: 'hidden',
-            },
-            body1: {
-                fontWeight: 400,
-            },
-            body2: {
-                fontWeight: 600,
-            },
-        },
-    });
-
     const containerNetwork: any = (port: any, key: number) => {
         if (port.PrivatePort && port.PublicPort) {
             return (
@@ -167,7 +125,6 @@ export function NginxInstance() {
 
     return (
         <Box sx={{m: 1}}>
-            <ThemeProvider theme={listTheme}>
                 {!loading ? (
                     !nginxInstance.id ? (
                             <Box>
@@ -252,7 +209,6 @@ export function NginxInstance() {
                         </Box>
                     )
                 ) : (<Typography variant='h3'>Loading...</Typography>)}
-            </ThemeProvider>
         </Box>
     );
 }

ui/src/main.tsx

@@ -4,7 +4,7 @@ import CssBaseline from "@mui/material/CssBaseline";
 import {DockerMuiThemeProvider} from "@docker/docker-mui-theme";
 
 import {App} from './App';
-import {createTheme, ThemeProvider, useTheme} from "@mui/material";
+import {ThemeProvider, useTheme} from "@mui/material";
 
 const CustomThemeProvider = ({ children }: any) => {
     const theme = useTheme();

ui/src/prism/Editor.tsx

@@ -19,13 +19,15 @@ export function Editor(props: EditorProps) {
         props.setConfigurationFileContent(value)
     }
 
+    const placeholderText = "# ********************************************\n# NGINX Configuration Editor \n# Please write your configuration here\n# Feel free to remove this comment\n# ********************************************"
+
     return (
         <ReactEditor
-            value={props.fileContent}
+            value={props.fileContent ? props.fileContent : placeholderText}
             className={"nginx-config-editor"}
             onValueChange={handleChange}
             highlight={
-                configurationFileContent => highlight(props.fileContent, languages.nginx, "bash")
+                configurationFileContent => highlight(props.fileContent ? props.fileContent : placeholderText, languages.nginx, "bash")
                     .split("\n")
                     .map((line, i) => `<span class='editorLineNumber' key=${i}>${i + 1}</span>${line}`)
                     .join('\n')