update: upgrade groups sign up page (slightly)

website/client/src/components/groups/groupPlan.vue

@@ -108,7 +108,7 @@
       >
         <div class="row">
           <h1 class="col-12 text-center purple-header">
-            Create your Group today!
+            Create Your Group Today!
           </h1>
         </div>
         <div class="row">
@@ -117,39 +117,33 @@
               class="btn btn-primary create-group"
               @click="launchModal('create-page')"
             >
-              Create Your New Group
+              Create Your New Group!
             </button>
           </div>
         </div>
-        <div class="row pricing">
+        <div class="row pricing justify-content-center align-items-center">
-          <div class="col-5">
+          <div class="dollar">
-            <div class="dollar">
+            $
-              $
-            </div>
-            <div class="number">
-              9
-            </div>
-            <div class="name">
-              <div>Group Owner</div>
-              <div>Subscription</div>
-            </div>
           </div>
-          <div class="col-1">
+          <div class="number">
-            <div class="plus">
+            9
-              +
-            </div>
           </div>
-          <div class="col-6">
+          <div class="name">
-            <div class="dollar">
+            <div>Group Owner</div>
-              $
+            <div>Subscription</div>
-            </div>
+          </div>
-            <div class="number">
+          <div class="plus">
-              3
+            +
-            </div>
+          </div>
-            <div class="name">
+          <div class="dollar">
-              <div>Each Additional</div>
+            $
-              <div>Member</div>
+          </div>
-            </div>
+          <div class="number">
+            3
+          </div>
+          <div class="name">
+            <div>Each Additional</div>
+            <div>Member</div>
           </div>
         </div>
       </div>
@@ -165,8 +159,8 @@
 
     .dollar {
       position: absolute;
-      left: -1em;
+      left: -16px;
-      top: 1em;
+      top: 16px;
     }
 
     .purple-box {
@@ -191,9 +185,9 @@
     background: #432874;
     background: linear-gradient(180deg, #4F2A93 0%, #432874 100%);
     color: #fff;
-    padding: 2em;
+    padding: 32px;
     height: 340px;
-    margin-bottom: 2em;
+    margin-bottom: 32px;
     margin-left: -12px;
     margin-right: -12px;
 
@@ -217,6 +211,7 @@
 
     .box {
       height: 416px;
+      border-radius: 8px;
     }
 
     h2 {
@@ -259,17 +254,19 @@
   button.create-group {
     width: 330px;
     height: 96px;
+    border-radius: 8px;
+    font-size: 1.5rem;
   }
 
   .purple-header {
     color: #6133b4;
     font-size: 48px;
-    margin-top: 1em;
+    margin-top: 16px;
   }
 
   .pricing {
-    margin-top: 2em;
+    margin-top: 32px;
-    margin-bottom: 4em;
+    margin-bottom: 64px;
 
     .dollar, .number, .name {
       display: inline-block;
@@ -278,35 +275,37 @@
     }
 
     .plus {
-      font-size: 34px;
+      font-size: 2.125rem;
       color: #a5a1ac;
+      margin-left: 16px;
+      margin-right: 16px;
     }
 
     .dollar {
-      margin-bottom: 1.5em;
+      margin-bottom: 24px;
-      font-size: 32px;
+      font-size: 2rem;
       font-weight: bold;
     }
 
     .name {
-      font-size: 24px;
+      font-size: 1.5rem;
-      margin-bottom: .8em;
+      margin-left: 8px;
-      margin-left: .5em;
+      margin-right: 8px;
     }
 
     .number {
-      font-size: 72px;
+      font-size: 4.5rem;
       font-weight: bolder;
     }
   }
 
   .payment-options {
-    margin-bottom: 4em;
+    margin-bottom: 64px;
 
     .purple-box {
       background-color: #4f2a93;
       color: #fff;
-      padding: .5em;
+      padding: 8px;
       border-radius: 8px;
       width: 200px;
       height: 215px;
@@ -320,7 +319,7 @@
 
       .name {
         width: 100px;
-        margin-left: .3em;
+        margin-left: 4.8px;
       }
 
       .plus {