Rename middle to medium of tailwind css variable (#651)

src/app/error.tsx

@@ -9,7 +9,7 @@ export default function Error({ error, reset }: { error: Error; reset: () => voi
 
   return (
     <main className="app-main flex items-center justify-center">
-      <div className="flex w-fit flex-col items-start gap-middle">
+      <div className="flex w-fit flex-col items-start gap-medium">
         <h2 className="text-base font-medium text-white">Oops, something went wrong !</h2>
         <button
           onClick={reset}

src/app/globals.css

@@ -41,15 +41,15 @@ body {
 
   /* Page */
   .page-container {
-    @apply max-w-8xl w-full mx-auto px-middle py-5;
+    @apply max-w-8xl w-full mx-auto px-medium py-5;
   }
 
   /* User */
   .user-connect-wallet {
-    @apply flex h-9 shrink-0 items-center gap-middle rounded-middle bg-primary px-large transition lg:hover:bg-primary/80 lg:active:translate-y-1;
+    @apply flex h-9 shrink-0 items-center gap-medium rounded-medium bg-primary px-large transition lg:hover:bg-primary/80 lg:active:translate-y-1;
   }
   .user-dropdown-item {
-    @apply inline-flex items-center gap-middle rounded-middle px-middle py-small text-start transition hover:bg-white/10 lg:active:translate-y-1;
+    @apply inline-flex items-center gap-medium rounded-medium px-medium py-small text-start transition hover:bg-white/10 lg:active:translate-y-1;
   }
 
   .button {

src/app/not-found.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 export default function NotFound() {
   return (
     <main className="app-main flex items-center justify-center">
-      <div className="flex w-fit flex-col items-start gap-middle">
+      <div className="flex w-fit flex-col items-start gap-medium">
         <h2 className="text-base font-medium text-white">Not Found !</h2>
         <p className="text-sm font-normal text-white">Could not find requested resource</p>
         <Link href="/" className="text-sm font-normal text-primary hover:underline">

src/components/address-input.tsx

@@ -23,7 +23,7 @@ export default function AddressInput({ value, placeholder, className, onChange =
 
   return (
     <div
-      className={`normal-input-wrap relative px-small lg:px-middle ${
+      className={`normal-input-wrap relative px-small lg:px-medium ${
         value.valid ? "valid-input-wrap" : "invalid-input-wrap"
       } ${className}`}
     >

src/components/balance-input.tsx

@@ -151,8 +151,8 @@ export function BalanceInput({
 
   return (
     <div
-      className={`normal-input-wrap relative flex flex-col rounded-middle bg-inner px-small py-small lg:px-middle ${
-        compact ? "lg:py-middle" : ""
+      className={`normal-input-wrap relative flex flex-col rounded-medium bg-inner px-small py-small lg:px-medium ${
+        compact ? "lg:py-medium" : ""
       } ${value.valid ? "valid-input-wrap border-transparent" : "invalid-input-wrap"}`}
     >
       <div className="flex items-center justify-between gap-small">
@@ -181,7 +181,7 @@ export function BalanceInput({
             </button>
           ) : null
         ) : (
-          <div className="flex shrink-0 items-center gap-middle self-end">
+          <div className="flex shrink-0 items-center gap-medium self-end">
             {token ? (
               <div className="flex shrink-0 items-center gap-small">
                 <Image width={32} height={32} alt="Token" src={getTokenLogoSrc(token.logo)} className="rounded-full" />

src/components/bridge-select.tsx

@@ -11,8 +11,8 @@ 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"
-      childClassName="bg-inner p-middle flex flex-col rounded-middle gap-small border border-component"
+      labelClassName="bg-inner p-medium flex items-center justify-between rounded-medium transition-transform lg:active:translate-y-1"
+      childClassName="bg-inner p-medium flex flex-col rounded-medium 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>}
       sameWidth
@@ -27,14 +27,14 @@ export default function BridgeSelect({ value, options = [], onChange = () => und
               onClick={() => {
                 onChange(c);
               }}
-              className="rounded-middle bg-component px-middle py-small text-start text-sm font-medium text-white transition-colors hover:bg-white/10"
+              className="rounded-medium bg-component px-medium py-small text-start text-sm font-medium text-white transition-colors hover:bg-white/10"
             >
               {bridgeName(c) || "-"}
             </button>
           );
         })
       ) : (
-        <div className="rounded-middle bg-component px-middle py-small">
+        <div className="rounded-medium bg-component px-medium py-small">
           <span className="text-sm font-medium text-white/50">No data</span>
         </div>
       )}

src/components/chain-identity.tsx

@@ -7,7 +7,7 @@ export default function ChainIdentity() {
   const config = getChainConfig(chain?.id);
 
   return chain ? (
-    <div className="hidden h-9 max-w-[9rem] items-center gap-middle rounded-full border border-primary px-middle lg:flex">
+    <div className="hidden h-9 max-w-[9rem] items-center gap-medium rounded-full border border-primary px-medium lg:flex">
       {config ? (
         <Image
           width={20}

src/components/chain-select.tsx

@@ -25,13 +25,13 @@ export default function ChainSelect({
 }: Props) {
   return (
     <Select
-      labelClassName={`gap-small rounded-middle 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"
+      labelClassName={`gap-small rounded-medium flex items-center justify-between transition active:translate-y-1 ${className}`}
+      childClassName={`bg-inner flex flex-col rounded-medium max-h-60 overflow-y-auto border border-component ${
+        compact ? "py-small" : "p-medium"
       }`}
       label={
         value ? (
-          <div className="flex items-center gap-middle truncate">
+          <div className="flex items-center gap-medium truncate">
             {compact ? null : (
               <Image
                 alt="Chain"
@@ -59,7 +59,7 @@ export default function ChainSelect({
               <button
                 key={option.id}
                 onClick={() => onChange(option)}
-                className="flex items-center gap-middle px-large py-2 text-start transition-colors hover:bg-white/10"
+                className="flex items-center gap-medium px-large py-2 text-start transition-colors hover:bg-white/10"
               >
                 <Image
                   width={20}
@@ -77,7 +77,7 @@ export default function ChainSelect({
             {options.map((option) => (
               <button
                 key={option.id}
-                className="flex w-36 shrink-0 items-center gap-small truncate rounded-middle bg-component px-2 py-1 transition-colors hover:bg-white/20"
+                className="flex w-36 shrink-0 items-center gap-small truncate rounded-medium bg-component px-2 py-1 transition-colors hover:bg-white/20"
                 onClick={() => onChange(option)}
               >
                 <Image

src/components/faucet.tsx

@@ -149,7 +149,7 @@ export default function Faucet() {
 
 function Item({ value, token }: { value: bigint; token?: Token }) {
   return (
-    <div className="flex items-center justify-between rounded-middle bg-inner px-middle py-middle">
+    <div className="flex items-center justify-between rounded-medium bg-inner px-medium py-medium">
       <span className="text-sm font-medium">{token && formatBalance(value, token.decimals)}</span>
       <span className="text-sm font-medium">{token?.symbol}</span>
     </div>

src/components/fee-rate-input.tsx

@@ -32,7 +32,7 @@ export default function FeeRateInput({ isV3, placeholder, value, onChange = () =
 
   return (
     <div
-      className={`normal-input-wrap relative flex items-center justify-between gap-small rounded-middle bg-inner p-small lg:p-middle ${
+      className={`normal-input-wrap relative flex items-center justify-between gap-small rounded-medium bg-inner p-small lg:p-medium ${
         value.valid ? "valid-input-wrap border-transparent" : "invalid-input-wrap"
       }`}
     >

src/components/footer.tsx

@@ -25,13 +25,13 @@ export default function Footer() {
 
   return (
     <div className="app-footer w-full">
-      <div className="mx-auto flex h-full max-w-8xl shrink-0 items-center justify-center px-middle">
+      <div className="mx-auto flex h-full max-w-8xl shrink-0 items-center justify-center px-medium">
         {/* Copyright */}
         <span className="text-sm font-medium text-white/50">{`© ${new Date().getFullYear()} Helix Bridge`}</span>
 
         <div className="mx-3 h-4 w-[1px] bg-white/30 lg:mx-5 lg:bg-transparent" />
 
-        <div className="flex shrink-0 items-center gap-middle lg:gap-5">
+        <div className="flex shrink-0 items-center gap-medium lg:gap-5">
           <Link
             className="text-sm font-medium text-white/50 transition hover:text-white active:scale-95"
             href="/records"

src/components/header.tsx

@@ -33,11 +33,11 @@ export default function Header() {
   return (
     <>
       <div className="app-header fixed left-0 top-0 z-10 w-full border-b border-b-white/25 bg-app-bg lg:border-b-transparent">
-        <div className="mx-auto flex h-full max-w-8xl items-center justify-between px-middle">
+        <div className="mx-auto flex h-full max-w-8xl items-center justify-between px-medium">
           {/* Left */}
           <div className="flex items-center gap-5">
             {/* Logo */}
-            <div className="flex items-center gap-middle">
+            <div className="flex items-center gap-medium">
               <Link href="/">
                 <Image width={90} height={25} alt="Logo" src="/images/logo.svg" />
               </Link>
@@ -49,29 +49,29 @@ export default function Header() {
             </div>
 
             {/* Navigations */}
-            <div className="hidden items-center gap-middle lg:flex">
+            <div className="hidden items-center gap-medium lg:flex">
               {navigationsConfig.map(({ href, label, external, soon, disabled }) =>
                 external ? (
                   <a
                     rel="noopener noreferrer"
                     target="_blank"
                     href={href}
                     key={label}
-                    className={`rounded-middle px-3 py-1 text-base font-bold transition hover:bg-white/10 active:translate-y-1 ${
+                    className={`rounded-medium px-3 py-1 text-base font-bold transition hover:bg-white/10 active:translate-y-1 ${
                       pathname === href ? "text-primary underline" : "text-white"
                     }`}
                   >
                     {label}
                   </a>
                 ) : soon || disabled ? (
                   <Tooltip key={label} content={soon ? "Coming soon" : "This feature is temporarily under maintenance"}>
-                    <span className="rounded-middle px-3 py-1 text-base font-bold text-white/50">{label}</span>
+                    <span className="rounded-medium px-3 py-1 text-base font-bold text-white/50">{label}</span>
                   </Tooltip>
                 ) : (
                   <Link
                     key={label}
                     href={href}
-                    className={`rounded-middle px-3 py-1 text-base font-bold transition-all hover:bg-white/10 active:translate-y-1 ${
+                    className={`rounded-medium px-3 py-1 text-base font-bold transition-all hover:bg-white/10 active:translate-y-1 ${
                       pathname === href ? "text-primary underline underline-offset-8" : "text-white"
                     }`}
                   >
@@ -83,7 +83,7 @@ export default function Header() {
           </div>
 
           {/* Right */}
-          <div className="hidden items-center gap-middle lg:flex">
+          <div className="hidden items-center gap-medium lg:flex">
             <ChainIdentity />
             <HistoryNav />
             <User placement="bottom-end" prefixLength={14} suffixLength={10} />

src/components/lnrelayers-overview.tsx

@@ -55,7 +55,7 @@ export default function LnRelayersOverview({ bridgeVersion }: Props) {
 
   return (
     <div>
-      <div className="mb-5 flex flex-col items-start justify-between gap-middle lg:flex-row lg:items-center">
+      <div className="mb-5 flex flex-col items-start justify-between gap-medium lg:flex-row lg:items-center">
         <Search
           className="w-full lg:w-[21.5rem]"
           placeholder="Search by address"
@@ -68,10 +68,10 @@ export default function LnRelayersOverview({ bridgeVersion }: Props) {
         />
 
         <div className="flex items-center gap-small lg:gap-5">
-          <div className="flex items-center gap-middle">
+          <div className="flex items-center gap-medium">
             <span className="hidden font-medium text-white lg:inline">From</span>
             <ChainSelect
-              className="w-40 border border-white/20 px-middle py-[7px]"
+              className="w-40 border border-white/20 px-medium py-[7px]"
               placeholder="Source chain"
               options={defaultSourceChains}
               onChange={(value) => {
@@ -83,10 +83,10 @@ export default function LnRelayersOverview({ bridgeVersion }: Props) {
               value={sourceChain}
             />
           </div>
-          <div className="flex items-center gap-middle">
+          <div className="flex items-center gap-medium">
             <span className="hidden font-medium text-white lg:inline">To</span>
             <ChainSelect
-              className="w-40 border border-white/20 px-middle py-[7px]"
+              className="w-40 border border-white/20 px-medium py-[7px]"
               placeholder="Target chain"
               options={getLnBridgeAvailableTargetChains(sourceChain, defaultTargetChains)}
               onChange={(value) => {

src/components/modals/disclaimer-modal.tsx

@@ -17,7 +17,7 @@ export default function DisclaimerModal() {
 
   return (
     <Modal title="Disclaimer" className="w-full lg:w-[30rem]" isOpen={isOpen} onClose={setIsOpenFalse}>
-      <div className="flex flex-col gap-middle">
+      <div className="flex flex-col gap-medium">
         <Paragraph content="By using Helix, I agree to the following:" />
         <Paragraph content="I understand that Helix is a bridge aggregator and is only responsible for routing the transfer to the selected bridge. Helix does not hold any funds in custody at any point." />
         <Paragraph content="I understand that the fees shown in a route are estimations and may vary." />
@@ -29,7 +29,7 @@ export default function DisclaimerModal() {
       <div />
 
       <Button
-        className="mx-auto w-fit rounded-middle px-large py-small"
+        className="mx-auto w-fit rounded-medium px-large py-small"
         kind="primary"
         onClick={() => {
           setIsOpenFalse();

src/components/modals/relayer-manage-modal.tsx

@@ -403,7 +403,7 @@ export default function RelayerManageModal({ relayerInfo, isOpen, onClose, onSuc
                 </LabelSection>
                 <LabelSection label="Withdraw Fee" tips="This value is calculated and does not require input">
                   <div
-                    className={`relative flex h-10 items-center justify-between rounded-middle border bg-inner px-small lg:px-middle ${
+                    className={`relative flex h-10 items-center justify-between rounded-medium border bg-inner px-small lg:px-medium ${
                       withdrawFeeParams || loadingWithdrawFee ? "border-transparent" : "border-app-red"
                     }`}
                   >
@@ -461,7 +461,7 @@ function LabelSection({
   tips,
 }: PropsWithChildren<{ label: string; height?: number; tips?: string }>) {
   return (
-    <div className="flex flex-col gap-middle" style={{ height }}>
+    <div className="flex flex-col gap-medium" style={{ height }}>
       <div className="flex items-center gap-small">
         <span className="text-sm font-extrabold">{label}</span>
         {tips ? (

src/components/modals/relayer-manage-v3-modal.tsx

@@ -358,7 +358,7 @@ export default function RelayerManageV3Modal({ relayerInfo, isOpen, onClose, onS
                 {selectedLiquidities.length ? (
                   <Label text="Withdraw Fee" tips="This value is calculated and does not require input">
                     <div
-                      className={`relative flex h-10 items-center justify-between rounded-middle border bg-inner px-small lg:px-middle ${
+                      className={`relative flex h-10 items-center justify-between rounded-medium border bg-inner px-small lg:px-medium ${
                         withdrawFeeAndParams || isLoadingWithdrawFee ? "border-transparent" : "border-app-red"
                       }`}
                     >
@@ -413,7 +413,7 @@ export default function RelayerManageV3Modal({ relayerInfo, isOpen, onClose, onS
 
 function Label({ text, children, height, tips }: PropsWithChildren<{ text: string; height?: number; tips?: string }>) {
   return (
-    <div className="flex flex-col gap-middle" style={{ height }}>
+    <div className="flex flex-col gap-medium" style={{ height }}>
       <div className="flex items-center gap-small">
         <span className="text-sm font-extrabold">{text}</span>
         {tips ? (

src/components/modals/transfer-modal.tsx

@@ -134,13 +134,13 @@ export default function TransferModal({ sender, recipient, transferAmount, isOpe
       </div>
 
       {/* information */}
-      <div className="flex flex-col gap-middle">
+      <div className="flex flex-col gap-medium">
         <span className="text-sm font-extrabold text-white">Information</span>
         <Information fee={bridgeFee} bridge={bridgeInstance} />
       </div>
 
       {txHash ? (
-        <div className="flex h-10 items-center rounded-middle bg-inner px-middle">
+        <div className="flex h-10 items-center rounded-medium bg-inner px-medium">
           <Progress
             confirmedBlocks={txProgressData?.historyRecordByTxHash?.confirmedBlocks}
             result={txProgressData?.historyRecordByTxHash?.result}
@@ -167,9 +167,9 @@ function SourceTarget({
   address?: Address | null;
 }) {
   return chain && token ? (
-    <div className="flex items-center justify-between rounded-middle bg-inner p-middle lg:p-5">
+    <div className="flex items-center justify-between rounded-medium bg-inner p-medium lg:p-5">
       {/* Left */}
-      <div className="flex items-center gap-middle">
+      <div className="flex items-center gap-medium">
         <Image width={36} height={36} alt="Chain" src={getChainLogoSrc(chain.logo)} className="shrink-0 rounded-full" />
         <div className="flex flex-col items-start">
           <span className="text-base font-medium text-white">{chain.name}</span>
@@ -194,7 +194,7 @@ function SourceTarget({
 
 function Information({ fee, bridge }: { fee?: { value: bigint; token: Token }; bridge?: BaseBridge | null }) {
   return (
-    <div className="flex flex-col gap-small rounded-middle bg-inner p-middle">
+    <div className="flex flex-col gap-small rounded-medium bg-inner p-medium">
       <Item
         label="Transaction Fee"
         value={
@@ -210,7 +210,7 @@ function Information({ fee, bridge }: { fee?: { value: bigint; token: Token }; b
 
 function Item({ label, value }: { label: string; value?: string | null }) {
   return (
-    <div className="flex items-center justify-between gap-middle text-sm font-medium text-white">
+    <div className="flex items-center justify-between gap-medium text-sm font-medium text-white">
       <span>{label}</span>
       <span className="truncate">{value}</span>
     </div>