export banner

Author: Davy-c

src/cloud/components/FolderPage/index.tsx

@@ -33,6 +33,7 @@ import { ViewsManager } from '../Views'
 import ApplicationPageLoader from '../ApplicationPageLoader'
 import LoaderFolderPage from '../../../design/components/atoms/loaders/LoaderFolderPage'
 import ViewerDisclaimer from '../ViewerDisclaimer'
+import FolderPageExportSection from '../Onboarding/FolderPageExportSection'
 
 const FolderPage = () => {
   const { pageFolder, team, currentUserIsCoreMember } = usePage()
@@ -236,6 +237,7 @@ const FolderPage = () => {
       </ApplicationTopbar>
       <ApplicationContent>
         <FolderPageInviteSection />
+        <FolderPageExportSection />
         <ViewerDisclaimer resource='folder' />
         <ViewsManager
           parent={{ type: 'folder', target: currentFolder }}

src/cloud/components/Modal/contents/ExportModal.tsx

@@ -40,7 +40,7 @@ const ExportModal = () => {
   return (
     <Container className='export__modal'>
       <header className='export__modal__header'>
-        <div className='export__modal__title'>Export your workspace data</div>
+        <div className='export__modal__title'>Export your space data</div>
       </header>
       <p className='export__modal__description'>
         The service for boostnote is planned to be retired at the end of

src/cloud/components/Onboarding/FolderPageExportSection.tsx

@@ -0,0 +1,70 @@
+import React from 'react'
+import ColoredBlock from '../../../design/components/atoms/ColoredBlock'
+import Flexbox from '../../../design/components/atoms/Flexbox'
+import styled from '../../../design/lib/styled'
+import Button from '../../../design/components/atoms/Button'
+import { mdiExport } from '@mdi/js'
+import ExportModal from '../Modal/contents/ExportModal'
+import { useModal } from '../../../design/lib/stores/modal'
+
+const FolderPageExportSection = () => {
+  const { openModal } = useModal()
+
+  return (
+    <FolderPageExportSectionContainer>
+      <ColoredBlock variant='danger' className='export__section__block'>
+        <Flexbox alignItems='flex-start' justifyContent='space-between'>
+          <h5>BoostNote is getting discontinued</h5>
+
+          <Button
+            variant='icon'
+            iconPath={mdiExport}
+            onClick={() => {
+              return openModal(<ExportModal />, {
+                showCloseIcon: true,
+                width: 'large',
+              })
+            }}
+            iconSize={16}
+          >
+            Learn more
+          </Button>
+        </Flexbox>
+        <p>
+          We thank you for your continued support. We regret to inform you that
+          the service will end at the end of September. As such we recommend for
+          users to export their data to make sure nothing is being lost.
+        </p>
+      </ColoredBlock>
+    </FolderPageExportSectionContainer>
+  )
+}
+
+const FolderPageExportSectionContainer = styled.div`
+  margin: ${({ theme }) => theme.sizes.spaces.df}px
+    ${({ theme }) => theme.sizes.spaces.sm}px;
+
+  .export__section__block {
+    input {
+      color: ${({ theme }) => theme.colors.text.subtle};
+    }
+    h5 {
+      color: ${({ theme }) => theme.colors.text.primary};
+      margin: ${({ theme }) => theme.sizes.spaces.sm}px 0;
+      font-size: ${({ theme }) => theme.sizes.fonts.l}px;
+    }
+    p {
+      color: ${({ theme }) => theme.colors.text.primary};
+      font-size: ${({ theme }) => theme.sizes.fonts.df}px;
+      margin-bottom: ${({ theme }) => theme.sizes.spaces.sm}px;
+    }
+    .form__row__items {
+      > * {
+        margin-bottom: ${({ theme }) => theme.sizes.spaces.sm}px;
+      }
+      flex-wrap: wrap;
+    }
+  }
+`
+
+export default FolderPageExportSection

src/cloud/components/WorkspacePage/index.tsx

@@ -18,6 +18,7 @@ import { ViewsManager } from '../Views'
 import ApplicationPageLoader from '../ApplicationPageLoader'
 import LoaderFolderPage from '../../../design/components/atoms/loaders/LoaderFolderPage'
 import ViewerDisclaimer from '../ViewerDisclaimer'
+import FolderPageExportSection from '../Onboarding/FolderPageExportSection'
 
 const WorkspacePage = ({
   workspace: pageWorkspace,
@@ -133,6 +134,7 @@ const WorkspacePage = ({
       <ApplicationTopbar controls={topbarControls} />
       <ApplicationContent>
         <FolderPageInviteSection />
+        <FolderPageExportSection />
         <ViewerDisclaimer resource='folder' />
         <ViewsManager
           parent={{ type: 'workspace', target: workspace }}