From 150e5f3b4d7ee9906af574cafa1502c40adf28ac Mon Sep 17 00:00:00 2001
From: jhen <developer@jhen.me>
Date: Mon, 24 Jul 2023 16:38:25 +0800
Subject: [PATCH] Custom Settings (Remove connection tab)

---
 app/containers/App.js                         |  2 +-
 app/containers/ReactInspector.js              |  2 +-
 .../{ReduxDevTools.js => redux/DevTools.js}   |  4 +--
 .../{ReduxHeader.js => redux/Header.js}       |  0
 app/containers/redux/Settings.js              | 26 +++++++++++++++++++
 5 files changed, 30 insertions(+), 4 deletions(-)
 rename app/containers/{ReduxDevTools.js => redux/DevTools.js} (90%)
 rename app/containers/{ReduxHeader.js => redux/Header.js} (100%)
 create mode 100644 app/containers/redux/Settings.js

diff --git a/app/containers/App.js b/app/containers/App.js
index 267a8c86..caed0f96 100644
--- a/app/containers/App.js
+++ b/app/containers/App.js
@@ -6,7 +6,7 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import * as debuggerActions from '../actions/debugger';
 import * as settingActions from '../actions/setting';
-import ReduxDevTools from './ReduxDevTools';
+import ReduxDevTools from './redux/DevTools';
 import ReactInspector from './ReactInspector';
 import FormInput from '../components/FormInput';
 import Draggable from '../components/Draggable';
diff --git a/app/containers/ReactInspector.js b/app/containers/ReactInspector.js
index 05746f28..46400b5f 100644
--- a/app/containers/ReactInspector.js
+++ b/app/containers/ReactInspector.js
@@ -26,7 +26,7 @@ const styles = {
   waiting: {
     height: '100%',
     display: 'flex',
-    webkitUserSelect: 'none',
+    WebkitUserSelect: 'none',
     textAlign: 'center',
     color: '#aaa',
     justifyContent: 'center',
diff --git a/app/containers/ReduxDevTools.js b/app/containers/redux/DevTools.js
similarity index 90%
rename from app/containers/ReduxDevTools.js
rename to app/containers/redux/DevTools.js
index 8b284c7d..25ad9d2a 100644
--- a/app/containers/ReduxDevTools.js
+++ b/app/containers/redux/DevTools.js
@@ -3,8 +3,8 @@ import { useSelector, useDispatch } from 'react-redux';
 import { Container, Notification } from '@redux-devtools/ui';
 import { clearNotification } from '@redux-devtools/app/lib/esm/actions';
 import Actions from '@redux-devtools/app/lib/esm/containers/Actions';
-import Settings from '@redux-devtools/app/lib/esm/components/Settings';
-import Header from './ReduxHeader';
+import Settings from './Settings';
+import Header from './Header';
 
 const App = () => {
   const section = useSelector(state => state.section);
diff --git a/app/containers/ReduxHeader.js b/app/containers/redux/Header.js
similarity index 100%
rename from app/containers/ReduxHeader.js
rename to app/containers/redux/Header.js
diff --git a/app/containers/redux/Settings.js b/app/containers/redux/Settings.js
new file mode 100644
index 00000000..9098d6e6
--- /dev/null
+++ b/app/containers/redux/Settings.js
@@ -0,0 +1,26 @@
+/* eslint-disable import/no-named-as-default */
+import React, { Component } from 'react';
+import Tabs from '@redux-devtools/ui/lib/esm/Tabs/Tabs';
+import Themes from '@redux-devtools/app/lib/esm/components/Settings/Themes';
+
+export default class Settings extends Component {
+  state = { selected: 'Themes' };
+
+  tabs = [
+    { name: 'Themes', component: Themes },
+  ];
+
+  handleSelect = (selected) => {
+    this.setState({ selected });
+  };
+
+  render() {
+    return (
+      <Tabs
+        tabs={this.tabs}
+        selected={this.state.selected}
+        onClick={this.handleSelect}
+      />
+    );
+  }
+}