Skip to content

Commit

Permalink
svgs not inline
Browse files Browse the repository at this point in the history
  • Loading branch information
@hmcclew
hmcclew committed Nov 29, 2023
1 parent 47972df commit 79e09d0
Show file tree
Hide file tree
Showing 8 changed files with 134 additions and 121 deletions.
2 changes: 1 addition & 1 deletion client/src/components/AccountSideBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,4 +172,4 @@ const AccountSideBar = () => {
);
};

export default AccountSideBar;
export default AccountSideBar;
67 changes: 3 additions & 64 deletions client/src/components/PurchaseFiveCredits.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,73 +1,12 @@
import FiveCreditImage from '../images/purchase_five_credits.svg'

const PurchaseFiveCredits = () => {

return (
<div className="flex flex-col vertical-outlined-rectangle bg-FFF9F4">
5 Request Credits
<div className="flex items-center justify-center flex-1">
<svg width="214" height="212" viewBox="0 0 214 212" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="154" cy="60" r="55" fill="#F9DCD7" stroke="#FFF9F4" stroke-width="10"/>
<circle cx="154" cy="60" r="41.5" fill="#F9DCD7" stroke="#BC2C36"/>
<g clip-path="url(#clip0_1934_5669)">
<path d="M169.494 81.9083H138.502C138.048 81.9083 137.682 81.546 137.682 81.0973V57.4482C137.682 56.9995 138.048 56.6372 138.502 56.6372H169.494C169.948 56.6372 170.315 56.9995 170.315 57.4482V81.0973C170.315 81.546 169.948 81.9083 169.494 81.9083ZM139.323 80.2863H168.674V58.2592H139.323V80.2863Z" fill="#BC2C36"/>
<path d="M172.179 58.2535H135.821C135.367 58.2535 135 57.8912 135 57.4425V50.4624C135 50.0136 135.367 49.6514 135.821 49.6514H172.179C172.633 49.6514 173 50.0136 173 50.4624V57.4425C173 57.8912 172.633 58.2535 172.179 58.2535ZM136.641 56.6315H171.359V51.2734H136.641V56.6315Z" fill="#BC2C36"/>
<path d="M158.469 82.0002H149.53C149.076 82.0002 148.709 81.638 148.709 81.1892V57.4428C148.709 56.9941 149.076 56.6318 149.53 56.6318H158.469C158.923 56.6318 159.289 56.9941 159.289 57.4428V81.1892C159.289 81.638 158.923 82.0002 158.469 82.0002ZM150.35 80.3782H157.648V58.2539H150.35V80.3782Z" fill="#BC2C36"/>
<path d="M153.769 50.7275C153.567 50.7275 153.365 50.6518 153.211 50.5112C152.976 50.2949 152.889 49.9651 152.987 49.6677C153.321 48.6459 156.384 39.6274 160.854 38.1947C162.118 37.7892 163.403 38.027 164.58 38.8759C165.953 39.8707 166.133 40.9899 166.04 41.7469C165.537 45.8776 155.252 50.1868 154.081 50.6626C153.983 50.7058 153.873 50.7221 153.769 50.7221V50.7275ZM162.063 39.622C161.828 39.622 161.593 39.6599 161.357 39.7356C158.808 40.552 156.428 45.3045 155.192 48.408C159.169 46.5805 164.153 43.6392 164.41 41.5522C164.448 41.2386 164.41 40.7629 163.611 40.1843C163.092 39.8113 162.583 39.622 162.069 39.622H162.063Z" fill="#BC2C36"/>
<path d="M154.229 50.7274C154.125 50.7274 154.016 50.7058 153.917 50.668C152.746 50.1922 142.467 45.883 141.958 41.7523C141.865 40.9899 142.045 39.8761 143.419 38.8813C144.595 38.0216 145.881 37.7891 147.144 38.1946C151.614 39.622 154.672 48.6458 155.011 49.6677C155.11 49.9705 155.022 50.3003 154.787 50.5112C154.634 50.6517 154.431 50.7274 154.229 50.7274ZM145.935 39.622C145.421 39.622 144.907 39.8058 144.392 40.1843C143.594 40.7628 143.555 41.244 143.594 41.5522C143.851 43.6392 148.829 46.5805 152.812 48.4079C151.576 45.3045 149.196 40.552 146.646 39.7355C146.411 39.6599 146.176 39.622 145.941 39.622H145.935Z" fill="#BC2C36"/>
</g>
<circle cx="60" cy="60" r="55" fill="#F9DCD7" stroke="#FFF9F4" stroke-width="10"/>
<circle cx="60" cy="60" r="41.5" fill="#F9DCD7" stroke="#BC2C36"/>
<g clip-path="url(#clip1_1934_5669)">
<path d="M75.4942 81.9083H44.5023C44.0482 81.9083 43.6816 81.546 43.6816 81.0973V57.4482C43.6816 56.9995 44.0482 56.6372 44.5023 56.6372H75.4942C75.9483 56.6372 76.3148 56.9995 76.3148 57.4482V81.0973C76.3148 81.546 75.9483 81.9083 75.4942 81.9083ZM45.3229 80.2863H74.6736V58.2592H45.3229V80.2863Z" fill="#BC2C36"/>
<path d="M78.1794 58.2535H41.8206C41.3665 58.2535 41 57.8912 41 57.4425V50.4624C41 50.0136 41.3665 49.6514 41.8206 49.6514H78.1794C78.6335 49.6514 79 50.0136 79 50.4624V57.4425C79 57.8912 78.6335 58.2535 78.1794 58.2535ZM42.6412 56.6315H77.3588V51.2734H42.6412V56.6315Z" fill="#BC2C36"/>
<path d="M64.4688 82.0002H55.5296C55.0755 82.0002 54.709 81.638 54.709 81.1892V57.4428C54.709 56.9941 55.0755 56.6318 55.5296 56.6318H64.4688C64.9229 56.6318 65.2895 56.9941 65.2895 57.4428V81.1892C65.2895 81.638 64.9229 82.0002 64.4688 82.0002ZM56.3502 80.3782H63.6482V58.2539H56.3502V80.3782Z" fill="#BC2C36"/>
<path d="M59.7694 50.7275C59.567 50.7275 59.3646 50.6518 59.2114 50.5112C58.9762 50.2949 58.8886 49.9651 58.9871 49.6677C59.3208 48.6459 62.3845 39.6274 66.8541 38.1947C68.1178 37.7892 69.4035 38.027 70.5797 38.8759C71.9528 39.8707 72.1334 40.9899 72.0404 41.7469C71.5371 45.8776 61.252 50.1868 60.0813 50.6626C59.9828 50.7058 59.8734 50.7221 59.7694 50.7221V50.7275ZM68.0631 39.622C67.8279 39.622 67.5926 39.6599 67.3574 39.7356C64.808 40.552 62.4282 45.3045 61.1918 48.408C65.1691 46.5805 70.153 43.6392 70.4101 41.5522C70.4484 41.2386 70.4101 40.7629 69.6113 40.1843C69.0916 39.8113 68.5828 39.622 68.0686 39.622H68.0631Z" fill="#BC2C36"/>
<path d="M60.2289 50.7274C60.125 50.7274 60.0155 50.7058 59.9171 50.668C58.7463 50.1922 48.4667 45.883 47.958 41.7523C47.865 40.9899 48.0455 39.8761 49.4187 38.8813C50.5949 38.0216 51.8805 37.7891 53.1443 38.1946C57.6139 39.622 60.672 48.6458 61.0112 49.6677C61.1097 49.9705 61.0222 50.3003 60.7869 50.5112C60.6337 50.6517 60.4313 50.7274 60.2289 50.7274ZM51.9352 39.622C51.421 39.622 50.9067 39.8058 50.3925 40.1843C49.5937 40.7628 49.5554 41.244 49.5937 41.5522C49.8508 43.6392 54.8293 46.5805 58.812 48.4079C57.5756 45.3045 55.1958 40.552 52.6464 39.7355C52.4112 39.6599 52.1759 39.622 51.9407 39.622H51.9352Z" fill="#BC2C36"/>
</g>
<circle cx="60" cy="152" r="55" fill="#F9DCD7" stroke="#FFF9F4" stroke-width="10"/>
<circle cx="60" cy="152" r="41.5" fill="#F9DCD7" stroke="#BC2C36"/>
<g clip-path="url(#clip2_1934_5669)">
<path d="M75.4942 173.908H44.5023C44.0482 173.908 43.6816 173.546 43.6816 173.097V149.448C43.6816 148.999 44.0482 148.637 44.5023 148.637H75.4942C75.9483 148.637 76.3148 148.999 76.3148 149.448V173.097C76.3148 173.546 75.9483 173.908 75.4942 173.908ZM45.3229 172.286H74.6736V150.259H45.3229V172.286Z" fill="#BC2C36"/>
<path d="M78.1794 150.253H41.8206C41.3665 150.253 41 149.891 41 149.442V142.462C41 142.014 41.3665 141.651 41.8206 141.651H78.1794C78.6335 141.651 79 142.014 79 142.462V149.442C79 149.891 78.6335 150.253 78.1794 150.253ZM42.6412 148.631H77.3588V143.273H42.6412V148.631Z" fill="#BC2C36"/>
<path d="M64.4688 174H55.5296C55.0755 174 54.709 173.638 54.709 173.189V149.443C54.709 148.994 55.0755 148.632 55.5296 148.632H64.4688C64.9229 148.632 65.2895 148.994 65.2895 149.443V173.189C65.2895 173.638 64.9229 174 64.4688 174ZM56.3502 172.378H63.6482V150.254H56.3502V172.378Z" fill="#BC2C36"/>
<path d="M59.7694 142.727C59.567 142.727 59.3646 142.652 59.2114 142.511C58.9762 142.295 58.8886 141.965 58.9871 141.668C59.3208 140.646 62.3845 131.627 66.8541 130.195C68.1178 129.789 69.4035 130.027 70.5797 130.876C71.9528 131.871 72.1334 132.99 72.0404 133.747C71.5371 137.878 61.252 142.187 60.0813 142.663C59.9828 142.706 59.8734 142.722 59.7694 142.722V142.727ZM68.0631 131.622C67.8279 131.622 67.5926 131.66 67.3574 131.736C64.808 132.552 62.4282 137.305 61.1918 140.408C65.1691 138.581 70.153 135.639 70.4101 133.552C70.4484 133.239 70.4101 132.763 69.6113 132.184C69.0916 131.811 68.5828 131.622 68.0686 131.622H68.0631Z" fill="#BC2C36"/>
<path d="M60.2289 142.727C60.125 142.727 60.0155 142.706 59.9171 142.668C58.7463 142.192 48.4667 137.883 47.958 133.752C47.865 132.99 48.0455 131.876 49.4187 130.881C50.5949 130.022 51.8805 129.789 53.1443 130.195C57.6139 131.622 60.672 140.646 61.0112 141.668C61.1097 141.97 61.0222 142.3 60.7869 142.511C60.6337 142.652 60.4313 142.727 60.2289 142.727ZM51.9352 131.622C51.421 131.622 50.9067 131.806 50.3925 132.184C49.5937 132.763 49.5554 133.244 49.5937 133.552C49.8508 135.639 54.8293 138.58 58.812 140.408C57.5756 137.304 55.1958 132.552 52.6464 131.736C52.4112 131.66 52.1759 131.622 51.9407 131.622H51.9352Z" fill="#BC2C36"/>
</g>
<circle cx="154" cy="152" r="55" fill="#F9DCD7" stroke="#FFF9F4" stroke-width="10"/>
<circle cx="154" cy="152" r="41.5" fill="#F9DCD7" stroke="#BC2C36"/>
<g clip-path="url(#clip3_1934_5669)">
<path d="M169.494 173.908H138.502C138.048 173.908 137.682 173.546 137.682 173.097V149.448C137.682 148.999 138.048 148.637 138.502 148.637H169.494C169.948 148.637 170.315 148.999 170.315 149.448V173.097C170.315 173.546 169.948 173.908 169.494 173.908ZM139.323 172.286H168.674V150.259H139.323V172.286Z" fill="#BC2C36"/>
<path d="M172.179 150.253H135.821C135.367 150.253 135 149.891 135 149.442V142.462C135 142.014 135.367 141.651 135.821 141.651H172.179C172.633 141.651 173 142.014 173 142.462V149.442C173 149.891 172.633 150.253 172.179 150.253ZM136.641 148.631H171.359V143.273H136.641V148.631Z" fill="#BC2C36"/>
<path d="M158.469 174H149.53C149.076 174 148.709 173.638 148.709 173.189V149.443C148.709 148.994 149.076 148.632 149.53 148.632H158.469C158.923 148.632 159.289 148.994 159.289 149.443V173.189C159.289 173.638 158.923 174 158.469 174ZM150.35 172.378H157.648V150.254H150.35V172.378Z" fill="#BC2C36"/>
<path d="M153.769 142.727C153.567 142.727 153.365 142.652 153.211 142.511C152.976 142.295 152.889 141.965 152.987 141.668C153.321 140.646 156.384 131.627 160.854 130.195C162.118 129.789 163.403 130.027 164.58 130.876C165.953 131.871 166.133 132.99 166.04 133.747C165.537 137.878 155.252 142.187 154.081 142.663C153.983 142.706 153.873 142.722 153.769 142.722V142.727ZM162.063 131.622C161.828 131.622 161.593 131.66 161.357 131.736C158.808 132.552 156.428 137.305 155.192 140.408C159.169 138.581 164.153 135.639 164.41 133.552C164.448 133.239 164.41 132.763 163.611 132.184C163.092 131.811 162.583 131.622 162.069 131.622H162.063Z" fill="#BC2C36"/>
<path d="M154.229 142.727C154.125 142.727 154.016 142.706 153.917 142.668C152.746 142.192 142.467 137.883 141.958 133.752C141.865 132.99 142.045 131.876 143.419 130.881C144.595 130.022 145.881 129.789 147.144 130.195C151.614 131.622 154.672 140.646 155.011 141.668C155.11 141.97 155.022 142.3 154.787 142.511C154.634 142.652 154.431 142.727 154.229 142.727ZM145.935 131.622C145.421 131.622 144.907 131.806 144.392 132.184C143.594 132.763 143.555 133.244 143.594 133.552C143.851 135.639 148.829 138.58 152.812 140.408C151.576 137.304 149.196 132.552 146.646 131.736C146.411 131.66 146.176 131.622 145.941 131.622H145.935Z" fill="#BC2C36"/>
</g>
<circle cx="107" cy="106" r="45" fill="#F9DCD7" stroke="#FFF9F4" stroke-width="10"/>
<circle cx="107" cy="106" r="41.5" fill="#F9DCD7" stroke="#BC2C36"/>
<g clip-path="url(#clip4_1934_5669)">
<path d="M122.494 127.908H91.5023C91.0482 127.908 90.6816 127.546 90.6816 127.097V103.448C90.6816 102.999 91.0482 102.637 91.5023 102.637H122.494C122.948 102.637 123.315 102.999 123.315 103.448V127.097C123.315 127.546 122.948 127.908 122.494 127.908ZM92.3229 126.286H121.674V104.259H92.3229V126.286Z" fill="#BC2C36"/>
<path d="M125.179 104.253H88.8206C88.3665 104.253 88 103.891 88 103.442V96.4624C88 96.0136 88.3665 95.6514 88.8206 95.6514H125.179C125.633 95.6514 126 96.0136 126 96.4624V103.442C126 103.891 125.633 104.253 125.179 104.253ZM89.6412 102.631H124.359V97.2734H89.6412V102.631Z" fill="#BC2C36"/>
<path d="M111.469 128H102.53C102.076 128 101.709 127.638 101.709 127.189V103.443C101.709 102.994 102.076 102.632 102.53 102.632H111.469C111.923 102.632 112.289 102.994 112.289 103.443V127.189C112.289 127.638 111.923 128 111.469 128ZM103.35 126.378H110.648V104.254H103.35V126.378Z" fill="#BC2C36"/>
<path d="M106.769 96.7275C106.567 96.7275 106.365 96.6518 106.211 96.5112C105.976 96.2949 105.889 95.9651 105.987 95.6677C106.321 94.6459 109.384 85.6274 113.854 84.1947C115.118 83.7892 116.403 84.027 117.58 84.8759C118.953 85.8707 119.133 86.9899 119.04 87.7469C118.537 91.8776 108.252 96.1868 107.081 96.6626C106.983 96.7058 106.873 96.7221 106.769 96.7221V96.7275ZM115.063 85.622C114.828 85.622 114.593 85.6599 114.357 85.7356C111.808 86.552 109.428 91.3045 108.192 94.408C112.169 92.5805 117.153 89.6392 117.41 87.5522C117.448 87.2386 117.41 86.7629 116.611 86.1843C116.092 85.8113 115.583 85.622 115.069 85.622H115.063Z" fill="#BC2C36"/>
<path d="M107.229 96.7274C107.125 96.7274 107.016 96.7058 106.917 96.668C105.746 96.1922 95.4667 91.883 94.958 87.7523C94.865 86.9899 95.0455 85.8761 96.4187 84.8813C97.5949 84.0216 98.8805 83.7891 100.144 84.1946C104.614 85.622 107.672 94.6458 108.011 95.6677C108.11 95.9705 108.022 96.3003 107.787 96.5112C107.634 96.6517 107.431 96.7274 107.229 96.7274ZM98.9352 85.622C98.421 85.622 97.9067 85.8058 97.3925 86.1843C96.5937 86.7628 96.5554 87.244 96.5937 87.5522C96.8508 89.6392 101.829 92.5805 105.812 94.4079C104.576 91.3045 102.196 86.552 99.6464 85.7355C99.4112 85.6599 99.1759 85.622 98.9407 85.622H98.9352Z" fill="#BC2C36"/>
</g>
<defs>
<clipPath id="clip0_1934_5669">
<rect width="38" height="44" fill="white" transform="translate(135 38)"/>
</clipPath>
<clipPath id="clip1_1934_5669">
<rect width="38" height="44" fill="white" transform="translate(41 38)"/>
</clipPath>
<clipPath id="clip2_1934_5669">
<rect width="38" height="44" fill="white" transform="translate(41 130)"/>
</clipPath>
<clipPath id="clip3_1934_5669">
<rect width="38" height="44" fill="white" transform="translate(135 130)"/>
</clipPath>
<clipPath id="clip4_1934_5669">
<rect width="38" height="44" fill="white" transform="translate(88 84)"/>
</clipPath>
</defs>
</svg>
<img src={FiveCreditImage} alt="caits-logo.svg" className="mx-auto" />
</div>
<div className='bg-F4E6DC w-full h-59 text-center p-2'>
$55
Expand Down
19 changes: 3 additions & 16 deletions client/src/components/PurchaseOneCredit.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,12 @@
import OneCreditImage from '../images/purchase_one_credit.svg'

const PurchaseOneCredit = () => {

return (
<div className="flex flex-col vertical-outlined-rectangle bg-FFF9F4">
1 Request Credit
<div className="flex items-center justify-center flex-1">
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" fill="#F9DCD7"/>
<circle cx="50" cy="50" r="41.5" fill="#F9DCD7" stroke="#BC2C36"/>
<g clip-path="url(#clip0_1934_5744)">
<path d="M65.4942 71.9083H34.5023C34.0482 71.9083 33.6816 71.546 33.6816 71.0973V47.4482C33.6816 46.9995 34.0482 46.6372 34.5023 46.6372H65.4942C65.9483 46.6372 66.3148 46.9995 66.3148 47.4482V71.0973C66.3148 71.546 65.9483 71.9083 65.4942 71.9083ZM35.3229 70.2863H64.6736V48.2592H35.3229V70.2863Z" fill="#BC2C36"/>
<path d="M68.1794 48.2535H31.8206C31.3665 48.2535 31 47.8912 31 47.4425V40.4624C31 40.0136 31.3665 39.6514 31.8206 39.6514H68.1794C68.6335 39.6514 69 40.0136 69 40.4624V47.4425C69 47.8912 68.6335 48.2535 68.1794 48.2535ZM32.6412 46.6315H67.3588V41.2734H32.6412V46.6315Z" fill="#BC2C36"/>
<path d="M54.4688 72.0002H45.5296C45.0755 72.0002 44.709 71.638 44.709 71.1892V47.4428C44.709 46.9941 45.0755 46.6318 45.5296 46.6318H54.4688C54.9229 46.6318 55.2895 46.9941 55.2895 47.4428V71.1892C55.2895 71.638 54.9229 72.0002 54.4688 72.0002ZM46.3502 70.3782H53.6482V48.2539H46.3502V70.3782Z" fill="#BC2C36"/>
<path d="M49.7694 40.7275C49.567 40.7275 49.3646 40.6518 49.2114 40.5112C48.9762 40.2949 48.8886 39.9651 48.9871 39.6677C49.3208 38.6459 52.3845 29.6274 56.8541 28.1947C58.1178 27.7892 59.4035 28.027 60.5797 28.8759C61.9528 29.8707 62.1334 30.9899 62.0404 31.7469C61.5371 35.8776 51.252 40.1868 50.0813 40.6626C49.9828 40.7058 49.8734 40.7221 49.7694 40.7221V40.7275ZM58.0631 29.622C57.8279 29.622 57.5926 29.6599 57.3574 29.7356C54.808 30.552 52.4282 35.3045 51.1918 38.408C55.1691 36.5805 60.153 33.6392 60.4101 31.5522C60.4484 31.2386 60.4101 30.7629 59.6113 30.1843C59.0916 29.8113 58.5828 29.622 58.0686 29.622H58.0631Z" fill="#BC2C36"/>
<path d="M50.2289 40.7274C50.125 40.7274 50.0155 40.7058 49.9171 40.668C48.7463 40.1922 38.4667 35.883 37.958 31.7523C37.865 30.9899 38.0455 29.8761 39.4187 28.8813C40.5949 28.0216 41.8805 27.7891 43.1443 28.1946C47.6139 29.622 50.672 38.6458 51.0112 39.6677C51.1097 39.9705 51.0222 40.3003 50.7869 40.5112C50.6337 40.6517 50.4313 40.7274 50.2289 40.7274ZM41.9352 29.622C41.421 29.622 40.9067 29.8058 40.3925 30.1843C39.5937 30.7628 39.5554 31.244 39.5937 31.5522C39.8508 33.6392 44.8293 36.5805 48.812 38.4079C47.5756 35.3045 45.1958 30.552 42.6464 29.7355C42.4112 29.6599 42.1759 29.622 41.9407 29.622H41.9352Z" fill="#BC2C36"/>
</g>
<defs>
<clipPath id="clip0_1934_5744">
<rect width="38" height="44" fill="white" transform="translate(31 28)"/>
</clipPath>
</defs>
</svg>
<img src={OneCreditImage} alt="caits-logo.svg" className="mx-auto" />
</div>
<div className='bg-F4E6DC w-full h-59 text-center p-2'>
$30
Expand Down
Loading

0 comments on commit 79e09d0

Please sign in to comment.