From 0ba0ab1f602c8c071fb5fabdedccf5d93729c3e7 Mon Sep 17 00:00:00 2001
From: Shelby Kay <bonjour@shelbykay.dev>
Date: Wed, 29 Sep 2021 23:38:00 +0200
Subject: [PATCH] Edit Newsletter component

---
 src/components/atoms/Button.svelte         |   2 +-
 src/components/organisms/Newsletter.svelte |  46 ++++++----
 src/style/_base.scss                       |   2 +-
 src/style/_variables.scss                  |   4 +-
 src/style/organisms/_newsletter.scss       | 102 ++++++++++++---------
 static/images/icons/form.svg               |  12 +--
 6 files changed, 98 insertions(+), 70 deletions(-)

diff --git a/src/components/atoms/Button.svelte b/src/components/atoms/Button.svelte
index 30f6cb0..468b2aa 100644
--- a/src/components/atoms/Button.svelte
+++ b/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>
 
diff --git a/src/components/organisms/Newsletter.svelte b/src/components/organisms/Newsletter.svelte
index 3e2f435..828d379 100644
--- a/src/components/organisms/Newsletter.svelte
+++ b/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>
diff --git a/src/style/_base.scss b/src/style/_base.scss
index d34ad38..32d09a9 100644
--- a/src/style/_base.scss
+++ b/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
diff --git a/src/style/_variables.scss b/src/style/_variables.scss
index 8afe8aa..16e52b9 100644
--- a/src/style/_variables.scss
+++ b/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);
diff --git a/src/style/organisms/_newsletter.scss b/src/style/organisms/_newsletter.scss
index b64b84d..077a5b1 100644
--- a/src/style/organisms/_newsletter.scss
+++ b/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;
+        }
     }
 }
\ No newline at end of file
diff --git a/static/images/icons/form.svg b/static/images/icons/form.svg
index c36e29c..710d06b 100644
--- a/static/images/icons/form.svg
+++ b/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">
-<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="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="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="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="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"/>
+<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.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.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.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.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 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>