From 0819fa4c7524f62459e42f99eb2c2c9807ed8504 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Thu, 28 May 2020 16:38:34 +0200
Subject: [PATCH 1/7] feat: rename "Text" to "Font"

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 .../app-select-target-element.tsx                         | 4 ++--
 .../editor/color/app-color-chart/app-color-chart.tsx      | 4 ++--
 .../editor/color/app-color-sides/app-color-sides.tsx      | 8 ++++----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/studio/src/app/components/editor/app-select-target-element/app-select-target-element.tsx b/studio/src/app/components/editor/app-select-target-element/app-select-target-element.tsx
index baded3f67..7673e587d 100644
--- a/studio/src/app/components/editor/app-select-target-element/app-select-target-element.tsx
+++ b/studio/src/app/components/editor/app-select-target-element/app-select-target-element.tsx
@@ -118,7 +118,7 @@ export class AppSelectTargetElement {
     if (this.slide) {
       return (
         <ion-segment-button value={TargetElement.SLIDE} mode="md">
-          <ion-label>Text</ion-label>
+          <ion-label>Font</ion-label>
         </ion-segment-button>
       );
     } else {
@@ -130,7 +130,7 @@ export class AppSelectTargetElement {
     if (this.textTarget) {
       return (
         <ion-segment-button value={TargetElement.TEXT} mode="md">
-          <ion-label>Text</ion-label>
+          <ion-label>Font</ion-label>
         </ion-segment-button>
       );
     } else {
diff --git a/studio/src/app/components/editor/color/app-color-chart/app-color-chart.tsx b/studio/src/app/components/editor/color/app-color-chart/app-color-chart.tsx
index 9c575f37a..2026449e0 100644
--- a/studio/src/app/components/editor/color/app-color-chart/app-color-chart.tsx
+++ b/studio/src/app/components/editor/color/app-color-chart/app-color-chart.tsx
@@ -9,7 +9,7 @@ import {ChartUtils} from '../../../../utils/editor/chart.utils';
 enum ApplyColorType {
   FILL,
   STROKE,
-  TEXT,
+  FONT,
   AXIS,
   GRID,
 }
@@ -241,7 +241,7 @@ export class AppColorDeckSlide {
     const options = [
       <ion-select-option value={ApplyColorType.FILL}>Fill</ion-select-option>,
       <ion-select-option value={ApplyColorType.STROKE}>Stroke</ion-select-option>,
-      <ion-select-option value={ApplyColorType.TEXT}>Text</ion-select-option>,
+      <ion-select-option value={ApplyColorType.FONT}>Font</ion-select-option>,
     ];
 
     if (this.chartType != SlideChartType.PIE) {
diff --git a/studio/src/app/components/editor/color/app-color-sides/app-color-sides.tsx b/studio/src/app/components/editor/color/app-color-sides/app-color-sides.tsx
index c96907249..5f97b8ff2 100644
--- a/studio/src/app/components/editor/color/app-color-sides/app-color-sides.tsx
+++ b/studio/src/app/components/editor/color/app-color-sides/app-color-sides.tsx
@@ -4,7 +4,7 @@ import {RangeChangeEventDetail} from '@ionic/core';
 import {ColorUtils, InitStyleColor} from '../../../../utils/editor/color.utils';
 
 enum ApplyColorType {
-  TEXT,
+  FONT,
   BACKGROUND,
 }
 
@@ -30,7 +30,7 @@ export class AppColorSides {
   private colorOpacity: number = 100;
 
   @State()
-  private applyColorType: ApplyColorType = ApplyColorType.TEXT;
+  private applyColorType: ApplyColorType = ApplyColorType.FONT;
 
   @Event() colorChange: EventEmitter<void>;
 
@@ -177,7 +177,7 @@ export class AppColorSides {
             interface="popover"
             mode="md"
             class="ion-padding-start ion-padding-end">
-            <ion-select-option value={ApplyColorType.TEXT}>Text</ion-select-option>,
+            <ion-select-option value={ApplyColorType.FONT}>Font</ion-select-option>,
             <ion-select-option value={ApplyColorType.BACKGROUND}>Background</ion-select-option>,
           </ion-select>
         </ion-item>
@@ -214,7 +214,7 @@ export class AppColorSides {
   }
 
   private resetLabelContent() {
-    if (this.applyColorType === ApplyColorType.TEXT) {
+    if (this.applyColorType === ApplyColorType.FONT) {
       return 'Reset text color';
     } else {
       return 'Reset background';

From bc20f592dfe2a8c849fd2051d9498f37c834ddc9 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Thu, 28 May 2020 16:42:08 +0200
Subject: [PATCH 2/7] refactor: move colors to styles components package

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 .../app-color-text-background/app-color-text-background.tsx | 0
 .../element}/app-color-code/app-color-code.scss             | 0
 .../element}/app-color-code/app-color-code.tsx              | 2 +-
 .../slide}/app-color-chart/app-color-chart.tsx              | 6 +++---
 .../slide}/app-color-qrcode/app-color-qrcode.tsx            | 2 +-
 .../slide}/app-color-sides/app-color-sides.tsx              | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)
 rename studio/src/app/components/editor/{color => styles}/app-color-text-background/app-color-text-background.tsx (100%)
 rename studio/src/app/components/editor/{color => styles/element}/app-color-code/app-color-code.scss (100%)
 rename studio/src/app/components/editor/{color => styles/element}/app-color-code/app-color-code.tsx (99%)
 rename studio/src/app/components/editor/{color => styles/slide}/app-color-chart/app-color-chart.tsx (97%)
 rename studio/src/app/components/editor/{color => styles/slide}/app-color-qrcode/app-color-qrcode.tsx (98%)
 rename studio/src/app/components/editor/{color => styles/slide}/app-color-sides/app-color-sides.tsx (98%)

diff --git a/studio/src/app/components/editor/color/app-color-text-background/app-color-text-background.tsx b/studio/src/app/components/editor/styles/app-color-text-background/app-color-text-background.tsx
similarity index 100%
rename from studio/src/app/components/editor/color/app-color-text-background/app-color-text-background.tsx
rename to studio/src/app/components/editor/styles/app-color-text-background/app-color-text-background.tsx
diff --git a/studio/src/app/components/editor/color/app-color-code/app-color-code.scss b/studio/src/app/components/editor/styles/element/app-color-code/app-color-code.scss
similarity index 100%
rename from studio/src/app/components/editor/color/app-color-code/app-color-code.scss
rename to studio/src/app/components/editor/styles/element/app-color-code/app-color-code.scss
diff --git a/studio/src/app/components/editor/color/app-color-code/app-color-code.tsx b/studio/src/app/components/editor/styles/element/app-color-code/app-color-code.tsx
similarity index 99%
rename from studio/src/app/components/editor/color/app-color-code/app-color-code.tsx
rename to studio/src/app/components/editor/styles/element/app-color-code/app-color-code.tsx
index fc82794f3..cda2cf5c9 100644
--- a/studio/src/app/components/editor/color/app-color-code/app-color-code.tsx
+++ b/studio/src/app/components/editor/styles/element/app-color-code/app-color-code.tsx
@@ -1,6 +1,6 @@
 import {Component, Element, Event, EventEmitter, h, Prop, State} from '@stencil/core';
 import {alertController, RangeChangeEventDetail} from '@ionic/core';
-import {ColorUtils, InitStyleColor} from '../../../../utils/editor/color.utils';
+import {ColorUtils, InitStyleColor} from '../../../../../utils/editor/color.utils';
 
 enum CodeColorType {
   COMMENTS,
diff --git a/studio/src/app/components/editor/color/app-color-chart/app-color-chart.tsx b/studio/src/app/components/editor/styles/slide/app-color-chart/app-color-chart.tsx
similarity index 97%
rename from studio/src/app/components/editor/color/app-color-chart/app-color-chart.tsx
rename to studio/src/app/components/editor/styles/slide/app-color-chart/app-color-chart.tsx
index 2026449e0..ecde30653 100644
--- a/studio/src/app/components/editor/color/app-color-chart/app-color-chart.tsx
+++ b/studio/src/app/components/editor/styles/slide/app-color-chart/app-color-chart.tsx
@@ -1,10 +1,10 @@
 import {Component, Element, Event, EventEmitter, h, Method, Prop, State} from '@stencil/core';
 import {RangeChangeEventDetail} from '@ionic/core';
 
-import {SlideChartType} from '../../../../models/data/slide';
+import {SlideChartType} from '../../../../../models/data/slide';
 
-import {ColorUtils, InitStyleColor} from '../../../../utils/editor/color.utils';
-import {ChartUtils} from '../../../../utils/editor/chart.utils';
+import {ColorUtils, InitStyleColor} from '../../../../../utils/editor/color.utils';
+import {ChartUtils} from '../../../../../utils/editor/chart.utils';
 
 enum ApplyColorType {
   FILL,
diff --git a/studio/src/app/components/editor/color/app-color-qrcode/app-color-qrcode.tsx b/studio/src/app/components/editor/styles/slide/app-color-qrcode/app-color-qrcode.tsx
similarity index 98%
rename from studio/src/app/components/editor/color/app-color-qrcode/app-color-qrcode.tsx
rename to studio/src/app/components/editor/styles/slide/app-color-qrcode/app-color-qrcode.tsx
index fe0044628..efaa6a24d 100644
--- a/studio/src/app/components/editor/color/app-color-qrcode/app-color-qrcode.tsx
+++ b/studio/src/app/components/editor/styles/slide/app-color-qrcode/app-color-qrcode.tsx
@@ -1,7 +1,7 @@
 import {Component, Element, Event, EventEmitter, h, Method, Prop, State} from '@stencil/core';
 import {RangeChangeEventDetail} from '@ionic/core';
 
-import {ColorUtils, InitStyleColor} from '../../../../utils/editor/color.utils';
+import {ColorUtils, InitStyleColor} from '../../../../../utils/editor/color.utils';
 
 enum ApplyColorType {
   QR_CODE,
diff --git a/studio/src/app/components/editor/color/app-color-sides/app-color-sides.tsx b/studio/src/app/components/editor/styles/slide/app-color-sides/app-color-sides.tsx
similarity index 98%
rename from studio/src/app/components/editor/color/app-color-sides/app-color-sides.tsx
rename to studio/src/app/components/editor/styles/slide/app-color-sides/app-color-sides.tsx
index 5f97b8ff2..81733a479 100644
--- a/studio/src/app/components/editor/color/app-color-sides/app-color-sides.tsx
+++ b/studio/src/app/components/editor/styles/slide/app-color-sides/app-color-sides.tsx
@@ -1,7 +1,7 @@
 import {Component, Element, Event, EventEmitter, h, Method, Prop, State} from '@stencil/core';
 import {RangeChangeEventDetail} from '@ionic/core';
 
-import {ColorUtils, InitStyleColor} from '../../../../utils/editor/color.utils';
+import {ColorUtils, InitStyleColor} from '../../../../../utils/editor/color.utils';
 
 enum ApplyColorType {
   FONT,

From 7630ce115a37e8196ac39dbeeef13fb633994bc4 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Thu, 28 May 2020 17:03:22 +0200
Subject: [PATCH 3/7] feat: code terminal and theme are styles

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 .../app-expansion-panel.tsx                   |  12 +-
 .../app-color-code/app-color-code.scss        |   9 ++
 .../element/app-color-code/app-color-code.tsx | 130 ++++++++++++++++--
 .../app/popovers/editor/app-code/app-code.tsx |  92 -------------
 .../app-element-style/app-element-style.tsx   |   4 +-
 studio/src/components.d.ts                    |   4 +-
 6 files changed, 144 insertions(+), 107 deletions(-)

diff --git a/studio/src/app/components/editor/styles/app-expansion-panel/app-expansion-panel.tsx b/studio/src/app/components/editor/styles/app-expansion-panel/app-expansion-panel.tsx
index 50161d8de..173e53bf8 100644
--- a/studio/src/app/components/editor/styles/app-expansion-panel/app-expansion-panel.tsx
+++ b/studio/src/app/components/editor/styles/app-expansion-panel/app-expansion-panel.tsx
@@ -1,4 +1,4 @@
-import {Component, h, State, Prop} from '@stencil/core';
+import {Component, h, Prop} from '@stencil/core';
 
 @Component({
   tag: 'app-expansion-panel',
@@ -10,11 +10,17 @@ export class AppExpansionPanel {
   @Prop()
   expander: boolean = true;
 
-  @State()
-  private expanded: 'open' | 'close' = 'open';
+  @Prop({mutable: true})
+  expanded: 'open' | 'close' = 'open';
 
   // Source animation: https://css-tricks.com/using-css-transitions-auto-dimensions/
 
+  componentDidLoad() {
+    if (this.expanded === 'close') {
+      this.container.style.height = 0 + 'px';
+    }
+  }
+
   private toggle() {
     if (this.expanded === 'close') {
       this.expand();
diff --git a/studio/src/app/components/editor/styles/element/app-color-code/app-color-code.scss b/studio/src/app/components/editor/styles/element/app-color-code/app-color-code.scss
index 83cea7cfd..021aaec46 100644
--- a/studio/src/app/components/editor/styles/element/app-color-code/app-color-code.scss
+++ b/studio/src/app/components/editor/styles/element/app-color-code/app-color-code.scss
@@ -8,4 +8,13 @@ app-color-code {
   ion-item.action-button {
     padding-bottom: 8px;
   }
+
+  ion-list {
+    &.terminal,
+    &.theme {
+      ion-item {
+        margin-bottom: 4px;
+      }
+    }
+  }
 }
diff --git a/studio/src/app/components/editor/styles/element/app-color-code/app-color-code.tsx b/studio/src/app/components/editor/styles/element/app-color-code/app-color-code.tsx
index cda2cf5c9..305fea9f6 100644
--- a/studio/src/app/components/editor/styles/element/app-color-code/app-color-code.tsx
+++ b/studio/src/app/components/editor/styles/element/app-color-code/app-color-code.tsx
@@ -1,5 +1,9 @@
 import {Component, Element, Event, EventEmitter, h, Prop, State} from '@stencil/core';
+
 import {alertController, RangeChangeEventDetail} from '@ionic/core';
+
+import {DeckdeckgoHighlightCodeCarbonTheme, DeckdeckgoHighlightCodeTerminal} from '@deckdeckgo/highlight-code';
+
 import {ColorUtils, InitStyleColor} from '../../../../../utils/editor/color.utils';
 
 enum CodeColorType {
@@ -45,11 +49,18 @@ export class AppColorCode {
   @State()
   private highlightColorOpacity: number = 100;
 
-  @Event() colorChange: EventEmitter<void>;
+  @State()
+  private terminal: DeckdeckgoHighlightCodeTerminal = DeckdeckgoHighlightCodeTerminal.CARBON;
+
+  @State()
+  private theme: DeckdeckgoHighlightCodeCarbonTheme = DeckdeckgoHighlightCodeCarbonTheme.DRACULA;
+
+  @Event() codeDidChange: EventEmitter<void>;
 
   async componentWillLoad() {
-    await this.initColor();
-    await this.initCurrentHiglight();
+    const promises: Promise<void>[] = [this.initColor(), this.initCurrentHiglight(), this.initTerminal()];
+
+    await Promise.all(promises);
   }
 
   // prettier-ignore
@@ -68,6 +79,18 @@ export class AppColorCode {
     });
   }
 
+  private async initTerminal() {
+    this.terminal =
+      this.selectedElement && this.selectedElement.hasAttribute('terminal')
+        ? (this.selectedElement.getAttribute('terminal') as DeckdeckgoHighlightCodeTerminal)
+        : DeckdeckgoHighlightCodeTerminal.CARBON;
+
+    this.theme =
+      this.selectedElement && this.selectedElement.hasAttribute('theme')
+        ? (this.selectedElement.getAttribute('theme') as DeckdeckgoHighlightCodeCarbonTheme)
+        : DeckdeckgoHighlightCodeCarbonTheme.DRACULA;
+  }
+
   private selectColor($event: CustomEvent, colorFunction: Function): Promise<void> {
     return new Promise<void>(async (resolve) => {
       if (!this.selectedElement || !this.selectedElement.parentElement) {
@@ -165,13 +188,13 @@ export class AppColorCode {
   }
 
   // prettier-ignore
-  private initColor(): Promise<string> {
-    return new Promise<string>(async (resolve) => {
+  private initColor(): Promise<void> {
+    return new Promise<void>(async (resolve) => {
       if (!this.selectedElement || !this.selectedElement.style) {
         this.codeColor = undefined;
         this.codeColorOpacity = 100;
 
-        resolve(null);
+        resolve();
         return;
       }
 
@@ -248,7 +271,7 @@ export class AppColorCode {
   }
 
   private emitColorChange() {
-    this.colorChange.emit();
+    this.codeDidChange.emit();
   }
 
   private updateOpacity($event: CustomEvent<RangeChangeEventDetail>, opacityFunction: Function): Promise<void> {
@@ -297,13 +320,39 @@ export class AppColorCode {
     });
   }
 
+  private toggle($event: CustomEvent, attribute: 'terminal' | 'theme'): Promise<void> {
+    return new Promise<void>(async (resolve) => {
+      if (!$event || !$event.detail) {
+        resolve();
+        return;
+      }
+
+      if (!this.selectedElement) {
+        resolve();
+        return;
+      }
+
+      if (attribute === 'terminal') {
+        this.terminal = $event.detail.value;
+      } else if (attribute === 'theme') {
+        this.theme = $event.detail.value;
+      }
+
+      this.selectedElement.setAttribute(attribute, $event.detail.value);
+
+      this.codeDidChange.emit();
+
+      resolve();
+    });
+  }
+
   render() {
-    return [this.renderCategoryColor(), this.renderHighlightLinesColor()];
+    return [this.renderTerminal(), this.renderTheme(), this.renderCategoryColor(), this.renderHighlightLinesColor()];
   }
 
   private renderCategoryColor() {
     return (
-      <app-expansion-panel>
+      <app-expansion-panel expanded={'close'}>
         <ion-label slot="title">Colors</ion-label>
         <ion-list>
           <ion-item class="select">
@@ -365,9 +414,70 @@ export class AppColorCode {
     );
   }
 
-  private renderHighlightLinesColor() {
+  private renderTerminal() {
+    return (
+      <app-expansion-panel>
+        <ion-label slot="title">Terminal</ion-label>
+
+        <ion-list class="terminal">
+          <ion-item class="select">
+            <ion-label>Terminal</ion-label>
+
+            <ion-select
+              value={this.terminal}
+              placeholder="Select a terminal"
+              onIonChange={($event: CustomEvent) => this.toggle($event, 'terminal')}
+              interface="popover"
+              mode="md"
+              class="ion-padding-start ion-padding-end ion-text-capitalize">
+              {Object.keys(DeckdeckgoHighlightCodeTerminal).map((key: string) => {
+                return (
+                  <ion-select-option value={DeckdeckgoHighlightCodeTerminal[key]}>
+                    {DeckdeckgoHighlightCodeTerminal[key].replace(/^\w/, (c) => c.toUpperCase())}
+                  </ion-select-option>
+                );
+              })}
+            </ion-select>
+          </ion-item>
+        </ion-list>
+      </app-expansion-panel>
+    );
+  }
+
+  private renderTheme() {
     return (
       <app-expansion-panel>
+        <ion-label slot="title">Theme</ion-label>
+
+        <ion-list class="theme">
+          <ion-item class="select">
+            <ion-label>Theme</ion-label>
+
+            <ion-select
+              value={this.theme}
+              placeholder="Select a theme"
+              disabled={this.terminal !== DeckdeckgoHighlightCodeTerminal.CARBON}
+              onIonChange={($event: CustomEvent) => this.toggle($event, 'theme')}
+              interface="popover"
+              mode="md"
+              class="ion-padding-start ion-padding-end ion-text-capitalize">
+              {Object.keys(DeckdeckgoHighlightCodeCarbonTheme).map((key: string) => {
+                return (
+                  <ion-select-option value={DeckdeckgoHighlightCodeCarbonTheme[key]}>
+                    {DeckdeckgoHighlightCodeCarbonTheme[key].replace(/^\w/, (c) => c.toUpperCase())}
+                  </ion-select-option>
+                );
+              })}
+            </ion-select>
+          </ion-item>
+        </ion-list>
+      </app-expansion-panel>
+    );
+  }
+
+  private renderHighlightLinesColor() {
+    return (
+      <app-expansion-panel expanded={'close'}>
         <ion-label slot="title">Highlight lines</ion-label>
         <button slot="info" class="info" onClick={($event: UIEvent) => this.presentHighlightInfo($event)}>
           <ion-icon name="help"></ion-icon>
diff --git a/studio/src/app/popovers/editor/app-code/app-code.tsx b/studio/src/app/popovers/editor/app-code/app-code.tsx
index f1c9d28f8..bd26d0c5b 100644
--- a/studio/src/app/popovers/editor/app-code/app-code.tsx
+++ b/studio/src/app/popovers/editor/app-code/app-code.tsx
@@ -2,8 +2,6 @@ import {Component, Element, EventEmitter, Prop, State, h} from '@stencil/core';
 
 import {modalController, OverlayEventDetail} from '@ionic/core';
 
-import {DeckdeckgoHighlightCodeTerminal, DeckdeckgoHighlightCodeCarbonTheme} from '@deckdeckgo/highlight-code';
-
 import {PrismLanguage, PrismService} from '../../../services/editor/prism/prism.service';
 
 enum CodeFontSize {
@@ -36,12 +34,6 @@ export class AppCode {
   @State()
   private lineNumbers: boolean = false;
 
-  @State()
-  private terminal: DeckdeckgoHighlightCodeTerminal = DeckdeckgoHighlightCodeTerminal.CARBON;
-
-  @State()
-  private theme: DeckdeckgoHighlightCodeCarbonTheme = DeckdeckgoHighlightCodeCarbonTheme.DRACULA;
-
   private prismService: PrismService;
 
   constructor() {
@@ -62,15 +54,6 @@ export class AppCode {
 
       this.currentFontSize = await this.initFontSize();
       this.lineNumbers = this.selectedElement && this.selectedElement.hasAttribute('line-numbers');
-      this.terminal =
-        this.selectedElement && this.selectedElement.hasAttribute('terminal')
-          ? (this.selectedElement.getAttribute('terminal') as DeckdeckgoHighlightCodeTerminal)
-          : DeckdeckgoHighlightCodeTerminal.CARBON;
-
-      this.theme =
-        this.selectedElement && this.selectedElement.hasAttribute('theme')
-          ? (this.selectedElement.getAttribute('theme') as DeckdeckgoHighlightCodeCarbonTheme)
-          : DeckdeckgoHighlightCodeCarbonTheme.DRACULA;
 
       resolve();
     });
@@ -141,32 +124,6 @@ export class AppCode {
     });
   }
 
-  private toggle($event: CustomEvent, attribute: 'terminal' | 'theme'): Promise<void> {
-    return new Promise<void>(async (resolve) => {
-      if (!$event || !$event.detail) {
-        resolve();
-        return;
-      }
-
-      if (!this.selectedElement) {
-        resolve();
-        return;
-      }
-
-      if (attribute === 'terminal') {
-        this.terminal = $event.detail.value;
-      } else if (attribute === 'theme') {
-        this.theme = $event.detail.value;
-      }
-
-      this.selectedElement.setAttribute(attribute, $event.detail.value);
-
-      this.emitCodeDidChange();
-
-      resolve();
-    });
-  }
-
   private toggleLineNumbers($event: CustomEvent): Promise<void> {
     return new Promise<void>(async (resolve) => {
       if (!this.selectedElement) {
@@ -251,55 +208,6 @@ export class AppCode {
           </ion-select>
         </ion-item>
 
-        <ion-item-divider class="ion-padding-top">
-          <ion-label>Terminal</ion-label>
-        </ion-item-divider>
-
-        <ion-item class="select">
-          <ion-label>Terminal</ion-label>
-
-          <ion-select
-            value={this.terminal}
-            placeholder="Select a terminal"
-            onIonChange={($event: CustomEvent) => this.toggle($event, 'terminal')}
-            interface="popover"
-            mode="md"
-            class="ion-padding-start ion-padding-end ion-text-capitalize">
-            {Object.keys(DeckdeckgoHighlightCodeTerminal).map((key: string) => {
-              return (
-                <ion-select-option value={DeckdeckgoHighlightCodeTerminal[key]}>
-                  {DeckdeckgoHighlightCodeTerminal[key].replace(/^\w/, (c) => c.toUpperCase())}
-                </ion-select-option>
-              );
-            })}
-          </ion-select>
-        </ion-item>
-
-        <ion-item-divider class="ion-padding-top">
-          <ion-label>Theme</ion-label>
-        </ion-item-divider>
-
-        <ion-item class="select">
-          <ion-label>Theme</ion-label>
-
-          <ion-select
-            value={this.theme}
-            placeholder="Select a theme"
-            disabled={this.terminal !== DeckdeckgoHighlightCodeTerminal.CARBON}
-            onIonChange={($event: CustomEvent) => this.toggle($event, 'theme')}
-            interface="popover"
-            mode="md"
-            class="ion-padding-start ion-padding-end ion-text-capitalize">
-            {Object.keys(DeckdeckgoHighlightCodeCarbonTheme).map((key: string) => {
-              return (
-                <ion-select-option value={DeckdeckgoHighlightCodeCarbonTheme[key]}>
-                  {DeckdeckgoHighlightCodeCarbonTheme[key].replace(/^\w/, (c) => c.toUpperCase())}
-                </ion-select-option>
-              );
-            })}
-          </ion-select>
-        </ion-item>
-
         <ion-item>
           <ion-label>Display line numbers</ion-label>
           <ion-checkbox slot="end" checked={this.lineNumbers} onIonChange={($event: CustomEvent) => this.toggleLineNumbers($event)}></ion-checkbox>
diff --git a/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx b/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx
index bfb2aa61b..b95398547 100644
--- a/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx
+++ b/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx
@@ -192,7 +192,9 @@ export class AppElementStyle {
         <app-color-chart selectedElement={this.selectedElement} onColorChange={() => this.emitStyleChange()} moreColors={this.moreColors}></app-color-chart>
       );
     } else if (this.applyToTargetElement === TargetElement.CODE) {
-      return <app-color-code selectedElement={this.selectedElement} onColorChange={() => this.emitStyleChange()} moreColors={this.moreColors}></app-color-code>;
+      return (
+        <app-color-code selectedElement={this.selectedElement} onCodeDidChange={() => this.emitStyleChange()} moreColors={this.moreColors}></app-color-code>
+      );
     } else if (this.applyToTargetElement === TargetElement.SIDES) {
       return (
         <app-color-sides
diff --git a/studio/src/components.d.ts b/studio/src/components.d.ts
index cdfd3e787..a011ad309 100644
--- a/studio/src/components.d.ts
+++ b/studio/src/components.d.ts
@@ -198,6 +198,7 @@ export namespace Components {
   }
   interface AppEmbed {}
   interface AppExpansionPanel {
+    'expanded': 'open' | 'close';
     'expander': boolean;
   }
   interface AppFaq {}
@@ -1171,7 +1172,7 @@ declare namespace LocalJSX {
   }
   interface AppColorCode {
     'moreColors'?: boolean;
-    'onColorChange'?: (event: CustomEvent<void>) => void;
+    'onCodeDidChange'?: (event: CustomEvent<void>) => void;
     'selectedElement'?: HTMLElement;
   }
   interface AppColorQrcode {
@@ -1267,6 +1268,7 @@ declare namespace LocalJSX {
   }
   interface AppEmbed {}
   interface AppExpansionPanel {
+    'expanded'?: 'open' | 'close';
     'expander'?: boolean;
   }
   interface AppFaq {}

From e7013b087396a58bc20dd70b34aa627581882db0 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Thu, 28 May 2020 17:19:43 +0200
Subject: [PATCH 4/7] feat: code font size is style

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 .../element/app-color-code/app-color-code.tsx |   6 +-
 .../element/app-font-code/app-font-code.tsx   | 109 ++++++++++++++++++
 .../app/popovers/editor/app-code/app-code.tsx |  89 --------------
 .../app-element-style/app-element-style.tsx   |  11 +-
 studio/src/components.d.ts                    |  16 +++
 5 files changed, 137 insertions(+), 94 deletions(-)
 create mode 100644 studio/src/app/components/editor/styles/element/app-font-code/app-font-code.tsx

diff --git a/studio/src/app/components/editor/styles/element/app-color-code/app-color-code.tsx b/studio/src/app/components/editor/styles/element/app-color-code/app-color-code.tsx
index 305fea9f6..6ada81355 100644
--- a/studio/src/app/components/editor/styles/element/app-color-code/app-color-code.tsx
+++ b/studio/src/app/components/editor/styles/element/app-color-code/app-color-code.tsx
@@ -1,4 +1,4 @@
-import {Component, Element, Event, EventEmitter, h, Prop, State} from '@stencil/core';
+import {Component, Event, EventEmitter, h, Prop, State} from '@stencil/core';
 
 import {alertController, RangeChangeEventDetail} from '@ionic/core';
 
@@ -23,8 +23,6 @@ enum CodeColorType {
   styleUrl: 'app-color-code.scss',
 })
 export class AppColorCode {
-  @Element() el: HTMLElement;
-
   @Prop()
   selectedElement: HTMLElement;
 
@@ -353,7 +351,7 @@ export class AppColorCode {
   private renderCategoryColor() {
     return (
       <app-expansion-panel expanded={'close'}>
-        <ion-label slot="title">Colors</ion-label>
+        <ion-label slot="title">More colors</ion-label>
         <ion-list>
           <ion-item class="select">
             <ion-label>Apply a color to</ion-label>
diff --git a/studio/src/app/components/editor/styles/element/app-font-code/app-font-code.tsx b/studio/src/app/components/editor/styles/element/app-font-code/app-font-code.tsx
new file mode 100644
index 000000000..95f04907a
--- /dev/null
+++ b/studio/src/app/components/editor/styles/element/app-font-code/app-font-code.tsx
@@ -0,0 +1,109 @@
+import {Component, Event, EventEmitter, h, Prop, State} from '@stencil/core';
+
+enum CodeFontSize {
+  VERY_SMALL,
+  SMALL,
+  NORMAL,
+  BIG,
+  VERY_BIG,
+}
+
+@Component({
+  tag: 'app-font-code',
+})
+export class AppColorCode {
+  @Prop()
+  selectedElement: HTMLElement;
+
+  @State()
+  private currentFontSize: CodeFontSize = undefined;
+
+  @Event() codeDidChange: EventEmitter<void>;
+
+  async componentWillLoad() {
+    this.currentFontSize = await this.initFontSize();
+  }
+
+  private initFontSize(): Promise<CodeFontSize> {
+    return new Promise<CodeFontSize>((resolve) => {
+      if (!this.selectedElement || !this.selectedElement.style) {
+        resolve(null);
+        return;
+      }
+
+      const property: string = this.selectedElement.style.getPropertyValue('--deckgo-highlight-code-font-size');
+
+      if (property === '50%') {
+        resolve(CodeFontSize.VERY_SMALL);
+      } else if (property === '75%') {
+        resolve(CodeFontSize.SMALL);
+      } else if (property === '150%') {
+        resolve(CodeFontSize.BIG);
+      } else if (property === '200%') {
+        resolve(CodeFontSize.VERY_BIG);
+      } else {
+        resolve(CodeFontSize.NORMAL);
+      }
+    });
+  }
+
+  private toggleFontSize($event: CustomEvent): Promise<void> {
+    return new Promise<void>(async (resolve) => {
+      if (!$event || !$event.detail) {
+        resolve();
+        return;
+      }
+
+      this.currentFontSize = $event.detail.value;
+
+      if (!this.selectedElement) {
+        resolve();
+        return;
+      }
+
+      this.selectedElement.style.removeProperty('--deckgo-highlight-code-font-size');
+
+      if (this.currentFontSize === CodeFontSize.VERY_SMALL) {
+        this.selectedElement.style.setProperty('--deckgo-highlight-code-font-size', '50%');
+      } else if (this.currentFontSize === CodeFontSize.SMALL) {
+        this.selectedElement.style.setProperty('--deckgo-highlight-code-font-size', '75%');
+      } else if (this.currentFontSize === CodeFontSize.BIG) {
+        this.selectedElement.style.setProperty('--deckgo-highlight-code-font-size', '150%');
+      } else if (this.currentFontSize === CodeFontSize.VERY_BIG) {
+        this.selectedElement.style.setProperty('--deckgo-highlight-code-font-size', '200%');
+      }
+
+      this.codeDidChange.emit();
+
+      resolve();
+    });
+  }
+
+  render() {
+    return (
+      <app-expansion-panel>
+        <ion-label slot="title">Size</ion-label>
+
+        <ion-list>
+          <ion-item class="select">
+            <ion-label>Size</ion-label>
+
+            <ion-select
+              value={this.currentFontSize}
+              placeholder="Select a font size"
+              onIonChange={($event: CustomEvent) => this.toggleFontSize($event)}
+              interface="popover"
+              mode="md"
+              class="ion-padding-start ion-padding-end">
+              <ion-select-option value={CodeFontSize.VERY_SMALL}>Very small</ion-select-option>
+              <ion-select-option value={CodeFontSize.SMALL}>Small</ion-select-option>
+              <ion-select-option value={CodeFontSize.NORMAL}>Normal</ion-select-option>
+              <ion-select-option value={CodeFontSize.BIG}>Big</ion-select-option>
+              <ion-select-option value={CodeFontSize.VERY_BIG}>Very big</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-list>
+      </app-expansion-panel>
+    );
+  }
+}
diff --git a/studio/src/app/popovers/editor/app-code/app-code.tsx b/studio/src/app/popovers/editor/app-code/app-code.tsx
index bd26d0c5b..8dc23bfa3 100644
--- a/studio/src/app/popovers/editor/app-code/app-code.tsx
+++ b/studio/src/app/popovers/editor/app-code/app-code.tsx
@@ -4,14 +4,6 @@ import {modalController, OverlayEventDetail} from '@ionic/core';
 
 import {PrismLanguage, PrismService} from '../../../services/editor/prism/prism.service';
 
-enum CodeFontSize {
-  VERY_SMALL,
-  SMALL,
-  NORMAL,
-  BIG,
-  VERY_BIG,
-}
-
 @Component({
   tag: 'app-code',
   styleUrl: 'app-code.scss',
@@ -28,9 +20,6 @@ export class AppCode {
   @State()
   private currentLanguage: PrismLanguage | undefined;
 
-  @State()
-  private currentFontSize: CodeFontSize = undefined;
-
   @State()
   private lineNumbers: boolean = false;
 
@@ -52,7 +41,6 @@ export class AppCode {
     return new Promise<void>(async (resolve) => {
       await this.initCurrentLanguage();
 
-      this.currentFontSize = await this.initFontSize();
       this.lineNumbers = this.selectedElement && this.selectedElement.hasAttribute('line-numbers');
 
       resolve();
@@ -69,61 +57,6 @@ export class AppCode {
     this.codeDidChange.emit(this.selectedElement);
   }
 
-  private initFontSize(): Promise<CodeFontSize> {
-    return new Promise<CodeFontSize>((resolve) => {
-      if (!this.selectedElement || !this.selectedElement.style) {
-        resolve(null);
-        return;
-      }
-
-      const property: string = this.selectedElement.style.getPropertyValue('--deckgo-highlight-code-font-size');
-
-      if (property === '50%') {
-        resolve(CodeFontSize.VERY_SMALL);
-      } else if (property === '75%') {
-        resolve(CodeFontSize.SMALL);
-      } else if (property === '150%') {
-        resolve(CodeFontSize.BIG);
-      } else if (property === '200%') {
-        resolve(CodeFontSize.VERY_BIG);
-      } else {
-        resolve(CodeFontSize.NORMAL);
-      }
-    });
-  }
-
-  private toggleFontSize($event: CustomEvent): Promise<void> {
-    return new Promise<void>(async (resolve) => {
-      if (!$event || !$event.detail) {
-        resolve();
-        return;
-      }
-
-      this.currentFontSize = $event.detail.value;
-
-      if (!this.selectedElement) {
-        resolve();
-        return;
-      }
-
-      this.selectedElement.style.removeProperty('--deckgo-highlight-code-font-size');
-
-      if (this.currentFontSize === CodeFontSize.VERY_SMALL) {
-        this.selectedElement.style.setProperty('--deckgo-highlight-code-font-size', '50%');
-      } else if (this.currentFontSize === CodeFontSize.SMALL) {
-        this.selectedElement.style.setProperty('--deckgo-highlight-code-font-size', '75%');
-      } else if (this.currentFontSize === CodeFontSize.BIG) {
-        this.selectedElement.style.setProperty('--deckgo-highlight-code-font-size', '150%');
-      } else if (this.currentFontSize === CodeFontSize.VERY_BIG) {
-        this.selectedElement.style.setProperty('--deckgo-highlight-code-font-size', '200%');
-      }
-
-      this.emitCodeDidChange();
-
-      resolve();
-    });
-  }
-
   private toggleLineNumbers($event: CustomEvent): Promise<void> {
     return new Promise<void>(async (resolve) => {
       if (!this.selectedElement) {
@@ -186,28 +119,6 @@ export class AppCode {
           </div>
         </ion-item>
 
-        <ion-item-divider class="ion-padding-top">
-          <ion-label>Font size</ion-label>
-        </ion-item-divider>
-
-        <ion-item class="select">
-          <ion-label>Size</ion-label>
-
-          <ion-select
-            value={this.currentFontSize}
-            placeholder="Select a font size"
-            onIonChange={($event: CustomEvent) => this.toggleFontSize($event)}
-            interface="popover"
-            mode="md"
-            class="ion-padding-start ion-padding-end">
-            <ion-select-option value={CodeFontSize.VERY_SMALL}>Very small</ion-select-option>
-            <ion-select-option value={CodeFontSize.SMALL}>Small</ion-select-option>
-            <ion-select-option value={CodeFontSize.NORMAL}>Normal</ion-select-option>
-            <ion-select-option value={CodeFontSize.BIG}>Big</ion-select-option>
-            <ion-select-option value={CodeFontSize.VERY_BIG}>Very big</ion-select-option>
-          </ion-select>
-        </ion-item>
-
         <ion-item>
           <ion-label>Display line numbers</ion-label>
           <ion-checkbox slot="end" checked={this.lineNumbers} onIonChange={($event: CustomEvent) => this.toggleLineNumbers($event)}></ion-checkbox>
diff --git a/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx b/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx
index b95398547..506be4977 100644
--- a/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx
+++ b/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx
@@ -223,8 +223,9 @@ export class AppElementStyle {
       );
     } else {
       return [
+        this.renderFontCode(),
         <app-color-text-background
-          expander={!this.slide && !this.code}
+          expander={!this.slide}
           selectedElement={this.selectedElement}
           moreColors={this.moreColors}
           slide={this.slide}
@@ -253,4 +254,12 @@ export class AppElementStyle {
 
     return <app-list selectedElement={this.selectedElement} onToggleList={() => this.closePopover()}></app-list>;
   }
+
+  private renderFontCode() {
+    if (!this.code) {
+      return undefined;
+    }
+
+    return <app-font-code selectedElement={this.selectedElement} onCodeDidChange={() => this.emitStyleChange()}></app-font-code>;
+  }
 }
diff --git a/studio/src/components.d.ts b/studio/src/components.d.ts
index a011ad309..7951e916e 100644
--- a/studio/src/components.d.ts
+++ b/studio/src/components.d.ts
@@ -212,6 +212,9 @@ export namespace Components {
     'editable': boolean;
     'tags': string[];
   }
+  interface AppFontCode {
+    'selectedElement': HTMLElement;
+  }
   interface AppFooter {
     'display': 'menu' | 'landing';
   }
@@ -620,6 +623,12 @@ declare global {
     new (): HTMLAppFeedCardTagsElement;
   };
 
+  interface HTMLAppFontCodeElement extends Components.AppFontCode, HTMLStencilElement {}
+  var HTMLAppFontCodeElement: {
+    prototype: HTMLAppFontCodeElement;
+    new (): HTMLAppFontCodeElement;
+  };
+
   interface HTMLAppFooterElement extends Components.AppFooter, HTMLStencilElement {}
   var HTMLAppFooterElement: {
     prototype: HTMLAppFooterElement;
@@ -1023,6 +1032,7 @@ declare global {
     'app-feed': HTMLAppFeedElement;
     'app-feed-card': HTMLAppFeedCardElement;
     'app-feed-card-tags': HTMLAppFeedCardTagsElement;
+    'app-font-code': HTMLAppFontCodeElement;
     'app-footer': HTMLAppFooterElement;
     'app-fullscreen-info': HTMLAppFullscreenInfoElement;
     'app-get-help': HTMLAppGetHelpElement;
@@ -1283,6 +1293,10 @@ declare namespace LocalJSX {
     'onRemoveTag'?: (event: CustomEvent<string>) => void;
     'tags'?: string[];
   }
+  interface AppFontCode {
+    'onCodeDidChange'?: (event: CustomEvent<void>) => void;
+    'selectedElement'?: HTMLElement;
+  }
   interface AppFooter {
     'display'?: 'menu' | 'landing';
   }
@@ -1493,6 +1507,7 @@ declare namespace LocalJSX {
     'app-feed': AppFeed;
     'app-feed-card': AppFeedCard;
     'app-feed-card-tags': AppFeedCardTags;
+    'app-font-code': AppFontCode;
     'app-footer': AppFooter;
     'app-fullscreen-info': AppFullscreenInfo;
     'app-get-help': AppGetHelp;
@@ -1605,6 +1620,7 @@ declare module "@stencil/core" {
       'app-feed': LocalJSX.AppFeed & JSXBase.HTMLAttributes<HTMLAppFeedElement>;
       'app-feed-card': LocalJSX.AppFeedCard & JSXBase.HTMLAttributes<HTMLAppFeedCardElement>;
       'app-feed-card-tags': LocalJSX.AppFeedCardTags & JSXBase.HTMLAttributes<HTMLAppFeedCardTagsElement>;
+      'app-font-code': LocalJSX.AppFontCode & JSXBase.HTMLAttributes<HTMLAppFontCodeElement>;
       'app-footer': LocalJSX.AppFooter & JSXBase.HTMLAttributes<HTMLAppFooterElement>;
       'app-fullscreen-info': LocalJSX.AppFullscreenInfo & JSXBase.HTMLAttributes<HTMLAppFullscreenInfoElement>;
       'app-get-help': LocalJSX.AppGetHelp & JSXBase.HTMLAttributes<HTMLAppGetHelpElement>;

From d291ebcfb4039c7e9dc015e1b1fb52dfcbb53f89 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Thu, 28 May 2020 17:30:09 +0200
Subject: [PATCH 5/7] feat: math font style is size

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 .../app-font-size.tsx}                        | 43 ++++-----
 .../app/popovers/editor/app-math/app-math.tsx | 89 -------------------
 .../app-element-style/app-element-style.tsx   | 17 ++--
 studio/src/components.d.ts                    | 20 +++--
 4 files changed, 45 insertions(+), 124 deletions(-)
 rename studio/src/app/components/editor/styles/element/{app-font-code/app-font-code.tsx => app-font-size/app-font-size.tsx} (66%)

diff --git a/studio/src/app/components/editor/styles/element/app-font-code/app-font-code.tsx b/studio/src/app/components/editor/styles/element/app-font-size/app-font-size.tsx
similarity index 66%
rename from studio/src/app/components/editor/styles/element/app-font-code/app-font-code.tsx
rename to studio/src/app/components/editor/styles/element/app-font-size/app-font-size.tsx
index 95f04907a..f4791790a 100644
--- a/studio/src/app/components/editor/styles/element/app-font-code/app-font-code.tsx
+++ b/studio/src/app/components/editor/styles/element/app-font-size/app-font-size.tsx
@@ -1,6 +1,6 @@
 import {Component, Event, EventEmitter, h, Prop, State} from '@stencil/core';
 
-enum CodeFontSize {
+enum FontSize {
   VERY_SMALL,
   SMALL,
   NORMAL,
@@ -9,14 +9,17 @@ enum CodeFontSize {
 }
 
 @Component({
-  tag: 'app-font-code',
+  tag: 'app-font-size',
 })
-export class AppColorCode {
+export class AppFontSize {
   @Prop()
   selectedElement: HTMLElement;
 
+  @Prop()
+  selector: '--deckgo-highlight-code-font-size' | '--deckgo-math-font-size' = '--deckgo-highlight-code-font-size';
+
   @State()
-  private currentFontSize: CodeFontSize = undefined;
+  private currentFontSize: FontSize = undefined;
 
   @Event() codeDidChange: EventEmitter<void>;
 
@@ -24,8 +27,8 @@ export class AppColorCode {
     this.currentFontSize = await this.initFontSize();
   }
 
-  private initFontSize(): Promise<CodeFontSize> {
-    return new Promise<CodeFontSize>((resolve) => {
+  private initFontSize(): Promise<FontSize> {
+    return new Promise<FontSize>((resolve) => {
       if (!this.selectedElement || !this.selectedElement.style) {
         resolve(null);
         return;
@@ -34,15 +37,15 @@ export class AppColorCode {
       const property: string = this.selectedElement.style.getPropertyValue('--deckgo-highlight-code-font-size');
 
       if (property === '50%') {
-        resolve(CodeFontSize.VERY_SMALL);
+        resolve(FontSize.VERY_SMALL);
       } else if (property === '75%') {
-        resolve(CodeFontSize.SMALL);
+        resolve(FontSize.SMALL);
       } else if (property === '150%') {
-        resolve(CodeFontSize.BIG);
+        resolve(FontSize.BIG);
       } else if (property === '200%') {
-        resolve(CodeFontSize.VERY_BIG);
+        resolve(FontSize.VERY_BIG);
       } else {
-        resolve(CodeFontSize.NORMAL);
+        resolve(FontSize.NORMAL);
       }
     });
   }
@@ -63,13 +66,13 @@ export class AppColorCode {
 
       this.selectedElement.style.removeProperty('--deckgo-highlight-code-font-size');
 
-      if (this.currentFontSize === CodeFontSize.VERY_SMALL) {
+      if (this.currentFontSize === FontSize.VERY_SMALL) {
         this.selectedElement.style.setProperty('--deckgo-highlight-code-font-size', '50%');
-      } else if (this.currentFontSize === CodeFontSize.SMALL) {
+      } else if (this.currentFontSize === FontSize.SMALL) {
         this.selectedElement.style.setProperty('--deckgo-highlight-code-font-size', '75%');
-      } else if (this.currentFontSize === CodeFontSize.BIG) {
+      } else if (this.currentFontSize === FontSize.BIG) {
         this.selectedElement.style.setProperty('--deckgo-highlight-code-font-size', '150%');
-      } else if (this.currentFontSize === CodeFontSize.VERY_BIG) {
+      } else if (this.currentFontSize === FontSize.VERY_BIG) {
         this.selectedElement.style.setProperty('--deckgo-highlight-code-font-size', '200%');
       }
 
@@ -95,11 +98,11 @@ export class AppColorCode {
               interface="popover"
               mode="md"
               class="ion-padding-start ion-padding-end">
-              <ion-select-option value={CodeFontSize.VERY_SMALL}>Very small</ion-select-option>
-              <ion-select-option value={CodeFontSize.SMALL}>Small</ion-select-option>
-              <ion-select-option value={CodeFontSize.NORMAL}>Normal</ion-select-option>
-              <ion-select-option value={CodeFontSize.BIG}>Big</ion-select-option>
-              <ion-select-option value={CodeFontSize.VERY_BIG}>Very big</ion-select-option>
+              <ion-select-option value={FontSize.VERY_SMALL}>Very small</ion-select-option>
+              <ion-select-option value={FontSize.SMALL}>Small</ion-select-option>
+              <ion-select-option value={FontSize.NORMAL}>Normal</ion-select-option>
+              <ion-select-option value={FontSize.BIG}>Big</ion-select-option>
+              <ion-select-option value={FontSize.VERY_BIG}>Very big</ion-select-option>
             </ion-select>
           </ion-item>
         </ion-list>
diff --git a/studio/src/app/popovers/editor/app-math/app-math.tsx b/studio/src/app/popovers/editor/app-math/app-math.tsx
index d0c8d1ce6..937a1134c 100644
--- a/studio/src/app/popovers/editor/app-math/app-math.tsx
+++ b/studio/src/app/popovers/editor/app-math/app-math.tsx
@@ -1,13 +1,5 @@
 import {Component, Element, EventEmitter, Prop, State, h} from '@stencil/core';
 
-enum MathFontSize {
-  VERY_SMALL,
-  SMALL,
-  NORMAL,
-  BIG,
-  VERY_BIG,
-}
-
 @Component({
   tag: 'app-math',
   styleUrl: 'app-math.scss',
@@ -21,9 +13,6 @@ export class AppMath {
   @Prop()
   mathDidChange: EventEmitter<HTMLElement>;
 
-  @State()
-  private currentFontSize: MathFontSize = undefined;
-
   @State()
   private macros: string | undefined;
 
@@ -38,7 +27,6 @@ export class AppMath {
   }
 
   private async initCurrent(): Promise<void> {
-    this.currentFontSize = await this.initFontSize();
     this.macros = this.selectedElement ? this.selectedElement.getAttribute('macros') : undefined;
   }
 
@@ -46,61 +34,6 @@ export class AppMath {
     this.mathDidChange.emit(this.selectedElement);
   }
 
-  private initFontSize(): Promise<MathFontSize> {
-    return new Promise<MathFontSize>((resolve) => {
-      if (!this.selectedElement || !this.selectedElement.style) {
-        resolve(null);
-        return;
-      }
-
-      const property: string = this.selectedElement.style.getPropertyValue('--deckgo-math-font-size');
-
-      if (property === '50%') {
-        resolve(MathFontSize.VERY_SMALL);
-      } else if (property === '75%') {
-        resolve(MathFontSize.SMALL);
-      } else if (property === '150%') {
-        resolve(MathFontSize.BIG);
-      } else if (property === '200%') {
-        resolve(MathFontSize.VERY_BIG);
-      } else {
-        resolve(MathFontSize.NORMAL);
-      }
-    });
-  }
-
-  private toggleFontSize($event: CustomEvent): Promise<void> {
-    return new Promise<void>(async (resolve) => {
-      if (!$event || !$event.detail) {
-        resolve();
-        return;
-      }
-
-      this.currentFontSize = $event.detail.value;
-
-      if (!this.selectedElement) {
-        resolve();
-        return;
-      }
-
-      this.selectedElement.style.removeProperty('--deckgo-math-font-size');
-
-      if (this.currentFontSize === MathFontSize.VERY_SMALL) {
-        this.selectedElement.style.setProperty('--deckgo-math-font-size', '50%');
-      } else if (this.currentFontSize === MathFontSize.SMALL) {
-        this.selectedElement.style.setProperty('--deckgo-math-font-size', '75%');
-      } else if (this.currentFontSize === MathFontSize.BIG) {
-        this.selectedElement.style.setProperty('--deckgo-math-font-size', '150%');
-      } else if (this.currentFontSize === MathFontSize.VERY_BIG) {
-        this.selectedElement.style.setProperty('--deckgo-math-font-size', '200%');
-      }
-
-      this.emitMathDidChange();
-
-      resolve();
-    });
-  }
-
   private handleMacrosInput($event: CustomEvent<KeyboardEvent>) {
     this.macros = ($event.target as InputTargetEvent).value;
   }
@@ -128,28 +61,6 @@ export class AppMath {
         </ion-router-link>
       </ion-toolbar>,
       <ion-list>
-        <ion-item-divider class="ion-padding-top">
-          <ion-label>Font size</ion-label>
-        </ion-item-divider>
-
-        <ion-item class="select">
-          <ion-label>Size</ion-label>
-
-          <ion-select
-            value={this.currentFontSize}
-            placeholder="Select a font size"
-            onIonChange={($event: CustomEvent) => this.toggleFontSize($event)}
-            interface="popover"
-            mode="md"
-            class="ion-padding-start ion-padding-end">
-            <ion-select-option value={MathFontSize.VERY_SMALL}>Very small</ion-select-option>
-            <ion-select-option value={MathFontSize.SMALL}>Small</ion-select-option>
-            <ion-select-option value={MathFontSize.NORMAL}>Normal</ion-select-option>
-            <ion-select-option value={MathFontSize.BIG}>Big</ion-select-option>
-            <ion-select-option value={MathFontSize.VERY_BIG}>Very big</ion-select-option>
-          </ion-select>
-        </ion-item>
-
         <ion-item-divider>
           <ion-label>Macros</ion-label>
         </ion-item-divider>
diff --git a/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx b/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx
index 506be4977..6a1cd1860 100644
--- a/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx
+++ b/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx
@@ -223,7 +223,9 @@ export class AppElementStyle {
       );
     } else {
       return [
-        this.renderFontCode(),
+        this.renderFontSize(),
+        <app-align selectedElement={this.selectedElement} onAlignChange={() => this.emitStyleChange()}></app-align>,
+        this.renderList(),
         <app-color-text-background
           expander={!this.slide}
           selectedElement={this.selectedElement}
@@ -231,8 +233,6 @@ export class AppElementStyle {
           slide={this.slide}
           shape={this.shape}
           onColorChange={() => this.emitStyleChange()}></app-color-text-background>,
-        <app-align selectedElement={this.selectedElement} onAlignChange={() => this.emitStyleChange()}></app-align>,
-        this.renderList(),
       ];
     }
   }
@@ -255,11 +255,16 @@ export class AppElementStyle {
     return <app-list selectedElement={this.selectedElement} onToggleList={() => this.closePopover()}></app-list>;
   }
 
-  private renderFontCode() {
-    if (!this.code) {
+  private renderFontSize() {
+    if (!this.code && !this.math) {
       return undefined;
     }
 
-    return <app-font-code selectedElement={this.selectedElement} onCodeDidChange={() => this.emitStyleChange()}></app-font-code>;
+    return (
+      <app-font-size
+        selectedElement={this.selectedElement}
+        selector={this.math ? '--deckgo-math-font-size' : '--deckgo-highlight-code-font-size'}
+        onCodeDidChange={() => this.emitStyleChange()}></app-font-size>
+    );
   }
 }
diff --git a/studio/src/components.d.ts b/studio/src/components.d.ts
index 7951e916e..96501dac1 100644
--- a/studio/src/components.d.ts
+++ b/studio/src/components.d.ts
@@ -212,8 +212,9 @@ export namespace Components {
     'editable': boolean;
     'tags': string[];
   }
-  interface AppFontCode {
+  interface AppFontSize {
     'selectedElement': HTMLElement;
+    'selector': '--deckgo-highlight-code-font-size' | '--deckgo-math-font-size';
   }
   interface AppFooter {
     'display': 'menu' | 'landing';
@@ -623,10 +624,10 @@ declare global {
     new (): HTMLAppFeedCardTagsElement;
   };
 
-  interface HTMLAppFontCodeElement extends Components.AppFontCode, HTMLStencilElement {}
-  var HTMLAppFontCodeElement: {
-    prototype: HTMLAppFontCodeElement;
-    new (): HTMLAppFontCodeElement;
+  interface HTMLAppFontSizeElement extends Components.AppFontSize, HTMLStencilElement {}
+  var HTMLAppFontSizeElement: {
+    prototype: HTMLAppFontSizeElement;
+    new (): HTMLAppFontSizeElement;
   };
 
   interface HTMLAppFooterElement extends Components.AppFooter, HTMLStencilElement {}
@@ -1032,7 +1033,7 @@ declare global {
     'app-feed': HTMLAppFeedElement;
     'app-feed-card': HTMLAppFeedCardElement;
     'app-feed-card-tags': HTMLAppFeedCardTagsElement;
-    'app-font-code': HTMLAppFontCodeElement;
+    'app-font-size': HTMLAppFontSizeElement;
     'app-footer': HTMLAppFooterElement;
     'app-fullscreen-info': HTMLAppFullscreenInfoElement;
     'app-get-help': HTMLAppGetHelpElement;
@@ -1293,9 +1294,10 @@ declare namespace LocalJSX {
     'onRemoveTag'?: (event: CustomEvent<string>) => void;
     'tags'?: string[];
   }
-  interface AppFontCode {
+  interface AppFontSize {
     'onCodeDidChange'?: (event: CustomEvent<void>) => void;
     'selectedElement'?: HTMLElement;
+    'selector'?: '--deckgo-highlight-code-font-size' | '--deckgo-math-font-size';
   }
   interface AppFooter {
     'display'?: 'menu' | 'landing';
@@ -1507,7 +1509,7 @@ declare namespace LocalJSX {
     'app-feed': AppFeed;
     'app-feed-card': AppFeedCard;
     'app-feed-card-tags': AppFeedCardTags;
-    'app-font-code': AppFontCode;
+    'app-font-size': AppFontSize;
     'app-footer': AppFooter;
     'app-fullscreen-info': AppFullscreenInfo;
     'app-get-help': AppGetHelp;
@@ -1620,7 +1622,7 @@ declare module "@stencil/core" {
       'app-feed': LocalJSX.AppFeed & JSXBase.HTMLAttributes<HTMLAppFeedElement>;
       'app-feed-card': LocalJSX.AppFeedCard & JSXBase.HTMLAttributes<HTMLAppFeedCardElement>;
       'app-feed-card-tags': LocalJSX.AppFeedCardTags & JSXBase.HTMLAttributes<HTMLAppFeedCardTagsElement>;
-      'app-font-code': LocalJSX.AppFontCode & JSXBase.HTMLAttributes<HTMLAppFontCodeElement>;
+      'app-font-size': LocalJSX.AppFontSize & JSXBase.HTMLAttributes<HTMLAppFontSizeElement>;
       'app-footer': LocalJSX.AppFooter & JSXBase.HTMLAttributes<HTMLAppFooterElement>;
       'app-fullscreen-info': LocalJSX.AppFullscreenInfo & JSXBase.HTMLAttributes<HTMLAppFullscreenInfoElement>;
       'app-get-help': LocalJSX.AppGetHelp & JSXBase.HTMLAttributes<HTMLAppGetHelpElement>;

From d93bfbeb99d95566f59d7b092635cdb344d7e461 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Thu, 28 May 2020 17:42:58 +0200
Subject: [PATCH 6/7] feat: align and list as list popover

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 .../styles/element/app-align/app-align.scss   | 20 ++---------
 .../styles/element/app-align/app-align.tsx    | 35 ++++++++++---------
 .../element/app-font-size/app-font-size.scss  |  7 ++++
 .../element/app-font-size/app-font-size.tsx   |  1 +
 .../styles/element/app-list/app-list.scss     | 20 ++---------
 .../styles/element/app-list/app-list.tsx      | 34 +++++++++++-------
 studio/src/assets/assets.json                 |  4 ---
 studio/src/assets/icons/align-center.svg      |  1 -
 studio/src/assets/icons/align-left.svg        |  1 -
 studio/src/assets/icons/align-right.svg       |  1 -
 10 files changed, 55 insertions(+), 69 deletions(-)
 create mode 100644 studio/src/app/components/editor/styles/element/app-font-size/app-font-size.scss
 delete mode 100644 studio/src/assets/icons/align-center.svg
 delete mode 100644 studio/src/assets/icons/align-left.svg
 delete mode 100644 studio/src/assets/icons/align-right.svg

diff --git a/studio/src/app/components/editor/styles/element/app-align/app-align.scss b/studio/src/app/components/editor/styles/element/app-align/app-align.scss
index e9b383bc7..ef1e8400c 100644
--- a/studio/src/app/components/editor/styles/element/app-align/app-align.scss
+++ b/studio/src/app/components/editor/styles/element/app-align/app-align.scss
@@ -1,21 +1,7 @@
 app-align {
-  ion-item.align {
-    --background-activated: transparent;
-    --background-focused: transparent;
-    --background-hover: transparent;
-
-    --color: rgba(0, 0, 0, 0.6);
-    font-size: var(--font-size-normal);
-
-    cursor: pointer;
-
-    &:hover,
-    &.active {
-      --color: black;
-
-      ion-icon {
-        color: black;
-      }
+  ion-list {
+    ion-item {
+      margin-bottom: 4px;
     }
   }
 }
diff --git a/studio/src/app/components/editor/styles/element/app-align/app-align.tsx b/studio/src/app/components/editor/styles/element/app-align/app-align.tsx
index 641b9c823..bd47b00cd 100644
--- a/studio/src/app/components/editor/styles/element/app-align/app-align.tsx
+++ b/studio/src/app/components/editor/styles/element/app-align/app-align.tsx
@@ -19,13 +19,13 @@ export class AppAlign {
     this.align = await AlignUtils.getAlignment(this.selectedElement);
   }
 
-  private async updateAlign(align: TextAlign): Promise<void> {
-    if (!this.selectedElement) {
+  private async updateAlign($event: CustomEvent): Promise<void> {
+    if (!this.selectedElement || !$event || !$event.detail) {
       return;
     }
 
-    this.selectedElement.style.textAlign = align;
-    this.align = align;
+    this.selectedElement.style.textAlign = $event.detail.value;
+    this.align = $event.detail.value;
 
     this.alignChange.emit();
   }
@@ -39,20 +39,23 @@ export class AppAlign {
       <app-expansion-panel>
         <ion-label slot="title">Alignment</ion-label>
         <ion-list>
-          {this.renderAlign(TextAlign.LEFT, 'Align left')}
-          {this.renderAlign(TextAlign.CENTER, 'Align center')}
-          {this.renderAlign(TextAlign.RIGHT, 'Align right')}
+          <ion-item class="select">
+            <ion-label>Alignment</ion-label>
+
+            <ion-select
+              value={this.align}
+              placeholder="Select an alignment"
+              onIonChange={($event: CustomEvent) => this.updateAlign($event)}
+              interface="popover"
+              mode="md"
+              class="ion-padding-start ion-padding-end">
+              <ion-select-option value={TextAlign.LEFT}>Left</ion-select-option>
+              <ion-select-option value={TextAlign.CENTER}>Center</ion-select-option>
+              <ion-select-option value={TextAlign.RIGHT}>Right</ion-select-option>
+            </ion-select>
+          </ion-item>
         </ion-list>
       </app-expansion-panel>
     );
   }
-
-  private renderAlign(align: TextAlign, text: string) {
-    return (
-      <ion-item onClick={() => this.updateAlign(align)} class={`align ${this.align == align ? 'active' : undefined}`}>
-        <ion-icon slot="start" src={`/assets/icons/align-${align}.svg`} role="presentation"></ion-icon>
-        <ion-label>{text}</ion-label>
-      </ion-item>
-    );
-  }
 }
diff --git a/studio/src/app/components/editor/styles/element/app-font-size/app-font-size.scss b/studio/src/app/components/editor/styles/element/app-font-size/app-font-size.scss
new file mode 100644
index 000000000..bf216f8bb
--- /dev/null
+++ b/studio/src/app/components/editor/styles/element/app-font-size/app-font-size.scss
@@ -0,0 +1,7 @@
+app-font-size {
+  ion-list {
+    ion-item {
+      margin-bottom: 4px;
+    }
+  }
+}
diff --git a/studio/src/app/components/editor/styles/element/app-font-size/app-font-size.tsx b/studio/src/app/components/editor/styles/element/app-font-size/app-font-size.tsx
index f4791790a..8369e0625 100644
--- a/studio/src/app/components/editor/styles/element/app-font-size/app-font-size.tsx
+++ b/studio/src/app/components/editor/styles/element/app-font-size/app-font-size.tsx
@@ -10,6 +10,7 @@ enum FontSize {
 
 @Component({
   tag: 'app-font-size',
+  styleUrl: 'app-font-size.scss',
 })
 export class AppFontSize {
   @Prop()
diff --git a/studio/src/app/components/editor/styles/element/app-list/app-list.scss b/studio/src/app/components/editor/styles/element/app-list/app-list.scss
index 7f88a6053..c4b1fa499 100644
--- a/studio/src/app/components/editor/styles/element/app-list/app-list.scss
+++ b/studio/src/app/components/editor/styles/element/app-list/app-list.scss
@@ -1,21 +1,7 @@
 app-list {
-  ion-item.list {
-    --background-activated: transparent;
-    --background-focused: transparent;
-    --background-hover: transparent;
-
-    --color: rgba(0, 0, 0, 0.6);
-    font-size: var(--font-size-normal);
-
-    cursor: pointer;
-
-    &:hover,
-    &.active {
-      --color: black;
-
-      ion-icon {
-        color: black;
-      }
+  ion-list {
+    ion-item {
+      margin-bottom: 4px;
     }
   }
 }
diff --git a/studio/src/app/components/editor/styles/element/app-list/app-list.tsx b/studio/src/app/components/editor/styles/element/app-list/app-list.tsx
index 15adc5940..0f38ae509 100644
--- a/studio/src/app/components/editor/styles/element/app-list/app-list.tsx
+++ b/studio/src/app/components/editor/styles/element/app-list/app-list.tsx
@@ -20,24 +20,34 @@ export class AppList {
     this.list = await ListUtils.isElementList(this.selectedElement);
   }
 
-  private async selectList(list: SlotType.OL | SlotType.UL) {
-    this.list = list;
-    this.toggleList.emit(list);
+  private async selectList($event: CustomEvent) {
+    if (!$event || !$event.detail) {
+      return;
+    }
+
+    this.list = $event.detail.value;
+    this.toggleList.emit($event.detail.value);
   }
 
   render() {
     return (
-      <app-expansion-panel class="ion-margin-top">
+      <app-expansion-panel>
         <ion-label slot="title">List</ion-label>
-        <ion-list>
-          <ion-item onClick={() => this.selectList(SlotType.UL)} class={`list ${this.list == SlotType.UL ? 'active' : undefined}`}>
-            <ion-icon slot="start" src="/assets/icons/ionicons/list.svg"></ion-icon>
-            <ion-label>Unordered list</ion-label>
-          </ion-item>
 
-          <ion-item onClick={() => this.selectList(SlotType.OL)} class={`list ${this.list == SlotType.OL ? 'active' : undefined}`}>
-            <ion-icon slot="start" src="/assets/icons/list-ol.svg"></ion-icon>
-            <ion-label>Ordered list</ion-label>
+        <ion-list>
+          <ion-item class="select">
+            <ion-label>List</ion-label>
+
+            <ion-select
+              value={this.list}
+              placeholder="Select a type of list"
+              onIonChange={($event: CustomEvent) => this.selectList($event)}
+              interface="popover"
+              mode="md"
+              class="ion-padding-start ion-padding-end">
+              <ion-select-option value={SlotType.UL}>Unordered</ion-select-option>
+              <ion-select-option value={SlotType.OL}>Ordered</ion-select-option>
+            </ion-select>
           </ion-item>
         </ion-list>
       </app-expansion-panel>
diff --git a/studio/src/assets/assets.json b/studio/src/assets/assets.json
index 3deb9ee5d..c4e3ff935 100644
--- a/studio/src/assets/assets.json
+++ b/studio/src/assets/assets.json
@@ -215,7 +215,6 @@
     {"src": "/icons/ionicons/arrow-back.svg", "ariaLabel": "Back"},
     {"src": "/icons/ionicons/md-list.svg", "ariaLabel": "List"},
     {"src": "/icons/ionicons/list.svg", "ariaLabel": "List"},
-    {"src": "/icons/list-ol.svg", "ariaLabel": "List"},
     {"src": "/icons/ionicons/brush.svg", "ariaLabel": "Brush"},
     {"src": "/icons/ionicons/phone-portrait.svg", "ariaLabel": "Phone"},
     {"src": "/icons/ionicons/share.svg", "ariaLabel": "Share"},
@@ -234,9 +233,6 @@
     {"src": "/icons/ionicons/code.svg", "ariaLabel": "Code"},
     {"src": "/icons/ionicons/images.svg", "ariaLabel": "Images"},
     {"src": "/icons/ionicons/checkmark.svg", "ariaLabel": "Check"},
-    {"src": "/icons/align-center.svg", "ariaLabel": "Align center"},
-    {"src": "/icons/align-left.svg", "ariaLabel": "Align left"},
-    {"src": "/icons/align-right.svg", "ariaLabel": "Align right"},
     {"src": "/icons/math.svg", "ariaLabel": "Math"},
     {"src": "/icons/ionicons/color-wand.svg", "ariaLabel": "Transform element"},
     {"src": "/icons/ionicons/chevron-down.svg", "ariaLabel": "Chevron down"},
diff --git a/studio/src/assets/icons/align-center.svg b/studio/src/assets/icons/align-center.svg
deleted file mode 100644
index 7227625f7..000000000
--- a/studio/src/assets/icons/align-center.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;"><path d="M176,331l160,0" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:25.3px;"/><path d="M176,185l160,0" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:25.3px;"/><path d="M96,258l320,0" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:32px;"/><path d="M96,112l320,0" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:32px;"/><path d="M96,400l320,0" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:32px;"/></svg>
diff --git a/studio/src/assets/icons/align-left.svg b/studio/src/assets/icons/align-left.svg
deleted file mode 100644
index 7095ef373..000000000
--- a/studio/src/assets/icons/align-left.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;"><path d="M96,331l160,0" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:25.3px;"/><path d="M96,185l160,0" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:25.3px;"/><path d="M96,258l320,0" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:32px;"/><path d="M96,112l320,0" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:32px;"/><path d="M96,400l320,0" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:32px;"/></svg>
diff --git a/studio/src/assets/icons/align-right.svg b/studio/src/assets/icons/align-right.svg
deleted file mode 100644
index d409e956b..000000000
--- a/studio/src/assets/icons/align-right.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;"><path d="M256,331l160,0" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:25.3px;"/><path d="M256,185l160,0" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:25.3px;"/><path d="M96,258l320,0" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:32px;"/><path d="M96,112l320,0" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:32px;"/><path d="M96,400l320,0" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:32px;"/></svg>

From e8d3564e9514d2a155f19fc24d44b8eb16464758 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Thu, 28 May 2020 17:43:41 +0200
Subject: [PATCH 7/7] fix: use selector instead of constant

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 .../styles/element/app-font-size/app-font-size.tsx   | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/studio/src/app/components/editor/styles/element/app-font-size/app-font-size.tsx b/studio/src/app/components/editor/styles/element/app-font-size/app-font-size.tsx
index 8369e0625..7f8b84052 100644
--- a/studio/src/app/components/editor/styles/element/app-font-size/app-font-size.tsx
+++ b/studio/src/app/components/editor/styles/element/app-font-size/app-font-size.tsx
@@ -35,7 +35,7 @@ export class AppFontSize {
         return;
       }
 
-      const property: string = this.selectedElement.style.getPropertyValue('--deckgo-highlight-code-font-size');
+      const property: string = this.selectedElement.style.getPropertyValue(this.selector);
 
       if (property === '50%') {
         resolve(FontSize.VERY_SMALL);
@@ -65,16 +65,16 @@ export class AppFontSize {
         return;
       }
 
-      this.selectedElement.style.removeProperty('--deckgo-highlight-code-font-size');
+      this.selectedElement.style.removeProperty(this.selector);
 
       if (this.currentFontSize === FontSize.VERY_SMALL) {
-        this.selectedElement.style.setProperty('--deckgo-highlight-code-font-size', '50%');
+        this.selectedElement.style.setProperty(this.selector, '50%');
       } else if (this.currentFontSize === FontSize.SMALL) {
-        this.selectedElement.style.setProperty('--deckgo-highlight-code-font-size', '75%');
+        this.selectedElement.style.setProperty(this.selector, '75%');
       } else if (this.currentFontSize === FontSize.BIG) {
-        this.selectedElement.style.setProperty('--deckgo-highlight-code-font-size', '150%');
+        this.selectedElement.style.setProperty(this.selector, '150%');
       } else if (this.currentFontSize === FontSize.VERY_BIG) {
-        this.selectedElement.style.setProperty('--deckgo-highlight-code-font-size', '200%');
+        this.selectedElement.style.setProperty(this.selector, '200%');
       }
 
       this.codeDidChange.emit();