tiennm99/DocsGPT
1
0 Fork 0
mirror of https://github.com/tiennm99/DocsGPT.git synced 2026-10-20 02:16:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: morphing feel

Browse Source
This commit is contained in:
Alex committed 2024-11-10 14:27:07 +00:00
1 parent e133c29b2c
commit eddafcfdfb
1 file changed
+13 -6
Download Patch File Download Diff File Expand all files Collapse all files
extensions/react-widget/src/components/DocsGPTWidget.tsx
+13 -6
View File
@@ -99,16 +99,23 @@ const WidgetContainer = styled.div<{ modal?: boolean, isOpen?: boolean }>`
transform: scale(1.02); transform: scale(1.02);
} }
100% { 100% {
transform: scale(0.45); transform: scale(0.6);
} }
} }
`; `;
const StyledContainer = styled.div` const StyledContainer = styled.div<{ isOpen: boolean }>`
all: initial; all: initial;
max-height: ${(props) => props.theme.dimensions.maxHeight}; max-height: ${(props) => props.theme.dimensions.maxHeight};
max-width: ${(props) => props.theme.dimensions.maxWidth}; max-width: ${(props) => props.theme.dimensions.maxWidth};
height: ${(props) => props.theme.dimensions.height} ; height: ${(props) => props.theme.dimensions.height};
width: ${(props) => props.theme.dimensions.width} ; width: ${(props) => props.theme.dimensions.width};
${({ isOpen }) =>
!isOpen &&
`
width: 200px;
height: 100px;
border-radius: 50%;
`}
display: flex; display: flex;
position: relative; position: relative;
flex-direction: column; flex-direction: column;
@@ -119,7 +126,7 @@ const StyledContainer = styled.div`
background-color: ${props => props.theme.primary.bg}; background-color: ${props => props.theme.primary.bg};
font-family: sans-serif; font-family: sans-serif;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.1); 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 ; padding: 26px 26px 0px 26px ;
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
max-height: 100vh ; max-height: 100vh ;
@@ -593,7 +600,7 @@ export const DocsGPTWidget = ({
<span>{buttonText}</span> <span>{buttonText}</span>
</FloatingButton> </FloatingButton>
<WidgetContainer ref={widgetRef} className={`${size != "large" && (open ? "open" : "close")}`} modal={size == 'large'}> <WidgetContainer ref={widgetRef} className={`${size != "large" && (open ? "open" : "close")}`} modal={size == 'large'}>
{<StyledContainer> {<StyledContainer isOpen={open}>
<div> <div>
<CancelButton onClick={handleClose}> <CancelButton onClick={handleClose}>
<Cross2Icon width={24} height={24} color={theme === 'light' ? 'black' : 'white'} /> <Cross2Icon width={24} height={24} color={theme === 'light' ? 'black' : 'white'} />