add template view

src/views/App.js

 import React, { useState } from "react";
 import React, { useState } from "react";
-import { Grommet, Box, ResponsiveContext } from "grommet";
+import { Grommet, Box, ResponsiveContext, Grid } from "grommet";
 import theme from "../style/Theme";
 import theme from "../style/Theme";
 import PageHeader from "./PageHeader";
 import PageHeader from "./PageHeader";
 import SideMenu from "./SideMenu";
 import SideMenu from "./SideMenu";
@@ -23,10 +23,23 @@ function App() {
                 showSideBar={showSideBar}
                 showSideBar={showSideBar}
                 setShowSideBar={setShowSideBar}
                 setShowSideBar={setShowSideBar}
               />
               />
-              <Box flex justify="center" direction="row" margin="small">
-                <InstanceView />
-                <TemplateView />
-              </Box>
+              <Grid
+                areas={[
+                  { name: "instances", start: [0, 0], end: [0, 0] },
+                  { name: "templates", start: [1, 0], end: [1, 0] }
+                ]}
+                columns={["flex", "flex"]}
+                rows={["flex"]}
+                gap="small"
+                margin="small"
+              >
+                <Box gridArea="instances">
+                  <InstanceView size={size} />
+                </Box>
+                <Box gridArea="templates">
+                  <TemplateView size={size} />
+                </Box>
+              </Grid>
             </Box>
             </Box>
           </Box>
           </Box>
         )}
         )}

src/views/InstanceView.js

@@ -18,7 +18,7 @@ const InstanceView = () => {
 
 
   return (
   return (
     <LoadingWrapper loading={isLoading}>
     <LoadingWrapper loading={isLoading}>
-      <Box direction="column" margin="small" justify="evenly" align="center">
+      <Box margin="small" justify="evenly" align="center">
         <Heading margin="small">Virtual Machines</Heading>
         <Heading margin="small">Virtual Machines</Heading>
         <Button
         <Button
           icon={<ChapterAdd />}
           icon={<ChapterAdd />}
@@ -28,7 +28,7 @@ const InstanceView = () => {
           color="darkbrand"
           color="darkbrand"
         />
         />
       </Box>
       </Box>
-      <Box flex direction="row" wrap="true" justify="evenly">
+      <Box flex direction="row" wrap justify="evenly">
         {data.map(e => (
         {data.map(e => (
           <Card
           <Card
             background="brand"
             background="brand"

src/views/LoadingWrapper.js

@@ -4,7 +4,9 @@ import { Spinning } from "grommet-controls";
 
 
 const LoadingWrapper = ({ loading, ...props }) => {
 const LoadingWrapper = ({ loading, ...props }) => {
   return loading ? (
   return loading ? (
-    <Spinning kind="three-bounce" color="brand" size="large" />
+    <Box margin="small" justify="center" align="center" flex>
+      <Spinning kind="three-bounce" color="brand" size="large" />
+    </Box>
   ) : (
   ) : (
     <Box {...props} />
     <Box {...props} />
   );
   );

src/views/TemplateView.js

@@ -37,7 +37,7 @@ const TemplateView = () => {
 
 
   return (
   return (
     <LoadingWrapper loading={isLoading}>
     <LoadingWrapper loading={isLoading}>
-      <Box direction="column" margin="small" justify="evenly" align="center">
+      <Box margin="small" justify="evenly" align="center">
         <Heading margin="small">Templates</Heading>
         <Heading margin="small">Templates</Heading>
         <Button
         <Button
           icon={<ChapterAdd />}
           icon={<ChapterAdd />}
@@ -47,24 +47,20 @@ const TemplateView = () => {
           color="darkbrand"
           color="darkbrand"
         />
         />
       </Box>
       </Box>
-      <Box direction="row" wrap justify="evenly">
+      <Box flex direction="row" wrap justify="evenly">
         {mockData.map(e => (
         {mockData.map(e => (
           <Box margin="small">
           <Box margin="small">
-            <Stack>
+            <Stack anchor="bottom-left">
               {e.os === "windows" ? (
               {e.os === "windows" ? (
-                <Image
-                  src={WindowsImage}
-                  fit="contain"
-                  style={{ height: "250px" }}
-                />
+                <Box>
+                  <Image src={WindowsImage} style={{ height: "250px" }} />
+                </Box>
               ) : (
               ) : (
-                <Image
-                  src={UbuntuImage}
-                  fit="contain"
-                  style={{ height: "250px" }}
-                />
+                <Box>
+                  <Image src={UbuntuImage} style={{ height: "250px" }} />
+                </Box>
               )}
               )}
-              <Box background="#666666CC">
+              <Box background="#666666CC" style={{ width: "250px" }}>
                 <Text margin="small">{e.name}</Text>
                 <Text margin="small">{e.name}</Text>
               </Box>
               </Box>
             </Stack>
             </Stack>