preview env deployment card standardized

dashboard/src/assets/arrow-down.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 1.5L8 8.5L1 1.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

dashboard/src/components/MultiSelectFilter.tsx

@@ -0,0 +1,205 @@
+import React, { useEffect, useState, useRef } from "react";
+
+import styled from "styled-components";
+import arrow from "assets/arrow-down.svg";
+
+import CheckboxList from "components/form-components/CheckboxList";
+
+type Props = {
+  name: string;
+  icon?: any;
+  options: { value: any, label: string }[];
+  selected: any[];
+  setSelected: any;
+};
+
+export const MultiSelectFilter: React.FC<Props> = (props) => {
+  const [expanded, setExpanded] = useState(false);
+
+  const wrapperRef = useRef<HTMLInputElement>(null);
+  const parentRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside.bind(this));
+    return () => document.removeEventListener("mousedown", handleClickOutside.bind(this));
+  }, [])
+
+  const handleClickOutside = (event: any) => {
+    if (
+      wrapperRef &&
+      wrapperRef.current &&
+      !wrapperRef.current.contains(event.target) &&
+      parentRef &&
+      parentRef.current &&
+      !parentRef.current.contains(event.target)
+    ) {
+      setExpanded(false);
+    }
+  };
+
+  const renderOptions = () => {
+    return props.options.map(
+      (option: { value: any; label: string }, i: number) => {
+        return (
+          <Option
+            key={i}
+            onClick={() => alert("choise")}
+          >
+            {option.label}
+          </Option>
+        );
+      }
+    );
+  }
+
+  const renderDropdown = () => {
+    if (expanded) {
+      return (
+        <DropdownWrapper>
+          <Dropdown
+            ref={wrapperRef}
+          >
+            {
+              props.options.length > 0 ? (
+                <ScrollableWrapper>
+                  <CheckboxList
+                    options={props.options}
+                    selected={props.selected}
+                    setSelected={props.setSelected}
+                  />
+                </ScrollableWrapper>
+              ) : (
+                <Placeholder>No options found</Placeholder>
+              )
+            }
+          </Dropdown>
+        </DropdownWrapper>
+      );
+    }
+  };
+
+  return (
+    <Relative>
+      <StyledMultiSelectFilter 
+        onClick={() => setExpanded(!expanded)}
+        ref={parentRef}
+      >
+        {props.icon && <FilterIcon src={props.icon} />}
+        {props.name}
+        {props.selected.length > 0 && <FilterCount>{props.selected.length}</FilterCount>}
+        <DropdownIcon src={arrow} />
+      </StyledMultiSelectFilter>
+      {renderDropdown()}
+    </Relative>
+  );
+};
+
+const FilterCount = styled.div`
+  padding: 5px;
+  color: #ffffff;
+  background: #ffffff11;
+  margin-left: 7px;
+  font-size: 12px;
+  border-radius: 50px;
+  margin-right: -5px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+`;
+
+const Placeholder = styled.div`
+  color: #aaaabb88;
+  font-size: 12px;
+  width: 100%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const ScrollableWrapper = styled.div`
+  overflow-y: auto;
+  height: 100%;
+  max-height: 350px;
+`;
+
+const Label = styled.div`
+  height: 37px;
+  display: flex;
+  align-items: center;
+  margin-left: 10px;
+  font-size: 13px;
+`;
+
+const Option: any = styled.div`
+  width: 100%;
+  border-top: 1px solid #00000000;
+  height: 37px;
+  font-size: 13px;
+  align-items: center;
+  display: flex;
+  align-items: center;
+  padding-left: 15px;
+  cursor: pointer;
+  padding-right: 10px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  background: ${(props: any) => (props.selected ? "#ffffff11" : "")};
+
+  :hover {
+    background: #ffffff22;
+  }
+`;
+
+const Relative = styled.div`
+  position: relative;
+`;
+
+const DropdownWrapper = styled.div`
+  position: absolute;
+  width: 100%;
+  right: 0;
+  z-index: 1;
+  top: calc(100% + 5px);
+`;
+
+const Dropdown = styled.div`
+  width: 260px;
+  border-radius: 3px;
+  z-index: 999;
+  overflow-y: auto;
+  margin-bottom: 20px;
+  background: #2F3135;
+  border-radius: 5px;
+  border: 1px solid #aaaabb33;
+`;
+
+const DropdownIcon = styled.img`
+  width: 8px;
+  margin-left: 12px;
+`;
+
+const FilterIcon = styled.img`
+  width: 14px;
+  margin-right: 7px;
+`;
+
+const StyledMultiSelectFilter = styled.div`
+  height: 30px;
+  font-size: 13px;
+  position: relative;
+  padding: 10px;
+  background: #26292E;
+  border-radius: 5px;
+  border: 1px solid #aaaabb33;
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
+  cursor: pointer;
+  :hover {
+    background: #ffffff11;
+  }
+`;

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

@@ -155,7 +155,10 @@ export const NamespaceList: React.FunctionComponent = () => {
               {isAuthorized("namespace", "", ["get", "delete"]) &&
                 isAvailableForDeletion(namespace?.metadata?.name) &&
                 namespace?.status?.phase === "Active" && (
-                  <OptionsDropdown.Dropdown expandIcon="more_vert" shrinkIcon="more_vert">
+                  <OptionsDropdown.Dropdown
+                    expandIcon="more_vert"
+                    shrinkIcon="more_vert"
+                  >
                     <OptionsDropdown.Option onClick={() => onDelete(namespace)}>
                       <i className="material-icons-outlined">delete</i>
                       <span>Delete</span>

dashboard/src/main/home/cluster-dashboard/dashboard/incidents/IncidentPage.tsx

@@ -322,8 +322,8 @@ const RefreshButton = styled.button`
 
 const LineBreak = styled.div`
   width: calc(100% - 0px);
-  height: 2px;
-  background: #ffffff20;
+  height: 1px;
+  background: #494b4f;
   margin: 10px 0px 35px;
 `;
 

dashboard/src/main/home/cluster-dashboard/env-groups/ExpandedEnvGroup.tsx

@@ -701,8 +701,8 @@ const TextWrap = styled.div``;
 
 const LineBreak = styled.div`
   width: calc(100% - 0px);
-  height: 2px;
-  background: #ffffff20;
+  height: 1px;
+  background: #494b4f;
   margin: 15px 0px 55px;
 `;
 

dashboard/src/main/home/cluster-dashboard/expanded-chart/ExpandedChart.tsx

@@ -932,8 +932,8 @@ const TextWrap = styled.div``;
 
 const LineBreak = styled.div`
   width: calc(100% - 0px);
-  height: 2px;
-  background: #ffffff20;
+  height: 1px;
+  background: #494b4f;
   margin: 35px 0px;
 `;
 

dashboard/src/main/home/cluster-dashboard/expanded-chart/ExpandedJobChart.tsx

@@ -584,8 +584,8 @@ const CLIModalIcon = styled(CommandLineIcon)`
 
 const LineBreak = styled.div`
   width: calc(100% - 0px);
-  height: 2px;
-  background: #ffffff20;
+  height: 1px;
+  background: #494b4f;
   margin: 15px 0px 55px;
 `;
 

dashboard/src/main/home/cluster-dashboard/preview-environments/deployments/DeploymentCard.tsx

@@ -310,14 +310,14 @@ const PRName = styled.div`
 
 const DeploymentCardWrapper = styled.div`
   display: flex;
-  background: #2b2e3699;
   justify-content: space-between;
-  border-radius: 5px;
   font-size: 13px;
   height: 75px;
   padding: 12px;
   padding-left: 14px;
-  border: 1px solid #ffffff0f;
+  border-radius: 5px;
+  background: #262a30;
+  border: 1px solid #494b4f;
 
   animation: fadeIn 0.5s;
   @keyframes fadeIn {

dashboard/src/main/home/cluster-dashboard/preview-environments/deployments/DeploymentDetail.tsx

@@ -189,8 +189,8 @@ const GHALink = styled(DynamicLink)`
 
 const LineBreak = styled.div`
   width: calc(100% - 0px);
-  height: 2px;
-  background: #ffffff20;
+  height: 1px;
+  background: #494b4f;
   margin-bottom: 20px;
 `;
 

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

@@ -284,8 +284,8 @@ const InfoSection = styled.div`
 
 const LineBreak = styled.div`
   width: calc(100% - 0px);
-  height: 2px;
-  background: #ffffff20;
+  height: 1px;
+  background: #494b4f;
   margin: 10px 0px 20px;
 `;
 

dashboard/src/main/home/infrastructure/InfrastructureList.tsx

@@ -274,8 +274,8 @@ const InfoSection = styled.div`
 
 const LineBreak = styled.div`
   width: calc(100% - 0px);
-  height: 2px;
-  background: #ffffff20;
+  height: 1px;
+  background: #494b4f;
   margin: 10px 0px 35px;
 `;
 

dashboard/src/main/home/infrastructure/components/ProvisionInfra.tsx

@@ -375,8 +375,8 @@ export default ProvisionInfra;
 
 const LineBreak = styled.div`
   width: calc(100% - 0px);
-  height: 2px;
-  background: #ffffff20;
+  height: 1px;
+  background: #494b4f;
   margin: 10px 0px 35px;
 `;
 

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

@@ -114,13 +114,17 @@ const IntegrationCategories: React.FC<Props> = (props) => {
   return (
     <>
       <BreadcrumbRow>
-        <Breadcrumb onClick={() => pushFiltered(props, "/integrations", ["project_id"])}>
+        <Breadcrumb
+          onClick={() => pushFiltered(props, "/integrations", ["project_id"])}
+        >
           <ArrowIcon src={leftArrow} />
           <Wrap>Back</Wrap>
         </Breadcrumb>
       </BreadcrumbRow>
       <Flex>
-        <TitleSection icon={icon} iconWidth="32px">{label}</TitleSection>
+        <TitleSection icon={icon} iconWidth="32px">
+          {label}
+        </TitleSection>
         <Button
           onClick={() => {
             if (props.category === "gitlab") {

dashboard/src/main/home/launch/expanded-template/TemplateInfo.tsx

@@ -216,8 +216,8 @@ const Banner = styled.div`
 
 const LineBreak = styled.div`
   width: calc(100% - 0px);
-  height: 2px;
-  background: #ffffff20;
+  height: 1px;
+  background: #494b4f;
   margin: 30px 0px 13px;
 `;
 

dashboard/src/main/home/launch/launch-flow/SourcePage.tsx

@@ -414,10 +414,9 @@ const Block = styled.div<{ disabled?: boolean }>`
   background: #262a30;
   border: 1px solid #494b4f;
   :hover {
-    
   }
   :hover {
-    border: ${(props) => props.disabled ? "" : "1px solid #7a7b80"};
+    border: ${(props) => (props.disabled ? "" : "1px solid #7a7b80")};
   }
 
   animation: fadeIn 0.3s 0s;