diff --git a/packages/common/components/ColorTheme/styled/button.js b/packages/common/components/ColorTheme/styled/button.js index c31bff810b..672e7e726f 100644 --- a/packages/common/components/ColorTheme/styled/button.js +++ b/packages/common/components/ColorTheme/styled/button.js @@ -3,27 +3,27 @@ import StyledButton from "@docspace/components/button/styled-button"; import Base from "@docspace/components/themes/base"; const activeCss = css` - border-color: ${(props) => props.$currentColorScheme.main.buttons}; + border-color: ${(props) => props.$currentColorScheme.main?.buttons}; background: ${(props) => - props.primary && props.$currentColorScheme.main.buttons}; + props.primary && props.$currentColorScheme.main?.buttons}; opacity: ${(props) => !props.isDisabled && "1"}; filter: ${(props) => props.primary && (props.theme.isBase ? "brightness(90%)" : "brightness(82%)")}; - color: ${(props) => props.$currentColorScheme.text.buttons}; + color: ${(props) => props.$currentColorScheme.text?.buttons}; `; const hoverCss = css` - border-color: ${(props) => props.$currentColorScheme.main.buttons}; + border-color: ${(props) => props.$currentColorScheme.main?.buttons}; background: ${(props) => - props.primary && props.$currentColorScheme.main.buttons}; + props.primary && props.$currentColorScheme.main?.buttons}; opacity: ${(props) => props.primary && !props.isDisabled && "0.85"}; - color: ${(props) => props.primary && props.$currentColorScheme.text.buttons}; + color: ${(props) => props.primary && props.$currentColorScheme.text?.buttons}; `; const getDefaultStyles = ({ @@ -41,16 +41,16 @@ const getDefaultStyles = ({ css` ${primary && css` - background: ${$currentColorScheme.main.buttons}; + background: ${$currentColorScheme.main?.buttons}; opacity: ${isDisabled && "0.6"}; - border: ${`1px solid`} ${$currentColorScheme.main.buttons}; - color: ${$currentColorScheme.text.buttons}; + border: ${`1px solid`} ${$currentColorScheme.main?.buttons}; + color: ${$currentColorScheme.text?.buttons}; .loader { svg { - color: ${$currentColorScheme.text.buttons}; + color: ${$currentColorScheme.text?.buttons}; } - background-color: ${$currentColorScheme.main.buttons}; + background-color: ${$currentColorScheme.main?.buttons}; } `} diff --git a/packages/common/components/ColorTheme/styled/linkForgotPassword.js b/packages/common/components/ColorTheme/styled/linkForgotPassword.js index e2a39f0235..e90e4d38b8 100644 --- a/packages/common/components/ColorTheme/styled/linkForgotPassword.js +++ b/packages/common/components/ColorTheme/styled/linkForgotPassword.js @@ -5,7 +5,7 @@ const getDefaultStyles = ({ $currentColorScheme }) => $currentColorScheme && css` .login-link { - color: ${$currentColorScheme.main.accent}; + color: ${$currentColorScheme?.main?.accent}; } `; diff --git a/packages/common/components/ColorTheme/styled/textarea.js b/packages/common/components/ColorTheme/styled/textarea.js index 475cb7797d..7743a982f7 100644 --- a/packages/common/components/ColorTheme/styled/textarea.js +++ b/packages/common/components/ColorTheme/styled/textarea.js @@ -7,8 +7,8 @@ const getDefaultStyles = ({ $currentColorScheme, hasError, theme }) => css` :focus-within { border-color: ${hasError - ? theme.textArea.focusErrorBorderColor - : $currentColorScheme.main.accent}; + ? theme?.textArea.focusErrorBorderColor + : $currentColorScheme.main?.accent}; } `; diff --git a/packages/common/components/ErrorContainer/ErrorContainer.js b/packages/common/components/ErrorContainer/ErrorContainer.js index 8484b792a2..08bb54b27b 100644 --- a/packages/common/components/ErrorContainer/ErrorContainer.js +++ b/packages/common/components/ErrorContainer/ErrorContainer.js @@ -334,13 +334,22 @@ const ErrorContainer = (props) => { {headerText && ( - + {headerText} )} - {bodyText && {bodyText}} + {bodyText && ( + + {bodyText} + + )} {customizedBodyText && ( - + {customizedBodyText} )} @@ -348,6 +357,7 @@ const ErrorContainer = (props) => { {buttonText && buttonUrl && (