Fix empty icon width in icon selector is not consistent

Add online help to esp3d.io in info page

src/components/App/version.js

@@ -17,7 +17,7 @@
 */
 import { h } from "preact"
 import { webUIbuild } from "../../targets"
-export const webUIversion = "3.0.0-a79"
+export const webUIversion = "3.0.0-a80"
 export const Esp3dVersion = () => (
     <span>
         {webUIversion}.{webUIbuild}

src/components/Controls/Button.js

@@ -48,6 +48,8 @@ const modifiers = {
     m2: "m-2",
     m1: "m-1",
     mt1: "mt-1",
+    min2rem: "min2rem",
+    min1rem: "min1rem",
 }
 const Button = createComponent("button", "btn", modifiers)
 

src/components/Controls/Fields/IconSelect.js

@@ -64,6 +64,7 @@ const IconSelect = ({
                             <ButtonImg
                                 m05
                                 primary
+                                min1rem
                                 btn-xs
                                 icon={displayIcon}
                                 onclick={onSelect}
@@ -73,6 +74,7 @@ const IconSelect = ({
                         return (
                             <ButtonImg
                                 m05
+                                min2rem
                                 icon={displayIcon}
                                 onclick={onSelect}
                             />
@@ -101,6 +103,7 @@ const IconSelect = ({
         <div class={`input-group  `}>
             <ButtonImg
                 m1
+                min2rem
                 icon={controlIcon}
                 onClick={showList}
             />

src/pages/about/index.js

@@ -37,7 +37,7 @@ import {
     useSettingsContextFn,
 } from "../../contexts"
 import { Esp3dVersion } from "../../components/App/version"
-import { Github, RefreshCcw, UploadCloud, LifeBuoy, Info } from "preact-feather"
+import { Github, RefreshCcw, UploadCloud, LifeBuoy, Info, BookOpen } from "preact-feather"
 import { webUiUrl, fwUrl, Name, restartdelay } from "../../targets"
 import {
     showConfirmationModal,
@@ -45,6 +45,9 @@ import {
 } from "../../components/Modal"
 let about = []
 
+//TODO: add link to translated documentation according language set for UI
+const defaultHelpUrl = "https://esp3d.io/ESP3D-WebUI/Version_3.X/documentation/"
+
 /*
  * Local const
  *
@@ -96,7 +99,32 @@ const CustomEntry = () => {
                 {HelpEntry} {InfoEntry}
             </li>
         )
+    } 
+   
+    const onClickHelp = (e) => {
+        useUiContextFn.haptic()
+        window.open(defaultHelpUrl, "_blank")
+        e.target.blur()
     }
+    HelpEntry = (
+        <ButtonImg
+            mx2
+            tooltip
+            data-tooltip={T("S225")}
+            icon={<BookOpen />}
+            label="esp3d.io"
+            onClick={onClickHelp}
+        />
+    )
+    return (
+        <li class="feather-icon-container">
+            <span class="text-primary text-label">
+                {T("S225")}:
+            </span>
+             {HelpEntry}
+        </li>
+    )
+ 
 }
 
 const About = () => {

src/style/components/_control.scss

@@ -322,6 +322,14 @@ span.input-group-addon {
     margin: 0.05rem !important;
 }
 
+.min2rem {
+    min-width: 2rem;
+}
+
+.min1rem {
+    min-width: 1rem;
+}
+
 .error-login-message {
     color: red;
     background-color: white;

src/targets/translations/en.json

@@ -229,6 +229,7 @@
     "S222": "Error loading file:",
     "S223": "Default filesystem",
     "S224": "Sort files",
+    "S225": "Documentation",
     "btn+X": "X+",
     "btn-X": "X-",
     "btnHX": "Home X",