Merge pull request #2331 from proddy/dev

web UI small changes

interface/src/app/main/Dashboard.tsx

@@ -274,7 +274,7 @@ const Dashboard = () => {
           <IconContext.Provider
             value={{
               color: 'lightblue',
-              size: '16',
+              size: '18',
               style: { verticalAlign: 'middle' }
             }}
           >

interface/src/app/main/Devices.tsx

@@ -10,9 +10,9 @@ import { useNavigate } from 'react-router';
 import { toast } from 'react-toastify';
 
 import CommentsDisabledOutlinedIcon from '@mui/icons-material/CommentsDisabledOutlined';
+import ConstructionIcon from '@mui/icons-material/Construction';
 import EditIcon from '@mui/icons-material/Edit';
 import EditOffOutlinedIcon from '@mui/icons-material/EditOffOutlined';
-import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered';
 import DownloadIcon from '@mui/icons-material/GetApp';
 import HighlightOffIcon from '@mui/icons-material/HighlightOff';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
@@ -522,7 +522,7 @@ const Devices = () => {
       <IconContext.Provider
         value={{
           color: 'lightblue',
-          size: '16',
+          size: '18',
           style: { verticalAlign: 'middle' }
         }}
       >
@@ -643,7 +643,7 @@ const Devices = () => {
                 coreData.devices[deviceIndex].e +
                 ' ' +
                 LL.ENTITIES(shown_data.length)}
-              <ButtonTooltip title="Info">
+              <ButtonTooltip title={LL.DEVICE_DETAILS()}>
                 <IconButton onClick={() => setShowDeviceInfo(true)}>
                   <InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
                 </IconButton>
@@ -651,7 +651,7 @@ const Devices = () => {
               {me.admin && (
                 <ButtonTooltip title={LL.CUSTOMIZATIONS()}>
                   <IconButton onClick={customize}>
-                    <FormatListNumberedIcon color="primary" sx={{ fontSize: 18 }} />
+                    <ConstructionIcon color="primary" sx={{ fontSize: 18 }} />
                   </IconButton>
                 </ButtonTooltip>
               )}
@@ -671,7 +671,7 @@ const Devices = () => {
               </ButtonTooltip>
             </Typography>
             <Grid justifyContent="flex-end">
-              <ButtonTooltip title={LL.CANCEL()}>
+              <ButtonTooltip title={LL.CLOSE()}>
                 <IconButton onClick={resetDeviceSelect}>
                   <HighlightOffIcon color="primary" sx={{ fontSize: 18 }} />
                 </IconButton>

interface/src/app/settings/Version.tsx

@@ -183,10 +183,6 @@ const Version = () => {
   };
 
   const showButtons = () => {
-    if (!upgradeAvailable) {
-      return;
-    }
-
     if (downloadOnly) {
       return (
         <Button
@@ -212,7 +208,7 @@ const Version = () => {
         size="small"
         onClick={() => showFirmwareDialog()}
       >
-        {LL.UPGRADE()}&hellip;
+        {upgradeAvailable ? LL.UPGRADE() : 'Re-install'}&hellip;
       </Button>
     );
   };
@@ -225,24 +221,24 @@ const Version = () => {
     return (
       <>
         <Box p={2} border="1px solid grey" borderRadius={2}>
-          <Typography sx={{ pb: 2 }} variant="h6" color="primary">
+          <Typography mb={2} variant="h6" color="primary">
             Firmware Version
           </Typography>
 
-          <Grid container spacing={4}>
+          <Grid
-            <Grid mb={1}>
+            container
-              <Typography mb={1} color="secondary">
+            direction="row"
-                {LL.VERSION()}
+            rowSpacing={1}
-              </Typography>
+            sx={{
-              <Typography mb={1} color="secondary">
+              justifyContent: 'flex-start',
-                Platform
+              alignItems: 'baseline'
-              </Typography>
+            }}
-              <Typography mb={1} color="secondary">
+          >
-                Release Type
+            <Grid size={4}>
-              </Typography>
+              <Typography color="secondary">{LL.VERSION()}</Typography>
             </Grid>
-            <Grid mb={1}>
+            <Grid size={8}>
-              <Typography mb={1}>
+              <Typography>
                 {data.emsesp_version}
                 {data.build_flags && (
                   <Typography variant="caption">
@@ -250,8 +246,20 @@ const Version = () => {
                   </Typography>
                 )}
               </Typography>
-              <Typography mb={1}>{getPlatform()}</Typography>
+            </Grid>
-              <Typography mb={1}>
+
+            <Grid size={4}>
+              <Typography color="secondary">Platform</Typography>
+            </Grid>
+            <Grid size={8}>
+              <Typography>{getPlatform()}</Typography>
+            </Grid>
+
+            <Grid size={4}>
+              <Typography color="secondary">Release Type</Typography>
+            </Grid>
+            <Grid size={8}>
+              <Typography>
                 {data.emsesp_version.includes('dev')
                   ? LL.DEVELOPMENT()
                   : LL.STABLE()}
@@ -259,40 +267,48 @@ const Version = () => {
             </Grid>
           </Grid>
 
-          <Typography sx={{ pb: 2 }} variant="h6" color="primary">
+          <Typography mt={2} mb={2} variant="h6" color="primary">
             {LL.AVAILABLE_VERSION()}
           </Typography>
 
+          <Grid
+            container
+            direction="row"
+            rowSpacing={1}
+            sx={{
+              justifyContent: 'flex-start',
+              alignItems: 'baseline'
+            }}
+          >
+            <Grid size={4}>
+              <Typography color="secondary">{LL.STABLE()}</Typography>
+            </Grid>
+            <Grid size={4}>
+              <Typography>
+                <Link target="_blank" href={STABLE_RELNOTES_URL} color="primary">
+                  {latestVersion}
+                </Link>
+              </Typography>
+            </Grid>
+            <Grid size={4}>{!usingDevVersion && showButtons()}</Grid>
+
+            <Grid size={4}>
+              <Typography color="secondary">{LL.DEVELOPMENT()}</Typography>
+            </Grid>
+            <Grid size={4}>
+              <Typography>
+                <Link target="_blank" href={DEV_RELNOTES_URL} color="primary">
+                  {latestDevVersion}
+                </Link>
+              </Typography>
+            </Grid>
+            <Grid size={4}>{usingDevVersion && showButtons()}</Grid>
+          </Grid>
+
           {internetLive ? (
             <>
-              <Grid container spacing={4}>
-                <Grid mb={1}>
-                  <Typography mb={1} color="secondary">
-                    {LL.STABLE()}
-                  </Typography>
-                  <Typography mb={1} color="secondary">
-                    {LL.DEVELOPMENT()}
-                  </Typography>
-                </Grid>
-                <Grid mb={1}>
-                  <Typography mb={1}>
-                    {latestVersion}&nbsp;&nbsp;
-                    <Link target="_blank" href={STABLE_RELNOTES_URL} color="primary">
-                      (changelog)
-                    </Link>
-                    {!usingDevVersion && showButtons()}
-                  </Typography>
-                  <Typography mb={1}>
-                    {latestDevVersion}&nbsp;&nbsp;
-                    <Link target="_blank" href={DEV_RELNOTES_URL} color="primary">
-                      (changelog)
-                    </Link>
-                    {usingDevVersion && showButtons()}
-                  </Typography>
-                </Grid>
-              </Grid>
               {upgradeAvailable ? (
-                <Typography color="warning">
+                <Typography mt={2} color="warning">
                   <InfoOutlinedIcon
                     color="warning"
                     sx={{ verticalAlign: 'middle', mr: 2 }}
@@ -300,7 +316,7 @@ const Version = () => {
                   {LL.UPGRADE_AVAILABLE()}
                 </Typography>
               ) : (
-                <Typography color="success">
+                <Typography mt={2} color="success">
                   <CheckIcon
                     color="success"
                     sx={{ verticalAlign: 'middle', mr: 2 }}
@@ -326,7 +342,7 @@ const Version = () => {
           ) : (
             <Typography mb={1} color="warning">
               <WarningIcon color="warning" sx={{ verticalAlign: 'middle', mr: 2 }} />
-              device cannot access internet
+              no access to download site
             </Typography>
           )}