expandable section

dashboard/src/components/porter/Select.tsx

@@ -9,7 +9,8 @@ type Props = {
   error?: string;
   children?: React.ReactNode;
   disabled?: boolean;
-  onChange?: (value: string) => void;
+  value?: string;
+  setValue?: (value: string) => void;
 };
 
 const Select: React.FC<Props> = ({
@@ -20,10 +21,9 @@ const Select: React.FC<Props> = ({
   error,
   children,
   disabled,
-  onChange,
+  value,
+  setValue,
 }) => {
-  const [value, setValue] = useState("");
-
   return (
     <Block width={width}>
       {
@@ -36,7 +36,6 @@ const Select: React.FC<Props> = ({
         <StyledSelect
           onChange={e => {
             setValue(e.target.value);
-            onChange && onChange(e.target.value);
           }}
           width={width}
           height={height}
@@ -94,6 +93,8 @@ const SelectWrapper = styled.div`
   position: relative;
   background: #26292e;
   z-index: 0;
+  border-radius: 5px;
+  overflow: hidden;
   > i {
     font-size: 18px;
     position: absolute;
@@ -118,6 +119,7 @@ const StyledSelect = styled.select<{
   border-radius: 5px;
   background: none;
   appearance: none;
+  overflow: hidden;
   z-index: 1;
   border: 1px solid ${props => props.hasError ? "#ff3b62" : "#494b4f"};
   :hover {

dashboard/src/main/home/app-dashboard/new-app-flow/NewAppFlow.tsx

@@ -146,13 +146,13 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
               repository: "https://charts.getporter.dev"
             },
             {
-              name: "web",
+              name: "worker",
               alias: "daft-worker-1",
               version: "0.38",
               repository: "https://charts.getporter.dev"
             },
             {
-              name: "web",
+              name: "worker",
               alias: "daft-worker-2",
               version: "0.38",
               repository: "https://charts.getporter.dev"

dashboard/src/main/home/app-dashboard/new-app-flow/Service.tsx

@@ -4,9 +4,11 @@ import AnimateHeight from "react-animate-height";
 import styled from "styled-components";
 import Text from "components/porter/Text";
 import Spacer from "components/porter/Spacer";
-import web from "assets/web.png";
 import TabSelector from "components/TabSelector";
 
+import web from "assets/web.png";
+import worker from "assets/worker.png";
+import job from "assets/job.png";
 
 interface ServiceProps {
   serviceData: ServiceType;
@@ -63,8 +65,10 @@ const Service: React.FC<ServiceProps> = ({
           <ActionButton >
             <span className="material-icons dropdown">arrow_drop_down</span>
           </ActionButton>
-          {serviceData.name !== DEFAULT_SERVICE.name && serviceData.name.trim().length > 0 ? serviceData.name : "New Service"}
           {serviceData.type === 'web' && <Icon src={web} />}
+          {serviceData.type === 'worker' && <Icon src={worker} />}
+          {serviceData.type === 'job' && <Icon src={job} />}
+          {serviceData.name !== DEFAULT_SERVICE.name && serviceData.name.trim().length > 0 ? serviceData.name : "New Service"}
         </ServiceTitle>
         <ActionButton onClick={(e) => {
           deleteService();
@@ -129,11 +133,6 @@ const ActionButton = styled.button`
   margin-right: 5px;
 `;
 
-const SliderContainer = styled.div`
-    display: flex;
-    align-items: center;
-`;
-
 const ServiceHeader = styled.div`
   flex-direction: row;
   display: flex;
@@ -175,7 +174,6 @@ const ServiceHeader = styled.div`
 const Icon = styled.img`
   height: 18px;
   margin-right: 15px;
-  margin-left: 10px;
 
   animation: fadeIn 0.3s 0s;
   @keyframes fadeIn {

dashboard/src/main/home/app-dashboard/new-app-flow/Services.tsx

@@ -24,6 +24,7 @@ const Services: React.FC<ServicesProps> = ({
 }) => {
   const [showAddServiceModal, setShowAddServiceModal] = useState<boolean>(false);
   const [serviceName, setServiceName] = useState<string>('');
+  const [serviceType, setServiceType] = useState<string>('web');
 
   return (
     <>
@@ -55,9 +56,13 @@ const Services: React.FC<ServicesProps> = ({
           <Spacer y={0.5} />
           <Container row>
             <ServiceIcon>
-              <img src={web} />
+              {serviceType === 'web' && <img src={web} />}
+              {serviceType === 'worker' && <img src={worker} />}
+              {serviceType === 'job' && <img src={job} />}
             </ServiceIcon>
-            <Select 
+            <Select
+              value={serviceType}
+              setValue={setServiceType}
               options={[
                 { label: 'Web', value: 'web' },
                 { label: 'Worker', value: 'worker' },
@@ -76,7 +81,10 @@ const Services: React.FC<ServicesProps> = ({
           />
           <Spacer y={1} />
           <Button onClick={() => {
-             setServices([...services, DEFAULT_SERVICE])
+            setServices([...services, { ...DEFAULT_SERVICE, name: serviceName, type: serviceType }]);
+            setShowAddServiceModal(false);
+            setServiceName('');
+            setServiceType('web');
           }}>
             <I className="material-icons">add</I> Add service
           </Button>
@@ -90,11 +98,27 @@ export default Services
 
 const ServiceIcon = styled.div`
   border: 1px solid #494b4f;
-  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 35px;
+  width: 35px;
+  margin-right: 10px;
+  overflow: hidden;
+  border-radius: 5px;
   > img {
-    height: 20px;
-    margin-right: 15px;
-    padding-left: 10px;
+    height: 18px;
+    animation: floatIn 0.5s 0s;
+    @keyframes floatIn {
+      from {
+        opacity: 0;
+        transform: translateY(7px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0px);
+      }
+    }
   }
 `;