[feat-560] added description text and default button tooltip

added tooltip support in BsmButton component

assets/jsons/translations/de.json

@@ -139,7 +139,7 @@
             },
             "installation-folder": {
                 "title": "Installations-Ordner",
-                "description": "Ändere den Standardordner für Beat Saber-Versionen und andere kommende Funktionen.",
+                "description": "Change the folder that will contain all the content downloaded by BSManager.",
                 "choose-folder": "Ordner wählen"
             },
             "additional-content": {
@@ -771,8 +771,10 @@
         },
         "ask-install-path": {
             "title": "Installations Ordner",
+            "choose-folder-description": "Choose the folder that will contain all the content downloaded by BSManager.",
             "choose-folder": "Ordner Wählen",
-            "default": "Default"
+            "default": "Default",
+            "default-tooltip": "Defaults to your home folder"
         }
     },
     "maps": {

assets/jsons/translations/en.json

@@ -139,7 +139,7 @@
             },
             "installation-folder": {
                 "title": "Installation folder",
-                "description": "Change the default folder for Beat Saber versions and other upcoming features.",
+                "description": "Change the folder that will contain all the content downloaded by BSManager.",
                 "choose-folder": "Choose folder"
             },
             "proton-path": {
@@ -778,8 +778,10 @@
         },
         "ask-install-path": {
             "title": "Installation folder",
+            "choose-folder-description": "Choose the folder that will contain all the content downloaded by BSManager.",
             "choose-folder": "Choose folder",
-            "default": "Default"
+            "default": "Default",
+            "default-tooltip": "Defaults to your home folder"
         }
     },
     "maps": {

assets/jsons/translations/es.json

@@ -139,7 +139,7 @@
             },
             "installation-folder": {
                 "title": "Carpeta de instalación",
-                "description": "Cambia la carpeta por defecto para las versiones de Beat Saber y próximas funciones.",
+                "description": "Change the folder that will contain all the content downloaded by BSManager.",
                 "choose-folder": "Elige la carpeta"
             },
             "additional-content": {
@@ -771,8 +771,10 @@
         },
         "ask-install-path": {
             "title": "Carpeta de instalación",
+            "choose-folder-description": "Choose the folder that will contain all the content downloaded by BSManager.",
             "choose-folder": "Elige la carpeta",
-            "default": "Default"
+            "default": "Default",
+            "default-tooltip": "Defaults to your home folder"
         }
     },
     "maps": {

assets/jsons/translations/fr.json

@@ -139,7 +139,7 @@
             },
             "installation-folder": {
                 "title": "Dossier d'installation",
-                "description": "Change le dossier par défaut pour les versions de Beat Saber et d'autres fonctionnalités à venir.",
+                "description": "Change the folder that will contain all the content downloaded by BSManager.",
                 "choose-folder": "Choisir un dossier"
             },
             "additional-content": {
@@ -771,9 +771,11 @@
             "not-remind-me": "Ne plus me rappeler"
         },
         "ask-install-path": {
-           "title": "Dossier d'installation",
+            "title": "Dossier d'installation",
+            "choose-folder-description": "Choose the folder that will contain all the content downloaded by BSManager.",
             "choose-folder": "Choisir un dossier",
-            "default": "Default"
+            "default": "Default",
+            "default-tooltip": "Defaults to your home folder"
         }
     },
     "maps": {

assets/jsons/translations/ja.json

@@ -139,7 +139,7 @@
             },
             "installation-folder": {
                 "title": "インストールフォルダー",
-                "description": "BeatSaberのバージョンとその他の今後の機能を入れるフォルダを変更します。",
+                "description": "Change the folder that will contain all the content downloaded by BSManager.",
                 "choose-folder": "フォルダーを選択"
             },
             "additional-content": {
@@ -771,8 +771,10 @@
         },
         "ask-install-path": {
             "title": "インストールフォルダー",
+            "choose-folder-description": "Choose the folder that will contain all the content downloaded by BSManager.",
             "choose-folder": "フォルダーを選択",
-            "default": "Default"
+            "default": "Default",
+            "default-tooltip": "Defaults to your home folder"
         }
     },
     "maps": {

assets/jsons/translations/ru.json

@@ -139,7 +139,7 @@
             },
             "installation-folder": {
                 "title": "Папка установок",
-                "description": "Измените стандартную папку, где будут версии Beat Saber и прочее.",
+                "description": "Change the folder that will contain all the content downloaded by BSManager.",
                 "choose-folder": "Изменить папку"
             },
             "additional-content": {
@@ -770,8 +770,10 @@
         },
         "ask-install-path": {
             "title": "Папка установок",
+            "choose-folder-description": "Choose the folder that will contain all the content downloaded by BSManager.",
             "choose-folder": "Изменить папку",
-            "default": "Default"
+            "default": "Default",
+            "default-tooltip": "Defaults to your home folder"
         }
     },
     "maps": {

assets/jsons/translations/zh-tw.json

@@ -139,7 +139,7 @@
             },
             "installation-folder": {
                 "title": "安裝文件夾",
-                "description": "為 BeatSaber 不同版本及未來其他特性修改預設文件夾",
+                "description": "Change the folder that will contain all the content downloaded by BSManager.",
                 "choose-folder": "選擇文件夾"
             },
             "additional-content": {
@@ -771,8 +771,10 @@
         },
         "ask-install-path": {
             "title": "安裝文件夾",
+            "choose-folder-description": "Choose the folder that will contain all the content downloaded by BSManager.",
             "choose-folder": "選擇文件夾",
-            "default": "Default"
+            "default": "Default",
+            "default-tooltip": "Defaults to your home folder"
         }
     },
     "maps": {

assets/jsons/translations/zh.json

@@ -139,7 +139,7 @@
             },
             "installation-folder": {
                 "title": "安装文件夹",
-                "description": "为 BeatSaber 不同版本及未来其他特性修改默认文件夹",
+                "description": "Change the folder that will contain all the content downloaded by BSManager.",
                 "choose-folder": "选择文件夹"
             },
             "additional-content": {
@@ -771,8 +771,10 @@
         },
         "ask-install-path": {
             "title": "安装文件夹",
+            "choose-folder-description": "Choose the folder that will contain all the content downloaded by BSManager.",
             "choose-folder": "选择文件夹",
-            "default": "Default"
+            "default": "Default",
+            "default-tooltip": "Defaults to your home folder"
         }
     },
     "maps": {

src/renderer/components/modal/modal-types/ask-install-path.component.tsx

@@ -59,18 +59,14 @@ export const AskInstallPathModal: ModalComponent<{ installPath: string }, {}> =
                 onConfirmButtonPressed();
             }}>
 
-            <h1 className="
-                tracking-wide w-full
-                uppercase text-3xl text-center text-gray-800 dark:text-gray-200
-            ">
+            <h1 className="tracking-wide w-full uppercase text-3xl text-center text-gray-800 dark:text-gray-200">
                 {t("modals.ask-install-path.title")}
             </h1>
 
-            <div className="
-                relative rounded-md pl-2 py-1 my-3
-                flex items-center justify-between
-                w-full h-8 bg-light-main-color-1 dark:bg-main-color-1
-            ">
+            <p className="my-3 text-sm text-gray-600 dark:text-gray-400">
+                {t("modals.ask-install-path.choose-folder-description")}
+            </p>
+            <div className="relative rounded-md pl-2 py-1 my-3 flex items-center justify-between w-full h-8 bg-light-main-color-1 dark:bg-main-color-1">
                 <span className="block text-ellipsis overflow-hidden min-w-0" title={installPath}>
                     {installPath}
                 </span>
@@ -82,17 +78,18 @@ export const AskInstallPathModal: ModalComponent<{ installPath: string }, {}> =
                 />
             </div>
 
-            <div className="grid grid-flow-col grid-cols-4 row-start-3 gap-4">
+            <div className="grid grid-flow-col grid-cols-3 gap-4">
                 <BsmButton
                     typeColor="cancel"
-                    className="col-start-3 rounded-md text-center transition-all"
+                    className="h-8 col-start-2 rounded-md text-center transition-all"
                     onClick={onDefaultButtonPressed}
                     withBar={false}
                     text="modals.ask-install-path.default"
+                    tooltip="modals.ask-install-path.default-tooltip"
                 />
                 <BsmButton
                     typeColor="primary"
-                    className="col-start-4 z-0 px-1 rounded-md text-center transition-all"
+                    className="h-8 col-start-3 z-0 px-1 rounded-md text-center transition-all"
                     type="submit"
                     withBar={false}
                     text="misc.confirm"

src/renderer/components/shared/bsm-button.component.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from "renderer/hooks/use-translation.hook";
 import { useClickOutside } from "renderer/hooks/use-click-outside.hook";
 import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
 import { getCorrectTextColor } from "renderer/helpers/correct-text-color";
+import Tippy from "@tippyjs/react";
 
 export type BsmButtonType = "primary" | "secondary" | "success" | "cancel" | "error" | "none";
 
@@ -28,9 +29,17 @@ type Props = {
     title?: string;
     iconColor?: string;
     textClassName?: string;
+    tooltip?: string;
+    tooltipIcon?: BsmIconType;
 };
 
-export const BsmButton = forwardRef<unknown, Props>(({ className, style, iconStyle, imgClassName, iconClassName, icon, image, text, type, active, withBar = true, disabled, onClickOutside, onClick, typeColor, color, title, iconColor, textClassName }, forwardedRef) => {
+export const BsmButton = forwardRef<unknown, Props>(({
+    className, style, iconStyle, imgClassName, iconClassName,
+    icon, image, text, type, active, withBar = true, disabled,
+    onClickOutside, onClick,
+    typeColor, color, title, iconColor, textClassName,
+    tooltip, tooltipIcon
+}, forwardedRef) => {
     const t = useTranslation();
     const { firstColor, secondColor } = useThemeColor();
     const ref = useRef<HTMLDivElement>(null);
@@ -84,18 +93,35 @@ export const BsmButton = forwardRef<unknown, Props>(({ className, style, iconSty
 
     const handleClick = (e: MouseEvent<HTMLDivElement>) => !disabled && onClick?.(e);
 
+    const renderTooltip = () => {
+        return (
+            <Tippy
+                className="!bg-main-color-1"
+                content={t(tooltip)}
+                delay={[300, 0]}
+                arrow={false}
+            >
+                <div className="h-[20px] w-[20px] p-1.5 rounded-full cursor-help bg-light-main-color-1 dark:bg-main-color-3 hover:brightness-110">
+                    <BsmIcon className="w-full h-full" icon={tooltipIcon || "info"} />
+                </div>
+            </Tippy>
+        );
+    }
+
     return (
         <div ref={setRef} onClick={handleClick} title={t(title)} className={`${className} overflow-hidden group ${!withBar && !disabled && (!!typeColor || !!color) && "hover:brightness-[1.15]"} ${disabled ? "brightness-75 cursor-not-allowed" : "cursor-pointer"} ${renderTypeColor}`} style={{ ...style, backgroundColor: primaryColor || color }}>
             {image && <BsmImage image={image} className={imgClassName} />}
             {icon && <BsmIcon icon={icon} className={iconClassName ?? "size-full text-gray-800 dark:text-white"} style={{ ...(iconStyle ?? {}), color: (iconColor || textColor) }} />}
             {text &&
                 (type === "submit" ? (
-                    <button type="submit" className={textClassName || "size-full"} style={{ ...(!!textColor && { color: textColor }) }}>
-                        {t(text)}
+                    <button type="submit" className={`h-full flex items-center justify-center gap-x-2 ${!textClassName && "size-full"}`} style={{ ...(!!textColor && { color: textColor }) }}>
+                        <span className={textClassName}>{t(text)}</span>
+                        {tooltip && renderTooltip()}
                     </button>
                 ) : (
-                    <span className={textClassName} style={{ ...(!!textColor && { color: `${textColor}` }) }}>
-                        {t(text)}
+                    <span className="h-full flex items-center justify-center gap-x-2" style={{ ...(!!textColor && { color: `${textColor}` }) }}>
+                        <span className={textClassName}>{t(text)}</span>
+                        {tooltip && renderTooltip()}
                     </span>
                 ))}
             {withBar && (