floating tile animation on chart boilerplate

dashboard/src/main/CurrentError.tsx

@@ -89,11 +89,11 @@ const StyledCurrentError = styled.div`
   height: 50px;
   font-size: 13px;
   border-radius: 3px;
-  background: #383842dd;
+  background: #272731cc;
   border: 1px solid #ffffff55;
   display: flex;
   align-items: center;
-  color: #FFDB8C;
+  color: #ffffff;
 
   > i {
     font-size: 18px;

dashboard/src/main/home/Home.tsx

@@ -24,10 +24,15 @@ export default class Home extends Component<PropsType, StateType> {
 
     return (
         <Placeholder>
-          <Bold>Porter 101</Bold><br />
-          1. Go to <A onClick={() => {this.context.setCurrentModal('ClusterConfigModal')}}>+ Add a Cluster</A> to connect to your Kubernetes cluster(s).<br /><br />
-          2. Check out the <A onClick={() => {this.context.setCurrentModal('CreateService')}}>Integrations</A> tab to link your repo, image registry, Slack workspace, and more.<br /><br />
-          4. Sync local changes to Porter for easy <A target='_blank' href='https://docs.getporter.dev/docs/cli-documentation#porter-sync'>remote development</A>.
+          <Bold>Porter - Getting Started</Bold><br /><br />
+          1. Navigate to <A onClick={() => {this.context.setCurrentModal('ClusterConfigModal')}}>+ Add a Cluster</A> and provide a kubeconfig. *<br /><br />
+          2. Choose which contexts you would like to use from the <A onClick={() => {
+            this.context.setCurrentModal('ClusterConfigModal');
+            this.context.setCurrentModalData({ currentTab: 'select' });
+          }}>Select Clusters</A> tab.<br /><br />
+          3. For additional information, please refer to our <A>docs</A>.<br /><br /><br />
+          
+          * Make sure all fields are explicitly declared (e.g., certs and keys).
         </Placeholder>
     );
   }
@@ -71,7 +76,7 @@ const MediumModalStyles = {
     margin: '0 auto',
     height: '575px',
     top: 'calc(50% - 289px)',
-    backgroundColor: '#24272a',
+    backgroundColor: '#202227',
     animation: 'floatInModal 0.5s 0s',
     overflow: 'visible',
   },
@@ -85,7 +90,7 @@ const StyledDashboard = styled.div`
   display: flex;
   flex: 1;
   justify-content: center;
-  background: #24272a;
+  background: #202227;
   position: relative;
 `;
 
@@ -98,15 +103,15 @@ const DashboardWrapper = styled.div`
 const A = styled.a`
   color: #ffffff;
   text-decoration: underline;
-  cursor: pointer;
+  cursor: ${(props: { disabled?: boolean }) => props.disabled ? 'not-allowed' : 'pointer'};
 `;
 
 const Placeholder = styled.div`
   font-family: "Work Sans", sans-serif;
   color: #6f6f6f;
   font-size: 16px;
-  margin-left: 25px;
-  margin-top: 7vh;
+  margin-left: 20px;
+  margin-top: 24vh;
   user-select: none;
 `;
 

dashboard/src/main/home/dashboard/Dashboard.tsx

@@ -4,9 +4,85 @@ import gradient from '../../../assets/gradient.jpg';
 
 import { Context } from '../../../shared/Context';
 import api from '../../../shared/api';
-import { StorageType } from '../../../shared/types';
 
-class Dashboard extends Component {
+import Chart from './chart/Chart';
+
+const dummyCharts = [
+  {
+    name: 'happy-lil-tree',
+    info: {
+      last_deployed: 'Yesterday at 2:00PM',
+      deleted: '',
+      description: 'This is the release description',
+      status: 'deployed'
+    },
+    chart: {
+      metadata: {
+        name: 'mychart',
+        home: 'https://github.com/foo/bar',
+        sources: '',
+        version: '1.10.0',
+        description: 'This is the chart description.',
+        icon: 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png',
+        apiVersion: 'v2'
+      },
+    },
+    version: '9',
+    namespace: 'my-namespace'
+  },
+  {
+    name: 'jolly-tiny-sprout',
+    info: {
+      last_deployed: 'Yesterday at 2:00PM',
+      deleted: '',
+      description: 'This is the release description',
+      status: 'deployed'
+    },
+    chart: {
+      metadata: {
+        name: 'mychart',
+        home: 'https://github.com/foo/bar',
+        sources: '',
+        version: '1.10.0',
+        description: 'This is the chart description.',
+        icon: 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png',
+        apiVersion: 'v2'
+      },
+    },
+    version: '9',
+    namespace: 'my-namespace'
+  },
+  {
+    name: 'ecstatic-puny-seed',
+    info: {
+      last_deployed: 'Yesterday at 2:00PM',
+      deleted: '',
+      description: 'This is the release description',
+      status: 'deployed'
+    },
+    chart: {
+      metadata: {
+        name: 'mychart',
+        home: 'https://github.com/foo/bar',
+        sources: '',
+        version: '1.10.0',
+        description: 'This is the chart description.',
+        icon: 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png',
+        apiVersion: 'v2'
+      },
+    },
+    version: '9',
+    namespace: 'my-namespace'
+  }
+];
+
+type PropsType = {
+};
+
+type StateType = {
+};
+
+export default class Dashboard extends Component<PropsType, StateType> {
 
   componentDidMount() {
     let { userId, setCurrentError, currentCluster } = this.context;
@@ -37,6 +113,14 @@ class Dashboard extends Component {
     });
   }
 
+  renderChartList = () => {
+    return dummyCharts.map((x: any, i: number) => {
+      return (
+        <Chart name={x.name} />
+      )
+    })
+  }
+
   render() {
     let { currentCluster } = this.context;
 
@@ -61,13 +145,14 @@ class Dashboard extends Component {
         </InfoSection>
 
         <LineBreak />
+
+        {this.renderChartList()}
       </div>
     );
   }
 }
 
 Dashboard.contextType = Context;
-export default Dashboard;
 
 const TopRow = styled.div`
   display: flex;
@@ -228,6 +313,7 @@ const Title = styled.div`
 
 const TitleSection = styled.div`
   height: 80px;
+  margin-top: 10px;
   margin-bottom: 10px;
   display: flex;
   flex-direction: row;

dashboard/src/main/home/dashboard/chart/Chart.tsx

@@ -0,0 +1,155 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+type PropsType = {
+  name: string
+};
+
+type StateType = {
+};
+
+export default class Chart extends Component<PropsType, StateType> {
+  state = {
+    grow: false,
+  }
+
+  render() {
+    return ( 
+      <StyledChart
+        onMouseEnter={() => this.setState({ grow: true })}
+        onMouseLeave={() => this.setState({ grow: false })}
+        grow={this.state.grow}
+      >
+        <Title>
+          <i className="material-icons">polymer</i>
+          {this.props.name}
+        </Title>
+        <StatusIndicator>
+          <StatusColor status={'Running'} />
+          Deployed
+        </StatusIndicator>
+      </StyledChart>
+    );
+  }
+}
+
+const StatusIndicator = styled.div`
+  display: flex;
+  flex: 1;
+  width: 90px;
+  height: 20px;
+  font-size: 13px;
+  margin-top: 10px;
+  flex-direction: row;
+  align-items: center;
+  font-family: 'Hind Siliguri', sans-serif;
+  margin-left: 20px;
+  color: #aaaabb;
+  animation: fadeIn 0.5s;
+
+  @keyframes fadeIn {
+    from { opacity: 0 }
+    to { opacity: 1 }
+  }
+`;
+
+const StatusColor = styled.div`
+  margin-bottom: 1px;
+  width: 8px;
+  height: 8px;
+  background: ${(props: { status: string }) => (props.status == 'Running' ? '#4797ff' : props.status == 'Stopped' ? "#ed5f85" : "#f5cb42")};
+  border-radius: 20px;
+  margin-right: 10px;
+`;
+
+const Title = styled.div`
+  position: relative;
+  text-decoration: none;
+  padding: 16px 35px 12px 43px;
+  font-size: 14px;
+  font-family: 'Work Sans', sans-serif;
+  font-weight: 500;
+  color: #ffffff;
+  width: 80%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  animation: fadeIn 0.5s;
+
+  > i {
+    color: #efefef;
+    background: none;
+    font-size: 16px;
+    top: 11px;
+    left: 14px;
+
+    padding: 5px 4px;
+    height: 20px;
+    width: 20px;
+    border-radius: 3px;
+    position: absolute;
+  }
+
+  >img {
+    background: none;
+    top: 12px;
+    left: 13px;
+
+    padding: 5px 4px;
+    width: 24px;
+    position: absolute;
+  }
+`;
+
+const StyledChart = styled.div`
+  background: #23252a;
+  cursor: pointer;
+  margin-bottom: 25px;
+  padding: 1px;
+  padding-top: 3px;
+  padding-bottom: 18px;
+  border-radius: 5px;
+  box-shadow: 0 5px 8px 0px #00000033;
+  position: relative;
+  border: 2px solid #9EB4FF00;
+  width: calc(100% + 2px);
+  height: calc(100% + 2px);
+
+  animation: ${(props: { grow: boolean }) => props.grow ? 'grow' : 'shrink'} 0.12s;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease-out;
+
+  @keyframes grow {
+    from { 
+      width: calc(100% + 2px); 
+      padding-top: 3px;
+      padding-bottom: 18px;
+      margin-left: 0px;
+      box-shadow: 0 5px 8px 0px #00000033;
+    }
+    to {
+      width: calc(100% + 22px);
+      padding-top: 5px;
+      padding-bottom: 22px;
+      margin-left: -10px; 
+      box-shadow: 0 8px 20px 0px #00000030;
+    }
+  }
+
+  @keyframes shrink {
+    from { 
+      width: calc(100% + 22px);
+      padding-top: 5px;
+      padding-bottom: 22px;
+      margin-left: -10px; 
+      box-shadow: 0 8px 20px 0px #00000030;
+    }
+    to {
+      width: calc(100% + 2px); 
+      padding-top: 3px;
+      padding-bottom: 18px;
+      margin-left: 0px; 
+      box-shadow: 0 5px 8px 0px #00000033;
+    }
+  }
+`;

dashboard/src/main/home/modals/ClusterConfigModal.tsx

@@ -43,7 +43,11 @@ export default class ClusterConfigModal extends Component<PropsType, StateType>
   }
 
   componentDidMount() {
-    let { setCurrentError, userId } = this.context;
+    let { setCurrentError, userId, currentModalData } = this.context;
+
+    if (currentModalData && currentModalData.currentTab) {
+      this.setState({ currentTab: 'select' });
+    }
 
     api.getUser('<token>', {}, { id: userId }, (err: any, res: any) => {
       if (err) {
@@ -391,5 +395,5 @@ const StyledClusterConfigModal= styled.div`
   padding: 25px 30px;
   overflow: hidden;
   border-radius: 6px;
-  background: #24272a;
+  background: #202227;
 `;

dashboard/src/main/home/sidebar/Sidebar.tsx

@@ -190,9 +190,10 @@ const SidebarBg = styled.div`
   top: 0;
   left: 0;
   width: 100%;
-  background-color: #333748;
+  background-color: #292c35;
   height: 100%;
   z-index: -1;
+  box-shadow: 8px 0px 8px 0px #00000010;
 `;
 
 const SidebarLabel = styled.div`