Restyle Installation Wizard

src/components/Assets/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { dispatcher } from "../../dispatcher";
-import { getActions } from "../../utils/getActions";
+import { addPrefix } from "../../utils/addPrefix";
 import { groupBy } from "../../utils/groupBy";
 import { AssetList } from "./AssetList";
 import { AssetTypeList } from "./AssetTypeList";
@@ -20,10 +20,10 @@ const REFRESH_INTERVAL =
 
 const ACTION_PREFIX = "ASSETS";
 
-const actions = getActions(ACTION_PREFIX, {
-  getData: "GET_DATA",
-  setData: "SET_DATA",
-  goToAsset: "GO_TO_ASSET"
+const actions = addPrefix(ACTION_PREFIX, {
+  GET_DATA: "GET_DATA",
+  SET_DATA: "SET_DATA",
+  GO_TO_ASSET: "GO_TO_ASSET"
 });
 
 const groupEntries = (data: AssetsData): GroupedAssetEntries => {
@@ -61,24 +61,24 @@ export const Assets = (props: AssetsProps) => {
 
   useEffect(() => {
     window.sendMessageToDigma({
-      action: actions.getData
+      action: actions.GET_DATA
     });
     const refreshInterval = setInterval(() => {
       window.sendMessageToDigma({
-        action: actions.getData
+        action: actions.GET_DATA
       });
     }, REFRESH_INTERVAL);
 
     const handleAssetsData = (data: unknown) => {
       setData(groupEntries(data as AssetsData));
     };
 
-    dispatcher.addActionListener(actions.setData, handleAssetsData);
+    dispatcher.addActionListener(actions.SET_DATA, handleAssetsData);
 
     return () => {
       clearInterval(refreshInterval);
 
-      dispatcher.removeActionListener(actions.setData, handleAssetsData);
+      dispatcher.removeActionListener(actions.SET_DATA, handleAssetsData);
     };
   }, []);
 
@@ -101,7 +101,7 @@ export const Assets = (props: AssetsProps) => {
 
   const handleAssetLinkClick = (entry: AssetEntry) => {
     window.sendMessageToDigma({
-      action: actions.goToAsset,
+      action: actions.GO_TO_ASSET,
       payload: { entry }
     });
   };

src/components/InstallationWizard/Button/index.tsx

@@ -9,13 +9,12 @@ export const Button = (props: ButtonProps) => {
     }
   };
 
-  const disabled =
-    ["success", "failure"].includes(props.buttonType) || props.disabled;
   return (
     <s.Button
+      className={props.className}
       onClick={handleClick}
-      disabled={disabled}
-      buttonType={props.buttonType}
+      disabled={props.disabled}
+      buttonType={props.buttonType || "primary"}
     >
       <s.ContentContainer>
         {props.icon}

src/components/InstallationWizard/Button/styles.ts

@@ -6,50 +6,47 @@ export const Button = styled.button<ButtonProps>`
   font-size: 12px;
   line-height: 14px;
   display: flex;
-  gap: 8px;
   align-items: center;
   justify-content: center;
-  padding: 6px 8px;
   border-radius: 2px;
   cursor: pointer;
+  color: #b9c2eb;
 
-  color: ${({ buttonType }) => {
-    switch (buttonType) {
-      case "primary":
-        return "#b9c2eb";
-      case "secondary":
-      case "success":
-      case "failure":
-        return "#1e1e1e";
-    }
-  }};
-
-  background: ${({ buttonType }) => {
-    switch (buttonType) {
-      case "primary":
-        return "#000";
-      case "secondary":
-        return "#646363";
-      case "success":
-        return "#c8e5c9";
-      case "failure":
-        return "#e4c6c6";
-    }
-  }};
+  padding: ${({ buttonType }) =>
+    buttonType === "primary" ? "4px" : "2px 4px"};
+
+  background: ${({ buttonType }) =>
+    buttonType === "primary" ? "#3538cd" : "none"};
 
   border: ${({ buttonType }) =>
-    buttonType === "secondary" ? "1px solid #1e1e1e" : "none"};
+    buttonType === "primary" ? "none" : "1px solid #3538cd"};
 
   width: ${({ buttonType }) =>
     buttonType === "primary" ? "100%" : "max-content"};
 
+  &:hover {
+    color: #dadada;
+    border: ${({ buttonType }) =>
+      buttonType === "primary" ? "none" : "1px solid #5154ec"};
+    background: ${({ buttonType }) =>
+      buttonType === "primary" ? "#5154ec" : "none"};
+  }
+
+  &:focus {
+    color: #dadada;
+    background: ${({ buttonType }) =>
+      buttonType === "primary" ? "#5154ec" : "none"};
+  }
+
   &:disabled {
-    ${({ buttonType }) => (buttonType === "primary" ? "opacity: 0.2;" : "")}
+    background: #2e2e2e;
+    color: #49494d;
     cursor: initial;
   }
 `;
 
-export const ContentContainer = styled.span`
+export const ContentContainer = styled.div`
   display: flex;
-  gap: 8px;
+  gap: 2px;
+  align-items: center;
 `;

src/components/InstallationWizard/Button/types.ts

@@ -1,7 +1,10 @@
+import { ReactNode } from "react";
+
 export interface ButtonProps {
-  icon?: JSX.Element;
+  icon?: ReactNode;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
   disabled?: boolean;
   children: React.ReactNode;
-  buttonType: "primary" | "secondary" | "success" | "failure";
+  buttonType?: "primary" | "secondary";
+  className?: string;
 }

src/components/InstallationWizard/CodeSnippet/index.tsx

@@ -12,7 +12,7 @@ export const CodeSnippet = (props: CodeSnippetProps) => {
     <s.Container disabled={props.disabled}>
       <s.Code>{props.text}</s.Code>
       <s.CopyButton onClick={handleCopyButtonClick}>
-        <CopyIcon color={"#dadada"} />
+        <CopyIcon size={10} color={"#b9c2eb"} />
       </s.CopyButton>
     </s.Container>
   );

src/components/InstallationWizard/CodeSnippet/styles.ts

@@ -3,10 +3,9 @@ import { getCodeFont } from "../../common/App/styles";
 import { ContainerProps } from "./types";
 
 export const Container = styled.div<ContainerProps>`
-  background: #0c0b0b;
-  padding: 8px 12px;
-  border-radius: 2px;
-  margin: 8px 0 12px;
+  background: #252526;
+  padding: 4px 4px 4px 8px;
+  border-radius: 4px;
   display: flex;
   gap: 27px;
   align-items: flex-start;
@@ -27,7 +26,16 @@ export const Code = styled.code`
 
 export const CopyButton = styled.button`
   padding: 0;
-  background: transparent;
-  border: none;
   cursor: pointer;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  background: #2e2e2e;
+  border: 1px solid #383838;
+  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 4px;
 `;

src/components/InstallationWizard/FinishStep/index.tsx

@@ -0,0 +1,51 @@
+import { LightBulbIcon } from "../../common/icons/LightBulbIcon";
+import { OpenTelemetryLogoIcon } from "../../common/icons/OpenTelemetryLogoIcon";
+import { PlayIcon } from "../../common/icons/PlayIcon";
+import { SectionDescription, SectionIconContainer } from "../styles";
+import * as s from "./styles";
+
+export const FinishStep = () => (
+  <s.Container>
+    <s.SectionTitle>
+      <SectionIconContainer>
+        <PlayIcon size={16} color={"#fff"} />
+      </SectionIconContainer>
+      Run / Debug your application
+    </s.SectionTitle>
+    <SectionDescription>
+      Run or debug your application and trigger some actions or APIs to collect
+      observability.
+    </SectionDescription>
+    <s.IllustrationContainer>
+      <s.RunOrDebugIllustration
+        src={"/videos/runOrDebug.mp4"}
+        autoPlay={true}
+        loop={true}
+      />
+    </s.IllustrationContainer>
+    <s.SectionTitle>
+      <SectionIconContainer>
+        <OpenTelemetryLogoIcon size={16} color={"#fff"} />
+      </SectionIconContainer>
+      Observability Panel
+    </s.SectionTitle>
+    <SectionDescription>
+      You&apos;ll be able to see the results in the observability panel below,
+      you can open it by clicking on the &quot;Telescope&quot;.
+    </SectionDescription>
+    <s.IllustrationContainer>
+      <s.ObservabilityPanelIllustration
+        src={"/videos/observabilityPanel.mp4"}
+        autoPlay={true}
+        loop={true}
+      />
+    </s.IllustrationContainer>
+    <s.TipContainer>
+      <SectionIconContainer>
+        <LightBulbIcon size={16} color={"#b9c2eb"} />
+      </SectionIconContainer>
+      More and more information about your code will continue to appear as you
+      perform more actions.
+    </s.TipContainer>
+  </s.Container>
+);

src/components/InstallationWizard/FinishStep/styles.ts

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+import * as s from "../styles";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 12px 8px;
+`;
+
+export const SectionTitle = styled(s.SectionTitle)`
+  gap: 8px;
+  margin-bottom: 4px;
+`;
+
+export const IllustrationContainer = styled(s.IllustrationContainer)`
+  margin: 12px 0 12px;
+`;
+
+export const ObservabilityPanelIllustration = styled.video`
+  bottom: 0;
+  position: absolute;
+  width: 100%;
+`;
+
+export const RunOrDebugIllustration = styled.video`
+  width: 206px;
+`;
+
+export const TipContainer = styled.div`
+  display: flex;
+  flex-shrink: 0;
+  gap: 4px;
+  font-weight: 500;
+  font-size: 12px;
+  color: #b9c2eb;
+  margin-top: 8px;
+`;