Merge branch 'release/v2.6.2'

Luciano Nooijen · Luciano Nooijen · commit 44bc4310f855 · 2021-01-27T13:34:28.000+01:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 2.6.2 (2021-01-27)
+
+### Changed:
+
+* Colors for newsletter popup
+
 ## 2.6.1 (2021-01-12)
 
 ### Fixed:
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "bytecode-website",
   "private": false,
   "description": "The Bytecode Digital Agency website, released as free software",
-  "version": "v2.6.1",
+  "version": "v2.6.2",
   "author": "Luciano Nooijen <luciano@bytecode.nl>",
   "keywords": [
     "bytecode"
diff --git a/src/containers/NewsletterSubscribe/NewsletterSubscribe.components.ts b/src/containers/NewsletterSubscribe/NewsletterSubscribe.components.ts
@@ -13,7 +13,7 @@ export const NewsletterSubscribeContainer = styled.div`
 
 export const NewsLetterSubscribePopupContainer = styled.div`
     margin-top: 2vh;
-    background: #1c1e1f;
+    background: ${theme.colors.offWhite};
     padding: 10vw;
     max-width: 800px;
     @media (min-width: ${theme.breakpoint.md}) {
@@ -22,17 +22,24 @@ export const NewsLetterSubscribePopupContainer = styled.div`
     position: fixed;
     right: 3%;
     bottom: 5%;
-    border-radius: 10px;
     box-shadow: 5px 10px rgba(0, 0, 0, 0.3);
     z-index: 101010;
+    h4,
+    p {
+        color: ${theme.colors.black};
+    }
 `;
 
 export const NewsletterSubscribeForm = styled.form`
-    @media (min-width: ${theme.breakpoint.md}) {
-        display: flex;
-        > input {
-            flex: 1;
-        }
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 10px;
+    @media (max-width: ${theme.breakpoint.xs}) {
+        grid-template-columns: 1fr;
+    }
+    > input {
+        background: ${theme.colors.white};
+        color: ${theme.colors.black};
     }
 `;
 
@@ -42,12 +49,14 @@ export const SubscribeButton = styled.button`
     height: 56.5px;
     padding: 12px 24px;
     margin-left: 5px;
-    border-radius: 2px;
+    border-radius: 10rem;
     border: none;
     text-align: center;
     font-size: 1.35rem;
-    :disabled {
-        background: #888;
+    max-width: 220px;
+
+    @media (max-width: ${theme.breakpoint.md}) {
+        padding: 12px;
     }
 `;
 
diff --git a/src/containers/NewsletterSubscribe/NewsletterSubscribe.tsx b/src/containers/NewsletterSubscribe/NewsletterSubscribe.tsx
@@ -83,7 +83,7 @@ const NewsletterSubscribe: React.FC<NewsletterSubscribeProps> = ({
                     name="subscribe"
                     id="mc-embedded-subscribe"
                 >
-                    Schrijf in
+                    Schrijf je in
                 </SubscribeButton>
             </NewsletterSubscribeForm>
         </Container>
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
@@ -11,6 +11,7 @@ const lightgray2 = '#E7E7E7';
 const mediumgray = '#262626';
 const red = '#df5252';
 const white = '#ffffff';
+const offWhite = '#f5f5f5';
 const lightgreen = '#70C197';
 
 // Fonts
@@ -42,6 +43,7 @@ type Colors = {
     lightgray: string;
     lightgray2: string;
     white: string;
+    offWhite: string;
 };
 type Fonts = {
     heading: string;
@@ -165,6 +167,7 @@ const bytecode: Bytecode = {
         lightgray,
         lightgray2,
         white,
+        offWhite,
     },
     fonts: {
         heading,

Original file line number	Diff line number	Diff line change
`@@ -83,7 +83,7 @@ const NewsletterSubscribe: React.FC<NewsletterSubscribeProps> = ({`
`83`	`83`	`name="subscribe"`
`84`	`84`	`id="mc-embedded-subscribe"`
`85`	`85`	`>`
`86`		`- Schrijf in`
	`86`	`+ Schrijf je in`
`87`	`87`	`</SubscribeButton>`
`88`	`88`	`</NewsletterSubscribeForm>`
`89`	`89`	`</Container>`