From 91d30aad79e0d9b3f517585684ac34240a0820f9 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Fri, 26 Jun 2020 13:13:14 +0200
Subject: [PATCH] studio: use Google Font "Open Sans" for the editor

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 .../app/components/core/app-footer/app-footer.scss |  2 +-
 .../core/app-user-info/app-user-info.scss          |  2 +-
 .../editor/app-slot-type/app-slot-type.scss        |  2 +-
 .../styles/deck/app-deck-fonts/app-deck-fonts.scss |  4 ++++
 .../styles/deck/app-deck-fonts/app-deck-fonts.tsx  |  4 +++-
 .../landing/app-landing-deck/app-landing-deck.scss |  4 ++--
 .../editor/app-create-slide/app-create-slide.scss  |  2 +-
 studio/src/global/theme/editor/editor-deck.scss    |  2 ++
 studio/src/global/theme/fonts.scss                 | 14 +++++++++-----
 studio/src/global/theme/menu.scss                  |  2 +-
 studio/src/index.html                              |  4 ++++
 11 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/studio/src/app/components/core/app-footer/app-footer.scss b/studio/src/app/components/core/app-footer/app-footer.scss
index fda901588..5dbb77a6d 100644
--- a/studio/src/app/components/core/app-footer/app-footer.scss
+++ b/studio/src/app/components/core/app-footer/app-footer.scss
@@ -32,7 +32,7 @@ app-footer {
       padding-bottom: 6px;
 
       color: black;
-      font-weight: bold;
+      font-weight: 700;
     }
 
     ion-router-link {
diff --git a/studio/src/app/components/core/app-user-info/app-user-info.scss b/studio/src/app/components/core/app-user-info/app-user-info.scss
index 8cb78c44b..89e0a6eff 100644
--- a/studio/src/app/components/core/app-user-info/app-user-info.scss
+++ b/studio/src/app/components/core/app-user-info/app-user-info.scss
@@ -27,7 +27,7 @@ app-user-info {
 
       ion-label:first-of-type {
         padding-bottom: 4px;
-        font-weight: 500;
+        font-weight: 400;
         font-size: var(--font-size-normal);
 
         width: 100%;
diff --git a/studio/src/app/components/editor/app-slot-type/app-slot-type.scss b/studio/src/app/components/editor/app-slot-type/app-slot-type.scss
index 48801efbc..d36c72195 100644
--- a/studio/src/app/components/editor/app-slot-type/app-slot-type.scss
+++ b/studio/src/app/components/editor/app-slot-type/app-slot-type.scss
@@ -15,7 +15,7 @@ app-slot-type {
     ion-item {
       h1,
       h2 {
-        font-weight: 500;
+        font-weight: 400;
       }
 
       h3 {
diff --git a/studio/src/app/components/editor/styles/deck/app-deck-fonts/app-deck-fonts.scss b/studio/src/app/components/editor/styles/deck/app-deck-fonts/app-deck-fonts.scss
index 751c6dd80..9e1591159 100644
--- a/studio/src/app/components/editor/styles/deck/app-deck-fonts/app-deck-fonts.scss
+++ b/studio/src/app/components/editor/styles/deck/app-deck-fonts/app-deck-fonts.scss
@@ -36,6 +36,10 @@ app-deck-fonts {
         p[slot="title"] {
           margin: 0;
           font-weight: normal;
+
+          &.default {
+            font-family: var(--font-family-default);
+          }
         }
       }
     }
diff --git a/studio/src/app/components/editor/styles/deck/app-deck-fonts/app-deck-fonts.tsx b/studio/src/app/components/editor/styles/deck/app-deck-fonts/app-deck-fonts.tsx
index 924b449de..45f27c7df 100644
--- a/studio/src/app/components/editor/styles/deck/app-deck-fonts/app-deck-fonts.tsx
+++ b/studio/src/app/components/editor/styles/deck/app-deck-fonts/app-deck-fonts.tsx
@@ -100,7 +100,9 @@ export class AppDeckFonts {
     return (
       <div class={`item ${selected ? 'selected' : ''}`} custom-tappable onClick={() => this.selectFont(null)}>
         <deckgo-slide-title class="showcase">
-          <p slot="title">Default</p>
+          <p slot="title" class="default">
+            Default
+          </p>
         </deckgo-slide-title>
       </div>
     );
diff --git a/studio/src/app/components/landing/app-landing-deck/app-landing-deck.scss b/studio/src/app/components/landing/app-landing-deck/app-landing-deck.scss
index 73097a046..54ab337ce 100644
--- a/studio/src/app/components/landing/app-landing-deck/app-landing-deck.scss
+++ b/studio/src/app/components/landing/app-landing-deck/app-landing-deck.scss
@@ -3,13 +3,13 @@ app-landing-deck {
     --deckgo-highlight-code-font-size: 125%;
 
     h1 {
-      font-weight: 600;
+      font-weight: 700;
       margin-bottom: 0;
     }
 
     h2,
     h3 {
-      font-weight: 500;
+      font-weight: 400;
     }
 
     h1,
diff --git a/studio/src/app/popovers/editor/app-create-slide/app-create-slide.scss b/studio/src/app/popovers/editor/app-create-slide/app-create-slide.scss
index b980fb287..15ad9e432 100644
--- a/studio/src/app/popovers/editor/app-create-slide/app-create-slide.scss
+++ b/studio/src/app/popovers/editor/app-create-slide/app-create-slide.scss
@@ -272,7 +272,7 @@ app-create-slide {
 
           width: 86%;
 
-          font-weight: 500;
+          font-weight: 400;
         }
       }
 
diff --git a/studio/src/global/theme/editor/editor-deck.scss b/studio/src/global/theme/editor/editor-deck.scss
index 11e5a02ef..c5f535b7f 100644
--- a/studio/src/global/theme/editor/editor-deck.scss
+++ b/studio/src/global/theme/editor/editor-deck.scss
@@ -6,6 +6,8 @@ deckgo-deck {
   --pager-text-slides-display: block;
   --pager-text-color: black;
 
+  font-family: var(--font-family-default);
+
   h1,
   h2,
   h3,
diff --git a/studio/src/global/theme/fonts.scss b/studio/src/global/theme/fonts.scss
index 9918f0e12..da3d8c97b 100644
--- a/studio/src/global/theme/fonts.scss
+++ b/studio/src/global/theme/fonts.scss
@@ -1,5 +1,9 @@
 :root {
-  --ion-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "Open Sans", sans-serif;
+  --ion-font-family: "Open Sans", sans-serif;
+
+  --font-family-default: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
 
@@ -15,19 +19,19 @@
 h1,
 h1 a {
   font-size: var(--font-size-h1);
-  font-weight: bold;
+  font-weight: 700;
 }
 
 h2,
 h2 a {
   font-size: var(--font-size-h2);
-  font-weight: bold;
+  font-weight: 700;
 }
 
 h3,
 h3 a {
   font-size: var(--font-size-h3);
-  font-weight: bold;
+  font-weight: 700;
 }
 
 h4,
@@ -52,7 +56,7 @@ ion-router-link,
   text-decoration: none;
   transition: border 0.3s;
   border-bottom: 1px solid transparent;
-  font-weight: 500;
+  font-weight: 400;
 }
 
 p a:hover,
diff --git a/studio/src/global/theme/menu.scss b/studio/src/global/theme/menu.scss
index 31b514fd0..2e7666c30 100644
--- a/studio/src/global/theme/menu.scss
+++ b/studio/src/global/theme/menu.scss
@@ -28,7 +28,7 @@ ion-menu {
         --background: transparent;
 
         --color: var(--ion-color-medium);
-        font-weight: bold;
+        font-weight: 700;
 
         &:not(:first-of-type) {
           margin-top: 8px;
diff --git a/studio/src/index.html b/studio/src/index.html
index 1948f611a..1af8732e8 100644
--- a/studio/src/index.html
+++ b/studio/src/index.html
@@ -110,6 +110,10 @@
 
     <link rel="manifest" href="/manifest.json" />
 
+    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
+
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;1,300&display=swap" rel="stylesheet" />
+
     <style>
       :root {
         background: #f4f5f8;