879: Fixed styling for token names with unusual characters (#880)

airswap · Jan 7, 2024 · dc86f7f · dc86f7f
1 parent 58982db
commit dc86f7f
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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};