style: ionic style

Author: peterpeterparker

studio/src/app/components/core/app-footer/app-footer.tsx

@@ -10,7 +10,7 @@ export class AppFooter {
     render() {
         return [
             <hr margin/>,
-            <div padding-start padding-end margin-bottom>
+            <div class="ion-padding-start ion-padding-end ion-margin-bottom">
                 <ion-anchor href="/about" routerDirection="forward">
                     <ion-label>About</ion-label>
                 </ion-anchor>

studio/src/app/components/core/app-menu-user/app-menu-user.tsx

@@ -213,8 +213,7 @@ export class AppMenuUser {
 
             <ion-item-divider>
                 <ion-label>Presentations</ion-label>
-                <ion-button size="small" slot="end" shape="round" margin-end onClick={() => this.navigateNewDeck()}
-                            class="new">
+                <ion-button size="small" slot="end" shape="round" onClick={() => this.navigateNewDeck()} class="new ion-margin-end">
                     <ion-icon name="book" slot="start"></ion-icon>
                     <ion-label>New</ion-label>
                 </ion-button>
@@ -266,7 +265,7 @@ export class AppMenuUser {
     private renderDecksFilter() {
         return <ion-searchbar debounce={500} animated placeholder="Filter your presentations"
                               onIonChange={(e: CustomEvent) => this.filterDecksOnChange(e)}
-                              ion-no-padding ion-margin-top ion-margin-bottom></ion-searchbar>;
+                              class="ion-no-padding ion-margin-top ion-margin-bottom"></ion-searchbar>;
     }
 
     private renderDecks() {

studio/src/app/components/core/app-navigation-actions/app-navigation-actions.tsx

@@ -79,15 +79,15 @@ export class AppNavigationActions {
         if (Utils.isLoggedIn(this.authUser) || !this.signIn) {
             return undefined;
         } else if (this.presentation || this.publish) {
-            return <a padding-start padding-end class="signin" onClick={() => this.navigateSignIn()}>
+            return <a class="signin ion-padding-start ion-padding-end" onClick={() => this.navigateSignIn()}>
                 <ion-label>Sign in</ion-label>
             </a>;
         }
     }
 
     private renderLoggedIn() {
         if (Utils.isLoggedIn(this.authUser)) {
-            return <a padding-end onClick={(e: UIEvent) => this.openMenu(e)}>
+            return <a class="ion-padding-end" onClick={(e: UIEvent) => this.openMenu(e)}>
                 <app-avatar src={this.authUser.photo_url}></app-avatar>
             </a>;
         } else {
@@ -97,7 +97,7 @@ export class AppNavigationActions {
 
     private renderPresentationButton() {
         if (this.presentation) {
-            return <ion-button class="presentation" shape="round" href="/editor" routerDirection="forward" padding-end>
+            return <ion-button class="presentation ion-padding-end" shape="round" href="/editor" routerDirection="forward">
                 <ion-label class="ion-text-uppercase">Write a presentation</ion-label>
             </ion-button>;
         } else {
@@ -107,7 +107,7 @@ export class AppNavigationActions {
 
     private renderPublishButton() {
         if (this.publish) {
-            return <ion-button class="publish" shape="round" onClick={() => this.actionPublish.emit()} padding-end>
+            return <ion-button class="publish ion-padding-end" shape="round" onClick={() => this.actionPublish.emit()}>
                 <ion-label class="ion-text-uppercase">Ready to publish?</ion-label>
             </ion-button>;
         } else {

studio/src/app/components/feed/card/app-feed-card/app-feed-card.tsx

@@ -157,7 +157,7 @@ export class AppFeedCard {
                 </ion-card-subtitle>
             </ion-card-header>
 
-            <p padding-start padding-end class="content" contentEditable={this.editable}>{this.description}</p>
+            <p class="content ion-padding-start ion-padding-end" contentEditable={this.editable}>{this.description}</p>
 
             <p class="author" padding>
                 <ion-label>{this.author} | {this.formattedPublication}</ion-label>

studio/src/app/pages/core/about/app-privacy/app-privacy.tsx

@@ -23,7 +23,7 @@ export class AppAbout {
 
                     <p>The information we collect about all visitors to our website includes:</p>
 
-                    <ul padding-start>
+                    <ul class="ion-padding-start">
                         <li>The visitor’s browser type</li>
                         <li>Referring site</li>
                         <li>The date and time of each visitor request</li>
@@ -32,15 +32,15 @@ export class AppAbout {
 
                     <p>We use this information to:</p>
 
-                    <ul padding-start>
+                    <ul class="ion-padding-start">
                         <li>Provide, test, improve, promote and personalize DeckDeckGo Services</li>
                         <li>Fight spam and other forms of abuse</li>
                         <li>Generate aggregate, non-identifying information about how people use DeckDeckGo Services</li>
                     </ul>
 
                     <p>In order for you to create an account on DeckDeckGo and use our Services, we need to collect and process certain information. Depending on your use of the Services, that may include:</p>
 
-                    <ul padding-start>
+                    <ul class="ion-padding-start">
                         <li>Communications you send to us (for example, when you ask for support, send us questions or comments, or report a problem);</li>
                         <li>Information that you submit on or to DeckDeckGo in the form of reactions, comments, or messages to other users;</li>
                         <li>The email address associated with your Twitter account, if you choose to sign up using your Twitter credentials. DeckDeckGo will also request permission to access additional information (these permissions are governed by Twitter’s privacy policies and can be managed through your Twitter privacy settings). We never post anything to your Twitter without your permission.</li>

studio/src/app/pages/core/about/app-terms/app-terms.tsx

@@ -21,7 +21,7 @@ export class AppAbout {
 
                     <p>a. Permission is granted to temporarily download one copy of the materials (information or software) on DeckDeckGo's web site and platform for personal or commercial viewing only. This is the grant of a license, not a transfer of title, and under this license you may not:</p>
 
-                    <ul padding-start>
+                    <ul class="ion-padding-start">
                         <li>modify or copy the materials;</li>
                         <li>attempt to decompile or reverse engineer any software contained on DeckDeckGo's web site;</li>
                         <li>remove any copyright or other proprietary notations from the materials; or</li>

studio/src/components.d.ts

@@ -8,9 +8,9 @@
 import '@stencil/core';
 
 import '@ionic/core';
-import 'ionicons';
 import 'deckdeckgo';
 import 'deckdeckgo-inline-editor';
+import 'ionicons';
 import {
   EventEmitter,
 } from '@stencil/core';