ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
nitipon.eth 2021-10-12 00:56:58 +07:00 committed by GitHub
parent 03c3fdef34
commit 27a868f0cb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 44 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/svg/dot_line.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 233 B

19
src/components/RoutingDiagram/RoutingDiagram.tsx
View File

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

36
src/components/RoutingDiagram/__snapshots__/RoutingDiagram.test.tsx.snap
View File

@ -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"