refactor: update primary color and transfer border radius

helix-bridge · Mar 27, 2024 · f790f16 · f790f16
1 parent 5ae7711
commit f790f16
Show file tree

Hide file tree

Showing 17 changed files with 26 additions and 26 deletions.
diff --git a/public/images/bridge/helix-horizontal.svg b/public/images/bridge/helix-horizontal.svg
diff --git a/public/images/logo.svg b/public/images/logo.svg
diff --git a/public/images/my.svg b/public/images/my.svg
diff --git a/public/images/notification/progress.svg b/public/images/notification/progress.svg
diff --git a/public/images/overview.svg b/public/images/overview.svg
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -73,7 +73,7 @@ body {
 
 /* Page header loading bar */
 .loading-bar {
-  background: linear-gradient(90deg, #ffffff 35%, #00b2ff 50%, #ffffff 65%);
+  background: linear-gradient(90deg, #ffffff 35%, #0085FF 50%, #ffffff 65%);
   background-position: 100% 50%;
   background-size: 40% 100%;
   animation: bar-loading 2.4s linear infinite;

diff --git a/src/app/icon.svg b/src/app/icon.svg
diff --git a/src/components/balance-input.tsx b/src/components/balance-input.tsx
@@ -146,7 +146,7 @@ export function BalanceInput({
 
   return (
     <div
-      className={`normal-input-wrap relative flex flex-col rounded-middle bg-inner px-small py-small lg:px-middle ${
+      className={`normal-input-wrap relative flex flex-col rounded-xl bg-inner px-small py-small lg:px-middle ${
         compact ? "lg:py-middle" : ""
       } ${value.valid ? "valid-input-wrap border-transparent" : "invalid-input-wrap"}`}
     >

diff --git a/src/components/bridge-select.tsx b/src/components/bridge-select.tsx
@@ -11,7 +11,7 @@ interface Props {
 export default function BridgeSelect({ value, options = [], onChange = () => undefined }: Props) {
   return (
     <Select
-      labelClassName="bg-inner p-middle flex items-center justify-between rounded-middle transition-transform lg:active:translate-y-1"
+      labelClassName="bg-inner p-middle flex items-center justify-between rounded-xl transition-transform lg:active:translate-y-1"
       childClassName="bg-inner p-middle flex flex-col rounded-middle gap-small border border-component"
       label={<span className="text-sm font-medium text-white">{bridgeName(value)}</span>}
       placeholder={<span className="text-sm font-medium text-slate-400">Select a bridge</span>}

diff --git a/src/components/chain-select.tsx b/src/components/chain-select.tsx
@@ -25,7 +25,7 @@ export default function ChainSelect({
 }: Props) {
   return (
     <Select
-      labelClassName={`gap-small rounded-middle flex items-center justify-between transition active:translate-y-1 ${className}`}
+      labelClassName={`gap-small rounded-xl flex items-center justify-between transition active:translate-y-1 ${className}`}
       childClassName={`bg-inner flex flex-col rounded-middle max-h-60 overflow-y-auto border border-component ${
         compact ? "py-small" : "p-middle"
       }`}

diff --git a/src/components/transfer-action.tsx b/src/components/transfer-action.tsx
@@ -123,7 +123,7 @@ function Button({
       kind="primary"
       busy={busy}
       disabled={disabled}
-      className="flex h-10 items-center justify-center rounded-middle"
+      className="flex h-11 items-center justify-center rounded-xl"
       onClick={onClick}
     >
       <span className="text-base font-medium text-white">{children}</span>

diff --git a/src/components/transfer-info.tsx b/src/components/transfer-info.tsx
@@ -49,7 +49,7 @@ export default function TransferInfo({ fee, bridge, transferLimit: propTransferL
   }, [bridge]);
 
   return (
-    <div className="flex flex-col gap-small rounded-middle bg-inner p-middle">
+    <div className="flex flex-col gap-small rounded-xl bg-inner p-middle">
       <Item label="Estimated Arrival Time" value={bridge?.formatEstimateTime()} />
       {bridge?.getCategory().startsWith("xtoken") ? null : (
         <Item

diff --git a/src/components/transfer.tsx b/src/components/transfer.tsx
@@ -71,7 +71,7 @@ export default function Transfer() {
       (sourceChain?.network === "ethereum" && targetChain?.network === "darwinia-dvm")
     ) {
       return (
-        <div className="flex flex-wrap items-center justify-center rounded-middle bg-inner p-middle text-center text-sm font-medium text-app-orange">
+        <div className="flex flex-wrap items-center justify-center rounded-xl bg-inner p-middle text-center text-sm font-medium text-app-orange">
           <span>
             {`Due to the Ethereum upgrade, the Darwinia<>Ethereum bridge is temporarily unavailable. Please use the official`}
             &nbsp;