Updated HelpMenu components to use only mds subcomponents (#3119)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>

Author: bexsoft

portal-ui/src/common/MoreLink.tsx

@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { ArrowIcon } from "mds";
+import { ArrowIcon, Box } from "mds";
 
 const MoreLink = ({
   LeadingIcon,
@@ -39,8 +39,8 @@ const MoreLink = ({
       href={link}
       target={"_blank"}
     >
-      <div
-        style={{
+      <Box
+        sx={{
           display: "flex",
           flexDirection: "row",
           alignItems: "center",
@@ -49,25 +49,34 @@ const MoreLink = ({
         }}
       >
         {LeadingIcon && (
-          <div style={{ flexGrow: 0, flexShrink: 1, lineHeight: "12px" }}>
-            {/*@ts-ignore*/}
-            <LeadingIcon style={{ height: 16, width: 16 }} />
-          </div>
+          <Box
+            sx={{
+              flexGrow: 0,
+              flexShrink: 1,
+              lineHeight: "12px",
+              "& svg": {
+                height: 16,
+                width: 16,
+              },
+            }}
+          >
+            <LeadingIcon />
+          </Box>
         )}
-        <div style={{ flexGrow: 0, flexShrink: 1, lineHeight: "12px" }}>
+        <Box sx={{ flexGrow: 0, flexShrink: 1, lineHeight: "12px" }}>
           {text}
-        </div>
-        <div
-          style={{
+        </Box>
+        <Box
+          sx={{
             flexGrow: 0,
             flexShrink: 1,
             lineHeight: "12px",
             marginTop: 2,
           }}
         >
           <ArrowIcon style={{ width: 12 }} />
-        </div>
-      </div>
+        </Box>
+      </Box>
     </a>
   );
 };

portal-ui/src/screens/Console/HelpItem.tsx

@@ -31,37 +31,27 @@ const HelpItem = ({ item, displayImage = true }: IHelpItemProps) => {
         style={{
           display: "flex",
           flexDirection: "row",
-          flexWrap: "nowrap",
-          marginBottom: 20,
         }}
       >
         {displayImage && (
-          <div style={{ paddingLeft: 16, paddingRight: 16 }}>
+          <div style={{ paddingLeft: 16 }}>
             <a href={item.url} target={"_blank"}>
-              <div
+              <img
+                src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                alt={item.title}
                 style={{
-                  backgroundColor: "#dedede",
                   width: 208,
-                  height: 62,
+                  height: 116,
+                  backgroundImage: `url(${item.img}), url(${placeholderImg})`,
+                  backgroundPosition: "center center",
+                  backgroundSize: "cover",
+                  backgroundRepeat: "no-repeat",
                 }}
-              >
-                <img
-                  src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-                  alt={item.title}
-                  style={{
-                    width: 208,
-                    height: 116,
-                    backgroundImage: `url(${item.img}), url(${placeholderImg})`,
-                    backgroundPosition: "center center",
-                    backgroundSize: "cover",
-                    backgroundRepeat: "no-repeat",
-                  }}
-                />
-              </div>
+              />
             </a>
           </div>
         )}
-        <div style={{ flexGrow: 1, flexBasis: "auto" }}>
+        <div style={{ flexGrow: 1, flexBasis: "auto", paddingLeft: 16 }}>
           <div
             style={{
               width: "100%",