legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: remove unused success popups and implement a unified SuccessModal component

Browse Source
This commit is contained in:
fredy.siswanto 2025-02-23 14:59:26 +07:00
parent 15f8dbb8e2
commit a261df3a96
8 changed files with 197 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/components/popup/modal.tsx
View File

@ -37,16 +37,16 @@ export const PopupModal = ({
/>
<div className="fixed inset-0 flex w-screen justify-center overflow-y-auto p-4 max-sm:bg-white sm:items-center">
<DialogPanel className="max-w-lg space-y-6 rounded-lg bg-white p-8 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0 sm:shadow-lg">
<button
onClick={onClose}
className="top-4 left-4 items-center lg:hidden"
>
<LeftArrow
width={50}
height={50}
/>
</button>
<DialogTitle className="flex justify-center">
<DialogTitle className="relative flex justify-center">
<button
onClick={onClose}
className="absolute top-0 left-0 items-center lg:hidden"
>
<LeftArrow
width={50}
height={50}
/>
</button>
<img
src={APP.logo}
alt={APP.title}

24
app/components/popup/succes-payment.tsx
View File

@ -1,24 +0,0 @@
import { Button } from '@headlessui/react'
import { APP } from '~/data/meta'
export default function PopupSuccessPayment() {
return (
<>
<div className="relative flex flex-col items-center justify-center">
<div className="mb-4 p-4 text-center">
<div className="flex justify-center">
<img
src={'/public/images/back-to-home.svg'}
alt={APP.title}
className="h-[300px]"
/>
</div>
<Button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
Back to Home
</Button>
</div>
</div>
</>
)
}

49
app/components/popup/succes-register.tsx
View File

@ -1,49 +0,0 @@
import { Button } from '@headlessui/react'
import { Link } from 'react-router'
import { LeftArrow } from '~/components/icons/left-arrow'
import { APP } from '~/data/meta'
export default function PopupSuccesRegister() {
return (
<div className="flex min-h-screen items-center justify-center">
<div className="w-full max-w-md p-6">
<div className="absolute top-[80px] left-[50px]">
<Link
to="/#"
className="mt-2 h-full py-2"
>
<LeftArrow
width={'70px'}
height={'70px'}
></LeftArrow>
</Link>
</div>
<div className="mb-6 flex justify-center">
<Link to="/news">
<img
src={APP.logo}
alt={APP.title}
className="h-[80px]"
/>
</Link>
</div>
<div className="mb-4 p-4 text-center">
<p className="text-[#565658]">Selamat! pendaftaran anda berhasil!</p>
<div className="my-10 flex justify-center">
<img
src={'/public/images/back-to-home.svg'}
alt={APP.title}
className="h-[350px]"
/>
</div>
<Button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
Back to Home
</Button>
</div>
</div>
</div>
)
}

51
app/components/popup/succes-reset-pass.tsx
View File

@ -1,51 +0,0 @@
import { Button } from '@headlessui/react'
import { Link } from 'react-router'
import { LeftArrow } from '~/components/icons/left-arrow'
import { APP } from '~/data/meta'
export default function PopupSuccessResetPass() {
return (
<div className="flex min-h-screen items-center justify-center">
<div className="w-full max-w-md p-6">
<div className="absolute top-[80px] left-[50px]">
<Link
to="/#"
className="mt-2 h-full py-2"
>
<LeftArrow
width={'70px'}
height={'70px'}
></LeftArrow>
</Link>
</div>
<div className="mb-6 flex justify-center">
<Link to="/news">
<img
src={APP.logo}
alt={APP.title}
className="h-[80px]"
/>
</Link>
</div>
<div className="mb-4 p-4 text-center">
<p className="text-[#565658]">
Link Reset Password telah dikirmkan ke email anda
</p>
<div className="my-10 flex justify-center">
<img
src={'/public/images/back-to-home.svg'}
alt={APP.title}
className="h-[350px]"
/>
</div>
<Button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
Back to Home
</Button>
</div>
</div>
</div>
)
}

137
app/components/popup/success-modal.tsx Normal file
View File

@ -0,0 +1,137 @@
import {
Description,
Dialog,
DialogBackdrop,
DialogPanel,
DialogTitle,
} from '@headlessui/react'
import type { ReactNode } from 'react'
import { LeftArrow } from '~/components/icons/left-arrow'
import { Button } from '~/components/ui/button'
import { APP } from '~/data/meta'
type ModalProperties = {
isOpen: boolean
onClose: () => void
children?: ReactNode
type:
| 'success'
| 'error'
| 'warning'
| 'success-reset-password'
| 'success-register'
| 'success-payment'
}
type DescriptionMap = {
[key in ModalProperties['type']]: string
}
const DESCRIPTIONS: DescriptionMap = {
'success-reset-password':
'Link Reset Password telah dikirimkan ke email anda',
'success-register': 'Selamat! pendaftaran anda berhasil!',
'success-payment': 'Selamat! Pembayaran anda berhasil!',
warning:
'Mohon maaf fitur berikut hanya untuk anggota yang sudah tersubscribe',
error: 'Terjadi kesalahan. Silakan coba lagi.',
success: '',
}
export const SuccessModal = ({
isOpen,
onClose,
type = 'success-register',
}: ModalProperties) => {
if (!isOpen) return
const message = DESCRIPTIONS[type] || 'Terjadi kesalahan. Silakan coba lagi.'
return (
<Dialog
open={isOpen}
onClose={onClose}
className="relative z-50"
transition
>
<DialogBackdrop
className="fixed inset-0 bg-black/50 duration-300 ease-out data-[closed]:opacity-0"
transition
/>
<div className="fixed inset-0 flex w-screen justify-center overflow-y-auto p-4 max-sm:bg-white sm:items-center">
<DialogPanel className="max-w-lg space-y-6 rounded-lg bg-white p-8 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0 sm:shadow-lg">
<DialogTitle className="relative flex justify-center">
<button
onClick={onClose}
className="absolute top-0 left-0 items-center lg:hidden"
>
<LeftArrow
width={50}
height={50}
/>
</button>
<img
src={APP.logo}
alt={APP.title}
className="h-[80px]"
/>
</DialogTitle>
<Description className="text-center text-[#565658]">
{message}
</Description>
<div className="relative">
<div className="relative flex flex-col items-center justify-center">
<div className="mb-4 p-4 text-center">
{[
'success-reset-password',
'success-register',
'success-payment',
].includes(type) && (
<div className="justify-center">
<img
src={'/images/back-to-home.svg'}
alt={APP.title}
className="h-[300px]"
/>
<Button
className="mt-5 w-full rounded-md"
variant={'newsPrimary'}
onClick={onClose}
>
Back to Home
</Button>
</div>
)}
{type === 'warning' && (
<div className="justify-center">
<img
src={'/images/warning.svg'}
alt={APP.title}
className="h-[300px]"
/>
<div>
<Button
className="mt-5 w-full rounded-md"
variant={'newsPrimary'}
>
Login
</Button>
<Button
className="mt-5 w-full rounded-md"
variant={'newsSecondary'}
>
Select Subscription
</Button>
</div>
</div>
)}
</div>
</div>
</div>
</DialogPanel>
</div>
</Dialog>
)
}

5
app/contexts/news.tsx
View File

@ -14,6 +14,8 @@ type NewsContextProperties = {
setIsRegisterOpen: Dispatch<SetStateAction<boolean>>
isForgetOpen: boolean
setForgetOpen: Dispatch<SetStateAction<boolean>>
isSuccessOpen: boolean
setIsSuccessOpen: Dispatch<SetStateAction<boolean>>
}
const NewsContext = createContext<NewsContextProperties | undefined>(undefined)
@ -22,6 +24,7 @@ export const NewsProvider = ({ children }: PropsWithChildren) => {
const [isLoginOpen, setIsLoginOpen] = useState(false)
const [isRegisterOpen, setIsRegisterOpen] = useState(false)
const [isForgetOpen, setForgetOpen] = useState(false)
const [isSuccessOpen, setIsSuccessOpen] = useState(true)
return (
<NewsContext.Provider
@ -32,6 +35,8 @@ export const NewsProvider = ({ children }: PropsWithChildren) => {
setIsRegisterOpen,
isForgetOpen,
setForgetOpen,
isSuccessOpen,
setIsSuccessOpen,
}}
>
{children}

11
app/layouts/news/default.tsx
View File

@ -1,6 +1,7 @@
import { type PropsWithChildren } from 'react'
import { PopupModal } from '~/components/popup/modal'
import { SuccessModal } from '~/components/popup/success-modal'
import Banner from '~/components/ui/banner'
import FormForgotPassword from '~/components/ui/form-forgot-password'
import { FormLogin } from '~/components/ui/form-login'
@ -21,6 +22,8 @@ export const NewsDefaultLayout = (properties: PropsWithChildren) => {
setIsRegisterOpen,
isForgetOpen,
setForgetOpen,
isSuccessOpen,
setIsSuccessOpen,
} = useNewsContext()
return (
<main className="relative min-h-dvh bg-[#ECECEC]">
@ -65,6 +68,14 @@ export const NewsDefaultLayout = (properties: PropsWithChildren) => {
>
<FormForgotPassword />
</PopupModal>
<SuccessModal
isOpen={isSuccessOpen}
onClose={() => {
setIsSuccessOpen(false)
}}
type="warning"
/>
</main>
)
}

34
public/images/warning.svg Normal file
View File

@ -0,0 +1,34 @@
<svg width="350" height="276" viewBox="0 0 350 276" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M260.114 155.49C295.644 155.49 324.446 126.684 324.446 91.1516C324.446 55.6188 295.644 26.8137 260.114 26.8137C224.585 26.8137 195.783 55.6188 195.783 91.1516C195.783 126.684 224.585 155.49 260.114 155.49Z" fill="#DBE8EC"/>
<path d="M324.776 146.125V136.329C324.776 135.404 324.593 134.488 324.239 133.633C323.886 132.779 323.367 132.002 322.713 131.348C322.059 130.694 321.282 130.175 320.428 129.821C319.573 129.467 318.658 129.285 317.733 129.285H298.259C296.391 129.285 294.6 128.543 293.279 127.222C291.958 125.901 291.216 124.11 291.216 122.242V112.445C291.216 108.555 299.754 105.402 303.643 105.402H304.428C306.296 105.402 308.087 104.66 309.408 103.339C310.729 102.018 311.471 100.226 311.471 98.3583V88.5621C311.471 86.694 310.729 84.9025 309.408 83.5816C308.087 82.2606 306.296 81.5186 304.428 81.5186H66.4783C65.5534 81.5186 64.6376 81.7007 63.7831 82.0547C62.9286 82.4087 62.1523 82.9275 61.4983 83.5816C60.8443 84.2356 60.3255 85.0121 59.9716 85.8666C59.6177 86.7212 59.4355 87.6371 59.4355 88.5621V98.3583C59.4355 99.2833 59.6177 100.199 59.9716 101.054C60.3255 101.908 60.8443 102.685 61.4983 103.339C62.1523 103.993 62.9286 104.512 63.7831 104.866C64.6376 105.22 65.5534 105.402 66.4783 105.402C67.4031 105.402 68.319 105.584 69.1734 105.938C70.0279 106.292 70.8043 106.811 71.4583 107.465C72.1123 108.119 72.631 108.895 72.985 109.75C73.3389 110.604 73.5211 111.52 73.5211 112.445V122.242C73.5211 124.11 72.7791 125.901 71.4583 127.222C70.1375 128.543 68.3461 129.285 66.4783 129.285H39.2432C37.3754 129.285 35.584 130.027 34.2632 131.348C32.9424 132.669 32.2004 134.461 32.2004 136.329V146.125C32.2004 147.993 32.9424 149.784 34.2632 151.105C35.584 152.426 37.3754 153.168 39.2432 153.168H49.9298C50.8547 153.168 51.7705 153.351 52.625 153.705C53.4795 154.059 54.2559 154.577 54.9098 155.231C55.5638 155.885 56.0826 156.662 56.4365 157.516C56.7905 158.371 56.9726 159.287 56.9726 160.212V170.008C56.9726 171.876 56.2306 173.668 54.9098 174.989C53.5891 176.31 51.7977 177.052 49.9298 177.052H49.904C48.0361 177.052 46.2448 177.794 44.924 179.115C43.6032 180.436 42.8612 182.227 42.8612 184.095V193.891C42.8612 195.759 43.6032 197.551 44.924 198.872C46.2448 200.193 48.0362 200.935 49.904 200.935H51.4502C53.318 200.935 55.1094 201.677 56.4301 202.998C57.7509 204.319 58.4929 206.11 58.4929 207.978V217.775C58.4929 218.7 58.3108 219.616 57.9568 220.47C57.6029 221.325 57.0841 222.101 56.4301 222.755C55.7762 223.409 54.9998 223.928 54.1453 224.282C53.2908 224.636 52.375 224.818 51.4502 224.818H42.2293C40.3614 224.818 38.57 225.56 37.2493 226.881C35.9285 228.202 35.1865 229.994 35.1865 231.862V241.658C35.1865 243.526 35.9285 245.318 37.2493 246.639C38.57 247.959 40.3614 248.702 42.2293 248.702H302.825C304.693 248.702 306.484 247.959 307.805 246.639C309.126 245.318 309.867 243.526 309.867 241.658V231.862C309.867 229.994 309.126 228.202 307.805 226.881C306.484 225.56 304.693 224.818 302.825 224.818H296.718C295.793 224.818 294.878 224.636 294.023 224.282C293.169 223.928 292.392 223.409 291.738 222.755C291.084 222.101 290.566 221.325 290.212 220.47C289.858 219.616 289.676 218.7 289.676 217.775V207.978C289.676 206.11 290.418 204.319 291.738 202.998C293.059 201.677 294.85 200.935 296.718 200.935H311.117C312.985 200.935 314.776 200.193 316.097 198.872C317.417 197.551 318.159 195.759 318.159 193.891V184.095C318.159 183.17 317.977 182.254 317.623 181.4C317.269 180.545 316.751 179.769 316.097 179.115C315.443 178.461 314.666 177.942 313.812 177.588C312.957 177.234 312.042 177.052 311.117 177.052H306.749C305.824 177.052 304.908 176.87 304.054 176.516C303.199 176.162 302.423 175.643 301.769 174.989C301.115 174.335 300.596 173.558 300.242 172.704C299.888 171.849 299.706 170.933 299.706 170.008V160.212C299.706 158.344 300.448 156.552 301.769 155.231C303.09 153.91 304.881 153.168 306.749 153.168H317.733C318.658 153.168 319.573 152.986 320.428 152.632C321.282 152.278 322.059 151.759 322.713 151.105C323.367 150.451 323.886 149.675 324.239 148.82C324.593 147.966 324.776 147.05 324.776 146.125Z" fill="#DBE8EC"/>
<path d="M253.367 90.6536C225.93 90.1893 198.576 82.3596 173.765 67.7417C148.976 82.3596 121.623 90.1893 94.1794 90.6536C88.5865 150.364 106.656 222.213 173.765 248.907C240.897 222.213 258.898 150.364 253.367 90.6536Z" fill="#409CB5"/>
<path d="M234.675 106.545C213.68 106.189 192.75 100.198 173.765 89.0129C154.797 100.198 133.867 106.189 112.868 106.545C108.589 152.234 122.415 207.211 173.765 227.636C225.132 207.211 238.907 152.234 234.675 106.545Z" fill="#DBE8EC"/>
<path d="M261.701 128.404C283.454 128.404 301.088 110.768 301.088 89.0128C301.088 67.2579 283.454 49.6221 261.701 49.6221C239.948 49.6221 222.314 67.2579 222.314 89.0128C222.314 110.768 239.948 128.404 261.701 128.404Z" fill="#EE781D"/>
<path d="M262.84 104.44H242.13C241.73 104.44 241.337 104.335 240.991 104.135C240.645 103.935 240.357 103.648 240.157 103.302C239.957 102.955 239.852 102.562 239.852 102.163C239.852 101.763 239.957 101.37 240.157 101.024L250.513 83.0857L260.868 65.1477C261.068 64.8014 261.355 64.5139 261.702 64.314C262.048 64.114 262.441 64.0088 262.84 64.0088C263.24 64.0088 263.633 64.114 263.979 64.314C264.326 64.5139 264.613 64.8014 264.813 65.1477L275.168 83.0857L285.524 101.024C285.724 101.37 285.829 101.763 285.829 102.163C285.829 102.562 285.724 102.955 285.524 103.302C285.324 103.648 285.036 103.935 284.69 104.135C284.344 104.335 283.951 104.44 283.551 104.44L262.84 104.44Z" fill="#F9AE2B"/>
<path d="M263.98 74.7777C263.98 74.1484 263.47 73.6382 262.84 73.6382C262.211 73.6382 261.701 74.1484 261.701 74.7777V91.7649C261.701 92.3942 262.211 92.9044 262.84 92.9044C263.47 92.9044 263.98 92.3942 263.98 91.7649V74.7777Z" fill="#409CB5"/>
<path d="M265.553 98.619C265.701 97.1207 264.607 95.7858 263.109 95.6374C261.611 95.4891 260.276 96.5834 260.128 98.0817C259.979 99.58 261.074 100.915 262.572 101.063C264.07 101.212 265.405 100.117 265.553 98.619Z" fill="#409CB5"/>
<path d="M163.602 149.059V135.222C163.602 133.835 163.877 132.461 164.411 131.181C164.945 129.9 165.727 128.738 166.713 127.762C167.699 126.785 168.868 126.014 170.153 125.492C171.439 124.97 172.815 124.708 174.202 124.721H175.356C176.743 124.707 178.12 124.969 179.405 125.491C180.691 126.012 181.86 126.784 182.846 127.76C183.832 128.737 184.614 129.899 185.148 131.18C185.682 132.461 185.957 133.835 185.956 135.222V139.884C185.959 140.196 186.083 140.495 186.304 140.717C186.524 140.939 186.823 141.065 187.135 141.069L192.718 141.095C192.874 141.095 193.028 141.065 193.173 141.006C193.317 140.946 193.449 140.859 193.559 140.749C193.67 140.639 193.758 140.508 193.818 140.364C193.878 140.22 193.909 140.065 193.909 139.909V135.994C193.91 133.592 193.437 131.213 192.517 128.995C191.598 126.776 190.25 124.76 188.551 123.062C186.852 121.365 184.835 120.019 182.615 119.102C180.395 118.185 178.017 117.715 175.615 117.718H173.943C171.542 117.716 169.164 118.187 166.945 119.105C164.726 120.022 162.71 121.368 161.012 123.065C159.313 124.763 157.966 126.778 157.047 128.996C156.128 131.215 155.655 133.593 155.655 135.994V149.429L163.602 149.059Z" fill="#EE781D"/>
<path d="M196.55 188.848C197.947 188.844 199.286 188.288 200.275 187.299C201.263 186.311 201.819 184.972 201.823 183.575V153.585C201.819 152.187 201.263 150.848 200.275 149.86C199.286 148.872 197.947 148.315 196.55 148.312H153.014C151.617 148.315 150.278 148.872 149.29 149.86C148.301 150.848 147.745 152.187 147.741 153.585V183.575C147.745 184.972 148.301 186.311 149.29 187.299C150.278 188.288 151.617 188.844 153.014 188.848H196.55Z" fill="#F9AE2B"/>
<path d="M174.782 158.599C173.285 158.604 171.851 159.201 170.793 160.259C169.735 161.318 169.138 162.752 169.133 164.249C169.159 165.099 169.38 165.932 169.778 166.684C170.176 167.435 170.741 168.085 171.43 168.584V175.214C171.43 176.104 171.783 176.956 172.412 177.585C173.04 178.214 173.893 178.567 174.782 178.567C175.671 178.567 176.524 178.214 177.152 177.585C177.781 176.956 178.134 176.104 178.134 175.214V168.584C178.822 168.084 179.386 167.434 179.784 166.682C180.182 165.931 180.403 165.099 180.431 164.249C180.426 162.753 179.829 161.318 178.771 160.259C177.713 159.201 176.279 158.604 174.782 158.599Z" fill="#EE781D"/>
<path d="M67.4409 142.558H83.7674" stroke="#B9D4DB" stroke-width="3" stroke-miterlimit="10"/>
<path d="M67.4409 147.264H83.7674" stroke="#B9D4DB" stroke-width="3" stroke-miterlimit="10"/>
<path d="M67.4409 151.971H83.7674" stroke="#B9D4DB" stroke-width="3" stroke-miterlimit="10"/>
<path d="M296.208 41.876H312.534" stroke="#B9D4DB" stroke-width="3" stroke-miterlimit="10"/>
<path d="M296.208 46.5823H312.534" stroke="#B9D4DB" stroke-width="3" stroke-miterlimit="10"/>
<path d="M296.208 51.2883H312.534" stroke="#B9D4DB" stroke-width="3" stroke-miterlimit="10"/>
<path d="M265.566 160.404H281.893" stroke="#B9D4DB" stroke-width="3" stroke-miterlimit="10"/>
<path d="M265.566 165.11H281.893" stroke="#B9D4DB" stroke-width="3" stroke-miterlimit="10"/>
<path d="M265.566 169.816H281.893" stroke="#B9D4DB" stroke-width="3" stroke-miterlimit="10"/>
<path d="M123.231 73.9454C127.817 73.9454 131.534 70.2276 131.534 65.6415C131.534 61.0554 127.817 57.3376 123.231 57.3376C118.645 57.3376 114.928 61.0554 114.928 65.6415C114.928 70.2276 118.645 73.9454 123.231 73.9454Z" fill="#B9D4DB"/>
<path d="M125.31 53.161C127.699 53.161 129.635 51.2244 129.635 48.8356C129.635 46.4468 127.699 44.5103 125.31 44.5103C122.922 44.5103 120.986 46.4468 120.986 48.8356C120.986 51.2244 122.922 53.161 125.31 53.161Z" fill="#B9D4DB"/>
<path d="M140.533 51.7912C141.91 51.7912 143.028 50.6742 143.028 49.2962C143.028 47.9183 141.91 46.8013 140.533 46.8013C139.155 46.8013 138.038 47.9183 138.038 49.2962C138.038 50.6742 139.155 51.7912 140.533 51.7912Z" fill="#B9D4DB"/>
<path d="M142.013 69.1222C145.316 69.1222 147.993 66.4444 147.993 63.1412C147.993 59.838 145.316 57.1602 142.013 57.1602C138.71 57.1602 136.032 59.838 136.032 63.1412C136.032 66.4444 138.71 69.1222 142.013 69.1222Z" fill="#B9D4DB"/>
<path d="M242.362 239.082C246.948 239.082 250.665 235.364 250.665 230.778C250.665 226.192 246.948 222.474 242.362 222.474C237.777 222.474 234.059 226.192 234.059 230.778C234.059 235.364 237.777 239.082 242.362 239.082Z" fill="#B9D4DB"/>
<path d="M230.751 222.778C233.14 222.778 235.076 220.841 235.076 218.453C235.076 216.064 233.14 214.127 230.751 214.127C228.363 214.127 226.427 216.064 226.427 218.453C226.427 220.841 228.363 222.778 230.751 222.778Z" fill="#B9D4DB"/>
<path d="M240.82 209.52C242.198 209.52 243.315 208.403 243.315 207.025C243.315 205.647 242.198 204.53 240.82 204.53C239.442 204.53 238.325 205.647 238.325 207.025C238.325 208.403 239.442 209.52 240.82 209.52Z" fill="#B9D4DB"/>
<path d="M252.423 220.701C255.726 220.701 258.403 218.023 258.403 214.72C258.403 211.417 255.726 208.739 252.423 208.739C249.12 208.739 246.442 211.417 246.442 214.72C246.442 218.023 249.12 220.701 252.423 220.701Z" fill="#B9D4DB"/>
<path d="M82.9043 226.012C87.49 226.012 91.2073 222.295 91.2073 217.708C91.2073 213.122 87.49 209.405 82.9043 209.405C78.3187 209.405 74.6013 213.122 74.6013 217.708C74.6013 222.295 78.3187 226.012 82.9043 226.012Z" fill="#B9D4DB"/>
<path d="M71.2934 209.708C73.682 209.708 75.6183 207.772 75.6183 205.383C75.6183 202.994 73.682 201.058 71.2934 201.058C68.9048 201.058 66.9685 202.994 66.9685 205.383C66.9685 207.772 68.9048 209.708 71.2934 209.708Z" fill="#B9D4DB"/>
<path d="M81.3617 196.451C82.7396 196.451 83.8566 195.334 83.8566 193.956C83.8566 192.578 82.7396 191.461 81.3617 191.461C79.9837 191.461 78.8667 192.578 78.8667 193.956C78.8667 195.334 79.9837 196.451 81.3617 196.451Z" fill="#B9D4DB"/>
<path d="M92.9648 207.632C96.2677 207.632 98.9452 204.954 98.9452 201.651C98.9452 198.347 96.2677 195.67 92.9648 195.67C89.6619 195.67 86.9844 198.347 86.9844 201.651C86.9844 204.954 89.6619 207.632 92.9648 207.632Z" fill="#B9D4DB"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB