From a5b2dd39cbba9708224ba3c21d1e4f84a9619544 Mon Sep 17 00:00:00 2001
From: David Ralph <ohlookitsderpy@protonmail.com>
Date: Wed, 31 Mar 2021 19:53:26 +0100
Subject: [PATCH] fix: only show features in settings that are compatible with
 the browser and fix date widget

---
 package.json                                                | 1 +
 src/components/modals/main/settings/sections/Appearance.jsx | 6 +++++-
 src/components/modals/main/settings/sections/Search.jsx     | 3 ++-
 src/components/widgets/time/Date.jsx                        | 2 +-
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 7701b578..8a116153 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "react-clock": "^3.0.0",
     "react-color-gradient-picker": "^0.1.2",
     "react-day-picker": "^7.4.10",
+    "react-device-detect": "^1.17.0",
     "react-dom": "17.0.2",
     "react-modal": "3.12.1",
     "react-sortable-hoc": "^2.0.0",
diff --git a/src/components/modals/main/settings/sections/Appearance.jsx b/src/components/modals/main/settings/sections/Appearance.jsx
index 448ca248..29368fa1 100644
--- a/src/components/modals/main/settings/sections/Appearance.jsx
+++ b/src/components/modals/main/settings/sections/Appearance.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { engineName } from 'react-device-detect';
+
 import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
 import Radio from '../Radio';
@@ -57,7 +59,9 @@ export default function AppearanceSettings() {
 
       <h3>{appearance.accessibility.title}</h3>
       <Checkbox name='animations' text={appearance.animations} betaFeature={true} />
-      <Slider title={appearance.accessibility.widget_zoom} name='widgetzoom' default='100' min='50' max='200' display='%'/>
+      {(engineName === 'Blink') ? 
+        <Slider title={appearance.accessibility.widget_zoom} name='widgetzoom' default='100' min='50' max='200' display='%'/> 
+      : null}
       <Slider title={appearance.accessibility.toast_duration} name='toastDisplayTime' default='2500' min='500' max='5000' display={' ' + appearance.accessibility.milliseconds} />
     </>
   );
diff --git a/src/components/modals/main/settings/sections/Search.jsx b/src/components/modals/main/settings/sections/Search.jsx
index db09ca51..084ec2b7 100644
--- a/src/components/modals/main/settings/sections/Search.jsx
+++ b/src/components/modals/main/settings/sections/Search.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { isChrome } from 'react-device-detect';
 import { toast } from 'react-toastify';
 
 import Dropdown from '../Dropdown';
@@ -61,7 +62,7 @@ export default class SearchSettings extends React.PureComponent {
       <>
         <h2>{search.title}</h2>
         <Switch name='searchBar' text={language.enabled} />
-        <Checkbox name='voiceSearch' text={search.voice_search} />
+        {isChrome ? <Checkbox name='voiceSearch' text={search.voice_search} /> : null}
         <Dropdown label={search.search_engine} name='searchEngine' onChange={(value) => this.setSearchEngine(value)}>
           {searchEngines.map((engine) =>
             <option key={engine.name} value={engine.settingsName}>{engine.name}</option>
diff --git a/src/components/widgets/time/Date.jsx b/src/components/widgets/time/Date.jsx
index 32db9871..35ce4e54 100644
--- a/src/components/widgets/time/Date.jsx
+++ b/src/components/widgets/time/Date.jsx
@@ -57,7 +57,7 @@ export default class DateWidget extends React.PureComponent {
       });
     } else {
       // Long date
-      const lang = localStorage.getItem('language');
+      const lang = localStorage.getItem('language').split('_')[0];
 
       const nth = (localStorage.getItem('datenth') === 'true') ? dtf.nth(date.getDate()) : date.getDate();