From 27a868f0cb3873e288b865a0f4aef91340f0ddc2 Mon Sep 17 00:00:00 2001
From: "nitipon.eth" <77143416+Armakuji@users.noreply.github.com>
Date: Tue, 12 Oct 2021 00:56:58 +0700
Subject: [PATCH] =?UTF-8?q?fix(SafariSquareDots):=20fixed=20by=20using=20b?=
 =?UTF-8?q?order-top-with=20instead=20of=20bord=E2=80=A6=20(#2474)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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                   |  3 ++
 .../RoutingDiagram/RoutingDiagram.tsx         | 19 +++++++---
 .../RoutingDiagram.test.tsx.snap              | 36 ++++++++++++++-----
 3 files changed, 44 insertions(+), 14 deletions(-)
 create mode 100644 src/assets/svg/dot_line.svg

diff --git a/src/assets/svg/dot_line.svg b/src/assets/svg/dot_line.svg
new file mode 100644
index 0000000000..7db8a8e4e3
--- /dev/null
+++ b/src/assets/svg/dot_line.svg
@@ -0,0 +1,3 @@
+<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>
diff --git a/src/components/RoutingDiagram/RoutingDiagram.tsx b/src/components/RoutingDiagram/RoutingDiagram.tsx
index cc668ef47a..077a827b2f 100644
--- 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
index 420583f1aa..5b5ac9b6f1 100644
--- 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"