Update styles

src/components/Assets/Assets.stories.tsx

@@ -17,6 +17,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const Default: Story = {
-  args: {}
-};
+export const Default: Story = {};

src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/index.tsx

@@ -7,32 +7,42 @@ export const GetEnvironmentIdInstruction = () => {
   const theme = useTheme();
   const themeKind = getThemeKind(theme);
 
+  const steps = [
+    {
+      id: "how-to-setup-menu-item",
+      description: (
+        <span>
+          Click on the environment options menu in the observability panel and
+          select How to setup
+        </span>
+      ),
+      image: (
+        <img src={`/images/howToSetupEnvironmentMenuItem_${themeKind}.svg`} />
+      )
+    },
+    {
+      id: "copy-environment-id",
+      description: (
+        <span>Copy the Environment ID value from the instructions page</span>
+      ),
+      image: <img src={`/images/environmentId_${themeKind}.svg`} />
+    }
+  ];
+
   return (
     <s.Container>
       <s.TitleSection>
         <span>Follow the steps to get your Environment ID</span>
-        <s.Arrow src={"/images/longArrow.svg"} />
       </s.TitleSection>
-      <s.Section>
-        <SectionNumber>1</SectionNumber>
-        <s.SectionContent>
-          <span>
-            Click on hamburger menu next to your Environment in the
-            Observability panel, and choose <s.Term>How to setup</s.Term>
-          </span>
-          <img src={`/images/howToSetupEnvironmentMenuItem_${themeKind}.svg`} />
-        </s.SectionContent>
-      </s.Section>
-      <s.Section>
-        <s.SectionContent>
-          <SectionNumber>2</SectionNumber>
-          <span>
-            On the <s.Term>How to setup your Digma Environment</s.Term> screen
-            you can find your Environment ID
-          </span>
-          <img src={`/images/environmentId_${themeKind}.svg`} />
-        </s.SectionContent>
-      </s.Section>
+      {steps.map((x, i) => (
+        <s.Section key={x.id}>
+          <SectionNumber>{i + 1}</SectionNumber>
+          <s.SectionContent>
+            {x.description}
+            {x.image}
+          </s.SectionContent>
+        </s.Section>
+      ))}
     </s.Container>
   );
 };

src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/styles.ts

@@ -1,20 +1,15 @@
 import styled from "styled-components";
-import { footnoteRegularTypography } from "../../../../common/App/typographies";
+import {
+  footnoteRegularTypography,
+  subheadingBoldTypography
+} from "../../../../common/App/typographies";
 
 export const Container = styled.div`
   display: flex;
   gap: 16px;
   padding: 16px;
   border-radius: 4px;
-  background: ${({ theme }) => {
-    switch (theme.mode) {
-      case "light":
-        return "#f7f8fa";
-      case "dark":
-      case "dark-jetbrains":
-        return "#2b2d30";
-    }
-  }};
+  background: ${({ theme }) => theme.colors.v3.surface.primary};
 
   & > * {
     flex: 1 1 0;
@@ -28,9 +23,10 @@ export const Section = styled.div`
 `;
 
 export const TitleSection = styled(Section)`
+  ${subheadingBoldTypography}
+
+  color: ${({ theme }) => theme.colors.v3.text.primary};
   padding: 16px 0 24px;
-  font-size: 16px;
-  font-weight: 700;
 `;
 
 export const SectionContent = styled.div`
@@ -40,14 +36,3 @@ export const SectionContent = styled.div`
   flex-direction: column;
   gap: 12px;
 `;
-
-export const Term = styled.span`
-  font-weight: 700;
-`;
-
-export const Arrow = styled.img`
-  display: block;
-  margin-top: auto;
-  width: 25%;
-  min-width: 33px;
-`;

src/components/Documentation/pages/RunDigma/runDigmaWithCommandLine.tsx

@@ -41,7 +41,7 @@ export const runDigmaWithCommandLine: PageContent = {
   </build>
 </profile>`}
             language={"xml"}
-          ></CodeSnippet>
+          />
           <span>
             To collect data with Digma when you run your application from
             command line you should now run:

src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/constants.ts

@@ -1,4 +1,4 @@
 import { typographies } from "../../../../../common/App/typographies";
 
-export const LABEL_HEIGHT = typographies.captionOne.lineHeight;
+export const LABEL_HEIGHT = typographies.captionOne.lineHeight || 14;
 export const DIVIDER = " | ";

src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/AsyncTag/AsyncTag.stories.tsx

@@ -16,6 +16,4 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-  args: {}
-};
+export const Default: Story = {};

src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ProductionAffectionBar/ProductionAffectionBar.stories.tsx

@@ -16,9 +16,7 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const WithoutTicket: Story = {
-  args: {}
-};
+export const WithoutTicket: Story = {};
 
 export const WithTicket: Story = {
   args: {

src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/RecalculateBar/RecalculateBar.stories.tsx

@@ -16,6 +16,4 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-  args: {}
-};
+export const Default: Story = {};

src/components/Insights/styles.ts

@@ -7,7 +7,7 @@ export const Container = styled.div`
   flex-direction: column;
   padding: 8px 0;
   gap: 8px;
-  height: 100%;
+  min-height: 100%;
   box-sizing: border-box;
   background: ${({ theme }) => theme.colors.v3.surface.primary};
   position: relative;

src/components/Main/Authentication/Authentication.stories.tsx

@@ -15,6 +15,4 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-  args: {}
-};
+export const Default: Story = {};

src/components/Main/Authentication/Login/Login.stories.tsx

@@ -16,12 +16,15 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-  args: {}
+export const Default: Story = {};
+
+export const WithSuccessMessage: Story = {
+  args: {
+    successMessage: "Message"
+  }
 };
 
 export const Failed: Story = {
-  args: {},
   play: () => {
     setTimeout(
       () =>

src/components/Main/Authentication/Login/index.tsx

@@ -14,15 +14,16 @@ import {
   Loader,
   SubmitButton
 } from "../styles";
-import { LoginFormValues } from "./types";
+import * as s from "./../styles";
+import { LoginFormValues, LoginProps } from "./types";
 import { useLogin } from "./useLogin";
 
 const formDefaultValues: LoginFormValues = {
   password: "",
   email: ""
 };
 
-export const Login = () => {
+export const Login = ({ successMessage, onLogin }: LoginProps) => {
   const {
     handleSubmit,
     control,
@@ -59,6 +60,7 @@ export const Login = () => {
   }, [clearErrors, watch]);
 
   const onSubmit = (data: LoginFormValues) => {
+    onLogin();
     login({ email: data.email, password: data.password });
     sendUserActionTrackingEvent("login form submitted");
   };
@@ -119,6 +121,7 @@ export const Login = () => {
           form={"loginForm"}
         />
       </ButtonsContainer>
+      {successMessage && <s.SuccessMessage>{successMessage}</s.SuccessMessage>}
       <InfoMessage>Forgot password? Contact the Digma admin</InfoMessage>
       {isLoading && (
         <Loader>

src/components/Main/Authentication/Login/types.ts

@@ -1,3 +1,8 @@
+export interface LoginProps {
+  successMessage?: string;
+  onLogin: () => void;
+}
+
 export interface LoginFormValues {
   password: string;
   email: string;

src/components/Main/Authentication/Registration/Registration.stories.tsx

@@ -16,12 +16,9 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-  args: {}
-};
+export const Default: Story = {};
 
 export const Failed: Story = {
-  args: {},
   play: () => {
     setTimeout(
       () =>

src/components/Main/Authentication/Registration/index.tsx

@@ -9,7 +9,7 @@ import { Spinner } from "../../../common/v3/Spinner";
 import { TextField } from "../../../common/v3/TextField";
 import * as s from "./../styles";
 import { Loader } from "./../styles";
-import { RegisterFormValues } from "./types";
+import { RegisterFormValues, RegistrationProps } from "./types";
 import { useRegistration } from "./useRegistration";
 
 const validateEmail = (email: string): string | boolean => {
@@ -44,7 +44,7 @@ const formDefaultValues: RegisterFormValues = {
   confirmPassword: ""
 };
 
-export const Registration = () => {
+export const Registration = ({ onRegister }: RegistrationProps) => {
   const {
     handleSubmit,
     control,
@@ -85,6 +85,12 @@ export const Registration = () => {
     });
   }, [clearErrors, watch, setResponseStatus]);
 
+  useEffect(() => {
+    if (isSucceed) {
+      onRegister();
+    }
+  }, [isSucceed, onRegister]);
+
   const onSubmit = (data: RegisterFormValues) => {
     register({ email: data.email, password: data.password });
     sendUserActionTrackingEvent("registration form submitted");
@@ -175,9 +181,6 @@ export const Registration = () => {
       </s.Form>
       {errorMessage && <s.ErrorMessage>{errorMessage}</s.ErrorMessage>}
       {responseStatus && <s.ErrorMessage>{responseStatus}</s.ErrorMessage>}
-      {isSucceed && (
-        <s.SuccessMessage>User created successfully!</s.SuccessMessage>
-      )}
       <s.ButtonsContainer>
         <s.SubmitButton
           isDisabled={!isValid || isLoading}

src/components/Main/Authentication/Registration/types.ts

@@ -1,3 +1,7 @@
+export interface RegistrationProps {
+  onRegister: () => void;
+}
+
 export interface RegisterFormValues {
   password: string;
   email: string;

src/components/Main/Authentication/index.tsx

@@ -10,11 +10,26 @@ import * as s from "./styles";
 
 const AuthenticationComponent = () => {
   const [option, setOption] = useState<"login" | "register">("login");
+  const [loginSuccessMessage, setLoginSuccessMessage] = useState<string>();
+
+  const handleRegister = () => {
+    setOption("login");
+    setLoginSuccessMessage("Account registered successfully! Please login");
+  };
+
+  const handleLogin = () => {
+    setLoginSuccessMessage("");
+  };
 
   const handleSlackLinkClick = () => {
     openURLInDefaultBrowser(SLACK_WORKSPACE_URL);
   };
 
+  const handleToggleValueChange = (option: "login" | "register") => {
+    setOption(option);
+    setLoginSuccessMessage("");
+  };
+
   return (
     <s.Container>
       <s.ContentContainer>
@@ -42,9 +57,13 @@ const AuthenticationComponent = () => {
               }
             ]}
             value={option}
-            onValueChange={(option) => setOption(option)}
+            onValueChange={handleToggleValueChange}
           />
-          {option === "login" ? <Login /> : <Registration />}
+          {option === "login" ? (
+            <Login successMessage={loginSuccessMessage} onLogin={handleLogin} />
+          ) : (
+            <Registration onRegister={handleRegister} />
+          )}
         </s.InputForm>
       </s.ContentContainer>
       <s.Footer>

src/components/Main/Authentication/styles.ts

@@ -10,7 +10,7 @@ import { Link } from "../../common/v3/Link";
 
 export const Container = styled.div`
   padding: 10px;
-  height: 100%;
+  min-height: 100%;
   gap: 16px;
   display: flex;
   flex-direction: column;
@@ -100,6 +100,7 @@ export const ErrorMessage = styled(StatusMessage)`
 
 export const SuccessMessage = styled(StatusMessage)`
   color: ${({ theme }) => theme.colors.v3.status.success};
+  text-align: center;
 `;
 
 export const SubmitButton = styled(Button)`

src/components/Navigation/CodeButton/AnimatedCodeButton/AnimatedCodeButton.stories.tsx

@@ -17,6 +17,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const Default: Story = {
-  args: {}
-};
+export const Default: Story = {};

src/components/Navigation/EnvironmentBar/EnvironmentBar.stories.tsx

@@ -27,6 +27,4 @@ export const Default: Story = {
   }
 };
 
-export const Disabled: Story = {
-  args: {}
-};
+export const Disabled: Story = {};

src/components/Navigation/KebabMenu/KebabMenu.stories.tsx

@@ -17,6 +17,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const Default: Story = {
-  args: {}
-};
+export const Default: Story = {};