add button to close sidebar in dashboard

WorldBrain · May 11, 2024 · e673de2 · e673de2
1 parent ee85a59
commit e673de2
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 4 deletions.
diff --git a/external/@worldbrain/memex-common b/external/@worldbrain/memex-common
diff --git a/src/dashboard-refactor/header/search-bar/index.tsx b/src/dashboard-refactor/header/search-bar/index.tsx
@@ -149,6 +149,8 @@ export default class SearchBar extends PureComponent<SearchBarProps, State> {
                     <TutorialBox
                         tutorialId="savePages"
                         getRootElement={this.props.getRootElement}
+                        iconPadding={'6px'}
+                        iconSize="22px"
                     />
                 </ActionButtons>
                 {!this.props.inPageMode && <Placeholder />}

diff --git a/src/dashboard-refactor/index.tsx b/src/dashboard-refactor/index.tsx
@@ -70,6 +70,7 @@ import CopyPaster from 'src/copy-paster/components/CopyPaster'
 import { PageSearchCopyPaster } from 'src/copy-paster'
 import BulkEditCopyPaster from 'src/copy-paster/BulkEditCopyPaster'
 import { OverlayModals } from '@worldbrain/memex-common/lib/common-ui/components/overlay-modals'
+import IconBox from '@worldbrain/memex-common/lib/common-ui/components/icon-box'
 
 export type Props = DashboardDependencies & {
     getRootElement: () => HTMLElement
@@ -526,7 +527,6 @@ export class DashboardContainer extends StatefulUIElement<
                                         },
                                     )
                                 }
-                                label={'Sync Status'}
                                 size={'medium'}
                                 icon={getSyncStatusIcon(syncStatusIconState)}
                                 type={'tertiary'}
@@ -550,6 +550,16 @@ export class DashboardContainer extends StatefulUIElement<
                             filePath={icons.settings}
                         />
                         {this.renderStatusMenu(syncStatusIconState)}
+                        {this.state.isNoteSidebarShown && (
+                            <Icon
+                                icon="arrowRight"
+                                heightAndWidth="22px"
+                                padding="6px"
+                                onClick={() =>
+                                    this.notesSidebarRef.current.hideSidebar()
+                                }
+                            />
+                        )}
                     </>
                 </RightHeader>
             </HeaderContainer>
@@ -1949,6 +1959,7 @@ export class DashboardContainer extends StatefulUIElement<
                                 )
                             }
                             onNotesSidebarClose={() => {
+                                console.log('onnotes close')
                                 this.processEvent('toggleNoteSidebarOff', null)
                                 this.processEvent('setActivePage', {
                                     activeDay: undefined,
@@ -1990,6 +2001,8 @@ export class DashboardContainer extends StatefulUIElement<
                             this.processEvent('toggleTheme', null)
                         }
                         getRootElement={this.props.getRootElement}
+                        padding={'4px'}
+                        iconSize="22px"
                     />
                     {/* {this.state.listsSidebar.draggedListId != null ||
                         (this.state.searchResults.draggedPageId != null && ( */}

diff --git a/src/overview/help-btn/components/help-btn.tsx b/src/overview/help-btn/components/help-btn.tsx
@@ -12,6 +12,8 @@ export interface Props {
     theme: MemexThemeVariant
     toggleTheme: () => void
     getRootElement: () => HTMLElement
+    padding?: string
+    iconSize?: string
 }
 export interface State {
     isOpen: boolean
@@ -194,21 +196,23 @@ export class HelpBtn extends React.PureComponent<Props, State> {
                 {this.renderMenu()}
                 {window.location.href.includes('/overview') && (
                     <Icon
-                        heightAndWidth="24px"
+                        heightAndWidth={this.props.iconSize || '24px'}
                         color={
                             this.props.theme === 'dark'
                                 ? 'greyScale5'
                                 : 'greyScale4'
                         }
                         filePath={this.props.theme === 'dark' ? 'moon' : 'sun'}
                         onClick={() => this.props.toggleTheme()}
+                        padding={this.props.padding}
                     />
                 )}
                 <Icon
                     filePath={icons.helpIcon}
-                    heightAndWidth={'24px'}
+                    heightAndWidth={this.props.iconSize || '24px'}
                     onClick={this.handleClick}
                     containerRef={this.helpButtonRef}
+                    padding={this.props.padding}
                 />
             </HelpIconPosition>
         )