From 96a0c60626a5680ccb3654d288cc2e6ba830e8c0 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Fri, 16 Jun 2023 13:05:03 +0100 Subject: [PATCH 1/4] Fix secondary button background --- src/components/Button/Button.tsx | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 41437d6ea494..727197dc1849 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -19,7 +19,7 @@ const StyledButton = styled.button<{ variant: ButtonProps["variant"] }>` padding: 0 0.75rem; background: ${({ theme, variant }) => { if (variant === "primary") return theme.color.secondary; - if (variant === "secondary") return theme.background.app; + if (variant === "secondary") return theme.color.lighter; if (variant === "outline") return "transparent"; return theme.color.secondary; }}; @@ -63,13 +63,13 @@ const StyledButton = styled.button<{ variant: ButtonProps["variant"] }>` } `; -export const Button: FC = forwardRef( - ({ children, onClick, variant = 'primary', ...rest }, ref) => { - return ( - - {children} - - ); - } -); - +export const Button: FC = forwardRef< + HTMLButtonElement, + ButtonProps +>(({ children, onClick, variant = "primary", ...rest }, ref) => { + return ( + + {children} + + ); +}); From 6cc1a935be8477f0d473f84d7fdaefeda3c0c503 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Fri, 16 Jun 2023 13:05:34 +0100 Subject: [PATCH 2/4] Fixed tooltip colour in dark mode --- src/features/GuidedTour/GuidedTour.tsx | 18 ++++++++++-------- src/features/GuidedTour/Tooltip.tsx | 23 +++++++++++++++++------ 2 files changed, 27 insertions(+), 14 deletions(-) diff --git a/src/features/GuidedTour/GuidedTour.tsx b/src/features/GuidedTour/GuidedTour.tsx index 3bd8a87d5e85..1fa1e018b7ab 100644 --- a/src/features/GuidedTour/GuidedTour.tsx +++ b/src/features/GuidedTour/GuidedTour.tsx @@ -8,7 +8,7 @@ import { UPDATE_STORY_ARGS } from "@storybook/core-events"; import { useTheme } from "@storybook/theming"; import { Tooltip, TooltipProps } from "./Tooltip"; -type GuidedTourStep = TooltipProps['step']; +type GuidedTourStep = TooltipProps["step"]; export function GuidedTour({ api, @@ -35,11 +35,13 @@ export function GuidedTour({ { target: "#example-button--warning", title: "Congratulations!", - content: + content: ( <> - You just created your first story. You nailed the basics.
- Continue setting up your project and start writing stories for your components. - , + You just created your first story. You nailed the basics.
+ Continue setting up your project and start writing stories for + your components. + + ), placement: "right", disableOverlay: true, disableBeacon: true, @@ -100,8 +102,8 @@ export function GuidedTour({ title: "Congratulations!", content: ( <> - You've learned how to control your stories interactively. - Now let's explore how to write your first story. + You've learned how to control your stories interactively. Now + let's explore how to write your first story. diff --git a/src/features/GuidedTour/Tooltip.tsx b/src/features/GuidedTour/Tooltip.tsx index ee076044e896..1e4d0fc3ad3b 100644 --- a/src/features/GuidedTour/Tooltip.tsx +++ b/src/features/GuidedTour/Tooltip.tsx @@ -4,7 +4,9 @@ import { TooltipRenderProps } from "react-joyride"; import { Button } from "../../components/Button/Button"; const TooltipBody = styled.div` - background: ${({ theme }) => theme.background.content}; + background: ${({ theme }) => { + return theme.base === "dark" ? "#292A2C" : theme.background.app; + }}; width: 260px; padding: 15px; border-radius: 5px; @@ -37,7 +39,10 @@ const TooltipFooter = styled.div` `; export type TooltipProps = TooltipRenderProps & { - step: TooltipRenderProps["step"] & { hideNextButton?: boolean; onNextButtonClick?: () => void }; + step: TooltipRenderProps["step"] & { + hideNextButton?: boolean; + onNextButtonClick?: () => void; + }; }; export const Tooltip = ({ step, primaryProps, tooltipProps }: TooltipProps) => { @@ -49,10 +54,16 @@ export const Tooltip = ({ step, primaryProps, tooltipProps }: TooltipProps) => { {!step.hideNextButton && ( - + )} From a5dbb094687f88d2141330daafc676c5e2742d98 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 16 Jun 2023 14:37:23 +0200 Subject: [PATCH 3/4] fix tooltip in dark mode --- src/features/GuidedTour/GuidedTour.tsx | 6 ++++-- src/features/GuidedTour/Tooltip.tsx | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/features/GuidedTour/GuidedTour.tsx b/src/features/GuidedTour/GuidedTour.tsx index 3bd8a87d5e85..2c6a4ae81505 100644 --- a/src/features/GuidedTour/GuidedTour.tsx +++ b/src/features/GuidedTour/GuidedTour.tsx @@ -137,7 +137,9 @@ export function GuidedTour({ paddingLeft: 8, paddingTop: 8, filter: - "drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1))", + theme.base === 'light' + ? "drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1))" + : 'drop-shadow(white 0px 0px 0.5px) drop-shadow(white 0px 0px 0.5px)', }, }, }} @@ -152,7 +154,7 @@ export function GuidedTour({ options: { zIndex: 10000, primaryColor: theme.color.secondary, - arrowColor: theme.background.content, + arrowColor: theme.background.app, }, }} /> diff --git a/src/features/GuidedTour/Tooltip.tsx b/src/features/GuidedTour/Tooltip.tsx index ee076044e896..6af95b90d395 100644 --- a/src/features/GuidedTour/Tooltip.tsx +++ b/src/features/GuidedTour/Tooltip.tsx @@ -4,7 +4,7 @@ import { TooltipRenderProps } from "react-joyride"; import { Button } from "../../components/Button/Button"; const TooltipBody = styled.div` - background: ${({ theme }) => theme.background.content}; + background: ${({ theme }) => theme.background.app}; width: 260px; padding: 15px; border-radius: 5px; From cc0f34a70f95691a7a1916c0ccc17968aca6c15e Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Fri, 16 Jun 2023 14:43:12 +0100 Subject: [PATCH 4/4] Fix some details on dark and light mode --- .../SyntaxHighlighter/SyntaxHighlighter.styled.tsx | 5 +++++ src/features/GuidedTour/GuidedTour.tsx | 4 ++-- src/features/GuidedTour/Tooltip.tsx | 2 +- 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/SyntaxHighlighter/SyntaxHighlighter.styled.tsx b/src/components/SyntaxHighlighter/SyntaxHighlighter.styled.tsx index 10ab92de3fb3..02d70c746bd0 100644 --- a/src/components/SyntaxHighlighter/SyntaxHighlighter.styled.tsx +++ b/src/components/SyntaxHighlighter/SyntaxHighlighter.styled.tsx @@ -22,6 +22,11 @@ export const Container = styled.div<{ width: number }>` padding-left: 15px; padding-right: 15px; padding-top: 6px; + border-left: ${({ theme }) => (theme.base === "dark" ? 1 : 0)}px solid #fff2; + border-bottom: ${({ theme }) => (theme.base === "dark" ? 1 : 0)}px solid #fff2; + border-top: ${({ theme }) => (theme.base === "dark" ? 1 : 0)}px solid #fff2; + border-radius: 6px 0 0 6px; + overflow: hidden; && { pre { diff --git a/src/features/GuidedTour/GuidedTour.tsx b/src/features/GuidedTour/GuidedTour.tsx index c9a9e6ba2b20..8c90456c2fdc 100644 --- a/src/features/GuidedTour/GuidedTour.tsx +++ b/src/features/GuidedTour/GuidedTour.tsx @@ -141,7 +141,7 @@ export function GuidedTour({ filter: theme.base === "light" ? "drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1))" - : "drop-shadow(white 0px 0px 0.5px) drop-shadow(white 0px 0px 0.5px)", + : "drop-shadow(#fff5 0px 0px 0.5px) drop-shadow(#fff5 0px 0px 0.5px)", }, }, }} @@ -156,7 +156,7 @@ export function GuidedTour({ options: { zIndex: 10000, primaryColor: theme.color.secondary, - arrowColor: theme.base === "dark" ? "#292A2C" : theme.background.app, + arrowColor: theme.base === "dark" ? "#292A2C" : theme.color.lightest, }, }} /> diff --git a/src/features/GuidedTour/Tooltip.tsx b/src/features/GuidedTour/Tooltip.tsx index 1e4d0fc3ad3b..6b704f9ed4a3 100644 --- a/src/features/GuidedTour/Tooltip.tsx +++ b/src/features/GuidedTour/Tooltip.tsx @@ -5,7 +5,7 @@ import { Button } from "../../components/Button/Button"; const TooltipBody = styled.div` background: ${({ theme }) => { - return theme.base === "dark" ? "#292A2C" : theme.background.app; + return theme.base === "dark" ? "#292A2C" : theme.color.lightest; }}; width: 260px; padding: 15px;