fix status tab styling

dashboard/src/components/porter-form/field-components/ArrayInput.tsx

@@ -15,15 +15,19 @@ const validateArray = (arr: any[]) => {
 };
 
 const ArrayInput: React.FC<ArrayInputField> = (props) => {
-  const { state, variables, setVars, setValidation } =
-    useFormField<ArrayInputFieldState>(props.id, {
-      initVars: {
-        [props.variable]: hasSetValue(props) ? props.value[0] : [],
-      },
-      initValidation: {
-        validated: validateArray(hasSetValue(props) ? props.value[0] : []),
-      },
-    });
+  const {
+    state,
+    variables,
+    setVars,
+    setValidation,
+  } = useFormField<ArrayInputFieldState>(props.id, {
+    initVars: {
+      [props.variable]: hasSetValue(props) ? props.value[0] : [],
+    },
+    initValidation: {
+      validated: validateArray(hasSetValue(props) ? props.value[0] : []),
+    },
+  });
 
   if (state == undefined) return <></>;
 

dashboard/src/main/home/Home.tsx

@@ -388,8 +388,7 @@ class Home extends Component<PropsType, StateType> {
             <Icon src={discordLogo} />
             Join Our Discord
           </DiscordButton>
-          {
-            (this.context?.capabilities?.version === "production" ||
+          {(this.context?.capabilities?.version === "production" ||
             this.context?.capabilities?.version === "staging") &&
             this.state.showWelcomeForm &&
             localStorage.getItem("welcomed") != "true" && (
@@ -402,8 +401,7 @@ class Home extends Component<PropsType, StateType> {
                   currentView={this.props.currentRoute} // For form feedback
                 />
               </>
-            )
-          }
+            )}
         </>
       );
     }

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

@@ -70,8 +70,9 @@ const ExpandedChart: React.FC<Props> = (props) => {
   const [rightTabOptions, setRightTabOptions] = useState<any[]>([]);
   const [leftTabOptions, setLeftTabOptions] = useState<any[]>([]);
   const [saveValuesStatus, setSaveValueStatus] = useState<string>(null);
-  const [forceRefreshRevisions, setForceRefreshRevisions] =
-    useState<boolean>(false);
+  const [forceRefreshRevisions, setForceRefreshRevisions] = useState<boolean>(
+    false
+  );
   const [controllers, setControllers] = useState<
     Record<string, Record<string, any>>
   >({});
@@ -83,11 +84,19 @@ const ExpandedChart: React.FC<Props> = (props) => {
   const [showRepoTooltip, setShowRepoTooltip] = useState(false);
   const [isAuthorized] = useAuth();
 
-  const { newWebsocket, openWebsocket, closeAllWebsockets, closeWebsocket } =
-    useWebsockets();
+  const {
+    newWebsocket,
+    openWebsocket,
+    closeAllWebsockets,
+    closeWebsocket,
+  } = useWebsockets();
 
-  const { currentCluster, currentProject, setCurrentError, setCurrentOverlay } =
-    useContext(Context);
+  const {
+    currentCluster,
+    currentProject,
+    setCurrentError,
+    setCurrentOverlay,
+  } = useContext(Context);
 
   // Retrieve full chart data (includes form and values)
   const getChartData = async (chart: ChartType) => {
@@ -383,7 +392,6 @@ const ExpandedChart: React.FC<Props> = (props) => {
                 </A>{" "}
                 tab of your GitHub repo to view live build logs.
               </TextWrap>
-              <DeployStatus chart={chart} />
             </Placeholder>
           );
         } else {
@@ -863,16 +871,19 @@ const Header = styled.div`
 `;
 
 const Placeholder = styled.div`
-  min-height: 400px;
-  height: 50vh;
-  padding: 30px;
-  padding-bottom: 90px;
-  font-size: 13px;
-  color: #ffffff44;
   width: 100%;
+  min-height: 300px;
+  height: 40vh;
+  display: flex;
   align-items: center;
   justify-content: center;
-  overflow-y: scroll;
+  color: #ffffff44;
+  font-size: 14px;
+
+  > i {
+    font-size: 18px;
+    margin-right: 10px;
+  }
 `;
 
 const Spinner = styled.img`

dashboard/src/main/home/cluster-dashboard/expanded-chart/events/EventCard.tsx

@@ -33,16 +33,14 @@ const EventCard: React.FunctionComponent<CardProps> = ({
         </Icon>
       )}
       {event.status == 2 && (
-        <Icon className="material-icons-outlined">
-          autorenew
-        </Icon>
+        <Icon className="material-icons-outlined">autorenew</Icon>
       )}
       {event.status == 3 && (
         <Icon status="critical" className="material-icons-outlined">
           error
         </Icon>
       )}
-       
+
       <InfoWrapper>
         <EventName>
           {overrideName ? overrideName : event.name}
@@ -82,7 +80,8 @@ const StyledCard = styled.div`
 const Icon = styled.span<{ status?: "critical" | "normal" }>`
   font-size: 22px;
   margin-right: 18px;
-  color: ${({ status }) => status ? (status === "critical" ? "#cc3d42" : "#38a88a" ) : "#efefef"};
+  color: ${({ status }) =>
+    status ? (status === "critical" ? "#cc3d42" : "#38a88a") : "#efefef"};
   animation: ${({ status }) => !status && "rotating 3s linear infinite"};
   @keyframes rotating {
     from {

dashboard/src/main/home/cluster-dashboard/expanded-chart/events/EventDetail.tsx

@@ -13,25 +13,25 @@ const EventDetail: React.FC<Props> = (props) => {
   return (
     <>
       <Flex>
-      <TitleSection handleNavBack={props.resetSelection}>
-        {props.container.name}
-      </TitleSection>
-      <P>
-        <i className="material-icons-outlined">access_time</i>
-        {getReadableDate(props.container.started_at)}
-      </P>
+        <TitleSection handleNavBack={props.resetSelection}>
+          {props.container.name}
+        </TitleSection>
+        <P>
+          <i className="material-icons-outlined">access_time</i>
+          {getReadableDate(props.container.started_at)}
+        </P>
       </Flex>
       <EventsGrid>
         {props.container.events
-        .slice(0)
-        .reverse()
-        .map((event) => {
-          return (
-            <React.Fragment key={event.index}>
-              <EventCard event={event} />
-            </React.Fragment>
-          );
-        })}
+          .slice(0)
+          .reverse()
+          .map((event) => {
+            return (
+              <React.Fragment key={event.index}>
+                <EventCard event={event} />
+              </React.Fragment>
+            );
+          })}
       </EventsGrid>
     </>
   );

dashboard/src/main/home/cluster-dashboard/expanded-chart/events/EventsTab.tsx

@@ -145,22 +145,22 @@ const EventsTab: React.FunctionComponent<Props> = (props) => {
   return (
     <EventsGrid>
       {eventData
-      .slice(0)
-      .reverse()
-      .map((dat, i) => {
-        console.log(dat.started_at);
-        return (
-          <React.Fragment key={dat.started_at}>
-            <EventCard
-              event={dat.events[dat.events.length - 1]}
-              selectEvent={() => {
-                setSelectedEvent(eventData.length - i - 1);
-              }}
-              overrideName={"Deployment"}
-            />
-          </React.Fragment>
-        );
-      })}
+        .slice(0)
+        .reverse()
+        .map((dat, i) => {
+          console.log(dat.started_at);
+          return (
+            <React.Fragment key={dat.started_at}>
+              <EventCard
+                event={dat.events[dat.events.length - 1]}
+                selectEvent={() => {
+                  setSelectedEvent(eventData.length - i - 1);
+                }}
+                overrideName={"Deployment"}
+              />
+            </React.Fragment>
+          );
+        })}
     </EventsGrid>
   );
 };

dashboard/src/shared/api.tsx

@@ -795,12 +795,15 @@ const getCapabilities = baseApi<{}, {}>("GET", () => {
   return `/api/capabilities`;
 });
 
-const getWelcome = baseApi<{
-  email: string,
-  isCompany: boolean,
-  company: string,
-  role: string
-}, {}>("GET", () => {
+const getWelcome = baseApi<
+  {
+    email: string;
+    isCompany: boolean;
+    company: string;
+    role: string;
+  },
+  {}
+>("GET", () => {
   return `/api/welcome`;
 });