Edit Newsletter component

src/components/atoms/Button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     export let text: string
-    export let tag: string = 'button'
+    export let tag: string = 'a'
     export let url: string = undefined
 </script>
 

src/components/organisms/Newsletter.svelte

@@ -1,32 +1,40 @@
 <script lang="ts">
     import { getContext } from 'svelte'
     // Components
-    import Button from '$components/atoms/Button.svelte'
+    import IconArrow from '$components/atoms/IconArrow.svelte'
-import IconArrow from '$components/atoms/IconArrow.svelte'
 
-    // export let locations: any
+    export let theme: string = 'default'
-    const { settings: { newsletter_url, newsletter_text, newsletter_subtitle} }: any = getContext('global')
+
+    const { settings: { newsletter_url, newsletter_text, newsletter_subtitle }}: any = getContext('global')
+
+    let inputInFocus = false
+
+    // Toggle input focus
+    const toggleFocus = () => inputInFocus = !inputInFocus
 </script>
 
-<div class="newsletter grid">
+<div class="newsletter newsletter--{theme} shadow-box-dark">
-    <div class="newsletter__wrapper grid">
+    <div class="newsletter__wrapper">
-        <div class="newsletter__about">
+        <h3 class="title-medium">{newsletter_subtitle}</h3>
-            <h3 class="title-small">{newsletter_subtitle}</h3>
+        <p class="text-small">{newsletter_text}</p>
-            <p class="text-small">{newsletter_text}</p>
+
+        <form action={newsletter_url} target="_blank">
+            <div class="newsletter__email" class:is-focused={inputInFocus}>
+                <input type="email" placeholder="Your email address"
+                    on:focus={toggleFocus}
+                    on:blur={toggleFocus}
+                >
+                <button type="submit">
+                    <IconArrow color="white" />
+                </button>
+            </div>
+        </form>
+
+        <div class="past-issues">
             <a href="/subscribe">
                 <img src="/images/icons/form.svg" alt="newsletter icon">
                 <span>See past issues</span>
             </a>
-        </div>
-        <div class="newsletter__signup">
-            <form action={newsletter_url} target="_blank">
-                <div class="newsletter__email">
-                    <input type="email" placeholder="Your email address">
-                    <button type="submit">
-                        <IconArrow color="white" />
-                    </button>
-                </div>
-            </form>
             <span>No spam, we promise!</span>
         </div>
     </div>

src/style/_base.scss

@@ -44,7 +44,7 @@ button {
     outline: none;
 }
 [data-focus-visible-added], *:focus-visible {
-    outline: 1px dashed $color-tertiary;
+    outline: 1px dashed $color-secondary;
 }
 
 // Selection

src/style/_variables.scss

@@ -12,11 +12,13 @@ $color-lilas-bright: #C78FEC;
 $color-gray: #666;
 $color-lightgray: #999;
 $color-shadow-brown: #7A5D44;
+$color-cream: #FEF6EF;
+
 
 // CSS Variables
 :root {
     // Sizes
-    --container-width: 1680px;
+    --container-width: 1800px;
 
     // Animation
     --ease-quart: cubic-bezier(.165, .84, .44, 1);

src/style/organisms/_newsletter.scss

@@ -1,75 +1,68 @@
 .newsletter {
-    margin-bottom: 88px;
-
     &__wrapper {
         --columns: 20;
-        background-color: $color-primary-dark;
         grid-column: 3 / span var(--columns);
-        padding: 80px 0;
+        padding: 40px 40px 48px;
+        border-radius: 12px;
 
         @include bp (sd) {
             --columns: 18;
             grid-column: 4 / span var(--columns);
+            padding: 64px 60px 72px;
         }
     }
 
-    // About
+    h3 {
-    &__about {
+        color: $color-secondary;
-        grid-column: 3 / span 6;
-        margin: auto 0;
-
-        // Text
-        p {
-            margin: 16px 0;
-        }
-
-        // Past issues
-        a {
-            text-decoration: none;
-            color: $color-lilas-bright;
-            font-size: rem(14px);
-
-            span {
-                margin-left: 12px;
-                border-bottom: 1px solid $color-lilas-bright;
-            }
-        }
     }
-    // Signup
+    p {
-    &__signup {
+        margin: 12px 0 40px;
-        grid-column: 11 / span 6;
+        color: $color-text;
-        margin: auto 0;
+        font-weight: 300;
-        justify-content: center;
+    }
+    span {
+        font-size: rem(16px);
+        line-height: 1.2;
+        color: rgba($color-text, 0.6);
+    }
+
+    // Past issues
+    a {
+        text-decoration: none;
+        color: $color-text;
+        font-size: rem(14px);
 
         span {
-            font-size: rem(16px);
+            color: $color-text;
-            line-height: 1.2;
+            margin-left: 12px;
-            font-weight: 300;
+            border-bottom: 1px solid $color-text;
-            color: rgba($color-tertiary, 0.6);
         }
     }
 
     // Form
     &__email {
         position: relative;
-        box-shadow: inset 0 0 0 2px $color-secondary;
-        border-radius: 100vh;
-        padding: 0 30px;
-        margin-bottom: 8px;
         display: flex;
+        width: 100%;
         height: 64px;
-        max-width: 400px;
+        margin-bottom: 20px;
+        padding: 0 30px;
+        border-radius: 100vh;
+        box-shadow: inset 0 0 0 3px $color-secondary;
+        transition: box-shadow 0.6s var(--ease-quart);
 
         input {
-            background: none;
+            display: block;
+            width: 100%;
             font-family: $font-sans;
             font-weight: 400;
             font-size: rem(18px);
+            color: #333;
+            background: none;
             border: none;
-            color: #fff;
 
             &::placeholder {
-                color: #fff;
+                color: $color-gray;
                 opacity: 1;
             }
         }
@@ -88,5 +81,30 @@
             flex-shrink: 0;
             border-radius: 100vh;
         }
+
+        // States
+        &.is-focused {
+            box-shadow: inset 0 0 0 4px $color-secondary;
+        }
+    }
+
+    // Past Issues
+    .past-issues {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    // Variants
+    // Default color
+    &--default {
+        .newsletter__wrapper {
+            background-color: $color-tertiary;
+        }
+    }
+    // Light
+    &--light {
+        .newsletter__wrapper {
+            background-color: $color-cream;
+        }
     }
 }

static/images/icons/form.svg

@@ -1,7 +1,7 @@
-<svg width="18" height="15" viewBox="0 0 18 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1.8 12.9459L16.2 12.9459C16.4485 12.9459 16.65 12.7444 16.65 12.4959L16.65 2.50406C16.65 2.25553 16.4485 2.05406 16.2 2.05406L1.8 2.05406C1.55147 2.05406 1.35 2.25553 1.35 2.50406L1.35 12.4959C1.35 12.7444 1.55147 12.9459 1.8 12.9459ZM16.2 14.2959C17.1941 14.2959 18 13.49 18 12.4959L18 2.50406C18 1.50995 17.1941 0.704061 16.2 0.704061L1.8 0.70406C0.805888 0.70406 1.11778e-06 1.50995 1.03088e-06 2.50406L1.57361e-07 12.4959C7.04529e-08 13.49 0.805889 14.2959 1.8 14.2959L16.2 14.2959Z" fill="#C78FEC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.8 12.4459L16.2 12.4459C16.4485 12.4459 16.65 12.2444 16.65 11.9959L16.65 2.00406C16.65 1.75553 16.4485 1.55406 16.2 1.55406L1.8 1.55406C1.55147 1.55406 1.35 1.75553 1.35 2.00406L1.35 11.9959C1.35 12.2444 1.55147 12.4459 1.8 12.4459ZM16.2 13.7959C17.1941 13.7959 18 12.99 18 11.9959L18 2.00406C18 1.00995 17.1941 0.204061 16.2 0.204061L1.8 0.20406C0.805888 0.20406 1.11778e-06 1.00995 1.03088e-06 2.00406L1.57361e-07 11.9959C7.04529e-08 12.99 0.805889 13.7959 1.8 13.7959L16.2 13.7959Z" fill="#333333"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.82499 10.4711L5.62499 10.4711L5.62499 7.77109L3.82499 7.77109L3.82499 10.4711ZM5.62499 11.3711C6.12205 11.3711 6.52499 10.9682 6.52499 10.4711L6.52499 7.77109C6.52499 7.27404 6.12205 6.87109 5.62499 6.87109L3.82499 6.87109C3.32794 6.87109 2.92499 7.27404 2.92499 7.77109L2.92499 10.4711C2.92499 10.9681 3.32794 11.3711 3.82499 11.3711L5.62499 11.3711Z" fill="#C78FEC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.82502 9.97109L5.62502 9.97109L5.62502 7.27109L3.82502 7.27109L3.82502 9.97109ZM5.62502 10.8711C6.12208 10.8711 6.52502 10.4682 6.52502 9.97109L6.52502 7.27109C6.52502 6.77404 6.12208 6.37109 5.62502 6.37109L3.82502 6.37109C3.32797 6.37109 2.92502 6.77404 2.92502 7.27109L2.92502 9.97109C2.92502 10.4681 3.32797 10.8711 3.82502 10.8711L5.62502 10.8711Z" fill="#333333"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15.3 8.75752C15.3 9.00605 15.0985 9.20752 14.85 9.20752L9.44999 9.20752C9.20146 9.20752 8.99999 9.00605 8.99999 8.75752C8.99999 8.50899 9.20146 8.30752 9.44999 8.30752L14.85 8.30752C15.0985 8.30752 15.3 8.50899 15.3 8.75752Z" fill="#C78FEC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.3 8.25752C15.3 8.50605 15.0985 8.70752 14.85 8.70752L9.44999 8.70752C9.20146 8.70752 8.99999 8.50605 8.99999 8.25752C8.99999 8.00899 9.20146 7.80752 9.44999 7.80752L14.85 7.80752C15.0985 7.80752 15.3 8.00899 15.3 8.25752Z" fill="#333333"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14.625 6.50752C14.625 6.75605 14.4235 6.95752 14.175 6.95752L8.775 6.95752C8.52647 6.95752 8.325 6.75605 8.325 6.50752C8.325 6.25899 8.52647 6.05752 8.775 6.05752L14.175 6.05752C14.4235 6.05752 14.625 6.25899 14.625 6.50752Z" fill="#C78FEC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.625 6.00752C14.625 6.25605 14.4235 6.45752 14.175 6.45752L8.775 6.45752C8.52647 6.45752 8.325 6.25605 8.325 6.00752C8.325 5.75899 8.52647 5.55752 8.775 5.55752L14.175 5.55752C14.4235 5.55752 14.625 5.75899 14.625 6.00752Z" fill="#333333"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13.95 4.25752C13.95 4.50605 13.7485 4.70752 13.5 4.70752L8.09998 4.70752C7.85145 4.70752 7.64998 4.50605 7.64998 4.25752C7.64998 4.00899 7.85145 3.80752 8.09998 3.80752L13.5 3.80752C13.7485 3.80752 13.95 4.00899 13.95 4.25752Z" fill="#C78FEC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.95 3.75752C13.95 4.00605 13.7485 4.20752 13.5 4.20752L8.10001 4.20752C7.85148 4.20752 7.65001 4.00605 7.65001 3.75752C7.65001 3.50899 7.85148 3.30752 8.10001 3.30752L13.5 3.30752C13.7485 3.30752 13.95 3.50899 13.95 3.75752Z" fill="#333333"/>
 </svg>