Active status component

ubclaunchpad · Jul 7, 2018 · 50b33f7 · 50b33f7
1 parent fc4c8ef
commit 50b33f7
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 11 deletions.
diff --git a/daemon/web/components/Status/Status.js → daemon/web/components/Status/ActiveStatus.js b/daemon/web/components/Status/Status.js → daemon/web/components/Status/ActiveStatus.js
@@ -2,13 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './index.sass';
 
-const Status = ({ title }) => (
+const Status = ({ title, status }) => (
   <div className="badge">
-    <div className="badge badge-pill badge-primary">{title}</div>
+    <h3 className="title">{title}</h3>
+    <div className="badge badge-pill-active">{status}</div>
   </div>
 );
 
 Status.propTypes = {
+  status: PropTypes.string,
   title: PropTypes.string,
 };
 

diff --git a/daemon/web/components/Status/index.sass b/daemon/web/components/Status/index.sass
@@ -2,11 +2,14 @@
 
 .badge
     color: $grey
-    display: inline
-    margin-left: 10px;
+    display: inline-block
 
-.badge-pill
-    padding: 5px
-    border-radius: 11.5px
-    background-image: linear-gradient(257deg, $gradient-lightblue, $gradient-green)
-    font-size: 16px
+.title
+    display: inline-block
+    margin: 0 10px 0 40px;
+
+.badge-pill-active
+    padding: 2px 10px
+    border-radius: 100px
+    background-image: linear-gradient(257deg, #BAFFD7, #BAEFE8)
+    font-size: 14px
diff --git a/daemon/web/pages/containers/Containers.js b/daemon/web/pages/containers/Containers.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import TerminalView from '../../components/TerminalView/TerminalView';
 import IconHeader from '../../components/IconHeader/IconHeader';
-import Status from '../../components/Status/Status';
+import Status from '../../components/Status/ActiveStatus';
 
 const mocklogs = [
   'log1asdasdasdasdasdasdasdssdasdasdssdasdasdssdasdasdssdasdasdsa',
@@ -25,7 +25,7 @@ class ContainersWrapper extends React.Component {
       <div>
         <IconHeader  type='containers' title='/inertia-deploy-test_dev_1'/>
         <div className='containerInfo'>
-          <Status title='Active'/>
+          <Status title='Status:' status='Active'/>
         </div>
         <TerminalView logs={mocklogs} />
       </div>