Adding new settings modal and UI changes for Logs

Author: rachitkrsingh

package-lock.json

@@ -45,6 +45,7 @@
     "@emotion/styled": "^11.11.0",
     "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^2.1.1",
+    "@hookform/resolvers": "^3.7.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -53,6 +54,7 @@
     "autoprefixer": "^10.4.18",
     "axios": "^1.5.1",
     "codemirror": "^6.0.1",
+    "date-fns": "^3.6.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.29.1",
     "immer": "^10.0.4",
@@ -65,6 +67,7 @@
     "react-custom-scrollbars": "^4.2.1",
     "react-dom": "^18.2.0",
     "react-edit-text": "^5.1.1",
+    "react-hook-form": "^7.52.0",
     "react-icons": "^5.0.1",
     "react-json-view-lite": "^1.4.0",
     "react-perfect-scrollbar": "^1.5.8",
@@ -79,10 +82,12 @@
     "tailwindcss": "^3.4.1",
     "typescript": "4",
     "web-vitals": "^2.1.4",
+    "zod": "^3.23.8",
     "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
+    "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
     "@types/node": "20.11.5",
     "daisyui": "^4.7.2",

package.json

@@ -62,7 +62,7 @@ const AuthNode = ({ id, data }) => {
               leaveFrom='opacity-100'
               leaveTo='opacity-0'
             >
-              <Listbox.Options className='absolute w-full py-1 mt-1 overflow-auto text-base bg-white max-h-60 focus:outline-none'>
+              <Listbox.Options className='absolute z-10 w-full py-1 mt-1 overflow-auto text-base bg-white max-h-60 focus:outline-none'>
                 <Listbox.Option
                   className={({ active }) =>
                     `relative cursor-default select-none py-2 pl-10 pr-4 hover:font-semibold ${

pnpm-lock.yaml

@@ -1,31 +1,45 @@
-import React from 'react';
-import { ArrowLeftEndOnRectangleIcon, ArrowRightStartOnRectangleIcon } from '@heroicons/react/24/outline';
+import React, { useState } from 'react';
+import {
+  ArrowLeftEndOnRectangleIcon,
+  ArrowRightStartOnRectangleIcon,
+  Cog8ToothIcon,
+} from '@heroicons/react/24/outline';
+
 import Tippy from '@tippyjs/react';
 import useNavigationStore from 'stores/AppNavBarStore';
 import useCollectionStore from 'stores/CollectionStore';
+import SettingsModal from '../modals/SettingsModal';
 
 const MainFooter = () => {
   const collections = useCollectionStore((state) => state.collections);
   const isNavBarCollapsed = useNavigationStore((state) => state.collapseNavBar);
   const updateNavCollapseState = useNavigationStore((state) => state.setNavCollapseState);
+  const [openSettingsModal, setOpenSettingsModal] = useState(false);
   return (
     <footer className='flex items-center justify-between px-4 py-3 text-xs'>
-      <label className='swap swap-rotate cursor-pointer py-1'>
-        <input
-          type='checkbox'
-          onClick={(event) => {
-            if (collections.length) {
-              // since default is false for isNavBarCollapsed
-              updateNavCollapseState(!isNavBarCollapsed);
-            } else {
-              event.preventDefault();
-              event.stopPropagation();
-            }
-          }}
-        />
-        <ArrowRightStartOnRectangleIcon className='swap-on h-6 w-6' />
-        <ArrowLeftEndOnRectangleIcon className='swap-off h-6 w-6' />
-      </label>
+      <div className='flex items-center justify-between gap-2'>
+        <button onClick={() => setOpenSettingsModal(true)}>
+          <Cog8ToothIcon className='w-6 h-6' />
+        </button>
+        <label className='py-1 cursor-pointer swap swap-rotate'>
+          <input
+            // Overriding styles as Daisy UI input and React Hook form's input were conflicting
+            className='!focus:outline-none !focus:ring-0 !appearance-none !border-0 !bg-transparent !bg-none !outline-none'
+            type='checkbox'
+            onClick={(event) => {
+              if (collections.length) {
+                // since default is false for isNavBarCollapsed
+                updateNavCollapseState(!isNavBarCollapsed);
+              } else {
+                event.preventDefault();
+                event.stopPropagation();
+              }
+            }}
+          />
+          <ArrowRightStartOnRectangleIcon className='w-6 h-6 swap-on' />
+          <ArrowLeftEndOnRectangleIcon className='w-6 h-6 swap-off' />
+        </label>
+      </div>
       <div className='flex items-center justify-between gap-4 font-semibold'>
         <Tippy content='External Link' placement='top'>
           <a href='https://github.com/FlowTestAI/FlowTest' target='_blank' rel='noreferrer' className='link'>
@@ -62,6 +76,7 @@ const MainFooter = () => {
           </a>
         </Tippy>
       </div>
+      <SettingsModal closeFn={() => setOpenSettingsModal(false)} open={openSettingsModal} />
     </footer>
   );
 };