From 339166a50ab2a7a8684ba054d37305eed9d44977 Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongg1409@gmail>
Date: Fri, 6 Sep 2024 10:52:43 +0100
Subject: [PATCH 01/35] first skeleton for the feedback component

Signed-off-by: Huong Nguyen <huongg1409@gmail>
---
 package.json                                  |  3 +-
 src/components/feedback-form/feedback-form.js | 13 +++++++
 src/components/feedback-form/list.js          | 34 +++++++++++++++++++
 src/components/feedback-form/stars.js         | 33 ++++++++++++++++++
 src/components/feedback-form/stars.scss       |  6 ++++
 src/components/flowchart/flowchart.js         |  6 ++++
 src/components/icons/star.js                  | 12 +++++++
 7 files changed, 106 insertions(+), 1 deletion(-)
 create mode 100644 src/components/feedback-form/feedback-form.js
 create mode 100644 src/components/feedback-form/list.js
 create mode 100644 src/components/feedback-form/stars.js
 create mode 100644 src/components/feedback-form/stars.scss
 create mode 100644 src/components/icons/star.js

diff --git a/package.json b/package.json
index fcfbf0c864..c086017a5b 100644
--- a/package.json
+++ b/package.json
@@ -73,6 +73,7 @@
     "highlight.js": "^10.7.3",
     "kiwi.js": "^1.1.3",
     "lodash": "^4.17.21",
+    "lodash.range": "^3.2.0",
     "plotly.js-dist-min": "^2.26.0",
     "react-content-loader": "^6.2.0",
     "react-csv": "^2.2.2",
@@ -172,4 +173,4 @@
     "not op_mini all"
   ],
   "snyk": true
-}
\ No newline at end of file
+}
diff --git a/src/components/feedback-form/feedback-form.js b/src/components/feedback-form/feedback-form.js
new file mode 100644
index 0000000000..6e9e383bf4
--- /dev/null
+++ b/src/components/feedback-form/feedback-form.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import Modal from '../ui/modal';
+import { Stars } from './stars';
+
+export const FeedbackForm = ({ title, onClose }) => {
+  return (
+    <div className="feedback-form-wrapper">
+      <Modal closeModal={onClose} title={title} visible={true}>
+        <Stars />
+      </Modal>
+    </div>
+  );
+};
diff --git a/src/components/feedback-form/list.js b/src/components/feedback-form/list.js
new file mode 100644
index 0000000000..89be76e9bf
--- /dev/null
+++ b/src/components/feedback-form/list.js
@@ -0,0 +1,34 @@
+import React, { useCallback } from 'react';
+
+export const List = ({
+  data = [],
+  render,
+  beforeItemsRender,
+  afterItemsRender,
+  onItemClick,
+  ...rest
+}) => {
+  const getItemPropsCallback = useCallback(
+    (postfix) => ({
+      'data-element-name': `item:${postfix}`,
+    }),
+    []
+  );
+
+  return (
+    <>
+      {beforeItemsRender ? beforeItemsRender() : null}
+      {data?.map((item, index) =>
+        render({
+          index,
+          item,
+          length: data.length,
+          getItemProps: getItemPropsCallback,
+          onItemClick,
+          ...rest,
+        })
+      )}
+      {afterItemsRender ? afterItemsRender() : null}
+    </>
+  );
+};
diff --git a/src/components/feedback-form/stars.js b/src/components/feedback-form/stars.js
new file mode 100644
index 0000000000..6569eb9b39
--- /dev/null
+++ b/src/components/feedback-form/stars.js
@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from 'react';
+import range from 'lodash/range';
+import IconButton from '../ui/icon-button';
+import StarIcon from '../icons/star';
+import { List } from './list';
+
+import './stars.scss';
+
+export const Stars = ({
+  onClick,
+  selectedRating = -1,
+  name,
+  className,
+  size = 24,
+  isActive = true,
+  starsCount = 5,
+}) => {
+  return (
+    <ul className={'stars-wrapper'} data-element-name={name}>
+      <List
+        data={range(1, starsCount + 1).reverse()}
+        render={({ item, index }) => (
+          <IconButton
+            key={index}
+            aria-disabled={!isActive}
+            onClick={() => isActive && onClick && onClick(item)}
+            icon={StarIcon}
+          />
+        )}
+      />
+    </ul>
+  );
+};
diff --git a/src/components/feedback-form/stars.scss b/src/components/feedback-form/stars.scss
new file mode 100644
index 0000000000..29beeee4d3
--- /dev/null
+++ b/src/components/feedback-form/stars.scss
@@ -0,0 +1,6 @@
+.stars-wrapper {
+  display: flex;
+  flex-direction: row;
+  list-style-type: none;
+  padding: 0;
+}
diff --git a/src/components/flowchart/flowchart.js b/src/components/flowchart/flowchart.js
index f8abcdf26b..496ad636a8 100644
--- a/src/components/flowchart/flowchart.js
+++ b/src/components/flowchart/flowchart.js
@@ -46,7 +46,9 @@ import { getDataTestAttribute } from '../../utils/get-data-test-attribute';
 import Tooltip from '../ui/tooltip';
 import { SlicedPipelineActionBar } from '../sliced-pipeline-action-bar/sliced-pipeline-action-bar';
 import { SlicedPipelineNotification } from '../sliced-pipeline-notification/sliced-pipeline-notification';
+import { FeedbackForm } from '../feedback-form/feedback-form';
 import './styles/flowchart.scss';
+import { Feed } from '@mui/icons-material';
 
 /**
  * Display a pipeline flowchart, mostly rendered with D3
@@ -871,6 +873,9 @@ export class FlowChart extends Component {
           })}
           ref={this.layerNamesRef}
         />
+
+        <FeedbackForm title={'Rate your experience with us'} />
+
         {showSlicingNotification && visibleSlicing && (
           <SlicedPipelineNotification
             notification={
@@ -879,6 +884,7 @@ export class FlowChart extends Component {
             visibleSidebar={visibleSidebar}
           />
         )}
+
         {numberOfNodesInSlicedPipeline > 0 && runCommand.length > 0 && (
           <div ref={this.slicedPipelineActionBarRef}>
             <SlicedPipelineActionBar
diff --git a/src/components/icons/star.js b/src/components/icons/star.js
new file mode 100644
index 0000000000..af8d11d951
--- /dev/null
+++ b/src/components/icons/star.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const StarIcon = ({ className }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      d="m12 16.8-4.626 3.376a.5.5 0 0 1-.77-.559l1.782-5.443-4.64-3.356a.5.5 0 0 1 .294-.905l5.726.013 1.758-5.45a.5.5 0 0 1 .952 0l1.758 5.45 5.726-.013a.501.501 0 0 1 .294.905l-4.64 3.356 1.782 5.443a.5.5 0 0 1-.77.56L12 16.8z"
+    />
+  </svg>
+);
+
+export default StarIcon;

From 131f1381f5c4820c584fa1e70cd5deeedba28d82 Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongg1409@gmail>
Date: Fri, 6 Sep 2024 16:11:46 +0100
Subject: [PATCH 02/35] star component

Signed-off-by: Huong Nguyen <huongg1409@gmail>
---
 src/components/feedback-form/feedback-form.js | 11 ++---
 src/components/feedback-form/stars.js         | 42 ++++++++-----------
 src/components/feedback-form/stars.scss       |  6 +++
 3 files changed, 28 insertions(+), 31 deletions(-)

diff --git a/src/components/feedback-form/feedback-form.js b/src/components/feedback-form/feedback-form.js
index 6e9e383bf4..f845470a41 100644
--- a/src/components/feedback-form/feedback-form.js
+++ b/src/components/feedback-form/feedback-form.js
@@ -3,11 +3,8 @@ import Modal from '../ui/modal';
 import { Stars } from './stars';
 
 export const FeedbackForm = ({ title, onClose }) => {
-  return (
-    <div className="feedback-form-wrapper">
-      <Modal closeModal={onClose} title={title} visible={true}>
-        <Stars />
-      </Modal>
-    </div>
-  );
+            <Stars 
+                selectedRating={starNumber}
+                onClick={setStars}
+            />
 };
diff --git a/src/components/feedback-form/stars.js b/src/components/feedback-form/stars.js
index 6569eb9b39..4d7a75191e 100644
--- a/src/components/feedback-form/stars.js
+++ b/src/components/feedback-form/stars.js
@@ -7,27 +7,21 @@ import { List } from './list';
 import './stars.scss';
 
 export const Stars = ({
-  onClick,
-  selectedRating = -1,
-  name,
-  className,
-  size = 24,
-  isActive = true,
-  starsCount = 5,
-}) => {
-  return (
-    <ul className={'stars-wrapper'} data-element-name={name}>
-      <List
-        data={range(1, starsCount + 1).reverse()}
-        render={({ item, index }) => (
-          <IconButton
-            key={index}
-            aria-disabled={!isActive}
-            onClick={() => isActive && onClick && onClick(item)}
-            icon={StarIcon}
-          />
-        )}
-      />
-    </ul>
-  );
-};
+    onClick,
+    selectedRating = -1,
+    className,
+    starsCount = 5,
+  }) => {
+    return (
+      <section className={'stars-wrapper ' + className}>
+        {Array.from({ length: starsCount }, (_, index) => (
+            <IconButton
+             key={index} 
+             className={index < selectedRating ? 'active' : ''}
+              onClick={() => onClick && onClick(index + 1)}
+              icon={StarIcon}
+            />
+        ))}
+      </section>
+    );
+  };
\ No newline at end of file
diff --git a/src/components/feedback-form/stars.scss b/src/components/feedback-form/stars.scss
index 29beeee4d3..d6d9424fbe 100644
--- a/src/components/feedback-form/stars.scss
+++ b/src/components/feedback-form/stars.scss
@@ -4,3 +4,9 @@
   list-style-type: none;
   padding: 0;
 }
+
+.active {
+  path {
+    fill: yellow;
+  }
+}

From d34adc1f25d33cb6c6231f5f98adad41ac557467 Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongg1409@gmail>
Date: Fri, 6 Sep 2024 17:19:36 +0100
Subject: [PATCH 03/35] include feedback button

Signed-off-by: Huong Nguyen <huongg1409@gmail>
---
 .../feedback-button/feedback-button.js        | 15 ++++
 .../feedback-button/feedback-button.scss      | 20 ++++++
 src/components/feedback-form/feedback-form.js | 72 ++++++++++++++++++-
 .../feedback-form/feedback-form.scss          | 28 ++++++++
 src/components/feedback-form/stars.js         |  4 +-
 src/components/flowchart/flowchart.js         | 15 ++--
 6 files changed, 145 insertions(+), 9 deletions(-)
 create mode 100644 src/components/feedback-button/feedback-button.js
 create mode 100644 src/components/feedback-button/feedback-button.scss
 create mode 100644 src/components/feedback-form/feedback-form.scss

diff --git a/src/components/feedback-button/feedback-button.js b/src/components/feedback-button/feedback-button.js
new file mode 100644
index 0000000000..3d2436bbb6
--- /dev/null
+++ b/src/components/feedback-button/feedback-button.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import classnames from 'classnames';
+
+import './feedback-button.scss';
+
+export const FeedbackButton = ({ onClick, visible }) => {
+    return (
+        <button 
+        className={classnames('feedback-button', {
+            'feedback-button--visible': visible,
+        })} onClick={onClick}>
+            Feedback
+        </button>
+    )
+}
\ No newline at end of file
diff --git a/src/components/feedback-button/feedback-button.scss b/src/components/feedback-button/feedback-button.scss
new file mode 100644
index 0000000000..f88be94dd6
--- /dev/null
+++ b/src/components/feedback-button/feedback-button.scss
@@ -0,0 +1,20 @@
+.feedback-button {
+    position: fixed;
+    right: -2%;
+    top: 50%;
+    transform: translateY(-50%) rotate(-90deg);
+    width: 100px;
+    height: 40px;
+    background-color: #007bff; /* Example background color */
+    color: white; /* Text color */
+    border: none;
+    cursor: pointer;
+    text-align: center;
+    line-height: 40px; /* Aligns text vertically */
+    font-size: 16px; /* Example font size */
+    opacity: 0;
+}
+
+.feedback-button--visible {
+    opacity: 1;
+}
\ No newline at end of file
diff --git a/src/components/feedback-form/feedback-form.js b/src/components/feedback-form/feedback-form.js
index f845470a41..6f725f2397 100644
--- a/src/components/feedback-form/feedback-form.js
+++ b/src/components/feedback-form/feedback-form.js
@@ -1,10 +1,80 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Modal from '../ui/modal';
+import Button from '../ui/button';
 import { Stars } from './stars';
+import { callSlack } from '../../utils';
+
+import './feedback-form.scss';
 
 export const FeedbackForm = ({ title, onClose }) => {
+    const [isSubmitted, setSubmitted] = useState(false);
+    const [isTextareaActive, setTextareaActivity] = useState(false);
+    const [starNumber, setStars] = useState(0);
+    const [feedbackText, setFeedbackText] = useState('');
+
+    const onSubmit = async (e) => {
+        e.preventDefault();
+      
+        if (starNumber === 0 || !feedbackText) {
+          return;
+        }
+      
+        const data = {
+          text: `Feedback: ${feedbackText}\nRating: ${starNumber} stars`
+        };
+        
+        try {
+            const request = await callSlack({
+                data
+              });
+        
+            if (request.ok) {
+                alert('Feedback submitted successfully');
+                setSubmitted(true);
+            }
+        } catch (error) {
+          alert('Feedback submission failed');
+          console.error('Error submitting feedback:', error);
+        }
+    };
+
+
+  // Function to handle input changes
+  const handleTextArea = (event) => {
+    setFeedbackText(event.target.value);
+  };
+
+  console.log(starNumber, 'starNumber')
+
+  if (isSubmitted) {
+    return (
+        <div className="feedback-form--wrapper">
+            <Modal closeModal={onClose} title={title} visible={true}>
+                Thank you for submitting your feedback! 🙏
+            </Modal>
+    </div>
+    )
+  } else {
+    return (
+        <div className="feedback-form--wrapper">
+          <Modal closeModal={onClose} title={title} visible={true}>
             <Stars 
                 selectedRating={starNumber}
                 onClick={setStars}
             />
+    
+            <form className='feedback-form--text-area'>
+              <textarea
+                value={feedbackText}
+                onChange={handleTextArea}
+                style={{ width: '100%', border: 'none', outline: 'none', resize: 'none' }}
+                rows="4"
+                placeholder="Tell us your experience"
+              />
+              <Button type="submit" size='small' onClick={onSubmit}>Submit</Button>
+            </form>
+          </Modal>
+        </div>
+      );
+  }
 };
diff --git a/src/components/feedback-form/feedback-form.scss b/src/components/feedback-form/feedback-form.scss
new file mode 100644
index 0000000000..454a99cd44
--- /dev/null
+++ b/src/components/feedback-form/feedback-form.scss
@@ -0,0 +1,28 @@
+@use '../../styles/variables' as colors;
+
+.kui-theme--dark {
+    --feedback-form--text-area--background: #{colors.$slate-200};
+    --feedback-form--text-area--color: #{colors.$white-0};
+  }
+  
+  .kui-theme--light {
+    --feedback-form--text-area--background: #{colors.$white-0};
+    --feedback-form--text-area--color: #{colors.$black-900};
+  }
+
+.feedback-form--text-area {
+    margin-top: 20px;
+
+    textarea {
+        background-color: transparent;
+        color: var(--feedback-form--text-area--color);
+        border: 1px solid var(--feedback-form--text-area--color) !important;
+        padding: 12px;
+        width: 100%;
+    }
+}
+.feedback-form--wrapper {
+    .button__btn {
+        margin-top: 12px;
+    }
+}
\ No newline at end of file
diff --git a/src/components/feedback-form/stars.js b/src/components/feedback-form/stars.js
index 4d7a75191e..6066f9a95a 100644
--- a/src/components/feedback-form/stars.js
+++ b/src/components/feedback-form/stars.js
@@ -1,8 +1,6 @@
-import React, { useEffect, useState } from 'react';
-import range from 'lodash/range';
+import React from 'react';
 import IconButton from '../ui/icon-button';
 import StarIcon from '../icons/star';
-import { List } from './list';
 
 import './stars.scss';
 
diff --git a/src/components/flowchart/flowchart.js b/src/components/flowchart/flowchart.js
index 496ad636a8..ca8bc4baeb 100644
--- a/src/components/flowchart/flowchart.js
+++ b/src/components/flowchart/flowchart.js
@@ -47,8 +47,9 @@ import Tooltip from '../ui/tooltip';
 import { SlicedPipelineActionBar } from '../sliced-pipeline-action-bar/sliced-pipeline-action-bar';
 import { SlicedPipelineNotification } from '../sliced-pipeline-notification/sliced-pipeline-notification';
 import { FeedbackForm } from '../feedback-form/feedback-form';
+import {FeedbackButton} from '../feedback-button/feedback-button';
+
 import './styles/flowchart.scss';
-import { Feed } from '@mui/icons-material';
 
 /**
  * Display a pipeline flowchart, mostly rendered with D3
@@ -66,6 +67,7 @@ export class FlowChart extends Component {
         range: [],
       },
       showSlicingNotification: false,
+      showFeedbackForm: false,
     };
     this.onViewChange = this.onViewChange.bind(this);
     this.onViewChangeEnd = this.onViewChangeEnd.bind(this);
@@ -806,7 +808,7 @@ export class FlowChart extends Component {
       visibleSlicing,
     } = this.props;
     const { outerWidth = 0, outerHeight = 0 } = chartSize;
-    const { showSlicingNotification } = this.state;
+    const { showSlicingNotification, showFeedbackForm } = this.state;
 
     // Counts the nodes in the slicedPipeline array, excludes any modularPipeline Id
     const numberOfNodesInSlicedPipeline = slicedPipeline.filter(
@@ -873,9 +875,12 @@ export class FlowChart extends Component {
           })}
           ref={this.layerNamesRef}
         />
-
-        <FeedbackForm title={'Rate your experience with us'} />
-
+        {isSlicingPipelineApplied && (
+          <>
+            <FeedbackButton onClick={() => this.setState({ showFeedbackForm: true })} visible={!showFeedbackForm} />
+            {showFeedbackForm && <FeedbackForm title={'Rate your experience with us'} />}
+          </>
+        )}
         {showSlicingNotification && visibleSlicing && (
           <SlicedPipelineNotification
             notification={

From 219d4b0b70799fc43fd0e1c44c7a02acf4189a3a Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongg1409@gmail>
Date: Tue, 10 Sep 2024 13:59:12 +0100
Subject: [PATCH 04/35] send data to heap through feedback

Signed-off-by: Huong Nguyen <huongg1409@gmail>
---
 .../feedback-button/feedback-button.js        |  20 +--
 .../feedback-button/feedback-button.scss      |  32 ++---
 src/components/feedback-form/feedback-form.js | 116 +++++++++---------
 .../feedback-form/feedback-form.scss          |  46 +++----
 src/components/feedback-form/stars.js         |  33 +++--
 src/components/flowchart/flowchart.js         |  15 ++-
 6 files changed, 134 insertions(+), 128 deletions(-)
 mode change 100644 => 100755 src/components/feedback-form/feedback-form.js

diff --git a/src/components/feedback-button/feedback-button.js b/src/components/feedback-button/feedback-button.js
index 3d2436bbb6..3df20745ef 100644
--- a/src/components/feedback-button/feedback-button.js
+++ b/src/components/feedback-button/feedback-button.js
@@ -4,12 +4,14 @@ import classnames from 'classnames';
 import './feedback-button.scss';
 
 export const FeedbackButton = ({ onClick, visible }) => {
-    return (
-        <button 
-        className={classnames('feedback-button', {
-            'feedback-button--visible': visible,
-        })} onClick={onClick}>
-            Feedback
-        </button>
-    )
-}
\ No newline at end of file
+  return (
+    <button
+      className={classnames('feedback-button', {
+        'feedback-button--visible': visible,
+      })}
+      onClick={onClick}
+    >
+      Feedback
+    </button>
+  );
+};
diff --git a/src/components/feedback-button/feedback-button.scss b/src/components/feedback-button/feedback-button.scss
index f88be94dd6..58efe19a74 100644
--- a/src/components/feedback-button/feedback-button.scss
+++ b/src/components/feedback-button/feedback-button.scss
@@ -1,20 +1,20 @@
 .feedback-button {
-    position: fixed;
-    right: -2%;
-    top: 50%;
-    transform: translateY(-50%) rotate(-90deg);
-    width: 100px;
-    height: 40px;
-    background-color: #007bff; /* Example background color */
-    color: white; /* Text color */
-    border: none;
-    cursor: pointer;
-    text-align: center;
-    line-height: 40px; /* Aligns text vertically */
-    font-size: 16px; /* Example font size */
-    opacity: 0;
+  background-color: #007bff;
+  border: none;
+  color: white;
+  cursor: pointer;
+  font-size: 16px;
+  height: 40px;
+  line-height: 40px;
+  opacity: 0;
+  position: fixed;
+  right: -2%;
+  text-align: center;
+  top: 50%;
+  transform: translateY(-50%) rotate(-90deg);
+  width: 100px;
 }
 
 .feedback-button--visible {
-    opacity: 1;
-}
\ No newline at end of file
+  opacity: 1;
+}
diff --git a/src/components/feedback-form/feedback-form.js b/src/components/feedback-form/feedback-form.js
old mode 100644
new mode 100755
index 6f725f2397..34d0d640d4
--- a/src/components/feedback-form/feedback-form.js
+++ b/src/components/feedback-form/feedback-form.js
@@ -2,79 +2,75 @@ import React, { useState } from 'react';
 import Modal from '../ui/modal';
 import Button from '../ui/button';
 import { Stars } from './stars';
-import { callSlack } from '../../utils';
+import { getHeap } from '../../tracking';
+import { getDataTestAttribute } from '../../utils/get-data-test-attribute';
 
 import './feedback-form.scss';
 
-export const FeedbackForm = ({ title, onClose }) => {
-    const [isSubmitted, setSubmitted] = useState(false);
-    const [isTextareaActive, setTextareaActivity] = useState(false);
-    const [starNumber, setStars] = useState(0);
-    const [feedbackText, setFeedbackText] = useState('');
+export const FeedbackForm = ({ title, onCancel, usageContext }) => {
+  const [isSubmitted, setSubmitted] = useState(false);
+  const [starNumber, setStars] = useState(0);
+  const [feedbackText, setFeedbackText] = useState('');
 
-    const onSubmit = async (e) => {
-        e.preventDefault();
-      
-        if (starNumber === 0 || !feedbackText) {
-          return;
-        }
-      
-        const data = {
-          text: `Feedback: ${feedbackText}\nRating: ${starNumber} stars`
-        };
-        
-        try {
-            const request = await callSlack({
-                data
-              });
-        
-            if (request.ok) {
-                alert('Feedback submitted successfully');
-                setSubmitted(true);
-            }
-        } catch (error) {
-          alert('Feedback submission failed');
-          console.error('Error submitting feedback:', error);
-        }
-    };
+  const handleFormSubmit = async (e) => {
+    e.preventDefault();
 
+    const data = {
+      rating: starNumber,
+      feedback: feedbackText,
+    };
 
-  // Function to handle input changes
-  const handleTextArea = (event) => {
-    setFeedbackText(event.target.value);
+    getHeap().track(getDataTestAttribute(usageContext, 'feedback-form'), data);
+    setSubmitted(true);
   };
 
-  console.log(starNumber, 'starNumber')
+  const handleFormCancel = () => {
+    onCancel();
+    setSubmitted(false);
+  };
 
   if (isSubmitted) {
     return (
-        <div className="feedback-form--wrapper">
-            <Modal closeModal={onClose} title={title} visible={true}>
-                Thank you for submitting your feedback! 🙏
-            </Modal>
-    </div>
-    )
+      <div className="feedback-form--wrapper">
+        <Modal closeModal={onCancel} title={title} visible={true}>
+          Thank you for submitting your feedback! 🙏
+        </Modal>
+      </div>
+    );
   } else {
     return (
-        <div className="feedback-form--wrapper">
-          <Modal closeModal={onClose} title={title} visible={true}>
-            <Stars 
-                selectedRating={starNumber}
-                onClick={setStars}
+      <div className="feedback-form--wrapper">
+        <Modal closeModal={onCancel} title={title} visible={true}>
+          <div className="feedback-form">
+            <Stars selectedRating={starNumber} onClick={setStars} />
+            <textarea
+              className="feedback-form--text-area"
+              value={feedbackText}
+              onChange={(event) => setFeedbackText(event.target.value)}
+              placeholder="Tell us your experience"
             />
-    
-            <form className='feedback-form--text-area'>
-              <textarea
-                value={feedbackText}
-                onChange={handleTextArea}
-                style={{ width: '100%', border: 'none', outline: 'none', resize: 'none' }}
-                rows="4"
-                placeholder="Tell us your experience"
-              />
-              <Button type="submit" size='small' onClick={onSubmit}>Submit</Button>
-            </form>
-          </Modal>
-        </div>
-      );
+
+            <div className="feedback-form--btn-wrapper">
+              <Button
+                mode="secondary"
+                onClick={handleFormCancel}
+                size="small"
+                type="button"
+              >
+                Cancel
+              </Button>
+              <Button
+                disabled={starNumber === 0 || !feedbackText}
+                size="small"
+                type="submit"
+                onClick={handleFormSubmit}
+              >
+                Submit
+              </Button>
+            </div>
+          </div>
+        </Modal>
+      </div>
+    );
   }
 };
diff --git a/src/components/feedback-form/feedback-form.scss b/src/components/feedback-form/feedback-form.scss
index 454a99cd44..f1c5869fcc 100644
--- a/src/components/feedback-form/feedback-form.scss
+++ b/src/components/feedback-form/feedback-form.scss
@@ -1,28 +1,32 @@
 @use '../../styles/variables' as colors;
 
 .kui-theme--dark {
-    --feedback-form--text-area--background: #{colors.$slate-200};
-    --feedback-form--text-area--color: #{colors.$white-0};
-  }
-  
-  .kui-theme--light {
-    --feedback-form--text-area--background: #{colors.$white-0};
-    --feedback-form--text-area--color: #{colors.$black-900};
-  }
+  --feedback-form--text-area--background: #{colors.$slate-200};
+  --feedback-form--text-area--color: #{colors.$white-0};
+}
+
+.kui-theme--light {
+  --feedback-form--text-area--background: #{colors.$white-0};
+  --feedback-form--text-area--color: #{colors.$black-900};
+}
 
-.feedback-form--text-area {
-    margin-top: 20px;
+.feedback-form {
+  textarea {
+    background-color: transparent;
+    color: var(--feedback-form--text-area--color);
+    border: 1px solid var(--feedback-form--text-area--color) !important;
+    padding: 12px;
+    width: 100%;
+  }
+}
 
-    textarea {
-        background-color: transparent;
-        color: var(--feedback-form--text-area--color);
-        border: 1px solid var(--feedback-form--text-area--color) !important;
-        padding: 12px;
-        width: 100%;
-    }
+.feedback-form--btn-wrapper {
+  display: flex;
+  justify-content: space-between;
 }
+
 .feedback-form--wrapper {
-    .button__btn {
-        margin-top: 12px;
-    }
-}
\ No newline at end of file
+  .button__btn {
+    margin-top: 12px;
+  }
+}
diff --git a/src/components/feedback-form/stars.js b/src/components/feedback-form/stars.js
index 6066f9a95a..1b150acb7e 100644
--- a/src/components/feedback-form/stars.js
+++ b/src/components/feedback-form/stars.js
@@ -4,22 +4,17 @@ import StarIcon from '../icons/star';
 
 import './stars.scss';
 
-export const Stars = ({
-    onClick,
-    selectedRating = -1,
-    className,
-    starsCount = 5,
-  }) => {
-    return (
-      <section className={'stars-wrapper ' + className}>
-        {Array.from({ length: starsCount }, (_, index) => (
-            <IconButton
-             key={index} 
-             className={index < selectedRating ? 'active' : ''}
-              onClick={() => onClick && onClick(index + 1)}
-              icon={StarIcon}
-            />
-        ))}
-      </section>
-    );
-  };
\ No newline at end of file
+export const Stars = ({ onClick, selectedRating = -1, starsCount = 5 }) => {
+  return (
+    <section className="stars-wrapper">
+      {Array.from({ length: starsCount }, (_, index) => (
+        <IconButton
+          icon={StarIcon}
+          onClick={() => onClick && onClick(index + 1)}
+          className={index < selectedRating ? 'active' : ''}
+          key={index}
+        />
+      ))}
+    </section>
+  );
+};
diff --git a/src/components/flowchart/flowchart.js b/src/components/flowchart/flowchart.js
index ca8bc4baeb..f5bce5dd31 100644
--- a/src/components/flowchart/flowchart.js
+++ b/src/components/flowchart/flowchart.js
@@ -47,7 +47,7 @@ import Tooltip from '../ui/tooltip';
 import { SlicedPipelineActionBar } from '../sliced-pipeline-action-bar/sliced-pipeline-action-bar';
 import { SlicedPipelineNotification } from '../sliced-pipeline-notification/sliced-pipeline-notification';
 import { FeedbackForm } from '../feedback-form/feedback-form';
-import {FeedbackButton} from '../feedback-button/feedback-button';
+import { FeedbackButton } from '../feedback-button/feedback-button';
 
 import './styles/flowchart.scss';
 
@@ -877,8 +877,17 @@ export class FlowChart extends Component {
         />
         {isSlicingPipelineApplied && (
           <>
-            <FeedbackButton onClick={() => this.setState({ showFeedbackForm: true })} visible={!showFeedbackForm} />
-            {showFeedbackForm && <FeedbackForm title={'Rate your experience with us'} />}
+            <FeedbackButton
+              onClick={() => this.setState({ showFeedbackForm: true })}
+              visible={!showFeedbackForm}
+            />
+            {showFeedbackForm && (
+              <FeedbackForm
+                onCancel={() => this.setState({ showFeedbackForm: false })}
+                title="Rate your experience with us"
+                usageContext="slicing-pipeline"
+              />
+            )}
           </>
         )}
         {showSlicingNotification && visibleSlicing && (

From e88317c09e3abefa28be9b52574f4a4293f8b002 Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongg1409@gmail>
Date: Tue, 10 Sep 2024 14:16:09 +0100
Subject: [PATCH 05/35] remove unused prop and component

Signed-off-by: Huong Nguyen <huongg1409@gmail>
---
 package.json                                  |  1 -
 src/components/feedback-form/feedback-form.js |  2 +-
 src/components/feedback-form/list.js          | 34 -------------------
 3 files changed, 1 insertion(+), 36 deletions(-)
 delete mode 100644 src/components/feedback-form/list.js

diff --git a/package.json b/package.json
index c086017a5b..955a066dbe 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,6 @@
     "highlight.js": "^10.7.3",
     "kiwi.js": "^1.1.3",
     "lodash": "^4.17.21",
-    "lodash.range": "^3.2.0",
     "plotly.js-dist-min": "^2.26.0",
     "react-content-loader": "^6.2.0",
     "react-csv": "^2.2.2",
diff --git a/src/components/feedback-form/feedback-form.js b/src/components/feedback-form/feedback-form.js
index 34d0d640d4..8e2e08d80f 100755
--- a/src/components/feedback-form/feedback-form.js
+++ b/src/components/feedback-form/feedback-form.js
@@ -12,7 +12,7 @@ export const FeedbackForm = ({ title, onCancel, usageContext }) => {
   const [starNumber, setStars] = useState(0);
   const [feedbackText, setFeedbackText] = useState('');
 
-  const handleFormSubmit = async (e) => {
+  const handleFormSubmit = (e) => {
     e.preventDefault();
 
     const data = {
diff --git a/src/components/feedback-form/list.js b/src/components/feedback-form/list.js
deleted file mode 100644
index 89be76e9bf..0000000000
--- a/src/components/feedback-form/list.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, { useCallback } from 'react';
-
-export const List = ({
-  data = [],
-  render,
-  beforeItemsRender,
-  afterItemsRender,
-  onItemClick,
-  ...rest
-}) => {
-  const getItemPropsCallback = useCallback(
-    (postfix) => ({
-      'data-element-name': `item:${postfix}`,
-    }),
-    []
-  );
-
-  return (
-    <>
-      {beforeItemsRender ? beforeItemsRender() : null}
-      {data?.map((item, index) =>
-        render({
-          index,
-          item,
-          length: data.length,
-          getItemProps: getItemPropsCallback,
-          onItemClick,
-          ...rest,
-        })
-      )}
-      {afterItemsRender ? afterItemsRender() : null}
-    </>
-  );
-};

From a5d5de91dd1581bebbdf1a7170a897fd634d70c6 Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongg1409@gmail>
Date: Wed, 11 Sep 2024 13:52:52 +0100
Subject: [PATCH 06/35] add title for feedback button

Signed-off-by: Huong Nguyen <huongg1409@gmail>
---
 src/components/feedback-button/feedback-button.js |  4 ++--
 src/components/feedback-form/feedback-form.js     |  6 +-----
 src/components/feedback-form/feedback-form.scss   | 13 +++++++++++++
 src/components/flowchart/flowchart.js             |  1 +
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/feedback-button/feedback-button.js b/src/components/feedback-button/feedback-button.js
index 3df20745ef..eca5241ad1 100644
--- a/src/components/feedback-button/feedback-button.js
+++ b/src/components/feedback-button/feedback-button.js
@@ -3,7 +3,7 @@ import classnames from 'classnames';
 
 import './feedback-button.scss';
 
-export const FeedbackButton = ({ onClick, visible }) => {
+export const FeedbackButton = ({ onClick, visible, title }) => {
   return (
     <button
       className={classnames('feedback-button', {
@@ -11,7 +11,7 @@ export const FeedbackButton = ({ onClick, visible }) => {
       })}
       onClick={onClick}
     >
-      Feedback
+      {title}
     </button>
   );
 };
diff --git a/src/components/feedback-form/feedback-form.js b/src/components/feedback-form/feedback-form.js
index 8e2e08d80f..7cb9f63411 100755
--- a/src/components/feedback-form/feedback-form.js
+++ b/src/components/feedback-form/feedback-form.js
@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import Modal from '../ui/modal';
 import Button from '../ui/button';
 import { Stars } from './stars';
 import { getHeap } from '../../tracking';
@@ -32,15 +31,13 @@ export const FeedbackForm = ({ title, onCancel, usageContext }) => {
   if (isSubmitted) {
     return (
       <div className="feedback-form--wrapper">
-        <Modal closeModal={onCancel} title={title} visible={true}>
           Thank you for submitting your feedback! 🙏
-        </Modal>
       </div>
     );
   } else {
     return (
       <div className="feedback-form--wrapper">
-        <Modal closeModal={onCancel} title={title} visible={true}>
+          <h2 className="feedback-form--title">{title}</h2>
           <div className="feedback-form">
             <Stars selectedRating={starNumber} onClick={setStars} />
             <textarea
@@ -69,7 +66,6 @@ export const FeedbackForm = ({ title, onCancel, usageContext }) => {
               </Button>
             </div>
           </div>
-        </Modal>
       </div>
     );
   }
diff --git a/src/components/feedback-form/feedback-form.scss b/src/components/feedback-form/feedback-form.scss
index f1c5869fcc..6dbc66ac33 100644
--- a/src/components/feedback-form/feedback-form.scss
+++ b/src/components/feedback-form/feedback-form.scss
@@ -1,11 +1,17 @@
 @use '../../styles/variables' as colors;
 
 .kui-theme--dark {
+  --feedback-form-bg: #{colors.$slate-900};
+  --feedback-form-content: #{colors.$slate-0};
+  --feedback-form-title: #{colors.$white-0};
   --feedback-form--text-area--background: #{colors.$slate-200};
   --feedback-form--text-area--color: #{colors.$white-0};
 }
 
 .kui-theme--light {
+  --feedback-form-bg: #{colors.$black-700};
+  --feedback-form-content: #{colors.$white-0};
+  --feedback-form-title: #{colors.$black-900};
   --feedback-form--text-area--background: #{colors.$white-0};
   --feedback-form--text-area--color: #{colors.$black-900};
 }
@@ -26,6 +32,13 @@
 }
 
 .feedback-form--wrapper {
+  position: fixed; /* or 'absolute', depending on your layout */
+  right: 0;
+  top: 393px;
+  width: 300px; /* Adjust the width as needed */
+  padding: 20px;
+  background-color: var(--feedback-form-bg);
+
   .button__btn {
     margin-top: 12px;
   }
diff --git a/src/components/flowchart/flowchart.js b/src/components/flowchart/flowchart.js
index f5bce5dd31..9b52d5c0c5 100644
--- a/src/components/flowchart/flowchart.js
+++ b/src/components/flowchart/flowchart.js
@@ -879,6 +879,7 @@ export class FlowChart extends Component {
           <>
             <FeedbackButton
               onClick={() => this.setState({ showFeedbackForm: true })}
+              title="Feedback for pipeline slicing"
               visible={!showFeedbackForm}
             />
             {showFeedbackForm && (

From ba23f57e05241380cfe4d8999a0fb22d1d043c94 Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongg1409@gmail>
Date: Wed, 11 Sep 2024 21:43:55 +0100
Subject: [PATCH 07/35] mood board

Signed-off-by: Huong Nguyen <huongg1409@gmail>
---
 .../feedback-button/feedback-button.scss      |  6 +-
 src/components/feedback-form/feedback-form.js | 57 +++++++------
 .../feedback-form/feedback-form.scss          | 80 +++++++++++++++----
 src/components/feedback-form/mood.js          | 32 ++++++++
 src/components/feedback-form/mood.scss        | 26 ++++++
 src/components/feedback-form/stars.js         | 20 -----
 src/components/feedback-form/stars.scss       | 12 ---
 src/components/flowchart/flowchart.js         |  2 +-
 src/components/icons/mood-dissatisfied.js     | 11 +++
 src/components/icons/mood-neutral.js          | 10 +++
 src/components/icons/mood-satisfied.js        | 11 +++
 .../icons/mood-very-dissatisfied.js           | 12 +++
 src/components/icons/mood-very-satisfied.js   | 10 +++
 13 files changed, 208 insertions(+), 81 deletions(-)
 create mode 100644 src/components/feedback-form/mood.js
 create mode 100644 src/components/feedback-form/mood.scss
 delete mode 100644 src/components/feedback-form/stars.js
 delete mode 100644 src/components/feedback-form/stars.scss
 create mode 100644 src/components/icons/mood-dissatisfied.js
 create mode 100644 src/components/icons/mood-neutral.js
 create mode 100644 src/components/icons/mood-satisfied.js
 create mode 100644 src/components/icons/mood-very-dissatisfied.js
 create mode 100644 src/components/icons/mood-very-satisfied.js

diff --git a/src/components/feedback-button/feedback-button.scss b/src/components/feedback-button/feedback-button.scss
index 58efe19a74..239da136c0 100644
--- a/src/components/feedback-button/feedback-button.scss
+++ b/src/components/feedback-button/feedback-button.scss
@@ -8,11 +8,11 @@
   line-height: 40px;
   opacity: 0;
   position: fixed;
-  right: -2%;
+  right: -96px;
   text-align: center;
   top: 50%;
-  transform: translateY(-50%) rotate(-90deg);
-  width: 100px;
+  padding: 0 16px;
+  transform: translateY(-50%) rotate(90deg);
 }
 
 .feedback-button--visible {
diff --git a/src/components/feedback-form/feedback-form.js b/src/components/feedback-form/feedback-form.js
index 7cb9f63411..d43bf5ca3f 100755
--- a/src/components/feedback-form/feedback-form.js
+++ b/src/components/feedback-form/feedback-form.js
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import Button from '../ui/button';
-import { Stars } from './stars';
+import CloseIcon from '../icons/close';
+import { Mood } from './mood';
 import { getHeap } from '../../tracking';
 import { getDataTestAttribute } from '../../utils/get-data-test-attribute';
 
@@ -8,14 +9,14 @@ import './feedback-form.scss';
 
 export const FeedbackForm = ({ title, onCancel, usageContext }) => {
   const [isSubmitted, setSubmitted] = useState(false);
-  const [starNumber, setStars] = useState(0);
+  const [activeMood, setActiveMood] = useState(null);
   const [feedbackText, setFeedbackText] = useState('');
 
   const handleFormSubmit = (e) => {
     e.preventDefault();
 
     const data = {
-      rating: starNumber,
+      rating: activeMood,
       feedback: feedbackText,
     };
 
@@ -37,34 +38,32 @@ export const FeedbackForm = ({ title, onCancel, usageContext }) => {
   } else {
     return (
       <div className="feedback-form--wrapper">
+          <div className="feedback-form--close-icon" onClick={handleFormCancel}>
+            <CloseIcon/>
+          </div>
           <h2 className="feedback-form--title">{title}</h2>
           <div className="feedback-form">
-            <Stars selectedRating={starNumber} onClick={setStars} />
-            <textarea
-              className="feedback-form--text-area"
-              value={feedbackText}
-              onChange={(event) => setFeedbackText(event.target.value)}
-              placeholder="Tell us your experience"
-            />
-
-            <div className="feedback-form--btn-wrapper">
-              <Button
-                mode="secondary"
-                onClick={handleFormCancel}
-                size="small"
-                type="button"
-              >
-                Cancel
-              </Button>
-              <Button
-                disabled={starNumber === 0 || !feedbackText}
-                size="small"
-                type="submit"
-                onClick={handleFormSubmit}
-              >
-                Submit
-              </Button>
-            </div>
+            <Mood activeMood={activeMood} onClick={(mood) => setActiveMood(mood)} />
+            {
+              activeMood !== null &&  (
+                <>
+                  <textarea
+                    className="feedback-form--text-area"
+                    value={feedbackText}
+                    onChange={(event) => setFeedbackText(event.target.value)}
+                    placeholder="How can we improve this feature?"
+                  />
+                  <Button
+                    size="small"
+                    type="submit"
+                    onClick={handleFormSubmit}
+                  >
+                    Submit
+                  </Button>
+                </>
+              )
+            }
+            
           </div>
       </div>
     );
diff --git a/src/components/feedback-form/feedback-form.scss b/src/components/feedback-form/feedback-form.scss
index 6dbc66ac33..7577f5c871 100644
--- a/src/components/feedback-form/feedback-form.scss
+++ b/src/components/feedback-form/feedback-form.scss
@@ -1,45 +1,93 @@
 @use '../../styles/variables' as colors;
 
 .kui-theme--dark {
-  --feedback-form-bg: #{colors.$slate-900};
+  --feedback-form-bg: #{colors.$white-0};
   --feedback-form-content: #{colors.$slate-0};
-  --feedback-form-title: #{colors.$white-0};
+  --feedback-form-title: #{colors.$black-900};
   --feedback-form--text-area--background: #{colors.$slate-200};
   --feedback-form--text-area--color: #{colors.$white-0};
 }
 
 .kui-theme--light {
-  --feedback-form-bg: #{colors.$black-700};
+  --feedback-form-bg: #{colors.$black-900};
   --feedback-form-content: #{colors.$white-0};
-  --feedback-form-title: #{colors.$black-900};
+  --feedback-form-title: #{colors.$white-0};
   --feedback-form--text-area--background: #{colors.$white-0};
   --feedback-form--text-area--color: #{colors.$black-900};
 }
 
-.feedback-form {
-  textarea {
+
+  .feedback-form--text-area {
+    align-items: center;
     background-color: transparent;
-    color: var(--feedback-form--text-area--color);
-    border: 1px solid var(--feedback-form--text-area--color) !important;
-    padding: 12px;
+    border: 1px solid grey;
+    display: flex;
+    height: 104px;
+    padding: 8px 12px;
+    text-align: center;
     width: 100%;
   }
-}
 
-.feedback-form--btn-wrapper {
-  display: flex;
-  justify-content: space-between;
+.feedback-form--text-area::placeholder {
+  text-align: center;
+  margin: auto; /* Centers the placeholder text vertically */
 }
 
 .feedback-form--wrapper {
-  position: fixed; /* or 'absolute', depending on your layout */
+  position: fixed;
   right: 0;
   top: 393px;
-  width: 300px; /* Adjust the width as needed */
-  padding: 20px;
+  width: 356px;
+  padding: 24px;
+  padding-bottom: 68px;
   background-color: var(--feedback-form-bg);
 
   .button__btn {
     margin-top: 12px;
   }
 }
+
+.feedback-form--title {
+  color: var(--feedback-form-title);
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px;
+  text-align: center;
+  margin-top: 12px;
+}
+
+.feedback-form--close-icon {
+  margin-left: auto;
+  width: 24px;
+  height: 24px;
+  cursor: pointer; /* Optional: Changes the cursor on hover to indicate it's clickable */
+}
+
+.feedback-form--generic-message {
+  font-size: 14px;
+  text-align: center;
+  color: #{colors.$black-200};
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.feedback-form--link {
+  background: none;
+  border: none;
+  color: #{colors.$black-200};
+  text-decoration: underline;
+  cursor: pointer;
+  padding: 0;
+  font: inherit;
+}
+
+/* Optional: remove focus outline for mouse users but keep it for keyboard users */
+.feedback-form--link:focus:not(:focus-visible) {
+  outline: none;
+}
+
+.feedback-form--link:focus-visible {
+  outline: thin dotted;
+}
\ No newline at end of file
diff --git a/src/components/feedback-form/mood.js b/src/components/feedback-form/mood.js
new file mode 100644
index 0000000000..e404e516ee
--- /dev/null
+++ b/src/components/feedback-form/mood.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import IconButton from '../ui/icon-button';
+import MoodDissatisfiedIcon from '../icons/mood-dissatisfied';
+import MoodVeryDissatisfiedIcon from '../icons/mood-very-dissatisfied';
+import MoodNeutralIcon from '../icons/mood-very-dissatisfied';
+import MoodSatisfiedIcon from '../icons/mood-satisfied';
+import MoodVerySatisfiedIcon from '../icons/mood-very-satisfied';
+
+import "./mood.scss";
+
+const moodConfig = {
+    "Very dissatisfied": MoodVeryDissatisfiedIcon,
+    "Dissatisfied": MoodDissatisfiedIcon,
+    "Neutral": MoodNeutralIcon,
+    "Satisfied": MoodSatisfiedIcon,
+    "Very satisfied": MoodVerySatisfiedIcon,
+};
+
+export const Mood = ({ selectedMood, onClick }) => {
+    return (
+        <section className="mood-wrapper">
+            {Object.entries(moodConfig).map(([moodName, MoodIcon]) => (
+                <IconButton
+                    key={moodName}
+                    icon={MoodIcon}
+                    className={moodName === selectedMood ? 'mood-icon--selected' : ''}
+                    onClick={() => onClick(moodName)}
+                />
+            ))}
+        </section>
+    );
+};
\ No newline at end of file
diff --git a/src/components/feedback-form/mood.scss b/src/components/feedback-form/mood.scss
new file mode 100644
index 0000000000..09c4515cbd
--- /dev/null
+++ b/src/components/feedback-form/mood.scss
@@ -0,0 +1,26 @@
+@use '../../styles/variables' as colors;
+
+.mood-wrapper {
+    display: flex;
+    justify-content: center;
+    gap: 12px;
+}
+
+.mood-wrapper {
+    .pipeline-icon--container {
+        list-style-type: none;
+        width: 32px;
+        height: 32px;
+    }
+
+    .pipeline-icon-toolbar__button svg {
+        width: 32px;
+        height: 32px;
+    }
+}
+
+.thumbs--active {
+    path {
+        fill: #{colors.$blue-300};
+    }
+}
\ No newline at end of file
diff --git a/src/components/feedback-form/stars.js b/src/components/feedback-form/stars.js
deleted file mode 100644
index 1b150acb7e..0000000000
--- a/src/components/feedback-form/stars.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import IconButton from '../ui/icon-button';
-import StarIcon from '../icons/star';
-
-import './stars.scss';
-
-export const Stars = ({ onClick, selectedRating = -1, starsCount = 5 }) => {
-  return (
-    <section className="stars-wrapper">
-      {Array.from({ length: starsCount }, (_, index) => (
-        <IconButton
-          icon={StarIcon}
-          onClick={() => onClick && onClick(index + 1)}
-          className={index < selectedRating ? 'active' : ''}
-          key={index}
-        />
-      ))}
-    </section>
-  );
-};
diff --git a/src/components/feedback-form/stars.scss b/src/components/feedback-form/stars.scss
deleted file mode 100644
index d6d9424fbe..0000000000
--- a/src/components/feedback-form/stars.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.stars-wrapper {
-  display: flex;
-  flex-direction: row;
-  list-style-type: none;
-  padding: 0;
-}
-
-.active {
-  path {
-    fill: yellow;
-  }
-}
diff --git a/src/components/flowchart/flowchart.js b/src/components/flowchart/flowchart.js
index 9b52d5c0c5..d81a900e2a 100644
--- a/src/components/flowchart/flowchart.js
+++ b/src/components/flowchart/flowchart.js
@@ -885,7 +885,7 @@ export class FlowChart extends Component {
             {showFeedbackForm && (
               <FeedbackForm
                 onCancel={() => this.setState({ showFeedbackForm: false })}
-                title="Rate your experience with us"
+                title="How satisfied are you with 
pipeline slicing?"
                 usageContext="slicing-pipeline"
               />
             )}
diff --git a/src/components/icons/mood-dissatisfied.js b/src/components/icons/mood-dissatisfied.js
new file mode 100644
index 0000000000..3f13cbbc4f
--- /dev/null
+++ b/src/components/icons/mood-dissatisfied.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const MoodDissatisfiedIcon = ({ className }) => (
+
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path id="icon" d="M20.6406 14.1984C21.0945 14.1984 21.4815 14.0373 21.8017 13.7151C22.1219 13.3928 22.282 13.0048 22.282 12.551C22.282 12.0971 22.1209 11.7101 21.7987 11.3899C21.4764 11.0697 21.0884 10.9096 20.6346 10.9096C20.1808 10.9096 19.7937 11.0707 19.4735 11.3929C19.1533 11.7151 18.9932 12.1032 18.9932 12.557C18.9932 13.0108 19.1543 13.3978 19.4765 13.7181C19.7988 14.0383 20.1868 14.1984 20.6406 14.1984ZM11.3654 14.1984C11.8193 14.1984 12.2063 14.0373 12.5265 13.7151C12.8467 13.3928 13.0068 13.0048 13.0068 12.551C13.0068 12.0971 12.8457 11.7101 12.5235 11.3899C12.2013 11.0697 11.8132 10.9096 11.3594 10.9096C10.9056 10.9096 10.5185 11.0707 10.1983 11.3929C9.87809 11.7151 9.71797 12.1032 9.71797 12.557C9.71797 13.0108 9.8791 13.3978 10.2013 13.7181C10.5236 14.0383 10.9116 14.1984 11.3654 14.1984ZM16.0054 18.0497C14.6215 18.0497 13.3589 18.433 12.2177 19.1997C11.0766 19.9664 10.228 20.9853 9.67184 22.2565H11.2239C11.7128 21.383 12.3829 20.6991 13.2342 20.2048C14.0855 19.7105 15.011 19.4634 16.0107 19.4634C17.0104 19.4634 17.9324 19.7128 18.7765 20.2116C19.6207 20.7105 20.2946 21.3921 20.7983 22.2565H22.3282C21.7812 20.9762 20.9366 19.955 19.7944 19.1929C18.6523 18.4308 17.3893 18.0497 16.0054 18.0497ZM16.0022 28.6668C14.2503 28.6668 12.6036 28.3343 11.0621 27.6694C9.52057 27.0045 8.17966 26.1022 7.03937 24.9624C5.89906 23.8226 4.99632 22.4823 4.33114 20.9415C3.66596 19.4006 3.33337 17.7543 3.33337 16.0024C3.33337 14.2505 3.66582 12.6037 4.33071 11.0622C4.9956 9.5207 5.89793 8.17979 7.03771 7.0395C8.17751 5.89919 9.51783 4.99644 11.0587 4.33126C12.5995 3.66609 14.2459 3.3335 15.9978 3.3335C17.7497 3.3335 19.3964 3.66594 20.9379 4.33083C22.4794 4.99572 23.8204 5.89805 24.9606 7.03783C26.101 8.17763 27.0037 9.51795 27.6689 11.0588C28.3341 12.5996 28.6666 14.246 28.6666 15.9979C28.6666 17.7498 28.3342 19.3965 27.6693 20.938C27.0044 22.4796 26.1021 23.8205 24.9623 24.9608C23.8225 26.1011 22.4822 27.0038 20.9413 27.669C19.4005 28.3342 17.7542 28.6668 16.0022 28.6668ZM15.9992 26.9916C19.0674 26.9916 21.6665 25.9269 23.7965 23.7974C25.9265 21.668 26.9915 19.0692 26.9915 16.001C26.9915 12.9327 25.9268 10.3336 23.7973 8.20366C21.6679 6.07366 19.0691 5.00866 16.0008 5.00866C12.9326 5.00866 10.3335 6.07339 8.20354 8.20283C6.07354 10.3323 5.00854 12.9311 5.00854 15.9993C5.00854 19.0675 6.07326 21.6666 8.20271 23.7966C10.3321 25.9266 12.931 26.9916 15.9992 26.9916Z" fill="#989898"/>
+</svg>
+)
+
+export default MoodDissatisfiedIcon
+
diff --git a/src/components/icons/mood-neutral.js b/src/components/icons/mood-neutral.js
new file mode 100644
index 0000000000..afaf6c7f73
--- /dev/null
+++ b/src/components/icons/mood-neutral.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+const MoodNeutralIcon = ({ className }) => (
+
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path id="icon" d="M20.6406 14.1984C21.0945 14.1984 21.4815 14.0373 21.8017 13.7151C22.1219 13.3928 22.282 13.0048 22.282 12.551C22.282 12.0971 22.1209 11.7101 21.7987 11.3899C21.4764 11.0697 21.0884 10.9096 20.6346 10.9096C20.1808 10.9096 19.7937 11.0707 19.4735 11.3929C19.1533 11.7151 18.9932 12.1032 18.9932 12.557C18.9932 13.0108 19.1543 13.3978 19.4765 13.7181C19.7988 14.0383 20.1868 14.1984 20.6406 14.1984ZM11.3654 14.1984C11.8193 14.1984 12.2063 14.0373 12.5265 13.7151C12.8467 13.3928 13.0068 13.0048 13.0068 12.551C13.0068 12.0971 12.8457 11.7101 12.5235 11.3899C12.2013 11.0697 11.8132 10.9096 11.3594 10.9096C10.9056 10.9096 10.5185 11.0707 10.1983 11.3929C9.87809 11.7151 9.71797 12.1032 9.71797 12.557C9.71797 13.0108 9.8791 13.3978 10.2013 13.7181C10.5236 14.0383 10.9116 14.1984 11.3654 14.1984ZM16 22.9095C17.3732 22.9095 18.6345 22.5353 19.7837 21.7869C20.933 21.0384 21.7812 20.036 22.3282 18.7796H9.67184C10.228 20.036 11.0784 21.0384 12.2231 21.7869C13.3678 22.5353 14.6268 22.9095 16 22.9095ZM16.0022 28.6668C14.2503 28.6668 12.6036 28.3343 11.0621 27.6694C9.52057 27.0045 8.17966 26.1022 7.03937 24.9624C5.89906 23.8226 4.99632 22.4823 4.33114 20.9415C3.66596 19.4006 3.33337 17.7543 3.33337 16.0024C3.33337 14.2505 3.66582 12.6037 4.33071 11.0622C4.9956 9.5207 5.89793 8.17979 7.03771 7.0395C8.17751 5.89919 9.51783 4.99644 11.0587 4.33126C12.5995 3.66609 14.2459 3.3335 15.9978 3.3335C17.7497 3.3335 19.3964 3.66594 20.9379 4.33083C22.4794 4.99572 23.8204 5.89805 24.9606 7.03783C26.101 8.17763 27.0037 9.51795 27.6689 11.0588C28.3341 12.5996 28.6666 14.246 28.6666 15.9979C28.6666 17.7498 28.3342 19.3965 27.6693 20.938C27.0044 22.4796 26.1021 23.8205 24.9623 24.9608C23.8225 26.1011 22.4822 27.0038 20.9413 27.669C19.4005 28.3342 17.7542 28.6668 16.0022 28.6668ZM15.9992 26.9916C19.0674 26.9916 21.6665 25.9269 23.7965 23.7974C25.9265 21.668 26.9915 19.0692 26.9915 16.001C26.9915 12.9327 25.9268 10.3336 23.7973 8.20366C21.6679 6.07366 19.0691 5.00866 16.0008 5.00866C12.9326 5.00866 10.3335 6.07339 8.20354 8.20283C6.07354 10.3323 5.00854 12.9311 5.00854 15.9993C5.00854 19.0675 6.07326 21.6666 8.20271 23.7966C10.3321 25.9266 12.931 26.9916 15.9992 26.9916Z" fill="#989898"/>
+</svg>
+)
+
+export default MoodNeutralIcon
\ No newline at end of file
diff --git a/src/components/icons/mood-satisfied.js b/src/components/icons/mood-satisfied.js
new file mode 100644
index 0000000000..f17eaae865
--- /dev/null
+++ b/src/components/icons/mood-satisfied.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const MoodSatisfiedIcon = ({ className }) => (
+    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path id="icon" d="M20.6405 14.6598C21.0943 14.6598 21.4814 14.4987 21.8016 14.1765C22.1218 13.8542 22.2819 13.4662 22.2819 13.0124C22.2819 12.5586 22.1208 12.1715 21.7986 11.8513C21.4763 11.5311 21.0883 11.371 20.6345 11.371C20.1806 11.371 19.7936 11.5321 19.4734 11.8543C19.1532 12.1766 18.9931 12.5646 18.9931 13.0184C18.9931 13.4722 19.1542 13.8593 19.4764 14.1795C19.7986 14.4997 20.1867 14.6598 20.6405 14.6598ZM11.3653 14.6598C11.8191 14.6598 12.2062 14.4987 12.5264 14.1765C12.8466 13.8542 13.0067 13.4662 13.0067 13.0124C13.0067 12.5586 12.8456 12.1715 12.5234 11.8513C12.2011 11.5311 11.8131 11.371 11.3593 11.371C10.9054 11.371 10.5184 11.5321 10.1982 11.8543C9.87796 12.1766 9.71785 12.5646 9.71785 13.0184C9.71785 13.4722 9.87897 13.8593 10.2012 14.1795C10.5234 14.4997 10.9115 14.6598 11.3653 14.6598ZM15.9999 23.3709C17.3731 23.3709 18.6343 22.9967 19.7836 22.2483C20.9329 21.4999 21.7811 20.4975 22.3281 19.2411H20.7982C20.2945 20.0963 19.6177 20.7628 18.7678 21.2406C17.9179 21.7184 16.997 21.9573 16.005 21.9573C15.013 21.9573 14.0903 21.7207 13.2371 21.2475C12.3838 20.7742 11.7127 20.1054 11.2238 19.2411H9.67172C10.2278 20.4975 11.0783 21.4999 12.223 22.2483C13.3677 22.9967 14.6267 23.3709 15.9999 23.3709ZM16.0021 29.1282C14.2502 29.1282 12.6035 28.7957 11.062 28.1309C9.52045 27.466 8.17954 26.5636 7.03925 25.4239C5.89894 24.2841 4.9962 22.9437 4.33102 21.4029C3.66584 19.8621 3.33325 18.2157 3.33325 16.4638C3.33325 14.7119 3.6657 13.0652 4.33059 11.5237C4.99547 9.98212 5.89781 8.64121 7.03759 7.50092C8.17739 6.36061 9.51771 5.45787 11.0586 4.79269C12.5994 4.12751 14.2457 3.79492 15.9977 3.79492C17.7496 3.79492 19.3963 4.12737 20.9378 4.79226C22.4793 5.45715 23.8202 6.35948 24.9605 7.49926C26.1008 8.63906 27.0036 9.97938 27.6688 11.5202C28.3339 13.061 28.6665 14.7074 28.6665 16.4593C28.6665 18.2112 28.3341 19.8579 27.6692 21.3995C27.0043 22.941 26.102 24.2819 24.9622 25.4222C23.8224 26.5625 22.4821 27.4652 20.9412 28.1304C19.4004 28.7956 17.754 29.1282 16.0021 29.1282ZM15.9991 27.453C19.0673 27.453 21.6664 26.3883 23.7964 24.2589C25.9264 22.1294 26.9914 19.5306 26.9914 16.4624C26.9914 13.3942 25.9266 10.7951 23.7972 8.66509C21.6678 6.53509 19.0689 5.47009 16.0007 5.47009C12.9325 5.47009 10.3334 6.53481 8.20342 8.66426C6.07342 10.7937 5.00842 13.3925 5.00842 16.4607C5.00842 19.5289 6.07314 22.128 8.20258 24.258C10.332 26.388 12.9308 27.453 15.9991 27.453Z" fill="#989898"/>
+    </svg>
+)
+
+export default MoodSatisfiedIcon
+
+
diff --git a/src/components/icons/mood-very-dissatisfied.js b/src/components/icons/mood-very-dissatisfied.js
new file mode 100644
index 0000000000..0a3b2ddf79
--- /dev/null
+++ b/src/components/icons/mood-very-dissatisfied.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const MoodVeryDissatisfiedIcon = ({ className }) => (
+    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path id="icon" d="M16.0022 28.6668C14.2503 28.6668 12.6036 28.3343 11.0621 27.6694C9.52057 27.0045 8.17966 26.0985 7.03937 24.9513C5.89906 23.8041 4.99632 22.4615 4.33114 20.9235C3.66596 19.3855 3.33337 17.7466 3.33337 16.0066C3.33337 14.2519 3.66582 12.6037 4.33071 11.0622C4.9956 9.5207 5.89793 8.17979 7.03771 7.0395C8.17751 5.89919 9.51783 4.99644 11.0587 4.33126C12.5995 3.66609 14.2459 3.3335 15.9978 3.3335C17.7497 3.3335 19.3927 3.66594 20.9268 4.33083C22.4609 4.99572 23.8018 5.89805 24.9495 7.03783C26.0973 8.17763 27.0037 9.51795 27.6689 11.0588C28.3341 12.5996 28.6666 14.246 28.6666 15.9979C28.6666 17.7407 28.3342 19.3814 27.6693 20.9201C27.0044 22.4588 26.0984 23.802 24.9512 24.9497C23.804 26.0974 22.4637 27.0038 20.9302 27.669C19.3968 28.3342 17.7542 28.6668 16.0022 28.6668ZM15.9989 26.9916C19.0395 26.9916 21.6318 25.92 23.7756 23.7769C25.9195 21.6337 26.9915 19.0419 26.9915 16.0012C26.9915 12.9458 25.9199 10.3498 23.7767 8.21336C21.6336 6.0769 19.0417 5.00866 16.0011 5.00866C12.9457 5.00866 10.3497 6.07654 8.21324 8.2123C6.07677 10.348 5.00854 12.9436 5.00854 15.999C5.00854 19.0397 6.07642 21.6319 8.21217 23.7758C10.3479 25.9197 12.9435 26.9916 15.9989 26.9916ZM18.3402 14.254L18.9205 13.9172C18.9209 14.3656 19.0778 14.7468 19.3913 15.0608C19.7048 15.3748 20.0864 15.5317 20.536 15.5317C21.0009 15.5317 21.3916 15.3728 21.7081 15.0548C22.0246 14.7369 22.1829 14.347 22.1829 13.8852C22.1829 13.5943 22.1112 13.3245 21.9679 13.0758C21.8246 12.8271 21.6273 12.6309 21.376 12.4873L22.3718 11.9232L21.782 10.8848L17.7504 13.195L18.3402 14.254ZM13.6598 14.254L14.2496 13.195L10.218 10.8848L9.62824 11.9232L10.624 12.4873C10.3727 12.6309 10.1754 12.8271 10.0321 13.0758C9.88879 13.3245 9.81714 13.5943 9.81714 13.8852C9.81714 14.347 9.9754 14.7369 10.2919 15.0548C10.6084 15.3728 10.9991 15.5317 11.464 15.5317C11.9137 15.5317 12.2952 15.3748 12.6087 15.0608C12.9222 14.7468 13.0791 14.3656 13.0795 13.9172L13.6598 14.254ZM15.9992 17.383C14.5522 17.383 13.2811 17.8501 12.1857 18.7843C11.0904 19.7185 10.2858 20.8759 9.77184 22.2565H22.2282C21.7051 20.885 20.8979 19.7299 19.8066 18.7912C18.7154 17.8524 17.4462 17.383 15.9992 17.383Z" fill="#989898"/>
+    </svg>
+)
+
+export default MoodVeryDissatisfiedIcon
+
+
+
diff --git a/src/components/icons/mood-very-satisfied.js b/src/components/icons/mood-very-satisfied.js
new file mode 100644
index 0000000000..49e89619af
--- /dev/null
+++ b/src/components/icons/mood-very-satisfied.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+const MoodVerySatisfiedIcon = ({ className }) => (
+
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path id="icon" d="M20.6406 14.1984C21.0945 14.1984 21.4815 14.0373 21.8017 13.7151C22.1219 13.3928 22.282 13.0048 22.282 12.551C22.282 12.0971 22.1209 11.7101 21.7987 11.3899C21.4764 11.0697 21.0884 10.9096 20.6346 10.9096C20.1808 10.9096 19.7937 11.0707 19.4735 11.3929C19.1533 11.7151 18.9932 12.1032 18.9932 12.557C18.9932 13.0108 19.1543 13.3978 19.4765 13.7181C19.7988 14.0383 20.1868 14.1984 20.6406 14.1984ZM11.3654 14.1984C11.8193 14.1984 12.2063 14.0373 12.5265 13.7151C12.8467 13.3928 13.0068 13.0048 13.0068 12.551C13.0068 12.0971 12.8457 11.7101 12.5235 11.3899C12.2013 11.0697 11.8132 10.9096 11.3594 10.9096C10.9056 10.9096 10.5185 11.0707 10.1983 11.3929C9.87809 11.7151 9.71797 12.1032 9.71797 12.557C9.71797 13.0108 9.8791 13.3978 10.2013 13.7181C10.5236 14.0383 10.9116 14.1984 11.3654 14.1984ZM16 22.9095C17.3732 22.9095 18.6345 22.5353 19.7837 21.7869C20.933 21.0384 21.7812 20.036 22.3282 18.7796H9.67184C10.228 20.036 11.0784 21.0384 12.2231 21.7869C13.3678 22.5353 14.6268 22.9095 16 22.9095ZM16.0022 28.6668C14.2503 28.6668 12.6036 28.3343 11.0621 27.6694C9.52057 27.0045 8.17966 26.1022 7.03937 24.9624C5.89906 23.8226 4.99632 22.4823 4.33114 20.9415C3.66596 19.4006 3.33337 17.7543 3.33337 16.0024C3.33337 14.2505 3.66582 12.6037 4.33071 11.0622C4.9956 9.5207 5.89793 8.17979 7.03771 7.0395C8.17751 5.89919 9.51783 4.99644 11.0587 4.33126C12.5995 3.66609 14.2459 3.3335 15.9978 3.3335C17.7497 3.3335 19.3964 3.66594 20.9379 4.33083C22.4794 4.99572 23.8204 5.89805 24.9606 7.03783C26.101 8.17763 27.0037 9.51795 27.6689 11.0588C28.3341 12.5996 28.6666 14.246 28.6666 15.9979C28.6666 17.7498 28.3342 19.3965 27.6693 20.938C27.0044 22.4796 26.1021 23.8205 24.9623 24.9608C23.8225 26.1011 22.4822 27.0038 20.9413 27.669C19.4005 28.3342 17.7542 28.6668 16.0022 28.6668ZM15.9992 26.9916C19.0674 26.9916 21.6665 25.9269 23.7965 23.7974C25.9265 21.668 26.9915 19.0692 26.9915 16.001C26.9915 12.9327 25.9268 10.3336 23.7973 8.20366C21.6679 6.07366 19.0691 5.00866 16.0008 5.00866C12.9326 5.00866 10.3335 6.07339 8.20354 8.20283C6.07354 10.3323 5.00854 12.9311 5.00854 15.9993C5.00854 19.0675 6.07326 21.6666 8.20271 23.7966C10.3321 25.9266 12.931 26.9916 15.9992 26.9916Z" fill="#989898"/>
+</svg>
+)
+
+export default MoodVerySatisfiedIcon

From 8f072362e1de2dbf42c6fe53ba07d562e424ebea Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongg1409@gmail>
Date: Thu, 12 Sep 2024 13:16:52 +0100
Subject: [PATCH 08/35] update with final design

Signed-off-by: Huong Nguyen <huongg1409@gmail>
---
 src/components/feedback-form/feedback-form.js |  5 +--
 .../feedback-form/feedback-form.scss          | 38 ++++++++++------
 src/components/feedback-form/mood.js          | 22 +++++++---
 src/components/feedback-form/mood.scss        | 43 ++++++++++++++++++-
 4 files changed, 85 insertions(+), 23 deletions(-)
 mode change 100644 => 100755 src/components/feedback-form/feedback-form.scss
 mode change 100644 => 100755 src/components/feedback-form/mood.js
 mode change 100644 => 100755 src/components/feedback-form/mood.scss

diff --git a/src/components/feedback-form/feedback-form.js b/src/components/feedback-form/feedback-form.js
index d43bf5ca3f..5d8942d950 100755
--- a/src/components/feedback-form/feedback-form.js
+++ b/src/components/feedback-form/feedback-form.js
@@ -43,7 +43,7 @@ export const FeedbackForm = ({ title, onCancel, usageContext }) => {
           </div>
           <h2 className="feedback-form--title">{title}</h2>
           <div className="feedback-form">
-            <Mood activeMood={activeMood} onClick={(mood) => setActiveMood(mood)} />
+            <Mood selectedMood={activeMood} onClick={setActiveMood} />
             {
               activeMood !== null &&  (
                 <>
@@ -54,11 +54,10 @@ export const FeedbackForm = ({ title, onCancel, usageContext }) => {
                     placeholder="How can we improve this feature?"
                   />
                   <Button
-                    size="small"
                     type="submit"
                     onClick={handleFormSubmit}
                   >
-                    Submit
+                    Submit feedback
                   </Button>
                 </>
               )
diff --git a/src/components/feedback-form/feedback-form.scss b/src/components/feedback-form/feedback-form.scss
old mode 100644
new mode 100755
index 7577f5c871..4e58b63dee
--- a/src/components/feedback-form/feedback-form.scss
+++ b/src/components/feedback-form/feedback-form.scss
@@ -17,16 +17,17 @@
 }
 
 
-  .feedback-form--text-area {
-    align-items: center;
-    background-color: transparent;
-    border: 1px solid grey;
-    display: flex;
-    height: 104px;
-    padding: 8px 12px;
-    text-align: center;
-    width: 100%;
-  }
+.feedback-form--text-area {
+  align-items: center;
+  background-color: transparent;
+  border: 1px solid grey;
+  display: flex;
+  height: 104px;
+  padding: 8px 12px;
+  text-align: center;
+  width: 100%;
+  margin-top: 68px;
+}
 
 .feedback-form--text-area::placeholder {
   text-align: center;
@@ -36,10 +37,10 @@
 .feedback-form--wrapper {
   position: fixed;
   right: 0;
-  top: 393px;
+  top: 320px;
   width: 356px;
   padding: 24px;
-  padding-bottom: 68px;
+  padding-bottom: 36px;
   background-color: var(--feedback-form-bg);
 
   .button__btn {
@@ -90,4 +91,17 @@
 
 .feedback-form--link:focus-visible {
   outline: thin dotted;
+}
+
+.feedback-form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .button__btn  {
+    border: 1px solid var(--feedback-form-title);
+    color: var(--feedback-form-title);
+
+    margin-top: 36px;
+  }
 }
\ No newline at end of file
diff --git a/src/components/feedback-form/mood.js b/src/components/feedback-form/mood.js
old mode 100644
new mode 100755
index e404e516ee..736bee5e52
--- a/src/components/feedback-form/mood.js
+++ b/src/components/feedback-form/mood.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import classnames from 'classnames';
 import IconButton from '../ui/icon-button';
 import MoodDissatisfiedIcon from '../icons/mood-dissatisfied';
 import MoodVeryDissatisfiedIcon from '../icons/mood-very-dissatisfied';
@@ -20,12 +21,21 @@ export const Mood = ({ selectedMood, onClick }) => {
     return (
         <section className="mood-wrapper">
             {Object.entries(moodConfig).map(([moodName, MoodIcon]) => (
-                <IconButton
-                    key={moodName}
-                    icon={MoodIcon}
-                    className={moodName === selectedMood ? 'mood-icon--selected' : ''}
-                    onClick={() => onClick(moodName)}
-                />
+                <div className={classnames("mood-icon-wrapper", {
+                    "mood-icon-wrapper--selected": moodName === selectedMood,
+                })}>
+                    <IconButton
+                        icon={MoodIcon}
+                        onClick={() => onClick(moodName)}
+                    />
+                    <span 
+                        className={classnames("mood-name", {
+                            "mood-name--selected": moodName === selectedMood,
+                        })}
+                    >
+                        {moodName}
+                    </span>
+                </div>
             ))}
         </section>
     );
diff --git a/src/components/feedback-form/mood.scss b/src/components/feedback-form/mood.scss
old mode 100644
new mode 100755
index 09c4515cbd..572607b69c
--- a/src/components/feedback-form/mood.scss
+++ b/src/components/feedback-form/mood.scss
@@ -1,6 +1,17 @@
 @use '../../styles/variables' as colors;
 
+$x-offset: 20px;
+
+.kui-theme--dark {
+    --mood-name--color: #{colors.$black-200};
+}
+  
+.kui-theme--light {
+    --mood-name--color: #{colors.$black-0};
+}
+
 .mood-wrapper {
+    align-items: center;
     display: flex;
     justify-content: center;
     gap: 12px;
@@ -9,18 +20,46 @@
 .mood-wrapper {
     .pipeline-icon--container {
         list-style-type: none;
+    }
+    .pipeline-icon-toolbar__button {
         width: 32px;
         height: 32px;
     }
 
+    .pipeline-icon-toolbar__button:hover  {
+        path {
+            fill: #{colors.$blue-300};
+        }
+    }
+
     .pipeline-icon-toolbar__button svg {
         width: 32px;
         height: 32px;
     }
 }
 
-.thumbs--active {
+.mood-icon--selected {
     path {
         fill: #{colors.$blue-300};
     }
-}
\ No newline at end of file
+}
+
+
+.mood-icon-wrapper--selected {
+    position: relative;
+}
+
+.mood-name {
+    color: var(--mood-name--color);
+    left: 50%;
+    margin-top: 12px;
+    opacity: 0;
+    position: absolute;
+    text-align: center;
+    top: 125%;
+    transform: translate(-50%,-50%);
+}
+
+.mood-name--selected {
+    opacity: 1;
+}

From 2d479725237bea3b8bd8d241d5f79fb1a9a2d5f1 Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongg1409@gmail>
Date: Thu, 12 Sep 2024 14:26:28 +0100
Subject: [PATCH 09/35] include messages

Signed-off-by: Huong Nguyen <huongg1409@gmail>
---
 src/components/feedback-form/feedback-form.js | 32 ++++++++++++++++---
 .../feedback-form/feedback-form.scss          | 12 ++++++-
 src/components/feedback-form/mood.js          |  5 ++-
 src/components/feedback/feedback.js           | 24 ++++++++++++++
 src/components/icons/mood-neutral.js          |  4 +--
 5 files changed, 69 insertions(+), 8 deletions(-)
 create mode 100644 src/components/feedback/feedback.js

diff --git a/src/components/feedback-form/feedback-form.js b/src/components/feedback-form/feedback-form.js
index 5d8942d950..daae71c0ec 100755
--- a/src/components/feedback-form/feedback-form.js
+++ b/src/components/feedback-form/feedback-form.js
@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import classnames from 'classnames';
 import Button from '../ui/button';
 import CloseIcon from '../icons/close';
 import { Mood } from './mood';
@@ -9,6 +10,7 @@ import './feedback-form.scss';
 
 export const FeedbackForm = ({ title, onCancel, usageContext }) => {
   const [isSubmitted, setSubmitted] = useState(false);
+  const [closedWithoutFeedback, setClosedWithoutFeedback] = useState(false);
   const [activeMood, setActiveMood] = useState(null);
   const [feedbackText, setFeedbackText] = useState('');
 
@@ -27,12 +29,34 @@ export const FeedbackForm = ({ title, onCancel, usageContext }) => {
   const handleFormCancel = () => {
     onCancel();
     setSubmitted(false);
+    setClosedWithoutFeedback(true);
   };
 
-  if (isSubmitted) {
+  const getMessages = () => {
+    if (isSubmitted) {
+      return "Thank you for sharing feedback!"
+    }
+
+    if(closedWithoutFeedback) {
+      return "You can provide feedback at any time by clicking on the feedback button."
+    }
+  }
+
+  useEffect(() => {
+    if(isSubmitted){
+      const timer = setTimeout(() => {
+        onCancel();
+      }, 5000);
+  
+      return () => clearTimeout(timer);
+    }
+   
+  }, [isSubmitted]);
+
+  if (isSubmitted || closedWithoutFeedback) {
     return (
-      <div className="feedback-form--wrapper">
-          Thank you for submitting your feedback! 🙏
+      <div className={classnames("feedback-form--wrapper", "feedback-form--message")}>
+          {getMessages()}
       </div>
     );
   } else {
diff --git a/src/components/feedback-form/feedback-form.scss b/src/components/feedback-form/feedback-form.scss
index 4e58b63dee..65913420a2 100755
--- a/src/components/feedback-form/feedback-form.scss
+++ b/src/components/feedback-form/feedback-form.scss
@@ -42,6 +42,7 @@
   padding: 24px;
   padding-bottom: 36px;
   background-color: var(--feedback-form-bg);
+  border-radius: 8px 0px 0px 8px;
 
   .button__btn {
     margin-top: 12px;
@@ -84,7 +85,6 @@
   font: inherit;
 }
 
-/* Optional: remove focus outline for mouse users but keep it for keyboard users */
 .feedback-form--link:focus:not(:focus-visible) {
   outline: none;
 }
@@ -104,4 +104,14 @@
 
     margin-top: 36px;
   }
+}
+
+.feedback-form--message {
+  color: black;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  padding: 36px 24px;
+  width: auto;
 }
\ No newline at end of file
diff --git a/src/components/feedback-form/mood.js b/src/components/feedback-form/mood.js
index 736bee5e52..4e1d08b362 100755
--- a/src/components/feedback-form/mood.js
+++ b/src/components/feedback-form/mood.js
@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import IconButton from '../ui/icon-button';
 import MoodDissatisfiedIcon from '../icons/mood-dissatisfied';
 import MoodVeryDissatisfiedIcon from '../icons/mood-very-dissatisfied';
-import MoodNeutralIcon from '../icons/mood-very-dissatisfied';
+import MoodNeutralIcon from '../icons/mood-neutral';
 import MoodSatisfiedIcon from '../icons/mood-satisfied';
 import MoodVerySatisfiedIcon from '../icons/mood-very-satisfied';
 
@@ -26,6 +26,9 @@ export const Mood = ({ selectedMood, onClick }) => {
                 })}>
                     <IconButton
                         icon={MoodIcon}
+                        className={classnames("mood-icon", {
+                            "mood-icon--selected": moodName === selectedMood,
+                        })}
                         onClick={() => onClick(moodName)}
                     />
                     <span 
diff --git a/src/components/feedback/feedback.js b/src/components/feedback/feedback.js
new file mode 100644
index 0000000000..ff382184d2
--- /dev/null
+++ b/src/components/feedback/feedback.js
@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import { FeedbackButton } from '../feedback-button/feedback-button';
+import { FeedbackForm } from '../feedback-form/feedback-form';
+
+export const Feedback = ({ buttonTitle, formTitle, usageContext}) => {
+    const [showFeedbackForm, setShowFeedbackForm] = useState(false);
+
+    return (
+        <>
+            <FeedbackButton
+                onClick={() => setShowFeedbackForm(true)}
+                title={buttonTitle}
+                visible={!showFeedbackForm}
+            />
+            {showFeedbackForm && (
+                <FeedbackForm
+                onCancel={() => setShowFeedbackForm(false)}
+                title={formTitle}
+                usageContext={usageContext}
+                />
+            )}
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/components/icons/mood-neutral.js b/src/components/icons/mood-neutral.js
index afaf6c7f73..71d59f0ede 100644
--- a/src/components/icons/mood-neutral.js
+++ b/src/components/icons/mood-neutral.js
@@ -3,8 +3,8 @@ import React from 'react';
 const MoodNeutralIcon = ({ className }) => (
 
 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path id="icon" d="M20.6406 14.1984C21.0945 14.1984 21.4815 14.0373 21.8017 13.7151C22.1219 13.3928 22.282 13.0048 22.282 12.551C22.282 12.0971 22.1209 11.7101 21.7987 11.3899C21.4764 11.0697 21.0884 10.9096 20.6346 10.9096C20.1808 10.9096 19.7937 11.0707 19.4735 11.3929C19.1533 11.7151 18.9932 12.1032 18.9932 12.557C18.9932 13.0108 19.1543 13.3978 19.4765 13.7181C19.7988 14.0383 20.1868 14.1984 20.6406 14.1984ZM11.3654 14.1984C11.8193 14.1984 12.2063 14.0373 12.5265 13.7151C12.8467 13.3928 13.0068 13.0048 13.0068 12.551C13.0068 12.0971 12.8457 11.7101 12.5235 11.3899C12.2013 11.0697 11.8132 10.9096 11.3594 10.9096C10.9056 10.9096 10.5185 11.0707 10.1983 11.3929C9.87809 11.7151 9.71797 12.1032 9.71797 12.557C9.71797 13.0108 9.8791 13.3978 10.2013 13.7181C10.5236 14.0383 10.9116 14.1984 11.3654 14.1984ZM16 22.9095C17.3732 22.9095 18.6345 22.5353 19.7837 21.7869C20.933 21.0384 21.7812 20.036 22.3282 18.7796H9.67184C10.228 20.036 11.0784 21.0384 12.2231 21.7869C13.3678 22.5353 14.6268 22.9095 16 22.9095ZM16.0022 28.6668C14.2503 28.6668 12.6036 28.3343 11.0621 27.6694C9.52057 27.0045 8.17966 26.1022 7.03937 24.9624C5.89906 23.8226 4.99632 22.4823 4.33114 20.9415C3.66596 19.4006 3.33337 17.7543 3.33337 16.0024C3.33337 14.2505 3.66582 12.6037 4.33071 11.0622C4.9956 9.5207 5.89793 8.17979 7.03771 7.0395C8.17751 5.89919 9.51783 4.99644 11.0587 4.33126C12.5995 3.66609 14.2459 3.3335 15.9978 3.3335C17.7497 3.3335 19.3964 3.66594 20.9379 4.33083C22.4794 4.99572 23.8204 5.89805 24.9606 7.03783C26.101 8.17763 27.0037 9.51795 27.6689 11.0588C28.3341 12.5996 28.6666 14.246 28.6666 15.9979C28.6666 17.7498 28.3342 19.3965 27.6693 20.938C27.0044 22.4796 26.1021 23.8205 24.9623 24.9608C23.8225 26.1011 22.4822 27.0038 20.9413 27.669C19.4005 28.3342 17.7542 28.6668 16.0022 28.6668ZM15.9992 26.9916C19.0674 26.9916 21.6665 25.9269 23.7965 23.7974C25.9265 21.668 26.9915 19.0692 26.9915 16.001C26.9915 12.9327 25.9268 10.3336 23.7973 8.20366C21.6679 6.07366 19.0691 5.00866 16.0008 5.00866C12.9326 5.00866 10.3335 6.07339 8.20354 8.20283C6.07354 10.3323 5.00854 12.9311 5.00854 15.9993C5.00854 19.0675 6.07326 21.6666 8.20271 23.7966C10.3321 25.9266 12.931 26.9916 15.9992 26.9916Z" fill="#989898"/>
+    <path id="icon" d="M20.6406 14.1984C21.0945 14.1984 21.4815 14.0373 21.8017 13.7151C22.1219 13.3928 22.282 13.0048 22.282 12.551C22.282 12.0971 22.1209 11.7101 21.7987 11.3899C21.4764 11.0697 21.0884 10.9096 20.6346 10.9096C20.1808 10.9096 19.7937 11.0707 19.4735 11.3929C19.1533 11.7151 18.9932 12.1032 18.9932 12.557C18.9932 13.0108 19.1543 13.3978 19.4765 13.7181C19.7988 14.0383 20.1868 14.1984 20.6406 14.1984ZM11.3654 14.1984C11.8193 14.1984 12.2063 14.0373 12.5265 13.7151C12.8467 13.3928 13.0068 13.0048 13.0068 12.551C13.0068 12.0971 12.8457 11.7101 12.5235 11.3899C12.2013 11.0697 11.8132 10.9096 11.3594 10.9096C10.9056 10.9096 10.5185 11.0707 10.1983 11.3929C9.87809 11.7151 9.71797 12.1032 9.71797 12.557C9.71797 13.0108 9.8791 13.3978 10.2013 13.7181C10.5236 14.0383 10.9116 14.1984 11.3654 14.1984ZM12.0034 20.4753H20.0102V19.0702H12.0034V20.4753ZM16.0022 28.6668C14.2503 28.6668 12.6036 28.3343 11.0621 27.6694C9.52057 27.0045 8.17966 26.1022 7.03937 24.9624C5.89906 23.8226 4.99632 22.4823 4.33114 20.9415C3.66596 19.4006 3.33337 17.7543 3.33337 16.0024C3.33337 14.2505 3.66582 12.6037 4.33071 11.0622C4.9956 9.5207 5.89793 8.17979 7.03771 7.0395C8.17751 5.89919 9.51783 4.99644 11.0587 4.33126C12.5995 3.66609 14.2459 3.3335 15.9978 3.3335C17.7497 3.3335 19.3964 3.66594 20.9379 4.33083C22.4794 4.99572 23.8204 5.89805 24.9606 7.03783C26.101 8.17763 27.0037 9.51795 27.6689 11.0588C28.3341 12.5996 28.6666 14.246 28.6666 15.9979C28.6666 17.7498 28.3342 19.3965 27.6693 20.938C27.0044 22.4796 26.1021 23.8205 24.9623 24.9608C23.8225 26.1011 22.4822 27.0038 20.9413 27.669C19.4005 28.3342 17.7542 28.6668 16.0022 28.6668ZM15.9992 26.9916C19.0674 26.9916 21.6665 25.9269 23.7965 23.7974C25.9265 21.668 26.9915 19.0692 26.9915 16.001C26.9915 12.9327 25.9268 10.3336 23.7973 8.20366C21.6679 6.07366 19.0691 5.00866 16.0008 5.00866C12.9326 5.00866 10.3335 6.07339 8.20354 8.20283C6.07354 10.3323 5.00854 12.9311 5.00854 15.9993C5.00854 19.0675 6.07326 21.6666 8.20271 23.7966C10.3321 25.9266 12.931 26.9916 15.9992 26.9916Z" fill="#989898"/>
 </svg>
 )
 
-export default MoodNeutralIcon
\ No newline at end of file
+export default MoodNeutralIcon

From f3c2e71177bcf138fca3cfb7912c273c0fec4588 Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongg1409@gmail>
Date: Thu, 12 Sep 2024 15:13:38 +0100
Subject: [PATCH 10/35] move to Feedback wrapper instead

Signed-off-by: Huong Nguyen <huongg1409@gmail>
---
 src/components/feedback-form/feedback-form.js | 114 +++++++-----------
 src/components/feedback/feedback.js           |  84 +++++++++----
 src/components/flowchart/flowchart.js         |  22 +---
 3 files changed, 112 insertions(+), 108 deletions(-)

diff --git a/src/components/feedback-form/feedback-form.js b/src/components/feedback-form/feedback-form.js
index daae71c0ec..db762c87ed 100755
--- a/src/components/feedback-form/feedback-form.js
+++ b/src/components/feedback-form/feedback-form.js
@@ -3,91 +3,63 @@ import classnames from 'classnames';
 import Button from '../ui/button';
 import CloseIcon from '../icons/close';
 import { Mood } from './mood';
-import { getHeap } from '../../tracking';
-import { getDataTestAttribute } from '../../utils/get-data-test-attribute';
 
 import './feedback-form.scss';
 
-export const FeedbackForm = ({ title, onCancel, usageContext }) => {
-  const [isSubmitted, setSubmitted] = useState(false);
-  const [closedWithoutFeedback, setClosedWithoutFeedback] = useState(false);
-  const [activeMood, setActiveMood] = useState(null);
-  const [feedbackText, setFeedbackText] = useState('');
-
-  const handleFormSubmit = (e) => {
-    e.preventDefault();
-
-    const data = {
-      rating: activeMood,
-      feedback: feedbackText,
-    };
-
-    getHeap().track(getDataTestAttribute(usageContext, 'feedback-form'), data);
-    setSubmitted(true);
-  };
-
-  const handleFormCancel = () => {
-    onCancel();
-    setSubmitted(false);
-    setClosedWithoutFeedback(true);
-  };
-
+export const FeedbackForm = ({
+  activeMood,
+  isCancelled,
+  feedbackText,
+  isSubmitted,
+  onCancel,
+  onSubmit,
+  setActiveMood,
+  setFeedbackText,
+  title,
+}) => {
   const getMessages = () => {
     if (isSubmitted) {
-      return "Thank you for sharing feedback!"
-    }
-
-    if(closedWithoutFeedback) {
-      return "You can provide feedback at any time by clicking on the feedback button."
+      return 'Thank you for sharing feedback!';
     }
-  }
 
-  useEffect(() => {
-    if(isSubmitted){
-      const timer = setTimeout(() => {
-        onCancel();
-      }, 5000);
-  
-      return () => clearTimeout(timer);
+    if (isCancelled) {
+      return 'You can provide feedback at any time by clicking on the feedback button.';
     }
-   
-  }, [isSubmitted]);
-
-  if (isSubmitted || closedWithoutFeedback) {
+  };
+  if (isSubmitted || isCancelled) {
     return (
-      <div className={classnames("feedback-form--wrapper", "feedback-form--message")}>
-          {getMessages()}
+      <div
+        className={classnames(
+          'feedback-form--wrapper',
+          'feedback-form--message'
+        )}
+      >
+        {getMessages()}
       </div>
     );
   } else {
     return (
       <div className="feedback-form--wrapper">
-          <div className="feedback-form--close-icon" onClick={handleFormCancel}>
-            <CloseIcon/>
-          </div>
-          <h2 className="feedback-form--title">{title}</h2>
-          <div className="feedback-form">
-            <Mood selectedMood={activeMood} onClick={setActiveMood} />
-            {
-              activeMood !== null &&  (
-                <>
-                  <textarea
-                    className="feedback-form--text-area"
-                    value={feedbackText}
-                    onChange={(event) => setFeedbackText(event.target.value)}
-                    placeholder="How can we improve this feature?"
-                  />
-                  <Button
-                    type="submit"
-                    onClick={handleFormSubmit}
-                  >
-                    Submit feedback
-                  </Button>
-                </>
-              )
-            }
-            
-          </div>
+        <div className="feedback-form--close-icon" onClick={onCancel}>
+          <CloseIcon />
+        </div>
+        <h2 className="feedback-form--title">{title}</h2>
+        <div className="feedback-form">
+          <Mood selectedMood={activeMood} onClick={setActiveMood} />
+          {activeMood !== null && (
+            <>
+              <textarea
+                className="feedback-form--text-area"
+                value={feedbackText}
+                onChange={(event) => setFeedbackText(event.target.value)}
+                placeholder="How can we improve this feature?"
+              />
+              <Button type="submit" onClick={onSubmit}>
+                Submit feedback
+              </Button>
+            </>
+          )}
+        </div>
       </div>
     );
   }
diff --git a/src/components/feedback/feedback.js b/src/components/feedback/feedback.js
index ff382184d2..bea77445e1 100644
--- a/src/components/feedback/feedback.js
+++ b/src/components/feedback/feedback.js
@@ -1,24 +1,66 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { FeedbackButton } from '../feedback-button/feedback-button';
 import { FeedbackForm } from '../feedback-form/feedback-form';
+import { getHeap } from '../../tracking';
+import { getDataTestAttribute } from '../../utils/get-data-test-attribute';
 
-export const Feedback = ({ buttonTitle, formTitle, usageContext}) => {
-    const [showFeedbackForm, setShowFeedbackForm] = useState(false);
-
-    return (
-        <>
-            <FeedbackButton
-                onClick={() => setShowFeedbackForm(true)}
-                title={buttonTitle}
-                visible={!showFeedbackForm}
-            />
-            {showFeedbackForm && (
-                <FeedbackForm
-                onCancel={() => setShowFeedbackForm(false)}
-                title={formTitle}
-                usageContext={usageContext}
-                />
-            )}
-        </>
-    )
-}
\ No newline at end of file
+export const Feedback = ({ buttonTitle, formTitle, usageContext }) => {
+  const [showFeedbackForm, setShowFeedbackForm] = useState(false);
+  const [isCancelled, setIsCancelled] = useState(false);
+  const [isSubmitted, setSubmitted] = useState(false);
+  const [activeMood, setActiveMood] = useState(null);
+  const [feedbackText, setFeedbackText] = useState('');
+
+  const handleFormSubmit = (e) => {
+    e.preventDefault();
+
+    const data = {
+      rating: activeMood,
+      feedback: feedbackText,
+    };
+
+    getHeap().track(getDataTestAttribute(usageContext, 'feedback-form'), data);
+    setSubmitted(true);
+  };
+
+  const handleFormCancel = () => {
+    setIsCancelled(true);
+  };
+
+  useEffect(() => {
+    if (isSubmitted || isCancelled) {
+      const timer = setTimeout(() => {
+        setSubmitted(false);
+        setIsCancelled(false);
+        setShowFeedbackForm(false);
+        setActiveMood(null);
+        setFeedbackText('');
+      }, 2000);
+
+      return () => clearTimeout(timer);
+    }
+  }, [isSubmitted, isCancelled]);
+
+  return (
+    <>
+      <FeedbackButton
+        onClick={() => setShowFeedbackForm(true)}
+        title={buttonTitle}
+        visible={!showFeedbackForm}
+      />
+      {showFeedbackForm && (
+        <FeedbackForm
+          activeMood={activeMood}
+          isCancelled={isCancelled}
+          feedbackText={feedbackText}
+          isSubmitted={isSubmitted}
+          onCancel={handleFormCancel}
+          onSubmit={handleFormSubmit}
+          setActiveMood={setActiveMood}
+          setFeedbackText={setFeedbackText}
+          title={formTitle}
+        />
+      )}
+    </>
+  );
+};
diff --git a/src/components/flowchart/flowchart.js b/src/components/flowchart/flowchart.js
index d81a900e2a..0bfac5990a 100644
--- a/src/components/flowchart/flowchart.js
+++ b/src/components/flowchart/flowchart.js
@@ -46,8 +46,7 @@ import { getDataTestAttribute } from '../../utils/get-data-test-attribute';
 import Tooltip from '../ui/tooltip';
 import { SlicedPipelineActionBar } from '../sliced-pipeline-action-bar/sliced-pipeline-action-bar';
 import { SlicedPipelineNotification } from '../sliced-pipeline-notification/sliced-pipeline-notification';
-import { FeedbackForm } from '../feedback-form/feedback-form';
-import { FeedbackButton } from '../feedback-button/feedback-button';
+import { Feedback } from '../feedback/feedback';
 
 import './styles/flowchart.scss';
 
@@ -876,20 +875,11 @@ export class FlowChart extends Component {
           ref={this.layerNamesRef}
         />
         {isSlicingPipelineApplied && (
-          <>
-            <FeedbackButton
-              onClick={() => this.setState({ showFeedbackForm: true })}
-              title="Feedback for pipeline slicing"
-              visible={!showFeedbackForm}
-            />
-            {showFeedbackForm && (
-              <FeedbackForm
-                onCancel={() => this.setState({ showFeedbackForm: false })}
-                title="How satisfied are you with 
pipeline slicing?"
-                usageContext="slicing-pipeline"
-              />
-            )}
-          </>
+          <Feedback
+            buttonTitle={'Feedback for pipeline slicing'}
+            formTitle={'How satisfied are you with 
pipeline slicing?'}
+            usageContext={'slicing-pipeline'}
+          />
         )}
         {showSlicingNotification && visibleSlicing && (
           <SlicedPipelineNotification

From f3e71f8b3eb8bd201e7b1e8bc9f3ba8b4f29dfb4 Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongg1409@gmail>
Date: Thu, 12 Sep 2024 16:58:47 +0100
Subject: [PATCH 11/35] add local storage to track first time

Signed-off-by: Huong Nguyen <huongg1409@gmail>
---
 src/components/feedback/feedback.js | 25 +++++++++++++++++++++++--
 src/config.js                       |  1 +
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/components/feedback/feedback.js b/src/components/feedback/feedback.js
index bea77445e1..d803f3cb6b 100644
--- a/src/components/feedback/feedback.js
+++ b/src/components/feedback/feedback.js
@@ -3,9 +3,17 @@ import { FeedbackButton } from '../feedback-button/feedback-button';
 import { FeedbackForm } from '../feedback-form/feedback-form';
 import { getHeap } from '../../tracking';
 import { getDataTestAttribute } from '../../utils/get-data-test-attribute';
+import { localStorageFeedbackFirstTime } from '../../config';
+import { loadLocalStorage, saveLocalStorage } from '../../store/helpers';
 
 export const Feedback = ({ buttonTitle, formTitle, usageContext }) => {
-  const [showFeedbackForm, setShowFeedbackForm] = useState(false);
+  const firstTimeSeeingFeedbackComponent = loadLocalStorage(
+    localStorageFeedbackFirstTime
+  );
+  const [showFeedbackForm, setShowFeedbackForm] = useState(
+    Object.keys(firstTimeSeeingFeedbackComponent).length === 0 ||
+      firstTimeSeeingFeedbackComponent?.usageContext
+  );
   const [isCancelled, setIsCancelled] = useState(false);
   const [isSubmitted, setSubmitted] = useState(false);
   const [activeMood, setActiveMood] = useState(null);
@@ -21,10 +29,23 @@ export const Feedback = ({ buttonTitle, formTitle, usageContext }) => {
 
     getHeap().track(getDataTestAttribute(usageContext, 'feedback-form'), data);
     setSubmitted(true);
+
+    // Update local storage with usage context set to false
+    updateLocalStorageUsageContext(false);
   };
 
   const handleFormCancel = () => {
     setIsCancelled(true);
+    // Update local storage with usage context set to false
+    updateLocalStorageUsageContext(false);
+  };
+
+  // Utility function to update the usage context in local storage
+  const updateLocalStorageUsageContext = (value) => {
+    // Load existing data or initialize to an empty object if null
+    const existingData = loadLocalStorage(localStorageFeedbackFirstTime) || {};
+    existingData[usageContext] = value;
+    saveLocalStorage(localStorageFeedbackFirstTime, existingData);
   };
 
   useEffect(() => {
@@ -35,7 +56,7 @@ export const Feedback = ({ buttonTitle, formTitle, usageContext }) => {
         setShowFeedbackForm(false);
         setActiveMood(null);
         setFeedbackText('');
-      }, 2000);
+      }, 4000);
 
       return () => clearTimeout(timer);
     }
diff --git a/src/config.js b/src/config.js
index ea25d9d9a6..269ad57852 100644
--- a/src/config.js
+++ b/src/config.js
@@ -5,6 +5,7 @@ export const localStorageFlowchartLink = 'KedroViz-link-to-flowchart';
 export const localStorageMetricsSelect = 'KedroViz-metrics-chart-select';
 export const localStorageRunsMetadata = 'KedroViz-runs-metadata';
 export const localStorageShareableUrl = 'KedroViz-shareable-url';
+export const localStorageFeedbackFirstTime = 'KedroViz-feedback-first-time';
 
 export const linkToFlowchartInitialVal = {
   fromURL: null,

From 278be5822537349dcc931cc0a7a388773255434b Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongg1409@gmail>
Date: Thu, 12 Sep 2024 17:08:19 +0100
Subject: [PATCH 12/35] add key for Mood component

Signed-off-by: Huong Nguyen <huongg1409@gmail>
---
 src/components/feedback-form/mood.js | 65 +++++++++++++++-------------
 1 file changed, 34 insertions(+), 31 deletions(-)

diff --git a/src/components/feedback-form/mood.js b/src/components/feedback-form/mood.js
index 4e1d08b362..fcd7f89fd2 100755
--- a/src/components/feedback-form/mood.js
+++ b/src/components/feedback-form/mood.js
@@ -7,39 +7,42 @@ import MoodNeutralIcon from '../icons/mood-neutral';
 import MoodSatisfiedIcon from '../icons/mood-satisfied';
 import MoodVerySatisfiedIcon from '../icons/mood-very-satisfied';
 
-import "./mood.scss";
+import './mood.scss';
 
 const moodConfig = {
-    "Very dissatisfied": MoodVeryDissatisfiedIcon,
-    "Dissatisfied": MoodDissatisfiedIcon,
-    "Neutral": MoodNeutralIcon,
-    "Satisfied": MoodSatisfiedIcon,
-    "Very satisfied": MoodVerySatisfiedIcon,
+  'Very dissatisfied': MoodVeryDissatisfiedIcon,
+  Dissatisfied: MoodDissatisfiedIcon,
+  Neutral: MoodNeutralIcon,
+  Satisfied: MoodSatisfiedIcon,
+  'Very satisfied': MoodVerySatisfiedIcon,
 };
 
 export const Mood = ({ selectedMood, onClick }) => {
-    return (
-        <section className="mood-wrapper">
-            {Object.entries(moodConfig).map(([moodName, MoodIcon]) => (
-                <div className={classnames("mood-icon-wrapper", {
-                    "mood-icon-wrapper--selected": moodName === selectedMood,
-                })}>
-                    <IconButton
-                        icon={MoodIcon}
-                        className={classnames("mood-icon", {
-                            "mood-icon--selected": moodName === selectedMood,
-                        })}
-                        onClick={() => onClick(moodName)}
-                    />
-                    <span 
-                        className={classnames("mood-name", {
-                            "mood-name--selected": moodName === selectedMood,
-                        })}
-                    >
-                        {moodName}
-                    </span>
-                </div>
-            ))}
-        </section>
-    );
-};
\ No newline at end of file
+  return (
+    <section className="mood-wrapper">
+      {Object.entries(moodConfig).map(([moodName, MoodIcon]) => (
+        <div
+          key={moodName}
+          className={classnames('mood-icon-wrapper', {
+            'mood-icon-wrapper--selected': moodName === selectedMood,
+          })}
+        >
+          <IconButton
+            icon={MoodIcon}
+            className={classnames('mood-icon', {
+              'mood-icon--selected': moodName === selectedMood,
+            })}
+            onClick={() => onClick(moodName)}
+          />
+          <span
+            className={classnames('mood-name', {
+              'mood-name--selected': moodName === selectedMood,
+            })}
+          >
+            {moodName}
+          </span>
+        </div>
+      ))}
+    </section>
+  );
+};

From 61948432bde395ee3ef52fa8b0409c359515e42e Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongg1409@gmail>
Date: Fri, 13 Sep 2024 12:21:27 +0100
Subject: [PATCH 13/35] draft version of local storage

Signed-off-by: Huong Nguyen <huongg1409@gmail>
---
 src/components/feedback/feedback.js   | 20 ++++++++++++++-----
 src/components/flowchart/flowchart.js | 28 +++++++++++++++++++++++----
 2 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/src/components/feedback/feedback.js b/src/components/feedback/feedback.js
index d803f3cb6b..9760331255 100644
--- a/src/components/feedback/feedback.js
+++ b/src/components/feedback/feedback.js
@@ -11,14 +11,26 @@ export const Feedback = ({ buttonTitle, formTitle, usageContext }) => {
     localStorageFeedbackFirstTime
   );
   const [showFeedbackForm, setShowFeedbackForm] = useState(
-    Object.keys(firstTimeSeeingFeedbackComponent).length === 0 ||
-      firstTimeSeeingFeedbackComponent?.usageContext
+    firstTimeSeeingFeedbackComponent?.usageContext
   );
+  // const [showFeedbackForm, setShowFeedbackForm] = useState(
+  //   Object.keys(firstTimeSeeingFeedbackComponent).length === 0 ||
+  //     firstTimeSeeingFeedbackComponent?.usageContext
+  // );
   const [isCancelled, setIsCancelled] = useState(false);
   const [isSubmitted, setSubmitted] = useState(false);
   const [activeMood, setActiveMood] = useState(null);
   const [feedbackText, setFeedbackText] = useState('');
 
+  useEffect(() => {
+    setTimeout(() => {
+      if (Object.keys(firstTimeSeeingFeedbackComponent).length === 0) {
+        updateLocalStorageUsageContext(true);
+        setShowFeedbackForm(true);
+      }
+    }, 5000);
+  }, []);
+
   const handleFormSubmit = (e) => {
     e.preventDefault();
 
@@ -30,17 +42,15 @@ export const Feedback = ({ buttonTitle, formTitle, usageContext }) => {
     getHeap().track(getDataTestAttribute(usageContext, 'feedback-form'), data);
     setSubmitted(true);
 
-    // Update local storage with usage context set to false
     updateLocalStorageUsageContext(false);
   };
 
   const handleFormCancel = () => {
     setIsCancelled(true);
-    // Update local storage with usage context set to false
     updateLocalStorageUsageContext(false);
   };
 
-  // Utility function to update the usage context in local storage
+  // to update the usage context in local storage
   const updateLocalStorageUsageContext = (value) => {
     // Load existing data or initialize to an empty object if null
     const existingData = loadLocalStorage(localStorageFeedbackFirstTime) || {};
diff --git a/src/components/flowchart/flowchart.js b/src/components/flowchart/flowchart.js
index 0bfac5990a..059aac6424 100644
--- a/src/components/flowchart/flowchart.js
+++ b/src/components/flowchart/flowchart.js
@@ -47,6 +47,8 @@ import Tooltip from '../ui/tooltip';
 import { SlicedPipelineActionBar } from '../sliced-pipeline-action-bar/sliced-pipeline-action-bar';
 import { SlicedPipelineNotification } from '../sliced-pipeline-notification/sliced-pipeline-notification';
 import { Feedback } from '../feedback/feedback';
+import { localStorageFeedbackFirstTime } from '../../config';
+import { loadLocalStorage } from '../../store/helpers';
 
 import './styles/flowchart.scss';
 
@@ -66,7 +68,7 @@ export class FlowChart extends Component {
         range: [],
       },
       showSlicingNotification: false,
-      showFeedbackForm: false,
+      resetSlicingPipelineBtnClicked: false,
     };
     this.onViewChange = this.onViewChange.bind(this);
     this.onViewChangeEnd = this.onViewChangeEnd.bind(this);
@@ -807,12 +809,18 @@ export class FlowChart extends Component {
       visibleSlicing,
     } = this.props;
     const { outerWidth = 0, outerHeight = 0 } = chartSize;
-    const { showSlicingNotification, showFeedbackForm } = this.state;
+    const { showSlicingNotification, resetSlicingPipelineBtnClicked } =
+      this.state;
 
     // Counts the nodes in the slicedPipeline array, excludes any modularPipeline Id
     const numberOfNodesInSlicedPipeline = slicedPipeline.filter(
       (id) => !modularPipelineIds.includes(id)
     ).length;
+
+    const shouldShowFeedback =
+      resetSlicingPipelineBtnClicked &&
+      loadLocalStorage(localStorageFeedbackFirstTime)['slicing-pipeline'] ===
+        undefined;
     return (
       <div
         className="pipeline-flowchart kedro"
@@ -874,13 +882,22 @@ export class FlowChart extends Component {
           })}
           ref={this.layerNamesRef}
         />
+
         {isSlicingPipelineApplied && (
           <Feedback
             buttonTitle={'Feedback for pipeline slicing'}
-            formTitle={'How satisfied are you with 
pipeline slicing?'}
+            formTitle={'How satisfied are you with pipeline slicing?'}
             usageContext={'slicing-pipeline'}
           />
         )}
+        {/* { (isSlicingPipelineApplied || shouldShowFeedback) && (
+          <Feedback
+            buttonTitle={'Feedback for pipeline slicing'}
+            formTitle={'How satisfied are you with pipeline slicing?'}
+            usageContext={'slicing-pipeline'}
+            displayFormWithoutDelay={shouldShowFeedback}
+          />
+        )} */}
         {showSlicingNotification && visibleSlicing && (
           <SlicedPipelineNotification
             notification={
@@ -897,7 +914,10 @@ export class FlowChart extends Component {
               displayMetadataPanel={Boolean(clickedNode)}
               isSlicingPipelineApplied={isSlicingPipelineApplied}
               onApplySlicingPipeline={() => onApplySlice(true)}
-              onResetSlicingPipeline={this.resetSlicedPipeline}
+              onResetSlicingPipeline={() => {
+                this.resetSlicedPipeline();
+                this.setState({ resetSlicingPipelineBtnClicked: true });
+              }}
               ref={this.slicedPipelineActionBarRef}
               runCommand={runCommand}
               slicedPipelineLength={numberOfNodesInSlicedPipeline}

From ffbce1a398cb7af312ab3ab13b6c5042f4c4090e Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongg1409@gmail>
Date: Mon, 16 Sep 2024 10:15:15 +0100
Subject: [PATCH 14/35] update styling

Signed-off-by: Huong Nguyen <huongg1409@gmail>
---
 src/components/feedback-form/feedback-form.js |  8 +++-
 .../feedback-form/feedback-form.scss          | 42 ++++---------------
 2 files changed, 16 insertions(+), 34 deletions(-)

diff --git a/src/components/feedback-form/feedback-form.js b/src/components/feedback-form/feedback-form.js
index db762c87ed..d50e445db7 100755
--- a/src/components/feedback-form/feedback-form.js
+++ b/src/components/feedback-form/feedback-form.js
@@ -23,7 +23,13 @@ export const FeedbackForm = ({
     }
 
     if (isCancelled) {
-      return 'You can provide feedback at any time by clicking on the feedback button.';
+      return (
+        <>
+          You can provide feedback at any time
+          <br />
+          by clicking on the feedback button.
+        </>
+      );
     }
   };
   if (isSubmitted || isCancelled) {
diff --git a/src/components/feedback-form/feedback-form.scss b/src/components/feedback-form/feedback-form.scss
index 65913420a2..4d82247a4b 100755
--- a/src/components/feedback-form/feedback-form.scss
+++ b/src/components/feedback-form/feedback-form.scss
@@ -16,7 +16,6 @@
   --feedback-form--text-area--color: #{colors.$black-900};
 }
 
-
 .feedback-form--text-area {
   align-items: center;
   background-color: transparent;
@@ -42,7 +41,7 @@
   padding: 24px;
   padding-bottom: 36px;
   background-color: var(--feedback-form-bg);
-  border-radius: 8px 0px 0px 8px;
+  border-radius: 8px 0 0 8px;
 
   .button__btn {
     margin-top: 12px;
@@ -64,33 +63,10 @@
   width: 24px;
   height: 24px;
   cursor: pointer; /* Optional: Changes the cursor on hover to indicate it's clickable */
-}
-
-.feedback-form--generic-message {
-  font-size: 14px;
-  text-align: center;
-  color: #{colors.$black-200};
-  font-style: normal;
-  font-weight: 400;
-  line-height: 20px;
-}
 
-.feedback-form--link {
-  background: none;
-  border: none;
-  color: #{colors.$black-200};
-  text-decoration: underline;
-  cursor: pointer;
-  padding: 0;
-  font: inherit;
-}
-
-.feedback-form--link:focus:not(:focus-visible) {
-  outline: none;
-}
-
-.feedback-form--link:focus-visible {
-  outline: thin dotted;
+  path {
+    fill: var(--feedback-form-title);
+  }
 }
 
 .feedback-form {
@@ -98,20 +74,20 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  .button__btn  {
+
+  .button__btn {
     border: 1px solid var(--feedback-form-title);
     color: var(--feedback-form-title);
-
     margin-top: 36px;
   }
 }
 
 .feedback-form--message {
-  color: black;
+  color: var(--feedback-form-title);
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: 20px;
-  padding: 36px 24px;
+  padding: 24px 36px;
   width: auto;
-}
\ No newline at end of file
+}

From fd1646ea31a39b896813979977a5f2fafb89b1a4 Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongg1409@gmail>
Date: Mon, 16 Sep 2024 10:42:17 +0100
Subject: [PATCH 15/35] break the title into 2 lines

Signed-off-by: Huong Nguyen <huongg1409@gmail>
---
 src/components/feedback-form/feedback-form.js |  8 +-
 .../feedback-form/feedback-form.scss          | 44 ++++++-----
 src/components/feedback-form/mood.scss        | 78 ++++++++++---------
 src/components/flowchart/flowchart.js         |  6 +-
 4 files changed, 76 insertions(+), 60 deletions(-)

diff --git a/src/components/feedback-form/feedback-form.js b/src/components/feedback-form/feedback-form.js
index d50e445db7..c4aa82bcb1 100755
--- a/src/components/feedback-form/feedback-form.js
+++ b/src/components/feedback-form/feedback-form.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import classnames from 'classnames';
 import Button from '../ui/button';
 import CloseIcon from '../icons/close';
@@ -45,7 +45,11 @@ export const FeedbackForm = ({
     );
   } else {
     return (
-      <div className="feedback-form--wrapper">
+      <div
+        className={classnames('feedback-form--wrapper', {
+          'feedback-form--wrapper-no-form': activeMood === null,
+        })}
+      >
         <div className="feedback-form--close-icon" onClick={onCancel}>
           <CloseIcon />
         </div>
diff --git a/src/components/feedback-form/feedback-form.scss b/src/components/feedback-form/feedback-form.scss
index 4d82247a4b..a38640953d 100755
--- a/src/components/feedback-form/feedback-form.scss
+++ b/src/components/feedback-form/feedback-form.scss
@@ -16,16 +16,35 @@
   --feedback-form--text-area--color: #{colors.$black-900};
 }
 
+.feedback-form--wrapper {
+  background-color: var(--feedback-form-bg);
+  border-radius: 8px 0 0 8px;
+  min-width: 312px;
+  padding: 24px 24px 36px;
+  position: fixed;
+  right: 0;
+  top: 320px;
+
+  .button__btn {
+    margin-top: 12px;
+  }
+}
+
+.feedback-form--wrapper-no-form {
+  padding-bottom: 68px;
+}
+
 .feedback-form--text-area {
   align-items: center;
   background-color: transparent;
   border: 1px solid grey;
   display: flex;
   height: 104px;
+  margin-top: 68px;
   padding: 8px 12px;
+  resize: none;
   text-align: center;
-  width: 100%;
-  margin-top: 68px;
+  width: 364px;
 }
 
 .feedback-form--text-area::placeholder {
@@ -33,29 +52,15 @@
   margin: auto; /* Centers the placeholder text vertically */
 }
 
-.feedback-form--wrapper {
-  position: fixed;
-  right: 0;
-  top: 320px;
-  width: 356px;
-  padding: 24px;
-  padding-bottom: 36px;
-  background-color: var(--feedback-form-bg);
-  border-radius: 8px 0 0 8px;
-
-  .button__btn {
-    margin-top: 12px;
-  }
-}
-
 .feedback-form--title {
   color: var(--feedback-form-title);
   font-size: 18px;
   font-style: normal;
   font-weight: 400;
   line-height: 28px;
-  text-align: center;
   margin-top: 12px;
+  text-align: center;
+  margin-bottom: 24px;
 }
 
 .feedback-form--close-icon {
@@ -70,15 +75,16 @@
 }
 
 .feedback-form {
+  align-items: center;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: center;
 
   .button__btn {
     border: 1px solid var(--feedback-form-title);
     color: var(--feedback-form-title);
     margin-top: 36px;
+    padding: 8px 12px;
   }
 }
 
diff --git a/src/components/feedback-form/mood.scss b/src/components/feedback-form/mood.scss
index 572607b69c..e523254dc8 100755
--- a/src/components/feedback-form/mood.scss
+++ b/src/components/feedback-form/mood.scss
@@ -3,63 +3,65 @@
 $x-offset: 20px;
 
 .kui-theme--dark {
-    --mood-name--color: #{colors.$black-200};
+  --mood-name--color: #{colors.$black-200};
 }
-  
+
 .kui-theme--light {
-    --mood-name--color: #{colors.$black-0};
+  --mood-name--color: #{colors.$black-0};
 }
 
 .mood-wrapper {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    gap: 12px;
-}
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  gap: 12px;
 
-.mood-wrapper {
-    .pipeline-icon--container {
-        list-style-type: none;
-    }
-    .pipeline-icon-toolbar__button {
-        width: 32px;
-        height: 32px;
-    }
+  .pipeline-icon--container {
+    list-style-type: none;
+  }
 
-    .pipeline-icon-toolbar__button:hover  {
-        path {
-            fill: #{colors.$blue-300};
-        }
-    }
+  .pipeline-icon-toolbar__button {
+    width: 32px;
+    height: 32px;
+  }
 
-    .pipeline-icon-toolbar__button svg {
-        width: 32px;
-        height: 32px;
+  .pipeline-icon-toolbar__button:hover {
+    path {
+      fill: #{colors.$blue-300};
     }
+  }
+
+  .pipeline-icon-toolbar__button svg {
+    width: 32px;
+    height: 32px;
+  }
 }
 
 .mood-icon--selected {
-    path {
-        fill: #{colors.$blue-300};
-    }
+  path {
+    fill: #{colors.$blue-300};
+  }
 }
 
-
 .mood-icon-wrapper--selected {
-    position: relative;
+  position: relative;
 }
 
 .mood-name {
-    color: var(--mood-name--color);
-    left: 50%;
-    margin-top: 12px;
-    opacity: 0;
-    position: absolute;
-    text-align: center;
-    top: 125%;
-    transform: translate(-50%,-50%);
+  color: var(--mood-name--color);
+  left: 50%;
+  margin-top: 12px;
+  opacity: 0;
+  position: absolute;
+  text-align: center;
+  top: 125%;
+  transform: translate(-50%, -50%);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
 }
 
 .mood-name--selected {
-    opacity: 1;
+  opacity: 1;
 }
diff --git a/src/components/flowchart/flowchart.js b/src/components/flowchart/flowchart.js
index 059aac6424..11c59d58a5 100644
--- a/src/components/flowchart/flowchart.js
+++ b/src/components/flowchart/flowchart.js
@@ -886,7 +886,11 @@ export class FlowChart extends Component {
         {isSlicingPipelineApplied && (
           <Feedback
             buttonTitle={'Feedback for pipeline slicing'}
-            formTitle={'How satisfied are you with pipeline slicing?'}
+            formTitle={[
+              'How satisfied are you with',
+              <br key="1" />,
+              'pipeline slicing?',
+            ]}
             usageContext={'slicing-pipeline'}
           />
         )}

From 075b03f169c009c2f3ffae0a866eb1547c8815e2 Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongg1409@gmail>
Date: Mon, 16 Sep 2024 11:33:32 +0100
Subject: [PATCH 16/35] move mood to its own component

Signed-off-by: Huong Nguyen <huongg1409@gmail>
---
 src/components/feedback-form/feedback-form.js    | 2 +-
 src/components/{feedback-form => mood}/mood.js   | 0
 src/components/{feedback-form => mood}/mood.scss | 0
 3 files changed, 1 insertion(+), 1 deletion(-)
 rename src/components/{feedback-form => mood}/mood.js (100%)
 rename src/components/{feedback-form => mood}/mood.scss (100%)

diff --git a/src/components/feedback-form/feedback-form.js b/src/components/feedback-form/feedback-form.js
index c4aa82bcb1..1864dab8ee 100755
--- a/src/components/feedback-form/feedback-form.js
+++ b/src/components/feedback-form/feedback-form.js
@@ -2,7 +2,7 @@ import React from 'react';
 import classnames from 'classnames';
 import Button from '../ui/button';
 import CloseIcon from '../icons/close';
-import { Mood } from './mood';
+import { Mood } from '../mood/mood';
 
 import './feedback-form.scss';
 
diff --git a/src/components/feedback-form/mood.js b/src/components/mood/mood.js
similarity index 100%
rename from src/components/feedback-form/mood.js
rename to src/components/mood/mood.js
diff --git a/src/components/feedback-form/mood.scss b/src/components/mood/mood.scss
similarity index 100%
rename from src/components/feedback-form/mood.scss
rename to src/components/mood/mood.scss

From 28fde20c72c6ae19a59636455e44a6153de52c32 Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongg1409@gmail>
Date: Mon, 16 Sep 2024 13:42:11 +0100
Subject: [PATCH 17/35] include the release note

Signed-off-by: Huong Nguyen <huongg1409@gmail>
---
 RELEASE.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/RELEASE.md b/RELEASE.md
index 2b6e64f130..0dee3a7aeb 100644
--- a/RELEASE.md
+++ b/RELEASE.md
@@ -13,7 +13,7 @@ Please follow the established format:
 - Slice a pipeline functionality. (#2036)
 
 ## Bug fixes and other changes
-
+- Add feedback component for slicing pipeline. (#2085)
 - Fixes design issues in metadata panel. (#2009)
 - Fix missing run command in metadata panel for task nodes. (#2055)
 

From 172b939c3eb8d6cfc4c3592ac57dd4cd3e5d48c8 Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongg1409@gmail>
Date: Mon, 16 Sep 2024 15:09:50 +0100
Subject: [PATCH 18/35] fix eslint error

Signed-off-by: Huong Nguyen <huongg1409@gmail>
---
 src/components/feedback/feedback.js   | 9 +++------
 src/components/flowchart/flowchart.js | 4 ----
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/src/components/feedback/feedback.js b/src/components/feedback/feedback.js
index 9760331255..3880a6c104 100644
--- a/src/components/feedback/feedback.js
+++ b/src/components/feedback/feedback.js
@@ -13,10 +13,7 @@ export const Feedback = ({ buttonTitle, formTitle, usageContext }) => {
   const [showFeedbackForm, setShowFeedbackForm] = useState(
     firstTimeSeeingFeedbackComponent?.usageContext
   );
-  // const [showFeedbackForm, setShowFeedbackForm] = useState(
-  //   Object.keys(firstTimeSeeingFeedbackComponent).length === 0 ||
-  //     firstTimeSeeingFeedbackComponent?.usageContext
-  // );
+
   const [isCancelled, setIsCancelled] = useState(false);
   const [isSubmitted, setSubmitted] = useState(false);
   const [activeMood, setActiveMood] = useState(null);
@@ -28,8 +25,8 @@ export const Feedback = ({ buttonTitle, formTitle, usageContext }) => {
         updateLocalStorageUsageContext(true);
         setShowFeedbackForm(true);
       }
-    }, 5000);
-  }, []);
+    }, 4000);
+  }, [firstTimeSeeingFeedbackComponent]);
 
   const handleFormSubmit = (e) => {
     e.preventDefault();
diff --git a/src/components/flowchart/flowchart.js b/src/components/flowchart/flowchart.js
index 11c59d58a5..c58e650f26 100644
--- a/src/components/flowchart/flowchart.js
+++ b/src/components/flowchart/flowchart.js
@@ -817,10 +817,6 @@ export class FlowChart extends Component {
       (id) => !modularPipelineIds.includes(id)
     ).length;
 
-    const shouldShowFeedback =
-      resetSlicingPipelineBtnClicked &&
-      loadLocalStorage(localStorageFeedbackFirstTime)['slicing-pipeline'] ===
-        undefined;
     return (
       <div
         className="pipeline-flowchart kedro"

From bca6d908ab90a3e15f933422962493314f27cb31 Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongg1409@gmail>
Date: Mon, 16 Sep 2024 17:04:35 +0100
Subject: [PATCH 19/35] Separate feedback to feedback-button and feedback-form
 to suit the logic

Signed-off-by: Huong Nguyen <huongg1409@gmail>
---
 src/components/feedback-form/feedback-form.js | 87 +++++++++++++------
 src/components/flowchart/flowchart.js         | 45 ++++++----
 2 files changed, 89 insertions(+), 43 deletions(-)

diff --git a/src/components/feedback-form/feedback-form.js b/src/components/feedback-form/feedback-form.js
index 1864dab8ee..61f29add36 100755
--- a/src/components/feedback-form/feedback-form.js
+++ b/src/components/feedback-form/feedback-form.js
@@ -1,45 +1,66 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import classnames from 'classnames';
 import Button from '../ui/button';
 import CloseIcon from '../icons/close';
 import { Mood } from '../mood/mood';
+import { getHeap } from '../../tracking';
+import { getDataTestAttribute } from '../../utils/get-data-test-attribute';
+import { localStorageFeedbackFirstTime } from '../../config';
+import { loadLocalStorage, saveLocalStorage } from '../../store/helpers';
 
 import './feedback-form.scss';
 
-export const FeedbackForm = ({
-  activeMood,
-  isCancelled,
-  feedbackText,
-  isSubmitted,
-  onCancel,
-  onSubmit,
-  setActiveMood,
-  setFeedbackText,
-  title,
-}) => {
+export const FeedbackForm = ({ hideForm, title, usageContext }) => {
+  const [formStatus, setFormStatus] = useState('active'); // 'active', 'submitted', 'cancelled'
+  const [activeMood, setActiveMood] = useState(null);
+  const [feedbackText, setFeedbackText] = useState('');
+
+  const updateFormAndLocalStorage = () => {
+    updateLocalStorageUsageContext(false);
+    hideForm();
+  };
+
+  const handleFormAction = (action) => {
+    setFormStatus(action);
+    setTimeout(updateFormAndLocalStorage, 4000);
+  };
+
+  const updateLocalStorageUsageContext = (value) => {
+    const existingData = loadLocalStorage(localStorageFeedbackFirstTime) || {};
+    existingData[usageContext] = value;
+    saveLocalStorage(localStorageFeedbackFirstTime, existingData);
+  };
+
+  useEffect(() => {
+    if (formStatus === 'submitted' || formStatus === 'cancelled') {
+      const timer = setTimeout(() => {
+        setFormStatus('active');
+        setActiveMood(null);
+        setFeedbackText('');
+      }, 4000);
+
+      return () => clearTimeout(timer);
+    }
+  }, [formStatus]);
+
   const getMessages = () => {
-    if (isSubmitted) {
+    if (formStatus === 'submitted') {
       return 'Thank you for sharing feedback!';
     }
-
-    if (isCancelled) {
+    if (formStatus === 'cancelled') {
       return (
         <>
-          You can provide feedback at any time
+          You can provide feedback any time by using
           <br />
-          by clicking on the feedback button.
+          the feedback button in the sliced view.
         </>
       );
     }
   };
-  if (isSubmitted || isCancelled) {
+
+  if (formStatus !== 'active') {
     return (
-      <div
-        className={classnames(
-          'feedback-form--wrapper',
-          'feedback-form--message'
-        )}
-      >
+      <div className="feedback-form--wrapper feedback-form--message">
         {getMessages()}
       </div>
     );
@@ -50,7 +71,10 @@ export const FeedbackForm = ({
           'feedback-form--wrapper-no-form': activeMood === null,
         })}
       >
-        <div className="feedback-form--close-icon" onClick={onCancel}>
+        <div
+          className="feedback-form--close-icon"
+          onClick={() => handleFormAction('cancelled')}
+        >
           <CloseIcon />
         </div>
         <h2 className="feedback-form--title">{title}</h2>
@@ -64,7 +88,18 @@ export const FeedbackForm = ({
                 onChange={(event) => setFeedbackText(event.target.value)}
                 placeholder="How can we improve this feature?"
               />
-              <Button type="submit" onClick={onSubmit}>
+              <Button
+                type="submit"
+                onClick={(e) => {
+                  e.preventDefault();
+                  handleFormAction('submitted');
+                  // Assuming getHeap().track(...) doesn't need to be changed or can be abstracted if necessary
+                  getHeap().track(
+                    getDataTestAttribute(usageContext, 'feedback-form'),
+                    { rating: activeMood, feedback: feedbackText }
+                  );
+                }}
+              >
                 Submit feedback
               </Button>
             </>
diff --git a/src/components/flowchart/flowchart.js b/src/components/flowchart/flowchart.js
index c58e650f26..cae4108f38 100644
--- a/src/components/flowchart/flowchart.js
+++ b/src/components/flowchart/flowchart.js
@@ -46,7 +46,8 @@ import { getDataTestAttribute } from '../../utils/get-data-test-attribute';
 import Tooltip from '../ui/tooltip';
 import { SlicedPipelineActionBar } from '../sliced-pipeline-action-bar/sliced-pipeline-action-bar';
 import { SlicedPipelineNotification } from '../sliced-pipeline-notification/sliced-pipeline-notification';
-import { Feedback } from '../feedback/feedback';
+import { FeedbackButton } from '../feedback-button/feedback-button';
+import { FeedbackForm } from '../feedback-form/feedback-form';
 import { localStorageFeedbackFirstTime } from '../../config';
 import { loadLocalStorage } from '../../store/helpers';
 
@@ -69,6 +70,7 @@ export class FlowChart extends Component {
       },
       showSlicingNotification: false,
       resetSlicingPipelineBtnClicked: false,
+      showFeedbackForm: false,
     };
     this.onViewChange = this.onViewChange.bind(this);
     this.onViewChangeEnd = this.onViewChangeEnd.bind(this);
@@ -809,14 +811,25 @@ export class FlowChart extends Component {
       visibleSlicing,
     } = this.props;
     const { outerWidth = 0, outerHeight = 0 } = chartSize;
-    const { showSlicingNotification, resetSlicingPipelineBtnClicked } =
-      this.state;
+    const {
+      showSlicingNotification,
+      resetSlicingPipelineBtnClicked,
+      showFeedbackForm,
+    } = this.state;
 
     // Counts the nodes in the slicedPipeline array, excludes any modularPipeline Id
     const numberOfNodesInSlicedPipeline = slicedPipeline.filter(
       (id) => !modularPipelineIds.includes(id)
     ).length;
 
+    const shouldShowFeedback =
+      resetSlicingPipelineBtnClicked &&
+      loadLocalStorage(localStorageFeedbackFirstTime)['slicing-pipeline'] ===
+        undefined;
+
+    const hasSeenFeedbackForm =
+      loadLocalStorage(localStorageFeedbackFirstTime)['slicing-pipeline'] ===
+      false;
     return (
       <div
         className="pipeline-flowchart kedro"
@@ -878,26 +891,24 @@ export class FlowChart extends Component {
           })}
           ref={this.layerNamesRef}
         />
-
-        {isSlicingPipelineApplied && (
-          <Feedback
-            buttonTitle={'Feedback for pipeline slicing'}
-            formTitle={[
+        <FeedbackButton
+          onClick={() => this.setState({ showFeedbackForm: true })}
+          title="Feedback for pipeline slicing"
+          visible={
+            isSlicingPipelineApplied && hasSeenFeedbackForm && !showFeedbackForm
+          }
+        />
+        {(shouldShowFeedback || showFeedbackForm) && (
+          <FeedbackForm
+            hideForm={() => this.setState({ showFeedbackForm: false })}
+            title={[
               'How satisfied are you with',
               <br key="1" />,
               'pipeline slicing?',
             ]}
-            usageContext={'slicing-pipeline'}
+            usageContext="slicing-pipeline"
           />
         )}
-        {/* { (isSlicingPipelineApplied || shouldShowFeedback) && (
-          <Feedback
-            buttonTitle={'Feedback for pipeline slicing'}
-            formTitle={'How satisfied are you with pipeline slicing?'}
-            usageContext={'slicing-pipeline'}
-            displayFormWithoutDelay={shouldShowFeedback}
-          />
-        )} */}
         {showSlicingNotification && visibleSlicing && (
           <SlicedPipelineNotification
             notification={

From bc8aea093719b7b3bd538270666366d89cca33b0 Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongg1409@gmail>
Date: Mon, 16 Sep 2024 19:37:46 +0100
Subject: [PATCH 20/35] tidy up code

Signed-off-by: Huong Nguyen <huongg1409@gmail>
---
 src/components/feedback-form/feedback-form.js | 44 +++++++++----------
 src/components/flowchart/flowchart.js         | 10 +++--
 src/config.js                                 |  2 +
 3 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/src/components/feedback-form/feedback-form.js b/src/components/feedback-form/feedback-form.js
index 61f29add36..b2c527fc32 100755
--- a/src/components/feedback-form/feedback-form.js
+++ b/src/components/feedback-form/feedback-form.js
@@ -7,6 +7,7 @@ import { getHeap } from '../../tracking';
 import { getDataTestAttribute } from '../../utils/get-data-test-attribute';
 import { localStorageFeedbackFirstTime } from '../../config';
 import { loadLocalStorage, saveLocalStorage } from '../../store/helpers';
+import { feedbackMessageDelayTimeout } from '../../config';
 
 import './feedback-form.scss';
 
@@ -15,14 +16,15 @@ export const FeedbackForm = ({ hideForm, title, usageContext }) => {
   const [activeMood, setActiveMood] = useState(null);
   const [feedbackText, setFeedbackText] = useState('');
 
-  const updateFormAndLocalStorage = () => {
-    updateLocalStorageUsageContext(false);
-    hideForm();
-  };
-
   const handleFormAction = (action) => {
     setFormStatus(action);
-    setTimeout(updateFormAndLocalStorage, 4000);
+
+    const timer = setTimeout(() => {
+      updateLocalStorageUsageContext(false);
+      hideForm();
+    }, feedbackMessageDelayTimeout);
+
+    return () => clearTimeout(timer);
   };
 
   const updateLocalStorageUsageContext = (value) => {
@@ -37,12 +39,21 @@ export const FeedbackForm = ({ hideForm, title, usageContext }) => {
         setFormStatus('active');
         setActiveMood(null);
         setFeedbackText('');
-      }, 4000);
+      }, feedbackMessageDelayTimeout);
 
       return () => clearTimeout(timer);
     }
   }, [formStatus]);
 
+  const handleFormSubmit = (e) => {
+    e.preventDefault();
+    handleFormAction('submitted');
+    getHeap().track(getDataTestAttribute(usageContext, 'feedback-form'), {
+      rating: activeMood,
+      feedback: feedbackText,
+    });
+  };
+
   const getMessages = () => {
     if (formStatus === 'submitted') {
       return 'Thank you for sharing feedback!';
@@ -50,15 +61,15 @@ export const FeedbackForm = ({ hideForm, title, usageContext }) => {
     if (formStatus === 'cancelled') {
       return (
         <>
-          You can provide feedback any time by using
+          You can provide feedback at any time
           <br />
-          the feedback button in the sliced view.
+          by clicking on the feedback button.
         </>
       );
     }
   };
 
-  if (formStatus !== 'active') {
+  if (formStatus === 'submitted' || formStatus === 'cancelled') {
     return (
       <div className="feedback-form--wrapper feedback-form--message">
         {getMessages()}
@@ -88,18 +99,7 @@ export const FeedbackForm = ({ hideForm, title, usageContext }) => {
                 onChange={(event) => setFeedbackText(event.target.value)}
                 placeholder="How can we improve this feature?"
               />
-              <Button
-                type="submit"
-                onClick={(e) => {
-                  e.preventDefault();
-                  handleFormAction('submitted');
-                  // Assuming getHeap().track(...) doesn't need to be changed or can be abstracted if necessary
-                  getHeap().track(
-                    getDataTestAttribute(usageContext, 'feedback-form'),
-                    { rating: activeMood, feedback: feedbackText }
-                  );
-                }}
-              >
+              <Button type="submit" onClick={handleFormSubmit}>
                 Submit feedback
               </Button>
             </>
diff --git a/src/components/flowchart/flowchart.js b/src/components/flowchart/flowchart.js
index cae4108f38..bef130e4ea 100644
--- a/src/components/flowchart/flowchart.js
+++ b/src/components/flowchart/flowchart.js
@@ -822,12 +822,12 @@ export class FlowChart extends Component {
       (id) => !modularPipelineIds.includes(id)
     ).length;
 
-    const shouldShowFeedback =
+    const isFirstTimeFeedbackAfterResetSlicing =
       resetSlicingPipelineBtnClicked &&
       loadLocalStorage(localStorageFeedbackFirstTime)['slicing-pipeline'] ===
         undefined;
 
-    const hasSeenFeedbackForm =
+    const seenSlicingFeedbackBefore =
       loadLocalStorage(localStorageFeedbackFirstTime)['slicing-pipeline'] ===
       false;
     return (
@@ -895,10 +895,12 @@ export class FlowChart extends Component {
           onClick={() => this.setState({ showFeedbackForm: true })}
           title="Feedback for pipeline slicing"
           visible={
-            isSlicingPipelineApplied && hasSeenFeedbackForm && !showFeedbackForm
+            isSlicingPipelineApplied &&
+            seenSlicingFeedbackBefore &&
+            !showFeedbackForm
           }
         />
-        {(shouldShowFeedback || showFeedbackForm) && (
+        {(isFirstTimeFeedbackAfterResetSlicing || showFeedbackForm) && (
           <FeedbackForm
             hideForm={() => this.setState({ showFeedbackForm: false })}
             title={[
diff --git a/src/config.js b/src/config.js
index 269ad57852..3b8f895fce 100644
--- a/src/config.js
+++ b/src/config.js
@@ -34,6 +34,8 @@ export const codeSidebarWidth = {
   open: 480,
 };
 
+export const feedbackMessageDelayTimeout = 4000;
+
 // These colours variables come from styles/variables
 const slate600 = '#0e222d';
 const slate200 = '#21333e';

From efa5c9133fc763bfa4565202dbbbfc4008559fde Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongg1409@gmail>
Date: Mon, 16 Sep 2024 19:43:36 +0100
Subject: [PATCH 21/35] remove unused icon and components

Signed-off-by: Huong Nguyen <huongg1409@gmail>
---
 .../feedback-form/feedback-form.scss          |  2 +-
 src/components/feedback/feedback.js           | 94 -------------------
 src/components/icons/star.js                  | 12 ---
 3 files changed, 1 insertion(+), 107 deletions(-)
 delete mode 100644 src/components/feedback/feedback.js
 delete mode 100644 src/components/icons/star.js

diff --git a/src/components/feedback-form/feedback-form.scss b/src/components/feedback-form/feedback-form.scss
index a38640953d..2d0ff8660b 100755
--- a/src/components/feedback-form/feedback-form.scss
+++ b/src/components/feedback-form/feedback-form.scss
@@ -67,7 +67,7 @@
   margin-left: auto;
   width: 24px;
   height: 24px;
-  cursor: pointer; /* Optional: Changes the cursor on hover to indicate it's clickable */
+  cursor: pointer;
 
   path {
     fill: var(--feedback-form-title);
diff --git a/src/components/feedback/feedback.js b/src/components/feedback/feedback.js
deleted file mode 100644
index 3880a6c104..0000000000
--- a/src/components/feedback/feedback.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { FeedbackButton } from '../feedback-button/feedback-button';
-import { FeedbackForm } from '../feedback-form/feedback-form';
-import { getHeap } from '../../tracking';
-import { getDataTestAttribute } from '../../utils/get-data-test-attribute';
-import { localStorageFeedbackFirstTime } from '../../config';
-import { loadLocalStorage, saveLocalStorage } from '../../store/helpers';
-
-export const Feedback = ({ buttonTitle, formTitle, usageContext }) => {
-  const firstTimeSeeingFeedbackComponent = loadLocalStorage(
-    localStorageFeedbackFirstTime
-  );
-  const [showFeedbackForm, setShowFeedbackForm] = useState(
-    firstTimeSeeingFeedbackComponent?.usageContext
-  );
-
-  const [isCancelled, setIsCancelled] = useState(false);
-  const [isSubmitted, setSubmitted] = useState(false);
-  const [activeMood, setActiveMood] = useState(null);
-  const [feedbackText, setFeedbackText] = useState('');
-
-  useEffect(() => {
-    setTimeout(() => {
-      if (Object.keys(firstTimeSeeingFeedbackComponent).length === 0) {
-        updateLocalStorageUsageContext(true);
-        setShowFeedbackForm(true);
-      }
-    }, 4000);
-  }, [firstTimeSeeingFeedbackComponent]);
-
-  const handleFormSubmit = (e) => {
-    e.preventDefault();
-
-    const data = {
-      rating: activeMood,
-      feedback: feedbackText,
-    };
-
-    getHeap().track(getDataTestAttribute(usageContext, 'feedback-form'), data);
-    setSubmitted(true);
-
-    updateLocalStorageUsageContext(false);
-  };
-
-  const handleFormCancel = () => {
-    setIsCancelled(true);
-    updateLocalStorageUsageContext(false);
-  };
-
-  // to update the usage context in local storage
-  const updateLocalStorageUsageContext = (value) => {
-    // Load existing data or initialize to an empty object if null
-    const existingData = loadLocalStorage(localStorageFeedbackFirstTime) || {};
-    existingData[usageContext] = value;
-    saveLocalStorage(localStorageFeedbackFirstTime, existingData);
-  };
-
-  useEffect(() => {
-    if (isSubmitted || isCancelled) {
-      const timer = setTimeout(() => {
-        setSubmitted(false);
-        setIsCancelled(false);
-        setShowFeedbackForm(false);
-        setActiveMood(null);
-        setFeedbackText('');
-      }, 4000);
-
-      return () => clearTimeout(timer);
-    }
-  }, [isSubmitted, isCancelled]);
-
-  return (
-    <>
-      <FeedbackButton
-        onClick={() => setShowFeedbackForm(true)}
-        title={buttonTitle}
-        visible={!showFeedbackForm}
-      />
-      {showFeedbackForm && (
-        <FeedbackForm
-          activeMood={activeMood}
-          isCancelled={isCancelled}
-          feedbackText={feedbackText}
-          isSubmitted={isSubmitted}
-          onCancel={handleFormCancel}
-          onSubmit={handleFormSubmit}
-          setActiveMood={setActiveMood}
-          setFeedbackText={setFeedbackText}
-          title={formTitle}
-        />
-      )}
-    </>
-  );
-};
diff --git a/src/components/icons/star.js b/src/components/icons/star.js
deleted file mode 100644
index af8d11d951..0000000000
--- a/src/components/icons/star.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-
-const StarIcon = ({ className }) => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path
-      fill="currentColor"
-      d="m12 16.8-4.626 3.376a.5.5 0 0 1-.77-.559l1.782-5.443-4.64-3.356a.5.5 0 0 1 .294-.905l5.726.013 1.758-5.45a.5.5 0 0 1 .952 0l1.758 5.45 5.726-.013a.501.501 0 0 1 .294.905l-4.64 3.356 1.782 5.443a.5.5 0 0 1-.77.56L12 16.8z"
-    />
-  </svg>
-);
-
-export default StarIcon;

From d4eed385174f0e4ff2c57a346af391d8a1aa0883 Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongg1409@gmail>
Date: Mon, 16 Sep 2024 20:49:13 +0100
Subject: [PATCH 22/35] add transition for feedback-form and button

Signed-off-by: Huong Nguyen <huongg1409@gmail>
---
 src/components/feedback-button/feedback-button.scss |  1 +
 src/components/feedback-form/feedback-form.scss     | 11 +++++++++++
 src/components/mood/mood.js                         |  4 ++--
 3 files changed, 14 insertions(+), 2 deletions(-)
 mode change 100644 => 100755 src/components/feedback-button/feedback-button.scss

diff --git a/src/components/feedback-button/feedback-button.scss b/src/components/feedback-button/feedback-button.scss
old mode 100644
new mode 100755
index 239da136c0..01f3c6f006
--- a/src/components/feedback-button/feedback-button.scss
+++ b/src/components/feedback-button/feedback-button.scss
@@ -17,4 +17,5 @@
 
 .feedback-button--visible {
   opacity: 1;
+  transition: opacity 0.5s ease-in;
 }
diff --git a/src/components/feedback-form/feedback-form.scss b/src/components/feedback-form/feedback-form.scss
index 2d0ff8660b..e8c330812b 100755
--- a/src/components/feedback-form/feedback-form.scss
+++ b/src/components/feedback-form/feedback-form.scss
@@ -1,5 +1,15 @@
 @use '../../styles/variables' as colors;
 
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
 .kui-theme--dark {
   --feedback-form-bg: #{colors.$white-0};
   --feedback-form-content: #{colors.$slate-0};
@@ -17,6 +27,7 @@
 }
 
 .feedback-form--wrapper {
+  animation: fadeIn 0.5s ease-in;
   background-color: var(--feedback-form-bg);
   border-radius: 8px 0 0 8px;
   min-width: 312px;
diff --git a/src/components/mood/mood.js b/src/components/mood/mood.js
index fcd7f89fd2..d8491df06d 100755
--- a/src/components/mood/mood.js
+++ b/src/components/mood/mood.js
@@ -20,7 +20,7 @@ const moodConfig = {
 export const Mood = ({ selectedMood, onClick }) => {
   return (
     <section className="mood-wrapper">
-      {Object.entries(moodConfig).map(([moodName, MoodIcon]) => (
+      {Object.entries(moodConfig).map(([moodName, moodIcon]) => (
         <div
           key={moodName}
           className={classnames('mood-icon-wrapper', {
@@ -28,7 +28,7 @@ export const Mood = ({ selectedMood, onClick }) => {
           })}
         >
           <IconButton
-            icon={MoodIcon}
+            icon={moodIcon}
             className={classnames('mood-icon', {
               'mood-icon--selected': moodName === selectedMood,
             })}

From 997d9023a8e826a67aafbc74c8bbe098a3b9d8a5 Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongg1409@gmail>
Date: Mon, 16 Sep 2024 22:39:13 +0100
Subject: [PATCH 23/35] include new message for cancel event

Signed-off-by: Huong Nguyen <huongg1409@gmail>
---
 src/components/feedback-form/feedback-form.js   | 6 +++---
 src/components/feedback-form/feedback-form.scss | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/feedback-form/feedback-form.js b/src/components/feedback-form/feedback-form.js
index b2c527fc32..2813735e1f 100755
--- a/src/components/feedback-form/feedback-form.js
+++ b/src/components/feedback-form/feedback-form.js
@@ -61,9 +61,9 @@ export const FeedbackForm = ({ hideForm, title, usageContext }) => {
     if (formStatus === 'cancelled') {
       return (
         <>
-          You can provide feedback at any time
+          You can provide feedback any time by using
           <br />
-          by clicking on the feedback button.
+          the feedback button in the sliced view.
         </>
       );
     }
@@ -79,7 +79,7 @@ export const FeedbackForm = ({ hideForm, title, usageContext }) => {
     return (
       <div
         className={classnames('feedback-form--wrapper', {
-          'feedback-form--wrapper-no-form': activeMood === null,
+          'feedback-form--wrapper-no-text-area': activeMood === null,
         })}
       >
         <div
diff --git a/src/components/feedback-form/feedback-form.scss b/src/components/feedback-form/feedback-form.scss
index e8c330812b..a9b236a04e 100755
--- a/src/components/feedback-form/feedback-form.scss
+++ b/src/components/feedback-form/feedback-form.scss
@@ -41,7 +41,7 @@
   }
 }
 
-.feedback-form--wrapper-no-form {
+.feedback-form--wrapper-no-text-area {
   padding-bottom: 68px;
 }
 
@@ -75,10 +75,10 @@
 }
 
 .feedback-form--close-icon {
+  cursor: pointer;
+  height: 24px;
   margin-left: auto;
   width: 24px;
-  height: 24px;
-  cursor: pointer;
 
   path {
     fill: var(--feedback-form-title);

From c1317291a2e79d76c82b5786b4798b3a914ef800 Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongg1409@gmail>
Date: Tue, 17 Sep 2024 09:49:17 +0100
Subject: [PATCH 24/35] update localStorage name

Signed-off-by: Huong Nguyen <huongg1409@gmail>
---
 src/components/feedback-form/feedback-form.js | 6 +++---
 src/components/flowchart/flowchart.js         | 7 +++----
 src/config.js                                 | 2 +-
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/feedback-form/feedback-form.js b/src/components/feedback-form/feedback-form.js
index 2813735e1f..9965c682fc 100755
--- a/src/components/feedback-form/feedback-form.js
+++ b/src/components/feedback-form/feedback-form.js
@@ -5,7 +5,7 @@ import CloseIcon from '../icons/close';
 import { Mood } from '../mood/mood';
 import { getHeap } from '../../tracking';
 import { getDataTestAttribute } from '../../utils/get-data-test-attribute';
-import { localStorageFeedbackFirstTime } from '../../config';
+import { localStorageFeedbackSeen } from '../../config';
 import { loadLocalStorage, saveLocalStorage } from '../../store/helpers';
 import { feedbackMessageDelayTimeout } from '../../config';
 
@@ -28,9 +28,9 @@ export const FeedbackForm = ({ hideForm, title, usageContext }) => {
   };
 
   const updateLocalStorageUsageContext = (value) => {
-    const existingData = loadLocalStorage(localStorageFeedbackFirstTime) || {};
+    const existingData = loadLocalStorage(localStorageFeedbackSeen) || {};
     existingData[usageContext] = value;
-    saveLocalStorage(localStorageFeedbackFirstTime, existingData);
+    saveLocalStorage(localStorageFeedbackSeen, existingData);
   };
 
   useEffect(() => {
diff --git a/src/components/flowchart/flowchart.js b/src/components/flowchart/flowchart.js
index bef130e4ea..2d927be259 100644
--- a/src/components/flowchart/flowchart.js
+++ b/src/components/flowchart/flowchart.js
@@ -48,7 +48,7 @@ import { SlicedPipelineActionBar } from '../sliced-pipeline-action-bar/sliced-pi
 import { SlicedPipelineNotification } from '../sliced-pipeline-notification/sliced-pipeline-notification';
 import { FeedbackButton } from '../feedback-button/feedback-button';
 import { FeedbackForm } from '../feedback-form/feedback-form';
-import { localStorageFeedbackFirstTime } from '../../config';
+import { localStorageFeedbackSeen } from '../../config';
 import { loadLocalStorage } from '../../store/helpers';
 
 import './styles/flowchart.scss';
@@ -824,12 +824,11 @@ export class FlowChart extends Component {
 
     const isFirstTimeFeedbackAfterResetSlicing =
       resetSlicingPipelineBtnClicked &&
-      loadLocalStorage(localStorageFeedbackFirstTime)['slicing-pipeline'] ===
+      loadLocalStorage(localStorageFeedbackSeen)['slicing-pipeline'] ===
         undefined;
 
     const seenSlicingFeedbackBefore =
-      loadLocalStorage(localStorageFeedbackFirstTime)['slicing-pipeline'] ===
-      false;
+      loadLocalStorage(localStorageFeedbackSeen)['slicing-pipeline'] === false;
     return (
       <div
         className="pipeline-flowchart kedro"
diff --git a/src/config.js b/src/config.js
index 3b8f895fce..550d004c12 100644
--- a/src/config.js
+++ b/src/config.js
@@ -5,7 +5,7 @@ export const localStorageFlowchartLink = 'KedroViz-link-to-flowchart';
 export const localStorageMetricsSelect = 'KedroViz-metrics-chart-select';
 export const localStorageRunsMetadata = 'KedroViz-runs-metadata';
 export const localStorageShareableUrl = 'KedroViz-shareable-url';
-export const localStorageFeedbackFirstTime = 'KedroViz-feedback-first-time';
+export const localStorageFeedbackSeen = 'KedroViz-feedback-seen';
 
 export const linkToFlowchartInitialVal = {
   fromURL: null,

From 73e0c68fa145aec346ce0cd817882a12bd8a6aa8 Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongg1409@gmail>
Date: Tue, 17 Sep 2024 09:59:04 +0100
Subject: [PATCH 25/35] move feedback to config

Signed-off-by: Huong Nguyen <huongg1409@gmail>
---
 src/components/flowchart/flowchart.js | 12 ++++--------
 src/config.js                         | 12 ++++++++++++
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/flowchart/flowchart.js b/src/components/flowchart/flowchart.js
index 2d927be259..a8ca3cd281 100644
--- a/src/components/flowchart/flowchart.js
+++ b/src/components/flowchart/flowchart.js
@@ -48,7 +48,7 @@ import { SlicedPipelineActionBar } from '../sliced-pipeline-action-bar/sliced-pi
 import { SlicedPipelineNotification } from '../sliced-pipeline-notification/sliced-pipeline-notification';
 import { FeedbackButton } from '../feedback-button/feedback-button';
 import { FeedbackForm } from '../feedback-form/feedback-form';
-import { localStorageFeedbackSeen } from '../../config';
+import { localStorageFeedbackSeen, feedbacks } from '../../config';
 import { loadLocalStorage } from '../../store/helpers';
 
 import './styles/flowchart.scss';
@@ -892,7 +892,7 @@ export class FlowChart extends Component {
         />
         <FeedbackButton
           onClick={() => this.setState({ showFeedbackForm: true })}
-          title="Feedback for pipeline slicing"
+          title={feedbacks.slicingPipeline.buttonTittle}
           visible={
             isSlicingPipelineApplied &&
             seenSlicingFeedbackBefore &&
@@ -902,12 +902,8 @@ export class FlowChart extends Component {
         {(isFirstTimeFeedbackAfterResetSlicing || showFeedbackForm) && (
           <FeedbackForm
             hideForm={() => this.setState({ showFeedbackForm: false })}
-            title={[
-              'How satisfied are you with',
-              <br key="1" />,
-              'pipeline slicing?',
-            ]}
-            usageContext="slicing-pipeline"
+            title={feedbacks.slicingPipeline.formTitle}
+            usageContext={feedbacks.slicingPipeline.usageContext}
           />
         )}
         {showSlicingNotification && visibleSlicing && (
diff --git a/src/config.js b/src/config.js
index 550d004c12..993fd8c030 100644
--- a/src/config.js
+++ b/src/config.js
@@ -100,6 +100,18 @@ export const sidebarElementTypes = {
   parameters: 'Parameters',
 };
 
+export const feedbacks = {
+  slicingPipeline: {
+    formTitle: [
+      'How satisfied are you with',
+      <br key="1" />,
+      'pipeline slicing?',
+    ],
+    buttonTittle: 'Feedback for pipeline slicing',
+    usageContext: 'slicing-pipeline',
+  },
+};
+
 export const shortTypeMapping = {
   'plotly.plotly_dataset.PlotlyDataset': 'plotly',
   'plotly.json_dataset.JSONDataset': 'plotly',

From 46f9e278ee91507bc7258c81bd84bb554d49941e Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongg1409@gmail>
Date: Tue, 17 Sep 2024 10:54:28 +0100
Subject: [PATCH 26/35] update text area colour

Signed-off-by: Huong Nguyen <huongg1409@gmail>
---
 src/components/feedback-form/feedback-form.scss | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/feedback-form/feedback-form.scss b/src/components/feedback-form/feedback-form.scss
index a9b236a04e..c0fd135c1f 100755
--- a/src/components/feedback-form/feedback-form.scss
+++ b/src/components/feedback-form/feedback-form.scss
@@ -15,7 +15,7 @@
   --feedback-form-content: #{colors.$slate-0};
   --feedback-form-title: #{colors.$black-900};
   --feedback-form--text-area--background: #{colors.$slate-200};
-  --feedback-form--text-area--color: #{colors.$white-0};
+  --feedback-form--text-area--color: #{colors.$black-200};
 }
 
 .kui-theme--light {
@@ -23,7 +23,7 @@
   --feedback-form-content: #{colors.$white-0};
   --feedback-form-title: #{colors.$white-0};
   --feedback-form--text-area--background: #{colors.$white-0};
-  --feedback-form--text-area--color: #{colors.$black-900};
+  --feedback-form--text-area--color: #{colors.$black-0};
 }
 
 .feedback-form--wrapper {
@@ -49,6 +49,7 @@
   align-items: center;
   background-color: transparent;
   border: 1px solid grey;
+  color: var(--feedback-form--text-area--color);
   display: flex;
   height: 104px;
   margin-top: 68px;

From 5787fef03a1981b14de8544f08d99408b3345ce2 Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongg1409@gmail>
Date: Tue, 17 Sep 2024 13:57:21 +0100
Subject: [PATCH 27/35] update font-size for text area and hover state for
 button

Signed-off-by: Huong Nguyen <huongg1409@gmail>
---
 .../feedback-form/feedback-form.scss          | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/components/feedback-form/feedback-form.scss b/src/components/feedback-form/feedback-form.scss
index c0fd135c1f..19f2bcb095 100755
--- a/src/components/feedback-form/feedback-form.scss
+++ b/src/components/feedback-form/feedback-form.scss
@@ -15,7 +15,7 @@
   --feedback-form-content: #{colors.$slate-0};
   --feedback-form-title: #{colors.$black-900};
   --feedback-form--text-area--background: #{colors.$slate-200};
-  --feedback-form--text-area--color: #{colors.$black-200};
+  --feedback-form--text-area-placeholder--color: #{colors.$black-200};
 }
 
 .kui-theme--light {
@@ -23,7 +23,7 @@
   --feedback-form-content: #{colors.$white-0};
   --feedback-form-title: #{colors.$white-0};
   --feedback-form--text-area--background: #{colors.$white-0};
-  --feedback-form--text-area--color: #{colors.$black-0};
+  --feedback-form--text-area-placeholder--color: #{colors.$black-0};
 }
 
 .feedback-form--wrapper {
@@ -45,25 +45,27 @@
   padding-bottom: 68px;
 }
 
+.feedback-form--text-area::placeholder {
+  color: var(--feedback-form--text-area-placeholder--color);
+  text-align: center;
+  margin: auto; /* Centers the placeholder text vertically */
+}
+
 .feedback-form--text-area {
   align-items: center;
   background-color: transparent;
   border: 1px solid grey;
-  color: var(--feedback-form--text-area--color);
+  color: var(--feedback-form-title);
   display: flex;
+  font-size: 14px;
   height: 104px;
   margin-top: 68px;
   padding: 8px 12px;
   resize: none;
-  text-align: center;
+  text-align: left;
   width: 364px;
 }
 
-.feedback-form--text-area::placeholder {
-  text-align: center;
-  margin: auto; /* Centers the placeholder text vertically */
-}
-
 .feedback-form--title {
   color: var(--feedback-form-title);
   font-size: 18px;
@@ -97,6 +99,11 @@
     color: var(--feedback-form-title);
     margin-top: 36px;
     padding: 8px 12px;
+
+    &:hover {
+      background-color: var(--feedback-form-title);
+      color: var(--feedback-form-bg);
+    }
   }
 }
 

From b3139d5f86195d8d5338bbcac65c71159417b5e0 Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongg1409@gmail>
Date: Tue, 17 Sep 2024 15:18:17 +0100
Subject: [PATCH 28/35] update font for place holder in text area

Signed-off-by: Huong Nguyen <huongg1409@gmail>
---
 src/components/feedback-form/feedback-form.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/feedback-form/feedback-form.scss b/src/components/feedback-form/feedback-form.scss
index 19f2bcb095..98598f29eb 100755
--- a/src/components/feedback-form/feedback-form.scss
+++ b/src/components/feedback-form/feedback-form.scss
@@ -47,8 +47,9 @@
 
 .feedback-form--text-area::placeholder {
   color: var(--feedback-form--text-area-placeholder--color);
-  text-align: center;
   margin: auto; /* Centers the placeholder text vertically */
+  text-align: center;
+  font-family: Inter, sans-serif;
 }
 
 .feedback-form--text-area {

From b10de5c2f8ea1018c3959adaeb96e26f1d7c1324 Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongg1409@gmail>
Date: Tue, 17 Sep 2024 15:36:50 +0100
Subject: [PATCH 29/35] update font for place holder in text area in feedback

Signed-off-by: Huong Nguyen <huongg1409@gmail>
---
 src/components/feedback-form/feedback-form.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/feedback-form/feedback-form.scss b/src/components/feedback-form/feedback-form.scss
index 98598f29eb..04ae25ce64 100755
--- a/src/components/feedback-form/feedback-form.scss
+++ b/src/components/feedback-form/feedback-form.scss
@@ -59,6 +59,7 @@
   color: var(--feedback-form-title);
   display: flex;
   font-size: 14px;
+  font-family: Inter, sans-serif;
   height: 104px;
   margin-top: 68px;
   padding: 8px 12px;

From 72088f7ed880df5bdd6275955834fb18e9fdd222 Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongg1409@gmail>
Date: Wed, 18 Sep 2024 10:04:38 +0100
Subject: [PATCH 30/35] re-run the test

Signed-off-by: Huong Nguyen <huongg1409@gmail>
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 955a066dbe..fcfbf0c864 100644
--- a/package.json
+++ b/package.json
@@ -172,4 +172,4 @@
     "not op_mini all"
   ],
   "snyk": true
-}
+}
\ No newline at end of file

From 2eb435094f74321dfd2566b77dc925f33966f285 Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongg1409@gmail>
Date: Wed, 18 Sep 2024 11:44:01 +0100
Subject: [PATCH 31/35] include classnames for icons

Signed-off-by: Huong Nguyen <huongg1409@gmail>
---
 src/components/icons/mood-dissatisfied.js     | 18 ++++++++++--------
 src/components/icons/mood-neutral.js          | 15 +++++++++------
 src/components/icons/mood-satisfied.js        | 18 ++++++++++--------
 .../icons/mood-very-dissatisfied.js           | 19 ++++++++++---------
 src/components/icons/mood-very-satisfied.js   | 15 +++++++++------
 5 files changed, 48 insertions(+), 37 deletions(-)

diff --git a/src/components/icons/mood-dissatisfied.js b/src/components/icons/mood-dissatisfied.js
index 3f13cbbc4f..ce15608561 100644
--- a/src/components/icons/mood-dissatisfied.js
+++ b/src/components/icons/mood-dissatisfied.js
@@ -1,11 +1,13 @@
 import React from 'react';
 
 const MoodDissatisfiedIcon = ({ className }) => (
-
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path id="icon" d="M20.6406 14.1984C21.0945 14.1984 21.4815 14.0373 21.8017 13.7151C22.1219 13.3928 22.282 13.0048 22.282 12.551C22.282 12.0971 22.1209 11.7101 21.7987 11.3899C21.4764 11.0697 21.0884 10.9096 20.6346 10.9096C20.1808 10.9096 19.7937 11.0707 19.4735 11.3929C19.1533 11.7151 18.9932 12.1032 18.9932 12.557C18.9932 13.0108 19.1543 13.3978 19.4765 13.7181C19.7988 14.0383 20.1868 14.1984 20.6406 14.1984ZM11.3654 14.1984C11.8193 14.1984 12.2063 14.0373 12.5265 13.7151C12.8467 13.3928 13.0068 13.0048 13.0068 12.551C13.0068 12.0971 12.8457 11.7101 12.5235 11.3899C12.2013 11.0697 11.8132 10.9096 11.3594 10.9096C10.9056 10.9096 10.5185 11.0707 10.1983 11.3929C9.87809 11.7151 9.71797 12.1032 9.71797 12.557C9.71797 13.0108 9.8791 13.3978 10.2013 13.7181C10.5236 14.0383 10.9116 14.1984 11.3654 14.1984ZM16.0054 18.0497C14.6215 18.0497 13.3589 18.433 12.2177 19.1997C11.0766 19.9664 10.228 20.9853 9.67184 22.2565H11.2239C11.7128 21.383 12.3829 20.6991 13.2342 20.2048C14.0855 19.7105 15.011 19.4634 16.0107 19.4634C17.0104 19.4634 17.9324 19.7128 18.7765 20.2116C19.6207 20.7105 20.2946 21.3921 20.7983 22.2565H22.3282C21.7812 20.9762 20.9366 19.955 19.7944 19.1929C18.6523 18.4308 17.3893 18.0497 16.0054 18.0497ZM16.0022 28.6668C14.2503 28.6668 12.6036 28.3343 11.0621 27.6694C9.52057 27.0045 8.17966 26.1022 7.03937 24.9624C5.89906 23.8226 4.99632 22.4823 4.33114 20.9415C3.66596 19.4006 3.33337 17.7543 3.33337 16.0024C3.33337 14.2505 3.66582 12.6037 4.33071 11.0622C4.9956 9.5207 5.89793 8.17979 7.03771 7.0395C8.17751 5.89919 9.51783 4.99644 11.0587 4.33126C12.5995 3.66609 14.2459 3.3335 15.9978 3.3335C17.7497 3.3335 19.3964 3.66594 20.9379 4.33083C22.4794 4.99572 23.8204 5.89805 24.9606 7.03783C26.101 8.17763 27.0037 9.51795 27.6689 11.0588C28.3341 12.5996 28.6666 14.246 28.6666 15.9979C28.6666 17.7498 28.3342 19.3965 27.6693 20.938C27.0044 22.4796 26.1021 23.8205 24.9623 24.9608C23.8225 26.1011 22.4822 27.0038 20.9413 27.669C19.4005 28.3342 17.7542 28.6668 16.0022 28.6668ZM15.9992 26.9916C19.0674 26.9916 21.6665 25.9269 23.7965 23.7974C25.9265 21.668 26.9915 19.0692 26.9915 16.001C26.9915 12.9327 25.9268 10.3336 23.7973 8.20366C21.6679 6.07366 19.0691 5.00866 16.0008 5.00866C12.9326 5.00866 10.3335 6.07339 8.20354 8.20283C6.07354 10.3323 5.00854 12.9311 5.00854 15.9993C5.00854 19.0675 6.07326 21.6666 8.20271 23.7966C10.3321 25.9266 12.931 26.9916 15.9992 26.9916Z" fill="#989898"/>
-</svg>
-)
-
-export default MoodDissatisfiedIcon
-
+  <svg className={className} width="32" height="32" viewBox="0 0 32 32">
+    <path
+      id="icon"
+      d="M20.6406 14.1984C21.0945 14.1984 21.4815 14.0373 21.8017 13.7151C22.1219 13.3928 22.282 13.0048 22.282 12.551C22.282 12.0971 22.1209 11.7101 21.7987 11.3899C21.4764 11.0697 21.0884 10.9096 20.6346 10.9096C20.1808 10.9096 19.7937 11.0707 19.4735 11.3929C19.1533 11.7151 18.9932 12.1032 18.9932 12.557C18.9932 13.0108 19.1543 13.3978 19.4765 13.7181C19.7988 14.0383 20.1868 14.1984 20.6406 14.1984ZM11.3654 14.1984C11.8193 14.1984 12.2063 14.0373 12.5265 13.7151C12.8467 13.3928 13.0068 13.0048 13.0068 12.551C13.0068 12.0971 12.8457 11.7101 12.5235 11.3899C12.2013 11.0697 11.8132 10.9096 11.3594 10.9096C10.9056 10.9096 10.5185 11.0707 10.1983 11.3929C9.87809 11.7151 9.71797 12.1032 9.71797 12.557C9.71797 13.0108 9.8791 13.3978 10.2013 13.7181C10.5236 14.0383 10.9116 14.1984 11.3654 14.1984ZM16.0054 18.0497C14.6215 18.0497 13.3589 18.433 12.2177 19.1997C11.0766 19.9664 10.228 20.9853 9.67184 22.2565H11.2239C11.7128 21.383 12.3829 20.6991 13.2342 20.2048C14.0855 19.7105 15.011 19.4634 16.0107 19.4634C17.0104 19.4634 17.9324 19.7128 18.7765 20.2116C19.6207 20.7105 20.2946 21.3921 20.7983 22.2565H22.3282C21.7812 20.9762 20.9366 19.955 19.7944 19.1929C18.6523 18.4308 17.3893 18.0497 16.0054 18.0497ZM16.0022 28.6668C14.2503 28.6668 12.6036 28.3343 11.0621 27.6694C9.52057 27.0045 8.17966 26.1022 7.03937 24.9624C5.89906 23.8226 4.99632 22.4823 4.33114 20.9415C3.66596 19.4006 3.33337 17.7543 3.33337 16.0024C3.33337 14.2505 3.66582 12.6037 4.33071 11.0622C4.9956 9.5207 5.89793 8.17979 7.03771 7.0395C8.17751 5.89919 9.51783 4.99644 11.0587 4.33126C12.5995 3.66609 14.2459 3.3335 15.9978 3.3335C17.7497 3.3335 19.3964 3.66594 20.9379 4.33083C22.4794 4.99572 23.8204 5.89805 24.9606 7.03783C26.101 8.17763 27.0037 9.51795 27.6689 11.0588C28.3341 12.5996 28.6666 14.246 28.6666 15.9979C28.6666 17.7498 28.3342 19.3965 27.6693 20.938C27.0044 22.4796 26.1021 23.8205 24.9623 24.9608C23.8225 26.1011 22.4822 27.0038 20.9413 27.669C19.4005 28.3342 17.7542 28.6668 16.0022 28.6668ZM15.9992 26.9916C19.0674 26.9916 21.6665 25.9269 23.7965 23.7974C25.9265 21.668 26.9915 19.0692 26.9915 16.001C26.9915 12.9327 25.9268 10.3336 23.7973 8.20366C21.6679 6.07366 19.0691 5.00866 16.0008 5.00866C12.9326 5.00866 10.3335 6.07339 8.20354 8.20283C6.07354 10.3323 5.00854 12.9311 5.00854 15.9993C5.00854 19.0675 6.07326 21.6666 8.20271 23.7966C10.3321 25.9266 12.931 26.9916 15.9992 26.9916Z"
+      fill="#989898"
+    />
+  </svg>
+);
+
+export default MoodDissatisfiedIcon;
diff --git a/src/components/icons/mood-neutral.js b/src/components/icons/mood-neutral.js
index 71d59f0ede..0dae34b3fd 100644
--- a/src/components/icons/mood-neutral.js
+++ b/src/components/icons/mood-neutral.js
@@ -1,10 +1,13 @@
 import React from 'react';
 
 const MoodNeutralIcon = ({ className }) => (
+  <svg className={className} width="32" height="32" viewBox="0 0 32 32">
+    <path
+      id="icon"
+      d="M20.6406 14.1984C21.0945 14.1984 21.4815 14.0373 21.8017 13.7151C22.1219 13.3928 22.282 13.0048 22.282 12.551C22.282 12.0971 22.1209 11.7101 21.7987 11.3899C21.4764 11.0697 21.0884 10.9096 20.6346 10.9096C20.1808 10.9096 19.7937 11.0707 19.4735 11.3929C19.1533 11.7151 18.9932 12.1032 18.9932 12.557C18.9932 13.0108 19.1543 13.3978 19.4765 13.7181C19.7988 14.0383 20.1868 14.1984 20.6406 14.1984ZM11.3654 14.1984C11.8193 14.1984 12.2063 14.0373 12.5265 13.7151C12.8467 13.3928 13.0068 13.0048 13.0068 12.551C13.0068 12.0971 12.8457 11.7101 12.5235 11.3899C12.2013 11.0697 11.8132 10.9096 11.3594 10.9096C10.9056 10.9096 10.5185 11.0707 10.1983 11.3929C9.87809 11.7151 9.71797 12.1032 9.71797 12.557C9.71797 13.0108 9.8791 13.3978 10.2013 13.7181C10.5236 14.0383 10.9116 14.1984 11.3654 14.1984ZM12.0034 20.4753H20.0102V19.0702H12.0034V20.4753ZM16.0022 28.6668C14.2503 28.6668 12.6036 28.3343 11.0621 27.6694C9.52057 27.0045 8.17966 26.1022 7.03937 24.9624C5.89906 23.8226 4.99632 22.4823 4.33114 20.9415C3.66596 19.4006 3.33337 17.7543 3.33337 16.0024C3.33337 14.2505 3.66582 12.6037 4.33071 11.0622C4.9956 9.5207 5.89793 8.17979 7.03771 7.0395C8.17751 5.89919 9.51783 4.99644 11.0587 4.33126C12.5995 3.66609 14.2459 3.3335 15.9978 3.3335C17.7497 3.3335 19.3964 3.66594 20.9379 4.33083C22.4794 4.99572 23.8204 5.89805 24.9606 7.03783C26.101 8.17763 27.0037 9.51795 27.6689 11.0588C28.3341 12.5996 28.6666 14.246 28.6666 15.9979C28.6666 17.7498 28.3342 19.3965 27.6693 20.938C27.0044 22.4796 26.1021 23.8205 24.9623 24.9608C23.8225 26.1011 22.4822 27.0038 20.9413 27.669C19.4005 28.3342 17.7542 28.6668 16.0022 28.6668ZM15.9992 26.9916C19.0674 26.9916 21.6665 25.9269 23.7965 23.7974C25.9265 21.668 26.9915 19.0692 26.9915 16.001C26.9915 12.9327 25.9268 10.3336 23.7973 8.20366C21.6679 6.07366 19.0691 5.00866 16.0008 5.00866C12.9326 5.00866 10.3335 6.07339 8.20354 8.20283C6.07354 10.3323 5.00854 12.9311 5.00854 15.9993C5.00854 19.0675 6.07326 21.6666 8.20271 23.7966C10.3321 25.9266 12.931 26.9916 15.9992 26.9916Z"
+      fill="#989898"
+    />
+  </svg>
+);
 
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path id="icon" d="M20.6406 14.1984C21.0945 14.1984 21.4815 14.0373 21.8017 13.7151C22.1219 13.3928 22.282 13.0048 22.282 12.551C22.282 12.0971 22.1209 11.7101 21.7987 11.3899C21.4764 11.0697 21.0884 10.9096 20.6346 10.9096C20.1808 10.9096 19.7937 11.0707 19.4735 11.3929C19.1533 11.7151 18.9932 12.1032 18.9932 12.557C18.9932 13.0108 19.1543 13.3978 19.4765 13.7181C19.7988 14.0383 20.1868 14.1984 20.6406 14.1984ZM11.3654 14.1984C11.8193 14.1984 12.2063 14.0373 12.5265 13.7151C12.8467 13.3928 13.0068 13.0048 13.0068 12.551C13.0068 12.0971 12.8457 11.7101 12.5235 11.3899C12.2013 11.0697 11.8132 10.9096 11.3594 10.9096C10.9056 10.9096 10.5185 11.0707 10.1983 11.3929C9.87809 11.7151 9.71797 12.1032 9.71797 12.557C9.71797 13.0108 9.8791 13.3978 10.2013 13.7181C10.5236 14.0383 10.9116 14.1984 11.3654 14.1984ZM12.0034 20.4753H20.0102V19.0702H12.0034V20.4753ZM16.0022 28.6668C14.2503 28.6668 12.6036 28.3343 11.0621 27.6694C9.52057 27.0045 8.17966 26.1022 7.03937 24.9624C5.89906 23.8226 4.99632 22.4823 4.33114 20.9415C3.66596 19.4006 3.33337 17.7543 3.33337 16.0024C3.33337 14.2505 3.66582 12.6037 4.33071 11.0622C4.9956 9.5207 5.89793 8.17979 7.03771 7.0395C8.17751 5.89919 9.51783 4.99644 11.0587 4.33126C12.5995 3.66609 14.2459 3.3335 15.9978 3.3335C17.7497 3.3335 19.3964 3.66594 20.9379 4.33083C22.4794 4.99572 23.8204 5.89805 24.9606 7.03783C26.101 8.17763 27.0037 9.51795 27.6689 11.0588C28.3341 12.5996 28.6666 14.246 28.6666 15.9979C28.6666 17.7498 28.3342 19.3965 27.6693 20.938C27.0044 22.4796 26.1021 23.8205 24.9623 24.9608C23.8225 26.1011 22.4822 27.0038 20.9413 27.669C19.4005 28.3342 17.7542 28.6668 16.0022 28.6668ZM15.9992 26.9916C19.0674 26.9916 21.6665 25.9269 23.7965 23.7974C25.9265 21.668 26.9915 19.0692 26.9915 16.001C26.9915 12.9327 25.9268 10.3336 23.7973 8.20366C21.6679 6.07366 19.0691 5.00866 16.0008 5.00866C12.9326 5.00866 10.3335 6.07339 8.20354 8.20283C6.07354 10.3323 5.00854 12.9311 5.00854 15.9993C5.00854 19.0675 6.07326 21.6666 8.20271 23.7966C10.3321 25.9266 12.931 26.9916 15.9992 26.9916Z" fill="#989898"/>
-</svg>
-)
-
-export default MoodNeutralIcon
+export default MoodNeutralIcon;
diff --git a/src/components/icons/mood-satisfied.js b/src/components/icons/mood-satisfied.js
index f17eaae865..6614c26dd0 100644
--- a/src/components/icons/mood-satisfied.js
+++ b/src/components/icons/mood-satisfied.js
@@ -1,11 +1,13 @@
 import React from 'react';
 
 const MoodSatisfiedIcon = ({ className }) => (
-    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path id="icon" d="M20.6405 14.6598C21.0943 14.6598 21.4814 14.4987 21.8016 14.1765C22.1218 13.8542 22.2819 13.4662 22.2819 13.0124C22.2819 12.5586 22.1208 12.1715 21.7986 11.8513C21.4763 11.5311 21.0883 11.371 20.6345 11.371C20.1806 11.371 19.7936 11.5321 19.4734 11.8543C19.1532 12.1766 18.9931 12.5646 18.9931 13.0184C18.9931 13.4722 19.1542 13.8593 19.4764 14.1795C19.7986 14.4997 20.1867 14.6598 20.6405 14.6598ZM11.3653 14.6598C11.8191 14.6598 12.2062 14.4987 12.5264 14.1765C12.8466 13.8542 13.0067 13.4662 13.0067 13.0124C13.0067 12.5586 12.8456 12.1715 12.5234 11.8513C12.2011 11.5311 11.8131 11.371 11.3593 11.371C10.9054 11.371 10.5184 11.5321 10.1982 11.8543C9.87796 12.1766 9.71785 12.5646 9.71785 13.0184C9.71785 13.4722 9.87897 13.8593 10.2012 14.1795C10.5234 14.4997 10.9115 14.6598 11.3653 14.6598ZM15.9999 23.3709C17.3731 23.3709 18.6343 22.9967 19.7836 22.2483C20.9329 21.4999 21.7811 20.4975 22.3281 19.2411H20.7982C20.2945 20.0963 19.6177 20.7628 18.7678 21.2406C17.9179 21.7184 16.997 21.9573 16.005 21.9573C15.013 21.9573 14.0903 21.7207 13.2371 21.2475C12.3838 20.7742 11.7127 20.1054 11.2238 19.2411H9.67172C10.2278 20.4975 11.0783 21.4999 12.223 22.2483C13.3677 22.9967 14.6267 23.3709 15.9999 23.3709ZM16.0021 29.1282C14.2502 29.1282 12.6035 28.7957 11.062 28.1309C9.52045 27.466 8.17954 26.5636 7.03925 25.4239C5.89894 24.2841 4.9962 22.9437 4.33102 21.4029C3.66584 19.8621 3.33325 18.2157 3.33325 16.4638C3.33325 14.7119 3.6657 13.0652 4.33059 11.5237C4.99547 9.98212 5.89781 8.64121 7.03759 7.50092C8.17739 6.36061 9.51771 5.45787 11.0586 4.79269C12.5994 4.12751 14.2457 3.79492 15.9977 3.79492C17.7496 3.79492 19.3963 4.12737 20.9378 4.79226C22.4793 5.45715 23.8202 6.35948 24.9605 7.49926C26.1008 8.63906 27.0036 9.97938 27.6688 11.5202C28.3339 13.061 28.6665 14.7074 28.6665 16.4593C28.6665 18.2112 28.3341 19.8579 27.6692 21.3995C27.0043 22.941 26.102 24.2819 24.9622 25.4222C23.8224 26.5625 22.4821 27.4652 20.9412 28.1304C19.4004 28.7956 17.754 29.1282 16.0021 29.1282ZM15.9991 27.453C19.0673 27.453 21.6664 26.3883 23.7964 24.2589C25.9264 22.1294 26.9914 19.5306 26.9914 16.4624C26.9914 13.3942 25.9266 10.7951 23.7972 8.66509C21.6678 6.53509 19.0689 5.47009 16.0007 5.47009C12.9325 5.47009 10.3334 6.53481 8.20342 8.66426C6.07342 10.7937 5.00842 13.3925 5.00842 16.4607C5.00842 19.5289 6.07314 22.128 8.20258 24.258C10.332 26.388 12.9308 27.453 15.9991 27.453Z" fill="#989898"/>
-    </svg>
-)
-
-export default MoodSatisfiedIcon
-
-
+  <svg className={className} width="32" height="32" viewBox="0 0 32 32">
+    <path
+      id="icon"
+      d="M20.6405 14.6598C21.0943 14.6598 21.4814 14.4987 21.8016 14.1765C22.1218 13.8542 22.2819 13.4662 22.2819 13.0124C22.2819 12.5586 22.1208 12.1715 21.7986 11.8513C21.4763 11.5311 21.0883 11.371 20.6345 11.371C20.1806 11.371 19.7936 11.5321 19.4734 11.8543C19.1532 12.1766 18.9931 12.5646 18.9931 13.0184C18.9931 13.4722 19.1542 13.8593 19.4764 14.1795C19.7986 14.4997 20.1867 14.6598 20.6405 14.6598ZM11.3653 14.6598C11.8191 14.6598 12.2062 14.4987 12.5264 14.1765C12.8466 13.8542 13.0067 13.4662 13.0067 13.0124C13.0067 12.5586 12.8456 12.1715 12.5234 11.8513C12.2011 11.5311 11.8131 11.371 11.3593 11.371C10.9054 11.371 10.5184 11.5321 10.1982 11.8543C9.87796 12.1766 9.71785 12.5646 9.71785 13.0184C9.71785 13.4722 9.87897 13.8593 10.2012 14.1795C10.5234 14.4997 10.9115 14.6598 11.3653 14.6598ZM15.9999 23.3709C17.3731 23.3709 18.6343 22.9967 19.7836 22.2483C20.9329 21.4999 21.7811 20.4975 22.3281 19.2411H20.7982C20.2945 20.0963 19.6177 20.7628 18.7678 21.2406C17.9179 21.7184 16.997 21.9573 16.005 21.9573C15.013 21.9573 14.0903 21.7207 13.2371 21.2475C12.3838 20.7742 11.7127 20.1054 11.2238 19.2411H9.67172C10.2278 20.4975 11.0783 21.4999 12.223 22.2483C13.3677 22.9967 14.6267 23.3709 15.9999 23.3709ZM16.0021 29.1282C14.2502 29.1282 12.6035 28.7957 11.062 28.1309C9.52045 27.466 8.17954 26.5636 7.03925 25.4239C5.89894 24.2841 4.9962 22.9437 4.33102 21.4029C3.66584 19.8621 3.33325 18.2157 3.33325 16.4638C3.33325 14.7119 3.6657 13.0652 4.33059 11.5237C4.99547 9.98212 5.89781 8.64121 7.03759 7.50092C8.17739 6.36061 9.51771 5.45787 11.0586 4.79269C12.5994 4.12751 14.2457 3.79492 15.9977 3.79492C17.7496 3.79492 19.3963 4.12737 20.9378 4.79226C22.4793 5.45715 23.8202 6.35948 24.9605 7.49926C26.1008 8.63906 27.0036 9.97938 27.6688 11.5202C28.3339 13.061 28.6665 14.7074 28.6665 16.4593C28.6665 18.2112 28.3341 19.8579 27.6692 21.3995C27.0043 22.941 26.102 24.2819 24.9622 25.4222C23.8224 26.5625 22.4821 27.4652 20.9412 28.1304C19.4004 28.7956 17.754 29.1282 16.0021 29.1282ZM15.9991 27.453C19.0673 27.453 21.6664 26.3883 23.7964 24.2589C25.9264 22.1294 26.9914 19.5306 26.9914 16.4624C26.9914 13.3942 25.9266 10.7951 23.7972 8.66509C21.6678 6.53509 19.0689 5.47009 16.0007 5.47009C12.9325 5.47009 10.3334 6.53481 8.20342 8.66426C6.07342 10.7937 5.00842 13.3925 5.00842 16.4607C5.00842 19.5289 6.07314 22.128 8.20258 24.258C10.332 26.388 12.9308 27.453 15.9991 27.453Z"
+      fill="#989898"
+    />
+  </svg>
+);
+
+export default MoodSatisfiedIcon;
diff --git a/src/components/icons/mood-very-dissatisfied.js b/src/components/icons/mood-very-dissatisfied.js
index 0a3b2ddf79..62789a3af3 100644
--- a/src/components/icons/mood-very-dissatisfied.js
+++ b/src/components/icons/mood-very-dissatisfied.js
@@ -1,12 +1,13 @@
 import React from 'react';
 
 const MoodVeryDissatisfiedIcon = ({ className }) => (
-    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path id="icon" d="M16.0022 28.6668C14.2503 28.6668 12.6036 28.3343 11.0621 27.6694C9.52057 27.0045 8.17966 26.0985 7.03937 24.9513C5.89906 23.8041 4.99632 22.4615 4.33114 20.9235C3.66596 19.3855 3.33337 17.7466 3.33337 16.0066C3.33337 14.2519 3.66582 12.6037 4.33071 11.0622C4.9956 9.5207 5.89793 8.17979 7.03771 7.0395C8.17751 5.89919 9.51783 4.99644 11.0587 4.33126C12.5995 3.66609 14.2459 3.3335 15.9978 3.3335C17.7497 3.3335 19.3927 3.66594 20.9268 4.33083C22.4609 4.99572 23.8018 5.89805 24.9495 7.03783C26.0973 8.17763 27.0037 9.51795 27.6689 11.0588C28.3341 12.5996 28.6666 14.246 28.6666 15.9979C28.6666 17.7407 28.3342 19.3814 27.6693 20.9201C27.0044 22.4588 26.0984 23.802 24.9512 24.9497C23.804 26.0974 22.4637 27.0038 20.9302 27.669C19.3968 28.3342 17.7542 28.6668 16.0022 28.6668ZM15.9989 26.9916C19.0395 26.9916 21.6318 25.92 23.7756 23.7769C25.9195 21.6337 26.9915 19.0419 26.9915 16.0012C26.9915 12.9458 25.9199 10.3498 23.7767 8.21336C21.6336 6.0769 19.0417 5.00866 16.0011 5.00866C12.9457 5.00866 10.3497 6.07654 8.21324 8.2123C6.07677 10.348 5.00854 12.9436 5.00854 15.999C5.00854 19.0397 6.07642 21.6319 8.21217 23.7758C10.3479 25.9197 12.9435 26.9916 15.9989 26.9916ZM18.3402 14.254L18.9205 13.9172C18.9209 14.3656 19.0778 14.7468 19.3913 15.0608C19.7048 15.3748 20.0864 15.5317 20.536 15.5317C21.0009 15.5317 21.3916 15.3728 21.7081 15.0548C22.0246 14.7369 22.1829 14.347 22.1829 13.8852C22.1829 13.5943 22.1112 13.3245 21.9679 13.0758C21.8246 12.8271 21.6273 12.6309 21.376 12.4873L22.3718 11.9232L21.782 10.8848L17.7504 13.195L18.3402 14.254ZM13.6598 14.254L14.2496 13.195L10.218 10.8848L9.62824 11.9232L10.624 12.4873C10.3727 12.6309 10.1754 12.8271 10.0321 13.0758C9.88879 13.3245 9.81714 13.5943 9.81714 13.8852C9.81714 14.347 9.9754 14.7369 10.2919 15.0548C10.6084 15.3728 10.9991 15.5317 11.464 15.5317C11.9137 15.5317 12.2952 15.3748 12.6087 15.0608C12.9222 14.7468 13.0791 14.3656 13.0795 13.9172L13.6598 14.254ZM15.9992 17.383C14.5522 17.383 13.2811 17.8501 12.1857 18.7843C11.0904 19.7185 10.2858 20.8759 9.77184 22.2565H22.2282C21.7051 20.885 20.8979 19.7299 19.8066 18.7912C18.7154 17.8524 17.4462 17.383 15.9992 17.383Z" fill="#989898"/>
-    </svg>
-)
-
-export default MoodVeryDissatisfiedIcon
-
-
-
+  <svg className={className} width="32" height="32" viewBox="0 0 32 32">
+    <path
+      id="icon"
+      d="M16.0022 28.6668C14.2503 28.6668 12.6036 28.3343 11.0621 27.6694C9.52057 27.0045 8.17966 26.0985 7.03937 24.9513C5.89906 23.8041 4.99632 22.4615 4.33114 20.9235C3.66596 19.3855 3.33337 17.7466 3.33337 16.0066C3.33337 14.2519 3.66582 12.6037 4.33071 11.0622C4.9956 9.5207 5.89793 8.17979 7.03771 7.0395C8.17751 5.89919 9.51783 4.99644 11.0587 4.33126C12.5995 3.66609 14.2459 3.3335 15.9978 3.3335C17.7497 3.3335 19.3927 3.66594 20.9268 4.33083C22.4609 4.99572 23.8018 5.89805 24.9495 7.03783C26.0973 8.17763 27.0037 9.51795 27.6689 11.0588C28.3341 12.5996 28.6666 14.246 28.6666 15.9979C28.6666 17.7407 28.3342 19.3814 27.6693 20.9201C27.0044 22.4588 26.0984 23.802 24.9512 24.9497C23.804 26.0974 22.4637 27.0038 20.9302 27.669C19.3968 28.3342 17.7542 28.6668 16.0022 28.6668ZM15.9989 26.9916C19.0395 26.9916 21.6318 25.92 23.7756 23.7769C25.9195 21.6337 26.9915 19.0419 26.9915 16.0012C26.9915 12.9458 25.9199 10.3498 23.7767 8.21336C21.6336 6.0769 19.0417 5.00866 16.0011 5.00866C12.9457 5.00866 10.3497 6.07654 8.21324 8.2123C6.07677 10.348 5.00854 12.9436 5.00854 15.999C5.00854 19.0397 6.07642 21.6319 8.21217 23.7758C10.3479 25.9197 12.9435 26.9916 15.9989 26.9916ZM18.3402 14.254L18.9205 13.9172C18.9209 14.3656 19.0778 14.7468 19.3913 15.0608C19.7048 15.3748 20.0864 15.5317 20.536 15.5317C21.0009 15.5317 21.3916 15.3728 21.7081 15.0548C22.0246 14.7369 22.1829 14.347 22.1829 13.8852C22.1829 13.5943 22.1112 13.3245 21.9679 13.0758C21.8246 12.8271 21.6273 12.6309 21.376 12.4873L22.3718 11.9232L21.782 10.8848L17.7504 13.195L18.3402 14.254ZM13.6598 14.254L14.2496 13.195L10.218 10.8848L9.62824 11.9232L10.624 12.4873C10.3727 12.6309 10.1754 12.8271 10.0321 13.0758C9.88879 13.3245 9.81714 13.5943 9.81714 13.8852C9.81714 14.347 9.9754 14.7369 10.2919 15.0548C10.6084 15.3728 10.9991 15.5317 11.464 15.5317C11.9137 15.5317 12.2952 15.3748 12.6087 15.0608C12.9222 14.7468 13.0791 14.3656 13.0795 13.9172L13.6598 14.254ZM15.9992 17.383C14.5522 17.383 13.2811 17.8501 12.1857 18.7843C11.0904 19.7185 10.2858 20.8759 9.77184 22.2565H22.2282C21.7051 20.885 20.8979 19.7299 19.8066 18.7912C18.7154 17.8524 17.4462 17.383 15.9992 17.383Z"
+      fill="#989898"
+    />
+  </svg>
+);
+
+export default MoodVeryDissatisfiedIcon;
diff --git a/src/components/icons/mood-very-satisfied.js b/src/components/icons/mood-very-satisfied.js
index 49e89619af..f80f48529e 100644
--- a/src/components/icons/mood-very-satisfied.js
+++ b/src/components/icons/mood-very-satisfied.js
@@ -1,10 +1,13 @@
 import React from 'react';
 
 const MoodVerySatisfiedIcon = ({ className }) => (
+  <svg className={className} width="32" height="32" viewBox="0 0 32 32">
+    <path
+      id="icon"
+      d="M20.6406 14.1984C21.0945 14.1984 21.4815 14.0373 21.8017 13.7151C22.1219 13.3928 22.282 13.0048 22.282 12.551C22.282 12.0971 22.1209 11.7101 21.7987 11.3899C21.4764 11.0697 21.0884 10.9096 20.6346 10.9096C20.1808 10.9096 19.7937 11.0707 19.4735 11.3929C19.1533 11.7151 18.9932 12.1032 18.9932 12.557C18.9932 13.0108 19.1543 13.3978 19.4765 13.7181C19.7988 14.0383 20.1868 14.1984 20.6406 14.1984ZM11.3654 14.1984C11.8193 14.1984 12.2063 14.0373 12.5265 13.7151C12.8467 13.3928 13.0068 13.0048 13.0068 12.551C13.0068 12.0971 12.8457 11.7101 12.5235 11.3899C12.2013 11.0697 11.8132 10.9096 11.3594 10.9096C10.9056 10.9096 10.5185 11.0707 10.1983 11.3929C9.87809 11.7151 9.71797 12.1032 9.71797 12.557C9.71797 13.0108 9.8791 13.3978 10.2013 13.7181C10.5236 14.0383 10.9116 14.1984 11.3654 14.1984ZM16 22.9095C17.3732 22.9095 18.6345 22.5353 19.7837 21.7869C20.933 21.0384 21.7812 20.036 22.3282 18.7796H9.67184C10.228 20.036 11.0784 21.0384 12.2231 21.7869C13.3678 22.5353 14.6268 22.9095 16 22.9095ZM16.0022 28.6668C14.2503 28.6668 12.6036 28.3343 11.0621 27.6694C9.52057 27.0045 8.17966 26.1022 7.03937 24.9624C5.89906 23.8226 4.99632 22.4823 4.33114 20.9415C3.66596 19.4006 3.33337 17.7543 3.33337 16.0024C3.33337 14.2505 3.66582 12.6037 4.33071 11.0622C4.9956 9.5207 5.89793 8.17979 7.03771 7.0395C8.17751 5.89919 9.51783 4.99644 11.0587 4.33126C12.5995 3.66609 14.2459 3.3335 15.9978 3.3335C17.7497 3.3335 19.3964 3.66594 20.9379 4.33083C22.4794 4.99572 23.8204 5.89805 24.9606 7.03783C26.101 8.17763 27.0037 9.51795 27.6689 11.0588C28.3341 12.5996 28.6666 14.246 28.6666 15.9979C28.6666 17.7498 28.3342 19.3965 27.6693 20.938C27.0044 22.4796 26.1021 23.8205 24.9623 24.9608C23.8225 26.1011 22.4822 27.0038 20.9413 27.669C19.4005 28.3342 17.7542 28.6668 16.0022 28.6668ZM15.9992 26.9916C19.0674 26.9916 21.6665 25.9269 23.7965 23.7974C25.9265 21.668 26.9915 19.0692 26.9915 16.001C26.9915 12.9327 25.9268 10.3336 23.7973 8.20366C21.6679 6.07366 19.0691 5.00866 16.0008 5.00866C12.9326 5.00866 10.3335 6.07339 8.20354 8.20283C6.07354 10.3323 5.00854 12.9311 5.00854 15.9993C5.00854 19.0675 6.07326 21.6666 8.20271 23.7966C10.3321 25.9266 12.931 26.9916 15.9992 26.9916Z"
+      fill="#989898"
+    />
+  </svg>
+);
 
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path id="icon" d="M20.6406 14.1984C21.0945 14.1984 21.4815 14.0373 21.8017 13.7151C22.1219 13.3928 22.282 13.0048 22.282 12.551C22.282 12.0971 22.1209 11.7101 21.7987 11.3899C21.4764 11.0697 21.0884 10.9096 20.6346 10.9096C20.1808 10.9096 19.7937 11.0707 19.4735 11.3929C19.1533 11.7151 18.9932 12.1032 18.9932 12.557C18.9932 13.0108 19.1543 13.3978 19.4765 13.7181C19.7988 14.0383 20.1868 14.1984 20.6406 14.1984ZM11.3654 14.1984C11.8193 14.1984 12.2063 14.0373 12.5265 13.7151C12.8467 13.3928 13.0068 13.0048 13.0068 12.551C13.0068 12.0971 12.8457 11.7101 12.5235 11.3899C12.2013 11.0697 11.8132 10.9096 11.3594 10.9096C10.9056 10.9096 10.5185 11.0707 10.1983 11.3929C9.87809 11.7151 9.71797 12.1032 9.71797 12.557C9.71797 13.0108 9.8791 13.3978 10.2013 13.7181C10.5236 14.0383 10.9116 14.1984 11.3654 14.1984ZM16 22.9095C17.3732 22.9095 18.6345 22.5353 19.7837 21.7869C20.933 21.0384 21.7812 20.036 22.3282 18.7796H9.67184C10.228 20.036 11.0784 21.0384 12.2231 21.7869C13.3678 22.5353 14.6268 22.9095 16 22.9095ZM16.0022 28.6668C14.2503 28.6668 12.6036 28.3343 11.0621 27.6694C9.52057 27.0045 8.17966 26.1022 7.03937 24.9624C5.89906 23.8226 4.99632 22.4823 4.33114 20.9415C3.66596 19.4006 3.33337 17.7543 3.33337 16.0024C3.33337 14.2505 3.66582 12.6037 4.33071 11.0622C4.9956 9.5207 5.89793 8.17979 7.03771 7.0395C8.17751 5.89919 9.51783 4.99644 11.0587 4.33126C12.5995 3.66609 14.2459 3.3335 15.9978 3.3335C17.7497 3.3335 19.3964 3.66594 20.9379 4.33083C22.4794 4.99572 23.8204 5.89805 24.9606 7.03783C26.101 8.17763 27.0037 9.51795 27.6689 11.0588C28.3341 12.5996 28.6666 14.246 28.6666 15.9979C28.6666 17.7498 28.3342 19.3965 27.6693 20.938C27.0044 22.4796 26.1021 23.8205 24.9623 24.9608C23.8225 26.1011 22.4822 27.0038 20.9413 27.669C19.4005 28.3342 17.7542 28.6668 16.0022 28.6668ZM15.9992 26.9916C19.0674 26.9916 21.6665 25.9269 23.7965 23.7974C25.9265 21.668 26.9915 19.0692 26.9915 16.001C26.9915 12.9327 25.9268 10.3336 23.7973 8.20366C21.6679 6.07366 19.0691 5.00866 16.0008 5.00866C12.9326 5.00866 10.3335 6.07339 8.20354 8.20283C6.07354 10.3323 5.00854 12.9311 5.00854 15.9993C5.00854 19.0675 6.07326 21.6666 8.20271 23.7966C10.3321 25.9266 12.931 26.9916 15.9992 26.9916Z" fill="#989898"/>
-</svg>
-)
-
-export default MoodVerySatisfiedIcon
+export default MoodVerySatisfiedIcon;

From 0e19d9c50a675249facabdc9e768b8fea43b8a86 Mon Sep 17 00:00:00 2001
From: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>
Date: Wed, 18 Sep 2024 12:42:58 +0100
Subject: [PATCH 32/35] test ci fail with main

Signed-off-by: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index fcfbf0c864..955a066dbe 100644
--- a/package.json
+++ b/package.json
@@ -172,4 +172,4 @@
     "not op_mini all"
   ],
   "snyk": true
-}
\ No newline at end of file
+}

From d33579ae46e89e86946851fc56075099281092d0 Mon Sep 17 00:00:00 2001
From: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>
Date: Wed, 18 Sep 2024 12:56:59 +0100
Subject: [PATCH 33/35] config removed

Signed-off-by: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>
---
 src/config.js | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/src/config.js b/src/config.js
index fd35f99ed5..fd74bca6a0 100644
--- a/src/config.js
+++ b/src/config.js
@@ -5,7 +5,6 @@ export const localStorageFlowchartLink = 'KedroViz-link-to-flowchart';
 export const localStorageMetricsSelect = 'KedroViz-metrics-chart-select';
 export const localStorageRunsMetadata = 'KedroViz-runs-metadata';
 export const localStorageShareableUrl = 'KedroViz-shareable-url';
-export const localStorageFeedbackSeen = 'KedroViz-feedback-seen';
 export const localStorageBannerStatus = 'KedroViz-banners';
 
 export const linkToFlowchartInitialVal = {
@@ -35,8 +34,6 @@ export const codeSidebarWidth = {
   open: 480,
 };
 
-export const feedbackMessageDelayTimeout = 4000;
-
 // These colours variables come from styles/variables
 const slate600 = '#0e222d';
 const slate200 = '#21333e';
@@ -101,18 +98,6 @@ export const sidebarElementTypes = {
   parameters: 'Parameters',
 };
 
-export const feedbacks = {
-  slicingPipeline: {
-    formTitle: [
-      'How satisfied are you with',
-      <br key="1" />,
-      'pipeline slicing?',
-    ],
-    buttonTittle: 'Feedback for pipeline slicing',
-    usageContext: 'slicing-pipeline',
-  },
-};
-
 export const shortTypeMapping = {
   'plotly.plotly_dataset.PlotlyDataset': 'plotly',
   'plotly.json_dataset.JSONDataset': 'plotly',

From 76e6f419f9838b1a2e31760537b56b205c7a21a2 Mon Sep 17 00:00:00 2001
From: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>
Date: Wed, 18 Sep 2024 13:13:18 +0100
Subject: [PATCH 34/35] config var added

Signed-off-by: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>
---
 src/components/feedback-form/feedback-form.js | 10 ++++------
 src/components/flowchart/flowchart.js         | 17 ++++++++++++++---
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/feedback-form/feedback-form.js b/src/components/feedback-form/feedback-form.js
index 9965c682fc..07b6021f0c 100755
--- a/src/components/feedback-form/feedback-form.js
+++ b/src/components/feedback-form/feedback-form.js
@@ -5,9 +5,7 @@ import CloseIcon from '../icons/close';
 import { Mood } from '../mood/mood';
 import { getHeap } from '../../tracking';
 import { getDataTestAttribute } from '../../utils/get-data-test-attribute';
-import { localStorageFeedbackSeen } from '../../config';
 import { loadLocalStorage, saveLocalStorage } from '../../store/helpers';
-import { feedbackMessageDelayTimeout } from '../../config';
 
 import './feedback-form.scss';
 
@@ -22,15 +20,15 @@ export const FeedbackForm = ({ hideForm, title, usageContext }) => {
     const timer = setTimeout(() => {
       updateLocalStorageUsageContext(false);
       hideForm();
-    }, feedbackMessageDelayTimeout);
+    }, 4000);
 
     return () => clearTimeout(timer);
   };
 
   const updateLocalStorageUsageContext = (value) => {
-    const existingData = loadLocalStorage(localStorageFeedbackSeen) || {};
+    const existingData = loadLocalStorage('KedroViz-feedback-seen') || {};
     existingData[usageContext] = value;
-    saveLocalStorage(localStorageFeedbackSeen, existingData);
+    saveLocalStorage('KedroViz-feedback-seen', existingData);
   };
 
   useEffect(() => {
@@ -39,7 +37,7 @@ export const FeedbackForm = ({ hideForm, title, usageContext }) => {
         setFormStatus('active');
         setActiveMood(null);
         setFeedbackText('');
-      }, feedbackMessageDelayTimeout);
+      }, 4000);
 
       return () => clearTimeout(timer);
     }
diff --git a/src/components/flowchart/flowchart.js b/src/components/flowchart/flowchart.js
index a8ca3cd281..d4a310c980 100644
--- a/src/components/flowchart/flowchart.js
+++ b/src/components/flowchart/flowchart.js
@@ -48,11 +48,22 @@ import { SlicedPipelineActionBar } from '../sliced-pipeline-action-bar/sliced-pi
 import { SlicedPipelineNotification } from '../sliced-pipeline-notification/sliced-pipeline-notification';
 import { FeedbackButton } from '../feedback-button/feedback-button';
 import { FeedbackForm } from '../feedback-form/feedback-form';
-import { localStorageFeedbackSeen, feedbacks } from '../../config';
 import { loadLocalStorage } from '../../store/helpers';
 
 import './styles/flowchart.scss';
 
+export const feedbacks = {
+  slicingPipeline: {
+    formTitle: [
+      'How satisfied are you with',
+      <br key="1" />,
+      'pipeline slicing?',
+    ],
+    buttonTittle: 'Feedback for pipeline slicing',
+    usageContext: 'slicing-pipeline',
+  },
+};
+
 /**
  * Display a pipeline flowchart, mostly rendered with D3
  */
@@ -824,11 +835,11 @@ export class FlowChart extends Component {
 
     const isFirstTimeFeedbackAfterResetSlicing =
       resetSlicingPipelineBtnClicked &&
-      loadLocalStorage(localStorageFeedbackSeen)['slicing-pipeline'] ===
+      loadLocalStorage('KedroViz-feedback-seen')['slicing-pipeline'] ===
         undefined;
 
     const seenSlicingFeedbackBefore =
-      loadLocalStorage(localStorageFeedbackSeen)['slicing-pipeline'] === false;
+      loadLocalStorage('KedroViz-feedback-seen')['slicing-pipeline'] === false;
     return (
       <div
         className="pipeline-flowchart kedro"

From 785c3637f65d4643eb69b7ce0f2762f1818f27f6 Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongg1409@gmail>
Date: Wed, 18 Sep 2024 13:43:10 +0100
Subject: [PATCH 35/35] include localStorage from config

Signed-off-by: Huong Nguyen <huongg1409@gmail>
---
 src/components/feedback-form/feedback-form.js | 5 +++--
 src/components/flowchart/flowchart.js         | 6 ++++--
 src/config.js                                 | 1 +
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/feedback-form/feedback-form.js b/src/components/feedback-form/feedback-form.js
index 07b6021f0c..a7f32b66f3 100755
--- a/src/components/feedback-form/feedback-form.js
+++ b/src/components/feedback-form/feedback-form.js
@@ -6,6 +6,7 @@ import { Mood } from '../mood/mood';
 import { getHeap } from '../../tracking';
 import { getDataTestAttribute } from '../../utils/get-data-test-attribute';
 import { loadLocalStorage, saveLocalStorage } from '../../store/helpers';
+import { localStorageFeedbackSeen } from '../../config';
 
 import './feedback-form.scss';
 
@@ -26,9 +27,9 @@ export const FeedbackForm = ({ hideForm, title, usageContext }) => {
   };
 
   const updateLocalStorageUsageContext = (value) => {
-    const existingData = loadLocalStorage('KedroViz-feedback-seen') || {};
+    const existingData = loadLocalStorage(localStorageFeedbackSeen) || {};
     existingData[usageContext] = value;
-    saveLocalStorage('KedroViz-feedback-seen', existingData);
+    saveLocalStorage(localStorageFeedbackSeen, existingData);
   };
 
   useEffect(() => {
diff --git a/src/components/flowchart/flowchart.js b/src/components/flowchart/flowchart.js
index d4a310c980..1afc5c4b93 100644
--- a/src/components/flowchart/flowchart.js
+++ b/src/components/flowchart/flowchart.js
@@ -49,6 +49,7 @@ import { SlicedPipelineNotification } from '../sliced-pipeline-notification/slic
 import { FeedbackButton } from '../feedback-button/feedback-button';
 import { FeedbackForm } from '../feedback-form/feedback-form';
 import { loadLocalStorage } from '../../store/helpers';
+import { localStorageFeedbackSeen } from '../../config';
 
 import './styles/flowchart.scss';
 
@@ -835,11 +836,12 @@ export class FlowChart extends Component {
 
     const isFirstTimeFeedbackAfterResetSlicing =
       resetSlicingPipelineBtnClicked &&
-      loadLocalStorage('KedroViz-feedback-seen')['slicing-pipeline'] ===
+      loadLocalStorage(localStorageFeedbackSeen)['slicing-pipeline'] ===
         undefined;
 
     const seenSlicingFeedbackBefore =
-      loadLocalStorage('KedroViz-feedback-seen')['slicing-pipeline'] === false;
+      loadLocalStorage(localStorageFeedbackSeen)['slicing-pipeline'] === false;
+
     return (
       <div
         className="pipeline-flowchart kedro"
diff --git a/src/config.js b/src/config.js
index fd74bca6a0..6bdaa8a1a2 100644
--- a/src/config.js
+++ b/src/config.js
@@ -5,6 +5,7 @@ export const localStorageFlowchartLink = 'KedroViz-link-to-flowchart';
 export const localStorageMetricsSelect = 'KedroViz-metrics-chart-select';
 export const localStorageRunsMetadata = 'KedroViz-runs-metadata';
 export const localStorageShareableUrl = 'KedroViz-shareable-url';
+export const localStorageFeedbackSeen = 'KedroViz-feedback-seen';
 export const localStorageBannerStatus = 'KedroViz-banners';
 
 export const linkToFlowchartInitialVal = {