Merge pull request #741 from smiclea/os-logo

Show os type in Wizard VM selection screen

src/components/modules/WizardModule/WizardInstances/WizardInstances.tsx

@@ -28,6 +28,8 @@ import { ThemePalette, ThemeProps } from "@src/components/Theme";
 import type { Instance as InstanceType } from "@src/@types/Instance";
 
 import instanceImage from "./images/instance.svg";
+import instanceLinuxImage from "./images/instance-linux.svg";
+import instanceWindowsImage from "./images/instance-windows.svg";
 import bigInstanceImage from "./images/instance-big.svg";
 
 const mbToGbString = (mb: number) =>
@@ -92,9 +94,18 @@ const LoadingText = styled.div<any>`
   margin-top: 38px;
   font-size: 18px;
 `;
-export const Image = styled.div<any>`
+const getOsImage = (osType?: string) => {
+  if (osType === "linux") {
+    return instanceLinuxImage;
+  }
+  if (osType === "windows") {
+    return instanceWindowsImage;
+  }
+  return instanceImage;
+};
+export const InstanceImage = styled.div<{ os?: string }>`
   ${ThemeProps.exactSize("48px")}
-  background: url('${instanceImage}') center no-repeat;
+  background: url('${props => getOsImage(props.os)}') center no-repeat;
 `;
 const Label = styled.div<any>`
   flex-grow: 1;
@@ -370,7 +381,7 @@ class WizardInstances extends React.Component<Props, State> {
                 }}
               />
               <InstanceContent>
-                <Image />
+                <InstanceImage os={instance.os_type} />
                 <Label>
                   <LabelTitle>{instance.name}</LabelTitle>
                   {instanceId !== instance.name ? (

src/components/modules/WizardModule/WizardInstances/images/instance-windows.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg    xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   id="svg1463"
+   version="1.1"
+   viewBox="0 0 48 48"
+   height="48px"
+   width="48px">
+  <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+  <desc
+     id="desc1453">Created with Sketch.</desc>
+  <g
+     fill-rule="evenodd"
+     fill="none"
+     stroke-width="1"
+     stroke="none"
+     id="Symbols">
+    <g
+       id="Icon/instance">
+      <rect
+         rx="8"
+         height="48"
+         width="48"
+         y="0"
+         x="0"
+         fill="#D8DBE2"
+         id="Rectangle-Copy-2" />
+    </g>
+  </g>
+  <g
+     transform="matrix(0.30191544,0,0,0.30191544,10.821391,10.776104)"
+     id="g2039"
+     style="fill:#0044ca;fill-opacity:1">
+    <path
+       style="fill:#0044ca;fill-opacity:1"
+       id="path843"
+       d="M 0,12.5 35.7,7.6 V 42.1 H 0 M 40,6.9 87.3,0 V 41.8 H 40 M 0,45.74 h 35.7 v 34.6 L 0,75.34 M 40,46.2 H 87.3 V 87.6 L 40,80.9" />
+  </g>
+</svg>

src/components/modules/WizardModule/WizardScripts/WizardScripts.tsx

@@ -18,7 +18,7 @@ import styled, { css } from "styled-components";
 
 import InfoIcon from "@src/components/ui/InfoIcon";
 import { Close as InputClose } from "@src/components/ui/TextInput";
-import { Image as InstanceImage } from "@src/components/modules/WizardModule/WizardInstances";
+import { InstanceImage } from "@src/components/modules/WizardModule/WizardInstances";
 import StatusIcon from "@src/components/ui/StatusComponents/StatusIcon";
 
 import { ThemePalette, ThemeProps } from "@src/components/Theme";