From 5f5e51b4134c2adbd6f3dac7e975a76432117456 Mon Sep 17 00:00:00 2001
From: makkelie_dev <makkelie@protonmail.com>
Date: Sun, 20 Oct 2024 20:36:08 +0200
Subject: [PATCH] More styling fixes

---
 public/locales/en/translation.json                       | 5 +++--
 .../@widgets/MyOrdersWidget/MyOrdersWidget.styles.tsx    | 2 +-
 .../@widgets/MyOrdersWidget/MyOrdersWidget.tsx           | 2 +-
 .../subcomponents/ActionButtons/ActionButtons.styles.tsx | 2 +-
 .../subcomponents/InfoSection/InfoSection.styles.tsx     | 3 ++-
 .../subcomponents/InfoSection/InfoSection.tsx            | 9 +++++----
 .../subcomponents/MyOrdersList/MyOrdersList.styles.tsx   | 1 +
 src/components/Typography/Typography.styles.tsx          | 8 +++++++-
 8 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 3d24ac97..577f2764 100644
--- 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
index 45107135..a358714a 100644
--- 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
index 1880cb1b..38776d9c 100644
--- 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
index 6905cb2e..35c4e0fc 100644
--- 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
index d9661a02..482f9d52 100644
--- a/src/components/@widgets/MyOrdersWidget/subcomponents/InfoSection/InfoSection.styles.tsx
+++ b/src/components/@widgets/MyOrdersWidget/subcomponents/InfoSection/InfoSection.styles.tsx
@@ -1,5 +1,6 @@
 import styled from "styled-components/macro";
 
+import { fontWide } from "../../../../../style/themes";
 import { InfoHeading, InfoSubHeading } from "../../../../Typography/Typography";
 
 export const StyledInfoHeading = styled(InfoHeading)`
@@ -7,6 +8,6 @@ export const StyledInfoHeading = styled(InfoHeading)`
   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
index 565c5ab6..1a7d6358 100644
--- a/src/components/@widgets/MyOrdersWidget/subcomponents/InfoSection/InfoSection.tsx
+++ b/src/components/@widgets/MyOrdersWidget/subcomponents/InfoSection/InfoSection.tsx
@@ -18,7 +18,7 @@ const InfoSection: FC<ActionButtonsProps> = ({
   if (walletIsNotConnected) {
     return (
       <>
-        <StyledInfoHeading>{t("wallet.connectWallet")}</StyledInfoHeading>
+        <InfoSubHeading>{t("orders.connectWallet")}</InfoSubHeading>
       </>
     );
   }
@@ -26,10 +26,11 @@ const InfoSection: FC<ActionButtonsProps> = ({
   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
index 32928512..acf46904 100644
--- 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
index a08782bc..78d2e182 100644
--- 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(