Fixing UI and responsiveness

elielnfinic · Oct 29, 2022 · 123aff0 · 123aff0
1 parent d71f5a9
commit 123aff0
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 34 deletions.
diff --git a/public/output.css b/public/output.css
@@ -772,6 +772,16 @@ select {
   margin-bottom: 1rem;
 }
 
+.my-10 {
+  margin-top: 2.5rem;
+  margin-bottom: 2.5rem;
+}
+
+.my-6 {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
 .ml-10 {
   margin-left: 2.5rem;
 }
@@ -828,6 +838,10 @@ select {
   margin-top: 1rem;
 }
 
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
 .block {
   display: block;
 }
@@ -952,6 +966,10 @@ select {
   flex: 1 1 0%;
 }
 
+.flex-auto {
+  flex: 1 1 auto;
+}
+
 .flex-shrink-0 {
   flex-shrink: 0;
 }
@@ -1670,6 +1688,14 @@ select {
     height: 2.5rem;
   }
 
+  .sm\:w-full {
+    width: 100%;
+  }
+
+  .sm\:w-auto {
+    width: auto;
+  }
+
   .sm\:max-w-xl {
     max-width: 36rem;
   }
@@ -1745,6 +1771,14 @@ select {
     display: block;
   }
 
+  .md\:inline-block {
+    display: inline-block;
+  }
+
+  .md\:flex {
+    display: flex;
+  }
+
   .md\:hidden {
     display: none;
   }
@@ -1753,6 +1787,14 @@ select {
     width: auto;
   }
 
+  .md\:flex-auto {
+    flex: 1 1 auto;
+  }
+
+  .md\:flex-1 {
+    flex: 1 1 0%;
+  }
+
   .md\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(2rem * var(--tw-space-x-reverse));

diff --git a/src/pages/newsletter/Newsletter.js b/src/pages/newsletter/Newsletter.js
@@ -35,49 +35,48 @@ export default function Newsletter() {
 
 
           {success === "" ? (<div className="mt-10">
-            <div className="text-center inline-flex">
-              <img src={open_den_logo} className="w-20 rounded-3xl"/>
+            <div className="text-center">
+              <img src={open_den_logo} className="w-20 rounded-3xl inline"/>
+            </div>
+            <div className="my-6">
+              <h2 className="inline text-3xl font-bold tracking-tight text-gray-900 sm:block sm:text-4xl">
+                Get ready for the personal files wallet on the blockchain
+              </h2>
             </div>
-
-            <h2 className="inline text-3xl font-bold tracking-tight text-gray-900 sm:block sm:text-4xl">
-              Get ready for the personal files wallet on the blockchain
-            </h2>
             <p>
               Store your personal photos - videos - documents - files on the blockchain
             </p>
-            <p className="mt-2 inline text-3xl font-bold tracking-tight text-openden2 sm:block sm:text-4xl">
+            <p className="mt-6 inline text-3xl font-bold tracking-tight text-openden2 sm:block sm:text-4xl">
               Join the waitlist 
             </p>
 
 
-              <form method="post" onSubmit={handleSubmit} className="mt-8 flex inline-block items-center">
-              <div class="flex-1 ">
-
-              </div>
-                <label htmlFor="email-address" className="sr-only">
-                  Email address 
-                </label>
-                <input
-                  id="email-address"
-                  name="email"
-                  type="email"
-                  onChange={handleChange}
-                  autoComplete="email"
-                  required
-                  className="w-full  flex-1 rounded-md border-gray-300 px-5 py-3 placeholder-gray-500 focus:border-openden2 focus:ring-openden1 sm:max-w-xs"
-                  placeholder="Enter your email"
-                />
-                <div className="mt-3 rounded-md sm:mt-0 sm:ml-3 sm:flex-shrink-0 flex-1">
-                  <button
-                    type="submit"
-                    className="flex items-center justify-center rounded-md border border-transparent bg-openden1 px-5 py-3 text-base font-medium text-white hover:bg-openden2 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                  >
-                    Notify me
-                  </button>
+              <form method="post" onSubmit={handleSubmit} className="mt-8 md:flex inline-block items-center">
+              <div className="md:flex mx-auto ">
+                <div className="md:flex-2">
+                    <label htmlFor="email-address" className="sr-only">
+                      Email address 
+                    </label>
+                    <input
+                      id="email-address"
+                      name="email"
+                      type="email"
+                      onChange={handleChange}
+                      autoComplete="email"
+                      required
+                      className="w-full  md:flex-1 rounded-md border-gray-300 px-5 py-3 placeholder-gray-500 focus:border-openden2 focus:ring-openden1 sm:max-w-xs"
+                      placeholder="Enter your email"
+                    />
                 </div>
-
-                <div>
-
+                  <div className="mt-3 rounded-md sm:mt-0 sm:ml-3 md:flex-1 sm:w-full">
+                    <button
+                      type="submit"
+                      className="flex items-center w-full justify-center rounded-md border border-transparent bg-openden1 px-5 py-3 text-base font-medium text-white hover:bg-openden2 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                    >
+                      Notify me
+                    </button>
+                  </div>
+
                 </div>
               </form>
               {error ? <div className="bg-red-300 px-6 py-2 mt-4 inline-block animate-pulse rounded-md">{error}</div> : '' }