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

@@ -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>

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
 };

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;