fix(app): update UI to modernize (ionic-team#870)

.github/CONTRIBUTING.md

@@ -35,7 +35,7 @@ There are several repositories being used for Ionic, which makes it difficult to
 
 * The [Ionic repository](https://github.com/ionic-team/ionic) is a repository for all things related to the Ionic Framework. If you are able to reproduce the issue in any of the Ionic starters (or an existing project), you'll want to submit the issue [here](http://ionicframework.com/submit-issue/).
 * The [Ionic CLI repository](https://github.com/ionic-team/ionic-cli) contains all of the code that allows you to run `ionic` commands from a terminal window. It is safe to put any issues [here](https://github.com/ionic-team/ionic-cli/issues) that relate to running an `ionic` command.
-* [This repository](https://github.com/ionic-team/ionic-conference-app) is a demo of the Ionic 2 Framework. If you find an issue with this app that does not occur on [a new app](http://ionicframework.com/docs/v2/getting-started/installation/), please submit the issue [here](https://github.com/ionic-team/ionic-conference-app/issues).
+* [This repository](https://github.com/ionic-team/ionic-conference-app) is a demo of the Ionic Framework. If you find an issue with this app that does not occur on [a new app](http://ionicframework.com/docs/v2/getting-started/installation/), please submit the issue [here](https://github.com/ionic-team/ionic-conference-app/issues).
 
 
 #### Submitting the Issue
@@ -52,7 +52,7 @@ When in doubt, keep your pull requests small. To give a PR the best chance of ge
 
 It's always best to create two smaller PRs than one big one.
 
-Talk to us before creating a PR that refactors the code or directory structure of the project. This project is constantly changing to reflect the latest version of Ionic 2.0 so sometimes it will be in the process of getting fixed.
+Talk to us before creating a PR that refactors the code or directory structure of the project. This project is constantly changing to reflect the latest version of Ionic Framework so sometimes it will be in the process of getting fixed.
 
 #### Code Style
 

src/app/app.component.html

@@ -7,14 +7,14 @@
           <ion-title>Menu</ion-title>
         </ion-toolbar>
       </ion-header>
-      <ion-content>
 
-        <ion-list>
+      <ion-content>
+        <ion-list lines="none">
           <ion-list-header>
             Navigate
           </ion-list-header>
           <ion-menu-toggle autoHide="false" *ngFor="let p of appPages; let i = index">
-            <ion-item [routerLink]="p.url" routerLinkActive="active" routerDirection="root">
+            <ion-item [routerLink]="p.url" routerLinkActive="active" routerDirection="root" detail="false">
               <ion-icon slot="start" [name]="p.icon"></ion-icon>
               <ion-label>
                 {{p.title}}
@@ -24,13 +24,13 @@
           </ion-menu-toggle>
         </ion-list>
 
-        <ion-list *ngIf="loggedIn">
+        <ion-list *ngIf="loggedIn" lines="none">
           <ion-list-header>
             Account
           </ion-list-header>
 
           <ion-menu-toggle autoHide="false">
-            <ion-item routerLink="/account" routerDirection="root">
+            <ion-item routerLink="/account" routerLinkActive="active" routerDirection="root" detail="false">
               <ion-icon slot="start" name="person"></ion-icon>
               <ion-label>
                 Account
@@ -39,7 +39,7 @@
           </ion-menu-toggle>
 
           <ion-menu-toggle autoHide="false">
-            <ion-item routerLink="/support" routerDirection="root">
+            <ion-item routerLink="/support" routerLinkActive="active" routerDirection="root" detail="false">
               <ion-icon slot="start" name="help"></ion-icon>
               <ion-label>
                 Support
@@ -48,7 +48,7 @@
           </ion-menu-toggle>
 
           <ion-menu-toggle autoHide="false">
-            <ion-item button (click)="logout()">
+            <ion-item button (click)="logout()" detail="false">
               <ion-icon slot="start" name="log-out"></ion-icon>
               <ion-label>
                 Logout
@@ -58,13 +58,13 @@
 
         </ion-list>
 
-        <ion-list *ngIf="!loggedIn">
+        <ion-list *ngIf="!loggedIn" lines="none">
           <ion-list-header>
             Account
           </ion-list-header>
 
           <ion-menu-toggle autoHide="false">
-            <ion-item routerLink="/login" routerDirection="root">
+            <ion-item routerLink="/login" routerLinkActive="active" routerDirection="root" detail="false">
               <ion-icon slot="start" name="log-in"></ion-icon>
               <ion-label>
                 Login
@@ -73,7 +73,7 @@
           </ion-menu-toggle>
 
           <ion-menu-toggle autoHide="false">
-            <ion-item routerLink="/support" routerDirection="root">
+            <ion-item routerLink="/support" routerLinkActive="active" routerDirection="root" detail="false">
               <ion-icon slot="start" name="help"></ion-icon>
               <ion-label>
                 Support
@@ -82,7 +82,7 @@
           </ion-menu-toggle>
 
           <ion-menu-toggle autoHide="false">
-            <ion-item routerLink="/signup" routerDirection="root">
+            <ion-item routerLink="/signup" routerLinkActive="active" routerDirection="root" detail="false">
               <ion-icon slot="start" name="person-add"></ion-icon>
               <ion-label>
                 Signup
@@ -91,12 +91,12 @@
           </ion-menu-toggle>
         </ion-list>
 
-        <ion-list>
+        <ion-list lines="none">
           <ion-list-header>
             Tutorial
           </ion-list-header>
           <ion-menu-toggle autoHide="false">
-            <ion-item button (click)="openTutorial()">
+            <ion-item button (click)="openTutorial()" detail="false">
               <ion-icon slot="start" name="hammer"></ion-icon>
               <ion-label>Show Tutorial</ion-label>
             </ion-item>

src/app/app.component.scss

@@ -1,6 +1,14 @@
+ion-item {
+  --transition: unset;
+}
+
 .active {
-  color: var(--ion-color-primary);
+  --color: var(--ion-color-primary);
+  --background: rgba(var(--ion-color-primary-rgb), 0.12);
+  --background-hover: rgba(var(--ion-color-primary-rgb), 0.16);
+  --background-focused: rgba(var(--ion-color-primary-rgb), 0.24);
+
   ion-icon {
-    color: var(--ion-color-primary);
+    color: inherit;
   }
 }

src/app/pages/about/about.html

@@ -40,8 +40,8 @@ <h4 class="ion-padding-start">Ionic Conference</h4>
 
     <p class="ion-padding-start ion-padding-end">
       The Ionic Conference is a one-day conference featuring talks from the Ionic team. It is focused on Ionic applications being
-      built with Ionic 2. This includes migrating apps from Ionic 1 to Ionic 2, Angular concepts, Webpack, Sass, and many
-      other technologies used in Ionic 2. Tickets are completely sold out, and we’re expecting more than 1000 developers
+      built with Ionic Framework. This includes migrating apps to the latest Ionic Framework, Angular concepts, Webpack, Sass, and many
+      other technologies used in Ionic Framework. Tickets are completely sold out, and we’re expecting more than 1000 developers
       – making this the largest Ionic conference ever!
     </p>
   </div>

src/app/pages/session-detail/session-detail.scss

@@ -38,24 +38,38 @@
   color: var(--ion-color-navigation);
 }
 
+// Favorite Icon
+// --------------------------------------------------------
+
 .show-favorite {
   position: relative;
 }
 
-.icon-heart-empty {
+.icon-heart-empty,
+.icon-heart {
+  --border-radius: 50%;
+  --padding-start: 0;
+  --padding-end: 0;
+
   position: absolute;
+
   top: 5px;
   right: 5px;
+
+  width: 48px;
+  height: 48px;
+
+  font-size: 16px;
+
+  transition: transform 300ms ease;
+}
+
+.icon-heart-empty {
   transform: scale(1);
-  transition: transform 0.3s ease;
 }
 
 .icon-heart {
-  position: absolute;
-  top: 5px;
-  right: 5px;
   transform: scale(0);
-  transition: transform 0.3s ease;
 }
 
 .show-favorite .icon-heart {

src/assets/data/data.json

@@ -248,7 +248,9 @@
     {
       "name": "Burt Bear",
       "profilePic": "assets/img/speakers/bear.jpg",
+      "instagram": "ionicframework",
       "twitter": "ionicframework",
+      "github": "ionic-team/ionic",
       "about": "Burt is a Bear.",
       "location": "Everywhere",
       "email": "[email protected]",
@@ -258,7 +260,9 @@
     {
       "name": "Charlie Cheetah",
       "profilePic": "assets/img/speakers/cheetah.jpg",
+      "instagram": "ionicframework",
       "twitter": "ionicframework",
+      "github": "ionic-team/ionic",
       "about": "Charlie is a Cheetah.",
       "location": "Everywhere",
       "email": "[email protected]",
@@ -268,7 +272,9 @@
     {
       "name": "Donald Duck",
       "profilePic": "assets/img/speakers/duck.jpg",
+      "instagram": "ionicframework",
       "twitter": "ionicframework",
+      "github": "ionic-team/ionic",
       "about": "Donald is a Duck.",
       "location": "Everywhere",
       "email": "[email protected]",
@@ -278,7 +284,9 @@
     {
       "name": "Eva Eagle",
       "profilePic": "assets/img/speakers/eagle.jpg",
+      "instagram": "ionicframework",
       "twitter": "ionicframework",
+      "github": "ionic-team/ionic",
       "about": "Eva is an Eagle.",
       "location": "Everywhere",
       "email": "[email protected]",
@@ -288,7 +296,9 @@
     {
       "name": "Ellie Elephant",
       "profilePic": "assets/img/speakers/elephant.jpg",
+      "instagram": "ionicframework",
       "twitter": "ionicframework",
+      "github": "ionic-team/ionic",
       "about": "Ellie is an Elephant.",
       "location": "Everywhere",
       "email": "[email protected]",
@@ -298,7 +308,9 @@
     {
       "name": "Gino Giraffe",
       "profilePic": "assets/img/speakers/giraffe.jpg",
+      "instagram": "ionicframework",
       "twitter": "ionicframework",
+      "github": "ionic-team/ionic",
       "about": "Gino is a Giraffe.",
       "location": "Everywhere",
       "email": "[email protected]",
@@ -308,7 +320,9 @@
     {
       "name": "Isabella Iguana",
       "profilePic": "assets/img/speakers/iguana.jpg",
+      "instagram": "ionicframework",
       "twitter": "ionicframework",
+      "github": "ionic-team/ionic",
       "about": "Isabella is an Iguana.",
       "location": "Everywhere",
       "email": "[email protected]",
@@ -318,7 +332,9 @@
     {
       "name": "Karl Kitten",
       "profilePic": "assets/img/speakers/kitten.jpg",
+      "instagram": "ionicframework",
       "twitter": "ionicframework",
+      "github": "ionic-team/ionic",
       "about": "Karl is a Kitten.",
       "location": "Everywhere",
       "email": "[email protected]",
@@ -328,7 +344,9 @@
     {
       "name": "Lionel Lion",
       "profilePic": "assets/img/speakers/lion.jpg",
+      "instagram": "ionicframework",
       "twitter": "ionicframework",
+      "github": "ionic-team/ionic",
       "about": "Lionel is a Lion.",
       "location": "Everywhere",
       "email": "[email protected]",
@@ -338,7 +356,9 @@
     {
       "name": "Molly Mouse",
       "profilePic": "assets/img/speakers/mouse.jpg",
+      "instagram": "ionicframework",
       "twitter": "ionicframework",
+      "github": "ionic-team/ionic",
       "about": "Molly is a Mouse.",
       "location": "Everywhere",
       "email": "[email protected]",
@@ -348,7 +368,9 @@
     {
       "name": "Paul Puppy",
       "profilePic": "assets/img/speakers/puppy.jpg",
+      "instagram": "ionicframework",
       "twitter": "ionicframework",
+      "github": "ionic-team/ionic",
       "about": "Paul is a Puppy.",
       "location": "Everywhere",
       "email": "[email protected]",
@@ -358,7 +380,9 @@
     {
       "name": "Rachel Rabbit",
       "profilePic": "assets/img/speakers/rabbit.jpg",
+      "instagram": "ionicframework",
       "twitter": "ionicframework",
+      "github": "ionic-team/ionic",
       "about": "Rachel is a Rabbit.",
       "location": "Everywhere",
       "email": "[email protected]",
@@ -368,7 +392,9 @@
     {
       "name": "Ted Turtle",
       "profilePic": "assets/img/speakers/turtle.jpg",
+      "instagram": "ionicframework",
       "twitter": "ionicframework",
+      "github": "ionic-team/ionic",
       "about": "Ted is a Turtle.",
       "location": "Everywhere",
       "email": "[email protected]",

src/theme/variables.scss

@@ -83,6 +83,33 @@
   --ion-color-light-contrast-rgb: 0, 0, 0;
   --ion-color-light-shade: #d7d8da;
   --ion-color-light-tint: #f5f6f9;
+
+  // Default Theme Colors
+  --ion-background-color: #ffffff;
+  --ion-background-color-rgb: 255,255,255;
+
+  --ion-text-color: #000000;
+  --ion-text-color-rgb: 0,0,0;
+
+  --ion-color-step-50: #f2f2f2;
+  --ion-color-step-100: #e6e6e6;
+  --ion-color-step-150: #d9d9d9;
+  --ion-color-step-200: #cccccc;
+  --ion-color-step-250: #bfbfbf;
+  --ion-color-step-300: #b3b3b3;
+  --ion-color-step-350: #a6a6a6;
+  --ion-color-step-400: #999999;
+  --ion-color-step-450: #8c8c8c;
+  --ion-color-step-500: #808080;
+  --ion-color-step-550: #737373;
+  --ion-color-step-600: #666666;
+  --ion-color-step-650: #595959;
+  --ion-color-step-700: #4d4d4d;
+  --ion-color-step-750: #404040;
+  --ion-color-step-800: #333333;
+  --ion-color-step-850: #262626;
+  --ion-color-step-900: #191919;
+  --ion-color-step-950: #0d0d0d;
 }
 
 /*
@@ -180,6 +207,24 @@
   --ion-color-tint: var(--ion-color-facebook-tint);
 }
 
+.ion-color-github {
+  --ion-color-base: #211F1F;
+  --ion-color-base-rgb: 33,31,31;
+  --ion-color-contrast: #ffffff;
+  --ion-color-contrast-rgb: 255,255,255;
+  --ion-color-shade: #1d1b1b;
+  --ion-color-tint: #373535;
+}
+
+.ion-color-instagram {
+  --ion-color-base: #9537BC;
+  --ion-color-base-rgb: 149,55,188;
+  --ion-color-contrast: #ffffff;
+  --ion-color-contrast-rgb: 255,255,255;
+  --ion-color-shade: #8330a5;
+  --ion-color-tint: #a04bc3;
+}
+
 /*
  * Shared Variables
  * ----------------------------------------------------------------------------