From aa36810a3dcd176be061d4e406677ea6ea96d85c Mon Sep 17 00:00:00 2001
From: Shelby Kay <bonjour@shelbykay.dev>
Date: Thu, 30 Sep 2021 23:50:02 +0200
Subject: [PATCH] Fix BoxCTA internal layout

---
 src/components/atoms/BoxCTA.svelte | 15 +++++++------
 src/routes/index.svelte            | 15 ++++++-------
 src/style/_variables.scss          |  1 +
 src/style/atoms/_box-cta.scss      | 34 +++++++++++++++---------------
 static/images/icons/bag.svg        |  3 +++
 static/images/icons/pin.svg        |  8 ++++---
 6 files changed, 41 insertions(+), 35 deletions(-)
 create mode 100644 static/images/icons/bag.svg

diff --git a/src/components/atoms/BoxCTA.svelte b/src/components/atoms/BoxCTA.svelte
index 1009b35..72ffb98 100644
--- a/src/components/atoms/BoxCTA.svelte
+++ b/src/components/atoms/BoxCTA.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
-    export let image: string
-    export let text: string
+    export let icon: string
+    export let alt: string
+    export let label: string
     export let url: string = undefined
 </script>
 
 <a href={url} class="box-cta">
-    <div class="box-cta__content">
-        <div class="image">
-            <img src="{image}" alt="">
-        </div>
-        <span class="text-label">{text}</span>
+    <div class="icon">
+        <img src={icon} alt={alt} width={48} height={48} loading="lazy">
     </div>
+    <span class="text-label">
+        {label}
+    </span>
 </a>
\ No newline at end of file
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 69e908e..f123e54 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -3,10 +3,11 @@
     // Components
     import Metas from '$components/Metas.svelte'
     import Button from '$components/atoms/Button.svelte'
-    import PhotoCard from '$components/molecules/PhotoCard.svelte'
-    import Newsletter from '$components/organisms/Newsletter.svelte'
-    import Shop from '$components/organisms/Shop.svelte'
     import BoxCTA from '$components/atoms/BoxCTA.svelte'
+    import PhotoCard from '$components/molecules/PhotoCard.svelte'
+    import Locations from '$components/organisms/Locations.svelte'
+    import Shop from '$components/organisms/Shop.svelte'
+    import Newsletter from '$components/organisms/Newsletter.svelte'
 
     export let photos: any
 
@@ -39,13 +40,12 @@
     <div class="homepage__ctas">
         <p>Discover <strong>{count.photos} homes<br /></strong> from <strong>{count.locations} cities</strong> of <strong>{count.countries} countries</strong></p>
         <div class="cards">
-            <BoxCTA text="explore the globe" image="/images/icons/explore.svg" url="#" />
-            <BoxCTA text="discover the locations" image="/images/icons/pin.svg" url="#" />
-            <BoxCTA text="shop the prints" image="/images/icons/pin.svg" url="#" />
+            <BoxCTA url="#" icon="/images/icons/explore.svg" label="Explore the globe" alt="Globe" />
+            <BoxCTA url="#" icon="/images/icons/pin.svg" label="Discover the locations" alt="Paper pin" />
+            <BoxCTA url="/shop" icon="/images/icons/bag.svg" label="Shop the prints" alt="Shopping bag" />
         </div>
     </div>
 
-
     <Locations
         locations={location}
     />
@@ -61,7 +61,6 @@
 </main>
 
 
-
 <script context="module" lang="ts">
     import { fetchAPI } from '$utils/api'
 
diff --git a/src/style/_variables.scss b/src/style/_variables.scss
index 16e52b9..28c12c9 100644
--- a/src/style/_variables.scss
+++ b/src/style/_variables.scss
@@ -2,6 +2,7 @@
 $color-primary: #3C0576;
 $color-primary-dark: #36046A;
 $color-primary-darker: #2D0458;
+$color-primary-tertiary20: #633185;
 $color-secondary: #FF6C89;
 $color-secondary-light: #FFB3C2;
 $color-secondary-bright: #FF0536;
diff --git a/src/style/atoms/_box-cta.scss b/src/style/atoms/_box-cta.scss
index 0b8bfe0..8318c27 100644
--- a/src/style/atoms/_box-cta.scss
+++ b/src/style/atoms/_box-cta.scss
@@ -1,29 +1,29 @@
 .box-cta {
     display: flex;
+    flex-direction: column;
+    justify-content: center;
     align-items: center;
-    background-color: #633185;
     width: 144px;
     height: 176px;
+    padding: 24px 16px;
+    background-color: $color-primary-tertiary20;
     border-radius: 12px;
+    text-decoration: none;
 
-    &__content {
+    .icon {
+        margin: auto 0;
+        width: 48px;
+        height: 48px;
 
-        .image {
-            width: 48px;
-            height: 48px;
-            margin: 0 auto;
-
-            img {
-                display: block;
-                width: 100%;
-                height: 100%;
-                object-fit: contain;
-            }
-        }
-        span {
+        img {
             display: block;
-            color: $color-secondary-light;
-            margin: 28px 20px 0;
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
         }
     }
+    span {
+        display: block;
+        color: $color-secondary-light;
+    }
 }
\ No newline at end of file
diff --git a/static/images/icons/bag.svg b/static/images/icons/bag.svg
new file mode 100644
index 0000000..6671811
--- /dev/null
+++ b/static/images/icons/bag.svg
@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="#fff" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.57 13.2a7.57 7.57 0 0 1 1.9-5.26A5.87 5.87 0 0 1 22.8 6.1c3.18.03 6.16 2.56 6.22 7.1h6.37c.93 0 1.66.78 1.59 1.7l-.04.48 4.13 27.93a1.45 1.45 0 0 1-1.94 1.57l-1.58-.58a.14.14 0 0 0-.12.02l-2.83 1.85a1.59 1.59 0 0 1-1.57 1.34H8.61c-.93 0-1.66-.79-1.59-1.7l2.36-31.15c.06-.83.75-1.47 1.58-1.47h5.61Zm1.85 0a5.74 5.74 0 0 1 1.4-4 4.02 4.02 0 0 1 2.97-1.26c2.07.02 4.33 1.65 4.38 5.25h-8.75Zm10.6 1.83h6.1l-.04.4v.02L32.8 45.67H8.9l2.31-30.64h5.37v5.24a2.11 2.11 0 0 0 .92 4 2.12 2.12 0 0 0 .93-4v-5.24h8.75v5.24a2.11 2.11 0 0 0 .92 4 2.12 2.12 0 0 0 .93-4v-5.24Zm5.76 28.82 1.53-20.12 2.84 19.2-.96-.35a2 2 0 0 0-1.77.2l-1.64 1.07ZM18 22.17a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Zm10.1.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1Z" />
+</svg>
\ No newline at end of file
diff --git a/static/images/icons/pin.svg b/static/images/icons/pin.svg
index 2a76d0e..3a3dc95 100644
--- a/static/images/icons/pin.svg
+++ b/static/images/icons/pin.svg
@@ -1,3 +1,5 @@
-<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.3615 28.1654L9.46598 23.5406C9.35571 23.4745 9.25985 23.387 9.1841 23.2832C9.10835 23.1793 9.05427 23.0613 9.02507 22.9362C8.99586 22.811 8.99214 22.6813 9.01411 22.5546C9.03608 22.428 9.0833 22.3071 9.15297 22.1991C10.5583 19.7589 14.6211 19.695 16.1797 19.7589L23.545 9.2954C23.5776 9.25059 23.6003 9.19946 23.6118 9.1453C23.6234 9.09115 23.6234 9.03517 23.612 8.981C23.6006 8.92683 23.5779 8.87565 23.5454 8.83078C23.513 8.78591 23.4715 8.74833 23.4237 8.72049C23.1163 8.53994 22.8502 8.29708 22.6423 8.00752C22.4344 7.71796 22.2894 7.38811 22.2166 7.03917C22.1438 6.69023 22.1448 6.32992 22.2196 5.9814C22.2943 5.63288 22.4412 5.30385 22.6507 5.01547C23.0439 4.50777 23.6099 4.1622 24.2411 4.04443C24.8724 3.92666 25.5249 4.0449 26.0747 4.37668L37.7391 11.2501C38.0464 11.4307 38.3126 11.6735 38.5205 11.9631C38.7284 12.2526 38.8734 12.5825 38.9461 12.9314C39.0189 13.2804 39.0179 13.6407 38.9432 13.9892C38.8684 14.3377 38.7215 14.6668 38.512 14.9551C38.1189 15.4628 37.5529 15.8084 36.9216 15.9262C36.2904 16.0439 35.6379 15.9257 35.0881 15.5939C35.0508 15.572 35.0093 15.558 34.9663 15.5529C34.9233 15.5478 34.8797 15.5517 34.8383 15.5643C34.7968 15.5769 34.7585 15.598 34.7256 15.6262C34.6927 15.6543 34.6661 15.6891 34.6473 15.7281L29.1217 27.3605C29.933 28.6892 31.8558 32.2729 30.4376 34.6939C30.3096 34.9132 30.0998 35.0727 29.8543 35.1374C29.6087 35.202 29.3476 35.1666 29.1281 35.0389L21.1432 30.3182L12.2 43.1963C12.0744 43.3847 11.8842 43.5205 11.6653 43.5782C11.4464 43.6358 11.2139 43.6113 11.0119 43.5093H10.948L10.8841 43.471C10.6868 43.3455 10.5425 43.1518 10.4789 42.9267C10.4153 42.7017 10.4367 42.4611 10.5392 42.2509L17.3615 28.1654ZM17.0572 21.6214C16.9049 21.692 16.7367 21.7216 16.5694 21.7072C15.5793 21.6242 12.9346 21.6242 11.5229 22.4802L29.0387 32.7584C29.0898 31.1103 27.8058 28.7978 27.2437 27.9738C27.1488 27.8357 27.0918 27.6751 27.0783 27.5081C27.0649 27.3411 27.0955 27.1735 27.167 27.022L32.9162 14.8849C33.0484 14.6051 33.2373 14.356 33.4711 14.1532C33.7048 13.9505 33.9782 13.7986 34.2738 13.7073C34.5694 13.616 34.8808 13.5872 35.1882 13.6227C35.4955 13.6583 35.7921 13.7575 36.059 13.9139C36.1998 14.0054 36.3687 14.0434 36.5351 14.0211C36.7015 13.9989 36.8544 13.9178 36.9661 13.7925C37.0186 13.7205 37.0554 13.6384 37.0742 13.5513C37.093 13.4642 37.0934 13.3742 37.0754 13.287C37.0573 13.1998 37.0212 13.1173 36.9694 13.0448C36.9176 12.9724 36.8512 12.9115 36.7745 12.8663L25.1293 6.0631C24.9885 5.97164 24.8196 5.9336 24.6532 5.95586C24.4869 5.97813 24.3339 6.05922 24.2222 6.18447C24.1697 6.25646 24.1329 6.33863 24.1141 6.42569C24.0953 6.51276 24.0949 6.60279 24.1129 6.69002C24.131 6.77724 24.1671 6.85973 24.2189 6.93218C24.2707 7.00463 24.3371 7.06545 24.4138 7.11072C24.691 7.27239 24.9315 7.48998 25.1201 7.74965C25.3086 8.00933 25.4411 8.3054 25.5089 8.61904C25.5768 8.93268 25.5787 9.25701 25.5144 9.57142C25.4502 9.88582 25.3212 10.1834 25.1356 10.4452L17.4381 21.3048C17.3409 21.4417 17.2096 21.5508 17.0572 21.6214ZM26.6329 12.2494C26.7558 12.2766 26.8722 12.3278 26.9754 12.4C27.1791 12.5412 27.3202 12.7558 27.369 12.9988C27.4179 13.2418 27.3706 13.4942 27.2373 13.7032L21.8969 21.3687C21.7512 21.5771 21.5287 21.7191 21.2784 21.7634C21.028 21.8077 20.7702 21.7508 20.5619 21.6051C20.3535 21.4594 20.2115 21.2368 20.1672 20.9865C20.1229 20.7361 20.1798 20.4784 20.3255 20.27L25.6403 12.6364C25.7124 12.5331 25.8041 12.4451 25.9103 12.3774C26.0164 12.3096 26.1348 12.2634 26.2588 12.2415C26.3828 12.2195 26.5099 12.2222 26.6329 12.2494Z" fill="white"/>
-</svg>
+<svg width="48" height="48" viewBox="0 0 48 48" fill="#fff" xmlns="http://www.w3.org/2000/svg">
+  <path d="M25.3 9.764a.879.879 0 0 0-1.532-.863l-4.763 8.453a.879.879 0 1 0 1.532.863L25.3 9.764Z" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M22.418.515a1.318 1.318 0 1 0-1.114 2.39l1.192.556-8.879 15.257-1.336-.623a1.319 1.319 0 0 0-1.115 2.39l19.917 9.287a1.319 1.319 0 0 0 1.114-2.39l-1.336-.623 5.981-16.609 1.192.556a1.318 1.318 0 1 0 1.114-2.39L22.418.515Zm-7.2 18.95 14.043 6.548 5.682-15.778-11.291-5.266-8.435 14.495Z" />
+  <path d="m11.795 46.277 9.49-17.337c.193-.357.138-.763-.12-.883l-2.31-1.076c-.257-.12-.607.103-.753.475L10.92 45.869c-.3.779.475 1.14.874.408Z" />
+</svg>
\ No newline at end of file