remove status icon from app grid object (#3816)

dashboard/src/components/porter/Toggle.tsx

@@ -1,18 +1,20 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import styled from "styled-components";
 
 type Props = {
   items: any[];
   active: string;
   setActive: (active: string) => void;
-  highlightColor?: string;
+  activeColor?: string;
+  inactiveColor?: string;
 };
 
 const Toggle: React.FC<Props> = ({
   items,
   active,
   setActive,
-  highlightColor,
+  activeColor,
+  inactiveColor,
 }) => {
   return (
     <StyledToggle>
@@ -23,7 +25,8 @@ const Toggle: React.FC<Props> = ({
           onClick={() => {
             setActive(item.value);
           }}
-          highlightColor={highlightColor}
+          activeColor={activeColor}
+          inactiveColor={inactiveColor}
         >
           {item.label}
         </Item>
@@ -43,7 +46,7 @@ const StyledToggle = styled.div`
   align-items: center;
 `;
 
-const Item = styled.div<{ active: boolean; highlightColor?: string }>`
+const Item = styled.div<{ active: boolean; activeColor?: string; inactiveColor?: string }>`
   display: flex;
   align-items: center;
   height: 100%;
@@ -51,5 +54,5 @@ const Item = styled.div<{ active: boolean; highlightColor?: string }>`
   justify-content: center;
   padding: 10px;
   background: ${(props) =>
-    props.active ? props.highlightColor ?? "#ffffff11" : "transparent"};
+    props.active ? props.activeColor ?? "#ffffff11" : props.inactiveColor ?? "transparent"};
 `;

dashboard/src/main/home/app-dashboard/apps/AppGrid.tsx

@@ -160,7 +160,8 @@ const AppGrid: React.FC<AppGridProps> = ({ apps, searchValue, view, sort }) => {
                     <Text size={14}>{proto.name}</Text>
                     <Spacer inline x={2} />
                   </Container>
-                  <StatusIcon src={healthy} />
+                  {/** TODO: make the status icon dynamic */}
+                  {/* <StatusIcon src={healthy} /> */}
                   {renderSource(source)}
                   <Container row>
                     <SmallIcon opacity="0.4" src={time} />
@@ -195,7 +196,8 @@ const AppGrid: React.FC<AppGridProps> = ({ apps, searchValue, view, sort }) => {
                     <Spacer inline width="12px" />
                     <Text size={14}>{proto.name}</Text>
                     <Spacer inline x={1} />
-                    <Icon height="16px" src={healthy} />
+                    {/** TODO: make the status icon dynamic */}
+                    {/* <Icon height="16px" src={healthy} /> */}
                   </Container>
                   <Spacer height="15px" />
                   <Container row>

dashboard/src/main/home/app-dashboard/apps/Apps.tsx

@@ -211,9 +211,10 @@ const Apps: React.FC<Props> = ({ }) => {
                 setSort("letter");
               }
             }}
+            inactiveColor={"#ffffff11"}
+            activeColor={"transparent"}          
           />
           <Spacer inline x={1} />
-
           <Toggle
             items={[
               { label: <ToggleIcon src={grid} />, value: "grid" },
@@ -227,8 +228,9 @@ const Apps: React.FC<Props> = ({ }) => {
                 setView("list");
               }
             }}
+            inactiveColor={"#ffffff11"}
+            activeColor={"transparent"}
           />
-
           <Spacer inline x={2} />
           <PorterLink to="/apps/new/app">
             <Button