style

dove-protocol · Nov 21, 2022 · e93763e · e93763e · vercel · Nov 21, 2022
1 parent d9fc1bb
commit e93763e
Show file tree

Hide file tree

Showing 11 changed files with 51 additions and 43 deletions.
diff --git a/components/DammTabContent.tsx b/components/DammTabContent.tsx
@@ -441,7 +441,7 @@ const DammTabContent = () => {
           </div>
           <div className="mb-2 flex w-full items-center justify-between rounded-sm border-l-2 border-sky-400 bg-gradient-to-r from-sky-400/5 to-transparent py-2 px-4">
             <div className="flex items-center">
-              <BiDollar className="mr-4 rounded-sm bg-black/20 p-1 text-2xl text-white" />
+              <BiDollar className="mr-4 rounded-sm border border-white/10 p-1 text-2xl text-white" />
               <p className="text-xs uppercase tracking-widest text-white">
                 {currencies[Field.CURRENCY_A]?.symbol}
               </p>
@@ -468,7 +468,7 @@ const DammTabContent = () => {
           </div>
           <div className="flex w-full items-center justify-between rounded-sm border-l-2 border-sky-400  bg-gradient-to-r from-sky-400/5 to-transparent py-2 px-4">
             <div className="flex items-center">
-              <BiDollar className="mr-4 rounded-sm bg-black/20 p-1 text-2xl text-white" />
+              <BiDollar className="mr-4 rounded-sm border border-white/10 p-1 text-2xl text-white" />
               <p className="text-xs uppercase tracking-widest text-white">
                 {currencies[Field.CURRENCY_B]?.symbol}
               </p>
@@ -498,15 +498,15 @@ const DammTabContent = () => {
       <Tabs.Content value="tab3">
         <TabContentContainer>
           <div className="mb-4 flex items-center">
-            <BiStats className="mr-4 rounded-sm bg-sky-400/10 p-2 text-4xl text-sky-400" />
+            <BiStats className="mr-4 rounded-sm border border-white/10 p-2 text-4xl text-white" />
             <div className="flex flex-col">
               <h4 className="text-white">Primary Reserves</h4>
               <p className="text-xs text-white/50">Main reserve balances</p>
             </div>
           </div>
           <div className="mb-2 flex w-full items-center justify-between rounded-sm border-l-2 border-sky-400  bg-gradient-to-r from-sky-400/5 to-transparent p-4">
             <div className="flex w-full items-center">
-              <BiDollar className="mr-4 rounded-sm bg-black/20 p-1 text-2xl text-white" />
+              <BiDollar className="mr-4 rounded-sm border border-white/10 p-1 text-2xl text-white" />
               <p className="text-xs uppercase tracking-widest text-white">
                 USDC
               </p>
@@ -518,7 +518,7 @@ const DammTabContent = () => {
 
           <div className="mb-2 flex w-full items-center justify-between rounded-sm border-l-2 border-sky-400  bg-gradient-to-r from-sky-400/5 to-transparent p-4">
             <div className="flex items-center">
-              <BiDollar className="mr-4 rounded-sm bg-black/20 p-1 text-2xl text-white" />
+              <BiDollar className="mr-4 rounded-sm border border-white/10 p-1 text-2xl text-white" />
               <p className="text-xs uppercase tracking-widest text-white">
                 USDT
               </p>
@@ -529,7 +529,7 @@ const DammTabContent = () => {
           </div>
           <div className="mb-2 flex w-full items-center justify-between rounded-sm border-l-2 border-sky-400  bg-gradient-to-r from-sky-400/5 to-transparent p-4">
             <div className="flex items-center">
-              <BiDollar className="mr-4 rounded-sm bg-black/20 p-1 text-2xl text-white" />
+              <BiDollar className="mr-4 rounded-sm border border-white/10 p-1 text-2xl text-white" />
               <p className="text-xs uppercase tracking-widest text-white">
                 DAMM-LP
               </p>
@@ -575,7 +575,7 @@ const DammTabContent = () => {
       <Tabs.Content value="tab5">
         <TabContentContainer>
           <div className="mb-4 flex items-center">
-            <BiStats className="mr-4 rounded-sm bg-sky-400/10 p-2 text-4xl text-sky-400" />
+            <BiStats className="mr-4 rounded-sm border border-white/10 p-2 text-4xl text-white" />
             <div className="flex flex-col">
               <h4 className="text-white">Sync to L2</h4>
               <p className="text-xs text-white/50">

diff --git a/components/InputWithBalance.tsx b/components/InputWithBalance.tsx
@@ -48,11 +48,11 @@ const InputWithBalance = ({
       <div className="absolute top-4 right-4 flex flex-col items-end">
         {currency && (
           <h4
-            className={`mb-2 flex h-fit items-center  rounded-sm border border-white/5 px-2 py-0.5 ${
+            className={`mb-2 flex h-fit items-center  rounded-sm border border-white/10 px-2 py-0.5 ${
               disabled ? "text-white/50" : "bg-black/10 text-white"
             }`}
           >
-            <BiDollar className="mr-2 rounded-sm bg-white/5 p-px" />
+            <BiDollar className="mr-2 rounded-sm bg-white/10 p-px" />
             {currency?.symbol}
           </h4>
         )}

diff --git a/components/InteractButton.tsx b/components/InteractButton.tsx
@@ -63,13 +63,16 @@ export const Button = ({
     <button
       disabled={disabled}
       onClick={onClick}
-      className="group flex h-16 w-full items-center justify-center rounded-sm border border-sky-400/50 bg-sky-400/5 transition duration-500 ease-in-out hover:shadow-none disabled:border-none disabled:bg-white/5 disabled:shadow-none"
+      className="group relative flex h-16 w-full items-center justify-center rounded-sm border-y border-sky-400 bg-gradient-to-t from-sky-400/5 to-transparent transition duration-500 ease-in-out hover:shadow-none disabled:border-none disabled:bg-white/5 disabled:from-transparent disabled:shadow-none"
     >
+      {!disabled && (
+        <div className="background-gradient-pattern absolute top-0 h-16 w-full opacity-50 gradient-mask-t-0" />
+      )}
       <p
         className={`transition duration-500 ease-in-out ${
           disabled
             ? "text-white/50 drop-shadow-none"
-            : "text-sky-400 group-hover:drop-shadow-soju"
+            : "font-normal text-white group-hover:drop-shadow-tabler"
         }`}
       >
         {text}

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -2,15 +2,18 @@ import { ConnectButton } from "@rainbow-me/rainbowkit";
 import React from "react";
 import { CustomConnectButton } from "./CustomConnectButton";
 import { FaGithub, FaTwitter } from "react-icons/fa";
+import { GiPeaceDove } from "react-icons/gi";
 
 const Navbar = () => {
   return (
-    <div className="fixed z-50 w-full">
-      <div className="flex w-full items-center justify-end space-x-4 px-8 py-8">
-        {/* <p className="text-white">dAmm</p> */}
-        <CustomConnectButton />
-        <FaGithub className="text-white/50" />
-        <FaTwitter className="text-white/50" />
+    <div className="fixed z-50 flex w-full justify-center">
+      <div className="flex w-full items-center justify-between px-8 py-8">
+        <GiPeaceDove className="text-3xl text-white" />
+        <div className="flex items-center space-x-4">
+          <CustomConnectButton />
+          <FaGithub className="text-white/50" />
+          <FaTwitter className="text-white/50" />
+        </div>
       </div>
     </div>
   );

diff --git a/components/SettingsTabContent.tsx b/components/SettingsTabContent.tsx
@@ -14,16 +14,14 @@ const SettingsTabContent = () => {
   return (
     <TabContentContainer>
       <div className="mb-4 flex items-center">
-        <BiCog className="mr-4 rounded-sm bg-sky-400/10 p-2 text-4xl text-sky-400" />
+        <BiCog className="mr-4 rounded-sm border border-white/10 p-2 text-4xl text-white" />
         <div className="flex flex-col">
           <h4 className="text-white">Settings</h4>
           <p className="text-xs text-white/50">Adjust advanced settings</p>
         </div>
       </div>
-      <div className="mb-2 flex w-full items-center justify-between rounded-sm border border-white/5 bg-white/5 p-4">
-        <p className="text-xs uppercase tracking-widest text-white/50">
-          Show Advanced
-        </p>
+      <div className="mb-2 flex w-full items-center justify-between rounded-sm border border-white/5 p-4">
+        <p className="text-white">Show Advanced</p>
         <Switch.Root
           className="relative h-8 w-16 rounded-sm border border-white/5 bg-black/10"
           checked={showAdvanced}
@@ -32,10 +30,8 @@ const SettingsTabContent = () => {
           <Switch.Thumb className="block h-6 w-6 translate-x-[34px] rounded-sm border border-white/5 transition ease-in-out rdx-state-checked:translate-x-1 rdx-state-checked:bg-white rdx-state-unchecked:bg-white/10" />
         </Switch.Root>
       </div>
-      <div className="flex w-full items-center justify-between rounded-sm border border-white/5 bg-white/5 p-4">
-        <p className="text-xs uppercase tracking-widest text-white/50">
-          Automatically Switch Networks
-        </p>
+      <div className="flex w-full items-center justify-between rounded-sm border border-white/5 p-4">
+        <p className="text-white">Automatically Switch Networks</p>
         <Switch.Root
           className="relative h-8 w-16 rounded-sm border border-white/5 bg-black/10"
           checked={isAutoSwitch}

diff --git a/components/SwapTabContent.tsx b/components/SwapTabContent.tsx
@@ -473,7 +473,7 @@ const SwapTabContent = () => {
       <Tabs.Content value="tab3">
         <TabContentContainer>
           <div className="mb-4 flex items-center">
-            <BiStats className="mr-4 rounded-sm bg-sky-400/10 p-2 text-4xl text-sky-400" />
+            <BiStats className="mr-4 rounded-sm border border-white/10 p-2 text-4xl text-white" />
             <div className="flex flex-col">
               <h4 className="text-white">Sync to L1</h4>
               <p className="text-xs text-white/50">Sync L2 balances to L1</p>
@@ -494,7 +494,7 @@ const SwapTabContent = () => {
           </p>
           <div className="mb-2 flex w-full items-center justify-between rounded-sm border-l-2 border-sky-400 bg-gradient-to-r from-sky-400/5 to-transparent p-4 py-2">
             <div className="flex items-center">
-              <BiDollar className="mr-4 rounded-sm bg-black/20 p-1 text-2xl text-white" />
+              <BiDollar className="mr-4 rounded-sm border border-white/10 p-1 text-2xl text-white" />
               <p className="text-xs uppercase tracking-widest text-white">
                 {currencies[Field.CURRENCY_A]?.symbol}
               </p>
@@ -505,7 +505,7 @@ const SwapTabContent = () => {
           </div>
           <div className="mb-2 flex w-full items-center justify-between rounded-sm border-l-2 border-sky-400 bg-gradient-to-r from-sky-400/5 to-transparent p-4 py-2">
             <div className="flex items-center">
-              <BiDollar className="mr-4 rounded-sm bg-black/20 p-1 text-2xl text-white" />
+              <BiDollar className="mr-4 rounded-sm border border-white/10 p-1 text-2xl text-white" />
               <p className="text-xs uppercase tracking-widest text-white">
                 {currencies[Field.CURRENCY_B]?.symbol}
               </p>
@@ -576,15 +576,15 @@ const SwapTabContent = () => {
       <Tabs.Content value="tab5">
         <TabContentContainer>
           <div className="mb-4 flex items-center">
-            <BiStats className="mr-4 rounded-sm bg-sky-400/10 p-2 text-4xl text-sky-400" />
+            <BiStats className="mr-4 rounded-sm border border-white/10 p-2 text-4xl text-white" />
             <div className="flex flex-col">
               <h4 className="text-white">Virtual Reserves</h4>
               <p className="text-xs text-white/50">Synced reserve balances</p>
             </div>
           </div>
           <div className="relative mb-2 flex w-full items-center justify-between rounded-sm  border-l-2 border-sky-400  bg-gradient-to-r from-sky-400/5 to-transparent p-4">
             <div className="flex items-center">
-              <BiDollar className="mr-4 rounded-sm bg-black/20 p-1 text-2xl text-white" />
+              <BiDollar className="mr-4 rounded-sm border border-white/5 p-1 text-2xl text-white" />
               <p className="text-xs uppercase tracking-widest text-white">
                 USDC
               </p>
@@ -595,7 +595,7 @@ const SwapTabContent = () => {
           </div>
           <div className="flex w-full items-center justify-between rounded-sm border-l-2 border-sky-400  bg-gradient-to-r from-sky-400/5 to-transparent p-4">
             <div className="flex items-center">
-              <BiDollar className="mr-4 rounded-sm bg-black/20 p-1 text-2xl text-white" />
+              <BiDollar className="mr-4 rounded-sm border border-white/5 p-1 text-2xl text-white" />
               <p className="text-xs uppercase tracking-widest text-white">
                 USDT
               </p>

diff --git a/components/layouts/Article.tsx b/components/layouts/Article.tsx
@@ -74,9 +74,7 @@ const Article = ({ children }: { children: React.ReactNode }) => {
         </Toast.Provider>
         <Navbar />
         {children}
-        <div className="absolute bottom-0 flex w-full items-center justify-center p-8">
-          <GiPeaceDove className="text-3xl text-white/10" />
-        </div>
+        <div className="absolute bottom-0 flex w-full items-center justify-center p-8"></div>
         {/* <div className="absolute bottom-0 flex w-full items-center justify-end space-x-2 p-8">
           <div className="h-2 w-2 rounded-full bg-green-400">
             <div className="h-2 w-2 animate-ping rounded-full bg-green-400"></div>

diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.3.1",
+    "tailwind-gradient-mask-image": "^1.0.0",
     "tailwindcss-radix": "^2.6.1",
     "tiny-invariant": "^1.3.1",
     "toformat": "^2.0.0",

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -52,7 +52,7 @@ export default function Home() {
         <div className="background-gradient absolute h-full w-[100vw] opacity-20">
           <div className="background-gradient-pattern" />
         </div>
-        <div className="relative flex min-h-screen w-full flex-col items-start justify-start pb-36 pt-36">
+        <div className="relative flex min-h-screen w-full flex-col items-start justify-start pb-36 pt-48">
           <div className="relative mb-4 flex w-full flex-col items-start">
             <div className="flex w-full flex-row space-x-4">
               <Tabs.Root
@@ -82,7 +82,7 @@ export default function Home() {
                   </Tabs.Trigger>
                   <Tabs.Trigger
                     value="settings"
-                    className="w-12 cursor-pointer rounded-sm rounded-b-none border border-b-0 border-white/5 bg-black/10 px-4 py-2 text-left transition duration-300 ease-linear hover:text-white focus:outline-none rdx-state-active:bg-[#313135] rdx-state-active:text-white rdx-state-inactive:text-white/50"
+                    className="w-12 cursor-pointer rounded-sm rounded-b-none border border-b-0 border-white/5 bg-black/10 px-4 py-2 text-left transition duration-300 ease-linear hover:text-white focus:outline-none rdx-state-active:bg-pita rdx-state-active:text-white rdx-state-inactive:text-white/50"
                   >
                     <BiCog className="" />
                   </Tabs.Trigger>

diff --git a/styles/globals.css b/styles/globals.css
@@ -1,6 +1,7 @@
 html,
 body {
   background-color: #000612;
+
   padding: 0;
   margin: 0;
   font-family: Satoshi, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
@@ -16,14 +17,19 @@ a {
   box-sizing: border-box;
 }
 
-.bg {
-  background: linear-gradient(138.16deg, #000612 -14.83%, #000000 92.59%);
+
+.radial {
+  background: radial-gradient(
+    farthest-side at 50% 50%,
+    rgb(255, 255, 255, 0.02),
+    rgba(0, 0, 0, 0)
+  );
 }
 
 .radial {
   background: radial-gradient(
-    farthest-side at 50% 100%,
-    rgb(255, 255, 255, 0.07),
+    farthest-side at 50% 50%,
+    rgb(255, 255, 255, 0.02),
     rgba(0, 0, 0, 0)
   );
 }
@@ -40,8 +46,8 @@ a {
 
 .background-gradient {
   -webkit-mask-image: radial-gradient(
-    farthest-side at 50% 0%,
-    rgba(255, 255, 255, 0.5),
+    farthest-side at 50% 50%,
+    rgba(255, 255, 255, 0.1),
     rgba(0, 0, 0, 0)
   );
   background-image: linear-gradient(90deg,#ffffff,#ffae33,1));

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -51,5 +51,6 @@ module.exports = {
     require("tailwindcss-radix")({
       variantPrefix: "rdx",
     }),
+    require("tailwind-gradient-mask-image"),
   ],
 };