subscription form

3 files changed, 20 insertions, 6 deletions

diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js
index 0ae002a..a9df389 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js
@@ -200,8 +200,12 @@ export const SubscriptionForm = () => {
       Stay up to date and get notified when the next episode is available
       <input
         required
-        type="text"
+        type="email"
+        name="email"
         placeholder="Email address here"
+        autoCorrect="off"
+        autoCapitalize="off"
+        spellCheck="false"
       />
       <Arrow type='right' />
     </form>
diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.css b/animism-align/frontend/app/views/viewer/player/player.transcript.css
index 95105ce..927d2c1 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -390,32 +390,41 @@
 
 .subscription-form {
   font-family: "Freight Text", serif;
-  font-size: 3rem;
+  font-size: 3.5rem;
   line-height: 1;
   width: 80%;
-  max-width: 60rem;
+  max-width: 70rem;
   margin: 0 auto;
   margin-top: 4rem;
-  margin-bottom: 10rem;
+  margin-bottom: 13rem;
   position: relative;
 }
 .subscription-form input {
   font-family: "Freight Text", serif;
-  font-size: 3rem;
+  font-size: 3.5rem;
   line-height: 1;
   background: transparent;
   border: 0;
   padding: 0;
   width: 100%;
   border-bottom: 1px solid #000;
+  color: black;
 }
 .subscription-form input::placeholder {
   color: #bbb;
   border-bottom: 1px solid #bbb;
 }
-.subscription-form input[type='text']:invalid {
+.subscription-form input[type='email']:invalid {
   border-bottom: 1px solid #bbb;
 }
+.subscription-form input:focus,
+.subscription-form input:focus:invalid {
+  background: transparent;
+  border: 0;
+  outline: 0;
+  color: #000;
+  border-bottom: 1px solid #000;
+}
 .subscription-form svg {
   position: absolute;
   bottom: 0;
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index 6ce2f01..5fb2e8f 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -289,6 +289,7 @@ export const seekToBeginning = () => dispatch => {
 }
 
 export const showCredits = () => dispatch => {
+  actions.viewer.closeGrowl()
   actions.viewer.showComponent("credits")
 }