Better styling for success message and hiding subscription form

README.md

@@ -10,7 +10,7 @@ To connect Subscribe form to the Mailchimp - you need to do following:
    3. Then grab `"action"` from the `<form>` tag. It should look like `action="https://xxx.xx.list-manage.com/subscribe/post?u=<VALUE_OF_U_VARIABLE>&amp;id=<VALUE_OF_ID_VARIABLE>"`
 2. Copy `.env.sample` file and rename it to be just `.env`
 3. Fill in values. 
-   1.  `REACT_APP_SUBSCRIBE_FORM_DOMAIN` correspondss to `xxx.xx.list-manage.com`
+   1.  `REACT_APP_SUBSCRIBE_FORM_DOMAIN` corresponds to `xxx.xx.list-manage.com`
    2.  `REACT_APP_SUBSCRIBE_FORM_U` corresponds to `VALUE_OF_U_VARIABLE`
    3.  `REACT_APP_SUBSCRIBE_FORM_ID` corresponds to `VALUE_OF_ID_VARIABLE`
 4. For deploying anywhere - you just need to pass expected content of `.env` file as Environment Variables.

src/components/Subscribe/index.scss

@@ -5,11 +5,12 @@
   padding-bottom: 40px;
   background-color: $white;
   max-height: 500px;
-  transition: max-height 0.25s ease-in;
+  transition: all 0.5s ease-in;
 
   &--hidden {
     max-height: 0;
-    transition: max-height 0.15s ease-out;
+    padding: 0;
+    transition: all 0.5s ease-out;
   }
 
   h1 {
@@ -34,4 +35,8 @@
     margin-top: 10px;
     text-align: center;
   }
+
+  &__success-message {
+    text-align: center;
+  }
 }

src/components/Subscribe/index.tsx

@@ -11,7 +11,9 @@ const SubscribeForm: FunctionComponent = () => {
 		<section className={`subscribe${!isVisible ? " subscribe--hidden" : ""}`}>
 			<h1>Keep in Touch for Future Events</h1>
 			{success ? (
-				<p>Success! You are subscribed to our newsletter :)</p>
+				<p className="subscribe__success-message">
+					Success! You are subscribed to our newsletter :)
+				</p>
 			) : (
 				<form
 					className="subscribe__input-container"