@teambit/workspace 1.0.139 → 1.0.141

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/workspace",
-  "version": "1.0.139",
+  "version": "1.0.141",
   "homepage": "https://bit.cloud/teambit/workspace/workspace",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.workspace",
     "name": "workspace",
-    "version": "1.0.139"
+    "version": "1.0.141"
   },
   "dependencies": {
     "lodash": "4.17.21",
@@ -17,6 +17,7 @@
     "find-root": "1.1.0",
     "graphql-tag": "2.12.1",
     "memoizee": "0.4.15",
+    "node-fetch": "2.6.7",
     "detect-indent": "5.0.0",
     "detect-newline": "3.1.0",
     "stringify-package": "1.0.1",
@@ -41,6 +42,7 @@
     "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.506",
     "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.505",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.504",
+    "@teambit/base-react.themes.theme-switcher": "1.0.2",
     "@teambit/base-ui.surfaces.split-pane.hover-splitter": "1.0.0",
     "@teambit/base-ui.surfaces.split-pane.split-pane": "1.0.0",
     "@teambit/ui-foundation.ui.corner": "0.0.520",
@@ -51,44 +53,44 @@
     "@teambit/explorer.ui.gallery.component-grid": "0.0.496",
     "@teambit/scopes.scope-id": "0.0.7",
     "@teambit/workspace.ui.empty-workspace": "0.0.508",
-    "@teambit/component": "1.0.139",
-    "@teambit/dependency-resolver": "1.0.139",
-    "@teambit/envs": "1.0.139",
+    "@teambit/component": "1.0.141",
+    "@teambit/dependency-resolver": "1.0.141",
+    "@teambit/envs": "1.0.141",
     "@teambit/logger": "0.0.941",
-    "@teambit/scope": "1.0.139",
-    "@teambit/graph": "1.0.139",
+    "@teambit/scope": "1.0.141",
+    "@teambit/graph": "1.0.141",
     "@teambit/cli": "0.0.848",
-    "@teambit/isolator": "1.0.139",
-    "@teambit/component-tree": "1.0.139",
+    "@teambit/isolator": "1.0.141",
+    "@teambit/component-tree": "1.0.141",
     "@teambit/harmony.modules.resolved-component": "0.0.497",
-    "@teambit/watcher": "1.0.139",
-    "@teambit/aspect-loader": "1.0.139",
-    "@teambit/config": "0.0.890",
+    "@teambit/watcher": "1.0.141",
+    "@teambit/aspect-loader": "1.0.141",
+    "@teambit/config": "0.0.892",
     "@teambit/global-config": "0.0.851",
     "@teambit/harmony.modules.requireable-component": "0.0.497",
     "@teambit/toolbox.modules.module-resolver": "0.0.7",
     "@teambit/workspace.modules.node-modules-linker": "0.0.162",
-    "@teambit/graphql": "1.0.139",
-    "@teambit/bundler": "1.0.139",
-    "@teambit/pubsub": "1.0.139",
-    "@teambit/ui": "1.0.139",
-    "@teambit/variants": "0.0.983",
+    "@teambit/graphql": "1.0.141",
+    "@teambit/bundler": "1.0.141",
+    "@teambit/pubsub": "1.0.141",
+    "@teambit/ui": "1.0.141",
+    "@teambit/variants": "0.0.985",
     "@teambit/component-issues": "0.0.140",
-    "@teambit/workspace.modules.match-pattern": "0.0.504",
+    "@teambit/workspace.modules.match-pattern": "0.0.505",
     "@teambit/component.ui.component-drawer": "0.0.389",
     "@teambit/lanes.hooks.use-lane-components": "0.0.256",
     "@teambit/lanes.hooks.use-lanes": "0.0.258",
     "@teambit/lanes.ui.models.lanes-model": "0.0.212",
     "@teambit/ui-foundation.ui.side-bar": "0.0.874",
-    "@teambit/command-bar": "1.0.139",
+    "@teambit/command-bar": "1.0.141",
     "@teambit/component.ui.component-filters.component-filter-context": "0.0.218",
     "@teambit/component.ui.component-filters.deprecate-filter": "0.0.216",
     "@teambit/component.ui.component-filters.env-filter": "0.0.222",
     "@teambit/component.ui.component-filters.show-main-filter": "0.0.209",
-    "@teambit/sidebar": "1.0.139",
+    "@teambit/sidebar": "1.0.141",
     "@teambit/ui-foundation.ui.tree.drawer": "0.0.518",
     "@teambit/component-descriptor": "0.0.413",
-    "@teambit/deprecation": "1.0.139",
+    "@teambit/deprecation": "1.0.141",
     "@teambit/ui-foundation.ui.buttons.collapser": "0.0.216",
     "@teambit/cloud.hooks.use-cloud-scopes": "0.0.3",
     "@teambit/preview.ui.preview-placeholder": "0.0.509",
@@ -100,6 +102,7 @@
     "@types/fs-extra": "9.0.7",
     "@types/find-root": "1.1.2",
     "@types/memoizee": "0.4.5",
+    "@types/node-fetch": "2.5.12",
     "@types/classnames": "2.2.11",
     "@types/pluralize": "0.0.29",
     "@types/mocha": "9.1.0",

package/ui/workspace/workspace.module.scss

@@ -6,8 +6,10 @@
 
 .corner {
   width: 300px;
-  // --bit-border-color-lightest: #333333;
-  // --bit-text-color-heavy: white;
+  &.dark {
+    --bit-border-color-lightest: #333333;
+    --bit-text-color-heavy: white;
+  }
 }
 
 .workspaceWrapper {
@@ -19,49 +21,34 @@
 
 .topbar {
   flex: none;
+  &.dark {
+    --bit-bg-heaviest: #333333;
+    --bit-accent-color: #6a57fd;
+    --bit-bg-heavy: #2c2b36;
+    div[class*='versionMenuContainer'] {
+      --bit-bg-heavy: #f4f5f6;
+    }
+    div[class*='useBox'] {
+      div[class*='placeholder'] {
+        --bit-bg-color: transparent;
+        &:hover {
+          color: #2b2b2b;
+        }
+      }
+      &[data-open='true'] {
+        div[class*='placeholder'] {
+          color: #2b2b2b;
+        }
+      }
+    }
+    div[class*='iconAnchor'] {
+      > span {
+        color: white;
+      }
+    }
+  }
 }
 
-// .topbarDarkColors {
-//   --bit-bg-heaviest: #333333;
-//   --bit-accent-color: #6a57fd;
-//   --bit-bg-heavy: #2c2b36;
-//   --on-surface-color: white;
-//   div[class*='tab'] {
-//     --on-background-color: white;
-//   }
-//   div[class*='versionDropdown'] {
-//     div[class*='placeholder'] {
-//       color: white;
-//     }
-//   }
-//   div[class*='versionMenuContainer'] {
-//     --bit-bg-heavy: #f4f5f6;
-//   }
-//   div[class*='useBox'] {
-//     div[class*='placeholder'] {
-//       --bit-bg-color: transparent;
-//       color: #37b26c;
-//       &:hover {
-//         color: #2b2b2b;
-//       }
-//     }
-//     &[data-open='true'] {
-//       div[class*='placeholder'] {
-//         --bit-bg-color: #37b26c;
-//         color: #2b2b2b;
-//       }
-//     }
-//   }
-//   div[class*='iconAnchor'] {
-//     // [data-open='true'] {
-//     background: transparent !important;
-//     // }
-//     > span {
-//       color: white;
-//     }
-//   }
-// }
-
 .main {
   flex: 1 1;
 
@@ -89,23 +76,12 @@
   &.closed {
     overflow: hidden;
   }
+  &.dark {
+    background-color: #333333;
+    a[class*='laneGalleryIcon'] {
+      > img {
+        filter: invert(1);
+      }
+    }
+  }
 }
-
-// .sidebarDarkColors {
-//   background-color: #333333;
-//   --bit-text-color-heavy: #ededed;
-//   --bit-text-color-light: #ededed;
-//   --bit-bg-heavy: #2c2b36;
-//   --bit-bg-color: #2c2b36;
-//   --bit-accent-bg: #2c2b36;
-//   --border-medium-color: #3d3d3c;
-
-//   --surface-neutral-hover-color: #2b2b2b;
-//   --bit-border-color-lightest: #2b2b2b;
-//   color: #ededed;
-//   a[class*='laneGalleryIcon'] {
-//     > img {
-//       filter: invert(1);
-//     }
-//   }
-// }

package/ui/workspace/workspace.tsx

@@ -9,6 +9,7 @@ import { RouteSlot, SlotRouter } from '@teambit/ui-foundation.ui.react-router.sl
 import { Corner } from '@teambit/ui-foundation.ui.corner';
 import { Collapser } from '@teambit/ui-foundation.ui.buttons.collapser';
 import { SplitPane, Pane, Layout } from '@teambit/base-ui.surfaces.split-pane.split-pane';
+import { useThemePicker } from '@teambit/base-react.themes.theme-switcher';
 import { HoverSplitter } from '@teambit/base-ui.surfaces.split-pane.hover-splitter';
 import { TopBar } from '@teambit/ui-foundation.ui.top-bar';
 import classNames from 'classnames';
@@ -33,10 +34,10 @@ export type WorkspaceProps = {
 export function Workspace({ routeSlot, menuSlot, sidebar, workspaceUI, onSidebarTogglerChange }: WorkspaceProps) {
   const reactions = useComponentNotifications();
   const { workspace } = useWorkspace(reactions);
-
+  const { current } = useThemePicker();
   const [isSidebarOpen, handleSidebarToggle] = useReducer((x) => !x, true);
   const sidebarOpenness = isSidebarOpen ? Layout.row : Layout.right;
-
+  const themeName = current?.themeName || 'light';
   onSidebarTogglerChange(handleSidebarToggle);
 
   if (!workspace) {
@@ -49,13 +50,19 @@ export function Workspace({ routeSlot, menuSlot, sidebar, workspaceUI, onSidebar
     <WorkspaceProvider workspace={workspace}>
       <div className={styles.workspaceWrapper}>
         <TopBar
-          className={classNames(styles.topbar /* , styles.topbarDarkColors */)}
-          Corner={() => <Corner /* className={styles.corner} */ name={workspace.name} icon={workspace.icon} />}
+          className={classNames(styles.topbar, styles[themeName])}
+          Corner={() => (
+            <Corner
+              className={classNames(styles.corner, styles[themeName])}
+              name={workspace.name}
+              icon={workspace.icon}
+            />
+          )}
           menu={menuSlot}
         />
 
         <SplitPane className={styles.main} size={246} layout={sidebarOpenness}>
-          <Pane className={classNames(styles.sidebar, /* styles.sidebarDarkColors, */ !isSidebarOpen && styles.closed)}>
+          <Pane className={classNames(styles.sidebar, styles[themeName], !isSidebarOpen && styles.closed)}>
             {sidebar}
           </Pane>
           <HoverSplitter className={styles.splitter}>