Use different icon opacity to distinguish hibernated workspace (#219)

src/components/main/index.js

@@ -160,6 +160,7 @@ const SortableItem = sortableElement(({ value }) => {
       picturePath={picturePath}
       transparentBackground={transparentBackground}
       order={index}
+      hibernated={hibernated}
       onClick={() => requestSetActiveWorkspace(id)}
       onContextMenu={(e) => {
         e.preventDefault();

src/components/main/workspace-selector.js

@@ -28,6 +28,9 @@ const styles = (theme) => ({
     borderLeft: '4px solid',
     borderColor: 'transparent',
   },
+  rootHibernate: {
+    opacity: 0.4,
+  },
   rootActive: {
     borderColor: theme.palette.type === 'dark' ? theme.palette.common.white : theme.palette.common.black,
     opacity: 1,
@@ -87,6 +90,7 @@ const WorkspaceSelector = ({
   active,
   badgeCount,
   classes,
+  hibernated,
   id,
   onClick,
   onContextMenu,
@@ -96,7 +100,11 @@ const WorkspaceSelector = ({
 }) => (
   <div
     role="button"
-    className={classNames(classes.root, active && classes.rootActive)}
+    className={classNames(
+      classes.root,
+      hibernated && classes.rootHibernate,
+      active && classes.rootActive,
+    )}
     onClick={onClick}
     onKeyDown={null}
     onContextMenu={onContextMenu}
@@ -127,6 +135,7 @@ const WorkspaceSelector = ({
 WorkspaceSelector.defaultProps = {
   active: false,
   badgeCount: 0,
+  hibernated: false,
   onContextMenu: null,
   order: 0,
   picturePath: null,
@@ -137,6 +146,7 @@ WorkspaceSelector.propTypes = {
   active: PropTypes.bool,
   badgeCount: PropTypes.number,
   classes: PropTypes.object.isRequired,
+  hibernated: PropTypes.bool,
   id: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
   onContextMenu: PropTypes.func,