no slack integration placeholder

dashboard/src/main/home/integrations/IntegrationCategories.tsx

@@ -131,9 +131,6 @@ const IntegrationCategories: React.FC<Props> = (props) => {
           {buttonText}
         </Button>
       </Flex>
-
-      <LineBreak />
-
       {loading ? (
         <Loading />
       ) : props.category == "slack" ? (
@@ -155,65 +152,6 @@ const IntegrationCategories: React.FC<Props> = (props) => {
 
 export default withRouter(IntegrationCategories);
 
-const Label = styled.div`
-  color: #ffffff;
-  font-size: 14px;
-  font-weight: 500;
-`;
-
-const MainRow = styled.div`
-  height: 70px;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 25px;
-  border-radius: 5px;
-  :hover {
-    background: ${(props: { disabled: boolean }) =>
-      props.disabled ? "" : "#ffffff11"};
-    > i {
-      background: ${(props: { disabled: boolean }) =>
-        props.disabled ? "" : "#ffffff11"};
-    }
-  }
-
-  > i {
-    border-radius: 20px;
-    font-size: 18px;
-    padding: 5px;
-    color: #ffffff44;
-    margin-right: -7px;
-    :hover {
-      background: ${(props: { disabled: boolean }) =>
-        props.disabled ? "" : "#ffffff11"};
-    }
-  }
-`;
-
-const Integration = styled.div`
-  margin-left: -2px;
-  display: flex;
-  flex-direction: column;
-  background: #26282f;
-  cursor: ${(props: { disabled: boolean }) =>
-    props.disabled ? "not-allowed" : "pointer"};
-  margin-bottom: 15px;
-  border-radius: 5px;
-  box-shadow: 0 5px 8px 0px #00000033;
-`;
-
-const StyledIntegrationList = styled.div`
-  margin-top: 20px;
-  margin-bottom: 80px;
-`;
-
-const Icon = styled.img`
-  width: 27px;
-  margin-right: 12px;
-  margin-bottom: -1px;
-`;
-
 const Flex = styled.div`
   display: flex;
   align-items: center;
@@ -261,11 +199,4 @@ const Button = styled.div`
     margin-right: 10px;
     justify-content: center;
   }
-`;
-
-const LineBreak = styled.div`
-  width: calc(100% - 0px);
-  height: 2px;
-  background: #ffffff20;
-  margin: 18px 0px 24px;
-`;
+`;

dashboard/src/main/home/integrations/IntegrationList.tsx

@@ -254,7 +254,7 @@ const Icon = styled.img`
 
 const Placeholder = styled.div`
   width: 100%;
-  height: 150px;
+  height: 250px;
   display: flex;
   align-items: center;
   font-size: 13px;

dashboard/src/main/home/integrations/SlackIntegrationList.tsx

@@ -48,44 +48,50 @@ const SlackIntegrationList: React.FC<Props> = (props) => {
         onNo={() => setIsDelete(false)}
       />
       <StyledIntegrationList>
-        {props.slackData.map((inst, idx) => {
-          if (deleted.current.has(idx)) return null;
-          return (
-            <Integration
-              onClick={() => {}}
-              disabled={false}
-              key={`${inst.team_id}-${inst.channel}`}
-            >
-              <MainRow disabled={false}>
-                <Flex>
-                  <Icon src={inst.team_icon_url && inst.team_icon_url} />
-                  <Label>
-                    {inst.team_name || inst.team_id} - {inst.channel}
-                  </Label>
-                </Flex>
-                <MaterialIconTray disabled={false}>
-                  <i
-                    className="material-icons"
-                    onClick={() => {
-                      setDeleteIndex(idx);
-                      setIsDelete(true);
-                    }}
-                  >
-                    delete
-                  </i>
-                  <i
-                    className="material-icons"
-                    onClick={() => {
-                      window.open(inst.configuration_url, "_blank");
-                    }}
-                  >
-                    launch
-                  </i>
-                </MaterialIconTray>
-              </MainRow>
-            </Integration>
-          );
-        })}
+        {
+          props.slackData?.length > 0 ? (
+            props.slackData.map((inst, idx) => {
+              if (deleted.current.has(idx)) return null;
+              return (
+                <Integration
+                  onClick={() => {}}
+                  disabled={false}
+                  key={`${inst.team_id}-${inst.channel}`}
+                >
+                  <MainRow disabled={false}>
+                    <Flex>
+                      <Icon src={inst.team_icon_url && inst.team_icon_url} />
+                      <Label>
+                        {inst.team_name || inst.team_id} - {inst.channel}
+                      </Label>
+                    </Flex>
+                    <MaterialIconTray disabled={false}>
+                      <i
+                        className="material-icons"
+                        onClick={() => {
+                          setDeleteIndex(idx);
+                          setIsDelete(true);
+                        }}
+                      >
+                        delete
+                      </i>
+                      <i
+                        className="material-icons"
+                        onClick={() => {
+                          window.open(inst.configuration_url, "_blank");
+                        }}
+                      >
+                        launch
+                      </i>
+                    </MaterialIconTray>
+                  </MainRow>
+                </Integration>
+              );
+            })
+          ) : (
+            <Placeholder>No Slack integrations set up yet.</Placeholder>
+          )
+        }
       </StyledIntegrationList>
     </>
   );
@@ -93,6 +99,20 @@ const SlackIntegrationList: React.FC<Props> = (props) => {
 
 export default SlackIntegrationList;
 
+const Placeholder = styled.div`
+  width: 100%;
+  height: 250px;
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  font-family: "Work Sans", sans-serif;
+  justify-content: center;
+  margin-top: 30px;
+  background: #ffffff11;
+  color: #ffffff44;
+  border-radius: 5px;
+`;
+
 const Label = styled.div`
   color: #ffffff;
   font-size: 14px;