refactor: update styles and improve layout across multiple components

djeck1432 · Jan 28, 2025 · b523c11 · b523c11
1 parent d4f4ef3
commit b523c11
Show file tree

Hide file tree

Showing 15 changed files with 73 additions and 51 deletions.
diff --git a/frontend/src/components/home/information/Information.jsx b/frontend/src/components/home/information/Information.jsx
@@ -51,7 +51,7 @@ const Information = () => {
   return (
     <div className="flex items-center justify-center">
       <div className="relative w-full max-w-6xl flex justify-around mt-48 mb-36">
-        <div className="flex flex-col items-center justify-center gap-4 w-64 md:w-96 h-52  bg-card-bg-gradient rounded-2xl border border-border-gradient shadow-lg backdrop-blur-lg text-white">
+        <div className="flex flex-col items-center justify-center gap-4 w-64 md:w-96 h-52  bg-card-bg-gradient rounded-2xl border-x border-y border-border-gradient shadow-lg backdrop-blur-lg text-white">
           <h1 className="text-xl font-semibold text-center text-second-primary">TVL</h1>
           <h3 className={`text-2xl font-bold text-center ${loading ? 'animate-pulse' : ''}`}>
             {loading ? 'Loading...' : error ? `Error: ${error}` : formatCurrency(data.total_opened_amount)}
@@ -61,7 +61,7 @@ const Information = () => {
         <div className="absolute top-20 left-[-330px] w-56 h-52 rounded-full bg-blue-pink-gradient-alt blur-3xl"></div>
         <div className="absolute bottom-20 right-[-450px] w-96 h-52 rounded-full bbg-blue-pink-gradient-alt2 blur-3xl"></div>
 
-        <div className="flex flex-col items-center justify-center gap-4 w-64 md:w-96 h-52 bg-card-bg-gradient rounded-2xl border border-border-gradient shadow-lg backdrop-blur-lg text-white">
+        <div className="flex flex-col items-center justify-center gap-4 w-64 md:w-96 h-52 bg-card-bg-gradient rounded-2xl border-x border-y border-border-gradient shadow-lg backdrop-blur-lg text-white">
           <h1 className="text-xl font-semibold text-center text-second-primary">Users</h1>
           <h3 className={`text-2xl font-bold text-center ${loading ? 'animate-pulse' : ''}`}>
             {loading ? 'Loading...' : error ? `Error: ${error}` : data.unique_users}

diff --git a/frontend/src/components/home/partnership/Partnership.jsx b/frontend/src/components/home/partnership/Partnership.jsx
@@ -30,7 +30,7 @@ const Partnership = () => {
       ))}
       <h1 className="text-center font-bold text-white mb-32 text-4xl md:text-3xl sm:text-2xl">Partnership</h1>
       <div className="w-screen h-36 bg-main-gradient flex relative overflow-hidden">
-        <div className="flex items-center justify-start animate-scroll w-[calc(150px*8*2)] bg-transparent">
+        <div className="partnership-logo">
           {logos}
         </div>
       </div>

diff --git a/frontend/src/components/layout/footer/Footer.jsx b/frontend/src/components/layout/footer/Footer.jsx
@@ -27,11 +27,11 @@ function Footer() {
 
   return (
     <footer className="px-20 md:px-16 sm:px-8 bg-footer-bg-color h-24 flex items-center justify-between relative z-10">
-      <div className="text-secondary text-sm hidden lg:flex">
+      <div className="text-white text-lg hidden lg:flex">
         <p>Copyright© Spotnet {new Date().getFullYear()}</p>
       </div>
 
-      <nav className="lg:flex gap-4 text-secondary hidden">
+      <nav className="lg:flex gap-4 text-white text-lg hidden">
         {[
           { path: '/documentation', label: 'Documentation' },
           { path: '/overview', label: 'Overview' },
@@ -42,7 +42,7 @@ function Footer() {
             key={path}
             to={path}
             className={({ isActive }) =>
-              isActive ? 'text-secondary scale-105 transition-transform' : 'hover:scale-105 transition-transform'
+              isActive ? 'text-brand hover:scale-105 transition-transform' : 'text-white hover:scale-105 transition-transform'
             }
             onClick={(e) => {
               if (window.location.pathname === path) {

diff --git a/frontend/src/components/layout/sidebar/Sidebar.jsx b/frontend/src/components/layout/sidebar/Sidebar.jsx
@@ -54,7 +54,7 @@ const Sidebar = ({ title, items, className = '' }) => {
     const isActive = activeItemId === item.id;
     const isExpanded = expandedItems[item.id];
     const hasChildren = item.children && item.children.length > 0;
-    const itemClass = `w-full flex items-center p-[12.5px] text-gray hover:text-white cursor-pointer ${
+    const itemClass = `w-full flex items-center p-[12.5px] text-gray hover:text-white transition cursor-pointer ${
       isActive ? 'text-white' : ''
     } ${level > 0 ? 'pl-2' : ''}`;
 
@@ -71,18 +71,18 @@ const Sidebar = ({ title, items, className = '' }) => {
         )}
 
         {hasChildren && isExpanded && (
-          <div className="ml-4">{item.children.map((child) => renderSidebarItem(child, level + 1))}</div>
+          <div className="ml-6">{item.children.map((child) => renderSidebarItem(child, level + 1))}</div>
         )}
       </div>
     );
   };
 
   return (
-    <div className={`bg-black border-r border-[#300734] fixed top-[5.5rem] left-0 h-screen w-1/5 ${className} hidden lg:block`}>
-      <nav className="flex flex-col p-8 pt-8">
+    <div className={`bg-black border-r border-[#300734] fixed top-[5.5rem] left-0 h-screen w-[380px] ${className} hidden lg:block`}>
+      <nav className="flex flex-col pl-20 p-8 pt-8">
         {title && (
-          <div className="pb-2 mb-3 border-b border-[#9333ea]">
-            <h2 className="text-sm font-normal text-[#83919f]">{title}</h2>
+          <div className="pb-2 mb-3 border-b border-border-gradient">
+            <h2 className="text-[15px] font-normal text-white">{title}</h2>
           </div>
         )}
         {items.map((item) => renderSidebarItem(item))}

diff --git a/frontend/src/components/layout/sidebar/SidebarItem.jsx b/frontend/src/components/layout/sidebar/SidebarItem.jsx
@@ -5,7 +5,7 @@ export const SidebarItem = ({ item: { icon, name }, isExpanded, hasChildren, isN
   return (
     <>
       {isNested ? (
-        <span className="bg-[#9333ea] w-[6px] h-[6px] rounded-full mr-2" />
+        <span className="bg-[#9333ea]/40 w-[6px] h-[6px] rounded-full mr-2" />
       ) : (
         <span className="mr-2 flex items-center">
           <img

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="fixed top-[125px] right-[30px] flex items-center gap-2 z-10 h-[46px] bg-[#11061E] border border-[#36294E] rounded-[12px] py-3 px-6 cursor-pointer transition-all hover:bg-gradient-to-r hover:from-[#9333ea] hover:via-[#3b82f6] hover:to-transparent"
+            className="fixed top-[125px] right-[30px] flex items-center gap-2 z-10 h-[46px] bg-[#11061E] border-x border-y border-border-color rounded-[12px] py-3 px-6 cursor-pointer transition-all hover:bg-report-btn-bg-hover"
             onClick={(e) => {
                 e.stopPropagation();
                 onClick();
@@ -13,9 +13,9 @@ export function ReportBugButton({ onClick }) {
             <img
                 src={ReportBugIcon}
                 alt="bug-icon"
-                className="w-4 h-4"
+                className="w-4 h-4 inline"
             />
-            <p className="text-[#e7ecf0] text-base font-normal mt-[13px]">Report Bug</p>
+            <p className="text-[#e7ecf0] text-base font-normal">Report Bug</p>
         </button>
     );
 }
diff --git a/frontend/src/components/report-modal/ReportBugModal.jsx b/frontend/src/components/report-modal/ReportBugModal.jsx
@@ -15,26 +15,26 @@ export function ReportBugModal({ onClose }) {
             className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm z-50 p-24"
         >
             <form
-                className="relative rounded-md w-full max-w-xl bg-[#120721] p-6"
+                className="relative rounded-xl w-full max-w-xl"
                 onClick={(e) => e.stopPropagation()}
                 onSubmit={handleSubmit}
-            >yarn start 
+            >
                 <div className="space-y-6">
-                    <div className="text-center">
-                        <h3 className="text-[#798795] text-lg font-normal pb-2 border-b border-[#22153A]">
+                    <div className="text-center bg-dark-purple p-6">
+                        <h3 className="text-gray text-sm font-normal pb-2 border-b border-border-color">
                             Report Bug
                         </h3>
-                        <p className="text-[#f0f0f0] text-sm font-normal mt-2 mb-4">
+                        <p className="text-white text-sm font-normal mt-2 mb-4">
                             Please describe the bug you've encountered
                         </p>
                         <textarea
                             value={bugDescription}
                             onChange={(e) => setBugDescription(e.target.value)}
                             placeholder="The bug I'm experiencing..."
-                            className="w-full min-h-[135px] bg-[#120721] border border-[#22153A] rounded-lg p-4 text-white resize-none outline-none placeholder:text-[#f0f0f0] placeholder:text-sm"
+                            className="w-full min-h-[135px] bg-dark-purple border-x border-y border-border-color rounded-lg p-3 text-white resize-none outline-none placeholder:text-secondary placeholder:text-sm"
                         />
                         <a
-                            className="flex items-center gap-2 text-[#f0f0f0] text-sm font-normal mb-6 hover:text-white"
+                            className="flex items-center gap-2 text-secondary text-sm font-normal mt-3 mb-6 hover:text-white"
                             href="https://t.me/spotnet_dev"
                             target="_blank"
                             rel="noopener noreferrer"
@@ -52,7 +52,7 @@ export function ReportBugModal({ onClose }) {
                         <Button
                             variant="secondary"
                             type="button"
-                            className="px-6 py-2 text-sm text-[#f0f0f0] border border-[#22153A] bg-transparent rounded-lg hover:bg-[#22153A]"
+                            className="px-6 py-2 text-sm text-white border-x border-y border-border-color bg-transparent rounded-lg hover:border-dark-purple"
                             onClick={(e) => {
                                 e.stopPropagation();
                                 onClose();
@@ -63,7 +63,7 @@ export function ReportBugModal({ onClose }) {
                         <Button
                             variant="primary"
                             type="submit"
-                            className="px-6 py-2 text-sm text-white bg-[#798795] rounded-lg hover:bg-[#5c6c7b]"
+                            className="px-6 py-2 text-sm text-white bg-[#798795] rounded-lg"
                         >
                             {mutation.isPending ? "Sending..." : "Send Report"}
                         </Button>

diff --git a/frontend/src/components/ui/balance-cards/BalanceCards.jsx b/frontend/src/components/ui/balance-cards/BalanceCards.jsx
@@ -26,7 +26,7 @@ const BalanceCards = ({ className }) => {
         {balances.map((balance) =>
           isMobile ? (
             <div
-              className="flex flex-col flex-1 items-center justify-center rounded-lg border border-bg-footer-divider-bg bg-dark-purple py-3.5 sm:gap-1"
+              className="flex flex-col flex-1 items-center justify-center rounded-lg border-x border-y border-bg-footer-divider-bg bg-dark-purple py-3.5 sm:gap-1"
               key={balance.title}
             >
               <div className="flex w-max items-center gap-2">
@@ -39,7 +39,7 @@ const BalanceCards = ({ className }) => {
             </div>
           ) : (
             <div
-              className="flex flex-col flex-1 items-center justify-center rounded-lg border border-bg-footer-divider-bg bg-dark-purple p-6 sm:gap-2"
+              className="flex flex-col flex-1 items-center justify-center rounded-lg border-x border-y border-bg-footer-divider-bg bg-dark-purple p-6 sm:gap-2"
               key={balance.title}
             >
               <div className="flex items-center gap-2">

diff --git a/frontend/src/components/ui/token-selector/TokenSelector.jsx b/frontend/src/components/ui/token-selector/TokenSelector.jsx
@@ -24,7 +24,7 @@ const TokenSelector = ({ selectedToken, setSelectedToken, className }) => {
             className={`relative w-full text-center rounded-lg p-2 transition-colors duration-300 cursor-pointer ${
               selectedToken === token.label
                 ? 'border-gradient-mask'
-                : 'border border-gray-300'
+                : 'border border-gray'
             }`}
             onClick={() => handleTokenChange(token)}
           >

diff --git a/frontend/src/globals.css b/frontend/src/globals.css
@@ -228,26 +228,53 @@ a.svelte-1mtuslq.svelte-1mtuslq {
 
 .border-gradient-mask {
   position: relative;
-  border: none; /* Remove the default border */
+  border: none;
+  /* Remove the default border */
 }
 
 .border-gradient-mask::after {
   content: '';
   position: absolute;
   inset: 0;
-  padding: 1px; /* Border thickness */
+  padding: 1px;
+  /* Border thickness */
   border-radius: inherit;
   background: linear-gradient(90deg, #49abd2 0%, #e01dee 100%);
-  -webkit-mask: 
+  -webkit-mask:
     conic-gradient(#000 0 0) content-box exclude,
     conic-gradient(#000 0 0);
-  mask: 
+  mask:
     conic-gradient(#000 0 0) content-box exclude,
     conic-gradient(#000 0 0);
   z-index: 0;
 }
 
-.border-gradient-mask > * {
+.border-gradient-mask>* {
   position: relative;
   z-index: 10;
+}
+
+.partnership-logo {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  animation: scroll 13s linear infinite; /* Infinite scroll */
+  width: calc(150px * 8 * 2); /* Adjust width for duplicated logos */
+}
+
+.partnership-logo > * {
+  flex-shrink: 0;
+  width: 150px;
+  height: 100px;
+  margin: 0 20px;
+}
+
+@keyframes scroll {
+  0% {
+    right: 0;
+  }
+  100% {
+    right: 100%;
+  }
 }
diff --git a/frontend/src/pages/documentation/Documentation.jsx b/frontend/src/pages/documentation/Documentation.jsx
@@ -202,14 +202,15 @@ const Documentation = () => {
 
   return (
     <div className="flex flex-row min-h-screen relative">
-      <div className="w-1/5">
+      <div className="w-[380px]">
         <Sidebar title="Table of Contents" items={tableOfContents} />
       </div>
 
       <div className="ml-4 flex-1 relative min-h-screen px-7 md:px-4 py-6 md:py-12">
         <h1 className="text-white text-4xl font-bold mt-16 mb-8">Spotnet Documentation</h1>
-
-        <Sections sections={sectionsData} />
+        <div className="ml-8">
+          <Sections sections={sectionsData} />
+        </div>
       </div>
 
       <ScrollButton />

diff --git a/frontend/src/pages/overview/Overview.jsx b/frontend/src/pages/overview/Overview.jsx
@@ -66,13 +66,13 @@ const OverviewPage = () => {
 
   return (
     <div className="min-h-screen flex flex-row text-white">
-      <div className="w-1/5">
+      <div className="w-[380px]">
         <Sidebar items={tableOfContents} title="Overview" />
       </div>
 
       <div className="ml-4 flex-1 relative min-h-screen px-7 md:px-4 py-6 md:py-12">
         <h1 className="text-white text-4xl font-bold mt-16 mb-8">Overview</h1>
-        <div className="mb-12">
+        <div className="ml-8 mb-12">
           <Sections sections={sectionsData} />
         </div>
       </div>

diff --git a/frontend/src/pages/spotnet/defi-spring/DefiSpring.jsx b/frontend/src/pages/spotnet/defi-spring/DefiSpring.jsx
@@ -98,13 +98,15 @@ export const DefiSpringPage = () => {
 
   return (
     <div className="flex flex-row min-h-screen relative pt-1">
-      <div className="w-1/5">
+      <div className="w-[380px]">
         <Sidebar title="Content" items={tableOfContents} />
       </div>
 
       <div className="ml-4 flex-1 relative min-h-screen px-7 md:px-4 py-6 md:py-12">
         <h1 className="text-white text-4xl font-bold mt-16 mb-8">DeFi Spring Documentation</h1>
-        <Sections sections={sectionsData} />
+        <div className="ml-8">
+          <Sections sections={sectionsData} />
+        </div>
       </div>
 
       <ScrollButton />

diff --git a/frontend/src/pages/terms-and-conditions/TermsAndConditions.jsx b/frontend/src/pages/terms-and-conditions/TermsAndConditions.jsx
@@ -61,13 +61,13 @@ const TermsAndConditionsPage = () => {
 
   return (
     <div className="flex flex-row min-h-screen relative text-white">
-      <div className="w-1/5">
+      <div className="w-[380px]">
         <Sidebar items={tableOfContents} title={'Content'} />
       </div>
 
       <div className="ml-4 flex-1 relative min-h-screen px-7 md:px-4 py-6 md:py-12">
         <h1 className="text-white text-4xl font-bold mt-16 mb-8">Terms & Conditions</h1>
-        <div className="">
+        <div className="ml-8">
           <Sections sections={sectionsData} />
         </div>
       </div>

diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -4,15 +4,6 @@ module.exports = {
   content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
   theme: {
     extend: {
-      animation: {
-        scroll: 'scroll 13s linear infinite',
-      },
-      keyframes: {
-        scroll: {
-          '0%': { transform: 'translateX(0)' },
-          '100%': { transform: 'translateX(-100%)' },
-        },
-      },
       colors: {
         primary: '#fff',
         'dashboard-bg': 'rgba(11, 12, 16, 1)',
@@ -78,6 +69,7 @@ module.exports = {
         'blue-pink-gradient-alt': 'linear-gradient(90deg, #49abd2 0%, #e01dee 100%)',
         'blue-pink-gradient-alt2': 'linear-gradient(90deg, #49abd2 100%, #e01dee 100%)',
         'card-bg-gradient': 'linear-gradient(135deg, rgba(116, 214, 253, 0.5) 0%, rgba(11, 12, 16, 0.5) 100%)',
+        'report-btn-bg-hover': 'linear-gradient(to right, rgba(147, 51, 234, 0.3), rgba(59, 130, 246, 0.3))',
       },
       boxShadow: {
         card: 'inset 4px 4px 9px 0 rgba(153, 234, 255, 0.25), 0 4px 4px 0 rgba(0, 0, 0, 0.15)',