style tuning

RabbyHub · Nov 11, 2024 · e4b7a0b · e4b7a0b
1 parent 09d0950
commit e4b7a0b
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/src/ui/views/Bridge/Component/BridgeSlippage.tsx b/src/ui/views/Bridge/Component/BridgeSlippage.tsx
@@ -31,6 +31,7 @@ const SlippageItem = styled.div`
   background: var(--r-neutral-card-1, #fff);
   border-radius: 6px;
   overflow: hidden;
+  color: var(--r-neutral-title1, #192945);
 
   &.input-wrapper {
     border: 1px solid var(--r-neutral-line, #e0e5ec);

diff --git a/src/ui/views/Bridge/Component/BridgeToken.tsx b/src/ui/views/Bridge/Component/BridgeToken.tsx
@@ -83,26 +83,24 @@ export const BridgeToken = ({
   const supportedChains = useRabbySelector((s) => s.bridge.supportedChains);
 
   const isFromToken = type === 'from';
+  const isToken = type === 'to';
 
-  const name = type === 'from' ? t('page.bridge.From') : t('page.bridge.To');
+  const name = isFromToken ? t('page.bridge.From') : t('page.bridge.To');
   const chainObj = findChainByEnum(chain);
 
   const openFeePopup = useSetSettingVisible();
 
   const inputRef = useRef<Input>();
 
   useLayoutEffect(() => {
-    if (type === 'from') {
+    if (isFromToken) {
       if (document?.activeElement !== inputRef.current?.input) {
         inputRef.current?.focus();
       }
     }
   }, [value]);
 
-  const showNoQuote = useMemo(() => type === 'to' && !!noQuote, [
-    type,
-    noQuote,
-  ]);
+  const showNoQuote = useMemo(() => isToken && !!noQuote, [type, noQuote]);
 
   const useValue = useMemo(() => {
     if (token && value) {
@@ -174,7 +172,7 @@ export const BridgeToken = ({
               ref={inputRef as any}
             />
           )}
-          {type === 'to' ? (
+          {isToken ? (
             <BridgeToTokenSelect
               drawerHeight={540}
               fromChainId={fromChainId!}
@@ -207,8 +205,19 @@ export const BridgeToken = ({
           )}
         >
           <div className="flex items-center gap-2">
-            <span>{useValue}</span>
-            {type === 'to' && !!value && (
+            {valueLoading ? (
+              <SkeletonInput
+                active
+                className="rounded-[4px]"
+                style={{
+                  width: 36,
+                  height: 16,
+                }}
+              />
+            ) : (
+              <span>{useValue}</span>
+            )}
+            {isToken && !!value && (
               <RcIconInfoCC
                 onClick={() => openFeePopup(true)}
                 viewBox="0 0 14 14"