fix: position history, etc.

djeck1432 · Feb 3, 2025 · 42a7650 · 42a7650
1 parent 724b716
commit 42a7650
Show file tree

Hide file tree

Showing 12 changed files with 49 additions and 45 deletions.
diff --git a/frontend/src/components/home/about/About.jsx b/frontend/src/components/home/about/About.jsx
@@ -40,8 +40,8 @@ const About = () => {
   ];
 
   return (
-    <div className="relative flex w-[100%] flex-col items-center justify-between bg-[var(--black)] pb-[100px] lg:pb-[350px]">
-      <div className="absolute top-[12em] left-[10em] z-10 hidden h-[100px] w-[20%] -translate-x-1/2 rounded-[2000px_2000px_0_0] bg-gradient-to-r from-[var(--gradient-from)] to-[var(--gradient-to)] blur-[100px] lg:block"></div>
+    <div className="relative flex w-[100%] flex-col items-center justify-between bg-[var(--primary-color)] pb-[100px] lg:pb-[350px]">
+      <div className="absolute top-[15em] left-[15em] z-10 hidden h-[232px] w-[208px] -translate-x-1/2 rounded-[2000px_2000px_0_0] bg-[linear-gradient(73deg,_#74d6fd_1.13%,_#e01dee_103.45%)] blur-[80px] lg:block"></div>
       <StarMaker starData={starData} />
       <h1 className="font-text mt-[64px] mb-[180px] text-center text-[48px] font-[600] text-white">How it works</h1>
 
@@ -70,7 +70,7 @@ const About = () => {
           </div>
         ))}
       </div>
-      <div className="absolute top-[35em] right-0 z-0 hidden h-[100px] w-[20%] rounded-[2000px_2000px_0_0] bg-gradient-to-r from-[var(--gradient-from)] to-[var(--gradient-to)] blur-[100px] lg:block"></div>
+      <div className="absolute top-[25em] right-[25em] z-0 hidden h-[232px] w-[208px] rounded-[2000px_2000px_0_0] bg-[linear-gradient(73deg,_#74d6fd_1.13%,_#e01dee_103.45%)] blur-[100px] lg:block"></div>
     </div>
   );
 };

diff --git a/frontend/src/components/home/dont-miss/DontMiss.jsx b/frontend/src/components/home/dont-miss/DontMiss.jsx
@@ -24,7 +24,6 @@ const DontMiss = () => {
 
   return (
     <div className="mt-[60px] mb-[50px] flex h-auto flex-col items-center justify-center lg:mb-[250px]">
-      <div className="absolute bottom-10 left-0 h-[100px] w-[20%] -translate-x-1/2 rounded-[2000px_2000px_0_0] bg-gradient-to-r from-[var(--gradient-from)] to-[var(--gradient-to)] blur-[100px]"></div>
       <div className="text-container">
         <h1 className="text-center text-[48px] font-[600] text-white">Don&apos;t miss out</h1>
         <p className="mb-0 text-center text-[20px] font-[400] text-white">
@@ -47,7 +46,10 @@ const DontMiss = () => {
         <JoinButton onClick={handleLaunchApp}>Launch App</JoinButton>
         <Hand className="absolute top-[26px] right-[-44px] h-[114px] w-[114px] lg:right-[-53px] lg:h-[135px] lg:w-[135px]" />
       </div>
-      <div className="absolute right-0 bottom-10 h-[100px] w-[20%] translate-x-1/2 rounded-[2000px_2000px_0_0] bg-gradient-to-r from-[var(--gradient-from)] to-[var(--gradient-to)] blur-[100px]"></div>
+      <div>
+        <div className="absolute bottom-175 left-125 h-[232px] w-[208px] -translate-x-1/2 rounded-[2000px_2000px_0_0] bg-[linear-gradient(73deg,_#74d6fd_1.13%,_#e01dee_103.45%)] blur-[80px]"></div>
+        <div className="absolute right-110 bottom-200 h-[232px] w-[208px] translate-x-1/2 rounded-[2000px_2000px_0_0] bg-[linear-gradient(73deg,_#74d6fd_1.13%,_#e01dee_103.45%)] blur-[80px]"></div>
+      </div>
     </div>
   );
 };

diff --git a/frontend/src/components/home/home/Home.jsx b/frontend/src/components/home/home/Home.jsx
@@ -82,14 +82,14 @@ function Home() {
           <Starknet className="absolute top-0 right-[20px] z-[-1]" />
         </div>
         <div className="mx-auto flex flex-col items-center justify-center px-[1em] md:mt-[5em] lg:mt-0">
-          <h2 className="font-text mx-auto text-center text-[50px] leading-[50px] text-[var(--primary)] lg:text-[70px] lg:leading-[75px]">
+          <h2 className="font-text mx-auto text-center text-[50px] leading-[50px] font-medium text-[var(--primary)] lg:text-[70px] lg:leading-[75px]">
             <span className="text-blue-400">Earn</span> by leveraging your <br /> assets
             <span className="bg-gradient-to-r from-[var(--button-gradient-from)] via-[var(--button-gradient-from)] to-[var(--button-gradient-to)] bg-clip-text text-transparent hover:bg-gradient-to-r hover:from-[var(--button-gradient-hover-from)]">
               {' '}
               with Spotnet
             </span>
           </h2>
-          <h5 className="mt-[1em] text-white lg:text-[20px]">
+          <h5 className="mt-[1em] text-white lg:text-[17px]">
             Maximize the potential of your resources and start earning today. Join <br /> Spotnet and unlock new
             opportunities to grow your wealth!
           </h5>

diff --git a/frontend/src/components/home/partnership/Partnership.jsx b/frontend/src/components/home/partnership/Partnership.jsx
@@ -14,7 +14,7 @@ const Partnership = () => {
   const starData = [{ top: 10, left: 75, size: 15 }];
 
   return (
-    <div className="relative bg-[var(--black)]">
+    <div className="relative">
       {starData.map((star, index) => (
         <Star
           key={index}

diff --git a/frontend/src/components/layout/footer/Footer.jsx b/frontend/src/components/layout/footer/Footer.jsx
@@ -26,9 +26,9 @@ function Footer() {
   ];
 
   return (
-    <footer className="relative flex h-[100px] w-full items-center bg-[var(--darkish)] px-20 lg:h-[70px] lg:px-[3em]">
+    <footer className="text-primary relative flex h-[70px] w-full items-center bg-[var(--footer-bg-color)] px-[15px] md:h-[100px] md:px-[80px]">
       <div className="hidden w-full items-center justify-between lg:flex">
-        <div className="text-base text-gray-400">
+        <div className="text-base">
           <p className="m-0">Copyright©Spotnet2024</p>
         </div>
         <nav className="flex items-center">
@@ -42,7 +42,7 @@ function Footer() {
               <NavLink
                 to={link.path}
                 className={({ isActive }) =>
-                  `inline-block text-base text-gray-400 transition-all duration-300 ease-in-out hover:scale-110 hover:text-[var(--brand)] ${isActive ? 'text-[var(--brand)]' : ''} `
+                  `inline-block text-base transition-all duration-300 ease-in-out hover:scale-110 hover:text-[var(--brand)] ${isActive ? 'text-[var(--brand)]' : ''} `
                 }
                 onClick={(e) => {
                   if (window.location.pathname === link.path) {

diff --git a/frontend/src/components/layout/header/Header.jsx b/frontend/src/components/layout/header/Header.jsx
@@ -6,7 +6,6 @@ import WalletSection from '@/components/layout/wallet-section/WalletSection';
 import NavigationLinks from '@/components/layout/navigation-links/NavigationLinks';
 import useLockBodyScroll from '@/hooks/useLockBodyScroll';
 import MobDropdownMenu from '@/components/layout/mob-dropdown-menu/MobDropdownMenu';
-import './header.css';
 import { ReportBugButton } from '@/components/report-button/ReportBugButton';
 import { ReportBugModal } from '@/components/report-modal/ReportBugModal';
 

diff --git a/frontend/src/components/report-button/ReportBugButton.jsx b/frontend/src/components/report-button/ReportBugButton.jsx
@@ -4,7 +4,7 @@ import ReportBugIcon from '../../assets/icons/customer-service-01.svg';
 export function ReportBugButton({ onClick }) {
   return (
     <button
-      className="border-border-color hover:bg-report-btn-bg-hover fixed top-[125px] right-[30px] z-10 flex hidden h-[46px] cursor-pointer items-center gap-2 rounded-[12px] border-x border-y bg-[#11061E] px-6 py-3 transition-all md:flex"
+      className="border-border-color hover:bg-report-btn-bg-hover fixed top-[125px] right-[30px] z-10 hidden h-[46px] cursor-pointer items-center gap-2 rounded-[12px] border-x border-y bg-[#11061E] px-6 py-3 transition-all md:flex"
       onClick={(e) => {
         e.stopPropagation();
         onClick();

diff --git a/frontend/src/components/ui/action-modal/ActionModal.jsx b/frontend/src/components/ui/action-modal/ActionModal.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Button } from '@/components/ui/custom-button/Button';
 import useLockBodyScroll from '@/hooks/useLockBodyScroll';
+import { cn } from '@/utils/cn';
 
 const ActionModal = ({
   isOpen,
@@ -24,25 +25,27 @@ const ActionModal = ({
       onClick={cancelAction}
     >
       <div
-        className="shadow-primary-color flex w-lg items-center justify-center overflow-hidden text-white md:w-xl"
+        className="shadow-primary-color flex items-center justify-center overflow-hidden text-white"
         onClick={(e) => e.stopPropagation()}
       >
-        <div className="flex w-full max-w-[330px] flex-col gap-4 rounded-2xl text-center sm:w-8/12 sm:max-w-md">
-          <div className="border-nav-divider-bg bg-bg h-fit rounded-2xl border py-4 pt-4 text-center text-sm md:rounded-2xl">
-            <div className="text-primary border-b-nav-divider-bg mb-6 w-full border-b pt-1 pb-2 text-center text-xs">
+        <div className="flex w-[330px] flex-col gap-[18px] rounded-2xl text-center md:w-full md:max-w-[700px] md:gap-6">
+          <div className="border-nav-divider-bg bg-bg h-fit rounded-2xl border p-6 py-4 pt-4 text-center text-sm md:rounded-2xl">
+            <div className="text-primary mb-6 w-full border-b border-b-[rgba(255,255,255,0.1)] px-[10px] py-[10px] text-center text-base text-[13px] sm:mb-[14px] sm:py-[6px] md:mb-4 md:pb-4">
               {title}
             </div>
             <div className="grid min-h-28 place-content-center px-2">
-              <h6 className="text-sm font-semibold">{subTitle}</h6>
+              <h2 className={cn('mx-auto mb-4 text-sm font-semibold md:text-2xl', content.length && 'px-0 py-[55px]')}>
+                {subTitle}
+              </h2>
               {content.map((content, i) => (
-                <p className="mx-auto mt-0 mb-3 max-w-96 text-base leading-6 text-gray-500" key={i}>
+                <p className="mx-auto mt-0 mb-3 max-w-96 text-base leading-6" key={i}>
                   {content}
                 </p>
               ))}
             </div>
           </div>
-          <div className="flex justify-between gap-4">
-            <Button variant="secondary" size="md" className="modal-btn" onClick={cancelAction} disabled={isLoading}>
+          <div className="flex justify-between gap-2 md:gap-4">
+            <Button variant="secondary" size="md" onClick={cancelAction} disabled={isLoading}>
               {cancelLabel}
             </Button>
             <Button variant="primary" size="md" onClick={submitAction} disabled={isLoading}>

diff --git a/frontend/src/components/ui/custom-button/Button.jsx b/frontend/src/components/ui/custom-button/Button.jsx
@@ -57,7 +57,7 @@ export const Button = React.forwardRef(({ className, variant, size, children, ..
       ref={ref}
       {...props}
     >
-      <span className="relative z-10 px-6 py-4">{children}</span>
+      <span className="relative z-10 py-4 md:px-6">{children}</span>
     </button>
   );
 });

diff --git a/frontend/src/globals.css b/frontend/src/globals.css
@@ -1,6 +1,8 @@
 @import url('https://fonts.googleapis.com/css2?family=Allerta+Stencil&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap');
 @import 'tailwindcss';
 
+/* TODO: fix this file. */
+
 @theme {
   /* Fonts */
   --text-font: 'Rethink Sans', sans-serif;

diff --git a/frontend/src/pages/position-history/PositionHistory.jsx b/frontend/src/pages/position-history/PositionHistory.jsx
@@ -57,7 +57,7 @@ function PositionHistory() {
           <p>Position History</p>
         </div>
 
-        <div className="overflow-auto rounded-lg border border-[#36294E] max-[1500px]:max-w-[650px] max-[400px]:w-full [&::-webkit-scrollbar]:h-1 [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-[#36294E] hover:[&::-webkit-scrollbar-thumb]:bg-[#4b3b69] [&::-webkit-scrollbar-track]:bg-[#12072180]">
+        <div className="overflow-auto rounded-lg border border-[#36294E] max-[1300px]:max-w-[650px] max-[400px]:w-full [&::-webkit-scrollbar]:h-1 [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-[#36294E] hover:[&::-webkit-scrollbar-thumb]:bg-[#4b3b69] [&::-webkit-scrollbar-track]:bg-[#12072180]">
           {isPending ? (
             <div className="flex items-center justify-center">
               <Spinner loading={isPending} />
@@ -66,15 +66,17 @@ function PositionHistory() {
             <table className="w-full table-auto">
               <thead>
                 <tr className="border-b border-[#36294E] text-[clamp(0.8rem,2vw,1rem)] font-normal whitespace-nowrap text-[#9CA3AF]">
-                  <th className="w-[5%] px-4 py-4 text-left">#</th>
-                  <th className="w-[12%] px-4 py-4 text-left">Token</th>
-                  <th className="w-[8%] px-4 py-4 text-center">Amount</th>
-                  <th className="hidden w-[15%] px-4 py-4 text-center lg:table-cell">Created At</th>
-                  <th className="w-[10%] px-4 py-4 text-center">Status</th>
-                  <th className="hidden w-[12%] px-4 py-4 text-center lg:table-cell">Start Price</th>
-                  <th className="hidden w-[10%] px-4 py-4 text-center lg:table-cell">Multiplier</th>
-                  <th className="hidden w-[10%] px-4 py-4 text-center lg:table-cell">Liquidated</th>
-                  <th className="hidden w-[15%] px-4 py-4 text-center lg:table-cell">Closed At</th>
+                  <th className="w-[5%] px-4 py-4 text-left text-sm font-normal">#</th>
+                  <th className="w-[12%] px-4 py-4 text-left text-sm font-normal">Token</th>
+                  <th className="w-[8%] px-4 py-4 text-center text-sm font-normal">Amount</th>
+                  <th className="hidden w-[15%] px-4 py-4 text-center text-sm font-normal lg:table-cell">Created At</th>
+                  <th className="w-[10%] px-4 py-4 text-center text-sm font-normal">Status</th>
+                  <th className="hidden w-[12%] px-4 py-4 text-center text-sm font-normal lg:table-cell">
+                    Start Price
+                  </th>
+                  <th className="hidden w-[10%] px-4 py-4 text-center text-sm font-normal lg:table-cell">Multiplier</th>
+                  <th className="hidden w-[10%] px-4 py-4 text-center text-sm font-normal lg:table-cell">Liquidated</th>
+                  <th className="hidden w-[15%] px-4 py-4 text-center text-sm font-normal lg:table-cell">Closed At</th>
                   <th className="w-[3%] px-4 py-4 text-center">
                     <img src={filterIcon} alt="filter-icon" draggable="false" />
                   </th>
@@ -108,9 +110,9 @@ function PositionHistory() {
                         {data.is_liquidated.toString()}
                       </td>
                       <td className="hidden px-4 py-4 text-center text-white lg:table-cell">{data.closed_at}</td>
-                      <td className="px-4 py-4 text-center">
+                      <td className="block px-4 py-4 text-center md:hidden">
                         <button
-                          className="t cursor-pointer rounded p-1 text-[#433B5A] transition-colors hover:bg-white/10 hover:text-[#fff]"
+                          className="cursor-pointer rounded p-1 text-[#433B5A] transition-colors hover:bg-white/10 hover:text-[#fff]"
                           onClick={() => setSelectedPosition({ data, index })}
                         >
                           &#x22EE;

diff --git a/frontend/src/pages/position-history/PositionHistoryModal.jsx b/frontend/src/pages/position-history/PositionHistoryModal.jsx
@@ -2,18 +2,14 @@ import React from 'react';
 
 function PositionHistoryModal({ position, onClose, index, tokenIcon, statusStyles }) {
   return (
-    <div className="bg-opacity-50 fixed inset-0 z-50 flex items-center justify-center bg-black">
-      <div className="w-full max-w-md rounded-lg bg-[#1E1E2E] p-6 shadow-lg">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+      <div className="bg-bg w-full max-w-md rounded-lg p-6 shadow-lg">
         <div className="mb-4 flex items-center justify-between">
-          <p className="text-lg font-semibold text-white">
-            <span>
-              <span>{index}.</span>
-              {tokenIcon[position.token_symbol]}
-              {position.token_symbol}
-            </span>
-            <span className="ml-2">{position.amount}</span>
-            <span className={`ml-2 ${statusStyles[position.status.toLowerCase()] || ''}`}>{position.status}</span>
-          </p>
+          <span>{index}.</span>
+          {tokenIcon[position.token_symbol]}
+          {position.token_symbol}
+          <span className="ml-2">{position.amount}</span>
+          <span className={`ml-2 ${statusStyles[position.status.toLowerCase()] || ''}`}>{position.status}</span>
 
           <button
             onClick={onClose}