Merge branch 'main' into feat/rework-frontend-styles-to-tailwind

djeck1432 · Jan 27, 2025 · 4ff1c4c · 4ff1c4c
2 parents b78cebb + c9a53f7
commit 4ff1c4c
Show file tree

Hide file tree

Showing 36 changed files with 1,390 additions and 566 deletions.
diff --git a/frontend/src/assets/icons/customer-service-01.svg b/frontend/src/assets/icons/customer-service-01.svg
diff --git a/frontend/src/assets/images/background-form.png b/frontend/src/assets/images/background-form.png
diff --git a/frontend/src/components/dashboard/borrow/Borrow.jsx b/frontend/src/components/dashboard/borrow/Borrow.jsx
@@ -4,7 +4,7 @@ import { ReactComponent as BorrowIcon } from 'assets/icons/borrow_dynamic.svg';
 
 function Borrow({ data }) {
   return (
-    <div className="tab-content">
+    <div className="borrow-tab-content">
       <div className="balance-info">
         <div className="currency-info">
           {React.createElement(data[1]?.currencyIcon || BorrowIcon, {

diff --git a/frontend/src/components/dashboard/borrow/borrow.css b/frontend/src/components/dashboard/borrow/borrow.css
@@ -9,7 +9,6 @@
 }
 
 .currency-info {
-  margin-top: 1rem;
   display: flex;
   align-items: center;
 }

diff --git a/frontend/src/components/dashboard/collateral/Collateral.jsx b/frontend/src/components/dashboard/collateral/Collateral.jsx
@@ -5,7 +5,7 @@ import { TrendingDown, TrendingUp } from 'lucide-react';
 
 function Collateral({ data, startSum, currentSum, getCurrentSumColor }) {
   return (
-    <div className="tab-content">
+    <div className="collateral-tab-content">
       <div className="balance-info">
         <div className="currency-info">
           {React.createElement(data[0]?.currencyIcon || CollateralIcon, {
@@ -26,7 +26,7 @@ function Collateral({ data, startSum, currentSum, getCurrentSumColor }) {
         </span>
         <span>
           <span className="balance-label">Current sum: </span>
-          <span className={currentSum === 0 ? 'current-sum-green' : getCurrentSumColor()}>
+          <span className={currentSum >= 0 ? 'current-sum-green' : getCurrentSumColor()}>
             <span className="currency-symbol">$</span>
             {currentSum ? Number(currentSum).toFixed(8) : '0.00'}
             {currentSum > startSum && currentSum !== 0 && <TrendingUp className="lucide-up-icon" />}

diff --git a/frontend/src/components/dashboard/dashboard-tab/DashboardTabs.jsx b/frontend/src/components/dashboard/dashboard-tab/DashboardTabs.jsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import './dashboardTabs.css';
 import { ReactComponent as DepositIcon } from '../../../assets/icons/deposited_dynamic.svg';
 import { ReactComponent as CollateralIcon } from '../../../assets/icons/collateral_dynamic.svg';
@@ -7,26 +8,40 @@ import { DASHBOARD_TABS } from 'utils/constants';
 function DashboardTabs({ activeTab, switchTab }) {
   const { COLLATERAL, BORROW, DEPOSITED } = DASHBOARD_TABS;
 
+  const tabConfig = [
+    {
+      key: COLLATERAL,
+      Icon: CollateralIcon,
+      title: 'Collateral & Earnings',
+    },
+    {
+      key: BORROW,
+      Icon: BorrowIcon,
+      title: 'Borrow',
+    },
+    {
+      key: DEPOSITED,
+      Icon: DepositIcon,
+      title: 'Deposited',
+    },
+  ];
+
   return (
     <div className="tabs">
-      <button onClick={() => switchTab(COLLATERAL)} className={`tab ${activeTab === COLLATERAL ? 'active' : ''}`}>
-        <CollateralIcon className="tab-icon" />
-        <span className="tab-title">Collateral & Earnings</span>
-      </button>
-
-      <div className="tab-divider" />
-
-      <button onClick={() => switchTab(BORROW)} className={`tab ${activeTab === BORROW ? 'active' : ''}`}>
-        <BorrowIcon className="tab-icon" />
-        <span className="tab-title">Borrow</span>
-      </button>
-
-      <div className="tab-divider" />
-
-      <button onClick={() => switchTab(DEPOSITED)} className={`tab ${activeTab === DEPOSITED ? 'active' : ''}`}>
-        <DepositIcon className="tab-icon" />
-        <span className="tab-title">Deposited</span>
-      </button>
+      {tabConfig.map((tab, index) => (
+        <React.Fragment key={tab.key}>
+          <button
+            type="button"
+            onClick={() => switchTab(tab.key)}
+            className={`tab ${activeTab === tab.key ? 'active' : ''}`}
+          >
+            <tab.Icon className="tab-icon" />
+            <span className="tab-title">{tab.title}</span>
+          </button>
+
+          {index < tabConfig.length - 1 && <div className="tab-divider"></div>}
+        </React.Fragment>
+      ))}
 
       <div className="tab-indicator-container">
         <div className={`tab-indicator ${activeTab}`} />

diff --git a/frontend/src/components/dashboard/dashboard-tab/dashboardTabs.css b/frontend/src/components/dashboard/dashboard-tab/dashboardTabs.css
@@ -3,6 +3,12 @@
   justify-content: space-between;
   position: relative;
   align-items: center;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #36294e;
 }
 
 .tab {
@@ -74,6 +80,8 @@
   height: 18px;
   border-radius: 8px;
   background-color: var(--border-color);
+  min-width: 3px;
+  min-height: 18px;
   margin: 0 1rem;
 }
 
@@ -93,7 +101,7 @@
   .tab-divider {
     width: 2px;
     height: 16px;
-    margin: 0 4px;
+    margin: 0 10px;
     background-color: var(--border-color);
   }
 
@@ -122,7 +130,7 @@
   .tab-divider {
     width: 2px;
     height: 16px;
-    margin: 0 18px;
+    margin: 0 15px;
     background-color: var(--border-color);
   }
 

diff --git a/frontend/src/components/dashboard/deposited/Deposited.jsx b/frontend/src/components/dashboard/deposited/Deposited.jsx
@@ -5,7 +5,7 @@ import { ReactComponent as UsdIcon } from '../../../assets/icons/usdc-icon.svg';
 
 function Deposited({ data }) {
   return (
-    <div className="tab-content">
+    <div className="deposited-tab-content">
       <div className="deposited-info">
         <div className="deposited-item">
           <div className="currency-name">

diff --git a/frontend/src/components/dashboard/deposited/deposited.css b/frontend/src/components/dashboard/deposited/deposited.css
@@ -1,6 +1,6 @@
 .tab-content {
   text-align: left;
-  width: 580px;
+  width: 100%;
   height: 190px;
   padding: 0px 40px 0 20px;
   margin: 16px auto 0;
@@ -10,13 +10,38 @@
   margin: 0;
 }
 
+.collateral-tab-content,
+.borrow-tab-content {
+  text-align: left;
+  width: 100%;
+  height: 190px;
+  margin: 16px auto 0;
+}
+
+.collateral-tab-content,
+.borrow-tab-content p {
+  margin: 0;
+}
+
+.deposited-tab-content p {
+  margin: 0;
+}
+
 .deposited-info {
   display: flex;
   flex-direction: column;
   gap: 8px;
   justify-content: center;
 }
 
+.deposited-tab-content {
+  text-align: left;
+  width: 100%;
+  height: 190px;
+  padding: 0px 40px 0 20px;
+  margin: 16px auto 0;
+}
+
 .deposited-item {
   display: flex;
   align-items: center;
@@ -71,12 +96,37 @@
     padding: 16px;
     margin-top: 0;
   }
+
+  .collateral-tab-content,
+  .borrow-tab-content {
+    width: 100%;
+    height: auto;
+    margin-top: 0;
+  }
+
+  .deposited-tab-content {
+    width: 100%;
+    height: auto;
+    padding: 10px;
+    margin-top: 0;
+  }
 }
 
 @media (max-width: 480px) {
   .tab-content {
-    width: fit-content;
     font-size: 14px;
+    padding: 0px 0px 0px 0px;
+  }
+
+  .collateral-tab-content,
+  .borrow-tab-content {
+    font-size: 14px;
+    padding: 15px 0px 0 0px;
+  }
+
+  .deposited-tab-content {
+    font-size: 14px;
+    padding: 15px 0px 0 0px;
   }
 
   .icon {

diff --git a/frontend/src/components/layout/header/Header.jsx b/frontend/src/components/layout/header/Header.jsx
@@ -7,8 +7,11 @@ import NavigationLinks from '../navigation-links/NavigationLinks';
 import useLockBodyScroll from '../../../hooks/useLockBodyScroll';
 import MobDropdownMenu from '../mob-dropdown-menu/MobDropdownMenu';
 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();
 
@@ -51,7 +54,18 @@ function Header({ onConnectWallet, onLogout }) {
     setIsMenuOpen(false);
   };
 
+
+  const openModal = () => {
+    setIsModalOpen(true);
+  };
+
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
   return (
+    <>
     <nav className={`flex items-center justify-center w-full h-[90px] bg-header-bg backdrop-blur-lg border-b border-[#300734] z-[9999] ${makeNavStick ? 'fixed top-0' : 'relative'}`}>
       <div className="flex items-center justify-between w-full px-[30px] relative">
         <div className="logo">
@@ -67,8 +81,16 @@ function Header({ onConnectWallet, onLogout }) {
           </div>
           <WalletSection onConnectWallet={onConnectWallet} onLogout={onLogout} />
         </div>
-      </div>
-    </nav>
+      </nav>
+
+
+      {!isModalOpen && <ReportBugButton onClick={openModal} />}
+
+
+      {isModalOpen && (
+        <ReportBugModal onClose={closeModal} />
+      )}
+    </>
   );
 }
 

diff --git a/frontend/src/components/layout/header/header.css b/frontend/src/components/layout/header/header.css
@@ -275,6 +275,7 @@
     height: 48px;
     font-size: 14px;
   }
+
   .Toastify__toast {
     left: 50px;
     height: 60px;
@@ -342,6 +343,7 @@
   .header-nav {
     height: 80px;
   }
+
   .list-items {
     padding: 0 25px;
   }
@@ -383,3 +385,11 @@
     width: 180px;
   }
 }
+
+.report-btn-cont {
+  display: flex;
+  width: 100%;
+  padding: 10px 30px;
+  justify-content: end;
+  height: fit-content;
+}
diff --git a/frontend/src/components/report-button/ReportBugButton.css b/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;
+}
diff --git a/frontend/src/components/report-button/ReportBugButton.jsx b/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>
+    )
+}
+