diff --git a/src/components/InstallationWizard/Step/index.tsx b/src/components/InstallationWizard/Step/index.tsx index 12b674083..9ca1a99a5 100644 --- a/src/components/InstallationWizard/Step/index.tsx +++ b/src/components/InstallationWizard/Step/index.tsx @@ -29,6 +29,12 @@ export const Step = (props: StepProps) => { props.onSkip(); }; + const handleHeaderClick = () => { + if (props.status === "completed") { + props.onGoToStep(props.stepIndex); + } + }; + const isActive = props.status === "active"; return ( @@ -49,6 +55,7 @@ export const Step = (props: StepProps) => { { transitionClassName={NUMBER_TRANSITION_CLASS_NAME} transitionDuration={transitionDuration} > - {props.number} + {props.stepIndex + 1} diff --git a/src/components/InstallationWizard/Step/styles.ts b/src/components/InstallationWizard/Step/styles.ts index 07ad1ab2f..48b34a3a6 100644 --- a/src/components/InstallationWizard/Step/styles.ts +++ b/src/components/InstallationWizard/Step/styles.ts @@ -33,7 +33,7 @@ export const Container = styled.div` transition: height ${transitionDuration}ms ease-out; } `; - }}; + }} height: ${({ status, contentHeight }) => status === "active" @@ -102,6 +102,10 @@ export const Header = styled.div` }}; transition: color ${({ transitionDuration }) => transitionDuration}ms ease-out; + + cursor: ${({ status }) => { + return status === "completed" ? "pointer" : "initial"; + }}; `; export const NumberContainer = styled.div` diff --git a/src/components/InstallationWizard/Step/types.ts b/src/components/InstallationWizard/Step/types.ts index 241de9457..daea9e69f 100644 --- a/src/components/InstallationWizard/Step/types.ts +++ b/src/components/InstallationWizard/Step/types.ts @@ -14,10 +14,11 @@ export interface StepData { export interface StepProps { data: StepData; - number: number; + stepIndex: number; status: StepStatus; transitionDuration?: number; onSkip: () => void; + onGoToStep: (stepIndex: number) => void; } export interface ContainerProps { diff --git a/src/components/InstallationWizard/index.tsx b/src/components/InstallationWizard/index.tsx index 0504fcdcb..2ff521f05 100644 --- a/src/components/InstallationWizard/index.tsx +++ b/src/components/InstallationWizard/index.tsx @@ -151,9 +151,7 @@ export const InstallationWizard = () => { }; const goToNextStep = () => { - if (currentStep < steps.length - 1) { - setCurrentStep(currentStep + 1); - } + setCurrentStep(currentStep + 1); }; const handleSkipStep = () => { @@ -166,6 +164,12 @@ export const InstallationWizard = () => { } }; + const handleGoToStep = (stepIndex: number) => { + if (stepIndex < currentStep) { + setCurrentStep(stepIndex); + } + }; + const handleFinishButtonClick = () => { window.sendMessageToDigma({ action: actions.FINISH @@ -219,8 +223,9 @@ export const InstallationWizard = () => { diff --git a/src/components/InstallationWizard/styles.ts b/src/components/InstallationWizard/styles.ts index f9557f6a4..5db398528 100644 --- a/src/components/InstallationWizard/styles.ts +++ b/src/components/InstallationWizard/styles.ts @@ -95,7 +95,6 @@ export const Footer = styled.div` }}; `; -// postcss-styled-components-disable-next-line export const FooterContent = styled.div<{ transitionClassName: string; transitionDuration: number; @@ -117,7 +116,7 @@ export const FooterContent = styled.div<{ transition: opacity ${transitionDuration}ms ease-out; } `; - }}; + }} `; export const SectionDescription = styled.span` diff --git a/src/components/RecentActivity/RecentActivityTable/styles.ts b/src/components/RecentActivity/RecentActivityTable/styles.ts index a2d6e7c9a..c55d269bb 100644 --- a/src/components/RecentActivity/RecentActivityTable/styles.ts +++ b/src/components/RecentActivity/RecentActivityTable/styles.ts @@ -207,8 +207,10 @@ export const ListSuffix = styled(Suffix)` font-size: 12px; `; +// postcss-styled-components-disable-next-line export const SpanLink = styled(Link)` ${({ theme }) => getCodeFont(theme.codeFont)} + font-size: 12px; line-height: 14px; diff --git a/src/components/common/FloatingIconButton/index.tsx b/src/components/common/FloatingIconButton/index.tsx index ef9232719..777f46995 100644 --- a/src/components/common/FloatingIconButton/index.tsx +++ b/src/components/common/FloatingIconButton/index.tsx @@ -24,7 +24,7 @@ const getIconColor = ( switch (theme.mode) { case "light": - return "#7891D0"; + return "#7891d0"; case "dark": case "dark-jetbrains": return "#b9c2eb";