diff --git a/src/components/CanvasAnnotations.js b/src/components/CanvasAnnotations.js index f32a6cc729fa956399843c4bb748638a775a2312..7b0fba4877a49769cd58e9cf3cb1b2f093eafa60 100644 --- a/src/components/CanvasAnnotations.js +++ b/src/components/CanvasAnnotations.js @@ -92,7 +92,7 @@ export class CanvasAnnotations extends Component { return ( <> - <div className={classes.form}> + <div className={classes.headerAnnotationPanel}> <TextField label={t('searchPlaceholderAnnotation')} onChange={this.handleAnnotationSearch} diff --git a/src/containers/CanvasAnnotations.js b/src/containers/CanvasAnnotations.js index a3a07135c338ecf1b99f4ab75a73a9fcdaf6facb..b607523b4c476da0604f95a325181dcdf7c6435f 100644 --- a/src/containers/CanvasAnnotations.js +++ b/src/containers/CanvasAnnotations.js @@ -75,19 +75,26 @@ const styles = theme => ({ }, footerAnnotationPanel: { background: theme.palette.background.paper, + borderTop: `.5px solid ${theme.palette.section_divider}`, bottom: 0, + paddingBottom: theme.spacing(1), + paddingLeft: theme.spacing(2), + paddingRight: theme.spacing(1), + paddingTop: theme.spacing(2), position: 'sticky', }, - form: { + grow: { + flexGrow: 1, + }, + headerAnnotationPanel: { background: theme.palette.background.paper, - padding: theme.spacing(0, 1, 0, 1), + borderBottom: `.5px solid ${theme.palette.section_divider}`, + marginBottom: theme.spacing(1), + padding: theme.spacing(0, 1, 1, 1), position: 'sticky', top: 0, zIndex: 10, }, - grow: { - flexGrow: 1, - }, hovered: {}, manifestLabel: { fontSize: '10px',