IconWithTooltip commonality

apps/app/src/components/Me/ColorModeSettings.tsx

@@ -4,6 +4,8 @@ import { useTranslation } from 'react-i18next';
 
 import { Themes, useNextThemes } from '~/stores/use-next-themes';
 
+import { IconWithTooltip } from './IconWIthTooltip';
+
 export const ColorModeSettings = (): JSX.Element => {
   const { t } = useTranslation('commons');
 
@@ -33,7 +35,9 @@ export const ColorModeSettings = (): JSX.Element => {
         <div className="col-md-6">
 
           <div className="d-flex align-items-center mb-3">
-            <span className="material-symbols-outlined me-2">light_mode</span>
+            <IconWithTooltip id="iwt-light" label="Light">
+              <span className="material-symbols-outlined me-2">light_mode</span>
+            </IconWithTooltip>
             <div className="form-check form-switch">
               <input
                 id="swUserPreference"
@@ -44,7 +48,9 @@ export const ColorModeSettings = (): JSX.Element => {
                 onChange={e => userPreferenceSwitchModifiedHandler(e.target.checked)}
               />
             </div>
-            <span className="material-symbols-outlined">dark_mode</span>
+            <IconWithTooltip id="iwt-dark" label="Dark">
+              <span className="material-symbols-outlined">dark_mode</span>
+            </IconWithTooltip>
 
             <label className="form-label form-check-label ms-2 mt-2" htmlFor="swUserPreference">
               カラーモードを選択する

apps/app/src/components/Me/IconWIthTooltip.tsx

@@ -0,0 +1,21 @@
+import { UncontrolledTooltip } from 'reactstrap';
+
+type Props = {
+  id: string,
+  label: string,
+  children: JSX.Element,
+  additionalClasses?: string
+}
+
+export const IconWithTooltip = (props: Props): JSX.Element => {
+  const {
+    id, label, children, additionalClasses,
+  } = props;
+
+  return (
+    <>
+      <div id={id} className={`${additionalClasses != null ? additionalClasses : ''}`}>{children}</div>
+      <UncontrolledTooltip placement="bottom" fade={false} target={id}>{label}</UncontrolledTooltip>
+    </>
+  );
+};

apps/app/src/components/Me/UISettings.tsx

@@ -1,30 +1,18 @@
 import { useCallback } from 'react';
 
 import { useTranslation } from 'react-i18next';
-import { UncontrolledTooltip } from 'reactstrap';
 
 import { updateUserUISettings } from '~/client/services/user-ui-settings';
 import { toastError, toastSuccess } from '~/client/util/toastr';
 import { useCollapsedContentsOpened, usePreferCollapsedMode, useSidebarMode } from '~/stores/ui';
 
+import { IconWithTooltip } from './IconWIthTooltip';
 import SidebarCollapsedIcon from './SidebarCollapsedIcon';
 import SidebarDockIcon from './SidebarDockIcon';
 
+
 import styles from './UISettings.module.scss';
 
-const IconWithTooltip = ({
-  id, label, children, additionalClasses,
-}: {
-id: string,
-label: string,
-children: JSX.Element,
-additionalClasses: string
-}) => (
-  <>
-    <div id={id} className={`${additionalClasses != null ? additionalClasses : ''}`}>{children}</div>
-    <UncontrolledTooltip placement="bottom" fade={false} target={id}>{label}</UncontrolledTooltip>
-  </>
-);
 
 export const UISettings = (): JSX.Element => {
   const { t } = useTranslation();
@@ -55,6 +43,7 @@ export const UISettings = (): JSX.Element => {
       <>
         <div className="d-flex align-items-start">
           <div className="d-flex align-items-center">
+
             <IconWithTooltip
               id="iwt-sidebar-collapsed"
               label="Collapsed"