More styling fixes

airswap · Oct 20, 2024 · 5f5e51b · 5f5e51b
1 parent b228b5c
commit 5f5e51b
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 11 deletions.
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -121,6 +121,7 @@
     "chooseToken": "Choose token",
     "clearCustomServer": "Clear custom server",
     "confirmCancel": "Confirm cancel",
+    "connectWallet": "Connect your wallet to view your swaps",
     "continue": "Continue",
     "copyLink": "Copy link",
     "counterPartyAddress": "Counterparty address",
@@ -168,7 +169,7 @@
     "selectedServer": "Selected {{serverUrl}} as custom server",
     "settings": "Settings",
     "specificTaker": "Specific Taker",
-    "startByCreatingANewOrder": "Start by creating a new order",
+    "startByCreatingANewOrder": "Start by creating a new order.",
     "submitted": "Transaction Submitted",
     "swapExpired": "Swap expired",
     "swapExpiredCallToAction": "Please try again",
@@ -194,7 +195,7 @@
     "unableTake": "Unable to take",
     "viewAllQuotes": "View all quotes",
     "wrapMessage": "No protocol fee for ETH/WETH swaps",
-    "youHaveNoOpenOTCOrders": "You have no open OTC orders"
+    "youHaveNoOpenOTCOrders": "You have no open OTC orders."
   },
   "toast": {
     "approvalComplete": "Approval Complete",

diff --git a/src/components/@widgets/MyOrdersWidget/MyOrdersWidget.styles.tsx b/src/components/@widgets/MyOrdersWidget/MyOrdersWidget.styles.tsx
@@ -27,6 +27,6 @@ export const InfoSectionContainer = styled.div`
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  margin-bottom: 0.5rem;
+  margin-top: 1rem;
   text-align: center;
 `;
diff --git a/src/components/@widgets/MyOrdersWidget/MyOrdersWidget.tsx b/src/components/@widgets/MyOrdersWidget/MyOrdersWidget.tsx
@@ -92,9 +92,9 @@ const MyOrdersWidget: FC = () => {
 
   return (
     <Container>
+      <MyOrdersWidgetHeader title={t("common.myOrders")} />
       {!!sortedUserOrders.length && (
         <>
-          <MyOrdersWidgetHeader title={t("common.myOrders")} />
           <MyOrdersList
             activeSortType={activeSortType}
             orders={sortedUserOrders}

diff --git a/src/components/@widgets/MyOrdersWidget/subcomponents/ActionButtons/ActionButtons.styles.tsx b/src/components/@widgets/MyOrdersWidget/subcomponents/ActionButtons/ActionButtons.styles.tsx
@@ -8,7 +8,7 @@ import { ButtonStyle } from "../../../../Button/Button.styles";
 export const Container = styled.div`
   display: flex;
   justify-content: center;
-  margin-block-start: 2rem;
+  margin-block-start: 2.5rem;
 `;
 
 export const SignButton = styled(Button)`

diff --git a/src/components/@widgets/MyOrdersWidget/subcomponents/InfoSection/InfoSection.styles.tsx b/src/components/@widgets/MyOrdersWidget/subcomponents/InfoSection/InfoSection.styles.tsx
@@ -1,12 +1,13 @@
 import styled from "styled-components/macro";
 
+import { fontWide } from "../../../../../style/themes";
 import { InfoHeading, InfoSubHeading } from "../../../../Typography/Typography";
 
 export const StyledInfoHeading = styled(InfoHeading)`
   display: flex;
   align-items: center;
 
   & + ${InfoSubHeading} {
-    margin-top: 0.25rem;
+    margin-top: 1rem;
   }
 `;
diff --git a/src/components/@widgets/MyOrdersWidget/subcomponents/InfoSection/InfoSection.tsx b/src/components/@widgets/MyOrdersWidget/subcomponents/InfoSection/InfoSection.tsx
@@ -18,18 +18,19 @@ const InfoSection: FC<ActionButtonsProps> = ({
   if (walletIsNotConnected) {
     return (
       <>
-        <StyledInfoHeading>{t("wallet.connectWallet")}</StyledInfoHeading>
+        <InfoSubHeading>{t("orders.connectWallet")}</InfoSubHeading>
       </>
     );
   }
 
   if (userHasNoOrders) {
     return (
       <>
-        <StyledInfoHeading>
+        <InfoSubHeading>
           {t("orders.youHaveNoOpenOTCOrders")}
-        </StyledInfoHeading>
-        <InfoSubHeading>{t("orders.startByCreatingANewOrder")}</InfoSubHeading>
+          {` `}
+          {t("orders.startByCreatingANewOrder")}
+        </InfoSubHeading>
       </>
     );
   }

diff --git a/src/components/@widgets/MyOrdersWidget/subcomponents/MyOrdersList/MyOrdersList.styles.tsx b/src/components/@widgets/MyOrdersWidget/subcomponents/MyOrdersList/MyOrdersList.styles.tsx
@@ -9,6 +9,7 @@ export const Container = styled.div<{ hasOverflow: boolean }>`
   flex-direction: column;
   position: relative;
   margin-block-start: 2rem;
+  padding-block-end: ${({ hasOverflow }) => (hasOverflow ? "2rem" : "0")};
 
   -webkit-mask-image: ${({ hasOverflow }) =>
     hasOverflow

diff --git a/src/components/Typography/Typography.styles.tsx b/src/components/Typography/Typography.styles.tsx
@@ -121,11 +121,17 @@ export const StyledLink = makeTypographyComponent(
 ) as StyledComponent<"a", DefaultTheme, {}>;
 
 export const StyledNavigation = makeTypographyComponent("nav");
-export const StyledInfoHeading = makeTypographyComponent("infoHeading");
+export const StyledInfoHeading = makeTypographyComponent(
+  "infoHeading",
+  css`
+    font-family: ${fontWide};
+  `
+);
 export const StyledInfoSubHeading = makeTypographyComponent(
   "infoSubHeading",
   css`
     color: ${(props) => props.theme.colors.lightGrey};
+    font-family: ${fontWide};
   `
 );
 export const StyledFormLabel = makeTypographyComponent(