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 <nitipon.chingthongchai@scb.co.th>
Co-authored-by: Justin Domingue <judo@uniswap.org>

src/assets/svg/dot_line.svg

+<svg width="100%" height="35"  viewBox="800 0 300 200" xmlns="http://www.w3.org/2000/svg">
+    <line x1="0" x2="2000" y1="100" y2="100" stroke="currentColor" stroke-width="20" stroke-linecap="round" stroke-dasharray="1, 45"/>
+</svg>

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)}%

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"