fix subscription form

2 files changed, 115 insertions, 10 deletions

diff --git a/animism-align/frontend/app/views/viewer/forms/forms.css b/animism-align/frontend/app/views/viewer/forms/forms.css
index e50f1c9..a612c0a 100644
--- a/animism-align/frontend/app/views/viewer/forms/forms.css
+++ b/animism-align/frontend/app/views/viewer/forms/forms.css
@@ -1,6 +1,6 @@
 /* form in transcript */
 
-.player-transcript .subscription-form {
+.credits-content .subscription-form {
   font-family: "Freight Text", serif;
   font-size: 3.5rem;
   line-height: 1;
@@ -11,39 +11,144 @@
   margin-bottom: 13rem;
   position: relative;
 }
-.player-transcript .subscription-form input[type='email'] {
+.credits-content .subscription-form input[type='email'] {
   font-family: "Freight Text", serif;
   font-size: 3.5rem;
-  border-bottom: 1px solid #000;
   color: black;
   line-height: 1;
   background: transparent;
   border: 0;
   padding: 0;
   width: 100%;
+  border-bottom: 1px solid #ddd;
+  margin-right: 1rem;
 }
-.player-transcript .subscription-form input[type='email']::placeholder {
+.credits-content .subscription-form input[type='email']::placeholder {
   color: #bbb;
   border-bottom: 1px solid #bbb;
 }
-.player-transcript .subscription-form input[type='email']:invalid {
+.credits-content .subscription-form input[type='email']:invalid {
   border-bottom: 1px solid #bbb;
 }
-.player-transcript .subscription-form input[type='email']:focus,
-.player-transcript .subscription-form input[type='email']:focus:invalid {
+.credits-content .subscription-form input[type='email']:focus,
+.credits-content .subscription-form input[type='email']:focus:invalid {
   background: transparent;
   border: 0;
   outline: 0;
   color: #000;
   border-bottom: 1px solid #000;
 }
-.player-transcript .subscription-form svg {
+.credits-content .subscription-form svg {
   position: absolute;
   bottom: 0;
   right: -1rem;
   width: 2.5rem;
   height: 2.5rem;
 }
-.player-transcript .subscription-form svg polygon {
+.credits-content .subscription-form svg polygon {
   fill: #666;
 }
+
+.credits-content .subscription-row {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  width: 100%;
+  padding-right: 0.5rem;
+  margin: 0.25rem 0;
+}
+.credits-content button.subscription-submit {
+  position: relative;
+  background: transparent;
+  border: 0;
+  padding: 0 0.75rem 0 0;
+  overflow: visible;
+  font-family: "Freight Text", serif;
+  font-size: 3.5rem;
+  color: #000;
+}
+.credits-content .subscription-form .arrow {
+  position: absolute;
+  top: 1.0rem;
+  right: -0.5rem;
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.credits-content .subscription-form svg polygon {
+  fill: #000;
+}
+.credits-content .subscription-callout {
+  width: 100%;
+  text-align: center;
+  padding-bottom: 2.5rem;
+}
+.credits-content .subscription-form label {
+  display: block;
+}
+.credits-content .subscription-privacy {
+  margin-top: 0.5rem;
+}
+.credits-content .checkbox {
+  font-size: 1.0rem;
+  line-height: 1.4;
+}
+.credits-content form input[type="checkbox"] {
+  display: inline;
+  margin: 0 0.5rem 0 0;
+}
+.credits-content form label span {
+  display: inline;
+  padding: 0;
+}
+.credits-content form input[type="checkbox"] + span {
+  text-transform: none;
+  color: #333;
+  font-size: 1.0rem;
+}
+.credits-content input[type=checkbox]:hover + span {
+  color: #000;
+}
+.credits-content input[type="checkbox"]:checked + span {
+  color: #000;
+}
+.credits-content input[type=checkbox]:after {
+  border-color: #333;
+}
+.credits-content input[type=checkbox]:focus:after {
+  border-color: #000;
+}
+.credits-content input[type="checkbox"]:checked:after {
+  border-color: #333;
+  background-color: #333;
+}
+
+
+/* thanks */
+
+.credits-content .subscription-thanks {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%;
+  height: 100%;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+  opacity: 0.0;
+  transition: opacity 0.4s;
+}
+.credits-content .subscribed .subscription-thanks {
+  opacity: 1.0;
+  pointer-events: auto;
+}
+.credits-content button.subscription-reset {
+  font-family: "Neue Haas Unica", sans-serif;
+  margin-top: 1.0rem;
+  font-size: 18px;
+  background: white;
+  padding: 0.25rem 0.5rem;
+  color: #000;
+  border-color: #000;
+}
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/viewer/forms/subscription.form.js b/animism-align/frontend/app/views/viewer/forms/subscription.form.js
index 8107358..b3e8564 100644
--- a/animism-align/frontend/app/views/viewer/forms/subscription.form.js
+++ b/animism-align/frontend/app/views/viewer/forms/subscription.form.js
@@ -83,7 +83,7 @@ export default class SubscriptionForm extends Component {
           </span>
         </label>
         <div className="subscription-thanks">
-          Thanks! You will receive an email soon with next steps.
+          Thanks! You will receive an email soon confirming your subscription.
           <br />
           <button className="subscription-reset" onClick={this.handleReset}>OK</button>
         </div>