Fix/balance input currency fit (pancakeswap#238)

* fix: Show long token names & names with a space on same line * fix: Less padding on the switch button * test: Update snapshot
chef-jojo · Aug 11, 2021 · 2bf8a5e · 2bf8a5e
1 parent 5e69ae3
commit 2bf8a5e
Show file tree

Hide file tree

Showing 4 changed files with 138 additions and 100 deletions.
diff --git a/packages/pancake-uikit/src/__tests__/components/balanceinput.test.tsx b/packages/pancake-uikit/src/__tests__/components/balanceinput.test.tsx
@@ -184,15 +184,13 @@ it("renders correctly with unit prop", () => {
     }
 
     .c5 {
-      color: #7A6EAA;
+      color: #280D5F;
       font-size: 16px;
       font-weight: 400;
       line-height: 1.5;
-      margin-left: 4px;
-      text-align: right;
     }
 
-    .c6 {
+    .c7 {
       color: #7A6EAA;
       font-size: 12px;
       font-weight: 400;
@@ -243,6 +241,13 @@ it("renders correctly with unit prop", () => {
       box-shadow: 0px 0px 0px 1px #7645D9,0px 0px 0px 4px rgba(118,69,217,0.6);
     }
 
+    .c6 {
+      margin-left: 4px;
+      text-align: right;
+      color: #7A6EAA;
+      white-space: nowrap;
+    }
+
     .c0 {
       background-color: #eeeaf4;
       border: 1px solid #d7caec;
@@ -303,14 +308,14 @@ it("renders correctly with unit prop", () => {
                 value="14"
               />
               <div
-                class="c5"
-                color="textSubtle"
+                class="c5 c6"
+                color="text"
               >
                 CAKE
               </div>
             </div>
             <div
-              class="c6"
+              class="c7"
               color="textSubtle"
               font-size="12px"
             >
@@ -335,7 +340,11 @@ it("renders correctly with unit prop and switchEditingUnits", () => {
   );
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
-      .c1 {
+      .c8 {
+      padding-left: 12px;
+    }
+
+    .c1 {
       display: -webkit-box;
       display: -webkit-flex;
       display: -ms-flexbox;
@@ -357,69 +366,7 @@ it("renders correctly with unit prop and switchEditingUnits", () => {
       align-items: center;
     }
 
-    .c7 {
-      -webkit-align-items: center;
-      -webkit-box-align: center;
-      -ms-flex-align: center;
-      align-items: center;
-      border: 0;
-      border-radius: 16px;
-      box-shadow: 0px -1px 0px 0px rgba(14,14,44,0.4) inset;
-      cursor: pointer;
-      display: -webkit-inline-box;
-      display: -webkit-inline-flex;
-      display: -ms-inline-flexbox;
-      display: inline-flex;
-      font-family: inherit;
-      font-size: 16px;
-      font-weight: 600;
-      -webkit-box-pack: center;
-      -webkit-justify-content: center;
-      -ms-flex-pack: center;
-      justify-content: center;
-      -webkit-letter-spacing: 0.03em;
-      -moz-letter-spacing: 0.03em;
-      -ms-letter-spacing: 0.03em;
-      letter-spacing: 0.03em;
-      line-height: 1;
-      opacity: 1;
-      outline: 0;
-      -webkit-transition: background-color 0.2s,opacity 0.2s;
-      transition: background-color 0.2s,opacity 0.2s;
-      height: 32px;
-      padding: 0 16px;
-      background-color: transparent;
-      color: #1FC7D4;
-      box-shadow: none;
-    }
-
-    .c7:hover:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled):not(:active) {
-      opacity: 0.65;
-    }
-
-    .c7:active:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled) {
-      opacity: 0.85;
-      -webkit-transform: translateY(1px);
-      -ms-transform: translateY(1px);
-      transform: translateY(1px);
-      box-shadow: none;
-    }
-
-    .c7:disabled,
-    .c7.pancake-button--disabled {
-      background-color: #E9EAEB;
-      border-color: #E9EAEB;
-      box-shadow: none;
-      color: #BDC2C4;
-      cursor: not-allowed;
-    }
-
-    .c8 {
-      padding: 0;
-      width: 32px;
-    }
-
-    .c9 {
+    .c12 {
       -webkit-align-self: center;
       -ms-flex-item-align: center;
       align-self: center;
@@ -430,15 +377,13 @@ it("renders correctly with unit prop and switchEditingUnits", () => {
     }
 
     .c5 {
-      color: #7A6EAA;
+      color: #280D5F;
       font-size: 16px;
       font-weight: 400;
       line-height: 1.5;
-      margin-left: 4px;
-      text-align: right;
     }
 
-    .c6 {
+    .c7 {
       color: #7A6EAA;
       font-size: 12px;
       font-weight: 400;
@@ -489,6 +434,79 @@ it("renders correctly with unit prop and switchEditingUnits", () => {
       box-shadow: 0px 0px 0px 1px #7645D9,0px 0px 0px 4px rgba(118,69,217,0.6);
     }
 
+    .c9 {
+      -webkit-align-items: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      border: 0;
+      border-radius: 16px;
+      box-shadow: 0px -1px 0px 0px rgba(14,14,44,0.4) inset;
+      cursor: pointer;
+      display: -webkit-inline-box;
+      display: -webkit-inline-flex;
+      display: -ms-inline-flexbox;
+      display: inline-flex;
+      font-family: inherit;
+      font-size: 16px;
+      font-weight: 600;
+      -webkit-box-pack: center;
+      -webkit-justify-content: center;
+      -ms-flex-pack: center;
+      justify-content: center;
+      -webkit-letter-spacing: 0.03em;
+      -moz-letter-spacing: 0.03em;
+      -ms-letter-spacing: 0.03em;
+      letter-spacing: 0.03em;
+      line-height: 1;
+      opacity: 1;
+      outline: 0;
+      -webkit-transition: background-color 0.2s,opacity 0.2s;
+      transition: background-color 0.2s,opacity 0.2s;
+      height: 32px;
+      padding: 0 16px;
+      background-color: transparent;
+      color: #1FC7D4;
+      box-shadow: none;
+    }
+
+    .c9:hover:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled):not(:active) {
+      opacity: 0.65;
+    }
+
+    .c9:active:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled) {
+      opacity: 0.85;
+      -webkit-transform: translateY(1px);
+      -ms-transform: translateY(1px);
+      transform: translateY(1px);
+      box-shadow: none;
+    }
+
+    .c9:disabled,
+    .c9.pancake-button--disabled {
+      background-color: #E9EAEB;
+      border-color: #E9EAEB;
+      box-shadow: none;
+      color: #BDC2C4;
+      cursor: not-allowed;
+    }
+
+    .c10 {
+      padding: 0;
+      width: 32px;
+    }
+
+    .c11 {
+      width: 16px;
+    }
+
+    .c6 {
+      margin-left: 4px;
+      text-align: right;
+      color: #7A6EAA;
+      white-space: nowrap;
+    }
+
     .c0 {
       background-color: #eeeaf4;
       border: 1px solid #d7caec;
@@ -549,29 +567,29 @@ it("renders correctly with unit prop and switchEditingUnits", () => {
                 value="14"
               />
               <div
-                class="c5"
-                color="textSubtle"
+                class="c5 c6"
+                color="text"
               >
                 CAKE
               </div>
             </div>
             <div
-              class="c6"
+              class="c7"
               color="textSubtle"
               font-size="12px"
             >
               15 USD
             </div>
           </div>
           <div
-            class="c2"
+            class="c8 c2"
           >
             <button
-              class="c7 c8"
+              class="c9 c10 c11"
               scale="sm"
             >
               <svg
-                class="c9"
+                class="c12"
                 color="textSubtle"
                 viewBox="0 0 24 25"
                 width="20px"

diff --git a/packages/pancake-uikit/src/components/BalanceInput/BalanceInput.tsx b/packages/pancake-uikit/src/components/BalanceInput/BalanceInput.tsx
@@ -1,9 +1,8 @@
 import React from "react";
 import { Flex, Box } from "../Box";
-import { IconButton } from "../Button";
 import { SwapVertIcon } from "../Svg";
 import Text from "../Text/Text";
-import { StyledBalanceInput, StyledInput } from "./styles";
+import { StyledBalanceInput, StyledInput, UnitContainer, SwitchUnitsButton } from "./styles";
 import { BalanceInputProps } from "./types";
 
 const BalanceInput: React.FC<BalanceInputProps> = ({
@@ -40,11 +39,7 @@ const BalanceInput: React.FC<BalanceInputProps> = ({
               ref={innerRef}
               {...inputProps}
             />
-            {unit && (
-              <Text ml="4px" textAlign="right" color="textSubtle">
-                {unit}
-              </Text>
-            )}
+            {unit && <UnitContainer>{unit}</UnitContainer>}
           </Flex>
           {currencyValue && (
             <Text fontSize="12px" textAlign="right" color="textSubtle">
@@ -53,10 +48,10 @@ const BalanceInput: React.FC<BalanceInputProps> = ({
           )}
         </Box>
         {switchEditingUnits && (
-          <Flex alignItems="center">
-            <IconButton scale="sm" variant="text" onClick={switchEditingUnits}>
+          <Flex alignItems="center" pl="12px">
+            <SwitchUnitsButton scale="sm" variant="text" onClick={switchEditingUnits}>
               <SwapVertIcon color="textSubtle" />
-            </IconButton>
+            </SwitchUnitsButton>
           </Flex>
         )}
       </Flex>

diff --git a/packages/pancake-uikit/src/components/BalanceInput/index.stories.tsx b/packages/pancake-uikit/src/components/BalanceInput/index.stories.tsx
@@ -73,15 +73,27 @@ export const UnitDisplay: React.FC = () => {
   };
 
   return (
-    <Box width="300px">
-      <BalanceInput
-        onUserInput={handleCakeChange}
-        value={cakeValue}
-        currencyValue={cakeToUSD(cakeValue)}
-        placeholder="0.0"
-        unit="CAKE"
-      />
-    </Box>
+    <>
+      <Box width="300px" mb="24px">
+        <BalanceInput
+          onUserInput={handleCakeChange}
+          value={cakeValue}
+          currencyValue={cakeToUSD(cakeValue)}
+          placeholder="0.0"
+          unit="CAKE"
+        />
+      </Box>
+      {/* Long token names with spaces */}
+      <Box width="300px">
+        <BalanceInput
+          onUserInput={handleCakeChange}
+          value={cakeValue}
+          currencyValue="2854.66 BADGER-HOTCROSS LP"
+          placeholder="0.0"
+          unit="CAKE-BNB LP"
+        />
+      </Box>
+    </>
   );
 };
 

diff --git a/packages/pancake-uikit/src/components/BalanceInput/styles.tsx b/packages/pancake-uikit/src/components/BalanceInput/styles.tsx
@@ -1,8 +1,21 @@
 import styled from "styled-components";
 import Box from "../Box/Box";
 import Input from "../Input/Input";
+import Text from "../Text/Text";
+import IconButton from "../Button/IconButton";
 import { BalanceInputProps } from "./types";
 
+export const SwitchUnitsButton = styled(IconButton)`
+  width: 16px;
+`;
+
+export const UnitContainer = styled(Text)`
+  margin-left: 4px;
+  text-align: right;
+  color: ${({ theme }) => theme.colors.textSubtle};
+  white-space: nowrap;
+`;
+
 export const StyledBalanceInput = styled(Box)<{ isWarning: BalanceInputProps["isWarning"] }>`
   background-color: ${({ theme }) => theme.colors.input};
   border: 1px solid ${({ theme }) => theme.colors.inputSecondary};