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
-    const { settings: { newsletter_url, newsletter_text, newsletter_subtitle} }: any = getContext('global')
+    export let theme: string = 'default'
+
+    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__wrapper grid">
-        <div class="newsletter__about">
-            <h3 class="title-small">{newsletter_subtitle}</h3>
-            <p class="text-small">{newsletter_text}</p>
+<div class="newsletter newsletter--{theme} shadow-box-dark">
+    <div class="newsletter__wrapper">
+        <h3 class="title-medium">{newsletter_subtitle}</h3>
+        <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
-    &__about {
-        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;
-            }
-        }
+    h3 {
+        color: $color-secondary;
     }
-    // Signup
-    &__signup {
-        grid-column: 11 / span 6;
-        margin: auto 0;
-        justify-content: center;
+    p {
+        margin: 12px 0 40px;
+        color: $color-text;
+        font-weight: 300;
+    }
+    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);
-            line-height: 1.2;
-            font-weight: 300;
-            color: rgba($color-tertiary, 0.6);
+            color: $color-text;
+            margin-left: 12px;
+            border-bottom: 1px solid $color-text;
         }
     }
 
     // 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;
+        }
     }
 }