Add feedback button functionality

src/App.tsx

@@ -25,6 +25,7 @@ import { Mode as TranslatorMode } from './components/translator';
 import { Path as WebpageTranslationPath } from './components/translator/WebpageTranslationForm';
 import WithInstallationAlert from './components/WithInstallationAlert';
 import WithLocale from './components/WithLocale';
+import FeedbackButton from './components/FeedbackButton';
 
 const Interfaces = {
   [Mode.Translation]: Translator,
@@ -135,6 +136,7 @@ const App = ({ setLocale }: { setLocale: React.Dispatch<React.SetStateAction<str
           </div>
           <Footer pushRef={pushRef} wrapRef={wrapRef} />
         </WithInstallationAlert>
+        <FeedbackButton />
       </StringsContext.Provider>
     </MatomoProvider>
   );

src/app.css

@@ -12,3 +12,25 @@
 .btn-primary:hover {
   background-color: #385a7f;
 }
+
+.feedback-button {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background-color: #446e9b;
+  color: #fff;
+  border: none;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+  z-index: 1000;
+}
+
+.feedback-button:hover {
+  background-color: #385a7f;
+}

src/components/FeedbackButton.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import { Modal, Button, Form } from 'react-bootstrap';
+
+const FeedbackButton = () => {
+  const [show, setShow] = useState(false);
+
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    // Handle form submission logic here
+    handleClose();
+  };
+
+  return (
+    <>
+      <Button className="feedback-button" onClick={handleShow}>
+        Feedback
+      </Button>
+
+      <Modal show={show} onHide={handleClose}>
+        <Modal.Header closeButton>
+          <Modal.Title>Feedback</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Form onSubmit={handleSubmit}>
+            <Form.Group controlId="feedbackForm.ControlTextarea">
+              <Form.Label>Your Feedback</Form.Label>
+              <Form.Control as="textarea" rows={3} required />
+            </Form.Group>
+            <Button variant="primary" type="submit">
+              Submit
+            </Button>
+          </Form>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+};
+
+export default FeedbackButton;

src/components/FeedbackForm.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import { Modal, Button, Form } from 'react-bootstrap';
+
+const FeedbackForm = () => {
+  const [show, setShow] = useState(false);
+
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    // Handle form submission logic here
+    handleClose();
+  };
+
+  return (
+    <>
+      <Button className="feedback-button" onClick={handleShow}>
+        Feedback
+      </Button>
+
+      <Modal show={show} onHide={handleClose}>
+        <Modal.Header closeButton>
+          <Modal.Title>Feedback</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Form onSubmit={handleSubmit}>
+            <Form.Group controlId="feedbackForm.ControlTextarea">
+              <Form.Label>Your Feedback</Form.Label>
+              <Form.Control as="textarea" rows={3} required />
+            </Form.Group>
+            <Button variant="primary" type="submit">
+              Submit
+            </Button>
+          </Form>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+};
+
+export default FeedbackForm;