Fix responsiveness of UI on mobile devices. Shows only relevant images.

The UI is now responsive for all devices (almost). The inputs are made
full-width for mobile devices.
Only relevant images are shown as download links. Previously all the
images returned by ASU server were shown which is fixed now.

Signed-off-by: Sudhanshu Gautam <sudhanshu@clever.coffee>

src/containers/home/home.js

@@ -47,7 +47,7 @@ function TabContainer({children, dir}) {
 }
 
 TabContainer.propTypes = {
-  children: PropTypes.elementType,
+  children: PropTypes.any,
   dir: PropTypes.any,
 };
 
@@ -250,13 +250,16 @@ class Home extends React.Component {
   };
 
   displayBuiltImageData = async (buildStatusResponse) => {
-    console.log(buildStatusResponse);
+    let builtImages = [];
+    builtImages.push({
+      url: 'https://chef.libremesh.org' +
+          buildStatusResponse.data.files + buildStatusResponse.data.sysupgrade,
+      type: 'sysupgrade',
+    });
     await this.dataService.getFiles(buildStatusResponse.data.files)
       .then((fileListResponse) => {
-        let builtImages = [];
         fileListResponse.forEach((file) => {
-          const suffix = file.name.substring(file.name.length - 4);
-          if (suffix === '.bin') {
+          if (file.name.includes('factory')) {
             const type = file.name.split('-').reverse()[0].split('.')[0];
             builtImages.push({
               url: 'https://chef.libremesh.org' +
@@ -484,7 +487,7 @@ class Home extends React.Component {
                               >
                                 <CloudDownloadIcon
                                   className="download-icon"/>
-                                {image.type}
+                                {image.name.split('-').reverse()[0].split('.')[0]}
                               </Button>
                             );
                           })

src/containers/home/home.scss

@@ -1,3 +1,5 @@
+$bg-color: #f0f0f0;
+
 .home-container {
   margin-top: 30px;
 
@@ -6,7 +8,7 @@
     text-align: left;
 
     .warning-432 {
-      background-color: #f0f0f0;
+      background-color: $bg-color;
       padding: 10px;
       margin-top: 20px;
       border: 1px solid #e3e3e3;
@@ -33,6 +35,12 @@
         display: block;
         z-index: 10;
       }
+
+      @media all and (max-width: 820px) {
+        width: 100%;
+        margin: 0;
+        padding: 0;
+      }
     }
 
     .search-field {
@@ -54,6 +62,12 @@
         top: 100%;
         z-index: 10;
       }
+
+      @media all and (max-width: 820px) {
+        width: 100%;
+        margin: 20px 0 0;
+        padding: 0;
+      }
     }
 
     .MuiTypography-h4 {
@@ -82,7 +96,7 @@
 
       .advanced-settings {
         border: 1px solid #999;
-        background-color: #f0f0f0;
+        background-color: $bg-color;
         border-radius: 6px;
         margin-top: 20px;
         overflow: hidden;
@@ -109,12 +123,12 @@
       }
 
       .package:hover {
-        background-color: #f0f0f0;
+        background-color: $bg-color;
       }
 
       .package:focus, .package:active {
         transition: .2s;
-        background-color: darken(#f0f0f0, 15%);
+        background-color: darken($bg-color, 15%);
       }
     }
   }