diff --git a/external/@worldbrain/memex-common b/external/@worldbrain/memex-common index 5cdf637c71..a69782b181 160000 --- a/external/@worldbrain/memex-common +++ b/external/@worldbrain/memex-common @@ -1 +1 @@ -Subproject commit 5cdf637c71320e677b0d9d6b0478c120310e80f8 +Subproject commit a69782b181774f622fa66543564644f38f920566 diff --git a/src/annotations/components/AnnotationCreate.tsx b/src/annotations/components/AnnotationCreate.tsx index 9022ce48c1..c090843f22 100644 --- a/src/annotations/components/AnnotationCreate.tsx +++ b/src/annotations/components/AnnotationCreate.tsx @@ -23,6 +23,7 @@ import delay from 'src/util/delay' import { AnnotationsSidebarInPageEventEmitter } from 'src/sidebar/annotations-sidebar/types' import { ImageSupportInterface } from 'src/image-support/background/types' import { sleepPromise } from 'src/util/promises' +import { PrimaryAction } from '@worldbrain/memex-common/lib/common-ui/components/PrimaryAction' interface State { isTagPickerShown: boolean @@ -357,7 +358,7 @@ export class AnnotationCreate extends React.Component render() { return ( <> - + 0}> {this.state.onEditClick || this.props.autoFocus ? ( {this.props.comment.length > 0 && (this.state.onEditClick || this.props.autoFocus) && ( - - this.setState({ - isListPickerShown: true, - }) - } - spacePickerButtonRef={ - this.spacePickerButtonRef - } - renderSpacePicker={this.renderSpacePicker} - /> - {this.renderSpacePicker()} + + this.setState({ + isListPickerShown: true, + }) + } + label="Spaces" + innerRef={this.spacePickerButtonRef} + icon="plus" + iconColor="prime1" + size="small" + type="tertiary" + /> {this.renderActionButtons()} + {this.renderSpacePicker()} )} + + this.setState({ + isListPickerShown: true, + }) + } + spacePickerButtonRef={this.spacePickerButtonRef} + renderSpacePicker={this.renderSpacePicker} + /> ) @@ -564,8 +576,10 @@ const FooterContainer = styled.div` const SaveActionBar = styled.div` display: flex; - justify-content: flex-end; + justify-content: space-between; align-items: center; + width: fill-available; + width: -moz-available; z-index: 1001; grid-gap: 10px; @@ -590,7 +604,9 @@ const MarkdownButtonContainer = styled.div` } ` -const TextBoxContainerStyled = styled.div` +const TextBoxContainerStyled = styled.div<{ + hasLists: boolean +}>` box-shadow: none; cursor: default; box-sizing: border-box; @@ -598,9 +614,16 @@ const TextBoxContainerStyled = styled.div` flex-direction: column; font-size: 14px; width: calc(100% - 1px); - border-radius: 8px; + border-bottom: 1px solid ${(props) => props.theme.colors.greyScale3}; & * { font-family: ${(props) => props.theme.fonts.primary}; } + + ${(props) => + props.hasLists + ? css` + padding-bottom: 10px; + ` + : undefined} ` diff --git a/src/sidebar/annotations-sidebar/components/AnnotationsSidebar.tsx b/src/sidebar/annotations-sidebar/components/AnnotationsSidebar.tsx index 73778354a3..01b6d03131 100644 --- a/src/sidebar/annotations-sidebar/components/AnnotationsSidebar.tsx +++ b/src/sidebar/annotations-sidebar/components/AnnotationsSidebar.tsx @@ -5587,8 +5587,9 @@ const AnnotationActions = styled.div` justify-content: flex-start; align-items: center; width: fill-available; - height: 30px; + height: 20px; padding-bottom: 5px; + padding-top: 5px; ` const ActionButtons = styled.div`