Skip to content

Commit 5134548

Browse files
whitneywindwhitneywind
authored
Merge pull request #2551 from hackforla/fix-icon-size-2550
fixes icon sizing
2 parents ef68087 + 13e5bbe commit 5134548

8 files changed

Lines changed: 52 additions & 21 deletions

File tree

‎client/src/components/FoodSeeker/SearchResults/ResultsMap/MapMarker.jsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,16 @@ import SmMealIcon from "images/markers/smMealIcon.jsx";
55
import SmPantryIcon from "images/markers/smPantryIcon";
66
import SmSplitIcon from "images/markers/smSplitIcon";
77

8+
89
function MapMarker({ category, selected = false, scale = 1 }) {
9-
const size = 32 * scale;
10+
const baseWidth = selected ? 53 : 30;
11+
const baseHeight = selected ? 67 : 40;
12+
13+
const width = baseWidth * scale;
14+
const height = baseHeight * scale;
15+
1016
const Icon = markerIcons[category][selected ? "selected" : "default"];
11-
return <Icon width={size} height={size} />;
17+
return <Icon width={width} height={height} />;
1218
}
1319

1420
export default MapMarker;

‎client/src/components/FoodSeeker/SearchResults/ResultsMap/MarkerHelpers.jsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -93,12 +93,7 @@ export const markersLayerStyles = {
9393
layout: {
9494
"icon-image": ["get", "iconId"],
9595
"icon-allow-overlap": true,
96-
"icon-size": [
97-
"case",
98-
["boolean", ["get", "selected"], false],
99-
3 / MARKER_SCALE,
100-
1.2 / MARKER_SCALE
101-
],
96+
"icon-size": 1 / MARKER_SCALE,
10297
"icon-anchor": "bottom",
10398
},
10499
};

‎client/src/images/markers/lgMealIcon.jsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
1-
const LgMealIcon = () => (
2-
<svg width="62" height="80" viewBox="0 0 62 80" fill="none" xmlns="http://www.w3.org/2000/svg">
1+
const LgMealIcon = (props) => (
2+
<svg
3+
{...props}
4+
viewBox="0 0 62 80"
5+
fill="none"
6+
xmlns="http://www.w3.org/2000/svg"
7+
>
38
<g filter="url(#filter0_d_9240_9316)">
4-
<path d="M7 30.0977C7 42.8543 31 71 31 71C31 71 55 42.8543 55 30.0977C55 17.3412 44.2548 7 31 7C17.7452 7 7 17.3412 7 30.0977Z" fill="white"/>
9+
<path d="M7 30.0977C7 42.8543 31 71 31 71C31 71 55 42.8543 55 30.0977C55 17.3412 44.2548 7 31 7C17.7452 7 7 17.3412 7 30.0977Z" fill="white"/>
510
<path d="M31 71L31.7607 71.6484L31 72.541L30.2393 71.6484L31 71ZM31 71C30.2391 71.6488 30.2385 71.6487 30.2383 71.6484L30.2373 71.6475C30.2365 71.6465 30.2359 71.6444 30.2344 71.6426C30.2313 71.6389 30.2266 71.6339 30.2207 71.627C30.2088 71.613 30.1909 71.5926 30.168 71.5654C30.1218 71.5109 30.0535 71.4298 29.9648 71.3242C29.7874 71.113 29.5273 70.8019 29.1973 70.4023C28.5374 69.6034 27.5962 68.4489 26.4668 67.0244C24.2082 64.1757 21.1942 60.2411 18.1787 55.9033C15.1658 51.5693 12.1375 46.8132 9.8584 42.3232C7.59809 37.8704 6 33.5386 6 30.0977C6.00005 16.7531 17.2294 6 31 6C44.7706 6 55.9999 16.7531 56 30.0977C56 33.5386 54.4019 37.8704 52.1416 42.3232C49.8625 46.8132 46.8342 51.5693 43.8213 55.9033C40.8058 60.2411 37.7918 64.1757 35.5332 67.0244C34.4038 68.4489 33.4626 69.6034 32.8027 70.4023C32.4727 70.8019 32.2126 71.113 32.0352 71.3242C31.9465 71.4298 31.8782 71.5109 31.832 71.5654C31.8091 71.5926 31.7912 71.613 31.7793 71.627C31.7734 71.6339 31.7687 71.6389 31.7656 71.6426C31.7641 71.6444 31.7635 71.6465 31.7627 71.6475L31.7617 71.6484C31.7615 71.6487 31.7609 71.6488 31 71Z" stroke="#EF7F4F" strokeWidth="2"/>
611
</g>
712
<path d="M37.5458 16.6613C38.7608 16.6613 38.998 17.9315 38.998 17.9315C38.998 20.7853 38.998 26.9488 38.998 29.8376C38.998 33.5256 34.6443 34.3825 34.6443 34.3825L34.6814 46.2861C34.6814 46.2861 34.6443 48.6613 31.7599 48.6613C28.8755 48.6613 33.0949 48.6613 30.2934 48.6613C27.4919 48.6613 27.4404 46.2861 27.4404 46.2861L27.4033 34.3825C27.4033 34.3825 22.998 33.5507 22.998 29.8501V17.8764C22.998 17.8764 23.0324 16.6613 24.4503 16.6613C25.8682 16.6613 25.891 16.7038 25.891 17.8764C25.891 19.049 25.9368 26.4652 25.9368 26.4652C25.9368 26.4652 26.0368 27.5977 26.6972 27.5977C27.3575 27.5977 27.3061 26.4652 27.3061 26.4652C27.3061 26.4652 27.3061 19.0916 27.3061 17.8764C27.3061 16.6613 27.3232 16.6613 28.7754 16.6613C30.2276 16.6613 30.2934 16.7038 30.2934 17.8764C30.2934 19.049 30.2934 26.5905 30.2934 26.5905C30.2934 26.5905 30.3448 27.6804 31.0023 27.6804C31.6598 27.6804 31.7256 26.5078 31.7256 26.5078C31.7256 26.5078 31.7256 19.0365 31.7256 17.8489C31.7256 16.6613 31.98 16.6613 33.2978 16.6613C34.6157 16.6613 34.6986 16.7314 34.6986 17.8213C34.6986 18.9112 34.6986 26.3625 34.6986 26.3625C34.6986 26.3625 34.6471 27.723 35.3561 27.723C36.0908 27.723 36.1337 26.4376 36.1337 26.4376C36.1337 26.4376 36.1451 19.1467 36.1451 17.904C36.1451 16.6613 36.3309 16.6613 37.5458 16.6613Z" fill="#EF7F4F"/>

‎client/src/images/markers/lgPantryIcon.jsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1-
const LgPantryIcon = () => (
2-
<svg width="62" height="80" viewBox="0 0 62 80" fill="none" xmlns="http://www.w3.org/2000/svg">
1+
const LgPantryIcon = (props) => (
2+
<svg
3+
{...props}
4+
viewBox="0 0 62 80"
5+
fill="none"
6+
xmlns="http://www.w3.org/2000/svg"
7+
>
38
<g filter="url(#filter0_d_9240_9332)">
49
<path d="M31 71L31.7607 71.6484L31 72.541L30.2393 71.6484L31 71ZM31 71C30.2391 71.6488 30.2385 71.6487 30.2383 71.6484L30.2373 71.6475C30.2365 71.6465 30.2359 71.6444 30.2344 71.6426C30.2313 71.6389 30.2266 71.6339 30.2207 71.627C30.2088 71.613 30.1909 71.5926 30.168 71.5654C30.1218 71.5109 30.0535 71.4298 29.9648 71.3242C29.7874 71.113 29.5273 70.8019 29.1973 70.4023C28.5374 69.6034 27.5962 68.4489 26.4668 67.0244C24.2082 64.1757 21.1942 60.2411 18.1787 55.9033C15.1658 51.5693 12.1375 46.8132 9.8584 42.3232C7.59809 37.8704 6 33.5386 6 30.0977C6.00005 16.7531 17.2294 6 31 6C44.7706 6 55.9999 16.7531 56 30.0977C56 33.5386 54.4019 37.8704 52.1416 42.3232C49.8625 46.8132 46.8342 51.5693 43.8213 55.9033C40.8058 60.2411 37.7918 64.1757 35.5332 67.0244C34.4038 68.4489 33.4626 69.6034 32.8027 70.4023C32.4727 70.8019 32.2126 71.113 32.0352 71.3242C31.9465 71.4298 31.8782 71.5109 31.832 71.5654C31.8091 71.5926 31.7912 71.613 31.7793 71.627C31.7734 71.6339 31.7687 71.6389 31.7656 71.6426C31.7641 71.6444 31.7635 71.6465 31.7627 71.6475L31.7617 71.6484C31.7615 71.6487 31.7609 71.6488 31 71Z" fill="white" stroke="#0A7572" strokeWidth="2"/>
510
<path d="M31.2314 45.7624C30.3489 46.5549 28.6263 47 27.1461 47C22.0571 47 15.0859 39.7084 15.0859 33.2126C15.0859 26.7167 18.3978 22.1106 23.4868 22.1106C26.2474 22.1106 28.4749 22.3812 29.6643 23.5209L29.6421 23.4492C29.6421 23.4492 28.7232 20.2746 27.2208 19.6078C28.0508 19.2491 29.5876 18.243 29.5876 18.243C29.5876 18.243 31.9544 20.8437 31.9544 23.4525V23.5209C33.7032 22.2769 35.7933 21.5073 38.9739 21.5073C44.0629 21.5073 47.3768 26.7167 47.3768 33.2126C47.3768 39.7084 40.1573 47 35.0683 47C33.576 47 32.1179 46.5695 31.2314 45.7624Z" fill="#0A7572"/>

‎client/src/images/markers/lgSplitIcon.jsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1-
const LgSplitIcon = () => (
2-
<svg width="62" height="80" viewBox="0 0 62 80" fill="none" xmlns="http://www.w3.org/2000/svg">
1+
const LgSplitIcon = (props) => (
2+
<svg
3+
{...props}
4+
viewBox="0 0 62 80"
5+
fill="none"
6+
xmlns="http://www.w3.org/2000/svg"
7+
>
38
<g filter="url(#filter0_d_9240_9367)">
49
<path d="M6.99867 30.0977C6.99867 42.8543 30.9954 71 30.9954 71C30.9954 71 54.9922 42.8543 54.9922 30.0977C54.9922 17.3412 44.2485 7 30.9954 7C17.7424 7 6.99867 17.3412 6.99867 30.0977Z" fill="#0A7572"/>
510
<path d="M30.9951 6C17.2263 6.00016 5.99907 16.7533 5.99902 30.0977C5.99902 33.5385 7.59644 37.8704 9.85645 42.3232C12.1353 46.8132 15.1633 51.5693 18.1758 55.9033C21.1908 60.2411 24.2037 64.1757 26.4619 67.0244C27.5914 68.4493 28.5335 69.6034 29.1934 70.4023C29.5233 70.8019 29.7825 71.113 29.96 71.3242C30.0485 71.4296 30.1169 71.5099 30.1631 71.5645C30.1861 71.5917 30.2039 71.6129 30.2158 71.627C30.2216 71.6338 30.2264 71.6389 30.2295 71.6426C30.231 71.6444 30.2326 71.6465 30.2334 71.6475L30.2344 71.6484L30.9951 72.541L31.7568 71.6484L31.7578 71.6475C31.7586 71.6465 31.7602 71.6444 31.7617 71.6426C31.7648 71.639 31.7697 71.6337 31.7754 71.627C31.7873 71.6129 31.8042 71.5916 31.8271 71.5645C31.8733 71.5099 31.9417 71.4296 32.0303 71.3242C32.2077 71.113 32.4679 70.8019 32.7979 70.4023C33.4576 69.6034 34.399 68.449 35.5283 67.0244C37.7865 64.1757 40.7994 60.241 43.8145 55.9033C46.827 51.5692 49.8559 46.8132 52.1348 42.3232C54.3948 37.8704 55.9922 33.5385 55.9922 30.0977C55.9921 16.7532 44.7641 6 30.9951 6Z" stroke="white" strokeWidth="2"/>

‎client/src/images/markers/smMealIcon.jsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1-
const SmMealIcon = () => (
2-
<svg width="50" height="64" viewBox="0 0 50 64" fill="none" xmlns="http://www.w3.org/2000/svg">
1+
const SmMealIcon = (props) => (
2+
<svg
3+
{...props}
4+
viewBox="0 0 50 64"
5+
fill="none"
6+
xmlns="http://www.w3.org/2000/svg"
7+
>
38
<g filter="url(#filter0_d_9240_9307)">
49
<path d="M7 24.3233C7 33.8907 25 55 25 55C25 55 43 33.8907 43 24.3233C43 14.7559 34.9411 7 25 7C15.0589 7 7 14.7559 7 24.3233Z" fill="#EF7F4F"/>
510
<path d="M25 55L25.7607 55.6484L25 56.541L24.2393 55.6484L25 55ZM25 55C24.2391 55.6488 24.2385 55.6487 24.2383 55.6484V55.6475C24.2377 55.6467 24.2365 55.6458 24.2354 55.6445C24.233 55.6417 24.2291 55.6372 24.2246 55.6318C24.2156 55.6212 24.2028 55.6053 24.1855 55.585C24.1507 55.5438 24.099 55.4828 24.0322 55.4033C23.8987 55.2444 23.7029 55.011 23.4551 54.7109C22.9593 54.1107 22.2524 53.2436 21.4043 52.1738C19.7082 50.0346 17.4442 47.0792 15.1787 43.8203C12.9158 40.5651 10.6376 36.9873 8.9209 33.6055C7.22309 30.2608 6 26.9669 6 24.3232C6.00004 14.1678 14.5431 6 25 6C35.4569 6 44 14.1678 44 24.3232C44 26.9669 42.7769 30.2608 41.0791 33.6055C39.3624 36.9873 37.0842 40.5651 34.8213 43.8203C32.5558 47.0792 30.2918 50.0346 28.5957 52.1738C27.7476 53.2436 27.0407 54.1107 26.5449 54.7109C26.2971 55.011 26.1013 55.2444 25.9678 55.4033C25.901 55.4828 25.8493 55.5438 25.8145 55.585C25.7972 55.6053 25.7844 55.6212 25.7754 55.6318C25.7709 55.6372 25.767 55.6417 25.7646 55.6445C25.7635 55.6458 25.7623 55.6467 25.7617 55.6475V55.6484C25.7615 55.6487 25.7609 55.6488 25 55Z" stroke="white" strokeWidth="2"/>

‎client/src/images/markers/smPantryIcon.jsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1-
const SmPantryIcon = () => (
2-
<svg width="50" height="64" viewBox="0 0 50 64" fill="none" xmlns="http://www.w3.org/2000/svg">
1+
const SmPantryIcon = (props) => (
2+
<svg
3+
{...props}
4+
viewBox="0 0 50 64"
5+
fill="none"
6+
xmlns="http://www.w3.org/2000/svg"
7+
>
38
<g filter="url(#filter0_d_9240_9322)">
49
<path d="M24.8379 6C14.4619 6.00003 6.00004 14.1762 6 24.3232C6 26.9647 7.21091 30.2576 8.89355 33.6025C10.5946 36.9842 12.8532 40.5612 15.0957 43.8164C17.3408 47.0753 19.5839 50.0306 21.2646 52.1699C22.1054 53.24 22.8064 54.1077 23.2979 54.708C23.5435 55.0081 23.7369 55.2415 23.8691 55.4004C23.9353 55.4798 23.986 55.5409 24.0205 55.582C24.0378 55.6026 24.0516 55.6183 24.0605 55.6289C24.0648 55.634 24.068 55.6379 24.0703 55.6406C24.0715 55.642 24.0726 55.6438 24.0732 55.6445L24.0742 55.6455L24.8379 56.5498L25.6016 55.6455L24.8379 55L25.6025 55.6455V55.6445C25.6032 55.6438 25.6043 55.642 25.6055 55.6406C25.6078 55.6378 25.6118 55.6342 25.6162 55.6289L25.8066 55.4004C25.9389 55.2415 26.1323 55.008 26.3779 54.708C26.8693 54.1077 27.5704 53.24 28.4111 52.1699C30.0919 50.0306 32.335 47.0753 34.5801 43.8164C36.8226 40.5612 39.0811 36.9842 40.7822 33.6025C42.4649 30.2576 43.6758 26.9647 43.6758 24.3232C43.6757 14.1762 35.2139 6 24.8379 6Z" fill="#0A7572" stroke="white" strokeWidth="2"/>
510
<path d="M25.0059 36.0716C24.3499 36.6659 23.0696 36.9997 21.9695 36.9997C18.1871 36.9997 13.0059 31.5311 13.0059 26.6592C13.0059 21.7872 15.4674 18.3326 19.2498 18.3326C21.3015 18.3326 22.9571 18.5356 23.8411 19.3904L23.8246 19.3366C23.8246 19.3366 23.1417 16.9557 22.025 16.4555C22.6419 16.1865 23.7841 15.432 23.7841 15.432C23.7841 15.432 25.5432 17.3825 25.5432 19.3391V19.3904C26.843 18.4574 28.3965 17.8802 30.7605 17.8802C34.5428 17.8802 37.0059 21.7872 37.0059 26.6592C37.0059 31.5311 31.64 36.9997 27.8576 36.9997C26.7484 36.9997 25.6648 36.6769 25.0059 36.0716Z" fill="white"/>

‎client/src/images/markers/smSplitIcon.jsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1-
const SmSplitIcon = () => (
2-
<svg width="36" height="48" viewBox="0 0 36 48" fill="none" xmlns="http://www.w3.org/2000/svg">
1+
const SmSplitIcon = (props) => (
2+
<svg
3+
{...props}
4+
viewBox="0 0 50 64"
5+
fill="none"
6+
xmlns="http://www.w3.org/2000/svg"
7+
>
38
<path d="M18 47.8351C23.759 41.4811 34.2728 27.111 35.9094 19.0272C36.1616 16.624 35.8858 14.1959 35.1007 11.901C34.3155 9.60606 33.0383 7.49431 31.3511 5.70161C29.6638 3.90936 27.6043 2.47582 25.3046 1.49369C23.005 0.511563 20.5169 0.00311929 18 0V7.63735V24.838V47.8351Z" fill="#0A7572"/>
49
<path d="M18 47.8351C12.241 41.4811 1.72715 27.111 0.0905299 19.0272C-0.16112 16.624 0.11421 14.1963 0.89932 11.901C1.68443 9.60606 2.96169 7.49431 4.64892 5.70161C6.33614 3.90936 8.3957 2.47582 10.6953 1.49369C12.995 0.511563 15.4831 0.00311929 18 0V7.63735V24.838V47.8351Z" fill="#EF7F4F"/>
510
<path d="M18 28C23.5228 28 28 23.5228 28 18C28 12.4772 23.5228 8 18 8C12.4772 8 8 12.4772 8 18C8 23.5228 12.4772 28 18 28Z" fill="white"/>

0 commit comments

Comments
 (0)