App: UI tweaks (#613)

liquity · Nov 26, 2024 · d02fe41 · d02fe41
1 parent dc08506
commit d02fe41
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 53 deletions.
diff --git a/frontend/app/src/comps/Positions/PositionCardBorrow.tsx b/frontend/app/src/comps/Positions/PositionCardBorrow.tsx
@@ -12,7 +12,7 @@ import { HFlex, IconBorrow, StatusDot, TokenIcon } from "@liquity2/uikit";
 import * as dn from "dnum";
 import Link from "next/link";
 import { PositionCard } from "./PositionCard";
-import { CardRow, CardRows, EditSquare } from "./shared";
+import { CardRow, CardRows } from "./shared";
 
 export function PositionCardBorrow({
   batchManager,
@@ -71,19 +71,19 @@ export function PositionCardBorrow({
               color: "positionContent",
             })}
           >
-            <div
-              className={css({
-                display: "flex",
-                color: "white",
-              })}
-            >
-              <IconBorrow size={16} />
-            </div>
             <div>BOLD loan</div>
             {statusTag}
           </div>
         }
-        contextual={<EditSquare />}
+        contextual={
+          <div
+            className={css({
+              color: "positionContent",
+            })}
+          >
+            <IconBorrow size={32} />
+          </div>
+        }
         main={{
           value: (
             <HFlex gap={8} alignItems="center" justifyContent="flex-start">

diff --git a/frontend/app/src/comps/Positions/PositionCardEarn.tsx b/frontend/app/src/comps/Positions/PositionCardEarn.tsx
@@ -6,7 +6,7 @@ import { css } from "@/styled-system/css";
 import { HFlex, IconEarn, TokenIcon } from "@liquity2/uikit";
 import Link from "next/link";
 import { PositionCard } from "./PositionCard";
-import { CardRow, CardRows, EditSquare } from "./shared";
+import { CardRow, CardRows } from "./shared";
 
 export function PositionCardEarn({
   owner,
@@ -39,18 +39,18 @@ export function PositionCardEarn({
               color: "positionContent",
             })}
           >
-            <div
-              className={css({
-                display: "flex",
-                color: "brandLightBlue",
-              })}
-            >
-              <IconEarn size={16} />
-            </div>
             Earn position
           </div>,
         ]}
-        contextual={<EditSquare />}
+        contextual={
+          <div
+            className={css({
+              color: "positionContent",
+            })}
+          >
+            <IconEarn size={32} />
+          </div>
+        }
         main={{
           value: (
             <HFlex gap={8} alignItems="center" justifyContent="flex-start">

diff --git a/frontend/app/src/comps/Positions/PositionCardLeverage.tsx b/frontend/app/src/comps/Positions/PositionCardLeverage.tsx
@@ -11,7 +11,7 @@ import { HFlex, IconLeverage, StatusDot, TokenIcon, TOKENS_BY_SYMBOL } from "@li
 import * as dn from "dnum";
 import Link from "next/link";
 import { PositionCard } from "./PositionCard";
-import { CardRow, CardRows, EditSquare } from "./shared";
+import { CardRow, CardRows } from "./shared";
 
 export function PositionCardLeverage({
   borrowed,
@@ -66,19 +66,19 @@ export function PositionCardLeverage({
               color: "positionContent",
             })}
           >
-            <div
-              className={css({
-                display: "flex",
-                color: "brandGreen",
-              })}
-            >
-              <IconLeverage size={16} />
-            </div>
             <div>Leverage loan</div>
             {statusTag}
           </div>,
         ]}
-        contextual={<EditSquare />}
+        contextual={
+          <div
+            className={css({
+              color: "positionContent",
+            })}
+          >
+            <IconLeverage size={32} />
+          </div>
+        }
         main={{
           value: (
             <HFlex gap={8} alignItems="center" justifyContent="flex-start">

diff --git a/frontend/app/src/comps/Positions/PositionCardStake.tsx b/frontend/app/src/comps/Positions/PositionCardStake.tsx
@@ -5,7 +5,7 @@ import { css } from "@/styled-system/css";
 import { HFlex, IconStake, TokenIcon } from "@liquity2/uikit";
 import Link from "next/link";
 import { PositionCard } from "./PositionCard";
-import { CardRow, CardRows, EditSquare } from "./shared";
+import { CardRow, CardRows } from "./shared";
 
 export function PositionCardStake({
   deposit,
@@ -34,18 +34,18 @@ export function PositionCardStake({
               color: "positionContent",
             })}
           >
-            <div
-              className={css({
-                display: "flex",
-                color: "brandGolden",
-              })}
-            >
-              <IconStake size={16} />
-            </div>
             LQTY stake
           </div>,
         ]}
-        contextual={<EditSquare />}
+        contextual={
+          <div
+            className={css({
+              color: "positionContent",
+            })}
+          >
+            <IconStake size={32} />
+          </div>
+        }
         main={{
           value: (
             <HFlex gap={8} alignItems="center" justifyContent="flex-start">

diff --git a/frontend/app/src/comps/Positions/Positions.tsx b/frontend/app/src/comps/Positions/Positions.tsx
@@ -25,9 +25,11 @@ export function Positions({
   columns,
   showNewPositionCard = true,
   title = (mode) => (
-    mode === "actions"
-      ? content.home.openPositionTitle
-      : content.home.myPositionsTitle
+    mode === "loading"
+      ? " "
+      : mode === "positions"
+      ? content.home.myPositionsTitle
+      : content.home.openPositionTitle
   ),
 }: {
   address: null | Address;
@@ -210,7 +212,7 @@ function PositionsGroup({
             userSelect: "none",
           })}
           style={{
-            paddingBottom: mode === "actions" ? 48 : 32,
+            paddingBottom: 32,
           }}
           onClick={onTitleClick}
         >

diff --git a/frontend/app/src/comps/ProtocolStats/ProtocolStats.tsx b/frontend/app/src/comps/ProtocolStats/ProtocolStats.tsx
@@ -47,7 +47,7 @@ export function ProtocolStats() {
           userSelect: "none",
         })}
       >
-        <HFlex gap={8} alignItems="center">
+        <HFlex gap={4} alignItems="center">
           <Logo size={16} />
           <span>TVL</span>{" "}
           <span>
@@ -65,7 +65,7 @@ export function ProtocolStats() {
             return (
               <HFlex
                 key={symbol}
-                gap={8}
+                gap={4}
               >
                 <TokenIcon
                   size={16}
@@ -87,7 +87,7 @@ export function ProtocolStats() {
             <AnchorTextButton
               href={`/account?address=${account.address}`}
               label={
-                <HFlex gap={8} alignItems="center">
+                <HFlex gap={4} alignItems="center">
                   <Image
                     alt=""
                     width={16}

diff --git a/frontend/app/src/comps/Screen/Screen.tsx b/frontend/app/src/comps/Screen/Screen.tsx
@@ -159,6 +159,18 @@ export function Screen({
                 base: "static",
                 large: "absolute",
               },
+              width: {
+                base: "100%",
+                large: "auto",
+              },
+              maxWidth: {
+                base: 540,
+                large: "100%",
+              },
+              marginBottom: {
+                base: -16,
+                large: 0,
+              },
               left: 0,
               zIndex: 1,
             })}

diff --git a/frontend/app/src/screens/HomeScreen/HomeScreen.tsx b/frontend/app/src/screens/HomeScreen/HomeScreen.tsx
@@ -111,7 +111,7 @@ function BorrowingRow({
         <div
           className={css({
             display: "flex",
-            gap: 8,
+            gap: 16,
             justifyContent: "flex-end",
           })}
         >
@@ -126,7 +126,7 @@ function BorrowingRow({
                   className={css({
                     display: "flex",
                     alignItems: "center",
-                    gap: 8,
+                    gap: 4,
                     fontSize: 14,
                   })}
                 >
@@ -148,7 +148,7 @@ function BorrowingRow({
                   className={css({
                     display: "flex",
                     alignItems: "center",
-                    gap: 8,
+                    gap: 4,
                     fontSize: 14,
                   })}
                 >
@@ -215,7 +215,7 @@ function EarnRewardsRow({
                 className={css({
                   display: "flex",
                   alignItems: "center",
-                  gap: 8,
+                  gap: 4,
                   fontSize: 14,
                 })}
               >

diff --git a/frontend/app/src/screens/LeverageScreen/LeverageScreen.tsx b/frontend/app/src/screens/LeverageScreen/LeverageScreen.tsx
@@ -151,7 +151,7 @@ export function LeverageScreen() {
     loan: newLoan,
   });
 
-  const leverageSlippageElements = useSlippageElements(leverageSlippage, hasDeposit);
+  const leverageSlippageElements = useSlippageElements(leverageSlippage, hasDeposit && account.isConnected);
 
   const hasAllowedSlippage = leverageSlippage.data
     && dn.lte(leverageSlippage.data, LEVERAGE_MAX_SLIPPAGE);

diff --git a/frontend/uikit/src/Tabs/Tabs.tsx b/frontend/uikit/src/Tabs/Tabs.tsx
@@ -91,6 +91,7 @@ export function Tabs({
     ? {
       container: {
         height: 32,
+        padding: 3,
         "--background": token("colors.controlSurface"),
         "--border": `1px solid ${token("colors.border")}`,
         borderRadius: 16,
@@ -109,6 +110,7 @@ export function Tabs({
     : {
       container: {
         height: 44,
+        padding: 4,
         "--background": token("colors.fieldSurface"),
         "--border": "0",
         borderRadius: 8,
@@ -254,7 +256,13 @@ function Tab({
         outlineOffset: compact ? 1 : -2,
       }}
     >
-      {label}
+      <div
+        style={{
+          translate: compact ? "0 -0.5px" : "0 0",
+        }}
+      >
+        {label}
+      </div>
     </button>
   );
 }