Sidebar enhacements (codesandbox#3571)

* adjust colors if list.hover is the same as sidebar.back

* ensure enough contrast for active activity bar selectin

* fix bug oops + reduce big icon contrast required

* fix experiemnts

Co-authored-by: Sara Vieira <[email protected]>

Author: siddharthkp

packages/app/src/app/overmind/namespaces/preferences/actions.ts

@@ -131,30 +131,3 @@ export const zenModeToggled: Action = ({ state }) => {
 export const codeMirrorForced: Action = ({ state }) => {
   state.preferences.settings.codeMirror = true;
 };
-
-export const toggleContainerLspExperiment: AsyncAction = async ({
-  state,
-  effects,
-}) => {
-  if (!state.user) {
-    return;
-  }
-  try {
-    await effects.api.updateExperiments({
-      container_lsp: !state.user.experiments.containerLsp,
-    });
-    state.user.experiments.containerLsp = !state.user.experiments.containerLsp;
-    // Allow the flush to go through and flip button
-    requestAnimationFrame(() => {
-      if (
-        effects.browser.confirm(
-          'We need to refresh for this to take effect, or you can refresh later'
-        )
-      ) {
-        effects.browser.reload();
-      }
-    });
-  } catch (error) {
-    effects.notificationToast.error('Unable to toggl LSP experiment');
-  }
-};

packages/app/src/app/pages/Sandbox/Editor/Navigation/elements.ts

@@ -51,7 +51,7 @@ export const IconContainer = styled(Stack)<{
 
     ${props.selected &&
       css`
-        color: ${props.theme.colors.activityBar.selected};
+        color: ${props.theme.colors.activityBar.selectedForeground};
       `};
 
     ${props.isDisabled &&

packages/app/src/app/pages/common/Modals/PreferencesModal/Experiments/ContainerLSP.tsx

@@ -0,0 +1,38 @@
+import React, { useState, useEffect } from 'react';
+import { useOvermind } from 'app/overmind';
+import { SubDescription, PaddedPreference } from '../elements';
+
+export const ContainerLSP: React.FunctionComponent = () => {
+  const { state } = useOvermind();
+  const [containerLSP, setContainerLSP] = useState(false);
+  useEffect(() => {
+    const value = window.localStorage.getItem('CONTAINER_LSP');
+
+    if (value === 'true') {
+      return setContainerLSP(true);
+    }
+    return setContainerLSP(false);
+  }, []);
+
+  const setValue = (val: boolean) => {
+    setContainerLSP(val);
+    window.localStorage.setItem('CONTAINER_LSP', val.toString());
+    location.reload();
+  };
+
+  return state.user ? (
+    <>
+      <PaddedPreference
+        title="Use container language server"
+        type="boolean"
+        value={containerLSP}
+        setValue={val => setValue(val)}
+        tooltip="Language server"
+      />
+      <SubDescription>
+        As part of making containers more powerful we now allow the language
+        server to run there. Please help us test it :-)
+      </SubDescription>
+    </>
+  ) : null;
+};

packages/app/src/app/pages/common/Modals/PreferencesModal/Experiments/index.tsx

@@ -1,41 +1,18 @@
-import { useOvermind } from 'app/overmind';
 import React from 'react';
 
-import {
-  PaddedPreference,
-  PreferenceContainer,
-  Rule,
-  SubContainer,
-  SubDescription,
-  Title,
-} from '../elements';
+import { PreferenceContainer, Rule, SubContainer, Title } from '../elements';
 import { NewSidebar } from './NewSidebar';
+import { ContainerLSP } from './ContainerLSP';
 
-export const Experiments: React.FunctionComponent = () => {
-  const { state, actions } = useOvermind();
-
-  return (
-    <div>
-      <Title>Experiments</Title>
-      <SubContainer>
-        <PreferenceContainer>
-          <NewSidebar />
-          <Rule />
-          <PaddedPreference
-            title="Use container language server"
-            type="boolean"
-            value={state.user.experiments.containerLsp}
-            setValue={() => {
-              actions.preferences.toggleContainerLspExperiment();
-            }}
-            tooltip="Language server"
-          />
-          <SubDescription>
-            As part of making containers more powerful we now allow the language
-            server to run there. Please help us test it :-)
-          </SubDescription>
-        </PreferenceContainer>
-      </SubContainer>
-    </div>
-  );
-};
+export const Experiments: React.FunctionComponent = () => (
+  <div>
+    <Title>Experiments</Title>
+    <SubContainer>
+      <PreferenceContainer>
+        <NewSidebar />
+        <Rule />
+        <ContainerLSP />
+      </PreferenceContainer>
+    </SubContainer>
+  </div>
+);

packages/components/src/utils/polyfill-theme.ts

@@ -121,6 +121,22 @@ const polyfillTheme = vsCodeTheme => {
     );
   }
 
+  if (uiColors.list.hoverBackground === uiColors.sideBar.background) {
+    if (
+      uiColors.list.inactiveSelectionBackground &&
+      uiColors.list.hoverBackground !==
+        uiColors.list.inactiveSelectionBackground
+    ) {
+      uiColors.list.hoverBackground = uiColors.list.inactiveSelectionBackground;
+    } else {
+      // if that didnt work, its math time
+      uiColors.list.hoverBackground = decreaseContrast(
+        uiColors.sideBar.background,
+        0.25
+      );
+    }
+  }
+
   uiColors.list.foreground = uiColors.list.foreground || mutedForeground;
   uiColors.list.hoverForeground =
     uiColors.list.hoverForeground || uiColors.sideBar.foreground;
@@ -143,7 +159,7 @@ const polyfillTheme = vsCodeTheme => {
   const addedColors = {
     mutedForeground,
     activityBar: {
-      selected: uiColors.sideBar.foreground,
+      selectedForeground: uiColors.sideBar.foreground,
       inactiveForeground: mutedForeground,
       hoverBackground: uiColors.sideBar.border,
     },
@@ -183,6 +199,14 @@ const polyfillTheme = vsCodeTheme => {
     uiColors.switch.toggle = designLanguage.colors.grays[200];
   }
 
+  // ensure enough contrast from inactive state
+  uiColors.activityBar.selectedForeground = withContrast(
+    uiColors.activityBar.selectedForeground,
+    uiColors.activityBar.inactiveForeground,
+    type,
+    'icon'
+  );
+
   return uiColors;
 };
 
@@ -203,13 +227,21 @@ const darken = (color, value) =>
     .darken(value)
     .hex();
 
-const withContrast = (color, background, type) => {
-  if (Color(color).contrast(Color(background)) > 4.5) return color;
+const withContrast = (color, background, type, contrastType = 'text') => {
+  const contrastRatio = { text: 4.5, icon: 1.6 };
+  const contrast = contrastRatio[contrastType];
+
+  if (Color(color).contrast(Color(background)) > contrast) return color;
 
   // can't fix that
   if (color === '#FFFFFF' || color === '#000000') return color;
 
   // recursively increase contrast
   const increaseContrast = type === 'dark' ? lighten : darken;
-  return withContrast(increaseContrast(color, 0.1), background, type);
+  return withContrast(
+    increaseContrast(color, 0.1),
+    background,
+    type,
+    contrastType
+  );
 };