Update theme (#116)

* Remove styled-components * Update theme * Allow scripts

Update theme (#116)
* Remove styled-components * Update theme * Allow scripts
c58e10a5 · Andrei Eres · GitHub · 99487887 · c58e10a5 · c58e10a5
Unverified Commit c58e10a5 authored Apr 22, 2022 by Andrei Eres Committed by GitHub Apr 22, 2022
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
 module.exports = {
  extends: ['stylelint-config-recommended', 'stylelint-config-prettier'],
-  customSyntax: '@stylelint/postcss-css-in-js',
 }
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
    "build:zip": "web-ext build --source-dir ./build --artifacts-dir ./ --overwrite-dest",
    "lint:typing": "tsc --noEmit",
    "lint:ts": "eslint ./src",
-    "lint:css": "stylelint ./src",
+    "lint:css": "stylelint ./src/**/*.css",
    "lint": "yarn lint:typing && yarn lint:ts && yarn lint:css",
    "fix": "prettier ./src -w"
  },
@@ -28,8 +28,7 @@
    "nanostores": "^0.5.12",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
-    "react-error-boundary": "^3.1.4",
-    "styled-components": "^5.3.5"
+    "react-error-boundary": "^3.1.4"
  },
  "devDependencies": {
    "@babel/plugin-transform-runtime": "^7.17.0",
@@ -38,16 +37,13 @@
    "@babel/preset-typescript": "^7.16.7",
    "@lavamoat/allow-scripts": "^2.0.2",
    "@lavamoat/preinstall-always-fail": "^1.0.0",
-    "@stylelint/postcss-css-in-js": "^0.37.2",
    "@types/chrome": "^0.0.181",
    "@types/firefox-webext-browser": "^94.0.1",
    "@types/react": "^18.0.5",
    "@types/react-dom": "^18.0.1",
-    "@types/styled-components": "^5.1.25",
    "@typescript-eslint/eslint-plugin": "^5.20.0",
    "@typescript-eslint/parser": "^5.20.0",
    "babel-loader": "^8.2.5",
-    "babel-plugin-styled-components": "^2.0.7",
    "buffer": "^6.0.3",
    "copy-webpack-plugin": "^10.2.4",
    "crypto-browserify": "^3.12.0",
@@ -59,7 +55,6 @@
    "path-browserify": "^1.0.1",
    "postcss": "^8.4.12",
    "postcss-loader": "^6.2.1",
-    "postcss-syntax": "^0.36.2",
    "prettier": "^2.6.2",
    "process": "^0.11.10",
    "stream-browserify": "^3.0.0",
@@ -106,7 +101,7 @@
      "web-ext>ws>bufferutil": false,
      "web-ext>ws>utf-8-validate": false,
      "webpack-extension-manifest-plugin>core-js": false,
-      "styled-components": false
+      "@polkadot/react-qr>styled-components": false
    }
  }
 }
--- a/public/index.html
+++ b/public/index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
    <title>Parity Signer Companion</title>
    <style type="text/css">
      body {
@@ -10,8 +10,8 @@
      }
    </style>
  </head>
-  <body>
-    <div id="root"></div>
-    <script src='./extension.js'></script>
+  <body class="bg-_bg-100">
+    <div id="root" class="my-0 mx-auto w-_max h-_max"></div>
+    <script src="./extension.js"></script>
  </body>
 </html>
--- a/public/notification.html
+++ b/public/notification.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
    <title>Parity Signer Companion</title>
    <style type="text/css">
      body {
@@ -10,8 +10,8 @@
      }
    </style>
  </head>
-  <body>
-    <div id="root"></div>
-    <script src='./extension.js'></script>
+  <body class="bg-_bg-100">
+    <div id="root" class="my-0 mx-auto w-_max h-_max"></div>
+    <script src="./extension.js"></script>
  </body>
 </html>
--- a/src/hooks/useMetadata.ts
+++ b/src/hooks/useMetadata.ts
@@ -2,7 +2,7 @@ import { Chain } from '@polkadot/extension-chains/types'
 import { getMetadata } from '../utils/getMetadata'
 import { useEffect, useState } from 'react'

-export default function useMetadata(
+export function useMetadata(
  genesisHash?: string | null,
  isPartial?: boolean
 ): Chain | null {

--- a/src/ui/App.tsx
+++ b/src/ui/App.tsx
 import React from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
 import { goHome } from '../utils/routing'
-import ErrorFallback from './components/ErrorFallback'
-import Main from './global/Main'
-import Router from './global/Router'
+import { ErrorFallback } from './components/ErrorFallback'
+import { Main } from './global/Main'
+import { Router } from './global/Router'
 import './index.css'

-export const App: React.FC = () => (
+export const App = () => (
  <Main>
    <ErrorBoundary FallbackComponent={ErrorFallback} onReset={goHome}>
      <Router />

--- a/src/ui/accounts/Accounts.tsx
+++ b/src/ui/accounts/Accounts.tsx
 import { useStore } from '@nanostores/react'
 import React, { useEffect } from 'react'
-import styled from 'styled-components'
 import { orderedAccountsStore } from '../../stores/accounts'
 import {
  addHeaderAction,
  importHeaderAction,
  resetHeaderActions,
 } from '../../stores/headerActions'
-import Key from '../components/Key'
-import { BaseProps } from '../types'
-import NoAccounts from './NoAccounts'
+import { Key } from '../components/Key'
+import { NoAccounts } from './NoAccounts'

-const Accounts: React.FC<BaseProps> = ({ className }) => {
+export const Accounts = () => {
  const accounts = useStore(orderedAccountsStore)

  useEffect(() => {
@@ -22,8 +20,7 @@ const Accounts: React.FC<BaseProps> = ({ className }) => {
  if (accounts.length === 0) return <NoAccounts />

  return (
-    <div className={className}>
-      <h1>All keys</h1>
+    <div className='h-full space-y-2'>
      {accounts.map((account) => (
        <Key
          address={account.address}
@@ -35,7 +32,3 @@ const Accounts: React.FC<BaseProps> = ({ className }) => {
    </div>
  )
 }
-
-export default styled(Accounts)`
-  height: 100%;
-`
--- a/src/ui/accounts/ImportQr.tsx
+++ b/src/ui/accounts/ImportQr.tsx
 import { QrScanAddress } from '@polkadot/react-qr'
-import React, { useState, useEffect } from 'react'
-import styled from 'styled-components'
-import Address from '../components/Address'
+import React, { useEffect, useState } from 'react'
+import { createAccountExternal } from '../../messaging/uiActions'
 import {
  addHeaderAction,
  cancelAndGoHomeHeaderAction,
  doneAndGoHomeHeaderAction,
  resetHeaderActions,
 } from '../../stores/headerActions'
-import { BaseProps } from '../types'
-import { createAccountExternal } from '../../messaging/uiActions'
+import { Address } from '../components/Address'
+import { H1 } from '../components/H1'

 interface QrAccount {
  isAddress: boolean
@@ -18,7 +17,7 @@ interface QrAccount {
  name?: string
 }

-const ImportQr: React.FC<BaseProps> = ({ className }) => {
+export const ImportQr = () => {
  const [scanned, setScanned] = useState<QrAccount[]>([])

  const onCreate = (account: QrAccount) => {
@@ -45,26 +44,28 @@ const ImportQr: React.FC<BaseProps> = ({ className }) => {
  }, [scanned.length])

  return (
-    <div className={className}>
-      <div className='row'>
-        <div className='counter'>
-          <h1>
+    <div className='flex flex-col'>
+      <div className='flex w-full mb-4'>
+        <div className='flex flex-col basis-1/2 justify-between'>
+          <H1>
            Import
            <br />
            Signer
            <br />
            keys
-          </h1>
+          </H1>
          <div>
-            <span className='num'>{scanned.length}</span>
+            <span className='block text-6xl leading-none'>
+              {scanned.length}
+            </span>
            imported
          </div>
        </div>
-        <div className='scanner'>
+        <div className='flex flex-col basis-1/2 border-8 rounded'>
          <QrScanAddress onScan={onCreate} />
        </div>
      </div>
-      <div>
+      <div className='space-y-2'>
        {scanned.reverse().map((account) => (
          <Address
            {...account}
@@ -77,36 +78,3 @@ const ImportQr: React.FC<BaseProps> = ({ className }) => {
    </div>
  )
 }
-
-export default styled(ImportQr)`
-  display: flex;
-  flex-direction: column;
-
-  .row {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    margin-bottom: 1rem;
-  }
-
-  .row > div {
-    display: flex;
-    flex-direction: column;
-    flex-basis: 50%;
-  }
-
-  .row .counter {
-    justify-content: space-between;
-  }
-
-  .counter .num {
-    display: block;
-    font-size: 4rem;
-    line-height: 1;
-  }
-
-  .scanner {
-    border: 0.2rem solid var(--color-white);
-    border-radius: 0.2rem;
-  }
-`
--- a/src/ui/accounts/NoAccounts.tsx
+++ b/src/ui/accounts/NoAccounts.tsx
 import React from 'react'
-import styled from 'styled-components'
-import { Button } from '../components/Button'
-import { BaseProps } from '../types'
 import { goToImport } from '../../utils/routing'
+import { Button } from '../components/Button'

-const NoAccounts: React.FC<BaseProps> = ({ className }) => (
-  <div className={className}>
-    <div className='container'>
+export const NoAccounts = () => (
+  <div className='flex flex-col h-full text-center items-center justify-center'>
+    <div className='p-8'>
      The extension helps you to sign transactions with keys you store in your
      Parity Signer. To start using, go to the Signer and import a first key.
    </div>
    <Button onClick={goToImport}>Import a key</Button>
  </div>
 )
-
-export default styled(NoAccounts)`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  text-align: center;
-  align-items: center;
-  justify-content: center;
-
-  .container {
-    padding: 2rem;
-    color: var(--color-main-text);
-  }
-`
--- a/src/ui/assets/cancel.svg
+++ b/src/ui/assets/cancel.svg
-<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m15.833 5.342-1.175-1.175L10 8.825 5.34 4.167 4.167 5.342 8.825 10l-4.658 4.658 1.175 1.175L10 11.175l4.658 4.658 1.175-1.175L11.175 10l4.658-4.658Z" fill="#9A9A9A"/></svg>
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m15.833 5.342-1.175-1.175L10 8.825 5.34 4.167 4.167 5.342 8.825 10l-4.658 4.658 1.175 1.175L10 11.175l4.658 4.658 1.175-1.175L11.175 10l4.658-4.658Z" fill="#aeaeae"/></svg>
--- a/src/ui/assets/copy.svg
+++ b/src/ui/assets/copy.svg
-<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.333.833h-10c-.916 0-1.666.75-1.666 1.667v11.667h1.666V2.5h10V.833Zm2.5 3.334H6.667C5.75 4.167 5 4.917 5 5.833V17.5c0 .917.75 1.667 1.667 1.667h9.166c.917 0 1.667-.75 1.667-1.667V5.833c0-.916-.75-1.666-1.667-1.666Zm0 13.333H6.667V5.833h9.166V17.5Z" fill="#9A9A9A"/></svg>
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.333.833h-10c-.916 0-1.666.75-1.666 1.667v11.667h1.666V2.5h10V.833Zm2.5 3.334H6.667C5.75 4.167 5 4.917 5 5.833V17.5c0 .917.75 1.667 1.667 1.667h9.166c.917 0 1.667-.75 1.667-1.667V5.833c0-.916-.75-1.666-1.667-1.666Zm0 13.333H6.667V5.833h9.166V17.5Z" fill="#aeaeae"/></svg>
--- a/src/ui/assets/full-logo.svg
+++ b/src/ui/assets/full-logo.svg
-<svg width="129" height="34" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M56.84 18.052a1.049 1.049 0 0 0 1.64-.871 1.053 1.053 0 0 0-1.253-1.033 1.05 1.05 0 0 0-.771 1.43c.078.192.212.357.383.474Zm5.761 12.09c-.447 0-1.29-.232-1.29-1.114v-7.237h-1.125c-.23 0-.353-.26-.353-.446v-.724c0-.192.117-.297.353-.297h1.126v-2.745h.183c.447 0 1.292.167 1.292 1.094v1.648h2.196c.322 0 .389.153.389.297v.733a.456.456 0 0 1-.39.445h-2.195v8.351l-.186-.006Zm-28.417-8.54c-.315-.001-.63.021-.942.066a1.727 1.727 0 0 0-1.529 1.737v3.708c0 .91.745 1.628 1.773 1.706.234.017.473.028.7.028.211.005.422-.004.632-.025 1.064-.084 1.717-.67 1.834-1.67.119-1.297.119-2.601 0-3.897a1.75 1.75 0 0 0-1.49-1.59 7.692 7.692 0 0 0-.978-.064Zm-2.712 11.757c-.473 0-1.37-.259-1.37-1.236v-9.247c0-.933.7-1.742 1.17-2.054a4.838 4.838 0 0 1 1.822-.599c.406-.047.813-.073 1.22-.078.468-.003.934.047 1.39.148 1.354.312 2.173 1.194 2.443 2.594.064.358.097.722.097 1.086v.35c0 .263.003.527.006.794.005.537.011 1.08-.006 1.617-.025.5-.125.992-.297 1.462-.406 1.096-1.24 1.773-2.48 1.998a5.927 5.927 0 0 1-1.063.095c-.312-.001-.623-.021-.932-.061a2.499 2.499 0 0 1-1.806-1.033v4.159l-.195.005Zm36.943-.039a1.13 1.13 0 0 1-.194 0l-.234-.036 1.37-3.307c.14-.255.187-.55.136-.835-.683-1.676-1.33-3.302-1.982-4.941l-.43-1.08-.78-1.948c-.142-.348-.223-.596-.104-.766.12-.17.381-.178.737-.178a.75.75 0 0 1 .8.596c.076.187.458 1.15.916 2.306l.002.005.002.006.002.004.007.018c.691 1.742 1.549 3.903 1.787 4.494l2.72-6.775a.986.986 0 0 1 .895-.713c.145.003.289.034.423.09a.398.398 0 0 1 .278.481v.042L70.19 32.118a1.878 1.878 0 0 1-1.787 1.194l.011.008Zm-26.052-7.657c.39-.037.928-.053 1.523-.053.62 0 1.276.016 1.773.041.078.003.155.012.23.025.006.07.006.142 0 .212v.278c.023.532.023 1.036-.277 1.492a2.459 2.459 0 0 1-1.996 1.158c-.205.02-.444.02-.661.02-.102 0-.207-.004-.319-.008-.127-.004-.262-.009-.41-.009a1.188 1.188 0 0 1-1.253-1.23v-.557c.02-.91.4-1.28 1.39-1.37Zm3.532 3.382c0 .982.867 1.241 1.326 1.241l.197-.003v-.18l.002-.083c.009-.637.07-4.773-.002-6.431a6.51 6.51 0 0 0-.194-1.367 2.481 2.481 0 0 0-1.998-1.899 6.848 6.848 0 0 0-1.49-.153 6.104 6.104 0 0 0-1.887.279 4.252 4.252 0 0 0-1.97 1.392c-.215.284-.165.498-.064.598.18.176.38.331.594.465.067.04.142.06.22.061a.783.783 0 0 0 .536-.337 3.335 3.335 0 0 1 2.549-1.044 5.08 5.08 0 0 1 1.084.126c.539.12.844.395.936.835.089.493.142.991.158 1.492.013.092.013.186 0 .278a.351.351 0 0 1-.108 0h-.117a22.845 22.845 0 0 0-4.043.064 2.298 2.298 0 0 0-2.06 1.76 3.837 3.837 0 0 0 0 2.196 2.481 2.481 0 0 0 2.107 1.848c.43.067.865.098 1.3.095h.426a3.206 3.206 0 0 0 2.476-1.272l.022-.025v.064Zm4.88 1.238c-.466 0-1.344-.253-1.344-1.216v-8.88h.183c.473 0 1.367.242 1.367 1.16v.017h.017a4.61 4.61 0 0 1 .873-.704 3.18 3.18 0 0 1 1.706-.448c.205 0 .409.014.612.042.318.028.632.095.933.2a.442.442 0 0 1 .298.596 1.92 1.92 0 0 1-.2.418v.022a.437.437 0 0 1-.39.256 1.536 1.536 0 0 1-.3-.045 4.44 4.44 0 0 0-.975-.117 2.937 2.937 0 0 0-1.112.2 5.095 5.095 0 0 0-.867.485 1.32 1.32 0 0 0-.595 1.233v6.81l-.205-.029Zm5.884-1.255c0 .882.881 1.113 1.345 1.113l.184.006v-8.652a1.31 1.31 0 0 0-1.34-1.336h-.189v8.869ZM91.807 20.298h-.372a.256.256 0 0 0-.061.006.258.258 0 0 0-.217.295v9.186a.255.255 0 0 0 .163.28.256.256 0 0 0 .115.015h.372a.255.255 0 0 0 .298-.298v-9.186a.26.26 0 0 0-.297-.298Zm-.036-3.91h-.292a.256.256 0 0 0-.303.298v.43a.26.26 0 0 0 .297.298h.376a.277.277 0 0 0 .222-.297v-.432a.416.416 0 0 0 0-.083.278.278 0 0 0-.3-.215ZM85.688 30.18c1.773 0 3.315-.782 3.315-2.817 0-2.193-1.656-2.424-3.668-2.7-1.543-.175-2.56-.409-2.56-1.82 0-1.33.861-1.737 2.268-1.737h.48c1.349 0 2.068.545 2.168 1.72v.025a.298.298 0 0 0 .298.298h.417c.222 0 .277-.12.277-.315-.066-1.781-1.309-2.6-3.123-2.6h-.556c-1.932 0-3.185.74-3.185 2.6 0 2.122 1.406 2.486 3.516 2.717 1.448.164 2.715.32 2.715 1.79s-1.037 1.879-2.36 1.879h-.783c-1.287 0-1.97-.434-2.224-1.492v-.017a.279.279 0 0 0-.278-.256h-.489c-.197 0-.294.123-.255.298.294 1.545 1.456 2.427 3.243 2.427h.784Zm16.444-9.581v10.057c0 2.25-1.39 3.34-4.044 3.34a6.661 6.661 0 0 1-1.74-.175c-.113-.016-.175-.078-.175-.175v-.596c0-.117.062-.178.175-.156.57.134 1.155.193 1.74.176 1.896 0 3.088-.412 3.088-2.386v-2.09c-.411.98-1.215 1.586-2.657 1.586h-.692c-2.032 0-3.46-1.31-3.46-3.602v-2.783c0-2.33 1.428-3.563 3.46-3.563h.703c1.442 0 2.246.509 2.657 1.467v-1.1a.264.264 0 0 1 .002-.101.26.26 0 0 1 .295-.197h.373a.256.256 0 0 1 .278.228.404.404 0 0 1-.003.07Zm-.956 6.06v-2.82c0-1.82-.895-2.683-2.52-2.683h-.835c-1.623 0-2.52.88-2.52 2.683v2.82c0 1.67.895 2.58 2.52 2.58h.834c1.62-.01 2.521-.899 2.521-2.58Zm10.547 3.126v-6.102c0-2.288-.781-3.463-3.082-3.457h-.159a3.57 3.57 0 0 0-3.057 1.606V20.6a.255.255 0 0 0-.103-.25.258.258 0 0 0-.194-.048h-.447a.259.259 0 0 0-.215.196.25.25 0 0 0-.005.102v9.186a.21.21 0 0 0 0 .086.249.249 0 0 0 .104.169.258.258 0 0 0 .193.043h.37a.257.257 0 0 0 .297-.298v-7.101a3.361 3.361 0 0 1 2.871-1.545h.331c1.74 0 2.129.902 2.129 2.605v6.041a.253.253 0 0 0 .175.29c.04.013.081.015.122.008h.373a.256.256 0 0 0 .297-.298Zm9.61-6.024v1.233a.58.58 0 0 1-.173.423.593.593 0 0 1-.421.176h-5.959v1.152c0 1.587.892 2.486 2.521 2.486h.642c1.288 0 1.693-.494 2.242-1.163l.103-.126c.137-.158.214-.197.409-.06l.256.177c.194.137.175.253.058.41-.703.86-1.409 1.7-3.057 1.7h-.673c-2.053 0-3.518-1.291-3.518-3.48v-2.917c0-2.33 1.465-3.563 3.518-3.563h.642c1.693.012 3.41 1.264 3.41 3.552Zm-.995.078c0-1.82-1.036-2.683-2.404-2.683h-.653c-1.625 0-2.52.88-2.52 2.683v.896h5.558l.019-.896Zm7.109-2.7a2.871 2.871 0 0 1 1.045.175.259.259 0 0 0 .328-.158l.159-.401a.283.283 0 0 0-.016-.243.278.278 0 0 0-.159-.127 5.44 5.44 0 0 0-1.27-.159 3.643 3.643 0 0 0-3.191 1.606V20.6a.196.196 0 0 0 0-.084.25.25 0 0 0-.104-.169.261.261 0 0 0-.193-.045h-.373a.257.257 0 0 0-.297.298v9.186a.257.257 0 0 0 .297.298h.37a.253.253 0 0 0 .227-.07.255.255 0 0 0 .07-.228v-7.101a3.361 3.361 0 0 1 2.871-1.545h.236Z" fill="#9A9A9A"/><path d="M18.463 0 0 11.54l2.426 3.878 5.118-3.166V9.76h4.007l9.382-5.817L18.463 0Zm3.115 4.986-7.71 4.787h8.635l1.485-.909-2.41-3.878Zm3.069 4.895-1.966 1.2v2.24h-3.614l-5.015 3.12h8.18l4.686-2.906-2.271-3.654ZM8.12 13.332l-5.046 3.136 2.41 3.859 2.079-1.288V16.44h4.176l5.015-3.108H8.12Zm19.443 1.236-4.855 3.02v2.415h-3.91l-9.737 6.036L11.537 30 30 18.46l-2.437-3.892ZM8.308 20.003l-2.174 1.349 2.287 3.656 8.062-5.005H8.308Z" fill="#9A9A9A"/></svg>
+<svg width="129" height="34" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M56.84 18.052a1.049 1.049 0 0 0 1.64-.871 1.053 1.053 0 0 0-1.253-1.033 1.05 1.05 0 0 0-.771 1.43c.078.192.212.357.383.474Zm5.761 12.09c-.447 0-1.29-.232-1.29-1.114v-7.237h-1.125c-.23 0-.353-.26-.353-.446v-.724c0-.192.117-.297.353-.297h1.126v-2.745h.183c.447 0 1.292.167 1.292 1.094v1.648h2.196c.322 0 .389.153.389.297v.733a.456.456 0 0 1-.39.445h-2.195v8.351l-.186-.006Zm-28.417-8.54c-.315-.001-.63.021-.942.066a1.727 1.727 0 0 0-1.529 1.737v3.708c0 .91.745 1.628 1.773 1.706.234.017.473.028.7.028.211.005.422-.004.632-.025 1.064-.084 1.717-.67 1.834-1.67.119-1.297.119-2.601 0-3.897a1.75 1.75 0 0 0-1.49-1.59 7.692 7.692 0 0 0-.978-.064Zm-2.712 11.757c-.473 0-1.37-.259-1.37-1.236v-9.247c0-.933.7-1.742 1.17-2.054a4.838 4.838 0 0 1 1.822-.599c.406-.047.813-.073 1.22-.078.468-.003.934.047 1.39.148 1.354.312 2.173 1.194 2.443 2.594.064.358.097.722.097 1.086v.35c0 .263.003.527.006.794.005.537.011 1.08-.006 1.617-.025.5-.125.992-.297 1.462-.406 1.096-1.24 1.773-2.48 1.998a5.927 5.927 0 0 1-1.063.095c-.312-.001-.623-.021-.932-.061a2.499 2.499 0 0 1-1.806-1.033v4.159l-.195.005Zm36.943-.039a1.13 1.13 0 0 1-.194 0l-.234-.036 1.37-3.307c.14-.255.187-.55.136-.835-.683-1.676-1.33-3.302-1.982-4.941l-.43-1.08-.78-1.948c-.142-.348-.223-.596-.104-.766.12-.17.381-.178.737-.178a.75.75 0 0 1 .8.596c.076.187.458 1.15.916 2.306l.002.005.002.006.002.004.007.018c.691 1.742 1.549 3.903 1.787 4.494l2.72-6.775a.986.986 0 0 1 .895-.713c.145.003.289.034.423.09a.398.398 0 0 1 .278.481v.042L70.19 32.118a1.878 1.878 0 0 1-1.787 1.194l.011.008Zm-26.052-7.657c.39-.037.928-.053 1.523-.053.62 0 1.276.016 1.773.041.078.003.155.012.23.025.006.07.006.142 0 .212v.278c.023.532.023 1.036-.277 1.492a2.459 2.459 0 0 1-1.996 1.158c-.205.02-.444.02-.661.02-.102 0-.207-.004-.319-.008-.127-.004-.262-.009-.41-.009a1.188 1.188 0 0 1-1.253-1.23v-.557c.02-.91.4-1.28 1.39-1.37Zm3.532 3.382c0 .982.867 1.241 1.326 1.241l.197-.003v-.18l.002-.083c.009-.637.07-4.773-.002-6.431a6.51 6.51 0 0 0-.194-1.367 2.481 2.481 0 0 0-1.998-1.899 6.848 6.848 0 0 0-1.49-.153 6.104 6.104 0 0 0-1.887.279 4.252 4.252 0 0 0-1.97 1.392c-.215.284-.165.498-.064.598.18.176.38.331.594.465.067.04.142.06.22.061a.783.783 0 0 0 .536-.337 3.335 3.335 0 0 1 2.549-1.044 5.08 5.08 0 0 1 1.084.126c.539.12.844.395.936.835.089.493.142.991.158 1.492.013.092.013.186 0 .278a.351.351 0 0 1-.108 0h-.117a22.845 22.845 0 0 0-4.043.064 2.298 2.298 0 0 0-2.06 1.76 3.837 3.837 0 0 0 0 2.196 2.481 2.481 0 0 0 2.107 1.848c.43.067.865.098 1.3.095h.426a3.206 3.206 0 0 0 2.476-1.272l.022-.025v.064Zm4.88 1.238c-.466 0-1.344-.253-1.344-1.216v-8.88h.183c.473 0 1.367.242 1.367 1.16v.017h.017a4.61 4.61 0 0 1 .873-.704 3.18 3.18 0 0 1 1.706-.448c.205 0 .409.014.612.042.318.028.632.095.933.2a.442.442 0 0 1 .298.596 1.92 1.92 0 0 1-.2.418v.022a.437.437 0 0 1-.39.256 1.536 1.536 0 0 1-.3-.045 4.44 4.44 0 0 0-.975-.117 2.937 2.937 0 0 0-1.112.2 5.095 5.095 0 0 0-.867.485 1.32 1.32 0 0 0-.595 1.233v6.81l-.205-.029Zm5.884-1.255c0 .882.881 1.113 1.345 1.113l.184.006v-8.652a1.31 1.31 0 0 0-1.34-1.336h-.189v8.869ZM91.807 20.298h-.372a.256.256 0 0 0-.061.006.258.258 0 0 0-.217.295v9.186a.255.255 0 0 0 .163.28.256.256 0 0 0 .115.015h.372a.255.255 0 0 0 .298-.298v-9.186a.26.26 0 0 0-.297-.298Zm-.036-3.91h-.292a.256.256 0 0 0-.303.298v.43a.26.26 0 0 0 .297.298h.376a.277.277 0 0 0 .222-.297v-.432a.416.416 0 0 0 0-.083.278.278 0 0 0-.3-.215ZM85.688 30.18c1.773 0 3.315-.782 3.315-2.817 0-2.193-1.656-2.424-3.668-2.7-1.543-.175-2.56-.409-2.56-1.82 0-1.33.861-1.737 2.268-1.737h.48c1.349 0 2.068.545 2.168 1.72v.025a.298.298 0 0 0 .298.298h.417c.222 0 .277-.12.277-.315-.066-1.781-1.309-2.6-3.123-2.6h-.556c-1.932 0-3.185.74-3.185 2.6 0 2.122 1.406 2.486 3.516 2.717 1.448.164 2.715.32 2.715 1.79s-1.037 1.879-2.36 1.879h-.783c-1.287 0-1.97-.434-2.224-1.492v-.017a.279.279 0 0 0-.278-.256h-.489c-.197 0-.294.123-.255.298.294 1.545 1.456 2.427 3.243 2.427h.784Zm16.444-9.581v10.057c0 2.25-1.39 3.34-4.044 3.34a6.661 6.661 0 0 1-1.74-.175c-.113-.016-.175-.078-.175-.175v-.596c0-.117.062-.178.175-.156.57.134 1.155.193 1.74.176 1.896 0 3.088-.412 3.088-2.386v-2.09c-.411.98-1.215 1.586-2.657 1.586h-.692c-2.032 0-3.46-1.31-3.46-3.602v-2.783c0-2.33 1.428-3.563 3.46-3.563h.703c1.442 0 2.246.509 2.657 1.467v-1.1a.264.264 0 0 1 .002-.101.26.26 0 0 1 .295-.197h.373a.256.256 0 0 1 .278.228.404.404 0 0 1-.003.07Zm-.956 6.06v-2.82c0-1.82-.895-2.683-2.52-2.683h-.835c-1.623 0-2.52.88-2.52 2.683v2.82c0 1.67.895 2.58 2.52 2.58h.834c1.62-.01 2.521-.899 2.521-2.58Zm10.547 3.126v-6.102c0-2.288-.781-3.463-3.082-3.457h-.159a3.57 3.57 0 0 0-3.057 1.606V20.6a.255.255 0 0 0-.103-.25.258.258 0 0 0-.194-.048h-.447a.259.259 0 0 0-.215.196.25.25 0 0 0-.005.102v9.186a.21.21 0 0 0 0 .086.249.249 0 0 0 .104.169.258.258 0 0 0 .193.043h.37a.257.257 0 0 0 .297-.298v-7.101a3.361 3.361 0 0 1 2.871-1.545h.331c1.74 0 2.129.902 2.129 2.605v6.041a.253.253 0 0 0 .175.29c.04.013.081.015.122.008h.373a.256.256 0 0 0 .297-.298Zm9.61-6.024v1.233a.58.58 0 0 1-.173.423.593.593 0 0 1-.421.176h-5.959v1.152c0 1.587.892 2.486 2.521 2.486h.642c1.288 0 1.693-.494 2.242-1.163l.103-.126c.137-.158.214-.197.409-.06l.256.177c.194.137.175.253.058.41-.703.86-1.409 1.7-3.057 1.7h-.673c-2.053 0-3.518-1.291-3.518-3.48v-2.917c0-2.33 1.465-3.563 3.518-3.563h.642c1.693.012 3.41 1.264 3.41 3.552Zm-.995.078c0-1.82-1.036-2.683-2.404-2.683h-.653c-1.625 0-2.52.88-2.52 2.683v.896h5.558l.019-.896Zm7.109-2.7a2.871 2.871 0 0 1 1.045.175.259.259 0 0 0 .328-.158l.159-.401a.283.283 0 0 0-.016-.243.278.278 0 0 0-.159-.127 5.44 5.44 0 0 0-1.27-.159 3.643 3.643 0 0 0-3.191 1.606V20.6a.196.196 0 0 0 0-.084.25.25 0 0 0-.104-.169.261.261 0 0 0-.193-.045h-.373a.257.257 0 0 0-.297.298v9.186a.257.257 0 0 0 .297.298h.37a.253.253 0 0 0 .227-.07.255.255 0 0 0 .07-.228v-7.101a3.361 3.361 0 0 1 2.871-1.545h.236Z" fill="#9A9A9A"/><path d="M18.463 0 0 11.54l2.426 3.878 5.118-3.166V9.76h4.007l9.382-5.817L18.463 0Zm3.115 4.986-7.71 4.787h8.635l1.485-.909-2.41-3.878Zm3.069 4.895-1.966 1.2v2.24h-3.614l-5.015 3.12h8.18l4.686-2.906-2.271-3.654ZM8.12 13.332l-5.046 3.136 2.41 3.859 2.079-1.288V16.44h4.176l5.015-3.108H8.12Zm19.443 1.236-4.855 3.02v2.415h-3.91l-9.737 6.036L11.537 30 30 18.46l-2.437-3.892ZM8.308 20.003l-2.174 1.349 2.287 3.656 8.062-5.005H8.308Z" fill="#aeaeae"/></svg>
--- a/src/ui/assets/logo.svg
+++ b/src/ui/assets/logo.svg
-<svg width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24.617 0 0 15.387l3.235 5.17 6.823-4.22v-3.325h5.343l12.51-7.756L24.617 0Zm4.154 6.648-10.28 6.383h11.514l1.979-1.212-3.213-5.17Zm4.091 6.527-2.621 1.599v2.988h-4.819l-6.687 4.159h10.908l6.247-3.875-3.028-4.871Zm-22.036 4.601L4.1 21.957l3.212 5.145 2.773-1.717v-3.464h5.568l6.687-4.145H10.826Zm25.925 1.648-6.473 4.026v3.22h-5.214l-12.982 8.048 3.3 5.282L40 24.613l-3.25-5.19ZM11.077 26.67l-2.898 1.8 3.05 4.874 10.748-6.674h-10.9Z" fill="#C0C0C0"/></svg>
+<svg width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24.617 0 0 15.387l3.235 5.17 6.823-4.22v-3.325h5.343l12.51-7.756L24.617 0Zm4.154 6.648-10.28 6.383h11.514l1.979-1.212-3.213-5.17Zm4.091 6.527-2.621 1.599v2.988h-4.819l-6.687 4.159h10.908l6.247-3.875-3.028-4.871Zm-22.036 4.601L4.1 21.957l3.212 5.145 2.773-1.717v-3.464h5.568l6.687-4.145H10.826Zm25.925 1.648-6.473 4.026v3.22h-5.214l-12.982 8.048 3.3 5.282L40 24.613l-3.25-5.19ZM11.077 26.67l-2.898 1.8 3.05 4.874 10.748-6.674h-10.9Z" fill="#aeaeae"/></svg>
--- a/src/ui/components/A.tsx
+++ b/src/ui/components/A.tsx
+import React from 'react'
+import { cn } from '../../utils/cn'
+
+export const A = ({
+  className,
+  ...rest
+}: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
+  <a
+    className={cn(
+      'text-sm text-_text-400 hover:text-_text-500 transition-colors',
+      className
+    )}
+    {...rest}
+    target='_blank'
+    rel='noreferrer'
+  />
+)
--- a/src/ui/components/Actions.tsx
+++ b/src/ui/components/Actions.tsx
-import styled from 'styled-components'
+import React from 'react'
+import { cn } from '../../utils/cn'

-const Actions = styled.div`
-  margin: 2rem 0 0;
-
-  & > *:not(:last-child) {
-    margin-right: 1rem;
-  }
-`
-
-export default Actions
+export const Actions = ({
+  className,
+  ...rest
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('mt-8 space-x-4', className)} {...rest} />
+)
--- a/src/ui/components/Address.tsx
+++ b/src/ui/components/Address.tsx
+import { useStore } from '@nanostores/react'
 import { AccountJson } from '@polkadot/extension-base/background/types'
 import Identicon from '@polkadot/react-identicon'
 import { IconTheme } from '@polkadot/react-identicon/types'
-import { useStore } from '@nanostores/react'
 import React, { useEffect, useState } from 'react'
-import styled from 'styled-components'
-import useMetadata from '../../hooks/useMetadata'
+import { useMetadata } from '../../hooks/useMetadata'
 import { useTimedReset } from '../../hooks/useTimedReset'
 import { editAccount } from '../../messaging/uiActions'
 import { accountsStore } from '../../stores/accounts'
+import { cn } from '../../utils/cn'
 import { DEFAULT_TYPE, RELAY_CHAIN, UNKNOWN } from '../../utils/constants'
 import { recodeAddress, Recoded } from '../../utils/recodeAddress'
 import copyIcon from '../assets/copy.svg'
-import { BaseProps } from '../types'
-import AutosizeInput from './AutosizeInput'
+import { AutosizeInput } from './AutosizeInput'

-type Props = BaseProps & {
+type Props = {
  address?: string
  genesisHash?: string | null
  name?: string
@@ -27,12 +26,7 @@ const defaultRecoded = {
  type: DEFAULT_TYPE,
 }

-const Address: React.FC<Props> = ({
-  address,
-  className,
-  genesisHash,
-  name,
-}) => {
+export const Address: React.FC<Props> = ({ address, genesisHash, name }) => {
  const [justCopied, setJustCopied] = useTimedReset<boolean>(false)
  const [recoded, setRecoded] = useState<Recoded>(defaultRecoded)
  const accounts = useStore(accountsStore) as AccountJson[]
@@ -63,101 +57,37 @@ const Address: React.FC<Props> = ({
  }, [accounts, address, chain])

  return (
-    <div className={className}>
-      <div className='logo'>
+    <div className='flex relative rounded bg-_bg-300'>
+      <div className='flex items-center p-2 pr-0'>
        <Identicon
          prefix={recoded.prefix}
          theme={iconTheme}
          value={recoded.formatted || address}
-          size={50}
+          size={32}
        />
      </div>
-      <div className='content'>
-        <div className='name'>
+      <div className='flex flex-col justify-center py-0 px-2 leading-none space-y-1'>
+        <div className=''>
          <AutosizeInput
            value={nameLabel}
            placeholder={UNKNOWN}
            onChange={changeName}
          />
-          {chain && <span className='chain'>{chainLabel}</span>}
+          {chain && <span className='text-_crypto-400'>{chainLabel}</span>}
        </div>
        <div
-          className={`address highlighted ${justCopied && 'just-copied'}`}
+          className={cn(
+            'flex items-center rounded transition cursor-pointer',
+            !justCopied && 'hover:bg-_bg-400'
+          )}
          onClick={onCopy}
        >
-          <div className='icon copy'>
+          <div className='w-4 h-4 mr-1'>
            <img src={copyIcon} />
          </div>
-          <div className='hash'>{hashLabel}</div>
+          <div className='font-mono text-_text-400'>{hashLabel}</div>
        </div>
      </div>
    </div>
  )
 }
-
-export default styled(Address)`
-  display: flex;
-  position: relative;
-  height: 3rem;
-  background: var(--color-card-bg);
-  border-radius: 0.2rem;
-
-  .logo {
-    padding: 0.25rem;
-    padding-right: 0rem;
-  }
-
-  .logo svg {
-    cursor: default;
-  }
-
-  .content {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    padding: 0 0.5rem;
-  }
-
-  .name {
-    margin-top: -0.1rem;
-    margin-bottom: 0.1rem;
-  }
-
-  .address {
-    display: flex;
-    align-items: center;
-    font-size: var(--font-small-size);
-    color: var(--color-faded-text);
-  }
-
-  .hash {
-    padding: 0 0.2rem;
-  }
-
-  .icon {
-    width: 1rem;
-    height: 1rem;
-  }
-
-  .highlighted {
-    border-radius: 0.2rem;
-    transition: var(--transition);
-    cursor: pointer;
-  }
-
-  .highlighted:hover {
-    background: var(--color-highlight);
-  }
-
-  .highlighted.just-copied {
-    background: none !important;
-  }
-
-  .chain {
-    color: var(--color-faded-text);
-  }
-
-  & + & {
-    margin-top: 0.2rem;
-  }
-`
--- a/src/ui/components/AutosizeInput.tsx
+++ b/src/ui/components/AutosizeInput.tsx
 import React from 'react'
-import styled from 'styled-components'
-import { BaseProps } from '../types'

-type Props = BaseProps &
-  Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
-    onChange: (value: string) => void
-  }
+type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
+  onChange: (value: string) => void
+}

-const AutosizeInput: React.FC<Props> = ({
-  className,
+export const AutosizeInput: React.FC<Props> = ({
  value,
  placeholder,
  onChange,
@@ -35,53 +31,21 @@ const AutosizeInput: React.FC<Props> = ({
  }, [content])

  return (
-    <div className={className}>
-      <span className='autoresize-spacer' ref={span}>
+    <div className='inline-block relative'>
+      <span
+        className='opacity-0 absolute whitespace-nowrap pointer-events-none'
+        ref={span}
+      >
        {content || placeholder}
      </span>
      <input
+        className='relative max-w-xs transition-colors bg-_bg-300 text-_crypto-400 outline-none border-b border-_border-400 hover:border-_border-500 focus:border-_border-500'
        value={content}
        placeholder={placeholder}
        style={{ width }}
        onChange={handleChange}
        {...rest}
      />
-      <span className='bordered' />
    </div>
  )
 }
-
-export default styled(AutosizeInput)`
-  display: inline-block;
-  position: relative;
-
-  input {
-    all: unset;
-    position: relative;
-    max-width: 16rem;
-    border-radius: 0.2rem 0.2rem 0 0;
-    transition: background var(--transition);
-  }
-
-  input:hover,
-  input:focus {
-    background: var(--color-highlight);
-  }
-
-  .autoresize-spacer {
-    opacity: 0;
-    position: absolute;
-    white-space: nowrap;
-    pointer-events: none;
-  }
-
-  .bordered {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 1px;
-    background: var(--color-highlight);
-  }
-`
--- a/src/ui/components/Button.tsx
+++ b/src/ui/components/Button.tsx
-import styled from 'styled-components'
+import React from 'react'
+import { cn } from '../../utils/cn'

-export const Button = styled.button`
-  display: inline-block;
-  background: var(--color-button-bg);
-  border: none;
-  border-radius: 0.2rem;
-  color: var(--color-button-text);
-  font-size: var(--font-base-size);
-  line-height: 1;