From cb7de8a3114c60c06b8b906da2e2c26eab25eaea Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Tue, 24 Aug 2021 11:21:19 +0700
Subject: [PATCH] styles: font common

---
 src/components/common/Header/Header.module.scss | 10 +++++-----
 src/components/common/Header/Header.tsx         |  2 ++
 src/styles/_base.scss                           | 11 ++++++++---
 src/styles/_utilities.scss                      |  8 ++++++++
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/components/common/Header/Header.module.scss b/src/components/common/Header/Header.module.scss
index b983b04f2..0207f107f 100644
--- a/src/components/common/Header/Header.module.scss
+++ b/src/components/common/Header/Header.module.scss
@@ -1,22 +1,22 @@
-@import '../../../styles/utilities';
+@import "../../../styles/utilities";
 
 .header {
   .btn {
     // @apply font-bold py-2 px-4 rounded;
-
   }
   .btnBlue {
     @apply bg-primary hover:bg-warning text-label font-bold py-2 px-4 custom-border-radius;
-    
   }
   .link {
     color: theme("colors.warning");
   }
   .heading {
-    @apply text-base;
+    @apply text-base font-heading;
   }
-
   .paragraph {
     @apply topline;
   }
+  .logo {
+    @apply font-logo;
+  }
 }
diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx
index 5a1bf21ce..0c4bfa92e 100644
--- a/src/components/common/Header/Header.tsx
+++ b/src/components/common/Header/Header.tsx
@@ -10,6 +10,8 @@ const Header: FC<Props> = ({ }: Props) => {
     return (
         <div className={s.header}>
             This is Header
+            <h1 className={s.heading}>This is heading</h1>
+            <div className={s.logo}>This is logo text</div>
         </div>
     )
 }
diff --git a/src/styles/_base.scss b/src/styles/_base.scss
index ab1224507..affd4207b 100644
--- a/src/styles/_base.scss
+++ b/src/styles/_base.scss
@@ -1,5 +1,7 @@
+@import url("https://fonts.googleapis.com/css2?family=Nunito&family=Poppins:wght@500&family=Righteous&display=swap");
+
 :root {
-  --primary: #5B9A74;
+  --primary: #5b9a74;
   --primary-light: #e0f6e8;
   --primary-lightest: #effaf4;
 
@@ -27,7 +29,7 @@
   --text-base: #3d3d3d;
   --text-label: #8f8f8f;
   --text-placeholder: #cccccc;
-  
+
   --disabled: #cccccc;
   --border-line: #ebebeb;
   --background: #f8f8f8;
@@ -36,7 +38,10 @@
   --font-size: 16px;
   --line-height: 24px;
 
-  --font-sans: -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
+  --font-sans: "Nunito", cursive, -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica",
+    sans-serif;
+  --font-heading: "Righteous", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
+  --font-logo: "Poppins", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
 }
 
 *,
diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss
index ccbac413e..53a0d952b 100644
--- a/src/styles/_utilities.scss
+++ b/src/styles/_utilities.scss
@@ -91,4 +91,12 @@
     .custom-border-radius {
         border-radius: 60% 10% 60% 2%/ 10% 40% 10% 50%;
     }
+
+    .font-heading {
+        font-family: var(--font-heading);
+    }
+
+    .font-logo {
+        font-family: var(--font-logo);
+    }
 }