align toolbar with designs

Author: mabaasit

packages/compass-data-modeling/src/components/diagram-editor-toolbar.tsx

@@ -1,44 +1,67 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import type { DataModelingState } from '../store/reducer';
-import { saveDiagram, redoEdit, undoEdit } from '../store/diagram';
+import { redoEdit, undoEdit } from '../store/diagram';
 import { showExportModal } from '../store/export-diagram';
-import { Icon, IconButton } from '@mongodb-js/compass-components';
+import {
+  Button,
+  css,
+  cx,
+  Icon,
+  IconButton,
+  palette,
+  spacing,
+  useDarkMode,
+} from '@mongodb-js/compass-components';
+
+const containerStyles = css({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: `${spacing[150]}px ${spacing[200]}px`,
+  backgroundColor: palette.gray.light3,
+  borderBottom: `1px solid ${palette.gray.light2}`,
+});
+
+const containerDarkStyles = css({
+  backgroundColor: palette.gray.dark3,
+  borderBottom: `1px solid ${palette.gray.dark2}`,
+});
+
+const toolbarGroupStyles = css({
+  display: 'flex',
+});
 
 export const DiagramEditorToolbar: React.FunctionComponent<{
   step: DataModelingState['step'];
   hasUndo: boolean;
   hasRedo: boolean;
-  onDownloadClick: () => void;
   onUndoClick: () => void;
   onRedoClick: () => void;
   onExportClick: () => void;
-}> = ({
-  step,
-  hasUndo,
-  onUndoClick,
-  hasRedo,
-  onRedoClick,
-  onExportClick,
-  onDownloadClick,
-}) => {
+}> = ({ step, hasUndo, onUndoClick, hasRedo, onRedoClick, onExportClick }) => {
+  const darkmode = useDarkMode();
   if (step !== 'EDITING') {
     return null;
   }
   return (
-    <div data-testid="diagram-editor-toolbar">
-      <IconButton aria-label="Download" onClick={onDownloadClick}>
-        <Icon glyph="Download"></Icon>
-      </IconButton>
-      <IconButton aria-label="Undo" disabled={!hasUndo} onClick={onUndoClick}>
-        <Icon glyph="Undo"></Icon>
-      </IconButton>
-      <IconButton aria-label="Redo" disabled={!hasRedo} onClick={onRedoClick}>
-        <Icon glyph="Redo"></Icon>
-      </IconButton>
-      <IconButton aria-label="Export" onClick={onExportClick}>
-        <Icon glyph="Export"></Icon>
-      </IconButton>
+    <div
+      className={cx(containerStyles, darkmode && containerDarkStyles)}
+      data-testid="diagram-editor-toolbar"
+    >
+      <div className={toolbarGroupStyles}>
+        <IconButton aria-label="Undo" disabled={!hasUndo} onClick={onUndoClick}>
+          <Icon glyph="Undo"></Icon>
+        </IconButton>
+        <IconButton aria-label="Redo" disabled={!hasRedo} onClick={onRedoClick}>
+          <Icon glyph="Redo"></Icon>
+        </IconButton>
+      </div>
+      <div className={toolbarGroupStyles}>
+        <Button size="xsmall" aria-label="Export" onClick={onExportClick}>
+          <Icon glyph="Export"></Icon>
+        </Button>
+      </div>
     </div>
   );
 };
@@ -56,6 +79,5 @@ export default connect(
     onUndoClick: undoEdit,
     onRedoClick: redoEdit,
     onExportClick: showExportModal,
-    onDownloadClick: saveDiagram,
   }
 )(DiagramEditorToolbar);