feat: add tooltips

package.json

@@ -53,6 +53,7 @@
     "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
+    "react-tooltip": "^4.2.21",
     "react-topbar-progress-indicator": "^4.1.1",
     "remirror": "^1.0.77",
     "typescript": "^4.6.3",

src/Components/Inputs/TextEditor/Toolbar/ToolButton.tsx

@@ -47,7 +47,9 @@ export default function ToolButton({ cmd: _cmd, classes }: Props) {
 
     if (_cmd === 'heading') {
         return <Menu menuButton={
-            <MenuButton className={`
+            <MenuButton
+                data-tip={'Headings'}
+                className={`
             ${buttonClasses}
             ${active.heading({}) && activeClasses}
             ${commands.toggleHeading.enabled() ? enabledClasses : disabledClasses}
@@ -71,10 +73,11 @@ export default function ToolButton({ cmd: _cmd, classes }: Props) {
 
 
     if (isCommand(_cmd)) {
-        const { activeCmd, cmd, Icon } = cmdToBtn[_cmd]
+        const { activeCmd, cmd, tip, Icon } = cmdToBtn[_cmd]
         return (
             <button
                 type='button'
+                data-tip={tip}
                 className={`
                     ${buttonClasses}
                     ${(activeCmd && active[activeCmd]()) && activeClasses}
@@ -96,16 +99,19 @@ const cmdToBtn = {
     'bold': {
         cmd: 'toggleBold',
         activeCmd: 'bold',
+        tip: "Bold",
         Icon: FiBold
     },
     'italic': {
         cmd: 'toggleItalic',
         activeCmd: 'italic',
+        tip: "Italic",
         Icon: FiItalic
     },
     underline: {
         cmd: 'toggleUnderline',
         activeCmd: 'underline',
+        tip: "Underline",
         Icon: FiUnderline
 
     },
@@ -117,48 +123,57 @@ const cmdToBtn = {
     leftAlign: {
         cmd: 'leftAlign',
         activeCmd: null,
+        tip: "Left Align",
         Icon: FiAlignLeft,
     },
     centerAlign: {
         cmd: 'centerAlign',
         activeCmd: null,
+        tip: "Center Align",
         Icon: FiAlignCenter,
     },
     rightAlign: {
         cmd: 'rightAlign',
         activeCmd: null,
+        tip: "Right Align",
         Icon: FiAlignRight,
     },
 
     bulletList: {
         cmd: 'toggleBulletList',
         activeCmd: 'bulletList',
+        tip: "Bullets List",
         Icon: FaListUl,
     },
     orderedList: {
         cmd: 'toggleOrderedList',
         activeCmd: 'orderedList',
+        tip: "Numbered List",
         Icon: FaListOl,
     },
     undo: {
         cmd: 'undo',
         activeCmd: null,
+        tip: "Undo",
         Icon: FaUndo,
     },
 
     redo: {
         cmd: 'redo',
         activeCmd: null,
+        tip: "Redo",
         Icon: FaRedo,
     },
     code: {
         cmd: 'toggleCode',
         activeCmd: 'code',
+        tip: "Code",
         Icon: FiCode,
     },
     codeBlock: {
         cmd: 'toggleCodeBlock',
         activeCmd: 'codeBlock',
+        tip: "Code Block",
         Icon: BiCodeCurly,
     },
 

src/utils/Wrapper.tsx

@@ -7,9 +7,11 @@ import { useAppDispatch, useResizeListener } from './hooks';
 import { useCallback, useLayoutEffect } from 'react';
 import { setIsMobileScreen } from 'src/redux/features/ui.slice';
 import { isMobileScreen } from './helperFunctions';
+import ReactTooltip from 'react-tooltip';
 
 import 'react-multi-carousel/lib/styles.css';
 import 'react-loading-skeleton/dist/skeleton.css'
+import THEME from './theme';
 
 let basename = '/';
 
@@ -23,7 +25,7 @@ export const useWrapperSetup = () => {
     useLayoutEffect(() => {
         // Setting CSS Vars
         let root = document.documentElement;
-        // root.style.setProperty('--primary', THEME.colors.primary[500]);
+        root.style.setProperty('--primary', THEME.colors.primary[500]);
         // root.style.setProperty('--secondary', THEME.colors.secondary[500]);
     }, [])
 
@@ -38,12 +40,18 @@ export const useWrapperSetup = () => {
 export default function Wrapper(props: any) {
 
     return (
-        <ApolloProvider client={apolloClient}>
-            <Provider store={store}>
-                <BrowserRouter basename={basename}>
-                    {props.children}
-                </BrowserRouter>
-            </Provider>
-        </ApolloProvider>
+        <>
+            <ApolloProvider client={apolloClient}>
+                <Provider store={store}>
+                    <BrowserRouter basename={basename}>
+                        {props.children}
+                    </BrowserRouter>
+                </Provider>
+            </ApolloProvider>
+            <ReactTooltip
+                effect='solid'
+                delayShow={1000}
+            />
+        </>
     )
 }

src/utils/storybook/decorators.tsx

@@ -8,6 +8,7 @@ import { ModifyArgs } from './utils';
 import Modal from 'src/Components/Modals/Modal/Modal';
 import { worker } from 'src/mocks/browser'
 import { AnimatePresence, motion } from 'framer-motion';
+import ReactTooltip from 'react-tooltip';
 
 // Add the global stuff first (index.ts)
 // -------------------------------------------
@@ -45,17 +46,23 @@ export const WrapperDecorator: DecoratorFn = (Story, options) => {
 
 
     return (
-        <ApolloProvider client={apolloClient}>
-            <Provider store={store}>
-                <Suspense fallback={<h2>Loading</h2>}>
-                    <MemoryRouter initialEntries={[modifyArgs.router?.currentPath!]}>
-                        <Routes>
-                            <Route path={modifyArgs.router?.routePath} element={<Story {...options} />} />
-                        </Routes>
-                    </MemoryRouter>
-                </Suspense>
-            </Provider>
-        </ApolloProvider>
+        <>
+            <ApolloProvider client={apolloClient}>
+                <Provider store={store}>
+                    <Suspense fallback={<h2>Loading</h2>}>
+                        <MemoryRouter initialEntries={[modifyArgs.router?.currentPath!]}>
+                            <Routes>
+                                <Route path={modifyArgs.router?.routePath} element={<Story {...options} />} />
+                            </Routes>
+                        </MemoryRouter>
+                    </Suspense>
+                </Provider>
+            </ApolloProvider>
+            <ReactTooltip
+                effect='solid'
+                delayShow={1000}
+            />
+        </>
     );
 }