feat: replaced dark/light button with theme editor

Author: it-nalon

package.json

@@ -3,14 +3,15 @@
   "name": "horizon-ui-chakra",
   "version": "1.0.1",
   "private": true,
-  "dependencies": { 
+  "dependencies": {
     "@chakra-ui/icons": "^1.1.5",
     "@chakra-ui/react": "1.8.8",
     "@chakra-ui/system": "^1.12.1",
     "@chakra-ui/theme-tools": "^1.3.6",
     "@emotion/cache": "^11.7.1",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
+    "@hypertheme-editor/chakra-ui": "^0.1.5",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",

src/components/navbar/NavbarLinksAdmin.js

@@ -22,10 +22,11 @@ import PropTypes from "prop-types";
 import React from "react";
 // Assets
 import navImage from "assets/img/layout/Navbar.png";
-import { MdNotificationsNone, MdInfoOutline } from "react-icons/md";
+import { MdNotificationsNone, MdInfoOutline, MdPalette } from "react-icons/md";
 import { IoMdMoon, IoMdSunny } from "react-icons/io";
 import { FaEthereum } from "react-icons/fa";
 import routes from "routes.js";
+import { ThemeEditor } from "./ThemeEditor";
 export default function HeaderLinks(props) {
   const { secondary } = props;
   const { colorMode, toggleColorMode } = useColorMode();
@@ -205,7 +206,7 @@ export default function HeaderLinks(props) {
         </MenuList>
       </Menu>
 
-      <Button
+      {/* <Button
         variant='no-hover'
         bg='transparent'
         p='0px'
@@ -221,7 +222,10 @@ export default function HeaderLinks(props) {
           color={navbarIcon}
           as={colorMode === "light" ? IoMdMoon : IoMdSunny}
         />
-      </Button>
+      </Button> */}
+
+      <ThemeEditor navbarIcon={navbarIcon} /> 
+
       <Menu>
         <MenuButton p='0px'>
           <Avatar

src/components/navbar/ThemeEditor.js

@@ -0,0 +1,48 @@
+import React from 'react'
+import {
+  ThemeEditor as ThemeEditorContainer,
+  ThemeEditorDrawer,
+  ThemeEditorColors,
+  ThemeEditorFontSizes
+} from '@hypertheme-editor/chakra-ui'
+import { Button, Icon } from '@chakra-ui/react'
+import { CgColorPicker } from 'react-icons/cg'
+import { ImFontSize } from 'react-icons/im'
+import { MdPalette } from 'react-icons/md'
+
+export function ThemeEditor(props) {
+    return (
+        <ThemeEditorContainer>
+          <ThemeEditorButton {...props} />
+          <ThemeEditorDrawer hideUpgradeToPro>
+            <ThemeEditorColors icon={CgColorPicker} title="Colors" />
+            <ThemeEditorFontSizes icon={ImFontSize} title="Font Sizes" />
+          </ThemeEditorDrawer>
+        </ThemeEditorContainer>
+      )
+}
+
+function ThemeEditorButton({ onOpen, navbarIcon, ...rest }) {
+  return (
+    <Button
+        variant='no-hover'
+        bg='transparent'
+        p='0px'
+        minW='unset'
+        minH='unset'
+        h='18px'
+        w='max-content'
+        _focus={{ boxShadow: 'none' }}
+        onClick={onOpen}
+        {...rest}
+    >
+        <Icon
+            me='10px'
+            h='18px'
+            w='18px'
+            color={navbarIcon}
+            as={MdPalette}
+        />
+      </Button>
+  )
+}

src/index.js

@@ -7,18 +7,21 @@ import AdminLayout from "layouts/admin";
 import RTLLayout from "layouts/rtl";
 import { ChakraProvider } from "@chakra-ui/react";
 import theme from "theme/theme";
+import { ThemeEditorProvider } from "@hypertheme-editor/chakra-ui";
 
 ReactDOM.render(
   <ChakraProvider theme={theme}>
     <React.StrictMode>
-      <HashRouter>
-        <Switch>
-          <Route path={`/auth`} component={AuthLayout} />
-          <Route path={`/admin`} component={AdminLayout} />
-          <Route path={`/rtl`} component={RTLLayout} />
-          <Redirect from='/' to='/admin' />
-        </Switch>
-      </HashRouter>
+      <ThemeEditorProvider>
+        <HashRouter>
+          <Switch>
+            <Route path={`/auth`} component={AuthLayout} />
+            <Route path={`/admin`} component={AdminLayout} />
+            <Route path={`/rtl`} component={RTLLayout} />
+            <Redirect from='/' to='/admin' />
+          </Switch>
+        </HashRouter>
+      </ThemeEditorProvider>
     </React.StrictMode>
   </ChakraProvider>,
   document.getElementById("root")