subscription form

2 files changed, 49 insertions, 3 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 83996a7..0ae002a 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
@@ -196,10 +196,15 @@ const CreditsVenue = ({ venue }) => {
 
 export const SubscriptionForm = () => {
   return (
-    <div className="subscription-form">
+    <form className="subscription-form">
       Stay up to date and get notified when the next episode is available
-      <input type="text" placeholder="Email address here" />
-    </div>
+      <input
+        required
+        type="text"
+        placeholder="Email address here"
+      />
+      <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 72faf7b..95105ce 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -385,3 +385,44 @@
 .venue-info .credits-info div {
   min-height: 0.875rem;
 }
+
+/* subscription form */
+
+.subscription-form {
+  font-family: "Freight Text", serif;
+  font-size: 3rem;
+  line-height: 1;
+  width: 80%;
+  max-width: 60rem;
+  margin: 0 auto;
+  margin-top: 4rem;
+  margin-bottom: 10rem;
+  position: relative;
+}
+.subscription-form input {
+  font-family: "Freight Text", serif;
+  font-size: 3rem;
+  line-height: 1;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  width: 100%;
+  border-bottom: 1px solid #000;
+}
+.subscription-form input::placeholder {
+  color: #bbb;
+  border-bottom: 1px solid #bbb;
+}
+.subscription-form input[type='text']:invalid {
+  border-bottom: 1px solid #bbb;
+}
+.subscription-form svg {
+  position: absolute;
+  bottom: 0;
+  right: -1rem;
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.subscription-form svg polygon {
+  fill: #666;
+}
\ No newline at end of file