From cedc6b28c1ad3e8f702c4d875f0281e37e7446ed Mon Sep 17 00:00:00 2001
From: MiZiet <55240109+MiZiet@users.noreply.github.com>
Date: Wed, 25 Nov 2020 21:24:01 +0100
Subject: [PATCH] Align account name with nunito sans (#4038)

* Fix font alignment

* Plug in Nunito Sans

* Remove line-height

* Align AccountName

* Update packages/react-components/src/AccountName.tsx

Co-authored-by: Ewa Kowalska <ewcia.kowalska@gmail.com>
Co-authored-by: Jaco Greeff <jacogr@gmail.com>
---
 packages/apps/public/index.html               | 2 +-
 packages/apps/src/themes.ts                   | 2 +-
 packages/react-components/src/AccountName.tsx | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/apps/public/index.html b/packages/apps/public/index.html
index 6019e5d2ff..9d745d46c8 100644
--- a/packages/apps/public/index.html
+++ b/packages/apps/public/index.html
@@ -7,7 +7,7 @@
     <link rel="shortcut icon" href="favicon.ico">
     <title><%= htmlWebpackPlugin.options.PAGE_TITLE %></title>
     <script type="text/javascript" src="/env-config.js"></script>
-    <!-- link href="fonts/fonts.css" rel="stylesheet" -->
+    <link href="fonts/fonts.css" rel="stylesheet" >
   </head>
   <body>
     <noscript>
diff --git a/packages/apps/src/themes.ts b/packages/apps/src/themes.ts
index 318e2c0f01..70b62a33d0 100644
--- a/packages/apps/src/themes.ts
+++ b/packages/apps/src/themes.ts
@@ -8,7 +8,7 @@ import type { ThemeDef } from '@polkadot/react-components/types';
 //   - additional download size
 const FONT = {
   fontMono: 'monospace',
-  fontSans: '"Helvetica Neue", Helvetica, Arial, sans-serif',
+  fontSans: '"Nunito Sans", sans-serif',
   fontWeightLight: 300,
   fontWeightNormal: 400
 };
diff --git a/packages/react-components/src/AccountName.tsx b/packages/react-components/src/AccountName.tsx
index 483a674644..94e37a9449 100644
--- a/packages/react-components/src/AccountName.tsx
+++ b/packages/react-components/src/AccountName.tsx
@@ -193,17 +193,17 @@ export default React.memo(styled(AccountName)`
   }
 
   .via-identity {
-    align-items: end;
+    align-items: center;
     display: inline-flex;
     width: 100%;
 
     .name {
       font-weight: 400 !important;
       filter: grayscale(100%);
-      line-height: 1;
       opacity: 0.6;
       overflow: hidden;
       text-overflow: ellipsis;
+      line-height: 22px;
 
       &:not(.isAddress) {
         text-transform: uppercase;