add logo, icon and structure info and contributors tab

src/app/tab1/tab1.page.html

@@ -1,7 +1,9 @@
+
+
 <ion-header>
   <ion-toolbar>
     <ion-title>
-      UseFairCoin Locations around you, and the world..     (v0.1alpha)
+     <img src="/assets/imgs/logo_ufc.png" alt="Use Faircoin" height="30px" >
     </ion-title>
   </ion-toolbar>
 </ion-header>

src/app/tab2/tab2.page.html

@@ -1,44 +1,20 @@
 <ion-header>
   <ion-toolbar>
     <ion-title>
-      Information
+      <h1>Information</h1>
     </ion-title>
   </ion-toolbar>
 </ion-header>
-
 <ion-content>
-<pre>
-
-  This software is a proof-of-concept on how to use a dettached UI which gets data
-  from a backend via an API serving JSON.
-
-  In this case we are displaying locations which accept Faircoins.
-
-
-  The backend is currently an independent OCP (valuenetwork (*)) install using GraphQL
-  to serve the frontend, made in Ionic 4 which is great for mobile apps.
-
-  Here we display the GeoLocation of the user (you!) so you can easily find who accept
-  Faircoins around you.
-
-  It's more recommended and reasonable to try it on your phone with GPS activated.
-
-
-
-  This was done in collaboration with several FairCoop members and is open for ideas,
-  feature requests, pull requests (mostly!), and contributions (See contributors tab)
-
-  WARNING: this is alpha software and might not work well on every browser yet.
-
-  There is the option to build this as a mobile app, where GeoLocation works
-  much more reliably than with regular browsers.
-
-
-  Source Code Repository
-
-  https://git.aps.systems/rama/ufc-frontend
-
-
-  (*) https://github.com/FreedomCoop/valuenetwork
-</pre>
+<h3>This software is a proof-of-concept on how to use a dettached UI which gets data from a backend via an API serving JSON.</h3>
+<p>In this case we are displaying locations which accept Faircoins.</p>
+<p>The backend is currently an independent OCP (valuenetwork (*)) install using GraphQL to serve the frontend, made in Ionic 4 which is great for mobile apps.</p>
+<p>Here we display the GeoLocation of the user (you!) so you can easily find who accept Faircoins around you.</p>
+<p>It's more recommended and reasonable to try it on your phone with GPS activated.</p>
+<p>This was done in collaboration with several FairCoop members and is open for ideas, feature requests, pull requests (mostly!), and contributions (See contributors tab)</p>
+<p>WARNING: this is alpha software and might not work well on every browser yet.</p>
+<p>There is the option to build this as a mobile app, where GeoLocation works much more reliably than with regular browsers.</p>
+<p>Source Code Repository</p>
+<p><a href="https://git.aps.systems/rama/ufc-frontend" class="Internet_20_link">https://git.aps.systems/rama/ufc-frontend</a></p>
+<p>(*) <a href="https://github.com/FreedomCoop/valuenetwork" class="Internet_20_link">https://github.com/FreedomCoop/valuenetwork</a></p>
 </ion-content>

src/app/tab3/tab3.page.html

@@ -1,20 +1,34 @@
 <ion-header>
   <ion-toolbar>
-    <ion-title>
-      Contributors
-    </ion-title>
+    <ion-list-header>
+      <h1>Contributors</h1>
+    </ion-list-header>
   </ion-toolbar>
 </ion-header>
-
-<ion-content>
-  <pre>
+<ion-item>
   Bumbum
+</ion-item>
+<ion-item>
   Onix
+</ion-item>
+<ion-item>
   Lynn Foster
+</ion-item>
+<ion-item>
   Oncle Phil
+</ion-item>
+<ion-item>
   Bernini
+</ion-item>
+<ion-item>
   Rama
+</ion-item>
+<ion-item>
   Apardo
+</ion-item>
+<ion-item>
   Trid
-  </pre>
+</ion-item>
+<ion-content text-center padding>
+  <a href="https://fair.coop/"><img src="/assets/imgs/faircoop_color.png" alt="Faircoop" height="80px" ></a>
 </ion-content>

src/app/tabs/tabs.page.html

@@ -2,18 +2,21 @@
 
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="tab1">
-      <ion-icon name="flash"></ion-icon>
-      <ion-label>Map</ion-label>
+      <ion-icon name="md-globe"></ion-icon>
+<!-- unuseful. only to maintain icon size-->
+      <ion-label></ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab2">
-      <ion-icon name="apps"></ion-icon>
-      <ion-label>Info</ion-label>
+      <ion-icon name="md-information-circle"></ion-icon>
+<!-- unuseful. only to maintain icon size-->
+      <ion-label></ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab3">
-      <ion-icon name="send"></ion-icon>
-      <ion-label>Contributors</ion-label>
+      <ion-icon name="md-people"></ion-icon>
+<!-- unuseful. only to maintain icon size-->
+      <ion-label></ion-label>
     </ion-tab-button>
   </ion-tab-bar>
 

src/app/tabs/tabs.page.scss

@@ -1 +1,22 @@
 
+ion-icon {
+        font-size: 7rem; //Preferred size here
+    }
+
+ion-tab-bar{
+  height: 10%;
+  background-color: #dcdcdc;
+}
+
+ion-tab-button{
+  background-color: #dcdcdc;
+}
+
+
+//ion-tab-button{
+//  color: #283583;
+//}
+
+//sc-ion-tab-button-md-h{
+//  background-color: #283583
+//}

src/theme/variables.scss

@@ -4,15 +4,15 @@
 /** Ionic CSS Variables **/
 :root {
   /** primary **/
-  --ion-color-primary: #3880ff;
+  --ion-color-primary: #69b42d;
   --ion-color-primary-rgb: 56, 128, 255;
   --ion-color-primary-contrast: #ffffff;
   --ion-color-primary-contrast-rgb: 255, 255, 255;
   --ion-color-primary-shade: #3171e0;
   --ion-color-primary-tint: #4c8dff;
 
   /** secondary **/
-  --ion-color-secondary: #0cd1e8;
+  --ion-color-secondary: #283583;
   --ion-color-secondary-rgb: 12, 209, 232;
   --ion-color-secondary-contrast: #ffffff;
   --ion-color-secondary-contrast-rgb: 255, 255, 255;
@@ -57,7 +57,7 @@
   --ion-color-dark-contrast: #ffffff;
   --ion-color-dark-contrast-rgb: 255, 255, 255;
   --ion-color-dark-shade: #1e2023;
-  --ion-color-dark-tint: #383a3e;
+  --ion-color-dark-tint: #283583;
 
   /** medium **/
   --ion-color-medium: #989aa2;