🚀 added support for avg charts and fixed UI across the board

Author: razvanilin

admin/src/pages/Create/index.js

@@ -196,11 +196,11 @@ function Create() {
 
           {collection.uid && (
             <Box>
-              <Box padding={6}>
+              <Box paddingTop={6} paddingBottom={6}>
                 <Divider />
               </Box>
 
-              <Box paddingTop={2}>
+              <Box>
                 <Typography variant="delta">{'Timestamp settings '}</Typography>
               </Box>
               <Box paddingTop={2}>
@@ -237,13 +237,13 @@ function Create() {
               <Box paddingTop={6}>
                 <Typography variant="delta">{'Select the charts you want to create '}</Typography>
                 <Box>
-                  <Typography>{'(More will be added later) '}</Typography>
+                  <Typography textColor="neutral600">{'(More will be added later) '}</Typography>
                 </Box>
               </Box>
-              <Box paddingTop={2}>
-                <Grid gap={[3, 2, 2 ]}>
+              <Box paddingTop={4}>
+                <Grid gap={[4, 4, 4 ]}>
                   {templateCharts.map((chart) => (
-                    <GridItem col={2} s={4} xs={6} key={chart.tid}>
+                    <GridItem col={3} s={4} xs={6} key={chart.tid}>
                       <Checkbox
                         checked={selectedCharts.indexOf(chart.tid) > -1}
                         onClick={() => _onToggleChart(chart)}
@@ -255,14 +255,14 @@ function Create() {
                 </Grid>
               </Box>
 
-              <Box padding={6}>
+              <Box paddingTop={6} paddingBottom={6}>
                 <Divider />
               </Box>
 
-              <Box paddingTop={6}>
+              <Box>
                 <Typography variant="delta">{'Choose a dashboard where to place the charts '}</Typography>
                 <Box>
-                  <Typography>{'Or leave empty to create a new dashboard '}</Typography>
+                  <Typography textColor="neutral600">{'Or leave empty to create a new dashboard '}</Typography>
                 </Box>
               </Box>
               <Box paddingTop={2}>

admin/src/pages/Dashboard/index.js

@@ -178,7 +178,7 @@ function Dashboard() {
         )}
 
         {!pageLoading && store.defaultProject && user.id && projects.length > 0 && (
-          <Box padding={4}>
+          <Box>
             <Combobox
               label="Select a Chartbrew dashboard"
               placeholder="Select a dashboard"
@@ -239,11 +239,11 @@ function Dashboard() {
                     hasRadius
                     background="neutral0"
                     shadow="tableShadow"
-                    col={(12 - (12 / chart.chartSize)) || 3}
+                    col={(12 - (12 / chart.chartSize)) || 4}
                     s={12}
                     style={{ height: 320 }}
                   >
-                    <Typography>{chart.name}</Typography>
+                    <Typography variant="delta">{chart.name}</Typography>
                     {chart.chartData && chart.type === 'line' && (
                       <LineChart chart={chart} />
                     )}
@@ -264,6 +264,9 @@ function Dashboard() {
                     {chart.type === 'polar' && (
                       <PolarChart chart={chart} />
                     )}
+                    {chart.type === 'avg' && (
+                      <LineChart chart={chart} />
+                    )}
                   </GridItem>
                 ))}
               </Grid>