diff --git a/extensions/react-widget/src/components/DocsGPTWidget.tsx b/extensions/react-widget/src/components/DocsGPTWidget.tsx index 6588ccc5..e3cf7224 100644 --- a/extensions/react-widget/src/components/DocsGPTWidget.tsx +++ b/extensions/react-widget/src/components/DocsGPTWidget.tsx @@ -99,16 +99,23 @@ const WidgetContainer = styled.div<{ modal?: boolean, isOpen?: boolean }>` transform: scale(1.02); } 100% { - transform: scale(0.45); + transform: scale(0.6); } } `; -const StyledContainer = styled.div` +const StyledContainer = styled.div<{ isOpen: boolean }>` all: initial; max-height: ${(props) => props.theme.dimensions.maxHeight}; max-width: ${(props) => props.theme.dimensions.maxWidth}; - height: ${(props) => props.theme.dimensions.height} ; - width: ${(props) => props.theme.dimensions.width} ; + height: ${(props) => props.theme.dimensions.height}; + width: ${(props) => props.theme.dimensions.width}; + ${({ isOpen }) => + !isOpen && + ` + width: 200px; + height: 100px; + border-radius: 50%; + `} display: flex; position: relative; flex-direction: column; @@ -119,7 +126,7 @@ const StyledContainer = styled.div` background-color: ${props => props.theme.primary.bg}; font-family: sans-serif; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.1); - transition: visibility 0.3s, opacity 0.3s; + transition: all 0.3s ease-in-out; padding: 26px 26px 0px 26px ; @media only screen and (max-width: 768px) { max-height: 100vh ; @@ -593,7 +600,7 @@ export const DocsGPTWidget = ({ {buttonText} - { + {