remove vim mode option on ff (codesandbox#2260)

* remove vim mode option on ff

* disabled instead of deletinmg

Author: SaraVieira

packages/app/src/app/pages/common/Modals/PreferencesModal/EditorPageSettings/EditorSettings/index.js

@@ -11,6 +11,9 @@ import {
 } from '../../elements';
 import VSCodePlaceholder from '../../VSCodePlaceholder';
 
+const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+const isFF = navigator.userAgent.toLowerCase().includes('firefox');
+
 function EditorSettings({ store, signals }) {
   const bindValue = name => ({
     value: store.preferences.settings[name],
@@ -70,7 +73,8 @@ function EditorSettings({ store, signals }) {
             </VSCodePlaceholder>
           </PreferenceContainer>
         </VSCodePlaceholder>
-        <PreferenceContainer>
+        {/* {Vim mode does not work on FF or Safari */}
+        <PreferenceContainer disabled={isSafari || isFF}>
           <PaddedPreference
             title="VIM Mode"
             type="boolean"
@@ -81,6 +85,15 @@ function EditorSettings({ store, signals }) {
             page to see the effects
           </SubDescription>
         </PreferenceContainer>
+        {isSafari || isFF ? (
+          <SubDescription
+            css={`
+              margin-top: 0.5rem;
+            `}
+          >
+            The VIM extension currently only works on Chrome and Microsoft Edge.
+          </SubDescription>
+        ) : null}
       </SubContainer>
     </div>
   );

packages/app/src/app/pages/common/Modals/PreferencesModal/elements.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import Preference from '@codesandbox/common/lib/components/Preference';
 
 export const SubContainer = styled.div`
@@ -22,6 +22,14 @@ export const Subheading = styled.div`
 
 export const PreferenceContainer = styled.div`
   padding-top: 0.5rem;
+
+  ${props =>
+    props.disabled &&
+    css`
+      opacity: 0.5;
+      pointer-events: none;
+      cursor: disabled;
+    `}
 `;
 
 export const PaddedPreference = styled(Preference)`