nowrapper expandable section

dashboard/src/components/ProvisionerFlow.tsx

@@ -70,47 +70,48 @@ const ProvisionerFlow: React.FC<Props> = ({
             setShowCostConfirmModal(false);
           }}>
             <Text size={16} weight={500}>
-              AWS base cost consent
+              Base AWS cost consent
             </Text>
             <Spacer height="15px" />
             <Text color="helper">
-              Porter will create resources in your existing AWS account for hosting your applications. You will be separately charged by AWS and can use your cloud credits.
-            </Text>
-            <Spacer y={1} />
-            <Text color="helper">
-              AWS base cost before cloud credits:
+              Porter will create resources in your existing AWS account for hosting applications. You will be separately charged by AWS and can use your cloud credits. Base AWS cost:
             </Text>
             <Spacer y={1} />
             <ExpandableSection
-              background="#ffffff11"
+              noWrapper
+              expandText="[+] Show details"
+              collapseText="[-] Hide details"
               Header={
                 <Cost>$315.94 / mo</Cost>
               }
               ExpandedSection={
-                <Dark>
-                  <Text>
-                    • Amazon Elastic Kubernetes Service (EKS) = $73/mo
-                    <Spacer height="15px" />
-                    • Amazon EC2:
-                    <Spacer height="15px" />
-                    <Tab />+ System workloads: t3.medium instance (2) = $60.74/mo
-                    <Spacer height="15px" />
-                    <Tab />+ Monitoring workloads: t3.large instance (1) = $60.74/mo
-                    <Spacer height="15px" />
-                    <Tab />+ Application workloads: t3.xlarge instance (1) = $121.47/mo
-                  </Text>
-                </Dark>
+                <>
+                  <Spacer height="15px" />
+                  <Fieldset background="#1b1d2688">
+                    <Text>
+                      • Amazon Elastic Kubernetes Service (EKS) = $73/mo
+                      <Spacer height="15px" />
+                      • Amazon EC2:
+                      <Spacer height="15px" />
+                      <Tab />+ System workloads: t3.medium instance (2) = $60.74/mo
+                      <Spacer height="15px" />
+                      <Tab />+ Monitoring workloads: t3.large instance (1) = $60.74/mo
+                      <Spacer height="15px" />
+                      <Tab />+ Application workloads: t3.xlarge instance (1) = $121.47/mo
+                    </Text>
+                  </Fieldset>
+                </>
               }
             />
             <Spacer y={1} />
             <Text color="helper">
-              Separate from the AWS cost, Porter charges based on the amount of resources that are currently being used. Porter pricing is as follows, prorated to the minute. 
+              Separate from the AWS cost, Porter charges based on the amount of resources that are being used. Porter pricing is as follows, prorated to the minute:
             </Text>
             <Spacer y={1}/>
             <Cost>$0.019/hr/vCPU + $0.009/hr/GB RAM</Cost>
             <Spacer y={1} />
             <Text color="helper">
-              All AWS resources will be automatically deleted when you delete your Porter project. Please enter the base cost ("315.94") below to proceed:
+              All AWS resources will be automatically deleted when you delete your Porter project. Please enter the AWS base cost ("315.94") below to proceed:
             </Text>
             <Spacer y={1} />
             <Input placeholder="315.94" value={confirmCost} setValue={setConfirmCost} width="100%" height="40px" />
@@ -151,13 +152,6 @@ const ProvisionerFlow: React.FC<Props> = ({
 
 export default ProvisionerFlow;
 
-const Dark = styled.div`
-  position: relative;
-  padding: 25px;
-  background: #1b1d2688;
-  font-size: 13px;
-`;
-
 const Cost = styled.div`
   font-weight: 600;
   font-size: 20px;

dashboard/src/components/porter/ExpandableSection.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import styled from "styled-components";
+import Container from "./Container";
 
 type Props = {
   isInitiallyExpanded?: boolean;
@@ -7,6 +8,10 @@ type Props = {
   ExpandedSection: any;
   color?: any;
   background?: string;
+  noWrapper?: boolean;
+  expandText?: string;
+  collapseText?: string;
+  maxHeight?: string;
 };
 
 const ExpandableSection: React.FC<Props> = ({
@@ -15,6 +20,10 @@ const ExpandableSection: React.FC<Props> = ({
   ExpandedSection,
   color,
   background,
+  noWrapper,
+  expandText,
+  collapseText,
+  maxHeight,
 }) => {
   const [isExpanded, setIsExpanded] = useState(false);
   useEffect(() => {
@@ -25,15 +34,26 @@ const ExpandableSection: React.FC<Props> = ({
     <StyledExpandableSection 
       isExpanded={isExpanded}
       background={background}
+      noWrapper={noWrapper}
+      maxHeight={maxHeight}
     >
-      <HeaderRow 
-        isExpanded={isExpanded}
-        onClick={() => setIsExpanded(!isExpanded)}
-        color={color}
-      >
-        <i className="material-icons">arrow_drop_down</i> 
-        {Header}
-      </HeaderRow>
+      {noWrapper ? (
+        <Container row>
+          {Header}
+          <ExpandButton onClick={() => setIsExpanded(!isExpanded)}>
+            {isExpanded ? collapseText : expandText}
+          </ExpandButton>
+        </Container>
+      ) : (
+        <HeaderRow 
+          isExpanded={isExpanded}
+          onClick={() => setIsExpanded(!isExpanded)}
+          color={color}
+        >
+          {!noWrapper && <i className="material-icons">arrow_drop_down</i>}
+          {Header}
+        </HeaderRow>
+      )}
       {
         isExpanded && (
           ExpandedSection
@@ -45,6 +65,13 @@ const ExpandableSection: React.FC<Props> = ({
 
 export default ExpandableSection;
 
+const ExpandButton = styled.div`
+  margin-left: 15px;
+  color: #aaaabb;
+  cursor: pointer;
+  font-size: 13px;
+`;
+
 const HeaderRow = styled.div<{ 
   isExpanded: boolean;
   color?: string;
@@ -74,16 +101,17 @@ const HeaderRow = styled.div<{
 const StyledExpandableSection = styled.div<{ 
   isExpanded: boolean;
   background?: string;
+  noWrapper?: boolean;
 }>`
   width: 100%;
-  height: ${props => props.isExpanded ? "" : "40px"};
-  max-height: 255px;
+  height: ${props => (props.isExpanded || props.noWrapper) ? "" : "40px"};
+  max-height: 300px;
   overflow: hidden;
   border-radius: 5px;
-  background: ${props => props.background || "#26292e"};
-  border: 1px solid #494b4f;
+  background: ${props => !props.noWrapper && (props.background || "#26292e")};
+  border: ${props => !props.noWrapper && "1px solid #494b4f"};
   :hover {
-    border: 1px solid #7a7b80;
+    border: ${props => !props.noWrapper && "1px solid #7a7b80"};
   }
   animation: ${props => props.isExpanded ? "expandRevisions 0.3s" : ""};
   animation-timing-function: ease-out;
@@ -92,7 +120,7 @@ const StyledExpandableSection = styled.div<{
       max-height: 40px;
     }
     to {
-      max-height: 250px;
+      max-height: 300px;
     }
   }
 `;

dashboard/src/main/home/modals/Modal.tsx

@@ -146,8 +146,9 @@ const StyledModal = styled.div<{
   z-index: 999;
   font-size: 13px;
   border-radius: 10px;
-  background: #202227;
-  border: 1px solid #ffffff55;
+  background: #42444944;
+  backdrop-filter: saturate(150%) blur(10px);
+  border: 1px solid #494b4f;
   overflow: auto;
   color: #ffffff;
   animation: floatInModal 0.5s 0s;