diff --git a/editors/editoria/src/layout/EditoriaLayout.js b/editors/editoria/src/layout/EditoriaLayout.js index 6ef72a2a7d796375a4ccf07da119b2a358f019c7..6862fa7311dc1c218ea6e802cee3885f745c9ae5 100644 --- a/editors/editoria/src/layout/EditoriaLayout.js +++ b/editors/editoria/src/layout/EditoriaLayout.js @@ -127,6 +127,8 @@ const CommentTrackToolsContainer = styled.div` position: fixed; display: flex; margin-left: 5px; + flex-dirextion: row; + // justify-content: center; z-index: 1; height: 30px; width: 27%; @@ -134,7 +136,7 @@ const CommentTrackToolsContainer = styled.div` `; const CommentTrackTools = styled.div` - margin-left: 10px; + margin-left: auto; display: flex; position: relative; `; diff --git a/wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsComponent.js b/wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsComponent.js index 1e9af76ad0d793253fef99f164c9e178421f3808..f3b8994032920cf016e4aab623b3855ddeaaa206 100644 --- a/wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsComponent.js +++ b/wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsComponent.js @@ -1,8 +1,25 @@ import React from 'react'; +import styled from 'styled-components'; +import { grid } from '@pubsweet/ui-toolkit'; + +const Wrapper = styled.div` + background: #fff; + border-radius: 1.03093% / 8%; + box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px 0px, + rgba(9, 30, 66, 0.31) 0px 0px 1px 0px; + padding: ${grid(2)}; + transform-origin: 50% 50% 0px; + width: 200px; + height: 200px; +`; const TrackChangeOptionsComponent = ({ view = {}, groups }) => { console.log(groups); - return <span>Options</span>; + return ( + <Wrapper> + <span>Options</span> + </Wrapper> + ); }; export default TrackChangeOptionsComponent; diff --git a/wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsTool.js b/wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsTool.js index f6761e94c99fbad3eebc55e663bccc86d778a44f..37e7c32a4e415f02f3dbc6d157bd2e1a0f1dba39 100644 --- a/wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsTool.js +++ b/wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsTool.js @@ -17,6 +17,7 @@ const DropWrapper = styled.div` background: white; margin-top: ${grid(1)}; position: absolute; + right: -3px; top: 32px; `;