Merge pull request #2 from convergence-rfq/itclan-dev

Itclan dev
convergence-rfq · Nov 5, 2024 · 31db810 · 31db810
2 parents d692769 + 8f98955
commit 31db810
Show file tree

Hide file tree

Showing 25 changed files with 119 additions and 95 deletions.
diff --git a/public/assets/logos/space/icon.png b/public/assets/logos/space/icon.png
diff --git a/public/assets/logos/space/logo.png b/public/assets/logos/space/logo.png
diff --git a/src/app/astronomy/page.tsx b/src/app/astronomy/page.tsx
@@ -8,17 +8,19 @@ export default function Astronomy() {
   return (
     <div className="flex flex-col justify-between min-h-screen">
       <Header />
-
-      <main className="flex items-center justify-center w-full">
-        <div className="w-full max-w-screen-xl min-h-[70vh] p-8 bg-white bg-opacity-20 backdrop-blur-md rounded-lg shadow-lg flex flex-col justify-center items-center"> {/* Aligns with Header's container */}
+
+      <main className="flex items-center justify-center w-full p-5">
+        <div className="w-full max-w-screen-xl min-h-[70vh] p-8  border-solid border-[1px] border-[#202629] backdrop-blur-md rounded-lg shadow-lg flex flex-col justify-center items-center">
+          {" "}
+          {/* Aligns with Header's container */}
           <h2
-            className={`${architype_bayer.className} p-4 text-xl md:text-4xl text-center`}
+            className={`${architype_bayer.className} text-white p-4 text-xl md:text-4xl text-center`}
           >
             What if we could leverage the power of the stars?
           </h2>
         </div>
       </main>
-      
+
       <Footer />
     </div>
   );

diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
@@ -35,11 +35,16 @@ function OrbitingMoonsSpinner() {
       </style>
       <div className="relative w-60 h-32 flex items-center justify-center">
         <div className="absolute w-12 h-12 bg-[#3E3172] rounded-full"></div>
-        <div className="moon" style={{ transformOrigin: 'center 40px' }}></div>
-        <div className="moon" style={{ transformOrigin: 'center -40px', animationDelay: '2s' }}></div>
+        <div className="moon" style={{ transformOrigin: "center 40px" }}></div>
+        <div
+          className="moon"
+          style={{ transformOrigin: "center -40px", animationDelay: "2s" }}
+        ></div>
       </div>
       <div className="mt-8 mb-8 text-center">
-        <p className={`text-[#3E3172] text-4xl font-bold ${architype_bayer.className}`}>
+        <p
+          className={`text-[#3E3172] text-4xl font-bold ${architype_bayer.className}`}
+        >
           Loading your orders, please wait...
         </p>
       </div>
@@ -86,21 +91,27 @@ export default function ListOrders() {
 
   return (
     <BasicPage>
-      <div className="w-full min-h-[70vh] p-8 bg-white bg-opacity-20 backdrop-blur-md rounded-lg shadow-lg flex flex-col justify-center items-center">
+      <div className="w-full min-h-[70vh] p-8  border-solid border-[1px] border-[#202629]  backdrop-blur-md rounded-lg shadow-lg flex flex-col justify-center items-center">
         {!connected && (
-          <div className={`font-bold text-4xl flex justify-center items-center ${architype_bayer.className}`}>
+          <div
+            className={`font-bold text-white text-4xl flex justify-center items-center ${architype_bayer.className}`}
+          >
             <p>Please connect your wallet to view your orders.</p>
           </div>
         )}
 
         {connected && isLoading && (
-          <div className={`font-bold text-4xl flex justify-center items-center ${architype_bayer.className}`}>
+          <div
+            className={`font-bold text-white text-4xl flex justify-center items-center ${architype_bayer.className}`}
+          >
             <OrbitingMoonsSpinner />
           </div>
         )}
 
         {connected && !orders.length && !isLoading && (
-          <div className={`font-bold text-4xl flex justify-center items-center ${architype_bayer.className}`}>
+          <div
+            className={`font-bold text-white text-4xl flex justify-center items-center ${architype_bayer.className}`}
+          >
             <p>No orders found.</p>
           </div>
         )}

diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -55,14 +55,7 @@ h4 {
 
 body {
   color: var(--purple-900);
-  background: var(--cream-200);
-  background: linear-gradient(
-    287deg,
-    rgba(193, 255, 255, 1) 0%,
-    rgba(227, 224, 237, 1) 25%,
-    rgba(189, 179, 210, 1) 65%,
-    rgba(227, 224, 237, 1) 100%
-  );
+  background: #080c0e;
 }
 
 @layer utilities {
@@ -210,3 +203,18 @@ body {
     transform: rotateY(360deg);
   }
 }
+.ic_table_wrap tr {
+  border: none;
+}
+.ic_table_wrap tbody tr:nth-child(odd) {
+  background: #202629;
+}
+.ic_table_wrap tbody tr:hover {
+  background: #202629;
+}
+.token_select_modal_header button svg {
+  color: #fff;
+}
+.token_select_modal_header button:hover svg {
+  color: #333;
+}
diff --git a/src/app/icon.ico b/src/app/icon.ico
diff --git a/src/app/icon.png b/src/app/icon.png
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -18,9 +18,9 @@ import React from "react";
 export const metadata: Metadata = {
   title: "Trade Different with Urani",
   description: "Trade Different with Urani",
-  icons: {
-    icon: "/assets/logos/space/space_logo_tiny.png",
-  },
+  // icons: {
+  //   icon: "/assets/logos/space/space_logo_tiny.png",
+  // },
 };
 
 export const viewport: Viewport = {
@@ -51,7 +51,7 @@ export default function RootLayout({
           <AppWalletProvider>{children}</AppWalletProvider>
         </MantineThemeProvider>
       </body>
-       <GoogleAnalytics gaId="G-EPFPL5GD6D" /> 
+      <GoogleAnalytics gaId="G-EPFPL5GD6D" />
     </html>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -22,7 +22,7 @@ export default async function Home() {
   const env = await fetchEnvVars();
 
   return (
-    <div className="flex flex-col justify-between min-h-screen">
+    <div className="flex flex-col justify-between min-h-screen aaa">
       <Header />
       <main className="flex items-center justify-center">
         <EnvProvider env={env}>

diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx
@@ -8,41 +8,44 @@ export default function Footer() {
           </div>
         </div>
         <div className="flex flex-col-reverse sm:flex-row items-center justify-between">
-          <a
-            href="https://www.urani.trade"
-            rel="noopener noreferrer"
-          >
+          <a href="https://www.urani.trade" rel="noopener noreferrer">
             <div className="flex items-center justify-between">
-              <span className="text-sm sm:text-base">
-                <b>Back to urani.trade</b>
+              <span className="text-sm sm:text-base text-white">
+                <b>Back to convergence.trade</b>
               </span>
             </div>
           </a>
           <div className="flex flex-col sm:flex-row items-center order-2 sm:order-1">
             <div className="flex sm:justify-center items-center mb-8 sm:mb-0 ">
               <a
-                href="https://github.com/urani-trade"
-                className="hover:underline text-sm sm:text-base sm:mr-4"
+                href="https://github.com/convergence-rfq"
+                className="text-white hover:underline text-sm sm:text-base sm:mr-4"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <span><b>Developers</b></span>
+                <span>
+                  <b>Developers</b>
+                </span>
               </a>
               <a
                 href="https://www.urani.trade/terms/conditions"
-                className="hover:underline text-sm sm:text-base sm:mr-4"
+                className="text-white hover:underline text-sm sm:text-base sm:mr-4"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <span><b>Terms</b></span>
+                <span>
+                  <b>Terms</b>
+                </span>
               </a>
               <a
                 href="https://www.urani.trade/terms/privacy"
-                className="hover:underline text-sm sm:text-base sm:mr-4"
+                className="text-white hover:underline text-sm sm:text-base sm:mr-4"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <span><b>Privacy</b></span>
+                <span>
+                  <b>Privacy</b>
+                </span>
               </a>
             </div>
           </div>

diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import { 
-  CustomFlowbiteTheme, 
-  Flowbite, 
-  Navbar,
-  } from "flowbite-react";
+import { CustomFlowbiteTheme, Flowbite, Navbar } from "flowbite-react";
 
 import Image from "next/image";
 import Link from "next/link";
@@ -94,25 +90,23 @@ export default function Header() {
     <header>
       <Flowbite theme={{ theme: customTheme }}>
         <Navbar fluid>
-          <Navbar.Brand as={Link} href="https://urani.trade/">
+          <Navbar.Brand as={Link} href="/">
             <div className="relative flex w-full items-center justify-between">
               <Image
                 className="relative mr-14"
-                src="/assets/logos/space/space_logo_tiny.png"
-                alt="Urani Logo"
-                width={40}
-                height={40}
+                src="/assets/logos/space/logo.png"
+                alt="Logo"
+                width={170}
+                height={30}
                 priority
               />
             </div>
           </Navbar.Brand>
           <Navbar.Toggle />
           <Navbar.Collapse>
-
-
             <div className="relative group text-purple font-bold text-2xl py-2 pl-3 pr-4 md:p-0">
-              <Navbar.Link as={Link} href="https://swap.urani.trade/">
-                <div className="relative group text-purple font-bold text-2xl">
+              <Navbar.Link as={Link} href="/">
+                <div className="relative group text-white font-medium text-xl">
                   <span>Swap</span>
                   <Underscore />
                 </div>
@@ -122,7 +116,7 @@ export default function Header() {
 
             <div className="relative group text-purple font-bold text-2xl py-2 pl-3 pr-4 md:p-0">
               <Navbar.Link as={Link} href="/dashboard">
-                <div className="relative group text-purple font-bold text-2xl">
+                <div className="relative group text-white font-medium text-xl">
                   <span>Dashboard</span>
                   <Underscore />
                 </div>
@@ -132,7 +126,7 @@ export default function Header() {
 
             <div className="relative group text-purple font-bold text-2xl py-2 pl-3 pr-4 md:p-0">
               <Navbar.Link as={Link} href="/astronomy">
-                <div className="relative group text-purple font-bold text-2xl">
+                <div className="relative group text-white font-medium text-xl">
                   <span>Astronomy</span>
                   <Underscore />
                 </div>

diff --git a/src/components/layout/SwapWidget.tsx b/src/components/layout/SwapWidget.tsx
@@ -16,7 +16,7 @@ export default function SwapWidget() {
     useSwap();
 
   return (
-    <div className="sm:w-[600px] min-h-[400px] mx-0 md:mx-auto my-0 mb-4 px-4 md:px-6 py-8 bg-white rounded-lg shadow-lg dark:bg-zinc-800 grow sm:grow-0">
+    <div className="sm:w-[600px] min-h-[400px] mx-0 md:mx-auto my-0 mt-8 mb-4 px-4 md:px-6 py-8 bg-[#080C0E] rounded-lg border-solid border-[1px] border-[#213C37]">
       <div className="w-full flex flex-col items-center justify-center text-purple">
         <WidgetTitle />
         {orderStatus === "INCOMPLETE" && (

diff --git a/src/components/trade/InverterButton.tsx b/src/components/trade/InverterButton.tsx
@@ -14,7 +14,7 @@ export default function InverterButton({
   return (
     <div className="text-center -my-6 text-xs flex justify-center items-center">
       <button
-        className="shadow-lg rounded-xl text-3xl text-purple-medium border-2 border-purple-medium bg-white hover:text-black hover:bg-cyan hover:border-black transition-all h-12 w-12 flex items-center justify-center z-10"
+        className="shadow-lg rounded-[50%] text-3xl text-cyan  bg-[#191C1E] hover:text-black hover:bg-cyan hover:border-black transition-all h-[50px] w-[50px] flex items-center justify-center z-10"
         onClick={onInvert}
       >
         {isLoading ? (

diff --git a/src/components/trade/TokenSelector.tsx b/src/components/trade/TokenSelector.tsx
@@ -30,7 +30,7 @@ export default function TokenSelector({
 
   return (
     <>
-      <div className="rounded-2xl border-2 border-cream-light hover:border-cyan bg-cream-light selection:text-purple-medium selection:bg-purple-medium-dark">
+      <div className="rounded-2xl border-[1px]   border-[#202629] hover:border-cyan selection:text-purple-medium selection:bg-purple-medium-dark">
         <NumberInput
           label={label}
           aria-label="Enter Amount"
@@ -46,14 +46,14 @@ export default function TokenSelector({
           onChange={setInputValue}
           placeholder="0.00"
           classNames={{
-            label: "ml-4 mt-4 text-sm font-bold text-purple",
+            label: "ml-4 mt-4 text-sm font-bold text-white",
             section: "ml-2 md:ml-4 w-auto -mt-24 sm:-mt-0",
             input:
-              "text-right text-purple pr-3 rounded-2xl text-xl sm:text-3xl border-0 focus:ring-0 focus:border-0 md:min-h-20 bg-transparent mt-12 sm:mt-0",
+              "text-right text-white pr-3 rounded-2xl text-xl sm:text-3xl border-0 focus:ring-0 focus:border-0 md:min-h-20 bg-transparent mt-12 sm:mt-0",
           }}
         />
         {convertedToUSD ? (
-          <div className="text-xs text-text-purple text-right mr-3 mb-3">
+          <div className="text-xs text-white text-right mr-3 mb-3">
             ≈ $ {convertedToUSD || 0}
           </div>
         ) : null}

diff --git a/src/components/trade/TokenSelectorButton.tsx b/src/components/trade/TokenSelectorButton.tsx
@@ -13,7 +13,7 @@ export default function TokenSelectorButton({
   return (
     <button
       onClick={onClick}
-      className="flex justify-center items-center text-center font-medium rounded-xl bg-white hover:bg-cyan hover:text-black transition-all px-3 py-1 shadow select-none text-purple min-h-11 min-w-32"
+      className="flex justify-center items-center text-center font-medium rounded-xl bg-[#262E34] hover:bg-cyan hover:text-black transition-all px-3 py-1 shadow select-none text-white min-h-11 min-w-32"
     >
       {!token ? (
         "Select a token"

diff --git a/src/components/trade/WidgetTabs.tsx b/src/components/trade/WidgetTabs.tsx
@@ -8,22 +8,26 @@ export default function WidgetTabs({
   setSelectedTab,
 }: WidgetTabsProps) {
   return (
-    <div className="flex w-full font-bold cursor-pointer text-xl mb-4 justify-between">
-      <div className="flex">
+    <div className="flex w-full font-medium cursor-pointer text-xl mb-4 justify-between">
+      <div className="flex px-4 py-2 rounded-[60px] border-solid border-[1px] border-[#202629] w-[100%]">
+        {/* custom bg gradient */}
+
         <div
-          className={`${
-            selectedTab === "market" &&
-            "text-purple-medium border-b-2 border-purple-medium"
-          } text-base mr-4 flex items-center`}
+          className={` text-base mr-4 flex items-center  rounded-3xl px-6 py-2 h-auto   ${
+            selectedTab === "market"
+              ? "text-[#080C0E]  bg-cyan"
+              : "bg-[#202629] text-[#AEB9B8]"
+          }`}
           onClick={() => setSelectedTab("market")}
         >
           Market Order
         </div>
         <div
-          className={`${
-            selectedTab === "limit" &&
-            "text-purple-medium border-b-2 border-purple-medium"
-          } text-base mr-4`}
+          className={` text-base mr-4  rounded-3xl px-6 py-2 h-auto   ${
+            selectedTab === "limit"
+              ? "text-[#080C0E]  bg-cyan"
+              : "bg-[#202629] text-[#AEB9B8]"
+          }`}
           onClick={() => setSelectedTab("limit")}
         >
           Limit Order

diff --git a/src/components/trade/WidgetTitle.tsx b/src/components/trade/WidgetTitle.tsx
@@ -3,10 +3,10 @@ import Image from "next/image";
 export default function WidgetTitle() {
   return (
     <div className="flex relative">
-      <div className="text-purple font-bold flex items-center text-3xl mb-2 md:mb-4 select-none">
-        Urani
+      <div className="text-white font-bold flex items-center text-3xl mb-3 md:mb-6 select-none">
+        Convergence
         <Image
-          src="/assets/logos/space/space_logo_tiny.png"
+          src="/assets/logos/space/icon.png"
           className="w-12 h-12 mx-4 spin"
           alt=""
           width={48}

diff --git a/src/components/trade/limit/LimitPrice.tsx b/src/components/trade/limit/LimitPrice.tsx
@@ -15,7 +15,7 @@ export default function LimitPrice({
   label = "Limit price",
 }: LimitPriceProps) {
   return (
-    <div className="rounded-2xl border-2 border-cream-light hover:border-cyan bg-cream-light selection:text-purple-medium selection:bg-purple-medium-dark">
+    <div className="rounded-2xl border-[1px] border-[#202629] hover:border-cyan  selection:text-purple-medium selection:bg-purple-medium-dark">
       <NumberInput
         aria-label={label}
         variant="unstyled"
@@ -34,9 +34,9 @@ export default function LimitPrice({
         placeholder="0.00"
         classNames={{
           section: "-mt-20 md:-mt-24 mr-2 w-auto",
-          label: "ml-4 mt-4 text-sm font-bold text-purple",
+          label: "ml-4 mt-4 text-sm font-bold text-white",
           input:
-            "text-right text-purple pr-3 rounded-2xl text-xl sm:text-3xl border-0 focus:ring-0 focus:border-0 md:min-h-20 bg-transparent relative z-10",
+            "text-right text-white pr-3 rounded-2xl text-xl sm:text-3xl border-0 focus:ring-0 focus:border-0 md:min-h-20 bg-transparent relative z-10",
         }}
       />
     </div>