feat: add tooltips for icon buttons

client/src/components/common/HomeActions/RightSide/RightSide.jsx

@@ -6,7 +6,9 @@
 import React, { useCallback } from 'react';
 import classNames from 'classnames';
 import { useDispatch, useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
 import { Icon } from 'semantic-ui-react';
+import { Tooltip } from '../../../../lib/custom-ui';
 import { usePopup } from '../../../../lib/popup';
 
 import selectors from '../../../../selectors';
@@ -17,12 +19,18 @@ import SelectOrderStep from './SelectOrderStep';
 
 import styles from './RightSide.module.scss';
 
+const LABEL_BY_VIEW = {
+  [HomeViews.GRID_PROJECTS]: 'common.gridProjects',
+  [HomeViews.GROUPED_PROJECTS]: 'common.groupedProjects',
+};
+
 const RightSide = React.memo(() => {
   const currentView = useSelector(selectors.selectHomeView); // TODO: rename?
   const currentOrder = useSelector(selectors.selectProjectsOrder); // TODO: rename?
   const isHiddenVisible = useSelector(selectors.selectIsHiddenProjectsVisible);
 
   const dispatch = useDispatch();
+  const [t] = useTranslation();
 
   const handleSelectViewClick = useCallback(
     ({ currentTarget: { value: view } }) => {
@@ -47,34 +55,47 @@ const RightSide = React.memo(() => {
   return (
     <>
       <div className={styles.action}>
-        <button
-          type="button"
-          className={classNames(styles.button)}
-          onClick={handleToggleHiddenClick}
+        <Tooltip
+          content={t(isHiddenVisible ? 'action.hideHiddenProjects' : 'common.showHiddenProjects')}
         >
-          <Icon fitted name={isHiddenVisible ? 'eye slash' : 'eye'} />
-        </button>
+          <button
+            type="button"
+            className={classNames(styles.button)}
+            onClick={handleToggleHiddenClick}
+          >
+            <Icon fitted name={isHiddenVisible ? 'eye slash' : 'eye'} />
+          </button>
+        </Tooltip>
       </div>
       <div className={styles.action}>
         <SelectOrderPopup value={currentOrder} onSelect={handleOrderSelect}>
-          <button type="button" className={styles.button}>
-            <Icon fitted name={ProjectOrderIcons[currentOrder]} />
-          </button>
+          <Tooltip content={t('common.selectOrder', { context: 'title' })}>
+            <button type="button" className={styles.button}>
+              <Icon fitted name={ProjectOrderIcons[currentOrder]} />
+            </button>
+          </Tooltip>
         </SelectOrderPopup>
       </div>
       <div className={styles.action}>
         <div className={styles.buttonGroup}>
           {[HomeViews.GRID_PROJECTS, HomeViews.GROUPED_PROJECTS].map((view) => (
-            <button
+            <Tooltip
               key={view}
-              type="button"
-              value={view}
+              content={t('action.switchToView', {
+                view: t(LABEL_BY_VIEW[view]),
+              })}
               disabled={view === currentView}
-              className={styles.button}
-              onClick={handleSelectViewClick}
             >
-              <Icon fitted name={HomeViewIcons[view]} />
-            </button>
+              <button
+                type="button"
+                value={view}
+                disabled={view === currentView}
+                className={styles.button}
+                onClick={handleSelectViewClick}
+              >
+                <Icon fitted name={HomeViewIcons[view]} />
+              </button>
+            </Tooltip>
           ))}
         </div>
       </div>