Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(tx-builder): Add dark mode support #825

Merged
merged 7 commits into from
Oct 11, 2024
Merged
6 changes: 3 additions & 3 deletions .github/workflows/deployment.yml
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ env:
jobs:
pr:
name: Pull Request
runs-on: ubuntu-latest
runs-on: ubuntu-22.04
if: ${{ github.event_name == 'pull_request' }}
steps:
- uses: actions/checkout@v3
Expand Down Expand Up @@ -68,7 +68,7 @@ jobs:

deploy:
name: Deploy Dev/Staging
runs-on: ubuntu-latest
runs-on: ubuntu-22.04
if: github.event_name != 'pull_request' && github.event_name != 'workflow_dispatch'

steps:
Expand Down Expand Up @@ -114,7 +114,7 @@ jobs:

release:
name: Production release
runs-on: ubuntu-latest
runs-on: ubuntu-22.04
if: github.ref == 'refs/heads/main' && github.event_name == 'workflow_dispatch'

steps:
Expand Down
8 changes: 4 additions & 4 deletions apps/tx-builder/src/components/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,12 +33,12 @@ const customStyles: {
} = {
primary: {
contained: css`
color: ${({ theme }) => theme.palette.common.white};
color: ${({ theme }) => theme.palette.background.main};
background-color: ${({ theme }) => theme.palette.primary.main};
box-shadow: 1px 2px 10px ${alpha('#28363D', 0.18)};

&:hover {
color: ${({ theme }) => theme.palette.common.white};
color: ${({ theme }) => theme.palette.background.main};
background-color: ${({ theme }) => theme.palette.primary.dark};
}
`,
Expand Down Expand Up @@ -165,11 +165,11 @@ const StyledButton = styled(ButtonMUI)<{ $localProps: LocalProps }>`
}

&.Mui-disabled {
color: ${({ theme }) => theme.palette.common.white};
color: ${({ theme }) => theme.palette.background.main};
}

path.icon-color {
fill: ${({ theme }) => theme.palette.common.white};
fill: ${({ theme }) => theme.palette.background.main};
}

&:disabled {
Expand Down
2 changes: 1 addition & 1 deletion apps/tx-builder/src/components/Divider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ type Props = {

const HorizontalDivider = styled.div`
margin: 16px -1.6rem;
border-top: solid 1px #dcdee0;
border-top: solid 1px ${({ theme }) => theme.palette.border.light};
width: calc(100% + 3.2rem);
`

Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import React from 'react'

const icon = (
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
<path
fill="#008C73"
fillRule="evenodd"
d="M3.431 7.99h2.6c.554 0 1.004.45 1.004 1.005C7.035 9.55 6.585 10 6.03 10H1.005c-.277 0-.529-.112-.71-.294C.111 9.524 0 9.272 0 8.995V3.97c0-.555.45-1.005 1.005-1.005.555 0 1.005.45 1.005 1.005v2.599L8.284.294c.393-.392 1.03-.392 1.422 0 .392.393.392 1.03 0 1.422L3.43 7.99z"
className="icon-color"
/>
</svg>
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ const icon = (
fill="#FFFFFF"
fillRule="evenodd"
d="M3.431 7.99h2.6c.554 0 1.004.45 1.004 1.005C7.035 9.55 6.585 10 6.03 10H1.005c-.277 0-.529-.112-.71-.294C.111 9.524 0 9.272 0 8.995V3.97c0-.555.45-1.005 1.005-1.005.555 0 1.005.45 1.005 1.005v2.599L8.284.294c.393-.392 1.03-.392 1.422 0 .392.393.392 1.03 0 1.422L3.43 7.99z"
className="icon-color"
/>
</svg>
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ const icon = (
fill="#F02525"
fillRule="evenodd"
d="M6.569 2.01h-2.6c-.554 0-1.004-.45-1.004-1.005C2.965.45 3.415 0 3.97 0h5.025c.277 0 .529.112.71.294.183.182.295.434.295.711V6.03c0 .555-.45 1.005-1.005 1.005-.555 0-1.005-.45-1.005-1.005V3.431L1.716 9.706c-.393.392-1.03.392-1.422 0-.392-.393-.392-1.03 0-1.422L6.57 2.01z"
className="icon-color"
/>
</svg>
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ const icon = (
fill="#FFFFFF"
fillRule="evenodd"
d="M6.569 2.01h-2.6c-.554 0-1.004-.45-1.004-1.005C2.965.45 3.415 0 3.97 0h5.025c.277 0 .529.112.71.294.183.182.295.434.295.711V6.03c0 .555-.45 1.005-1.005 1.005-.555 0-1.005-.45-1.005-1.005V3.431L1.716 9.706c-.393.392-1.03.392-1.422 0-.392-.393-.392-1.03 0-1.422L6.57 2.01z"
className="icon-color"
/>
</svg>
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ const icon = (
fill="#5D6D74"
fillRule="evenodd"
d="M4.984 4.608l1.302-1.322c.384-.384 1.024-.384 1.408 0 .384.384.384 1.024 0 1.408L4.728 7.702C4.537 7.893 4.28 8 4.024 8c-.256 0-.511-.107-.704-.298L.29 4.694c-.426-.427-.383-1.152.13-1.515.404-.298.98-.213 1.322.15l1.13 1.108.129.022V.982C3 .427 3.447 0 3.98 0c.577 0 1.004.448 1.004.982v3.626z"
className="icon-color"
/>
</svg>
)
Expand Down
1 change: 1 addition & 0 deletions apps/tx-builder/src/components/FixedIcon/images/bullit.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ const icon = (
<path
fill="#008C73"
fillRule="evenodd"
className="icon-color"
d="M3 0C1.347 0 0 1.347 0 3s1.347 3 3 3 3-1.347 3-3-1.347-3-3-3z"
/>
</svg>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ const icon = (
<path
fill="#B2B5B2"
fillRule="evenodd"
className="icon-color"
d="M6.709 6.709c-.195.195-.452.292-.71.29-.257.002-.514-.095-.71-.29l-.046-.05L.292 1.706c-.39-.39-.39-1.025 0-1.414.389-.39 1.025-.39 1.414 0l4.293 4.294L10.293.292c.389-.39 1.025-.39 1.414 0 .389.389.389 1.025 0 1.414L6.763 6.649l-.054.06z"
/>
</svg>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ const icon = (
<svg xmlns="http://www.w3.org/2000/svg" width="7" height="12" viewBox="0 0 7 12">
<path
fill="#B2B5B2"
className="icon-color"
fillRule="evenodd"
d="M.291 5.29l.06-.054L5.294.292c.389-.39 1.025-.39 1.414 0 .389.389.389 1.025 0 1.414L2.414 6l4.294 4.293c.389.389.389 1.025 0 1.414s-1.025.389-1.414 0L.341 6.756l-.05-.047c-.195-.195-.292-.452-.291-.71-.001-.257.096-.514.291-.71z"
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ const icon = (
<svg xmlns="http://www.w3.org/2000/svg" width="7" height="12" viewBox="0 0 7 12">
<path
fill="#B2B5B2"
className="icon-color"
fillRule="evenodd"
d="M6.709 5.29l-.06-.054L1.706.292c-.39-.39-1.025-.39-1.414 0-.39.389-.39 1.025 0 1.414L4.586 6 .292 10.293c-.39.389-.39 1.025 0 1.414.389.389 1.025.389 1.414 0l4.953-4.951.05-.047c.195-.195.292-.452.29-.71.002-.257-.095-.514-.29-.71"
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ const icon = (
<path
fill="#B2B5B2"
fillRule="evenodd"
className="icon-color"
d="M6.709.291l.054.06 4.944 4.943c.389.389.389 1.025 0 1.414-.39.389-1.025.389-1.414 0L5.999 2.414 1.706 6.708c-.39.389-1.025.389-1.414 0-.39-.389-.39-1.025 0-1.414L5.242.341l.048-.05c.195-.195.452-.292.709-.291.258-.001.515.096.71.291z"
/>
</svg>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ const icon = (
<path
fill="#E8673C"
d="M4.5 9C6.985 9 9 6.985 9 4.5S6.985 0 4.5 0 0 2.015 0 4.5 2.015 9 4.5 9zm0-2C3.12 7 2 5.88 2 4.5S3.12 2 4.5 2 7 3.12 7 4.5 5.88 7 4.5 7z"
className="icon-color"
/>
</svg>
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ const icon = (
<path
fill="#008C73"
d="M4.5 9C6.985 9 9 6.985 9 4.5S6.985 0 4.5 0 0 2.015 0 4.5 2.015 9 4.5 9zm0-2C3.12 7 2 5.88 2 4.5S3.12 2 4.5 2 7 3.12 7 4.5 5.88 7 4.5 7z"
className="icon-color"
/>
</svg>
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ const icon = (
<path
fill="#FFF"
fillRule="nonzero"
className="icon-color"
d="M17 27c5.523 0 10-4.477 10-10S22.523 7 17 7c-5.462 0-9.911 4.382-9.999 9.836-.009.553.432 1.007.984 1.016.552.01 1.007-.431 1.016-.984C9.071 12.506 12.631 9 17 9c4.418 0 8 3.582 8 8s-3.582 8-8 8c-.552 0-1 .448-1 1s.448 1 1 1z"
/>
</g>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ const icon = (
<path
fill="#5D6D74"
d="M3.858 4.754c.355.328.93.328 1.284 0l3.59-3.32C9.305.906 8.899 0 8.09 0H.91C.101 0-.305.907.268 1.436l3.59 3.319z"
className="icon-color"
/>
</svg>
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react'

const icon = (
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="4" viewBox="0 0 16 4">
<g fill="#B2B5B2" fillRule="evenodd">
<g fill="#B2B5B2" className="icon-color" fillRule="evenodd">
<circle cx="2" cy="2" r="2" />
<circle cx="8" cy="2" r="2" />
<circle cx="14" cy="2" r="2" />
Expand Down
2 changes: 2 additions & 0 deletions apps/tx-builder/src/components/FixedIcon/images/plus.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,14 @@ const icon = (
clip-rule="evenodd"
d="M11.7895 4C12.3708 4 12.8421 4.47128 12.8421 5.05263L12.8421 18.9474C12.8421 19.5287 12.3708 20 11.7895 20C11.2081 20 10.7368 19.5287 10.7368 18.9474L10.7368 5.05263C10.7368 4.47128 11.2081 4 11.7895 4Z"
fill="#F4F4F4"
className="icon-color"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M20 11.7895C20 12.3708 19.5287 12.8421 18.9474 12.8421L5.05263 12.8421C4.47128 12.8421 4 12.3708 4 11.7895C4 11.2081 4.47128 10.7368 5.05263 10.7368L18.9474 10.7368C19.5287 10.7368 20 11.2081 20 11.7895Z"
fill="#F4F4F4"
className="icon-color"
/>
</svg>
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ const icon = (
<path
fill="#B2B5B2"
fillRule="evenodd"
className="icon-color"
d="M7 10c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3m6.068-4.209l-.3-.03c-.683-.068-1-.437-1.137-.67-.068-.255-.11-.74.316-1.286l.199-.242c.54-.607.354-.963-.035-1.352l-.322-.32c-.39-.39-.744-.576-1.353-.037l-.235.192c-.535.44-1.025.397-1.285.328-.232-.135-.609-.45-.677-1.14l-.03-.3C8.16.12 7.777 0 7.228 0h-.456c-.55 0-.932.121-.98.933l-.03.31c-.084.686-.458 1-.686 1.133-.261.068-.747.105-1.277-.33l-.235-.192c-.609-.539-.964-.353-1.353.036l-.322.321c-.389.39-.575.745-.035 1.352l.2.242c.424.545.383 1.031.315 1.286-.137.233-.454.602-1.137.67l-.3.03c-.811.05-.932.431-.932.981v.456c0 .55.121.933.932.98l.31.03c.686.085 1 .458 1.133.686.068.262.105.748-.33 1.278l-.192.235c-.539.607-.353.963.036 1.352l.322.32c.39.39.744.576 1.353.037l.242-.2c.539-.421 1.02-.384 1.277-.317.229.135.596.449.679 1.128l.03.31c.048.812.43.933.98.933h.456c.55 0 .932-.121.981-.932l.03-.301c.067-.683.437-1 .67-1.137.255-.067.741-.11 1.285.316l.242.2c.609.539.964.354 1.353-.036l.322-.321c.389-.39.575-.745.036-1.352l-.192-.235c-.435-.53-.398-1.016-.33-1.278.133-.228.447-.601 1.133-.686l.31-.03c.811-.047.932-.43.932-.98v-.456c0-.55-.121-.932-.932-.98"
/>
</svg>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react'

const icon = (
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="4" viewBox="0 0 20 4">
<g fill="#B2B5B2" fillRule="evenodd">
<g fill="#B2B5B2" className="icon-color" fillRule="evenodd">
<rect width="4" height="4" x="16" rx="2" />
<rect width="4" height="4" x="8" rx="2" />
<rect width="4" height="4" rx="2" />
Expand Down
12 changes: 11 additions & 1 deletion apps/tx-builder/src/components/FixedIcon/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,17 @@ import creatingInProgress from './images/creatingInProgress'
import notOwner from './images/notOwner'
import notConnected from './images/notConnected'
import networkError from './images/networkError'
import styled from 'styled-components'

const StyledIcon = styled.span`
.icon-color {
fill: ${({ theme }) => theme.palette.text.primary};
}

.icon-stroke {
fill: ${({ theme }) => theme.palette.text.primary};
}
`
const icons = {
arrowSort,
connectedRinkeby,
Expand Down Expand Up @@ -57,7 +67,7 @@ type Props = {
* The `FixedIcon` renders an icon
*/
function FixedIcon({ type }: Props): React.ReactElement {
return <span>{icons[type]}</span>
return <StyledIcon>{icons[type]}</StyledIcon>
}

export default FixedIcon
11 changes: 7 additions & 4 deletions apps/tx-builder/src/components/GenericModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { makeStyles } from '@material-ui/core/styles'
import { alpha } from '@material-ui/core/styles'
import styled from 'styled-components'
import Media from 'react-media'
import { defaultTheme } from '../theme/safeTheme'
import { Typography } from '@material-ui/core'
import { Icon } from './Icon'

Expand Down Expand Up @@ -50,6 +49,11 @@ const FooterSection = styled.div`
padding: 16px 24px;
`

const ModalPaper = styled.div`
background: ${({ theme }) => theme.palette.background.paper};
color: ${({ theme }) => theme.palette.text.primary};
`

export type GenericModalProps = {
title: string | React.ReactNode
body: React.ReactNode
Expand All @@ -72,7 +76,6 @@ const useStyles = makeStyles({
top: (props: { smallHeight: boolean }) => (props.smallHeight ? 'unset' : '121px'),
minWidth: '500px',
width: (props: { smallHeight: boolean }) => (props.smallHeight ? '500px' : 'inherit'),
backgroundColor: defaultTheme.palette.common.white,
borderRadius: '8px',
boxShadow: `0 0 0.75 0 #28363D`,

Expand All @@ -94,7 +97,7 @@ const GenericModalComponent = ({

return (
<Modal open className={classes.modal}>
<div className={classes.paper}>
<ModalPaper className={classes.paper}>
<TitleSection>
<Typography variant="h6">{title}</Typography>
<StyledButton onClick={onClose}>
Expand All @@ -107,7 +110,7 @@ const GenericModalComponent = ({
</BodySection>

{footer && <FooterSection>{footer}</FooterSection>}
</div>
</ModalPaper>
</Modal>
)
}
Expand Down
5 changes: 3 additions & 2 deletions apps/tx-builder/src/components/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -92,9 +92,10 @@ const HeaderWrapper = styled.header`
width: 100%;
display: flex;
align-items: center;
border-bottom: 1px solid #e2e3e3;
border-bottom: 1px solid ${({ theme }) => theme.palette.border.light};
z-index: 10;
background-color: white;
background-color: ${({ theme }) => theme.palette.background.paper};
color: ${({ theme }) => theme.palette.text.primary};
height: 70px;
padding: 0 40px;
box-sizing: border-box;
Expand Down
2 changes: 2 additions & 0 deletions apps/tx-builder/src/components/Icon/images/bookmark.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,14 @@ const Bookmark = {
clip-rule="evenodd"
d="M4.875 3.2C4.70924 3.2 4.55027 3.26321 4.43306 3.37574C4.31585 3.48826 4.25 3.64087 4.25 3.8V12.2341L7.63673 9.91176C7.85404 9.76275 8.14596 9.76275 8.36327 9.91176L11.75 12.2341V3.8C11.75 3.64087 11.6842 3.48826 11.5669 3.37574C11.4497 3.26321 11.2908 3.2 11.125 3.2H4.875ZM3.54917 2.52721C3.90081 2.18964 4.37772 2 4.875 2H11.125C11.6223 2 12.0992 2.18964 12.4508 2.52721C12.8025 2.86477 13 3.32261 13 3.8V13.4C13 13.6248 12.8692 13.8307 12.661 13.9335C12.4528 14.0363 12.2022 14.0189 12.0117 13.8882L8 11.1373L3.98827 13.8882C3.79776 14.0189 3.54718 14.0363 3.33901 13.9335C3.13084 13.8307 3 13.6248 3 13.4V3.8C3 3.32261 3.19754 2.86477 3.54917 2.52721Z"
fill="black"
className="icon-color"
/>
</svg>
),
md: (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
className="icon-color"
fill-rule="evenodd"
clip-rule="evenodd"
d="M4.875 3.2C4.70924 3.2 4.55027 3.26321 4.43306 3.37574C4.31585 3.48826 4.25 3.64087 4.25 3.8V12.2341L7.63673 9.91176C7.85404 9.76275 8.14596 9.76275 8.36327 9.91176L11.75 12.2341V3.8C11.75 3.64087 11.6842 3.48826 11.5669 3.37574C11.4497 3.26321 11.2908 3.2 11.125 3.2H4.875ZM3.54917 2.52721C3.90081 2.18964 4.37772 2 4.875 2H11.125C11.6223 2 12.0992 2.18964 12.4508 2.52721C12.8025 2.86477 13 3.32261 13 3.8V13.4C13 13.6248 12.8692 13.8307 12.661 13.9335C12.4528 14.0363 12.2022 14.0189 12.0117 13.8882L8 11.1373L3.98827 13.8882C3.79776 14.0189 3.54718 14.0363 3.33901 13.9335C3.13084 13.8307 3 13.6248 3 13.4V3.8C3 3.32261 3.19754 2.86477 3.54917 2.52721Z"
Expand Down
2 changes: 2 additions & 0 deletions apps/tx-builder/src/components/Icon/images/edit.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ const Edit = {
clip-rule="evenodd"
d="M11.7286 6.02792L10.0079 4.29259L11.6539 2.67925L13.3186 4.35859C13.3226 4.36259 13.3153 4.42659 13.3199 4.43059L11.7286 6.02792ZM4.39325 13.3333H2.66659V11.5859L9.05658 5.22725L10.7866 6.97192L4.39325 13.3333ZM14.6666 4.37125C14.6619 4.00059 14.5146 3.65792 14.2653 3.41992L12.6126 1.75325C12.3666 1.49059 12.0159 1.33792 11.6493 1.33325H11.6313C11.2639 1.33325 10.9079 1.48125 10.6526 1.73792L1.52992 10.8359C1.40459 10.9606 1.33325 11.1313 1.33325 11.3086V13.9999C1.33325 14.3686 1.63125 14.6666 1.99992 14.6666H4.66859C4.84525 14.6666 5.01392 14.5973 5.13859 14.4726L14.2653 5.37125C14.5253 5.10859 14.6719 4.74392 14.6666 4.37125Z"
fill="#A1A3A7"
className="icon-color"
/>
</svg>
),
Expand All @@ -14,6 +15,7 @@ const Edit = {
<path
fill-rule="evenodd"
clip-rule="evenodd"
className="icon-color"
d="M11.7286 6.02792L10.0079 4.29259L11.6539 2.67925L13.3186 4.35859C13.3226 4.36259 13.3153 4.42659 13.3199 4.43059L11.7286 6.02792ZM4.39325 13.3333H2.66659V11.5859L9.05658 5.22725L10.7866 6.97192L4.39325 13.3333ZM14.6666 4.37125C14.6619 4.00059 14.5146 3.65792 14.2653 3.41992L12.6126 1.75325C12.3666 1.49059 12.0159 1.33792 11.6493 1.33325H11.6313C11.2639 1.33325 10.9079 1.48125 10.6526 1.73792L1.52992 10.8359C1.40459 10.9606 1.33325 11.1313 1.33325 11.3086V13.9999C1.33325 14.3686 1.63125 14.6666 1.99992 14.6666H4.66859C4.84525 14.6666 5.01392 14.5973 5.13859 14.4726L14.2653 5.37125C14.5253 5.10859 14.6719 4.74392 14.6666 4.37125Z"
fill="#A1A3A7"
/>
Expand Down
4 changes: 4 additions & 0 deletions apps/tx-builder/src/components/Icon/images/import.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,14 @@ const Import = {
fill-rule="evenodd"
clip-rule="evenodd"
d="M8.66699 10.3893L8.66699 2.00062C8.66699 1.63195 8.36832 1.33395 8.00032 1.33395C7.63166 1.33395 7.33366 1.63195 7.33366 2.00062L7.33366 10.3893L4.58566 7.64195C4.32499 7.38128 3.90299 7.38128 3.64299 7.64195C3.38232 7.90262 3.38232 8.32395 3.64299 8.58462L7.41432 12.3559C7.43366 12.3753 7.45432 12.3933 7.47499 12.4093C7.59766 12.5659 7.78699 12.6653 8.00032 12.6653C8.21299 12.6653 8.40299 12.5659 8.52499 12.4093C8.54566 12.3933 8.56699 12.3753 8.58566 12.3559L12.357 8.58462C12.6177 8.32395 12.6177 7.90262 12.357 7.64195C12.097 7.38128 11.675 7.38128 11.4143 7.64195L8.66699 10.3893Z"
className="icon-color"
fill="black"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M2.00033 13.3334L14.0003 13.3334C14.367 13.3334 14.667 13.6334 14.667 14.0001C14.667 14.3667 14.367 14.6667 14.0003 14.6667L2.00033 14.6667C1.63299 14.6667 1.33366 14.3667 1.33366 14.0001C1.33366 13.6334 1.63299 13.3334 2.00033 13.3334Z"
className="icon-color"
fill="black"
/>
</svg>
Expand All @@ -21,10 +23,12 @@ const Import = {
fill-rule="evenodd"
clip-rule="evenodd"
d="M8.66699 10.3893L8.66699 2.00062C8.66699 1.63195 8.36832 1.33395 8.00032 1.33395C7.63166 1.33395 7.33366 1.63195 7.33366 2.00062L7.33366 10.3893L4.58566 7.64195C4.32499 7.38128 3.90299 7.38128 3.64299 7.64195C3.38232 7.90262 3.38232 8.32395 3.64299 8.58462L7.41432 12.3559C7.43366 12.3753 7.45432 12.3933 7.47499 12.4093C7.59766 12.5659 7.78699 12.6653 8.00032 12.6653C8.21299 12.6653 8.40299 12.5659 8.52499 12.4093C8.54566 12.3933 8.56699 12.3753 8.58566 12.3559L12.357 8.58462C12.6177 8.32395 12.6177 7.90262 12.357 7.64195C12.097 7.38128 11.675 7.38128 11.4143 7.64195L8.66699 10.3893Z"
className="icon-color"
fill="black"
/>
<path
fill-rule="evenodd"
className="icon-color"
clip-rule="evenodd"
d="M2.00033 13.3334L14.0003 13.3334C14.367 13.3334 14.667 13.6334 14.667 14.0001C14.667 14.3667 14.367 14.6667 14.0003 14.6667L2.00033 14.6667C1.63299 14.6667 1.33366 14.3667 1.33366 14.0001C1.33366 13.6334 1.63299 13.3334 2.00033 13.3334Z"
fill="black"
Expand Down
Loading
Loading