Create Contact Us Section on Info Page (#253)

* Create Contact Us Area on Information Page containing Email and Phone Number

* Fix Budgeting Issue

* Raise Budgets

* more budgeting

Author: RyCarpenter

web-app/angular.json

@@ -87,8 +87,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "10kb"
+                  "maximumWarning": "18kb",
+                  "maximumError": "30kb"
                 }
               ]
             },
@@ -250,8 +250,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "10kb"
+                  "maximumWarning": "18kb",
+                  "maximumError": "30kb"
                 }
               ]
             },
@@ -416,8 +416,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "10kb"
+                  "maximumWarning": "18kb",
+                  "maximumError": "30kb"
                 }
               ]
             },

web-app/package-lock.json

@@ -3,14 +3,12 @@
     <button mat-icon-button (click)="onBack()">
       <mat-icon>arrow_back</mat-icon>
     </button>
-
-    <span class="title">About</span>
+    <span class="title">About MAGE</span>
   </div>
 </mat-toolbar>
 
 <div class="content">
   <div>
-    <div class="mat-h1">About</div>
     <p>
       Mage is a dynamic, secure, mobile situational awareness and field data collection platform that supports
       low-bandwidth and disconnected users. Mage can integrate with existing command centers and common operating
@@ -23,31 +21,43 @@
     </p>
 
     <div class="app-store">
-      <a href="https://itunes.apple.com/us/app/m.a.g.e./id1032815042?mt=8">
+      <a
+        class="center-content"
+        href="https://itunes.apple.com/us/app/m.a.g.e./id1032815042?mt=8"
+      >
         <img class="app-store-icon" src="/assets/images/ios_app_store_black.svg">
       </a>
-      <a href="https://play.google.com/store/apps/details?id=mil.nga.giat.mage&hl=en">
+      <a
+        class="center-content"
+        href="https://play.google.com/store/apps/details?id=mil.nga.giat.mage&hl=en"
+      >
         <img class="app-store-icon" src="/assets/images/google-play-badge.png">
       </a>
-    </div>
+    </div> 
   </div>
 
   <div>
-    <div class="mat-h1">API</div>
+    <h3>
+      <span>API</span>
+    </h3>
     <div>
       Browse and try the Mage API live with <a href="#/swagger">Swagger UI.</a> Swagger interactive documentation will modify Mage data via API calls; please be careful with <strong>POST/PUT/DELETE</strong> operations.
     </div>
   </div>
 
   <div>
-    <div class="mat-h1">System</div>
+    <h3>
+      <span>System</span>
+    </h3>
     <div>Server Version {{mageVersion?.major}}.{{mageVersion?.minor}}.{{mageVersion?.micro}}</div>
     <div>Node Version {{nodeVersion}}</div>
     <div>MongoDB Version {{mongoVersion}}</div>
   </div>
 
   <div>
-    <div class="mat-h1">Acknowledgements</div>
+    <h3>
+      <span>Acknowledgements</span>
+    </h3>
       <div>Mage is built with the MEAN stack
         <a href="https://www.mongodb.org/" target="_blank">MongoDB</a>, 
         <a href="https://expressjs.com/" target="_blank">Express</a>, 
@@ -63,5 +73,11 @@
         <a href="https://leafletjs.com/" target="_blank">Leaflet</a>
       </div>
   </div>
-
+  <div>
+    <h3>
+      <span>Contact Us</span>
+    </h3>
+    <p><i class="fa fa-phone"></i> +1-571-557-1121</p>
+    <p><i class="fa fa-envelope"></i><a href="mailto:[email protected]"> [email protected]</a></p>
+  </div>
 </div>

web-app/src/app/about/about.component.html

@@ -2,25 +2,35 @@
 @import "variables.scss";
 
 .content {
-  width: 50vw;
+  width: 75vw;
   margin: 0 auto;
   padding: 32px 0;
   display: flex;
   flex-direction: column;
   gap: 32px;
 }
 
-.mat-h1 {
-  color: mat.get-color-from-palette($app-primary);
-}
-
 .container {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
 }
 
+h3 {
+  width:100%;
+  text-align:left;
+  border-bottom: 1px solid #000;
+  line-height:0.1em;
+  margin:10px 0 20px;
+  color: mat.get-color-from-palette($app-primary);
+} 
+h3 span {
+  background:#fff;
+  padding:0 10px;
+  border: none;
+}
+
 .title {
   margin-left: 16px;
 }
@@ -30,8 +40,13 @@
   flex-direction: row;
   gap: 16px;
   align-items: center;
+  margin-top: 20px;
 }
 
 .app-store-icon {
   height: 48px;
+}
+
+.center-content{
+  margin: 0 auto !important;
 }

web-app/src/app/about/about.component.scss

@@ -5,7 +5,7 @@ import { Router } from '@angular/router';
 @Component({
   selector: 'about',
   templateUrl: './about.component.html',
-  styleUrls: ['./about.component.scss']
+  styleUrls: ['./about.component.scss', '../../../node_modules/font-awesome/css/font-awesome.min.css']
 })
 export class AboutComponent implements OnInit {
   mageVersion: {