fix(SafariSquareDots): fixed by using border-top-with instead of bord… (

#2474) * fix(SafariSquareDots): fixed by using border-top-with instead of border-width * fix(SafariSqaureDots): fixed by using a min width of 5px and then following the width of the screen if the screen is too wide * fix(SafariSquareDots): fixed by using Dot SVG instead of border-style CSS * fix(SafariSquareDots): Fixed code follows suggestions from the Pull Request * regenerate snapshots Co-authored-by: NITIPON CHINGTHONGCHAI <[email protected]> Co-authored-by: Justin Domingue <[email protected]>
gnosis · Oct 11, 2021 · 27a868f · 27a868f
1 parent 03c3fde
commit 27a868f
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 14 deletions.
diff --git a/src/assets/svg/dot_line.svg b/src/assets/svg/dot_line.svg
diff --git a/src/components/RoutingDiagram/RoutingDiagram.tsx b/src/components/RoutingDiagram/RoutingDiagram.tsx
@@ -9,6 +9,8 @@ import { Box } from 'rebass'
 import styled from 'styled-components/macro'
 import { TYPE } from 'theme'
 
+import { ReactComponent as DotLine } from '../../assets/svg/dot_line.svg'
+
 export interface RoutingDiagramEntry {
   percent: Percent
   path: [Currency, Currency, FeeAmount][]
@@ -40,13 +42,18 @@ const PoolBadge = styled(Badge)`
 `
 
 const DottedLine = styled.div`
-  border-color: ${({ theme }) => theme.bg4};
-  border-top-style: dotted;
-  border-width: 4px;
-  height: 0px;
+  display: flex;
+  align-items: center;
   position: absolute;
   width: calc(100%);
   z-index: 1;
+  opacity: 0.5;
+`
+
+const DotColor = styled(DotLine)`
+  path {
+    stroke: ${({ theme }) => theme.bg4};
+  }
 `
 
 const OpaqueBadge = styled(Badge)`
@@ -82,7 +89,9 @@ export default function RoutingDiagram({
 function Route({ percent, path }: { percent: RoutingDiagramEntry['percent']; path: RoutingDiagramEntry['path'] }) {
   return (
     <RouteRow>
-      <DottedLine />
+      <DottedLine>
+        <DotColor />
+      </DottedLine>
       <OpaqueBadge>
         <TYPE.small fontSize={12} style={{ wordBreak: 'normal' }}>
           {percent.toSignificant(2)}%

diff --git a/src/components/RoutingDiagram/__snapshots__/RoutingDiagram.test.tsx.snap b/src/components/RoutingDiagram/__snapshots__/RoutingDiagram.test.tsx.snap
@@ -13,10 +13,16 @@ exports[`renders multi route 1`] = `
         class="sc-bdnxRM Row-sc-nrd8cx-0 RoutingDiagram__RouteRow-sc-o1ook0-2 lmTMKd itvFNV fzMiot"
       >
         <div
-          class="RoutingDiagram__DottedLine-sc-o1ook0-4 gwivhA"
-        />
+          class="RoutingDiagram__DottedLine-sc-o1ook0-4 kkXINS"
+        >
+          <svg
+            class="RoutingDiagram__DotColor-sc-o1ook0-5 kgYqrO"
+          >
+            dot_line.svg
+          </svg>
+        </div>
         <div
-          class="Badge-sc-1mhw5si-0 RoutingDiagram__OpaqueBadge-sc-o1ook0-5 gayll cvyxdH"
+          class="Badge-sc-1mhw5si-0 RoutingDiagram__OpaqueBadge-sc-o1ook0-6 gayll khxosM"
         >
           <div
             class="theme__TextWrapper-sc-18nh1jk-0 cWOfab css-15li2d9"
@@ -56,10 +62,16 @@ exports[`renders multi route 1`] = `
         class="sc-bdnxRM Row-sc-nrd8cx-0 RoutingDiagram__RouteRow-sc-o1ook0-2 lmTMKd itvFNV fzMiot"
       >
         <div
-          class="RoutingDiagram__DottedLine-sc-o1ook0-4 gwivhA"
-        />
+          class="RoutingDiagram__DottedLine-sc-o1ook0-4 kkXINS"
+        >
+          <svg
+            class="RoutingDiagram__DotColor-sc-o1ook0-5 kgYqrO"
+          >
+            dot_line.svg
+          </svg>
+        </div>
         <div
-          class="Badge-sc-1mhw5si-0 RoutingDiagram__OpaqueBadge-sc-o1ook0-5 gayll cvyxdH"
+          class="Badge-sc-1mhw5si-0 RoutingDiagram__OpaqueBadge-sc-o1ook0-6 gayll khxosM"
         >
           <div
             class="theme__TextWrapper-sc-18nh1jk-0 cWOfab css-15li2d9"
@@ -122,10 +134,16 @@ exports[`renders single route 1`] = `
         class="sc-bdnxRM Row-sc-nrd8cx-0 RoutingDiagram__RouteRow-sc-o1ook0-2 lmTMKd itvFNV fzMiot"
       >
         <div
-          class="RoutingDiagram__DottedLine-sc-o1ook0-4 gwivhA"
-        />
+          class="RoutingDiagram__DottedLine-sc-o1ook0-4 kkXINS"
+        >
+          <svg
+            class="RoutingDiagram__DotColor-sc-o1ook0-5 kgYqrO"
+          >
+            dot_line.svg
+          </svg>
+        </div>
         <div
-          class="Badge-sc-1mhw5si-0 RoutingDiagram__OpaqueBadge-sc-o1ook0-5 gayll cvyxdH"
+          class="Badge-sc-1mhw5si-0 RoutingDiagram__OpaqueBadge-sc-o1ook0-6 gayll khxosM"
         >
           <div
             class="theme__TextWrapper-sc-18nh1jk-0 cWOfab css-15li2d9"