Merge pull request #351 from openstax/details-drawer-error-use-mantine

Replace OffCanvas with drawer, Update study details layout
openstax · Feb 21, 2024 · 552fa4e · 552fa4e
2 parents bb32b28 + e515086
commit 552fa4e
Show file tree

Hide file tree

Showing 5 changed files with 158 additions and 216 deletions.
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
@@ -9,11 +9,8 @@ export * from './ui-states'
 
 export * from './incorrect-user'
 
-export * from './off-canvas'
-
 export * from './rewards-progress-bar'
 export * from './banners-bar'
-export * from './off-canvas'
 export * from './navbar/navbar-logo-link'
 export * from './navbar/top-navbar'
 export * from './resource-links'

diff --git a/frontend/src/components/off-canvas.tsx b/frontend/src/components/off-canvas.tsx
diff --git a/frontend/src/screens/analysis/researcher-faq.tsx b/frontend/src/screens/analysis/researcher-faq.tsx
@@ -1,28 +1,23 @@
 import { Box, React, styled, useState } from '@common';
-import { Button, Icon, OffCanvas } from '@components';
+import { Button, Icon } from '@components';
 import FAQIcon from '@images/icons/faq.svg'
+import { Drawer } from '@mantine/core';
 
 const FAQButton = styled.img({
     cursor: 'pointer',
     height: 50,
     width: 50,
 })
 
-const StyledOffCanvas = styled(OffCanvas)({
-    '.offcanvas-body': {
-        height: 'auto',
-    },
-})
-
 export const ResearcherFAQ: FC = () => {
     const [show, setShow] = useState(false)
 
     return (
         <div>
             <FAQButton src={FAQIcon} alt='faq-icon' onClick={() => setShow(true)} />
-            <StyledOffCanvas show={show} title='Help' onHide={() => setShow(false)}>
+            <Drawer opened={show} title='Help' onClose={() => setShow(false)} position='right'>
                 <AnalysisBasicsFAQ />
-            </StyledOffCanvas>
+            </Drawer>
         </div>
     )
 }