From ba22048115aa1d402a4807ffdc0ed79f35186cf6 Mon Sep 17 00:00:00 2001
From: piersss <bonkbonksourman@gmail.com>
Date: Sun, 7 Jan 2024 23:01:16 +0100
Subject: [PATCH] 879: Fixed styling for token names with unusual characters

---
 .../ApproveReview/ApproveReview.styles.tsx            |  1 +
 .../hooks/useFormattedTokenAmount.ts                  |  2 +-
 .../TokenImportButton/TokenImportButton.styles.tsx    | 11 ++++++-----
 src/components/TokenSelect/TokenSelect.styles.tsx     |  8 +++++++-
 .../ReviewListItem/ReviewListItem.tsx                 |  4 ++++
 5 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/components/@reviewScreens/ApproveReview/ApproveReview.styles.tsx b/src/components/@reviewScreens/ApproveReview/ApproveReview.styles.tsx
index e4178d574..35cd2afc5 100644
--- a/src/components/@reviewScreens/ApproveReview/ApproveReview.styles.tsx
+++ b/src/components/@reviewScreens/ApproveReview/ApproveReview.styles.tsx
@@ -11,6 +11,7 @@ export const Container = styled.div`
 
 export const StyledWidgetHeader = styled(WidgetHeader)`
   margin-bottom: 0.75rem;
+  overflow: hidden;
 `;
 
 export const StyledActionButtons = styled(ReviewActionButtons)`
diff --git a/src/components/@widgets/OrderDetailWidget/hooks/useFormattedTokenAmount.ts b/src/components/@widgets/OrderDetailWidget/hooks/useFormattedTokenAmount.ts
index 0b56c2e51..c4b0f2969 100644
--- a/src/components/@widgets/OrderDetailWidget/hooks/useFormattedTokenAmount.ts
+++ b/src/components/@widgets/OrderDetailWidget/hooks/useFormattedTokenAmount.ts
@@ -7,7 +7,7 @@ const useFormattedTokenAmount = (
   decimals?: number
 ): string | undefined => {
   return useMemo(() => {
-    if (!amount || !decimals) {
+    if (!amount || decimals === undefined) {
       return undefined;
     }
 
diff --git a/src/components/TokenList/subcomponents/TokenImportButton/TokenImportButton.styles.tsx b/src/components/TokenList/subcomponents/TokenImportButton/TokenImportButton.styles.tsx
index 91cbc5504..e02f088fd 100644
--- a/src/components/TokenList/subcomponents/TokenImportButton/TokenImportButton.styles.tsx
+++ b/src/components/TokenList/subcomponents/TokenImportButton/TokenImportButton.styles.tsx
@@ -3,13 +3,11 @@ import styled from "styled-components/macro";
 import { Metadata } from "../../../Typography/Typography";
 
 export const Container = styled.div`
+  display: flex;
   border: 1px solid ${(props) => props.theme.colors.borderGrey};
   padding: 1rem;
-  display: grid;
-  grid-auto-flow: column;
+  gap: 1rem;
   cursor: pointer;
-  grid-template-columns: auto minmax(auto, 1fr) 6.25rem;
-  grid-gap: 1rem;
   align-items: center;
 
   &:not(:last-of-type) {
@@ -25,6 +23,9 @@ export const TextContainer = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
+  flex-grow: 1;
+  max-width: calc(100% - 10rem);
+  overflow: hidden;
 `;
 
 export const Symbol = styled.h3`
@@ -36,7 +37,7 @@ export const Symbol = styled.h3`
 export const TokenName = styled.h3`
   font-size: 0.8rem;
   font-weight: 500;
-  color: #9e9e9e;
+  color: ${(props) => props.theme.colors.darkSubText};
   line-height: 1rem;
 `;
 
diff --git a/src/components/TokenSelect/TokenSelect.styles.tsx b/src/components/TokenSelect/TokenSelect.styles.tsx
index e0ba0457e..626f733be 100644
--- a/src/components/TokenSelect/TokenSelect.styles.tsx
+++ b/src/components/TokenSelect/TokenSelect.styles.tsx
@@ -6,6 +6,7 @@ import isActiveLanguageLogographic from "../../helpers/isActiveLanguageLogograph
 import {
   BorderlessButtonStyle,
   InputOrButtonBorderStyle,
+  TextEllipsis,
 } from "../../style/mixins";
 import AccountLink from "../AccountLink/AccountLink";
 import TokenLogo from "../TokenLogo/TokenLogo";
@@ -167,6 +168,7 @@ export const StyledSelectItem = styled(SelectItem)`
   text-align: left;
   line-height: 1;
   gap: 0.375rem;
+  max-width: 7rem;
   color: ${(props) =>
     props.theme.name === "dark"
       ? props.theme.colors.white
@@ -260,7 +262,11 @@ const fadeOutWhenInvisible = css<{ $invisible: boolean }>`
   opacity: ${(props) => (props.$invisible ? 0 : 1)};
 `;
 
-export const StyledSelectButtonContent = styled.span``;
+export const StyledSelectButtonContent = styled.span`
+  ${TextEllipsis};
+
+  width: calc(100% - 1.125rem);
+`;
 
 export const StyledDownArrow = styled(MdKeyboardArrowDown)<{
   $invisible: boolean;
diff --git a/src/styled-components/ReviewListItem/ReviewListItem.tsx b/src/styled-components/ReviewListItem/ReviewListItem.tsx
index ca7041cf1..3c6d06f62 100644
--- a/src/styled-components/ReviewListItem/ReviewListItem.tsx
+++ b/src/styled-components/ReviewListItem/ReviewListItem.tsx
@@ -1,5 +1,7 @@
 import styled from "styled-components/macro";
 
+import { TextEllipsis } from "../../style/mixins";
+
 export const ReviewListItem = styled.li`
   display: flex;
   justify-content: space-between;
@@ -17,6 +19,8 @@ export const ReviewListItemLabel = styled.div`
 `;
 
 export const ReviewListItemValue = styled.div`
+  ${TextEllipsis};
+
   display: flex;
   align-items: center;
   color: ${(props) => props.theme.colors.white};