From 8df62cd462318ee0eef9dba6d3e62a98be94ad4f Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Wed, 29 Mar 2023 15:46:24 +0200
Subject: [PATCH 1/2] Update Installation Wizard styles

---
 .../InstallationWizard/CodeSnippet/index.tsx  | 19 ++++++
 .../InstallationWizard/CodeSnippet/styles.ts  | 33 +++++++++
 .../InstallationWizard/CodeSnippet/types.ts   |  8 +++
 src/components/InstallationWizard/index.tsx   | 68 ++++++-------------
 src/components/InstallationWizard/styles.ts   | 33 +--------
 src/containers/Assets/index.tsx               |  2 +
 src/containers/Assets/styles.ts               |  7 ++
 src/containers/InstallationWizard/index.tsx   |  2 +
 src/containers/InstallationWizard/styles.ts   |  7 ++
 src/containers/RecentActivity/index.tsx       |  2 +
 src/containers/RecentActivity/styles.ts       | 16 +++++
 11 files changed, 118 insertions(+), 79 deletions(-)
 create mode 100644 src/components/InstallationWizard/CodeSnippet/index.tsx
 create mode 100644 src/components/InstallationWizard/CodeSnippet/styles.ts
 create mode 100644 src/components/InstallationWizard/CodeSnippet/types.ts
 create mode 100644 src/containers/Assets/styles.ts
 create mode 100644 src/containers/InstallationWizard/styles.ts
 create mode 100644 src/containers/RecentActivity/styles.ts

diff --git a/src/components/InstallationWizard/CodeSnippet/index.tsx b/src/components/InstallationWizard/CodeSnippet/index.tsx
new file mode 100644
index 000000000..8a78359d7
--- /dev/null
+++ b/src/components/InstallationWizard/CodeSnippet/index.tsx
@@ -0,0 +1,19 @@
+import copy from "copy-to-clipboard";
+import { CopyIcon } from "../../common/icons/CopyIcon";
+import * as s from "./styles";
+import { CodeSnippetProps } from "./types";
+
+export const CodeSnippet = (props: CodeSnippetProps) => {
+  const handleCopyButtonClick = () => {
+    copy(props.text);
+  };
+
+  return (
+    <s.Container disabled={props.disabled}>
+      <s.Code>{props.text}</s.Code>
+      <s.CopyButton onClick={handleCopyButtonClick}>
+        <CopyIcon color={"#dadada"} />
+      </s.CopyButton>
+    </s.Container>
+  );
+};
diff --git a/src/components/InstallationWizard/CodeSnippet/styles.ts b/src/components/InstallationWizard/CodeSnippet/styles.ts
new file mode 100644
index 000000000..0fd293e1f
--- /dev/null
+++ b/src/components/InstallationWizard/CodeSnippet/styles.ts
@@ -0,0 +1,33 @@
+import styled from "styled-components";
+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;
+  display: flex;
+  gap: 27px;
+  align-items: flex-start;
+  justify-content: space-between;
+
+  ${({ disabled }) => (disabled ? "opacity: 0.5;" : "")}
+`;
+
+export const Code = styled.code`
+  ${({ theme }) => getCodeFont(theme.codeFont)}
+  font-weight: 500;
+  font-size: 9px;
+  line-height: 20px;
+  letter-spacing: -0.1px;
+  color: #dadada;
+  white-space: pre-wrap;
+`;
+
+export const CopyButton = styled.button`
+  padding: 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+`;
diff --git a/src/components/InstallationWizard/CodeSnippet/types.ts b/src/components/InstallationWizard/CodeSnippet/types.ts
new file mode 100644
index 000000000..5234e9976
--- /dev/null
+++ b/src/components/InstallationWizard/CodeSnippet/types.ts
@@ -0,0 +1,8 @@
+export interface CodeSnippetProps {
+  disabled?: boolean;
+  text: string;
+}
+
+export interface ContainerProps {
+  disabled?: boolean;
+}
diff --git a/src/components/InstallationWizard/index.tsx b/src/components/InstallationWizard/index.tsx
index 4c0e7daf6..7851b21d0 100644
--- a/src/components/InstallationWizard/index.tsx
+++ b/src/components/InstallationWizard/index.tsx
@@ -1,14 +1,13 @@
-import copy from "copy-to-clipboard";
 import { useEffect, useState } from "react";
 import { dispatcher } from "../../dispatcher";
 import { getActions } from "../../utils/getActions";
 import { actions as globalActions } from "../common/App";
 import { CheckmarkCircleIcon } from "../common/icons/CheckmarkCircleIcon";
 import { CheckmarkCircleInvertedIcon } from "../common/icons/CheckmarkCircleInvertedIcon";
-import { CopyIcon } from "../common/icons/CopyIcon";
 import { CrossCircleIcon } from "../common/icons/CrossCircleIcon";
 import { Loader } from "../common/Loader";
 import { Button } from "./Button";
+import { CodeSnippet } from "./CodeSnippet";
 import * as s from "./styles";
 import { ConnectionCheckResultData, ConnectionCheckStatus } from "./types";
 
@@ -47,23 +46,15 @@ export const InstallationWizard = () => {
     };
   }, []);
 
-  const handleCopyButtonClick = (text: string) => {
-    copy(text);
-  };
-
-  const startConnectionCheck = () => {
+  const handleDigmaIsInstalledButtonClick = () => {
     setConnectionCheckStatus("pending");
     window.sendMessageToDigma({
       action: actions.checkConnection
     });
   };
 
-  const handleDigmaIsInstalledButtonClick = () => {
-    startConnectionCheck();
-  };
-
   const handleRetryButtonClick = () => {
-    startConnectionCheck();
+    setConnectionCheckStatus(undefined);
   };
 
   const handleInstallDigmaButtonClick = () => {
@@ -157,36 +148,21 @@ export const InstallationWizard = () => {
           installed)
         </s.SectionDescription>
         <s.SectionDescription>Linux & MacOS:</s.SectionDescription>
-        <s.CodeSnippetContainer disabled={Boolean(connectionCheckStatus)}>
-          <s.Code>{getDigmaDockerComposeCommandLinux}</s.Code>
-          <s.CopyButton
-            onClick={() =>
-              handleCopyButtonClick(getDigmaDockerComposeCommandLinux)
-            }
-          >
-            <CopyIcon color={"#dadada"} />
-          </s.CopyButton>
-        </s.CodeSnippetContainer>
+        <CodeSnippet
+          disabled={Boolean(connectionCheckStatus)}
+          text={getDigmaDockerComposeCommandLinux}
+        />
+
         <s.SectionDescription>Windows (PowerShell):</s.SectionDescription>
-        <s.CodeSnippetContainer disabled={Boolean(connectionCheckStatus)}>
-          <s.Code>{getDigmaDockerComposeCommandWindows}</s.Code>
-          <s.CopyButton
-            onClick={() =>
-              handleCopyButtonClick(getDigmaDockerComposeCommandWindows)
-            }
-          >
-            <CopyIcon color={"#dadada"} />
-          </s.CopyButton>
-        </s.CodeSnippetContainer>
+        <CodeSnippet
+          disabled={Boolean(connectionCheckStatus)}
+          text={getDigmaDockerComposeCommandWindows}
+        />
         <s.SectionDescription>Then run:</s.SectionDescription>
-        <s.CodeSnippetContainer disabled={Boolean(connectionCheckStatus)}>
-          <s.Code>{runDockerComposeCommand}</s.Code>
-          <s.CopyButton
-            onClick={() => handleCopyButtonClick(runDockerComposeCommand)}
-          >
-            <CopyIcon color={"#dadada"} />
-          </s.CopyButton>
-        </s.CodeSnippetContainer>
+        <CodeSnippet
+          disabled={Boolean(connectionCheckStatus)}
+          text={runDockerComposeCommand}
+        />
         <s.SectionDescription>
           Prefer to use a helm file? Check out{" "}
           <s.Link
@@ -266,14 +242,10 @@ service:
           Modify your collector configuration file to add Digma’s backend as a
           target. For example:
         </s.SectionDescription>
-        <s.CodeSnippetContainer disabled={isCollectorModified}>
-          <s.Code>{collectorConfigurationSnippet}</s.Code>
-          <s.CopyButton
-            onClick={() => handleCopyButtonClick(collectorConfigurationSnippet)}
-          >
-            <CopyIcon color={"#dadada"} />
-          </s.CopyButton>
-        </s.CodeSnippetContainer>
+        <CodeSnippet
+          disabled={isCollectorModified}
+          text={collectorConfigurationSnippet}
+        />
         {isCollectorModified ? (
           <Button
             buttonType={"success"}
diff --git a/src/components/InstallationWizard/styles.ts b/src/components/InstallationWizard/styles.ts
index 7038159fe..624064447 100644
--- a/src/components/InstallationWizard/styles.ts
+++ b/src/components/InstallationWizard/styles.ts
@@ -1,5 +1,4 @@
 import styled from "styled-components";
-import { getCodeFont } from "../common/App/styles";
 
 export const Container = styled.div`
   background: #5a5a5a;
@@ -27,6 +26,7 @@ export const StepShortTitle = styled.span`
 
 export const Header = styled.div`
   display: flex;
+  text-align: center;
   justify-content: center;
   // TODO: check font
   /* font-family: "Nunito"; */
@@ -99,36 +99,6 @@ export const SectionDescription = styled.span`
   margin-bottom: 6px;
 `;
 
-export const CodeSnippetContainer = styled.div<{ disabled: boolean }>`
-  background: #0c0b0b;
-  padding: 8px 12px;
-  border-radius: 2px;
-  margin: 8px 0 12px;
-  display: flex;
-  gap: 27px;
-  align-items: flex-start;
-  justify-content: space-between;
-
-  ${({ disabled }) => (disabled ? "opacity: 0.5;" : "")}
-`;
-
-export const Code = styled.code`
-  ${({ theme }) => getCodeFont(theme.codeFont)}
-  font-weight: 500;
-  font-size: 9px;
-  line-height: 20px;
-  letter-spacing: -0.1px;
-  color: #dadada;
-  white-space: pre;
-`;
-
-export const CopyButton = styled.button`
-  padding: 0;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-`;
-
 export const LoaderContainer = styled.div`
   margin-top: 23;
   align-self: center;
@@ -143,6 +113,7 @@ export const Footer = styled.div`
   flex-direction: column;
   align-items: center;
   margin-top: auto;
+  padding-top: 8px;
   gap: 8px;
 `;
 
diff --git a/src/containers/Assets/index.tsx b/src/containers/Assets/index.tsx
index efa447b6e..57b8241db 100644
--- a/src/containers/Assets/index.tsx
+++ b/src/containers/Assets/index.tsx
@@ -7,6 +7,7 @@ import {
 import { Assets } from "../../components/Assets";
 import { App } from "../../components/common/App";
 import { dispatcher } from "../../dispatcher";
+import { GlobalStyle } from "./styles";
 
 initializeDigmaMessageListener(dispatcher);
 
@@ -19,6 +20,7 @@ if (rootElement) {
   const root = createRoot(rootElement);
   root.render(
     <App>
+      <GlobalStyle />
       <Assets />
     </App>
   );
diff --git a/src/containers/Assets/styles.ts b/src/containers/Assets/styles.ts
new file mode 100644
index 000000000..e1b4b1587
--- /dev/null
+++ b/src/containers/Assets/styles.ts
@@ -0,0 +1,7 @@
+import { createGlobalStyle } from "styled-components";
+
+export const GlobalStyle = createGlobalStyle`
+  body {
+    background: #3d3f41;
+  }
+`;
diff --git a/src/containers/InstallationWizard/index.tsx b/src/containers/InstallationWizard/index.tsx
index a478fb82e..55be57547 100644
--- a/src/containers/InstallationWizard/index.tsx
+++ b/src/containers/InstallationWizard/index.tsx
@@ -7,6 +7,7 @@ import {
 import { App } from "../../components/common/App";
 import { InstallationWizard } from "../../components/InstallationWizard";
 import { dispatcher } from "../../dispatcher";
+import { GlobalStyle } from "./styles";
 
 initializeDigmaMessageListener(dispatcher);
 
@@ -19,6 +20,7 @@ if (rootElement) {
   const root = createRoot(rootElement);
   root.render(
     <App>
+      <GlobalStyle />
       <InstallationWizard />
     </App>
   );
diff --git a/src/containers/InstallationWizard/styles.ts b/src/containers/InstallationWizard/styles.ts
new file mode 100644
index 000000000..bc605575c
--- /dev/null
+++ b/src/containers/InstallationWizard/styles.ts
@@ -0,0 +1,7 @@
+import { createGlobalStyle } from "styled-components";
+
+export const GlobalStyle = createGlobalStyle`
+  body {
+    background: #5a5a5a;
+  }
+`;
diff --git a/src/containers/RecentActivity/index.tsx b/src/containers/RecentActivity/index.tsx
index fd942492e..7b0ea62a7 100644
--- a/src/containers/RecentActivity/index.tsx
+++ b/src/containers/RecentActivity/index.tsx
@@ -7,6 +7,7 @@ import {
 import { App } from "../../components/common/App";
 import { RecentActivity } from "../../components/RecentActivity";
 import { dispatcher } from "../../dispatcher";
+import { GlobalStyle } from "./styles";
 
 initializeDigmaMessageListener(dispatcher);
 
@@ -19,6 +20,7 @@ if (rootElement) {
   const root = createRoot(rootElement);
   root.render(
     <App>
+      <GlobalStyle />
       <RecentActivity />
     </App>
   );
diff --git a/src/containers/RecentActivity/styles.ts b/src/containers/RecentActivity/styles.ts
new file mode 100644
index 000000000..b0b1433a4
--- /dev/null
+++ b/src/containers/RecentActivity/styles.ts
@@ -0,0 +1,16 @@
+import { createGlobalStyle } from "styled-components";
+
+export const GlobalStyle = createGlobalStyle`
+  body {
+    background: ${({ theme }) => {
+      switch (theme.mode) {
+        case "light":
+          return "#f1f5fa";
+        case "dark":
+          return "#0f0f0f";
+        case "dark-jetbrains":
+          return "#383838";
+      }
+    }};
+  }
+`;

From c9b5ca1d6ba537e768a42b86e3b567772c3ab763 Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Wed, 29 Mar 2023 19:15:26 +0200
Subject: [PATCH 2/2] Update instructions in Installation Wizard

---
 src/components/InstallationWizard/index.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/InstallationWizard/index.tsx b/src/components/InstallationWizard/index.tsx
index 7851b21d0..fb01df715 100644
--- a/src/components/InstallationWizard/index.tsx
+++ b/src/components/InstallationWizard/index.tsx
@@ -239,8 +239,8 @@ service:
       <>
         <s.SectionTitle>Add Digma to your collector:</s.SectionTitle>
         <s.SectionDescription>
-          Modify your collector configuration file to add Digma’s backend as a
-          target. For example:
+          Modify your collector configuration file to add Digma&apos;s backend
+          as a target. For example:
         </s.SectionDescription>
         <CodeSnippet
           disabled={isCollectorModified}
@@ -279,9 +279,14 @@ service:
       <>
         <s.SectionTitle>How to get started?</s.SectionTitle>
         <s.SectionDescription>
-          Press in three dots icon and enable &quot;Observability&quot; toggle
+          To quickly collect data from your application in IntelliJ, expand the
+          Digma side-panel and open the settings menu as seen below.
         </s.SectionDescription>
         <s.Illustration src={"/images/navigation.png"} />
+        <s.SectionDescription>
+          Click the &quot;Observability&quot; toggle button to automatically
+          collect data each time you run or debug via the IDE.
+        </s.SectionDescription>
         <s.Footer>
           <Button buttonType={"primary"} onClick={handleContinueButtonClick}>
             Finish
@@ -308,10 +313,10 @@ service:
     },
     {
       shortTitle: isAlreadyUsingOtel
-        ? "If you’re already using OpenTelemetry… "
+        ? "If you're already using OpenTelemetry…"
         : "Observe your application",
       title: isAlreadyUsingOtel
-        ? "If you’re already using OpenTelemetry… "
+        ? "If you're already using OpenTelemetry…"
         : "Observe your application",
       content: renderObservabilityContent(isAlreadyUsingOtel),
       link: {