Updated styles for cluster dashboard

dashboard/src/components/Table.tsx

@@ -31,7 +31,7 @@ const Table: React.FC<TableProps> = ({
       <StyledTable {...getTableProps()}>
         <StyledTHead>
           {headerGroups.map((headerGroup) => (
-            <StyledTr {...headerGroup.getHeaderGroupProps()}>
+            <StyledTr {...headerGroup.getHeaderGroupProps()} disableHover={true}>
               {headerGroup.headers.map((column) => (
                 <StyledTh {...column.getHeaderProps()}>
                   {column.render("Header")}
@@ -83,7 +83,6 @@ export const StyledTr = styled.tr`
 export const StyledTd = styled.td`
   font-size: 13px;
   color: #ffffff;
-  padding-left: 32px;
 `;
 
 export const StyledTHead = styled.thead`
@@ -95,14 +94,10 @@ export const StyledTh = styled.th`
   font-size: 13px;
   font-weight: 500;
   color: #aaaabb;
-  padding-left: 32px;
 `;
 
 export const StyledTable = styled.table`
   width: 100%;
-  margin-top: 5px;
-  padding-left: 32px;
-  padding-bottom: 20px;
   min-width: 500px;
   border-collapse: collapse;
 `;

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

@@ -31,7 +31,9 @@ export const Dashboard: React.FC = ({ children }) => {
     
     <>
       <TitleSection>
-        <i className="material-icons">device_hub</i>
+        <DashboardIcon>
+          <i className="material-icons">device_hub</i>
+        </DashboardIcon>
         <Title>{context.currentCluster.name}</Title>
       </TitleSection>
 
@@ -41,7 +43,7 @@ export const Dashboard: React.FC = ({ children }) => {
             <i className="material-icons">info</i> Info
           </InfoLabel>
         </TopRow>
-        <Description>Some text</Description>
+        <Description>Cluster dashboard for {context.currentCluster.name}</Description>
       </InfoSection>
 
       <TabSelector
@@ -57,6 +59,20 @@ export const Dashboard: React.FC = ({ children }) => {
   );
 };
 
+const DashboardIcon = styled.div`
+  height: 45px;
+  min-width: 45px;
+  width: 45px;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #676c7c;
+  border: 2px solid #8e94aa;
+  > i {
+    font-size: 22px;
+  }
+`;
 
 const TopRow = styled.div`
   display: flex;
@@ -100,7 +116,6 @@ const Title = styled.div`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  text-transform: capitalize;
 `;
 
 const TitleSection = styled.div`

dashboard/src/main/home/cluster-dashboard/dashboard/NodeList.tsx

@@ -41,7 +41,7 @@ const NodeList: React.FC = () => {
   }, [nodeList]);
 
   useEffect(() => {
-    let { currentCluster, currentProject } = context;
+    const { currentCluster, currentProject } = context;
     api
       .getClusterNodes(
         "<token>",
@@ -62,10 +62,30 @@ const NodeList: React.FC = () => {
   }, [context, setNodeList]);
 
   return (
-    <>
-      <Table columns={columns} data={data} />
-    </>
+    <NodeListWrapper>
+      <StyledChart>
+        <Table columns={columns} data={data} />
+      </StyledChart>
+    </NodeListWrapper>
   );
 };
 
 export default NodeList;
+
+const NodeListWrapper = styled.div`
+  margin-top: 35px;
+`
+
+const StyledChart = styled.div`
+  background: #26282f;
+  padding: 10px;
+  border-radius: 5px;
+  box-shadow: 0 5px 8px 0px #00000033;
+  position: relative;
+  border: 2px solid #9eb4ff00;
+  width: 100%;
+  height: 100%;
+  :not(:last-child) {
+    margin-bottom: 25px;
+  }
+`;