application stacks restyling

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

@@ -546,8 +546,8 @@ const EnvGroupSettings = ({
           </Helper>
           {!canDelete && (
             <Helper color="#f5cb42">
-              Looks like you still have applications syncedto this env group.
-              Please remove this env group from those applications to delete
+              Applications are still synced to this env group.
+              Navigate to "Linked Applications" and remove this env group from all applications to delete.
             </Helper>
           )}
           <Button

dashboard/src/main/home/cluster-dashboard/stacks/Dashboard.tsx

@@ -54,11 +54,11 @@ const Dashboard = () => {
               options={[
                 {
                   value: "created_at",
-                  label: "Created at",
+                  label: "Created At",
                 },
                 {
                   value: "updated_at",
-                  label: "Last updated",
+                  label: "Last Updated",
                 },
                 {
                   value: "alphabetical",

dashboard/src/main/home/cluster-dashboard/stacks/ExpandedStack/ExpandedStack.tsx

@@ -3,6 +3,7 @@ import Placeholder from "components/Placeholder";
 import TabSelector from "components/TabSelector";
 import TitleSection from "components/TitleSection";
 import React, { useContext, useEffect, useState } from "react";
+import backArrow from "assets/back_arrow.png";
 import { useParams } from "react-router";
 import api from "shared/api";
 import { Context } from "shared/Context";
@@ -26,6 +27,7 @@ import { FullStackRevision, Stack, StackRevision } from "../types";
 import EnvGroups from "./components/EnvGroups";
 import RevisionList from "./_RevisionList";
 import SourceConfig from "./_SourceConfig";
+import { NavLink } from "react-router-dom";
 
 const ExpandedStack = () => {
   const { namespace, stack_id } = useParams<{
@@ -82,10 +84,12 @@ const ExpandedStack = () => {
   return (
     <div>
       <StackTitleWrapper>
+        <BackButton to="/stacks">
+          <BackButtonImg src={backArrow} />
+        </BackButton>
         <TitleSection
           materialIconClass="material-icons-outlined"
           icon={"lan"}
-          capitalize
         >
           {stack.name}
         </TitleSection>
@@ -94,16 +98,22 @@ const ExpandedStack = () => {
           <NamespaceTag.Tag>{stack.namespace}</NamespaceTag.Tag>
         </NamespaceTag.Wrapper>
       </StackTitleWrapper>
-      <RevisionList
-        revisions={stack.revisions}
-        currentRevision={currentRevision}
-        latestRevision={stack.latest_revision}
-        stackId={stack.id}
-        stackNamespace={namespace}
-        onRevisionClick={(revision) => setCurrentRevision(revision)}
-        onRollback={() => getStack()}
-      ></RevisionList>
-      <Br />
+
+      {/* Stack error message */}
+      {currentRevision &&
+        currentRevision?.reason &&
+        currentRevision?.message?.length > 0 ? (
+          <StackErrorMessageStyles.Wrapper>
+            <i className="material-icons">history</i>
+            <StackErrorMessageStyles.Text color="#aaaabb">
+              {currentRevision?.status === "failed" ? "Error: " : ""}
+              {currentRevision?.message}
+            </StackErrorMessageStyles.Text>
+          </StackErrorMessageStyles.Wrapper>
+        ) : null
+      }
+      
+      <Break />
       <InfoWrapper>
         <LastDeployed>
           <Status
@@ -111,31 +121,20 @@ const ExpandedStack = () => {
             message={getStackStatusMessage(stack)}
           />
           <SepDot>•</SepDot>
-          <Text color="#aaaabb">
-            {!stack.latest_revision?.id
-              ? `No version found`
-              : `v${stack.latest_revision.id}`}
-          </Text>
-          <SepDot>•</SepDot>
           Last updated {readableDate(stack.updated_at)}
         </LastDeployed>
       </InfoWrapper>
 
-      {/* Stack error message */}
-      {currentRevision &&
-      currentRevision?.reason &&
-      currentRevision?.message?.length > 0 ? (
-        <StackErrorMessageStyles.Wrapper>
-          <StackErrorMessageStyles.Title color="#b7b7c9">
-            Revision message:
-          </StackErrorMessageStyles.Title>
-          <StackErrorMessageStyles.Text color="#aaaabb">
-            {currentRevision?.status === "failed" ? "Error: " : ""}
-            {currentRevision?.message}
-          </StackErrorMessageStyles.Text>
-        </StackErrorMessageStyles.Wrapper>
-      ) : null}
-
+      <RevisionList
+        revisions={stack.revisions}
+        currentRevision={currentRevision}
+        latestRevision={stack.latest_revision}
+        stackId={stack.id}
+        stackNamespace={namespace}
+        onRevisionClick={(revision) => setCurrentRevision(revision)}
+        onRollback={() => getStack()}
+      ></RevisionList>
+      <Br />
       <TabSelector
         currentTab={currentTab}
         options={[
@@ -148,32 +147,24 @@ const ExpandedStack = () => {
                 {currentRevision.id !== stack.latest_revision.id ? (
                   <ChartListWrapper>
                     <Placeholder>
-                      Not available when previewing versions
+                      Not available when previewing revisions
                     </Placeholder>
                   </ChartListWrapper>
                 ) : (
-                  <>
-                    <SortSelector
-                      setSortType={setSortType}
-                      sortType={sortType}
+                  <ChartListWrapper>
+                    <ChartList
+                      currentCluster={currentCluster}
                       currentView="stacks"
+                      namespace={namespace}
+                      sortType="Alphabetical"
+                      appFilters={
+                        stack?.latest_revision?.resources?.map(
+                          (res) => res.name
+                        ) || []
+                      }
+                      closeChartRedirectUrl={`${window.location.pathname}${window.location.search}`}
                     />
-
-                    <ChartListWrapper>
-                      <ChartList
-                        currentCluster={currentCluster}
-                        currentView="stacks"
-                        namespace={namespace}
-                        sortType="Alphabetical"
-                        appFilters={
-                          stack?.latest_revision?.resources?.map(
-                            (res) => res.name
-                          ) || []
-                        }
-                        closeChartRedirectUrl={`${window.location.pathname}${window.location.search}`}
-                      />
-                    </ChartListWrapper>
-                  </>
+                  </ChartListWrapper>
                 )}
               </>
             ),
@@ -193,7 +184,7 @@ const ExpandedStack = () => {
             ),
           },
           {
-            label: "Env groups",
+            label: "Env Groups",
             value: "env_groups",
             component: (
               <>
@@ -207,16 +198,53 @@ const ExpandedStack = () => {
           setCurrentTab(tab);
         }}
       ></TabSelector>
+      <PaddingBottom />
     </div>
   );
 };
 
 export default ExpandedStack;
 
+const PaddingBottom = styled.div`
+  width: 100%;
+  height: 150px;
+`;
+
+const Break = styled.div`
+  width: 100%;
+  height: 20px;
+`;
+
+const BackButton = styled(NavLink)`
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  display: flex;
+  width: 36px;
+  cursor: pointer;
+  height: 36px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #ffffff55;
+  border-radius: 100px;
+  background: #ffffff11;
+
+  :hover {
+    background: #ffffff22;
+    > img {
+      opacity: 1;
+    }
+  }
+`;
+
+const BackButtonImg = styled.img`
+  width: 16px;
+  opacity: 0.75;
+`;
+
 const ChartListWrapper = styled.div`
   width: 100%;
   margin: auto;
-  margin-top: 20px;
   padding-bottom: 125px;
 `;
 
@@ -228,13 +256,18 @@ const Gap = styled.div`
 
 const StackErrorMessageStyles = {
   Text: styled(Text)`
-    font-size: 14px;
-    margin-bottom: 10px;
+    font-size: 13px;
   `,
   Wrapper: styled.div`
     display: flex;
-    flex-direction: column;
+    align-items: center;
+
     margin-top: 5px;
+    > i {
+      color: #ffffff44;
+      margin-right: 8px;
+      font-size: 20px;
+    }
   `,
   Title: styled(Text)`
     font-size: 16px;
@@ -245,11 +278,12 @@ const StackErrorMessageStyles = {
 const StackTitleWrapper = styled.div`
   width: 100%;
   display: flex;
-  justify-content: space-between;
+  position: relative;
   align-items: center;
 
   // Hotfix to make sure the title section and the namespace tag are aligned
   ${NamespaceTag.Wrapper} {
-    margin-bottom: 15px;
+    margin-left: 17px;
+    margin-bottom: 13px;
   }
 `;

dashboard/src/main/home/cluster-dashboard/stacks/ExpandedStack/_RevisionList.tsx

@@ -143,8 +143,9 @@ const _RevisionList = ({
         >
           <RevisionPreview>
             {currentRevision.id === latestRevision.id
-              ? `Current Revision v${currentRevision.id}`
-              : `Previewing Revision (Not Deployed) v${currentRevision.id}`}
+              ? `Current Revision`
+              : `Previewing Revision (Not Deployed)`}{" "}
+              - <Revision>No. {currentRevision.id}</Revision>
             <i className="material-icons">arrow_drop_down</i>
           </RevisionPreview>
         </RevisionHeader>
@@ -167,6 +168,11 @@ const _RevisionList = ({
 
 export default _RevisionList;
 
+const Revision = styled.div`
+  color: #ffffff;
+  margin-left: 5px;
+`;
+
 const StyledRevisionSection = styled.div`
   display: flex;
   flex-direction: column;

dashboard/src/main/home/cluster-dashboard/stacks/ExpandedStack/_SourceConfig.tsx

@@ -159,12 +159,13 @@ const SourceConfigStyles = {
   `,
   ItemContainer: styled.div`
     background: #ffffff11;
-    border-radius: 15px;
-    padding: 20px 15px;
+    border-radius: 8px;
+    padding: 30px 35px 35px;
   `,
   ItemTitle: styled.div`
     font-size: 16px;
     width: fit-content;
+    font-weight: 500;
   `,
   TooltipItem: styled.div`
     font-size: 14px;

dashboard/src/main/home/cluster-dashboard/stacks/ExpandedStack/components/EnvGroups.tsx

@@ -81,9 +81,9 @@ const EnvGroups = ({ stack }: { stack: Stack }) => {
     <Card.Grid style={{ marginTop: "0px" }}>
       {envGroups.map((envGroup) => {
         return (
-          <Card.Wrapper>
+          <Card.Wrapper variant="unclickable">
             <Card.Title>
-              <Card.Icon src={sliders}></Card.Icon>
+              <Card.SmallerIcon src={sliders}></Card.SmallerIcon>
               {envGroup.name}
             </Card.Title>
 

dashboard/src/main/home/cluster-dashboard/stacks/ExpandedStack/components/Select.tsx

@@ -92,7 +92,7 @@ const Select = <T extends unknown>({
         <SelectStyles.Selector
           className={className}
           onClick={() => setExpanded(!expanded)}
-          expanded={expanded}
+          expanded={!readOnly && expanded}
           readOnly={readOnly}
         >
           <SelectStyles.CurrentValue>
@@ -153,18 +153,15 @@ export const SelectStyles = {
     height: 35px;
     border: 1px solid #ffffff55;
     font-size: 13px;
+    color: ${props => props.readOnly ? "#ffffff44" : ""};
     padding: 5px 10px;
     padding-left: 15px;
     border-radius: 3px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    cursor: ${(props) => (props.readOnly ? "normal" : "pointer")};
+    cursor: ${(props) => (props.readOnly ? "not-allowed" : "pointer")};
     background: ${(props) => {
-      if (props.readOnly) {
-        return "#ffffff55";
-      }
-
       if (props.expanded) {
         return "#ffffff33";
       }
@@ -174,10 +171,8 @@ export const SelectStyles = {
     :hover {
       background: ${(props) => {
         if (props.readOnly) {
-          return "#ffffff55";
-        }
-
-        if (props.expanded) {
+          return "#ffffff11";
+        } else if (props.expanded) {
           return "#ffffff33";
         }
         return "#ffffff22";

dashboard/src/main/home/cluster-dashboard/stacks/launch/NewEnvGroup.tsx

@@ -71,7 +71,7 @@ const NewEnvGroup = () => {
           </BackButton>
         </DynamicLink>
         <Polymer>
-          <Icon src={sliders} />
+          <SliderIcon src={sliders} />
         </Polymer>
         Add a Env Group to Stack
       </TitleSection>
@@ -121,8 +121,27 @@ const NewEnvGroup = () => {
 
 export default NewEnvGroup;
 
+export const SliderIcon = styled.img`
+  width: 25px;
+  margin-right: 16px;
+
+  opacity: 0;
+  animation: floatIn 0.5s 0.2s;
+  animation-fill-mode: forwards;
+  @keyframes floatIn {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0px);
+    }
+  }
+`;
+
 const Subtitle = styled.div`
-  padding: 11px 0px 16px;
+  padding: 11px 0px 0px;
   font-family: "Work Sans", sans-serif;
   font-size: 13px;
   color: #aaaabb;

dashboard/src/main/home/cluster-dashboard/stacks/launch/Overview.tsx

@@ -151,12 +151,12 @@ const Overview = () => {
         />
       </ClusterSection>
 
-      <Heading>Env groups</Heading>
+      <Heading>Env Groups</Heading>
       <Card.Grid>
         {newStack.env_groups.map((envGroup) => (
           <Card.Wrapper variant="unclickable">
             <Card.Title>
-              <Card.Icon src={sliders} />
+              <Card.SmallerIcon src={sliders} />
               {envGroup.name}
             </Card.Title>
             <Card.Actions>
@@ -189,7 +189,7 @@ const Overview = () => {
       </Helper>
       <Card.Grid>
         {newStack.app_resources.map((app) => (
-          <Card.Wrapper>
+          <Card.Wrapper variant="unclickable">
             <Card.Title>
               <Card.Icon src={hardcodedIcons[app.template_name]}></Card.Icon>
               {app.name}

dashboard/src/main/home/cluster-dashboard/stacks/launch/components/styles.tsx

@@ -55,7 +55,11 @@ export const Card = {
     font-size: 14px;
     font-weight: 500;
   `,
-
+  SmallerIcon: styled.img`
+    height: 20px;
+    margin-right: 18px;
+    margin-left: 8px;
+  `,
   Icon: styled.img`
     height: 30px;
     margin-right: 15px;