box shadow

Author: mabaasit

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

@@ -14,18 +14,40 @@ import {
   useDarkMode,
 } from '@mongodb-js/compass-components';
 
+/**
+ * @param color 6-digit hex color code
+ * @param opacity a number between 0 and 1 representing the opacity
+ * @returns 8-digit hex color code with the last two digits representing the opacity
+ */
+function getColorWithOpactity(color: string, opacity: number) {
+  if (opacity < 0 || opacity > 1) {
+    throw new Error('Opacity must be between 0 and 1');
+  }
+  const alpha = Math.round(opacity * 255)
+    .toString(16)
+    .padStart(2, '0');
+  return `#${color.replace('#', '')}${alpha}`;
+}
+
 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}`,
+  marginBottom: spacing[50],
+  boxShadow: `0px ${spacing[50]}px ${spacing[100]}px -${
+    spacing[25]
+  }px ${getColorWithOpactity(palette.black, 0.15)}`,
 });
 
 const containerDarkStyles = css({
   backgroundColor: palette.gray.dark3,
   borderBottom: `1px solid ${palette.gray.dark2}`,
+  boxShadow: `0px ${spacing[50]}px ${spacing[100]}px -${
+    spacing[25]
+  }px ${getColorWithOpactity(palette.white, 0.15)}`,
 });
 
 const toolbarGroupStyles = css({