Commit con #3

Merge pull request #2009 from franciscao633/master
Github Issues Organizational Templates
2023-06-05 18:29:26 +02:00 · 2023-04-28 12:49:29 -07:00 · 2023-04-28 11:35:01 -07:00 · 2023-04-28 11:34:03 -07:00 · 2023-04-28 11:31:54 -07:00 · 2023-04-28 11:24:31 -07:00
872 changed files with 51655 additions and 31842 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -4,3 +4,4 @@ Dockerfile
 .gitignore
 .DS_Store
 node_modules
+.idea
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -4,12 +4,7 @@
    "es2020": true,
    "node": true
  },
-  "extends": [
-    "eslint:recommended",
-    "plugin:prettier/recommended",
-    "plugin:import/recommended",
-    "next"
-  ],
+  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
@ -17,6 +12,15 @@
    "ecmaVersion": 11,
    "sourceType": "module"
  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:prettier/recommended",
+    "plugin:import/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "next"
+  ],
+
+  "plugins": ["@typescript-eslint", "prettier"],
  "settings": {
    "import/resolver": {
      "alias": {
@ -32,7 +36,7 @@
          ["store", "./store"],
          ["styles", "./styles"]
        ],
-        "extensions": [".ts", ".js", ".jsx", ".json"]
+        "extensions": [".ts", ".tsx", ".js", ".jsx", ".json"]
      }
    }
  },
@ -42,7 +46,11 @@
    "react/react-in-jsx-scope": "off",
    "react/prop-types": "off",
    "import/no-anonymous-default-export": "off",
-    "@next/next/no-img-element": "off"
+    "import/no-named-as-default": "off",
+    "@next/next/no-img-element": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-var-requires": "off"
  },
  "globals": {
    "React": "writable"
--- a/.github/ISSUE_TEMPLATE/1.bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/1.bug_report.yml
@ -0,0 +1,32 @@
+name: "🐛 Bug Report"
+description: Create a bug report for Umami.
+body:
+  - type: textarea
+    attributes:
+      label: Describe the Bug
+      description: A clear and concise description of what the bug is.
+    validations:
+      required: true
+  - type: dropdown
+    attributes:
+      label: Database
+      description: What database are you using?
+      options:
+        - PostgreSQL
+        - MySQL
+        - Umami Cloud
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Relevant log output
+      description: Please copy and paste any relevant log output. This will be automatically formatted into code, so no need for backticks.
+      render: shell
+  - type: input
+    attributes:
+      label: Which browser are you using? (if relevant)
+      description: 'For example: Chrome, Edge, Firefox, etc'
+  - type: input
+    attributes:
+      label: How are you deploying your application? (if relevant)
+      description: 'For example: Vercel, Railway, Docker, etc'
--- a/.github/ISSUE_TEMPLATE/2.feature_request.yml
+++ b/.github/ISSUE_TEMPLATE/2.feature_request.yml
@ -0,0 +1,10 @@
+name: "✨ Feature Request"
+description: Create a feature or enhancement request for Umami.
+labels: ['enhancement']
+body:
+  - type: textarea
+    attributes:
+      label: Describe the feature or enhancement
+      description: A clear and concise description of what the feature or enhancement is.
+    validations:
+      required: true
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@ -0,0 +1,6 @@
+
+blank_issues_enabled: false
+contact_links:
+  - name: "🤔 Ask a question"
+    url: https://github.com/umami-software/umami/discussions
+    about: Ask questions and discuss with other community members.
--- a/.github/workflows/cd-manual.yml
+++ b/.github/workflows/cd-manual.yml
@ -18,14 +18,16 @@ jobs:
        db-type: [postgresql, mysql]

    steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3

-      - uses: mr-smithers-excellent/docker-build-push@v5
+      - uses: mr-smithers-excellent/docker-build-push@v6
        name: Build & push Docker image for ${{ matrix.db-type }}
        with:
          image: umami
          tags: ${{ matrix.db-type }}-${{ inputs.version }}, ${{ matrix.db-type }}-latest
          buildArgs: DATABASE_TYPE=${{ matrix.db-type }}
          registry: ghcr.io
+          multiPlatform: true
+          platform: linux/amd64,linux/arm64
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}
--- a/.github/workflows/cd.yml
+++ b/.github/workflows/cd.yml
@ -3,7 +3,6 @@ name: Create docker images
 on: [create]

 jobs:
-
  build:
    name: Build, push, and deploy
    if: ${{ startsWith(github.ref, 'refs/tags/v') }}
@ -14,17 +13,19 @@ jobs:
        db-type: [postgresql, mysql]

    steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3

      - name: Set env
        run: echo "RELEASE_VERSION=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV

-      - uses: mr-smithers-excellent/docker-build-push@v5
+      - uses: mr-smithers-excellent/docker-build-push@v6
        name: Build & push Docker image for ${{ matrix.db-type }}
        with:
          image: umami
          tags: ${{ matrix.db-type }}-${{ env.RELEASE_VERSION }}, ${{ matrix.db-type }}-latest
          buildArgs: DATABASE_TYPE=${{ matrix.db-type }}
          registry: ghcr.io
+          multiPlatform: true
+          platform: linux/amd64,linux/arm64
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}
--- a/.gitignore
+++ b/.gitignore
@ -1,8 +1,8 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

 # dependencies
-/node_modules
-/.pnp
+node_modules
+.pnp
 .pnp.js

 # testing
@ -15,15 +15,16 @@

 # production
 /build
-/public/umami.js
-/public/geo
+/public/script.js
+/geo
+/dist

 # misc
 .DS_Store
 .idea
 *.iml
 *.log
-/.vscode/
+.vscode

 # debug
 npm-debug.log*
--- a/.prettierignore
+++ b/.prettierignore
@ -1 +1 @@
-/public/
+/public/script.js
--- a/9
+++ b/9
@ -1,15 +1,18 @@
 # Install dependencies only when needed
-FROM node:16-alpine AS deps
+FROM node:18-alpine AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
 COPY package.json yarn.lock ./
+# Add yarn timeout to handle slow CPU when Github Actions
+RUN yarn config set network-timeout 300000
 RUN yarn install --frozen-lockfile

 # Rebuild the source code only when needed
-FROM node:16-alpine AS builder
+FROM node:18-alpine AS builder
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
+COPY docker/middleware.js .
 COPY . .

 ARG DATABASE_TYPE
@ -23,7 +26,7 @@ ENV NEXT_TELEMETRY_DISABLED 1
 RUN yarn build-docker

 # Production image, copy all the files and run next
-FROM node:16-alpine AS runner
+FROM node:18-alpine AS runner
 WORKDIR /app

 ENV NODE_ENV production
--- a/2
+++ b/2
@ -1,6 +1,6 @@
 MIT License

-Copyright (c) 2020 Mike Cao <mike@mikecao.com>
+Copyright (c) 2022 Umami Software, Inc. <hello@umami.is>

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
--- a/README.md
+++ b/README.md
@ -1,6 +1,6 @@
 # umami

-Umami is a simple, fast, privacy-focused alternative to Google Analytics.
+Umami MAMI is a simple, fast, privacy-focused alternative to Google Analytics.

 ## Getting started

@ -36,6 +36,7 @@ DATABASE_URL=connection-url
 ```

 The connection url is in the following format:
+
 ```
 postgresql://username:mypassword@localhost:5432/mydb

@ -48,7 +49,7 @@ mysql://username:mypassword@localhost:3306/mydb
 yarn build
 ```

-The build step will also create tables in your database if you ae installing for the first time. It will also create a login account with username **admin** and password **umami**.
+The build step will also create tables in your database if you ae installing for the first time. It will also create a login user with username **admin** and password **umami**.

 ### Start the application

@ -65,17 +66,19 @@ or change the [port](https://nextjs.org/docs/api-reference/cli#production) to se
 To build the umami container and start up a Postgres database, run:

 ```bash
-docker compose up
+docker compose up -d
 ```

 Alternatively, to pull just the Umami Docker image with PostgreSQL support:
+
 ```bash
-docker pull docker.umami.is/umami-software/umami:postgresql-latest
+docker pull docker.umami.dev/umami-software/umami:postgresql-latest
 ```

 Or with MySQL support:
+
 ```bash
-docker pull docker.umami.is/umami-software/umami:mysql-latest
+docker pull docker.umami.dev/umami-software/umami:mysql-latest
 ```

 ## Getting updates
--- a/app.json
+++ b/app.json
@ -6,7 +6,7 @@
  "repository": "https://github.com/umami-software/umami",
  "addons": ["heroku-postgresql"],
  "env": {
-    "HASH_SALT": {
+    "APP_SECRET": {
      "description": "Used to generate unique values for your installation",
      "required": true,
      "generator": "secret"
--- a/assets/add-user.svg
+++ b/assets/add-user.svg
@ -0,0 +1 @@
+<svg id="Layer_2" height="512" viewBox="0 0 30 30" width="512" xmlns="http://www.w3.org/2000/svg" data-name="Layer 2"><g fill="rgb(0,0,0)"><path d="m15 14a5.5 5.5 0 1 1 5.5-5.5 5.51 5.51 0 0 1 -5.5 5.5zm0-9a3.5 3.5 0 1 0 3.5 3.5 3.5 3.5 0 0 0 -3.5-3.5z"/><path d="m7.5 24.5a1 1 0 0 1 -1-1 8.5 8.5 0 0 1 13.6-6.8 1 1 0 1 1 -1.2 1.6 6.44 6.44 0 0 0 -3.9-1.3 6.51 6.51 0 0 0 -6.5 6.5 1 1 0 0 1 -1 1z"/><path d="m23 27a1 1 0 0 1 -1-1v-6a1 1 0 0 1 2 0v6a1 1 0 0 1 -1 1z"/><path d="m26 24h-6a1 1 0 0 1 0-2h6a1 1 0 0 1 0 2z"/></g></svg>
--- a/assets/arrow-right.svg
+++ b/assets/arrow-right.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M216.464 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L387.887 239H12c-6.627 0-12 5.373-12 12v10c0 6.627 5.373 12 12 12h375.887L209.393 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L233.434 36.465c-4.686-4.687-12.284-4.687-16.97 0z"/></svg>
--- a/assets/arrow-up-right-from-square.svg
+++ b/assets/arrow-up-right-from-square.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Pro 6.0.0-alpha2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M392 320C378.75 320 368 330.75 368 344V456C368 460.406 364.406 464 360 464H56C51.594 464 48 460.406 48 456V152C48 147.594 51.594 144 56 144H168C181.25 144 192 133.25 192 120S181.25 96 168 96H56C25.125 96 0 121.125 0 152V456C0 486.875 25.125 512 56 512H360C390.875 512 416 486.875 416 456V344C416 330.75 405.25 320 392 320ZM488 0H320C306.75 0 296 10.75 296 24S306.75 48 320 48H430.062L183.031 295.031C173.656 304.406 173.656 319.594 183.031 328.969C187.719 333.656 193.844 336 200 336S212.281 333.656 216.969 328.969L464 81.938V192C464 205.25 474.75 216 488 216S512 205.25 512 192V24C512 10.75 501.25 0 488 0Z"/></svg>
--- a/assets/bars.svg
+++ b/assets/bars.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!-- Font Awesome Pro 6.0.0-alpha2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M424 392H24C10.8 392 0 402.8 0 416V416C0 429.2 10.8 440 24 440H424C437.2 440 448 429.2 448 416V416C448 402.8 437.2 392 424 392ZM424 72H24C10.8 72 0 82.8 0 96V96C0 109.2 10.8 120 24 120H424C437.2 120 448 109.2 448 96V96C448 82.8 437.2 72 424 72ZM424 232H24C10.8 232 0 242.8 0 256V256C0 269.2 10.8 280 24 280H424C437.2 280 448 269.2 448 256V256C448 242.8 437.2 232 424 232Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M424 392H24c-13.2 0-24 10.8-24 24s10.8 24 24 24h400c13.2 0 24-10.8 24-24s-10.8-24-24-24Zm0-320H24C10.8 72 0 82.8 0 96s10.8 24 24 24h400c13.2 0 24-10.8 24-24s-10.8-24-24-24Zm0 160H24c-13.2 0-24 10.8-24 24s10.8 24 24 24h400c13.2 0 24-10.8 24-24s-10.8-24-24-24Z"/></svg>
--- a/assets/calendar-alt.svg
+++ b/assets/calendar-alt.svg
--- a/assets/chart-bar.svg
+++ b/assets/chart-bar.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Pro 5.15.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z"/></svg>
--- a/assets/check.svg
+++ b/assets/check.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z"/></svg>
--- a/assets/chevron-down.svg
+++ b/assets/chevron-down.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z"/></svg>
--- a/assets/clock.svg
+++ b/assets/clock.svg
@ -0,0 +1 @@
+<svg height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><g clip-rule="evenodd"><path d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16zM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12z"/><path d="M11.168 11.445a1 1 0 0 1 1.387-.277l3 2a1 1 0 0 1-1.11 1.664l-3-2a1 1 0 0 1-.277-1.387z"/><path d="M12 6a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V7a1 1 0 0 1 1-1z"/></g></svg>
--- a/assets/code.svg
+++ b/assets/code.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M234.8 511.7L196 500.4c-4.2-1.2-6.7-5.7-5.5-9.9L331.3 5.8c1.2-4.2 5.7-6.7 9.9-5.5L380 11.6c4.2 1.2 6.7 5.7 5.5 9.9L244.7 506.2c-1.2 4.3-5.6 6.7-9.9 5.5zm-83.2-121.1l27.2-29c3.1-3.3 2.8-8.5-.5-11.5L72.2 256l106.1-94.1c3.4-3 3.6-8.2.5-11.5l-27.2-29c-3-3.2-8.1-3.4-11.3-.4L2.5 250.2c-3.4 3.2-3.4 8.5 0 11.7L140.3 391c3.2 3 8.2 2.8 11.3-.4zm284.1.4l137.7-129.1c3.4-3.2 3.4-8.5 0-11.7L435.7 121c-3.2-3-8.3-2.9-11.3.4l-27.2 29c-3.1 3.3-2.8 8.5.5 11.5L503.8 256l-106.1 94.1c-3.4 3-3.6 8.2-.5 11.5l27.2 29c3.1 3.2 8.1 3.4 11.3.4z"/></svg>
--- a/assets/dashboard.svg
+++ b/assets/dashboard.svg
@ -0,0 +1 @@
+<svg height="512pt" viewBox="0 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="M197.332 170.668h-160C16.746 170.668 0 153.922 0 133.332v-96C0 16.746 16.746 0 37.332 0h160c20.59 0 37.336 16.746 37.336 37.332v96c0 20.59-16.746 37.336-37.336 37.336zM37.332 32A5.336 5.336 0 0 0 32 37.332v96a5.337 5.337 0 0 0 5.332 5.336h160a5.338 5.338 0 0 0 5.336-5.336v-96A5.337 5.337 0 0 0 197.332 32zM197.332 512h-160C16.746 512 0 495.254 0 474.668v-224c0-20.59 16.746-37.336 37.332-37.336h160c20.59 0 37.336 16.746 37.336 37.336v224c0 20.586-16.746 37.332-37.336 37.332zm-160-266.668A5.337 5.337 0 0 0 32 250.668v224A5.336 5.336 0 0 0 37.332 480h160a5.337 5.337 0 0 0 5.336-5.332v-224a5.338 5.338 0 0 0-5.336-5.336zM474.668 512h-160c-20.59 0-37.336-16.746-37.336-37.332v-96c0-20.59 16.746-37.336 37.336-37.336h160c20.586 0 37.332 16.746 37.332 37.336v96C512 495.254 495.254 512 474.668 512zm-160-138.668a5.338 5.338 0 0 0-5.336 5.336v96a5.337 5.337 0 0 0 5.336 5.332h160a5.336 5.336 0 0 0 5.332-5.332v-96a5.337 5.337 0 0 0-5.332-5.336zM474.668 298.668h-160c-20.59 0-37.336-16.746-37.336-37.336v-224C277.332 16.746 294.078 0 314.668 0h160C495.254 0 512 16.746 512 37.332v224c0 20.59-16.746 37.336-37.332 37.336zM314.668 32a5.337 5.337 0 0 0-5.336 5.332v224a5.338 5.338 0 0 0 5.336 5.336h160a5.337 5.337 0 0 0 5.332-5.336v-224A5.336 5.336 0 0 0 474.668 32zm0 0"/></svg>
--- a/assets/ellipsis-h.svg
+++ b/assets/ellipsis-h.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M304 256c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48zm120-48c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48zm-336 0c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48z"/></svg>
--- a/assets/exclamation-triangle.svg
+++ b/assets/exclamation-triangle.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M270.2 160h35.5c3.4 0 6.1 2.8 6 6.2l-7.5 196c-.1 3.2-2.8 5.8-6 5.8h-20.5c-3.2 0-5.9-2.5-6-5.8l-7.5-196c-.1-3.4 2.6-6.2 6-6.2zM288 388c-15.5 0-28 12.5-28 28s12.5 28 28 28 28-12.5 28-28-12.5-28-28-28zm281.5 52L329.6 24c-18.4-32-64.7-32-83.2 0L6.5 440c-18.4 31.9 4.6 72 41.6 72H528c36.8 0 60-40 41.5-72zM528 480H48c-12.3 0-20-13.3-13.9-24l240-416c6.1-10.6 21.6-10.7 27.7 0l240 416c6.2 10.6-1.5 24-13.8 24z"/></svg>
--- a/assets/external-link.svg
+++ b/assets/external-link.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M497.6,0,334.4.17A14.4,14.4,0,0,0,320,14.57V47.88a14.4,14.4,0,0,0,14.69,14.4l73.63-2.72,2.06,2.06L131.52,340.49a12,12,0,0,0,0,17l23,23a12,12,0,0,0,17,0L450.38,101.62l2.06,2.06-2.72,73.63A14.4,14.4,0,0,0,464.12,192h33.31a14.4,14.4,0,0,0,14.4-14.4L512,14.4A14.4,14.4,0,0,0,497.6,0ZM432,288H416a16,16,0,0,0-16,16V458a6,6,0,0,1-6,6H54a6,6,0,0,1-6-6V118a6,6,0,0,1,6-6H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V304A16,16,0,0,0,432,288Z"/></svg>
--- a/assets/gear.svg
+++ b/assets/gear.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Pro 6.0.0-alpha2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M504.265 315.978C504.265 307.326 499.658 299.134 491.906 294.586L458.998 275.615C459.643 269.099 459.966 262.549 459.966 256S459.643 242.901 458.998 236.385L491.906 217.414C499.658 212.866 504.265 204.674 504.265 196.022C504.265 174.755 454.947 67.846 419.746 67.846C415.502 67.846 411.236 68.939 407.379 71.203L374.599 90.172C363.888 82.43 352.533 75.848 340.531 70.428V32.488C340.531 21.262 333.047 11.453 322.205 8.613C300.654 2.871 278.425 0 256.181 0C233.935 0 211.675 2.871 190.06 8.613C179.218 11.453 171.734 21.262 171.734 32.488V70.428C159.732 75.848 148.377 82.43 137.666 90.172L104.886 71.203C101.031 68.939 96.763 67.846 92.519 67.846C92.517 67.846 92.514 67.846 92.512 67.846C60.048 67.846 8 169.591 8 196.022C8 204.674 12.607 212.866 20.359 217.414L53.267 236.385C52.622 242.901 52.299 249.451 52.299 256S52.622 269.099 53.267 275.615L20.359 294.586C12.607 299.134 8 307.326 8 315.978C8 337.245 57.318 444.154 92.519 444.154C96.763 444.154 101.029 443.061 104.886 440.797L137.666 421.828C148.377 429.57 159.732 436.152 171.734 441.572V479.512C171.734 490.738 179.218 500.547 190.06 503.387C211.611 509.129 233.84 512 256.084 512C278.33 512 300.59 509.129 322.205 503.387C333.047 500.547 340.531 490.738 340.531 479.512V441.572C352.533 436.152 363.888 429.57 374.599 421.828L407.379 440.797C411.234 443.061 415.502 444.154 419.746 444.154C452.209 444.154 504.265 342.423 504.265 315.978ZM415.361 389.959C391.561 376.186 404.101 383.444 371.705 364.695C329.649 395.09 339.375 389.426 292.531 410.582V460.82C279.236 463.161 266.948 464 256.093 464C240.669 464 228.14 462.306 219.734 460.824V410.582C172.779 389.376 182.552 395.044 140.56 364.695C108.748 383.105 117.896 377.811 96.924 389.949C81.181 371.256 68.849 349.895 60.517 326.84C81.643 314.663 72.361 320.014 104.088 301.723C101.549 276.083 100.277 266.079 100.277 256.04C100.277 246.018 101.545 235.96 104.088 210.277C72.198 191.892 81.571 197.295 60.504 185.152C68.818 162.109 81.187 140.686 96.904 122.041C120.704 135.814 108.164 128.556 140.56 147.305C182.616 116.91 172.89 122.574 219.734 101.418V51.18C233.029 48.839 245.318 48 256.172 48C271.597 48 284.126 49.694 292.531 51.176V101.418C339.486 122.624 329.713 116.956 371.705 147.305C405.655 127.657 394.228 134.27 415.343 122.051C431.084 140.744 443.416 162.105 451.748 185.16C430.622 197.337 439.904 191.986 408.177 210.277C410.716 235.917 411.988 245.921 411.988 255.96C411.988 265.982 410.72 276.04 408.177 301.723C440.067 320.108 430.694 314.705 451.761 326.848C443.447 349.891 431.078 371.314 415.361 389.959ZM256.133 160C203.258 160 160.133 203.125 160.133 256S203.258 352 256.133 352S352.133 308.875 352.133 256S309.008 160 256.133 160ZM256.133 304C229.666 304 208.133 282.467 208.133 256S229.666 208 256.133 208S304.133 229.533 304.133 256S282.599 304 256.133 304Z "></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M504.265 315.978c0-8.652-4.607-16.844-12.359-21.392l-32.908-18.971a199.182 199.182 0 0 0 0-39.23l32.908-18.971c7.752-4.548 12.359-12.74 12.359-21.392 0-21.267-49.318-128.176-84.519-128.176-4.244 0-8.51 1.093-12.367 3.357l-32.78 18.969a195.058 195.058 0 0 0-34.068-19.744v-37.94c0-11.226-7.484-21.035-18.326-23.875C300.654 2.871 278.425 0 256.181 0a257.698 257.698 0 0 0-66.121 8.613c-10.842 2.84-18.326 12.649-18.326 23.875v37.94a195.058 195.058 0 0 0-34.068 19.744l-32.78-18.969a24.36 24.36 0 0 0-12.367-3.357h-.007C60.048 67.846 8 169.591 8 196.022c0 8.652 4.607 16.844 12.359 21.392l32.908 18.971a199.182 199.182 0 0 0 0 39.23l-32.908 18.971C12.607 299.134 8 307.326 8 315.978c0 21.267 49.318 128.176 84.519 128.176 4.244 0 8.51-1.093 12.367-3.357l32.78-18.969a195.058 195.058 0 0 0 34.068 19.744v37.94c0 11.226 7.484 21.035 18.326 23.875 21.551 5.742 43.78 8.613 66.024 8.613 22.246 0 44.506-2.871 66.121-8.613 10.842-2.84 18.326-12.649 18.326-23.875v-37.94a195.058 195.058 0 0 0 34.068-19.744l32.78 18.969a24.36 24.36 0 0 0 12.367 3.357c32.463 0 84.519-101.731 84.519-128.176Zm-88.904 73.981c-23.8-13.773-11.26-6.515-43.656-25.264-42.056 30.395-32.33 24.731-79.174 45.887v50.238a210.138 210.138 0 0 1-36.438 3.18 208.924 208.924 0 0 1-36.359-3.176v-50.242c-46.955-21.206-37.182-15.538-79.174-45.887l-43.636 25.254a207.379 207.379 0 0 1-36.407-63.109c21.126-12.177 11.844-6.826 43.571-25.117-2.539-25.64-3.811-35.644-3.811-45.683 0-10.022 1.268-20.08 3.811-45.763-31.89-18.385-22.517-12.982-43.584-25.125a207.107 207.107 0 0 1 36.4-63.111c23.8 13.773 11.26 6.515 43.656 25.264 42.056-30.395 32.33-24.731 79.174-45.887V51.18A210.146 210.146 0 0 1 256.172 48c15.425 0 27.954 1.694 36.359 3.176v50.242c46.955 21.206 37.182 15.538 79.174 45.887l43.638-25.254a207.414 207.414 0 0 1 36.405 63.109c-21.126 12.177-11.844 6.826-43.571 25.117 2.539 25.64 3.811 35.644 3.811 45.683 0 10.022-1.268 20.08-3.811 45.763 31.89 18.385 22.517 12.982 43.584 25.125a207.107 207.107 0 0 1-36.4 63.111ZM256.133 160c-52.875 0-96 43.125-96 96s43.125 96 96 96 96-43.125 96-96-43.125-96-96-96Zm0 144c-26.467 0-48-21.533-48-48s21.533-48 48-48 48 21.533 48 48-21.534 48-48 48Z"/></svg>
--- a/assets/list-ul.svg
+++ b/assets/list-ul.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M48 368a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0-160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0-160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm448 24H176a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V88a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16z"/></svg>
--- a/assets/lock.svg
+++ b/assets/lock.svg
@ -0,0 +1 @@
+<svg height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="M18.75 9H18V6c0-3.309-2.691-6-6-6S6 2.691 6 6v3h-.75A2.253 2.253 0 0 0 3 11.25v10.5C3 22.991 4.01 24 5.25 24h13.5c1.24 0 2.25-1.009 2.25-2.25v-10.5C21 10.009 19.99 9 18.75 9zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v3H8zm5 10.722V19a1 1 0 1 1-2 0v-2.278c-.595-.347-1-.985-1-1.722 0-1.103.897-2 2-2s2 .897 2 2c0 .737-.405 1.375-1 1.722z"/></svg>
--- a/assets/logo.svg
+++ b/assets/logo.svg
@ -1,2 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 428 389.11" width="20" height="20">
-    <circle cx="214.15" cy="181" r="171" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="20"/><path d="M413,134.11H15.29a15,15,0,0,0-15,15v15.3C.12,168,0,171.52,0,175.11c0,118.19,95.81,214,214,214,116.4,0,211.1-92.94,213.93-208.67,0-.44.07-.88.07-1.33v-30A15,15,0,0,0,413,134.11Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 428 389.11" width="20" height="20"><circle cx="214.15" cy="181" r="171" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="20"/><path d="M413 134.11H15.29a15 15 0 0 0-15 15v15.3C.12 168 0 171.52 0 175.11c0 118.19 95.81 214 214 214 116.4 0 211.1-92.94 213.93-208.67 0-.44.07-.88.07-1.33v-30a15 15 0 0 0-15-15Z"/></svg>
--- a/assets/moon.svg
+++ b/assets/moon.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1399.98 1400"><path d="M562.44,837.55C335.89,611,288.08,273.54,418.71,0A734.31,734.31,0,0,0,215.54,143.73c-287.39,287.39-287.39,753.33,0,1040.72s753.33,287.4,1040.74,0A733.8,733.8,0,0,0,1400,981.29C1126.45,1111.92,789,1064.09,562.44,837.55Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1399.98 1400"><path d="M562.44 837.55C335.89 611 288.08 273.54 418.71 0a734.31 734.31 0 0 0-203.17 143.73c-287.39 287.39-287.39 753.33 0 1040.72s753.33 287.4 1040.74 0A733.8 733.8 0 0 0 1400 981.29c-273.55 130.63-611 82.8-837.56-143.74Z"/></svg>
--- a/assets/pen.svg
+++ b/assets/pen.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M493.26 56.26l-37.51-37.51C443.25 6.25 426.87 0 410.49 0s-32.76 6.25-45.25 18.74l-74.49 74.49L256 127.98 12.85 371.12.15 485.34C-1.45 499.72 9.88 512 23.95 512c.89 0 1.79-.05 2.69-.15l114.14-12.61L384.02 256l34.74-34.74 74.49-74.49c25-25 25-65.52.01-90.51zM118.75 453.39l-67.58 7.46 7.53-67.69 231.24-231.24 31.02-31.02 60.14 60.14-31.02 31.02-231.33 231.33zm340.56-340.57l-44.28 44.28-60.13-60.14 44.28-44.28c4.08-4.08 8.84-4.69 11.31-4.69s7.24.61 11.31 4.69l37.51 37.51c6.24 6.25 6.24 16.4 0 22.63z"/></svg>
--- a/assets/plus.svg
+++ b/assets/plus.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M368 224H224V80c0-8.84-7.16-16-16-16h-32c-8.84 0-16 7.16-16 16v144H16c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h144v144c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V288h144c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z"/></svg>
--- a/assets/profile.svg
+++ b/assets/profile.svg
@ -0,0 +1 @@
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M437.02 74.98C388.668 26.63 324.379 0 256 0S123.332 26.629 74.98 74.98C26.63 123.332 0 187.621 0 256s26.629 132.668 74.98 181.02C123.332 485.37 187.621 512 256 512s132.668-26.629 181.02-74.98C485.37 388.668 512 324.379 512 256s-26.629-132.668-74.98-181.02zM111.105 429.297c8.454-72.735 70.989-128.89 144.895-128.89 38.96 0 75.598 15.179 103.156 42.734 23.281 23.285 37.965 53.687 41.742 86.152C361.641 462.172 311.094 482 256 482s-105.637-19.824-144.895-52.703zM256 269.507c-42.871 0-77.754-34.882-77.754-77.753C178.246 148.879 213.13 114 256 114s77.754 34.879 77.754 77.754c0 42.871-34.883 77.754-77.754 77.754zm170.719 134.427a175.9 175.9 0 0 0-46.352-82.004c-18.437-18.438-40.25-32.27-64.039-40.938 28.598-19.394 47.426-52.16 47.426-89.238C363.754 132.34 315.414 84 256 84s-107.754 48.34-107.754 107.754c0 37.098 18.844 69.875 47.465 89.266-21.887 7.976-42.14 20.308-59.566 36.542-25.235 23.5-42.758 53.465-50.883 86.348C50.852 364.242 30 312.512 30 256 30 131.383 131.383 30 256 30s226 101.383 226 226c0 56.523-20.86 108.266-55.281 147.934zm0 0"/></svg>
--- a/assets/sun.svg
+++ b/assets/sun.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 1400"><path d="M367.43,422.13a54.44,54.44,0,0,1-38.66-16L205,282.35A54.69,54.69,0,0,1,282.37,205L406.11,328.79a54.68,54.68,0,0,1-38.68,93.34Z"/><path d="M1156.3,1211a54.51,54.51,0,0,1-38.67-16L993.89,1071.21a54.68,54.68,0,1,1,77.34-77.33L1195,1117.65A54.7,54.7,0,0,1,1156.3,1211Z"/><path d="M243.7,1211A54.7,54.7,0,0,1,205,1117.65L328.74,993.89a54.69,54.69,0,0,1,77.36,77.32L282.37,1195A54.51,54.51,0,0,1,243.7,1211Z"/><path d="M1032.57,422.13a54.68,54.68,0,0,1-38.68-93.34L1117.61,205A54.69,54.69,0,0,1,1195,282.35L1071.23,406.11A54.44,54.44,0,0,1,1032.57,422.13Z"/><path d="M229.69,754.69h-175a54.69,54.69,0,0,1,0-109.38h175a54.69,54.69,0,0,1,0,109.38Z"/><path d="M1345.31,754.69h-175a54.69,54.69,0,0,1,0-109.38h175a54.69,54.69,0,0,1,0,109.38Z"/><path d="M700,1400a54.68,54.68,0,0,1-54.69-54.69v-175a54.69,54.69,0,0,1,109.38,0v175A54.68,54.68,0,0,1,700,1400Z"/><path d="M700,284.38a54.7,54.7,0,0,1-54.69-54.69v-175a54.69,54.69,0,0,1,109.38,0v175A54.7,54.7,0,0,1,700,284.38Z"/><circle cx="700" cy="700" r="306.25"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 1400"><path d="M367.43 422.13a54.44 54.44 0 0 1-38.66-16L205 282.35A54.69 54.69 0 0 1 282.37 205l123.74 123.79a54.68 54.68 0 0 1-38.68 93.34ZM1156.3 1211a54.51 54.51 0 0 1-38.67-16l-123.74-123.79a54.68 54.68 0 1 1 77.34-77.33L1195 1117.65a54.7 54.7 0 0 1-38.7 93.35Zm-912.6 0a54.7 54.7 0 0 1-38.7-93.35l123.74-123.76a54.69 54.69 0 0 1 77.36 77.32L282.37 1195a54.51 54.51 0 0 1-38.67 16Zm788.87-788.87a54.68 54.68 0 0 1-38.68-93.34L1117.61 205a54.69 54.69 0 0 1 77.39 77.35l-123.77 123.76a54.44 54.44 0 0 1-38.66 16.02ZM229.69 754.69h-175a54.69 54.69 0 0 1 0-109.38h175a54.69 54.69 0 0 1 0 109.38Zm1115.62 0h-175a54.69 54.69 0 0 1 0-109.38h175a54.69 54.69 0 0 1 0 109.38ZM700 1400a54.68 54.68 0 0 1-54.69-54.69v-175a54.69 54.69 0 0 1 109.38 0v175A54.68 54.68 0 0 1 700 1400Zm0-1115.62a54.7 54.7 0 0 1-54.69-54.69v-175a54.69 54.69 0 0 1 109.38 0v175A54.7 54.7 0 0 1 700 284.38Z"/><circle cx="700" cy="700" r="306.25"/></svg>
--- a/assets/times.svg
+++ b/assets/times.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
--- a/assets/trash.svg
+++ b/assets/trash.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M432 80h-82.4l-34-56.7A48 48 0 0 0 274.4 0H173.6a48 48 0 0 0-41.2 23.3L98.4 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16l21.2 339a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM173.6 48h100.8l19.2 32H154.4zm173.3 416H101.11l-21-336h287.8z"/></svg>
--- a/assets/user.svg
+++ b/assets/user.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1652 1652"><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M1587.07,504.47A828.56,828.56,0,1,0,1652,826,823.13,823.13,0,0,0,1587.07,504.47ZM826,1577a747.29,747.29,0,0,1-464.48-161.26,39.94,39.94,0,0,0,2.8-11.35,458.82,458.82,0,0,1,34.29-135.74,464.15,464.15,0,0,1,854.78,0,458.82,458.82,0,0,1,34.29,135.74,39.94,39.94,0,0,0,2.8,11.35A747.29,747.29,0,0,1,826,1577ZM719.81,866.57A274,274,0,1,1,826,888,272.1,272.1,0,0,1,719.81,866.57Zm641.28,485.87c-36.11-201.1-182.78-363.82-374.86-423,114.28-58.37,192.53-177.22,192.53-314.35,0-194.83-157.94-352.76-352.76-352.76S473.24,420.29,473.24,615.12c0,137.13,78.25,256,192.53,314.35-192.08,59.15-338.75,221.87-374.86,423C157.46,1216.81,75,1030.86,75,826,75,411.9,411.9,75,826,75s751,336.9,751,751C1577,1030.86,1494.54,1216.81,1361.09,1352.44Z"/></g></g></svg>
+<svg height="512pt" viewBox="-56 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="M267 236.375c36.254-22.582 60.434-62.797 60.434-108.563C327.434 57.337 270.098 0 199.62 0 129.145 0 71.81 57.336 71.81 127.813c0 45.765 24.18 85.976 60.43 108.558C55.222 264.071 0 337.84 0 424.273v72.243C0 505.066 6.934 512 15.484 512H383.75c8.55 0 15.48-6.934 15.48-15.484v-72.243c0-86.43-55.218-160.195-132.23-187.898zm101.266 244.656H30.969v-56.758c0-92.992 75.652-168.644 168.648-168.644 92.992 0 168.649 75.652 168.649 168.644zm-71.801-353.219c0 53.403-43.442 96.848-96.844 96.848s-96.844-43.445-96.844-96.847c0-53.399 43.442-96.844 96.844-96.844s96.844 43.445 96.844 96.844zm0 0"/></svg>
--- a/assets/users.svg
+++ b/assets/users.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 477.869 477.869" style="enable-background:new 0 0 477.869 477.869" xml:space="preserve"><path d="M387.415 233.496c48.976-44.029 52.987-119.424 8.958-168.4C355.991 20.177 288.4 12.546 239.02 47.332c-53.83-37.99-128.264-25.149-166.254 28.68-34.859 49.393-27.259 117.054 17.689 157.483C34.606 262.935-.251 320.976.002 384.108v51.2c0 9.426 7.641 17.067 17.067 17.067h443.733c9.426 0 17.067-7.641 17.067-17.067v-51.2c.252-63.132-34.605-121.173-90.454-150.612zM307.201 59.842c47.062-.052 85.256 38.057 85.309 85.119.037 33.564-19.631 64.023-50.237 77.799-1.314.597-2.628 1.143-3.959 1.707a83.66 83.66 0 0 1-12.988 4.045c-.853.188-1.707.29-2.577.461a85.366 85.366 0 0 1-15.019 1.519c-2.27 0-4.557-.171-6.827-.375-.853 0-1.707 0-2.56-.171a86.219 86.219 0 0 1-27.904-8.226c-.324-.154-.7-.137-1.024-.273-1.707-.819-3.413-1.536-4.932-2.458.137-.171.222-.358.358-.529a119.721 119.721 0 0 0 18.278-33.297l.529-1.434a120.381 120.381 0 0 0 4.523-17.562c.154-.87.273-1.707.41-2.645.987-6.067 1.506-12.2 1.553-18.347a120.041 120.041 0 0 0-1.553-18.313c-.137-.887-.256-1.707-.41-2.645a120.414 120.414 0 0 0-4.523-17.562l-.529-1.434a119.747 119.747 0 0 0-18.278-33.297c-.137-.171-.222-.358-.358-.529a84.787 84.787 0 0 1 42.718-11.553zM85.335 145.176c-.121-47.006 37.886-85.21 84.892-85.331a85.112 85.112 0 0 1 59.134 23.686c.99.956 1.963 1.911 2.918 2.901a87.748 87.748 0 0 1 8.09 9.813c.751 1.058 1.434 2.185 2.133 3.277a83.951 83.951 0 0 1 6.263 11.52c.427.973.751 1.963 1.126 2.935a83.422 83.422 0 0 1 4.233 13.653c.12.512.154 1.024.256 1.553a80.338 80.338 0 0 1 0 32.119c-.102.529-.137 1.041-.256 1.553a83.228 83.228 0 0 1-4.233 13.653c-.375.973-.7 1.963-1.126 2.935a84.251 84.251 0 0 1-6.263 11.503c-.7 1.092-1.382 2.219-2.133 3.277a87.549 87.549 0 0 1-8.09 9.813c-.956.99-1.929 1.946-2.918 2.901a85.187 85.187 0 0 1-23.569 15.906 49.35 49.35 0 0 1-4.198 1.707 85.839 85.839 0 0 1-12.663 3.925c-1.075.239-2.185.375-3.277.563a84.67 84.67 0 0 1-14.046 1.417h-1.877a84.563 84.563 0 0 1-14.046-1.417c-1.092-.188-2.202-.324-3.277-.563a85.802 85.802 0 0 1-12.663-3.925c-1.417-.563-2.816-1.143-4.198-1.707-30.534-13.786-50.173-44.166-50.212-77.667zm221.866 273.066H34.135v-34.133c-.25-57.833 36.188-109.468 90.76-128.614a119.092 119.092 0 0 0 91.546 0 137.138 137.138 0 0 1 16.623 7.356c3.55 1.826 6.827 3.908 10.24 6.007 2.219 1.382 4.471 2.731 6.605 4.25 3.294 2.338 6.4 4.881 9.455 7.492 1.963 1.707 3.908 3.413 5.751 5.12 2.816 2.662 5.461 5.478 8.004 8.363a134.465 134.465 0 0 1 5.291 6.383 132.594 132.594 0 0 1 6.349 8.823c1.707 2.56 3.226 5.222 4.727 7.885 1.707 2.935 3.277 5.871 4.71 8.926 1.434 3.055 2.697 6.4 3.925 9.66 1.075 2.833 2.219 5.649 3.106 8.533 1.195 3.959 2.031 8.055 2.867 12.151.512 2.423 1.178 4.796 1.553 7.253a141.153 141.153 0 0 1 1.553 20.412v34.133zm136.534 0h-102.4v-34.133c0-5.342-.307-10.633-.785-15.872-.137-1.536-.375-3.055-.546-4.591-.461-3.772-.99-7.509-1.707-11.213a246.936 246.936 0 0 0-.973-4.762c-.819-3.8-1.769-7.566-2.85-11.298-.358-1.229-.683-2.475-1.058-3.686a169.105 169.105 0 0 0-20.565-43.127l-.666-.973a168.958 168.958 0 0 0-9.404-12.646l-.119-.154a154.895 154.895 0 0 0-11.008-12.237h.7a120.8 120.8 0 0 0 14.524 1.024h.939c4.496-.039 8.985-.33 13.449-.87 1.399-.171 2.782-.427 4.181-.649a117.43 117.43 0 0 0 10.752-2.167c1.007-.256 2.031-.495 3.055-.785a116.211 116.211 0 0 0 13.653-4.642c54.612 19.127 91.083 70.785 90.829 128.649v34.132z"/></svg>
--- a/assets/website.svg
+++ b/assets/website.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 511.999 511.999" style="enable-background:new 0 0 511.999 511.999" xml:space="preserve"><path d="M437.019 74.981C388.667 26.628 324.38 0 256 0 187.62 0 123.332 26.628 74.981 74.98 26.628 123.332 0 187.62 0 256s26.628 132.667 74.981 181.019c48.351 48.352 112.639 74.98 181.019 74.98 68.381 0 132.667-26.628 181.02-74.981C485.371 388.667 512 324.379 512 255.999s-26.629-132.667-74.981-181.018zM96.216 96.216c22.511-22.511 48.938-39.681 77.742-50.888-7.672 9.578-14.851 20.587-21.43 32.969-7.641 14.38-14.234 30.173-19.725 47.042-19.022-3.157-36.647-7.039-52.393-11.595a230.423 230.423 0 0 1 15.806-17.528zm-33.987 43.369c18.417 5.897 39.479 10.87 62.461 14.809-6.4 27.166-10.167 56.399-11.066 86.591H30.536c2.36-36.233 13.242-70.813 31.693-101.4zm-1.635 230.053c-17.455-29.899-27.769-63.481-30.059-98.623h83.146c.982 29.329 4.674 57.731 10.858 84.186-23.454 3.802-45.045 8.649-63.945 14.437zm35.622 46.146a229.917 229.917 0 0 1-17.831-20.055c16.323-4.526 34.571-8.359 54.214-11.433 5.53 17.103 12.194 33.105 19.928 47.662 7.17 13.493 15.053 25.349 23.51 35.505-29.61-11.183-56.769-28.629-79.821-51.679zm144.768 62.331c-22.808-6.389-44.384-27.217-61.936-60.249-6.139-11.552-11.531-24.155-16.15-37.587 24.73-2.722 51.045-4.331 78.086-4.709v102.545zm0-132.578c-29.988.409-59.217 2.292-86.59 5.507-6.038-24.961-9.671-51.978-10.668-80.028h97.259v74.521zm0-104.553h-97.315c.911-28.834 4.602-56.605 10.828-82.201 27.198 3.4 56.366 5.468 86.487 6.06v76.141zm0-106.176c-27.146-.547-53.403-2.317-77.958-5.205 4.591-13.292 9.941-25.768 16.022-37.215 17.551-33.032 39.128-53.86 61.936-60.249v102.669zm209.733 6.372c17.874 30.193 28.427 64.199 30.749 99.804h-83.088c-.889-29.844-4.584-58.749-10.85-85.647 23.133-3.736 44.456-8.489 63.189-14.157zm-34.934-44.964a230.122 230.122 0 0 1 16.914 18.91c-16.073 4.389-33.972 8.114-53.204 11.112-5.548-17.208-12.243-33.305-20.02-47.941-6.579-12.382-13.758-23.391-21.43-32.969 28.802 11.207 55.23 28.377 77.74 50.888zm-144.767 174.8h97.259c-1.004 28.268-4.686 55.49-10.81 80.612-27.194-3.381-56.349-5.43-86.449-6.006v-74.606zm0-30.032v-76.041c30.005-.394 59.257-2.261 86.656-5.464 6.125 25.403 9.756 52.932 10.659 81.505h-97.315zm-.002-208.845h.001c22.808 6.389 44.384 27.217 61.936 60.249 6.178 11.627 11.601 24.318 16.24 37.848-24.763 2.712-51.108 4.309-78.177 4.674V32.139zm.002 445.976V375.657c27.12.532 53.357 2.286 77.903 5.156-4.579 13.232-9.911 25.654-15.967 37.053-17.552 33.032-39.128 53.86-61.936 60.249zm144.767-62.331c-23.051 23.051-50.21 40.496-79.821 51.678 8.457-10.156 16.34-22.011 23.51-35.504 7.62-14.341 14.198-30.088 19.68-46.906 19.465 3.213 37.473 7.186 53.515 11.859a230.268 230.268 0 0 1-16.884 18.873zm34.823-44.775c-18.635-5.991-40-11.032-63.326-15.01 6.296-26.68 10.048-55.36 11.041-84.983h83.146c-2.328 35.678-12.918 69.753-30.861 99.993z"/></svg>
--- a/assets/xmark.svg
+++ b/assets/xmark.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!-- Font Awesome Pro 6.0.0-alpha2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M312.973 375.032C322.342 384.401 322.342 399.604 312.973 408.973S288.401 418.342 279.032 408.973L160 289.941L40.968 408.973C31.599 418.342 16.396 418.342 7.027 408.973S-2.342 384.401 7.027 375.032L126.059 256L7.027 136.968C-2.342 127.599 -2.342 112.396 7.027 103.027S31.599 93.658 40.968 103.027L160 222.059L279.032 103.027C288.401 93.658 303.604 93.658 312.973 103.027S322.342 127.599 312.973 136.968L193.941 256L312.973 375.032Z"/></svg>
--- a/components/common/Button.js
+++ b/components/common/Button.js
@ -1,63 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ReactTooltip from 'react-tooltip';
-import classNames from 'classnames';
-import Icon from './Icon';
-import styles from './Button.module.css';
-
-function Button({
-  type = 'button',
-  icon,
-  size,
-  variant,
-  children,
-  className,
-  tooltip,
-  tooltipId,
-  disabled,
-  iconRight,
-  onClick = () => {},
-  ...props
-}) {
-  return (
-    <button
-      data-tip={tooltip}
-      data-effect="solid"
-      data-for={tooltipId}
-      data-offset={JSON.stringify({ left: 10 })}
-      type={type}
-      className={classNames(styles.button, className, {
-        [styles.large]: size === 'large',
-        [styles.small]: size === 'small',
-        [styles.xsmall]: size === 'xsmall',
-        [styles.action]: variant === 'action',
-        [styles.danger]: variant === 'danger',
-        [styles.light]: variant === 'light',
-        [styles.iconRight]: iconRight,
-      })}
-      disabled={disabled}
-      onClick={!disabled ? onClick : null}
-      {...props}
-    >
-      {icon && <Icon className={styles.icon} icon={icon} size={size} />}
-      {children && <div className={styles.label}>{children}</div>}
-      {tooltip && <ReactTooltip id={tooltipId}>{tooltip}</ReactTooltip>}
-    </button>
-  );
-}
-
-Button.propTypes = {
-  type: PropTypes.oneOf(['button', 'submit', 'reset']),
-  icon: PropTypes.node,
-  size: PropTypes.oneOf(['xlarge', 'large', 'medium', 'small', 'xsmall']),
-  variant: PropTypes.oneOf(['action', 'danger', 'light']),
-  children: PropTypes.node,
-  className: PropTypes.string,
-  tooltip: PropTypes.node,
-  tooltipId: PropTypes.string,
-  disabled: PropTypes.bool,
-  iconRight: PropTypes.bool,
-  onClick: PropTypes.func,
-};
-
-export default Button;
--- a/components/common/Button.module.css
+++ b/components/common/Button.module.css
@ -1,102 +0,0 @@
-.button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: var(--font-size-normal);
-  color: var(--gray900);
-  background: var(--gray100);
-  padding: 8px 16px;
-  border-radius: 4px;
-  border: 0;
-  outline: none;
-  cursor: pointer;
-  position: relative;
-}
-
-.button:hover {
-  background: var(--gray200);
-}
-
-.button:active {
-  color: var(--gray900);
-}
-
-.label {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  max-width: 300px;
-}
-
-.large {
-  font-size: var(--font-size-large);
-}
-
-.small {
-  font-size: var(--font-size-small);
-}
-
-.xsmall {
-  font-size: var(--font-size-xsmall);
-}
-
-.action,
-.action:active {
-  color: var(--gray50);
-  background: var(--gray900);
-}
-
-.action:hover {
-  background: var(--gray800);
-}
-
-.danger,
-.danger:active {
-  color: var(--gray50);
-  background: var(--red500);
-}
-
-.danger:hover {
-  background: var(--red400);
-}
-
-.light,
-.light:active {
-  color: var(--gray900);
-  background: transparent;
-}
-
-.light:hover {
-  background: inherit;
-}
-
-.button .icon + * {
-  margin-left: 10px;
-}
-
-.button.iconRight .icon {
-  order: 1;
-  margin-left: 10px;
-}
-
-.button.iconRight .icon + * {
-  margin: 0;
-}
-
-.button:disabled {
-  cursor: default;
-  color: var(--gray500);
-  background: var(--gray75);
-}
-
-.button:disabled:active {
-  color: var(--gray500);
-}
-
-.button:disabled:hover {
-  background: var(--gray75);
-}
-
-.button.light:disabled {
-  background: var(--gray50);
-}
--- a/components/common/ButtonGroup.js
+++ b/components/common/ButtonGroup.js
@ -1,42 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import Button from './Button';
-import styles from './ButtonGroup.module.css';
-
-function ButtonGroup({ items = [], selectedItem, className, size, icon, onClick = () => {} }) {
-  return (
-    <div className={classNames(styles.group, className)}>
-      {items.map(item => {
-        const { label, value } = item;
-        return (
-          <Button
-            key={value}
-            className={classNames(styles.button, { [styles.selected]: selectedItem === value })}
-            size={size}
-            icon={icon}
-            onClick={() => onClick(value)}
-          >
-            {label}
-          </Button>
-        );
-      })}
-    </div>
-  );
-}
-
-ButtonGroup.propTypes = {
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.node,
-      value: PropTypes.any.isRequired,
-    }),
-  ),
-  selectedItem: PropTypes.any,
-  className: PropTypes.string,
-  size: PropTypes.oneOf(['xlarge', 'large', 'medium', 'small', 'xsmall']),
-  icon: PropTypes.node,
-  onClick: PropTypes.func,
-};
-
-export default ButtonGroup;
--- a/components/common/ButtonGroup.module.css
+++ b/components/common/ButtonGroup.module.css
@ -1,31 +0,0 @@
-.group {
-  display: inline-flex;
-  border-radius: 4px;
-  overflow: hidden;
-  border: 1px solid var(--gray500);
-}
-
-.group .button {
-  border-radius: 0;
-  color: var(--gray800);
-  background: var(--gray50);
-  border-left: 1px solid var(--gray500);
-  padding: 4px 8px;
-}
-
-.group .button:first-child {
-  border: 0;
-}
-
-.group .button:hover {
-  background: var(--gray100);
-}
-
-.group .button + .button {
-  margin: 0;
-}
-
-.group .button.selected {
-  color: var(--gray900);
-  font-weight: 600;
-}
--- a/components/common/Calendar.js
+++ b/components/common/Calendar.js
@ -1,273 +0,0 @@
-import React, { useState } from 'react';
-import classNames from 'classnames';
-import {
-  startOfWeek,
-  startOfMonth,
-  startOfYear,
-  endOfMonth,
-  addDays,
-  subDays,
-  addYears,
-  subYears,
-  addMonths,
-  setMonth,
-  setYear,
-  isSameDay,
-  isBefore,
-  isAfter,
-} from 'date-fns';
-import Button from './Button';
-import useLocale from 'hooks/useLocale';
-import { dateFormat } from 'lib/date';
-import { chunk } from 'lib/array';
-import { getDateLocale } from 'lib/lang';
-import Chevron from 'assets/chevron-down.svg';
-import Cross from 'assets/times.svg';
-import styles from './Calendar.module.css';
-import Icon from './Icon';
-
-export default function Calendar({ date, minDate, maxDate, onChange }) {
-  const { locale } = useLocale();
-  const [selectMonth, setSelectMonth] = useState(false);
-  const [selectYear, setSelectYear] = useState(false);
-
-  const month = dateFormat(date, 'MMMM', locale);
-  const year = date.getFullYear();
-
-  function toggleMonthSelect() {
-    setSelectYear(false);
-    setSelectMonth(state => !state);
-  }
-
-  function toggleYearSelect() {
-    setSelectMonth(false);
-    setSelectYear(state => !state);
-  }
-
-  function handleChange(value) {
-    setSelectMonth(false);
-    setSelectYear(false);
-    if (value) {
-      onChange(value);
-    }
-  }
-
-  return (
-    <div className={styles.calendar}>
-      <div className={styles.header}>
-        <div>{date.getDate()}</div>
-        <div
-          className={classNames(styles.selector, { [styles.open]: selectMonth })}
-          onClick={toggleMonthSelect}
-        >
-          {month}
-          <Icon className={styles.icon} icon={selectMonth ? <Cross /> : <Chevron />} size="small" />
-        </div>
-        <div
-          className={classNames(styles.selector, { [styles.open]: selectYear })}
-          onClick={toggleYearSelect}
-        >
-          {year}
-          <Icon className={styles.icon} icon={selectYear ? <Cross /> : <Chevron />} size="small" />
-        </div>
-      </div>
-      <div className={styles.body}>
-        {!selectMonth && !selectYear && (
-          <DaySelector
-            date={date}
-            minDate={minDate}
-            maxDate={maxDate}
-            locale={locale}
-            onSelect={handleChange}
-          />
-        )}
-        {selectMonth && (
-          <MonthSelector
-            date={date}
-            minDate={minDate}
-            maxDate={maxDate}
-            locale={locale}
-            onSelect={handleChange}
-            onClose={toggleMonthSelect}
-          />
-        )}
-        {selectYear && (
-          <YearSelector
-            date={date}
-            minDate={minDate}
-            maxDate={maxDate}
-            onSelect={handleChange}
-            onClose={toggleYearSelect}
-          />
-        )}
-      </div>
-    </div>
-  );
-}
-
-const DaySelector = ({ date, minDate, maxDate, locale, onSelect }) => {
-  const dateLocale = getDateLocale(locale);
-  const weekStartsOn = dateLocale?.options?.weekStartsOn || 0;
-  const startWeek = startOfWeek(date, {
-    locale: dateLocale,
-    weekStartsOn,
-  });
-  const startMonth = startOfMonth(date);
-  const startDay = subDays(startMonth, startMonth.getDay() - weekStartsOn);
-  const month = date.getMonth();
-  const year = date.getFullYear();
-
-  const daysOfWeek = [];
-  for (let i = 0; i < 7; i++) {
-    daysOfWeek.push(addDays(startWeek, i));
-  }
-
-  const days = [];
-  for (let i = 0; i < 35; i++) {
-    days.push(addDays(startDay, i));
-  }
-
-  return (
-    <table>
-      <thead>
-        <tr>
-          {daysOfWeek.map((day, i) => (
-            <th key={i} className={locale}>
-              {dateFormat(day, 'EEE', locale)}
-            </th>
-          ))}
-        </tr>
-      </thead>
-      <tbody>
-        {chunk(days, 7).map((week, i) => (
-          <tr key={i}>
-            {week.map((day, j) => {
-              const disabled = isBefore(day, minDate) || isAfter(day, maxDate);
-              return (
-                <td
-                  key={j}
-                  className={classNames({
-                    [styles.selected]: isSameDay(date, day),
-                    [styles.faded]: day.getMonth() !== month || day.getFullYear() !== year,
-                    [styles.disabled]: disabled,
-                  })}
-                  onClick={!disabled ? () => onSelect(day) : null}
-                >
-                  {day.getDate()}
-                </td>
-              );
-            })}
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  );
-};
-
-const MonthSelector = ({ date, minDate, maxDate, locale, onSelect }) => {
-  const start = startOfYear(date);
-  const months = [];
-  for (let i = 0; i < 12; i++) {
-    months.push(addMonths(start, i));
-  }
-
-  function handleSelect(value) {
-    onSelect(setMonth(date, value));
-  }
-
-  return (
-    <table>
-      <tbody>
-        {chunk(months, 3).map((row, i) => (
-          <tr key={i}>
-            {row.map((month, j) => {
-              const disabled =
-                isBefore(endOfMonth(month), minDate) || isAfter(startOfMonth(month), maxDate);
-              return (
-                <td
-                  key={j}
-                  className={classNames(locale, {
-                    [styles.selected]: month.getMonth() === date.getMonth(),
-                    [styles.disabled]: disabled,
-                  })}
-                  onClick={!disabled ? () => handleSelect(month.getMonth()) : null}
-                >
-                  {dateFormat(month, 'MMMM', locale)}
-                </td>
-              );
-            })}
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  );
-};
-
-const YearSelector = ({ date, minDate, maxDate, onSelect }) => {
-  const [currentDate, setCurrentDate] = useState(date);
-  const year = date.getFullYear();
-  const currentYear = currentDate.getFullYear();
-  const minYear = minDate.getFullYear();
-  const maxYear = maxDate.getFullYear();
-  const years = [];
-  for (let i = 0; i < 15; i++) {
-    years.push(currentYear - 7 + i);
-  }
-
-  function handleSelect(value) {
-    onSelect(setYear(date, value));
-  }
-
-  function handlePrevClick() {
-    setCurrentDate(state => subYears(state, 15));
-  }
-
-  function handleNextClick() {
-    setCurrentDate(state => addYears(state, 15));
-  }
-
-  return (
-    <div className={styles.pager}>
-      <div className={styles.left}>
-        <Button
-          icon={<Chevron />}
-          size="small"
-          onClick={handlePrevClick}
-          disabled={years[0] <= minYear}
-          variant="light"
-        />
-      </div>
-      <div className={styles.middle}>
-        <table>
-          <tbody>
-            {chunk(years, 5).map((row, i) => (
-              <tr key={i}>
-                {row.map((n, j) => (
-                  <td
-                    key={j}
-                    className={classNames({
-                      [styles.selected]: n === year,
-                      [styles.disabled]: n < minYear || n > maxYear,
-                    })}
-                    onClick={() => (n < minYear || n > maxYear ? null : handleSelect(n))}
-                  >
-                    {n}
-                  </td>
-                ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-      <div className={styles.right}>
-        <Button
-          icon={<Chevron />}
-          size="small"
-          onClick={handleNextClick}
-          disabled={years[years.length - 1] > maxYear}
-          variant="light"
-        />
-      </div>
-    </div>
-  );
-};
--- a/components/common/Calendar.module.css
+++ b/components/common/Calendar.module.css
@ -1,111 +0,0 @@
-.calendar {
-  display: flex;
-  flex-direction: column;
-  font-size: var(--font-size-small);
-  flex: 1;
-  min-height: 306px;
-}
-
-.calendar table {
-  width: 100%;
-  border-spacing: 5px;
-}
-
-.calendar td {
-  color: var(--gray800);
-  cursor: pointer;
-  text-align: center;
-  vertical-align: center;
-  height: 40px;
-  width: 40px;
-  border-radius: 5px;
-  border: 1px solid transparent;
-}
-
-.calendar td:hover {
-  border: 1px solid var(--gray300);
-  background: var(--gray75);
-}
-
-.calendar td.faded {
-  color: var(--gray500);
-}
-
-.calendar td.selected {
-  font-weight: 600;
-  border: 1px solid var(--gray600);
-}
-
-.calendar td.selected:hover {
-  background: transparent;
-}
-
-.calendar td.disabled {
-  color: var(--gray400);
-  background: var(--gray75);
-}
-
-.calendar td.disabled:hover {
-  cursor: default;
-  background: var(--gray75);
-  border-color: transparent;
-}
-
-.calendar td.faded.disabled {
-  background: var(--gray100);
-}
-
-.header {
-  display: flex;
-  justify-content: space-evenly;
-  align-items: center;
-  font-weight: 700;
-  line-height: 40px;
-  font-size: var(--font-size-normal);
-}
-
-.body {
-  display: flex;
-}
-
-.selector {
-  cursor: pointer;
-}
-
-.pager {
-  display: flex;
-  flex: 1;
-}
-
-.pager button {
-  align-self: center;
-}
-
-.middle {
-  flex: 1;
-}
-
-.left,
-.right {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.left svg {
-  transform: rotate(90deg);
-}
-
-.right svg {
-  transform: rotate(-90deg);
-}
-
-.icon {
-  margin-left: 10px;
-}
-
-@media only screen and (max-width: 992px) {
-  .calendar table {
-    max-width: calc(100vw - 30px);
-  }
-}
--- a/components/common/Checkbox.js
+++ b/components/common/Checkbox.js
@ -1,39 +0,0 @@
-import React, { useRef } from 'react';
-import PropTypes from 'prop-types';
-import Icon from 'components/common/Icon';
-import Check from 'assets/check.svg';
-import styles from './Checkbox.module.css';
-
-function Checkbox({ name, value, label, onChange }) {
-  const ref = useRef();
-
-  const onClick = () => ref.current.click();
-
-  return (
-    <div className={styles.container}>
-      <div className={styles.checkbox} onClick={onClick}>
-        {value && <Icon icon={<Check />} size="small" />}
-      </div>
-      <label className={styles.label} htmlFor={name} onClick={onClick}>
-        {label}
-      </label>
-      <input
-        ref={ref}
-        className={styles.input}
-        type="checkbox"
-        name={name}
-        defaultChecked={value}
-        onChange={onChange}
-      />
-    </div>
-  );
-}
-
-Checkbox.propTypes = {
-  name: PropTypes.string,
-  value: PropTypes.any,
-  label: PropTypes.node,
-  onChange: PropTypes.func,
-};
-
-export default Checkbox;
--- a/components/common/Checkbox.module.css
+++ b/components/common/Checkbox.module.css
@ -1,30 +0,0 @@
-.container {
-  display: flex;
-  align-items: center;
-  position: relative;
-  overflow: hidden;
-}
-
-.checkbox {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 20px;
-  height: 20px;
-  border: 1px solid var(--gray500);
-  border-radius: 4px;
-}
-
-.label {
-  margin-left: 10px;
-  user-select: none; /* disable text selection when clicking to toggle the checkbox */
-}
-
-.input {
-  position: absolute;
-  visibility: hidden;
-  height: 0;
-  width: 0;
-  bottom: 100%;
-  right: 100%;
-}
--- a/components/common/CopyButton.js
+++ b/components/common/CopyButton.js
@ -1,37 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import Button from './Button';
-import { FormattedMessage } from 'react-intl';
-
-const defaultText = (
-  <FormattedMessage id="label.copy-to-clipboard" defaultMessage="Copy to clipboard" />
-);
-
-function CopyButton({ element, ...props }) {
-  const [text, setText] = useState(defaultText);
-
-  function handleClick() {
-    if (element?.current) {
-      element.current.select();
-      document.execCommand('copy');
-      setText(<FormattedMessage id="message.copied" defaultMessage="Copied!" />);
-      window.getSelection().removeAllRanges();
-    }
-  }
-
-  return (
-    <Button {...props} onClick={handleClick}>
-      {text}
-    </Button>
-  );
-}
-
-CopyButton.propTypes = {
-  element: PropTypes.shape({
-    current: PropTypes.shape({
-      select: PropTypes.func.isRequired,
-    }),
-  }),
-};
-
-export default CopyButton;
--- a/components/common/DateFilter.js
+++ b/components/common/DateFilter.js
@ -1,138 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import { endOfYear, isSameDay } from 'date-fns';
-import Modal from './Modal';
-import DropDown from './DropDown';
-import DatePickerForm from 'components/forms/DatePickerForm';
-import useLocale from 'hooks/useLocale';
-import { dateFormat } from 'lib/date';
-import Calendar from 'assets/calendar-alt.svg';
-import Icon from './Icon';
-
-export const filterOptions = [
-  { label: <FormattedMessage id="label.today" defaultMessage="Today" />, value: '1day' },
-  {
-    label: (
-      <FormattedMessage id="label.last-hours" defaultMessage="Last {x} hours" values={{ x: 24 }} />
-    ),
-    value: '24hour',
-  },
-  {
-    label: <FormattedMessage id="label.yesterday" defaultMessage="Yesterday" />,
-    value: '-1day',
-  },
-  {
-    label: <FormattedMessage id="label.this-week" defaultMessage="This week" />,
-    value: '1week',
-    divider: true,
-  },
-  {
-    label: (
-      <FormattedMessage id="label.last-days" defaultMessage="Last {x} days" values={{ x: 7 }} />
-    ),
-    value: '7day',
-  },
-  {
-    label: <FormattedMessage id="label.this-month" defaultMessage="This month" />,
-    value: '1month',
-    divider: true,
-  },
-  {
-    label: (
-      <FormattedMessage id="label.last-days" defaultMessage="Last {x} days" values={{ x: 30 }} />
-    ),
-    value: '30day',
-  },
-  {
-    label: (
-      <FormattedMessage id="label.last-days" defaultMessage="Last {x} days" values={{ x: 90 }} />
-    ),
-    value: '90day',
-  },
-  { label: <FormattedMessage id="label.this-year" defaultMessage="This year" />, value: '1year' },
-  {
-    label: <FormattedMessage id="label.all-time" defaultMessage="All time" />,
-    value: 'all',
-    divider: true,
-  },
-  {
-    label: <FormattedMessage id="label.custom-range" defaultMessage="Custom range" />,
-    value: 'custom',
-    divider: true,
-  },
-];
-
-function DateFilter({ value, startDate, endDate, onChange, className, options }) {
-  const [showPicker, setShowPicker] = useState(false);
-  const displayValue =
-    value === 'custom' ? (
-      <CustomRange startDate={startDate} endDate={endDate} onClick={() => handleChange('custom')} />
-    ) : (
-      value
-    );
-
-  async function handleChange(value) {
-    if (value === 'custom') {
-      setShowPicker(true);
-      return;
-    }
-    onChange(value);
-  }
-
-  function handlePickerChange(value) {
-    setShowPicker(false);
-    onChange(value);
-  }
-
-  return (
-    <>
-      <DropDown
-        className={className}
-        value={displayValue}
-        options={options || filterOptions}
-        onChange={handleChange}
-      />
-      {showPicker && (
-        <Modal>
-          <DatePickerForm
-            startDate={startDate}
-            endDate={endDate}
-            minDate={new Date(2000, 0, 1)}
-            maxDate={endOfYear(new Date())}
-            onChange={handlePickerChange}
-            onClose={() => setShowPicker(false)}
-          />
-        </Modal>
-      )}
-    </>
-  );
-}
-
-const CustomRange = ({ startDate, endDate, onClick }) => {
-  const { locale } = useLocale();
-
-  function handleClick(e) {
-    e.stopPropagation();
-
-    onClick();
-  }
-
-  return (
-    <>
-      <Icon icon={<Calendar />} className="mr-2" onClick={handleClick} />
-      {dateFormat(startDate, 'd LLL y', locale)}
-      {!isSameDay(startDate, endDate) && ` — ${dateFormat(endDate, 'd LLL y', locale)}`}
-    </>
-  );
-};
-
-DateFilter.propTypes = {
-  value: PropTypes.string,
-  startDate: PropTypes.instanceOf(Date),
-  endDate: PropTypes.instanceOf(Date),
-  onChange: PropTypes.func,
-  className: PropTypes.string,
-};
-
-export default DateFilter;
--- a/components/common/Dot.js
+++ b/components/common/Dot.js
@ -1,26 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import styles from './Dot.module.css';
-
-function Dot({ color, size, className }) {
-  return (
-    <div className={styles.wrapper}>
-      <div
-        style={{ background: color }}
-        className={classNames(styles.dot, className, {
-          [styles.small]: size === 'small',
-          [styles.large]: size === 'large',
-        })}
-      />
-    </div>
-  );
-}
-
-Dot.propTypes = {
-  color: PropTypes.string,
-  size: PropTypes.oneOf(['small', 'large']),
-  className: PropTypes.string,
-};
-
-export default Dot;
--- a/components/common/Dot.module.css
+++ b/components/common/Dot.module.css
@ -1,22 +0,0 @@
-.wrapper {
-  background: var(--gray50);
-  margin-right: 10px;
-  border-radius: 100%;
-}
-
-.dot {
-  background: var(--green400);
-  width: 10px;
-  height: 10px;
-  border-radius: 100%;
-}
-
-.dot.small {
-  width: 8px;
-  height: 8px;
-}
-
-.dot.large {
-  width: 16px;
-  height: 16px;
-}
--- a/components/common/DropDown.js
+++ b/components/common/DropDown.js
@ -1,64 +0,0 @@
-import React, { useState, useRef } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import Menu from './Menu';
-import useDocumentClick from 'hooks/useDocumentClick';
-import Chevron from 'assets/chevron-down.svg';
-import styles from './Dropdown.module.css';
-import Icon from './Icon';
-
-function DropDown({ value, className, menuClassName, options = [], onChange = () => {} }) {
-  const [showMenu, setShowMenu] = useState(false);
-  const ref = useRef();
-  const selectedOption = options.find(e => e.value === value);
-
-  function handleShowMenu() {
-    setShowMenu(state => !state);
-  }
-
-  function handleSelect(selected, e) {
-    e.stopPropagation();
-    setShowMenu(false);
-
-    onChange(selected);
-  }
-
-  useDocumentClick(e => {
-    if (!ref.current?.contains(e.target)) {
-      setShowMenu(false);
-    }
-  });
-
-  return (
-    <div ref={ref} className={classNames(styles.dropdown, className)} onClick={handleShowMenu}>
-      <div className={styles.value}>
-        <div className={styles.text}>{options.find(e => e.value === value)?.label || value}</div>
-        <Icon icon={<Chevron />} className={styles.icon} size="small" />
-      </div>
-      {showMenu && (
-        <Menu
-          className={menuClassName}
-          options={options}
-          selectedOption={selectedOption}
-          onSelect={handleSelect}
-          float="bottom"
-        />
-      )}
-    </div>
-  );
-}
-
-DropDown.propTypes = {
-  value: PropTypes.any,
-  className: PropTypes.string,
-  menuClassName: PropTypes.string,
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.any.isRequired,
-      label: PropTypes.node,
-    }),
-  ),
-  onChange: PropTypes.func,
-};
-
-export default DropDown;
--- a/components/common/Dropdown.module.css
+++ b/components/common/Dropdown.module.css
@ -1,28 +0,0 @@
-.dropdown {
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border: 1px solid var(--gray500);
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.value {
-  flex: 1;
-  display: flex;
-  justify-content: space-between;
-  font-size: var(--font-size-small);
-  flex-wrap: nowrap;
-  white-space: nowrap;
-  padding: 4px 16px;
-  min-width: 160px;
-}
-
-.text {
-  flex: 1;
-}
-
-.icon {
-  padding-left: 20px;
-}
--- a/components/common/EmptyPlaceholder.js
+++ b/components/common/EmptyPlaceholder.js
@ -1,22 +1,16 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Icon from 'components/common/Icon';
+import { Icon, Text, Flexbox } from 'react-basics';
 import Logo from 'assets/logo.svg';
-import styles from './EmptyPlaceholder.module.css';

-function EmptyPlaceholder({ msg, children }) {
+export function EmptyPlaceholder({ message, children }) {
  return (
-    <div className={styles.placeholder}>
-      <Icon className={styles.icon} icon={<Logo />} size="xlarge" />
-      <h2 className={styles.msg}>{msg}</h2>
-      {children}
-    </div>
+    <Flexbox direction="column" alignItems="center" justifyContent="center" gap={60} height={600}>
+      <Icon size="xl">
+        <Logo />
+      </Icon>
+      <Text size="lg">{message}</Text>
+      <div>{children}</div>
+    </Flexbox>
  );
 }

-EmptyPlaceholder.propTypes = {
-  msg: PropTypes.node,
-  children: PropTypes.node,
-};
-
 export default EmptyPlaceholder;
--- a/components/common/EmptyPlaceholder.module.css
+++ b/components/common/EmptyPlaceholder.module.css
@ -1,15 +0,0 @@
-.placeholder {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  min-height: 600px;
-}
-
-.icon {
-  margin-bottom: 30px;
-}
-
-.msg {
-  margin-bottom: 15px;
-}
--- a/components/common/ErrorBoundary.js
+++ b/components/common/ErrorBoundary.js
@ -0,0 +1,33 @@
+/* eslint-disable no-console */
+import { ErrorBoundary as Boundary } from 'react-error-boundary';
+import { Button } from 'react-basics';
+import useMessages from 'hooks/useMessages';
+import styles from './ErrorBoundry.module.css';
+
+const logError = (error, info) => {
+  console.error(error, info.componentStack);
+};
+
+export function ErrorBoundary({ children }) {
+  const { formatMessage, messages } = useMessages();
+
+  const fallbackRender = ({ error, resetErrorBoundary }) => {
+    console.log({ error });
+    return (
+      <div className={styles.error} role="alert">
+        <h1>{formatMessage(messages.error)}</h1>
+        <h3>{error.message}</h3>
+        <pre>{error.stack}</pre>
+        <Button onClick={resetErrorBoundary}>OK</Button>
+      </div>
+    );
+  };
+
+  return (
+    <Boundary fallbackRender={fallbackRender} onError={logError}>
+      {children}
+    </Boundary>
+  );
+}
+
+export default ErrorBoundary;
--- a/components/common/ErrorBoundry.module.css
+++ b/components/common/ErrorBoundry.module.css
@ -0,0 +1,19 @@
+.error {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  z-index: var(--z-index-overlay);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 600px;
+  gap: 20px;
+}
+
+.error button {
+  align-self: center;
+}
--- a/components/common/ErrorMessage.js
+++ b/components/common/ErrorMessage.js
@ -1,14 +1,18 @@
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-import Icon from './Icon';
-import Exclamation from 'assets/exclamation-triangle.svg';
+import { Icon, Icons, Text } from 'react-basics';
 import styles from './ErrorMessage.module.css';
+import useMessages from 'hooks/useMessages';
+
+export function ErrorMessage() {
+  const { formatMessage, messages } = useMessages();

-export default function ErrorMessage() {
  return (
    <div className={styles.error}>
-      <Icon icon={<Exclamation />} className={styles.icon} size="large" />
-      <FormattedMessage id="message.failure" defaultMessage="Something went wrong." />
+      <Icon className={styles.icon} size="large">
+        <Icons.Alert />
+      </Icon>
+      <Text>{formatMessage(messages.error)}</Text>
    </div>
  );
 }
+
+export default ErrorMessage;
--- a/components/common/ErrorMessage.module.css
+++ b/components/common/ErrorMessage.module.css
@ -5,9 +5,9 @@
  transform: translate(-50%, -50%);
  margin: auto;
  display: flex;
-  z-index: 1;
-  background-color: var(--gray50);
+  background-color: var(--base50);
  padding: 10px;
+  z-index: 1;
 }

 .icon {
--- a/components/common/EventDataButton.js
+++ b/components/common/EventDataButton.js
@ -1,48 +0,0 @@
-import List from 'assets/list-ul.svg';
-import Modal from 'components/common/Modal';
-import PropTypes from 'prop-types';
-import { useState } from 'react';
-import { FormattedMessage } from 'react-intl';
-import Button from './Button';
-import EventDataForm from 'components/forms/EventDataForm';
-import styles from './EventDataButton.module.css';
-
-function EventDataButton({ websiteId }) {
-  const [showEventData, setShowEventData] = useState(false);
-
-  function handleClick() {
-    if (!showEventData) {
-      setShowEventData(true);
-    }
-  }
-
-  function handleClose() {
-    setShowEventData(false);
-  }
-
-  return (
-    <>
-      <Button
-        icon={<List />}
-        tooltip={<FormattedMessage id="label.event-data" defaultMessage="Event" />}
-        tooltipId="button-event"
-        size="small"
-        onClick={handleClick}
-        className={styles.button}
-      >
-        Event Data
-      </Button>
-      {showEventData && (
-        <Modal title={<FormattedMessage id="label.event-data" defaultMessage="Query Event Data" />}>
-          <EventDataForm websiteId={websiteId} onClose={handleClose} />
-        </Modal>
-      )}
-    </>
-  );
-}
-
-EventDataButton.propTypes = {
-  websiteId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-};
-
-export default EventDataButton;
--- a/components/common/EventDataButton.module.css
+++ b/components/common/EventDataButton.module.css
@ -1,3 +0,0 @@
-.button {
-  width: fit-content;
-}
--- a/components/common/Favicon.js
+++ b/components/common/Favicon.js
@ -1,5 +1,3 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import styles from './Favicon.module.css';

 function getHostName(url) {
@ -7,7 +5,7 @@ function getHostName(url) {
  return match && match.length > 1 ? match[1] : null;
 }

-function Favicon({ domain, ...props }) {
+export function Favicon({ domain, ...props }) {
  const hostName = domain ? getHostName(domain) : null;

  return hostName ? (
@ -21,8 +19,4 @@ function Favicon({ domain, ...props }) {
  ) : null;
 }

-Favicon.propTypes = {
-  domain: PropTypes.string,
-};
-
 export default Favicon;
--- a/components/common/Favicon.module.css
+++ b/components/common/Favicon.module.css
@ -1,3 +1,3 @@
 .favicon {
-  margin-right: 8px;
+  margin-inline-end: 8px;
 }
--- a/components/common/FilterButtons.js
+++ b/components/common/FilterButtons.js
@ -1,25 +1,13 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ButtonLayout from 'components/layout/ButtonLayout';
-import ButtonGroup from './ButtonGroup';
+import { ButtonGroup, Button, Flexbox } from 'react-basics';

-function FilterButtons({ buttons, selected, onClick }) {
+export function FilterButtons({ items, selectedKey, onSelect }) {
  return (
-    <ButtonLayout>
-      <ButtonGroup size="xsmall" items={buttons} selectedItem={selected} onClick={onClick} />
-    </ButtonLayout>
+    <Flexbox justifyContent="center">
+      <ButtonGroup items={items} selectedKey={selectedKey} onSelect={onSelect}>
+        {({ key, label }) => <Button key={key}>{label}</Button>}
+      </ButtonGroup>
+    </Flexbox>
  );
 }

-FilterButtons.propTypes = {
-  buttons: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.node,
-      value: PropTypes.any.isRequired,
-    }),
-  ),
-  selected: PropTypes.any,
-  onClick: PropTypes.func,
-};
-
 export default FilterButtons;
--- a/components/common/FilterLink.js
+++ b/components/common/FilterLink.js
@ -1,34 +1,40 @@
-import React from 'react';
+import { Icon, Icons } from 'react-basics';
 import classNames from 'classnames';
 import Link from 'next/link';
 import { safeDecodeURI } from 'next-basics';
 import usePageQuery from 'hooks/usePageQuery';
-import External from 'assets/arrow-up-right-from-square.svg';
-import Icon from './Icon';
+import useMessages from 'hooks/useMessages';
 import styles from './FilterLink.module.css';

-export default function FilterLink({ id, value, label, externalUrl }) {
-  const { resolve, query } = usePageQuery();
+export function FilterLink({ id, value, label, externalUrl, children, className }) {
+  const { formatMessage, labels } = useMessages();
+  const { resolveUrl, query } = usePageQuery();
  const active = query[id] !== undefined;
  const selected = query[id] === value;

  return (
-    <div className={styles.row}>
-      <Link href={resolve({ [id]: value })} replace>
-        <a
-          className={classNames(styles.label, {
-            [styles.inactive]: active && !selected,
-            [styles.active]: active && selected,
-          })}
-        >
+    <div
+      className={classNames(styles.row, className, {
+        [styles.inactive]: active && !selected,
+        [styles.active]: active && selected,
+      })}
+    >
+      {children}
+      {!value && `(${label || formatMessage(labels.unknown)})`}
+      {value && (
+        <Link href={resolveUrl({ [id]: value })} className={styles.label} replace>
          {safeDecodeURI(label || value)}
-        </a>
-      </Link>
+        </Link>
+      )}
      {externalUrl && (
        <a className={styles.link} href={externalUrl} target="_blank" rel="noreferrer noopener">
-          <Icon icon={<External />} className={styles.icon} />
+          <Icon className={styles.icon}>
+            <Icons.External />
+          </Icon>
        </a>
      )}
    </div>
  );
 }
+
+export default FilterLink;
--- a/components/common/FilterLink.module.css
+++ b/components/common/FilterLink.module.css
@ -1,20 +1,25 @@
 .row {
  display: flex;
  align-items: center;
+  gap: 10px;
 }

-.row .inactive {
-  color: var(--gray500);
+.row.inactive {
+  color: var(--base500);
 }

-.row .active {
-  color: var(--gray900);
+.row.inactive img {
+  opacity: 0.35;
+}
+
+.row.active {
+  color: var(--base900);
  font-weight: 600;
 }

 .row .link {
  display: none;
-  margin-left: 20px;
+  margin-inline-start: 20px;
 }

 .row .label {
--- a/components/common/HamburgerButton.js
+++ b/components/common/HamburgerButton.js
@ -1,44 +1,61 @@
-import Button from 'components/common/Button';
-import XMark from 'assets/xmark.svg';
-import Bars from 'assets/bars.svg';
+import { Button, Icon } from 'react-basics';
 import { useState } from 'react';
-import styles from './HamburgerButton.module.css';
 import MobileMenu from './MobileMenu';
-import { FormattedMessage } from 'react-intl';
+import Icons from 'components/icons';
+import useMessages from 'hooks/useMessages';
+import useConfig from 'hooks/useConfig';

-const menuItems = [
-  {
-    label: <FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />,
-    value: '/dashboard',
-  },
-  { label: <FormattedMessage id="label.realtime" defaultMessage="Realtime" />, value: '/realtime' },
-  { label: <FormattedMessage id="label.settings" defaultMessage="Settings" />, value: '/settings' },
-  {
-    label: <FormattedMessage id="label.profile" defaultMessage="Profile" />,
-    value: '/settings/profile',
-  },
-  { label: <FormattedMessage id="label.logout" defaultMessage="Logout" />, value: '/logout' },
-];
-
-export default function HamburgerButton() {
+export function HamburgerButton() {
+  const { formatMessage, labels } = useMessages();
  const [active, setActive] = useState(false);
+  const { cloudMode } = useConfig();

-  function handleClick() {
-    setActive(state => !state);
-  }
+  const menuItems = [
+    {
+      label: formatMessage(labels.dashboard),
+      url: '/dashboard',
+    },
+    { label: formatMessage(labels.realtime), url: '/realtime' },
+    !cloudMode && {
+      label: formatMessage(labels.settings),
+      url: '/settings',
+      children: [
+        {
+          label: formatMessage(labels.websites),
+          url: '/settings/websites',
+        },
+        {
+          label: formatMessage(labels.teams),
+          url: '/settings/teams',
+        },
+        {
+          label: formatMessage(labels.users),
+          url: '/settings/users',
+        },
+        {
+          label: formatMessage(labels.profile),
+          url: '/settings/profile',
+        },
+      ],
+    },
+    cloudMode && {
+      label: formatMessage(labels.profile),
+      url: '/settings/profile',
+    },
+    !cloudMode && { label: formatMessage(labels.logout), url: '/logout' },
+  ].filter(n => n);

-  function handleClose() {
-    setActive(false);
-  }
+  const handleClick = () => setActive(state => !state);
+  const handleClose = () => setActive(false);

  return (
    <>
-      <Button
-        className={styles.button}
-        icon={active ? <XMark /> : <Bars />}
-        onClick={handleClick}
-      />
+      <Button variant="quiet" onClick={handleClick}>
+        <Icon>{active ? <Icons.Close /> : <Icons.Menu />}</Icon>
+      </Button>
      {active && <MobileMenu items={menuItems} onClose={handleClose} />}
    </>
  );
 }
+
+export default HamburgerButton;
--- a/components/common/HoverTooltip.js
+++ b/components/common/HoverTooltip.js
@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+import { Tooltip } from 'react-basics';
+import styles from './HoverTooltip.module.css';
+
+export function HoverTooltip({ tooltip }) {
+  const [position, setPosition] = useState({ x: -1000, y: -1000 });
+
+  useEffect(() => {
+    const handler = e => {
+      setPosition({ x: e.clientX, y: e.clientY });
+    };
+
+    document.addEventListener('mousemove', handler);
+
+    return () => {
+      document.removeEventListener('mousemove', handler);
+    };
+  }, []);
+
+  return (
+    <div className={styles.tooltip} style={{ left: position.x, top: position.y }}>
+      <Tooltip position="top" action="none" label={tooltip} />
+    </div>
+  );
+}
+
+export default HoverTooltip;
--- a/components/metrics/ChartTooltip.module.css
+++ b/components/metrics/ChartTooltip.module.css
@ -3,9 +3,9 @@
 }

 .tooltip {
-  color: var(--msgColor);
+  position: fixed;
  pointer-events: none;
-  z-index: 1;
+  z-index: var(--z-index-popup);
 }

 .content {
@ -17,7 +17,7 @@
 }

 .title {
-  font-size: var(--font-size-xsmall);
+  font-size: var(--font-size-xs);
  font-weight: 600;
 }

@ -25,7 +25,7 @@
  display: flex;
  justify-content: center;
  align-items: center;
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-sm);
  font-weight: 600;
 }

@ -34,7 +34,7 @@
  overflow: hidden;
  border-radius: 100%;
  margin-right: 8px;
-  background: var(--gray50);
+  background: var(--base50);
 }

 .color {
--- a/components/common/Icon.js
+++ b/components/common/Icon.js
@ -1,29 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import styles from './Icon.module.css';
-
-function Icon({ icon, className, size = 'medium', ...props }) {
-  return (
-    <div
-      className={classNames(styles.icon, className, {
-        [styles.xlarge]: size === 'xlarge',
-        [styles.large]: size === 'large',
-        [styles.medium]: size === 'medium',
-        [styles.small]: size === 'small',
-        [styles.xsmall]: size === 'xsmall',
-      })}
-      {...props}
-    >
-      {icon}
-    </div>
-  );
-}
-
-Icon.propTypes = {
-  className: PropTypes.string,
-  icon: PropTypes.node.isRequired,
-  size: PropTypes.oneOf(['xlarge', 'large', 'medium', 'small', 'xsmall']),
-};
-
-export default Icon;
--- a/components/common/Icon.module.css
+++ b/components/common/Icon.module.css
@ -1,35 +0,0 @@
-.icon {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  vertical-align: middle;
-}
-
-.icon svg {
-  fill: currentColor;
-}
-
-.xlarge > svg {
-  width: 48px;
-  height: 48px;
-}
-
-.large > svg {
-  width: 24px;
-  height: 24px;
-}
-
-.medium > svg {
-  width: 16px;
-  height: 16px;
-}
-
-.small > svg {
-  width: 12px;
-  height: 12px;
-}
-
-.xsmall > svg {
-  width: 10px;
-  height: 10px;
-}
--- a/components/common/Link.js
+++ b/components/common/Link.js
@ -1,35 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import NextLink from 'next/link';
-import Icon from './Icon';
-import styles from './Link.module.css';
-
-function Link({ className, icon, children, size, iconRight, onClick, ...props }) {
-  return (
-    <NextLink {...props}>
-      <a
-        className={classNames(styles.link, className, {
-          [styles.large]: size === 'large',
-          [styles.small]: size === 'small',
-          [styles.xsmall]: size === 'xsmall',
-          [styles.iconRight]: iconRight,
-        })}
-        onClick={onClick}
-      >
-        {icon && <Icon className={styles.icon} icon={icon} size={size} />}
-        {children}
-      </a>
-    </NextLink>
-  );
-}
-
-Link.propTypes = {
-  className: PropTypes.string,
-  icon: PropTypes.node,
-  children: PropTypes.node,
-  size: PropTypes.oneOf(['large', 'small', 'xsmall']),
-  iconRight: PropTypes.bool,
-};
-
-export default Link;
--- a/components/common/Link.module.css
+++ b/components/common/Link.module.css
@ -1,42 +0,0 @@
-a.link,
-a.link:active,
-a.link:visited {
-  position: relative;
-  color: var(--gray900);
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-}
-
-a.link span {
-  border-bottom: 2px solid transparent;
-}
-
-a.link:hover span {
-  border-bottom: 2px solid var(--primary400);
-}
-
-a.link.large {
-  font-size: var(--font-size-large);
-}
-
-a.link.small {
-  font-size: var(--font-size-small);
-}
-
-a.link.xsmall {
-  font-size: var(--font-size-xsmall);
-}
-
-a.link .icon + * {
-  margin-left: 10px;
-}
-
-a.link.iconRight .icon {
-  order: 1;
-  margin-left: 10px;
-}
-
-a.link.iconRight .icon + * {
-  margin: 0;
-}
--- a/components/common/Loading.js
+++ b/components/common/Loading.js
@ -1,21 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import styles from './Loading.module.css';
-
-function Loading({ className, overlay = false }) {
-  return (
-    <div className={classNames(styles.loading, { [styles.overlay]: overlay }, className)}>
-      <div />
-      <div />
-      <div />
-    </div>
-  );
-}
-
-Loading.propTypes = {
-  className: PropTypes.string,
-  overlay: PropTypes.bool,
-};
-
-export default Loading;
--- a/components/common/Loading.module.css
+++ b/components/common/Loading.module.css
@ -1,55 +0,0 @@
-@keyframes blink {
-  0% {
-    opacity: 0.2;
-  }
-  20% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.2;
-  }
-}
-
-.loading {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  margin: 0;
-}
-
-.loading.overlay {
-  height: 100%;
-  width: 100%;
-  z-index: 10;
-  background: var(--gray400);
-  opacity: 0.4;
-}
-
-.loading div {
-  width: 10px;
-  height: 10px;
-  border-radius: 100%;
-  background: var(--gray400);
-  animation: blink 1.4s infinite;
-  animation-fill-mode: both;
-}
-
-.loading.overlay div {
-  background: var(--gray900);
-}
-
-.loading div + div {
-  margin-left: 10px;
-}
-
-.loading div:nth-child(2) {
-  animation-delay: 0.2s;
-}
-
-.loading div:nth-child(3) {
-  animation-delay: 0.4s;
-}
--- a/components/common/Menu.js
+++ b/components/common/Menu.js
@ -1,70 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import styles from './Menu.module.css';
-
-function Menu({
-  options = [],
-  selectedOption,
-  className,
-  float,
-  align = 'left',
-  optionClassName,
-  selectedClassName,
-  onSelect = () => {},
-}) {
-  return (
-    <div
-      className={classNames(styles.menu, className, {
-        [styles.float]: float,
-        [styles.top]: float === 'top',
-        [styles.bottom]: float === 'bottom',
-        [styles.left]: align === 'left',
-        [styles.right]: align === 'right',
-      })}
-    >
-      {options
-        .filter(({ hidden }) => !hidden)
-        .map(option => {
-          const { label, value, className: customClassName, render, divider } = option;
-
-          return render ? (
-            render(option)
-          ) : (
-            <div
-              key={value}
-              className={classNames(styles.option, optionClassName, customClassName, {
-                [selectedClassName]: selectedOption === option,
-                [styles.selected]: selectedOption === option,
-                [styles.divider]: divider,
-              })}
-              onClick={e => onSelect(value, e)}
-            >
-              {label}
-            </div>
-          );
-        })}
-    </div>
-  );
-}
-
-Menu.propTypes = {
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.node,
-      value: PropTypes.any,
-      className: PropTypes.string,
-      render: PropTypes.func,
-      divider: PropTypes.bool,
-    }),
-  ),
-  selectedOption: PropTypes.any,
-  className: PropTypes.string,
-  float: PropTypes.oneOf(['top', 'bottom']),
-  align: PropTypes.oneOf(['left', 'right']),
-  optionClassName: PropTypes.string,
-  selectedClassName: PropTypes.string,
-  onSelect: PropTypes.func,
-};
-
-export default Menu;
--- a/components/common/Menu.module.css
+++ b/components/common/Menu.module.css
@ -1,51 +0,0 @@
-.menu {
-  background: var(--gray50);
-  border: 1px solid var(--gray500);
-  border-radius: 4px;
-  overflow: hidden;
-  z-index: 100;
-}
-
-.option {
-  font-size: var(--font-size-small);
-  font-weight: normal;
-  background: var(--gray50);
-  padding: 4px 16px;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.option:hover {
-  background: var(--gray100);
-}
-
-.float {
-  position: absolute;
-  min-width: 100px;
-}
-
-.top {
-  bottom: 100%;
-  margin-bottom: 5px;
-}
-
-.bottom {
-  top: 100%;
-  margin-top: 5px;
-}
-
-.left {
-  left: 0;
-}
-
-.right {
-  right: 0;
-}
-
-.divider {
-  border-top: 1px solid var(--gray300);
-}
-
-.selected {
-  font-weight: 600;
-}
--- a/components/common/MenuButton.js
+++ b/components/common/MenuButton.js
@ -1,87 +0,0 @@
-import React, { useState, useRef } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import Menu from 'components/common/Menu';
-import Button from 'components/common/Button';
-import useDocumentClick from 'hooks/useDocumentClick';
-import styles from './MenuButton.module.css';
-
-function MenuButton({
-  icon,
-  value,
-  options,
-  buttonClassName,
-  buttonVariant,
-  menuClassName,
-  menuPosition = 'bottom',
-  menuAlign = 'right',
-  onSelect,
-  renderValue,
-  hideLabel,
-}) {
-  const [showMenu, setShowMenu] = useState(false);
-  const ref = useRef();
-  const selectedOption = options.find(e => e.value === value);
-
-  function handleSelect(value) {
-    onSelect(value);
-    setShowMenu(false);
-  }
-
-  function toggleMenu() {
-    setShowMenu(state => !state);
-  }
-
-  useDocumentClick(e => {
-    if (!ref.current?.contains(e.target)) {
-      setShowMenu(false);
-    }
-  });
-
-  return (
-    <div className={styles.container} ref={ref}>
-      <Button
-        icon={icon}
-        className={classNames(styles.button, buttonClassName, { [styles.open]: showMenu })}
-        onClick={toggleMenu}
-        variant={buttonVariant}
-      >
-        {!hideLabel && (
-          <div className={styles.text}>{renderValue ? renderValue(selectedOption) : value}</div>
-        )}
-      </Button>
-      {showMenu && (
-        <Menu
-          className={menuClassName}
-          options={options}
-          selectedOption={selectedOption}
-          onSelect={handleSelect}
-          float={menuPosition}
-          align={menuAlign}
-        />
-      )}
-    </div>
-  );
-}
-
-MenuButton.propTypes = {
-  icon: PropTypes.node,
-  value: PropTypes.any,
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.node,
-      value: PropTypes.any,
-      className: PropTypes.string,
-      render: PropTypes.func,
-      divider: PropTypes.bool,
-    }),
-  ),
-  buttonClassName: PropTypes.string,
-  menuClassName: PropTypes.string,
-  menuPosition: PropTypes.oneOf(['top', 'bottom']),
-  menuAlign: PropTypes.oneOf(['left', 'right']),
-  onSelect: PropTypes.func,
-  renderValue: PropTypes.func,
-};
-
-export default MenuButton;
--- a/components/common/MenuButton.module.css
+++ b/components/common/MenuButton.module.css
@ -1,20 +0,0 @@
-.container {
-  display: flex;
-  position: relative;
-  cursor: pointer;
-}
-
-.button {
-  border: 1px solid transparent;
-  border-radius: 4px;
-}
-
-.text {
-  font-size: var(--font-size-small);
-}
-
-.open,
-.open:hover {
-  background: var(--gray50);
-  border: 1px solid var(--gray500);
-}
--- a/components/common/MobileMenu.js
+++ b/components/common/MobileMenu.js
@ -1,22 +1,38 @@
 import classNames from 'classnames';
-import Link from './Link';
-import Button from './Button';
-import XMark from 'assets/xmark.svg';
+import { useRouter } from 'next/router';
+import Link from 'next/link';
 import styles from './MobileMenu.module.css';

-export default function MobileMenu({ items = [], onClose }) {
+export function MobileMenu({ items = [], onClose }) {
+  const { pathname } = useRouter();
+
+  const Items = ({ items, className }) => (
+    <div className={classNames(styles.items, className)}>
+      {items.map(({ label, url, children }) => {
+        const selected = pathname.startsWith(url);
+
+        return (
+          <>
+            <Link
+              key={url}
+              href={url}
+              className={classNames(styles.item, { [styles.selected]: selected })}
+              onClick={onClose}
+            >
+              {label}
+            </Link>
+            {children && <Items items={children} className={styles.submenu} />}
+          </>
+        );
+      })}
+    </div>
+  );
+
  return (
-    <div className={classNames(styles.menu, 'container')}>
-      <div className={styles.header}>
-        <Button icon={<XMark />} onClick={onClose} />
-      </div>
-      <div className={styles.items}>
-        {items.map(({ label, value }) => (
-          <Link key={value} href={value} className={styles.item} onClick={onClose}>
-            {label}
-          </Link>
-        ))}
-      </div>
+    <div className={classNames(styles.menu)}>
+      <Items items={items} />
    </div>
  );
 }
+
+export default MobileMenu;
--- a/components/common/MobileMenu.module.css
+++ b/components/common/MobileMenu.module.css
@ -1,41 +1,39 @@
 .menu {
  position: fixed;
-  top: 0;
+  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
-  z-index: 100;
  display: flex;
  flex-direction: column;
-  background-color: var(--gray50);
+  background-color: var(--base50);
+  z-index: var(--z-index-popup);
  overflow: auto;
 }

 .items {
-  flex: 1;
  display: flex;
  flex-direction: column;
-  justify-content: center;
-  align-items: center;
 }

 .item {
-  font-size: var(--font-size-large);
+  font-size: var(--font-size-lg);
+  font-weight: 700;
+  line-height: 80px;
+  padding: 0 40px;
 }

-.item + .item {
-  margin-top: 20px;
+a.item {
+  color: var(--base600);
 }

-.item:last-child {
-  margin-top: 60px;
+a.item.selected,
+.submenu a.item.selected {
+  color: var(--base900);
 }

-.header {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  height: 100px;
-  padding: 0 30px;
+.submenu a.item {
+  color: var(--base600);
+  margin-left: 40px;
 }
--- a/components/common/Modal.js
+++ b/components/common/Modal.js
@ -1,26 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import { useSpring, animated } from 'react-spring';
-import styles from './Modal.module.css';
-
-function Modal({ title, children }) {
-  const props = useSpring({ opacity: 1, from: { opacity: 0 } });
-
-  return ReactDOM.createPortal(
-    <animated.div className={styles.modal} style={props}>
-      <div className={styles.content}>
-        {title && <div className={styles.header}>{title}</div>}
-        <div className={styles.body}>{children}</div>
-      </div>
-    </animated.div>,
-    document.getElementById('__modals'),
-  );
-}
-
-Modal.propTypes = {
-  title: PropTypes.node,
-  children: PropTypes.node,
-};
-
-export default Modal;
--- a/components/common/Modal.module.css
+++ b/components/common/Modal.module.css
@ -1,46 +0,0 @@
-.modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-  z-index: 2;
-}
-
-.modal:before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-  background: #000;
-  opacity: 0.5;
-}
-
-.content {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: var(--gray50);
-  min-width: 400px;
-  min-height: 100px;
-  max-width: 100vw;
-  z-index: 1;
-  border: 1px solid var(--gray300);
-  padding: 30px;
-  border-radius: 4px;
-}
-
-.header {
-  font-weight: 600;
-  margin-bottom: 20px;
-}
-
-.body {
-  display: flex;
-  flex-direction: column;
-}
--- a/components/common/NavMenu.js
+++ b/components/common/NavMenu.js
@ -1,47 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useRouter } from 'next/router';
-import classNames from 'classnames';
-import styles from './NavMenu.module.css';
-
-function NavMenu({ options = [], className, onSelect = () => {} }) {
-  const router = useRouter();
-
-  return (
-    <div className={classNames(styles.menu, className)}>
-      {options
-        .filter(({ hidden }) => !hidden)
-        .map(option => {
-          const { label, value, className: customClassName, render } = option;
-
-          return render ? (
-            render(option)
-          ) : (
-            <div
-              key={value}
-              className={classNames(styles.option, customClassName, {
-                [styles.selected]: router.asPath === value,
-              })}
-              onClick={e => onSelect(value, e)}
-            >
-              {label}
-            </div>
-          );
-        })}
-    </div>
-  );
-}
-
-NavMenu.propTypes = {
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.node,
-      value: PropTypes.any,
-      className: PropTypes.string,
-      render: PropTypes.func,
-    }),
-  ),
-  className: PropTypes.string,
-  onSelect: PropTypes.func,
-};
-export default NavMenu;
--- a/components/common/NavMenu.module.css
+++ b/components/common/NavMenu.module.css
@ -1,22 +0,0 @@
-.menu {
-  color: var(--gray800);
-  border: 1px solid var(--gray500);
-  border-radius: 4px;
-  overflow: hidden;
-  z-index: 2;
-}
-
-.option {
-  padding: 8px 16px;
-  cursor: pointer;
-  border-radius: 4px;
-}
-
-.option:hover {
-  background: var(--gray75);
-}
-
-.selected {
-  color: var(--gray900);
-  font-weight: 600;
-}
--- a/components/common/NoData.js
+++ b/components/common/NoData.js
@ -1,19 +1,15 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { FormattedMessage } from 'react-intl';
 import styles from './NoData.module.css';
+import useMessages from 'hooks/useMessages';
+
+export function NoData({ className }) {
+  const { formatMessage, messages } = useMessages();

-function NoData({ className }) {
  return (
    <div className={classNames(styles.container, className)}>
-      <FormattedMessage id="message.no-data-available" defaultMessage="No data available." />
+      {formatMessage(messages.noDataAvailable)}
    </div>
  );
 }

-NoData.propTypes = {
-  className: PropTypes.string,
-};
-
 export default NoData;
--- a/components/common/NoData.module.css
+++ b/components/common/NoData.module.css
@ -1,6 +1,6 @@
 .container {
-  color: var(--gray500);
-  font-size: var(--font-size-normal);
+  color: var(--base500);
+  font-size: var(--font-size-md);
  position: relative;
  display: flex;
  align-items: center;
--- a/components/common/OverflowText.js
+++ b/components/common/OverflowText.js
@ -1,66 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import ReactTooltip from 'react-tooltip';
-
-import styles from './OverflowText.module.css';
-
-const OverflowText = ({ children, tooltipId }) => {
-  const measureEl = useRef();
-  const [isOverflown, setIsOverflown] = useState(false);
-
-  const measure = useCallback(
-    el => {
-      if (!el) return;
-      setIsOverflown(el.scrollWidth > el.clientWidth);
-    },
-    [setIsOverflown],
-  );
-
-  // Do one measure on mount
-  useEffect(() => {
-    measure(measureEl.current);
-  }, [measure]);
-
-  // Set up resize listener for subsequent measures
-  useEffect(() => {
-    if (!measureEl.current) return;
-
-    // Destructure ref in case it changes out from under us
-    const el = measureEl.current;
-
-    if ('ResizeObserver' in global) {
-      // Ideally, we have access to ResizeObservers
-      const observer = new ResizeObserver(() => {
-        measure(el);
-      });
-      observer.observe(el);
-      return () => observer.unobserve(el);
-    } else {
-      // Otherwise, fall back to measuring on window resizes
-      const handler = () => measure(el);
-
-      window.addEventListener('resize', handler, { passive: true });
-      return () => window.removeEventListener('resize', handler, { passive: true });
-    }
-  });
-
-  return (
-    <span
-      ref={measureEl}
-      data-tip={children.toString()}
-      data-effect="solid"
-      data-for={tooltipId}
-      className={styles.root}
-    >
-      {children}
-      {isOverflown && <ReactTooltip id={tooltipId}>{children}</ReactTooltip>}
-    </span>
-  );
-};
-
-OverflowText.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  tooltipId: PropTypes.string.isRequired,
-};
-
-export default OverflowText;
--- a/components/common/OverflowText.module.css
+++ b/components/common/OverflowText.module.css
@ -1,6 +0,0 @@
-.root {
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
--- a/components/common/RefreshButton.js
+++ b/components/common/RefreshButton.js
@ -1,47 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import useStore from 'store/queries';
-import { setDateRange } from 'store/websites';
-import Button from './Button';
-import Refresh from 'assets/redo.svg';
-import Dots from 'assets/ellipsis-h.svg';
-import useDateRange from 'hooks/useDateRange';
-
-function RefreshButton({ websiteId }) {
-  const [dateRange] = useDateRange(websiteId);
-  const [loading, setLoading] = useState(false);
-  const selector = useCallback(state => state[`/websites/${websiteId}/stats`], [websiteId]);
-  const completed = useStore(selector);
-
-  function handleClick() {
-    if (!loading && dateRange) {
-      setLoading(true);
-      if (/^[\d]+/.test(dateRange.value)) {
-        setDateRange(websiteId, dateRange.value);
-      } else {
-        setDateRange(websiteId, dateRange);
-      }
-    }
-  }
-
-  useEffect(() => {
-    setLoading(false);
-  }, [completed]);
-
-  return (
-    <Button
-      icon={loading ? <Dots /> : <Refresh />}
-      tooltip={<FormattedMessage id="label.refresh" defaultMessage="Refresh" />}
-      tooltipId="button-refresh"
-      size="small"
-      onClick={handleClick}
-    />
-  );
-}
-
-RefreshButton.propTypes = {
-  websiteId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-};
-
-export default RefreshButton;
--- a/components/common/SettingsTable.js
+++ b/components/common/SettingsTable.js
@ -0,0 +1,38 @@
+import { Table, TableHeader, TableBody, TableRow, TableCell, TableColumn } from 'react-basics';
+import styles from './SettingsTable.module.css';
+
+export function SettingsTable({ columns = [], data = [], children, cellRender }) {
+  return (
+    <Table columns={columns} rows={data}>
+      <TableHeader className={styles.header}>
+        {(column, index) => {
+          return (
+            <TableColumn key={index} className={styles.cell} style={columns[index].style}>
+              {column.label}
+            </TableColumn>
+          );
+        }}
+      </TableHeader>
+      <TableBody className={styles.body}>
+        {(row, keys, rowIndex) => {
+          row.action = children(row, keys, rowIndex);
+
+          return (
+            <TableRow key={rowIndex} data={row} keys={keys} className={styles.row}>
+              {(data, key, colIndex) => {
+                return (
+                  <TableCell key={colIndex} className={styles.cell} style={columns[colIndex].style}>
+                    <label className={styles.label}>{columns[colIndex].label}</label>
+                    {cellRender ? cellRender(row, data, key, colIndex) : data[key]}
+                  </TableCell>
+                );
+              }}
+            </TableRow>
+          );
+        }}
+      </TableBody>
+    </Table>
+  );
+}
+
+export default SettingsTable;
--- a/components/common/SettingsTable.module.css
+++ b/components/common/SettingsTable.module.css
@ -0,0 +1,44 @@
+.cell {
+  align-items: center;
+}
+
+.row .cell:last-child {
+  gap: 10px;
+  justify-content: flex-end;
+}
+
+.label {
+  display: none;
+  font-weight: 700;
+}
+
+@media screen and (max-width: 992px) {
+  .header .cell {
+    display: none;
+  }
+
+  .label {
+    display: block;
+    min-width: 100px;
+  }
+
+  .row .cell {
+    padding-left: 0;
+    flex-basis: 100%;
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .row {
+    flex-wrap: wrap;
+  }
+
+  .header .cell:last-child {
+    display: none;
+  }
+
+  .row .cell:last-child {
+    padding-left: 0;
+    flex-basis: 100%;
+  }
+}
--- a/components/common/Table.js
+++ b/components/common/Table.js
@ -1,90 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import NoData from 'components/common/NoData';
-import styles from './Table.module.css';
-
-function Table({
-  columns,
-  rows,
-  empty,
-  className,
-  bodyClassName,
-  rowKey,
-  showHeader = true,
-  children,
-}) {
-  if (empty && rows.length === 0) {
-    return empty;
-  }
-
-  return (
-    <div className={classNames(styles.table, className)}>
-      {showHeader && (
-        <div className={classNames(styles.header, 'row')}>
-          {columns.map(({ key, label, className, style, header }) => (
-            <div
-              key={key}
-              className={classNames(styles.head, className, header?.className)}
-              style={{ ...style, ...header?.style }}
-            >
-              {label}
-            </div>
-          ))}
-        </div>
-      )}
-      <div className={classNames(styles.body, bodyClassName)}>
-        {rows.length === 0 && <NoData />}
-        {!children &&
-          rows.map((row, index) => {
-            const id = rowKey ? rowKey(row) : index;
-            return <TableRow key={id} columns={columns} row={row} />;
-          })}
-        {children}
-      </div>
-    </div>
-  );
-}
-
-const styledObject = PropTypes.shape({
-  className: PropTypes.string,
-  style: PropTypes.object,
-});
-
-Table.propTypes = {
-  columns: PropTypes.arrayOf(
-    PropTypes.shape({
-      cell: styledObject,
-      className: PropTypes.string,
-      header: styledObject,
-      key: PropTypes.string,
-      label: PropTypes.node,
-      render: PropTypes.func,
-      style: PropTypes.object,
-    }),
-  ),
-  rows: PropTypes.arrayOf(PropTypes.object),
-  empty: PropTypes.node,
-  className: PropTypes.string,
-  bodyClassName: PropTypes.string,
-  rowKey: PropTypes.func,
-  showHeader: PropTypes.bool,
-  children: PropTypes.node,
-};
-
-export default Table;
-
-export const TableRow = ({ columns, row }) => (
-  <div className={classNames(styles.row, 'row')}>
-    {columns.map(({ key, label, render, className, style, cell }, index) => (
-      <div
-        key={`${key}-${index}`}
-        className={classNames(styles.cell, className, cell?.className)}
-        style={{ ...style, ...cell?.style }}
-      >
-        {label && <label>{label}</label>}
-        {render ? render(row) : row[key]}
-      </div>
-    ))}
-  </div>
-);
--- a/components/common/Table.module.css
+++ b/components/common/Table.module.css
@ -1,55 +0,0 @@
-.table {
-  display: flex;
-  flex-direction: column;
-}
-
-.table label {
-  display: none;
-  font-size: var(--font-size-xsmall);
-  font-weight: bold;
-}
-
-.header {
-  border-bottom: 1px solid var(--gray300);
-}
-
-.head {
-  font-size: var(--font-size-small);
-  font-weight: 600;
-  line-height: 40px;
-}
-
-.body {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-}
-
-.row {
-  border-bottom: 1px solid var(--gray300);
-  padding: 10px 0;
-}
-
-.cell {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-@media only screen and (max-width: 992px) {
-  .table label {
-    display: block;
-  }
-
-  .header {
-    display: none;
-  }
-
-  .row {
-    flex-direction: column;
-  }
-
-  .cell {
-    margin-bottom: 20px;
-  }
-}
--- a/components/common/Tag.js
+++ b/components/common/Tag.js
@ -1,15 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import styles from './Tag.module.css';
-
-function Tag({ className, children }) {
-  return <span className={classNames(styles.tag, className)}>{children}</span>;
-}
-
-Tag.propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.node,
-};
-
-export default Tag;
--- a/components/common/Tag.module.css
+++ b/components/common/Tag.module.css
@ -1,6 +0,0 @@
-.tag {
-  padding: 2px 4px;
-  border: 1px solid var(--gray300);
-  border-radius: 4px;
-  margin-right: 10px;
-}
--- a/components/common/Toast.js
+++ b/components/common/Toast.js
@ -1,35 +0,0 @@
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import { useSpring, animated } from 'react-spring';
-import Icon from 'components/common/Icon';
-import Close from 'assets/times.svg';
-import styles from './Toast.module.css';
-
-function Toast({ message, timeout = 3000, onClose }) {
-  const props = useSpring({
-    opacity: 1,
-    transform: 'translate3d(0,0px,0)',
-    from: { opacity: 0, transform: 'translate3d(0,-40px,0)' },
-  });
-
-  useEffect(() => {
-    setTimeout(onClose, timeout);
-  }, []);
-
-  return ReactDOM.createPortal(
-    <animated.div className={styles.toast} style={props} onClick={onClose}>
-      <div className={styles.message}>{message}</div>
-      <Icon className={styles.close} icon={<Close />} size="small" />
-    </animated.div>,
-    document.getElementById('__modals'),
-  );
-}
-
-Toast.propTypes = {
-  message: PropTypes.node,
-  timeout: PropTypes.number,
-  onClose: PropTypes.func,
-};
-
-export default Toast;
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				<svg id="Layer_2" height="512" viewBox="0 0 30 30" width="512" xmlns="http://www.w3.org/2000/svg" data-name="Layer 2"><g fill="rgb(0,0,0)"><path d="m15 14a5.5 5.5 0 1 1 5.5-5.5 5.51 5.51 0 0 1 -5.5 5.5zm0-9a3.5 3.5 0 1 0 3.5 3.5 3.5 3.5 0 0 0 -3.5-3.5z"/><path d="m7.5 24.5a1 1 0 0 1 -1-1 8.5 8.5 0 0 1 13.6-6.8 1 1 0 1 1 -1.2 1.6 6.44 6.44 0 0 0 -3.9-1.3 6.51 6.51 0 0 0 -6.5 6.5 1 1 0 0 1 -1 1z"/><path d="m23 27a1 1 0 0 1 -1-1v-6a1 1 0 0 1 2 0v6a1 1 0 0 1 -1 1z"/><path d="m26 24h-6a1 1 0 0 1 0-2h6a1 1 0 0 1 0 2z"/></g></svg>
				`@ -1 +0,0 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M216.464 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L387.887 239H12c-6.627 0-12 5.373-12 12v10c0 6.627 5.373 12 12 12h375.887L209.393 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L233.434 36.465c-4.686-4.687-12.284-4.687-16.97 0z"/></svg>`
				`@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Pro 6.0.0-alpha2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M392 320C378.75 320 368 330.75 368 344V456C368 460.406 364.406 464 360 464H56C51.594 464 48 460.406 48 456V152C48 147.594 51.594 144 56 144H168C181.25 144 192 133.25 192 120S181.25 96 168 96H56C25.125 96 0 121.125 0 152V456C0 486.875 25.125 512 56 512H360C390.875 512 416 486.875 416 456V344C416 330.75 405.25 320 392 320ZM488 0H320C306.75 0 296 10.75 296 24S306.75 48 320 48H430.062L183.031 295.031C173.656 304.406 173.656 319.594 183.031 328.969C187.719 333.656 193.844 336 200 336S212.281 333.656 216.969 328.969L464 81.938V192C464 205.25 474.75 216 488 216S512 205.25 512 192V24C512 10.75 501.25 0 488 0Z"/></svg>
				`@ -0,0 +1 @@`
				`<svg height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><g clip-rule="evenodd"><path d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16zM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12z"/><path d="M11.168 11.445a1 1 0 0 1 1.387-.277l3 2a1 1 0 0 1-1.11 1.664l-3-2a1 1 0 0 1-.277-1.387z"/><path d="M12 6a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V7a1 1 0 0 1 1-1z"/></g></svg>`
				`@ -0,0 +1 @@`
				<svg height="512pt" viewBox="0 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="M197.332 170.668h-160C16.746 170.668 0 153.922 0 133.332v-96C0 16.746 16.746 0 37.332 0h160c20.59 0 37.336 16.746 37.336 37.332v96c0 20.59-16.746 37.336-37.336 37.336zM37.332 32A5.336 5.336 0 0 0 32 37.332v96a5.337 5.337 0 0 0 5.332 5.336h160a5.338 5.338 0 0 0 5.336-5.336v-96A5.337 5.337 0 0 0 197.332 32zM197.332 512h-160C16.746 512 0 495.254 0 474.668v-224c0-20.59 16.746-37.336 37.332-37.336h160c20.59 0 37.336 16.746 37.336 37.336v224c0 20.586-16.746 37.332-37.336 37.332zm-160-266.668A5.337 5.337 0 0 0 32 250.668v224A5.336 5.336 0 0 0 37.332 480h160a5.337 5.337 0 0 0 5.336-5.332v-224a5.338 5.338 0 0 0-5.336-5.336zM474.668 512h-160c-20.59 0-37.336-16.746-37.336-37.332v-96c0-20.59 16.746-37.336 37.336-37.336h160c20.586 0 37.332 16.746 37.332 37.336v96C512 495.254 495.254 512 474.668 512zm-160-138.668a5.338 5.338 0 0 0-5.336 5.336v96a5.337 5.337 0 0 0 5.336 5.332h160a5.336 5.336 0 0 0 5.332-5.332v-96a5.337 5.337 0 0 0-5.332-5.336zM474.668 298.668h-160c-20.59 0-37.336-16.746-37.336-37.336v-224C277.332 16.746 294.078 0 314.668 0h160C495.254 0 512 16.746 512 37.332v224c0 20.59-16.746 37.336-37.332 37.336zM314.668 32a5.337 5.337 0 0 0-5.336 5.332v224a5.338 5.338 0 0 0 5.336 5.336h160a5.337 5.337 0 0 0 5.332-5.336v-224A5.336 5.336 0 0 0 474.668 32zm0 0"/></svg>
				`@ -0,0 +1 @@`
				<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M437.02 74.98C388.668 26.63 324.379 0 256 0S123.332 26.629 74.98 74.98C26.63 123.332 0 187.621 0 256s26.629 132.668 74.98 181.02C123.332 485.37 187.621 512 256 512s132.668-26.629 181.02-74.98C485.37 388.668 512 324.379 512 256s-26.629-132.668-74.98-181.02zM111.105 429.297c8.454-72.735 70.989-128.89 144.895-128.89 38.96 0 75.598 15.179 103.156 42.734 23.281 23.285 37.965 53.687 41.742 86.152C361.641 462.172 311.094 482 256 482s-105.637-19.824-144.895-52.703zM256 269.507c-42.871 0-77.754-34.882-77.754-77.753C178.246 148.879 213.13 114 256 114s77.754 34.879 77.754 77.754c0 42.871-34.883 77.754-77.754 77.754zm170.719 134.427a175.9 175.9 0 0 0-46.352-82.004c-18.437-18.438-40.25-32.27-64.039-40.938 28.598-19.394 47.426-52.16 47.426-89.238C363.754 132.34 315.414 84 256 84s-107.754 48.34-107.754 107.754c0 37.098 18.844 69.875 47.465 89.266-21.887 7.976-42.14 20.308-59.566 36.542-25.235 23.5-42.758 53.465-50.883 86.348C50.852 364.242 30 312.512 30 256 30 131.383 131.383 30 256 30s226 101.383 226 226c0 56.523-20.86 108.266-55.281 147.934zm0 0"/></svg>