From 3793538ba42bf2ae40f45670de4dca63d08c5b96 Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Sat, 15 Jun 2024 23:27:04 +0300
Subject: [PATCH] Use tooltip component for detailed error message

---
 frontend/src/Components/Form/Form.js | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/frontend/src/Components/Form/Form.js b/frontend/src/Components/Form/Form.js
index 2f5f77a9a..1856e2b16 100644
--- a/frontend/src/Components/Form/Form.js
+++ b/frontend/src/Components/Form/Form.js
@@ -2,7 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Alert from 'Components/Alert';
 import Icon from 'Components/Icon';
-import { icons, kinds } from 'Helpers/Props';
+import Tooltip from 'Components/Tooltip/Tooltip';
+import { icons, kinds, tooltipPositions } from 'Helpers/Props';
 import styles from './Form.css';
 
 function Form(props) {
@@ -30,10 +31,12 @@ function Form(props) {
 
                     {
                       error.detailedDescription ?
-                        <Icon
-                          containerClassName={styles.details}
-                          name={icons.INFO}
-                          title={error.detailedDescription}
+                        <Tooltip
+                          className={styles.details}
+                          anchor={<Icon name={icons.INFO} />}
+                          tooltip={error.detailedDescription}
+                          kind={kinds.INVERSE}
+                          position={tooltipPositions.TOP}
                         /> :
                         null
                     }
@@ -53,10 +56,12 @@ function Form(props) {
 
                     {
                       warning.detailedDescription ?
-                        <Icon
-                          containerClassName={styles.details}
-                          name={icons.INFO}
-                          title={warning.detailedDescription}
+                        <Tooltip
+                          className={styles.details}
+                          anchor={<Icon name={icons.INFO} />}
+                          tooltip={warning.detailedDescription}
+                          kind={kinds.INVERSE}
+                          position={tooltipPositions.TOP}
                         /> :
                         null
                     }