Merge pull request #495 from gabito1451/feat/report-bug-button

[draft] report bug button implementation

frontend/src/components/layout/header/Header.jsx

@@ -8,10 +8,14 @@ import useLockBodyScroll from '../../../hooks/useLockBodyScroll';
 import MobDropdownMenu from '../mob-dropdown-menu/MobDropdownMenu';
 import './header.css';
 import '../../../globals.css';
+import { ReportBugButton } from 'components/report-button/ReportBugButton';
+import { ReportBugModal } from 'components/report-modal/ReportBugModal';
 
 function Header({ onConnectWallet, onLogout }) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const location = useLocation(); // Getting object of currant route
+  const location = useLocation();
+
 
   const makeNavStick = [
     '/overview',
@@ -55,24 +59,44 @@ function Header({ onConnectWallet, onLogout }) {
     setIsMenuOpen(false);
   };
 
+
+  const openModal = () => {
+    setIsModalOpen(true);
+  };
+
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
   return (
-    <nav className={makeNavStick ? 'header-nav-sticky' : 'header-nav'}>
-      <div className="list-items">
-        <div className="logo">
-          <NavLink to="/">
-            <Logo />
-          </NavLink>
-        </div>
-        {/* desktop navigation */}
-        <NavigationLinks onNavClick={handleNavClick} />
-        <div className="menu-section">
-          <div className="dropdown">
-            <MobDropdownMenu isMenuOpen={isMenuOpen} toggleMenu={toggleMenu} />
+    <>
+      <nav className={makeNavStick ? 'header-nav-sticky' : 'header-nav'}>
+        <div className="list-items">
+          <div className="logo">
+            <NavLink to="/">
+              <Logo />
+            </NavLink>
+          </div>
+          {/* Desktop navigation */}
+          <NavigationLinks onNavClick={handleNavClick} />
+          <div className="menu-section">
+            <div className="dropdown">
+              <MobDropdownMenu isMenuOpen={isMenuOpen} toggleMenu={toggleMenu} />
+            </div>
+            <WalletSection onConnectWallet={onConnectWallet} onLogout={onLogout} />
           </div>
-          <WalletSection onConnectWallet={onConnectWallet} onLogout={onLogout} />
         </div>
-      </div>
-    </nav>
+      </nav>
+
+
+      {!isModalOpen && <ReportBugButton onClick={openModal} />}
+
+
+      {isModalOpen && (
+        <ReportBugModal onClose={closeModal} />
+      )}
+    </>
   );
 }
 

frontend/src/components/layout/header/header.css

@@ -284,6 +284,7 @@
     height: 48px;
     font-size: 14px;
   }
+
   .Toastify__toast {
     left: 50px;
     height: 60px;
@@ -351,6 +352,7 @@
   .header-nav {
     height: 80px;
   }
+
   .list-items {
     padding: 0 25px;
   }
@@ -392,3 +394,11 @@
     width: 180px;
   }
 }
+
+.report-btn-cont {
+  display: flex;
+  width: 100%;
+  padding: 10px 30px;
+  justify-content: end;
+  height: fit-content;
+}

frontend/src/components/report-button/ReportBugButton.css

@@ -0,0 +1,33 @@
+.report-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  position: fixed;
+  right: 30px;
+  top: 125px;
+  z-index: 10;
+  height: 46px;
+  background: #11061e;
+  border: 1px solid #36294e;
+  border-radius: 12px;
+  padding: 12px 24px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.report-button:hover {
+  background: linear-gradient(to right, rgba(147, 51, 234, 0.3), rgba(59, 130, 246, 0.3));
+}
+
+.bug-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.bug-text {
+  color: #e7ecf0;
+  font-family: Open Sans;
+  font-size: 16px;
+  font-weight: 400;
+  margin-top: 13px;
+}

frontend/src/components/report-button/ReportBugButton.jsx

@@ -0,0 +1,25 @@
+import React from "react"
+import "./ReportBugButton.css"
+import ReportBugIcon from "../../assets/icons/customer-service-01.svg"
+
+export function ReportBugButton({ onClick }) {
+    return (
+        <button className="report-button" onClick={(e) => {
+
+            e.stopPropagation();
+            onClick();
+        }}>
+
+            <img
+                src={ReportBugIcon}
+                alt="bug-icon"
+                className="bug-icon"
+            />
+
+            <p className="bug-text">Report Bug</p>
+
+
+        </button>
+    )
+}
+

frontend/src/components/report-modal/ReportBugModal.css

@@ -0,0 +1,134 @@
+.modall-overlay {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: var(--spinner-bgn);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+    z-index: 10100;
+
+
+    padding: 100px 100px;
+
+}
+
+.text-group {
+    background-color: #120721;
+    border-radius: 8px;
+    padding: 24px;
+    width: 100%;
+    max-width: 642px;
+}
+
+.report-bug-form {
+    border-radius: 2px;
+
+}
+
+
+
+.modall-content h3 {
+
+    font-family: Open Sans;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    text-align: center;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
+    color: #798795;
+    padding-bottom: 5px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.line {
+    border: 1px solid #22153A;
+}
+
+.modal-header {
+    font-family: Open Sans;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    text-align: center;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
+    color: #798795
+}
+
+.modal-paragraph-text {
+    font-family: Open Sans;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    text-align: center;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
+    padding: 5px 0px;
+    color: #f0f0f0
+}
+
+.telegram-icon {
+    width: 20px;
+    height: 20px;
+
+}
+
+.bug-textarea {
+    width: 100%;
+    min-height: 135px;
+    background-color: #120721;
+    border: 1px solid #22153a;
+    border-radius: 8px;
+    padding: 12px;
+    color: white;
+    margin-bottom: 24px;
+    resize: none;
+    outline: none;
+}
+
+.bug-textarea::placeholder {
+    color: #f0f0f0;
+    font-family: Open Sans;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 24px;
+    text-align: left;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
+
+}
+
+.dev-group-link {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: rgba(255, 255, 255, 0.6);
+    cursor: pointer;
+    font-family: Open Sans;
+    font-size: 14px;
+    font-weight: 400;
+    margin-bottom: 24px;
+}
+
+.dev-group-link:hover {
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.send-icon {
+    width: 16px;
+    height: 16px;
+    transform: rotate(-45deg);
+}
+
+.button-group {
+    margin-top: 20px;
+    display: flex;
+    gap: 16px;
+    justify-content: center;
+}

frontend/src/components/report-modal/ReportBugModal.jsx

@@ -0,0 +1,75 @@
+import React, { useState } from "react";
+import "./ReportBugModal.css";
+import telegramIcon from "../../assets/icons/telegram.svg";
+import { Button } from "components/ui/custom-button/Button";
+import { useWalletStore } from "stores/useWalletStore";
+import { useBugReport } from "hooks/useBugReport";
+
+export function ReportBugModal({ onClose }) {
+    const { walletId } = useWalletStore();
+    const [bugDescription, setBugDescription] = useState("");
+    const { mutation, handleSubmit } = useBugReport(walletId, bugDescription, onClose);
+
+    return (
+        <div
+            onClick={onClose}
+            className="modall-overlay"
+        >
+            <form
+                className="report-bug-form"
+                onClick={(e) => e.stopPropagation()}
+                onSubmit={handleSubmit}
+            >
+                <div className="modall-content">
+                    <div className="text-group">
+                        <h3>Report Bug</h3>
+                        <p className="modal-paragraph-text">
+                            Please describe the bug you've encountered
+                        </p>
+                        <textarea
+                            value={bugDescription}
+                            onChange={(e) => setBugDescription(e.target.value)}
+                            placeholder="The bug I'm experiencing..."
+                            className="bug-textarea"
+
+                        />
+                        <a
+                            className="dev-group-link"
+                            href="https://t.me/spotnet_dev"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            <img
+                                src={telegramIcon}
+                                alt="telegram-icon"
+                                className="telegram-icon"
+                            />
+                            Ask in our Dev group
+                        </a>
+                    </div>
+
+                    <div className="button-group">
+                        <Button
+                            variant="secondary"
+                            type="button"
+                            className="cancel-button"
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                onClose();
+                            }}
+                        >
+                            Cancel
+                        </Button>
+                        <Button
+                            variant="primary"
+                            type="submit"
+                            className="submit-button"
+                        >
+                            {mutation.isPending ? "Sending..." : "Send Report"}
+                        </Button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    );
+}