Commit con #3

Github Issues Organizational Templates

.dockerignore

@@ -4,3 +4,4 @@ Dockerfile
 .gitignore
 .DS_Store
 node_modules
+.idea

.eslintrc.json

@@ -4,7 +4,7 @@
     "es2020": true,
     "node": true
   },
-  "extends": ["eslint:recommended", "plugin:react/recommended", "prettier", "prettier/react"],
+  "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true
@@ -12,11 +12,45 @@
     "ecmaVersion": 11,
     "sourceType": "module"
   },
-  "plugins": ["react"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:prettier/recommended",
+    "plugin:import/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "next"
+  ],
+
+  "plugins": ["@typescript-eslint", "prettier"],
+  "settings": {
+    "import/resolver": {
+      "alias": {
+        "map": [
+          ["assets", "./assets"],
+          ["components", "./components"],
+          ["db", "./db"],
+          ["hooks", "./hooks"],
+          ["lang", "./lang"],
+          ["lib", "./lib"],
+          ["public", "./public"],
+          ["queries", "./queries"],
+          ["store", "./store"],
+          ["styles", "./styles"]
+        ],
+        "extensions": [".ts", ".tsx", ".js", ".jsx", ".json"]
+      }
+    }
+  },
   "rules": {
+    "no-console": "error",
     "react/display-name": "off",
     "react/react-in-jsx-scope": "off",
-    "react/prop-types": "off"
+    "react/prop-types": "off",
+    "import/no-anonymous-default-export": "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"

.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'

.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

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

.github/workflows/cd-manual.yml

@@ -0,0 +1,33 @@
+name: Create docker images (manual)
+
+on:
+  workflow_dispatch:
+    inputs:
+      version:
+        type: string
+        description: Version
+        required: true
+
+jobs:
+  build:
+    name: Build, push, and deploy
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        db-type: [postgresql, mysql]
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - 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 }}

.github/workflows/cd.yml

@@ -0,0 +1,31 @@
+name: Create docker images
+
+on: [create]
+
+jobs:
+  build:
+    name: Build, push, and deploy
+    if: ${{ startsWith(github.ref, 'refs/tags/v') }}
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        db-type: [postgresql, mysql]
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Set env
+        run: echo "RELEASE_VERSION=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV
+
+      - 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 }}

.github/workflows/ci.yml

@@ -0,0 +1,39 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on: [push]
+
+env:
+  DATABASE_TYPE: postgresql
+  SKIP_DB_CHECK: 1
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        include:
+        - node-version: 14.x
+          db-type: postgresql
+        - node-version: 14.x
+          db-type: mysql
+        - node-version: 16.x
+          db-type: postgresql
+        - node-version: 16.x
+          db-type: mysql
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+      env:
+        DATABASE_TYPE: ${{ matrix.db-type }}
+    - run: npm install --global yarn
+    - run: yarn install --frozen-lockfile
+    - run: yarn build

.github/workflows/main.yml

@@ -1,42 +0,0 @@
-on:
-  push:
-    branches:
-      - master
-
-jobs:
-
-  build:
-    name: Build, push, and deploy
-    runs-on: ubuntu-latest
-    steps:
-
-    - name: Checkout master
-      uses: actions/checkout@v2
-
-    - name: Build PostgreSQL container image
-      run: | 
-        docker build --build-arg DATABASE_TYPE=postgresql \
-        --tag ghcr.io/$GITHUB_ACTOR/umami:postgresql-$(echo $GITHUB_SHA | head -c7) \
-        --tag ghcr.io/$GITHUB_ACTOR/umami:postgresql-latest \
-        .
-
-    - name: Build MySQL container image
-      run: |
-        docker build --build-arg DATABASE_TYPE=mysql \
-        --tag ghcr.io/$GITHUB_ACTOR/umami:mysql-$(echo $GITHUB_SHA | head -c7) \
-        --tag ghcr.io/$GITHUB_ACTOR/umami:mysql-latest \
-        .
-
-    - name: Docker login
-      env:
-        CR_PAT: ${{ secrets.CR_PAT }}
-      run: docker login -u $GITHUB_ACTOR -p $CR_PAT ghcr.io
-      
-    - name: Push image to GitHub
-      run: |
-        # Push each image individually, avoiding pushing to umami:latest
-        # as MySQL or PostgreSQL are required
-        docker push ghcr.io/$GITHUB_ACTOR/umami:postgresql-$(echo $GITHUB_SHA | head -c7)
-        docker push ghcr.io/$GITHUB_ACTOR/umami:postgresql-latest
-        docker push ghcr.io/$GITHUB_ACTOR/umami:mysql-$(echo $GITHUB_SHA | head -c7)
-        docker push ghcr.io/$GITHUB_ACTOR/umami:mysql-latest

.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
@@ -11,18 +11,20 @@
 # next.js
 /.next/
 /out/
-/prisma/schema.prisma
+/prisma/
 
 # production
 /build
-/public/umami.js
-/lang-compiled
-/lang-formatted
+/public/script.js
+/geo
+/dist
 
 # misc
 .DS_Store
 .idea
 *.iml
+*.log
+.vscode
 
 # debug
 npm-debug.log*
@@ -34,3 +36,6 @@ yarn-error.log*
 .env.development.local
 .env.test.local
 .env.production.local
+
+*.dev.yml
+

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.prettierignore

@@ -1 +1 @@
-/public/
+/public/script.js

.stylelintrc.json

@@ -13,5 +13,5 @@
       }
     ]
   },
-  "ignoreFiles": ["**/*.js"]
+  "ignoreFiles": ["**/*.js", "**/*.md"]
 }

Dockerfile

@@ -1,15 +1,58 @@
-FROM node:12.18-alpine
+# Install dependencies only when needed
+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:18-alpine AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY docker/middleware.js .
+COPY . .
 
 ARG DATABASE_TYPE
+ARG BASE_PATH
 
-ENV DATABASE_URL "postgresql://umami:umami@db:5432/umami" \
-    DATABASE_TYPE=$DATABASE_TYPE
+ENV DATABASE_TYPE $DATABASE_TYPE
+ENV BASE_PATH $BASE_PATH
 
-COPY . /app
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN yarn build-docker
+
+# Production image, copy all the files and run next
+FROM node:18-alpine AS runner
 WORKDIR /app
 
-RUN npm install && npm run build
+ENV NODE_ENV production
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+RUN yarn add npm-run-all dotenv prisma
+
+# You only need to copy next.config.js if you are NOT using the default configuration
+COPY --from=builder /app/next.config.js .
+COPY --from=builder --chown=nextjs:nodejs /app/public ./public
+COPY --from=builder /app/package.json ./package.json
+COPY --from=builder /app/prisma ./prisma
+COPY --from=builder /app/scripts ./scripts
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
 
 EXPOSE 3000
 
-CMD ["npm", "start"]
+ENV PORT 3000
+
+CMD ["yarn", "start-docker"]

LICENSE

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

README.md

@@ -1,6 +1,6 @@
 # umami
 
-Umami is a simple, fast, website analytics alternative to Google Analytics.
+Umami MAMI is a simple, fast, privacy-focused alternative to Google Analytics.
 
 ## Getting started
 
@@ -10,67 +10,54 @@ A detailed getting started guide can be found at [https://umami.is/docs/](https:
 
 ### Requirements
 
-- A server with Node.js 10.13 or newer
-- A database (MySQL or Postgresql)
+- A server with Node.js version 12 or newer
+- A database. Umami supports [MySQL](https://www.mysql.com/) and [Postgresql](https://www.postgresql.org/) databases.
+
+### Install Yarn
+
+```
+npm install -g yarn
+```
 
 ### Get the source code and install packages
 
 ```
-git clone https://github.com/mikecao/umami.git
+git clone https://github.com/umami-software/umami.git
 cd umami
-npm install
+yarn install
 ```
 
-### Create database tables
-
-Umami supports [MySQL](https://www.mysql.com/) and [Postgresql](https://www.postgresql.org/).
-Create a database for your Umami installation and install the tables with the included scripts.
-
-For MySQL:
-
-```
-mysql -u username -p databasename < sql/schema.mysql.sql
-```
-
-For Postgresql:
-
-```
-psql -h hostname -U username -d databasename -f sql/schema.postgresql.sql
-```
-
-This will also create a login account with username **admin** and password **umami**.
-
 ### Configure umami
 
 Create an `.env` file with the following
 
 ```
-DATABASE_URL=(connection url)
-HASH_SALT=(any random string)
+DATABASE_URL=connection-url
 ```
 
 The connection url is in the following format:
+
 ```
 postgresql://username:mypassword@localhost:5432/mydb
 
 mysql://username:mypassword@localhost:3306/mydb
 ```
 
-The `HASH_SALT` is used to generate unique values for your installation.
-
 ### Build the application
 
 ```bash
-npm run build
+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 user with username **admin** and password **umami**.
+
 ### Start the application
 
 ```bash
-npm start
+yarn start
 ```
 
-By default this will launch the application on `http://localhost:3000`. You will need to either 
+By default this will launch the application on `http://localhost:3000`. You will need to either
 [proxy](https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/) requests from your web server
 or change the [port](https://nextjs.org/docs/api-reference/cli#production) to serve the application directly.
 
@@ -79,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 ghcr.io/mikecao/umami:postgresql-latest
+docker pull docker.umami.dev/umami-software/umami:postgresql-latest
 ```
 
 Or with MySQL support:
+
 ```bash
-docker pull ghcr.io/mikecao/umami:mysql-latest
+docker pull docker.umami.dev/umami-software/umami:mysql-latest
 ```
 
 ## Getting updates
@@ -98,8 +87,15 @@ To get the latest features, simply do a pull, install any new dependencies, and
 
 ```bash
 git pull
-npm install
-npm run build
+yarn install
+yarn build
+```
+
+To update the Docker image, simply pull the new images and rebuild:
+
+```bash
+docker compose pull
+docker compose up --force-recreate
 ```
 
 ## License

app.json

@@ -0,0 +1,16 @@
+{
+  "name": "Umami",
+  "description": "Umami is a simple, fast, website analytics alternative to Google Analytics.",
+  "keywords": ["analytics", "charts", "statistics", "web-analytics"],
+  "website": "https://umami.is",
+  "repository": "https://github.com/umami-software/umami",
+  "addons": ["heroku-postgresql"],
+  "env": {
+    "APP_SECRET": {
+      "description": "Used to generate unique values for your installation",
+      "required": true,
+      "generator": "secret"
+    }
+  },
+  "success_url": "/"
+}

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>

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>

assets/bars.svg

@@ -0,0 +1 @@
+<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>

assets/bolt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M296 160H180.6l42.6-129.8C227.2 15 215.7 0 200 0H56C44 0 33.8 8.9 32.2 20.8l-32 240C-1.7 275.2 9.5 288 24 288h118.7L96.6 482.5c-3.6 15.2 8 29.5 23.3 29.5 8.4 0 16.4-4.4 20.8-12l176-304c9.3-15.9-2.2-36-20.7-36z"/></svg>

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>

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>

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>

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>

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>

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>

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>

assets/eye.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"/></svg>

assets/gear.svg

@@ -0,0 +1 @@
+<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>

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>

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>

assets/logo.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 428 389.11"><defs><style>.cls-1{fill:#fff;stroke:#000;stroke-miterlimit:10;stroke-width:20px;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_4" data-name="Layer 4"><circle class="cls-1" cx="214.15" cy="181" r="171"/><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"/></g></g></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>

assets/moon.svg

@@ -0,0 +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-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>

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>

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>

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>

assets/sun.svg

@@ -0,0 +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 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>

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>

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>

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>

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>

assets/visitor.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"/></svg>

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>

components/WebsiteDetails.js

@@ -1,187 +0,0 @@
-import React, { useState } from 'react';
-import { FormattedMessage } from 'react-intl';
-import { useRouter } from 'next/router';
-import classNames from 'classnames';
-import WebsiteChart from 'components/metrics/WebsiteChart';
-import WorldMap from 'components/common/WorldMap';
-import Page from 'components/layout/Page';
-import MenuLayout from 'components/layout/MenuLayout';
-import Button from 'components/common/Button';
-import Arrow from 'assets/arrow-right.svg';
-import styles from './WebsiteDetails.module.css';
-import PagesTable from './metrics/PagesTable';
-import ReferrersTable from './metrics/ReferrersTable';
-import BrowsersTable from './metrics/BrowsersTable';
-import OSTable from './metrics/OSTable';
-import DevicesTable from './metrics/DevicesTable';
-import CountriesTable from './metrics/CountriesTable';
-import EventsTable from './metrics/EventsTable';
-import EventsChart from './metrics/EventsChart';
-import useFetch from 'hooks/useFetch';
-import Loading from 'components/common/Loading';
-
-const views = {
-  url: PagesTable,
-  referrer: ReferrersTable,
-  browser: BrowsersTable,
-  os: OSTable,
-  device: DevicesTable,
-  country: CountriesTable,
-  event: EventsTable,
-};
-
-export default function WebsiteDetails({ websiteId, token }) {
-  const router = useRouter();
-  const { data } = useFetch(`/api/website/${websiteId}`, { token });
-  const [chartLoaded, setChartLoaded] = useState(false);
-  const [countryData, setCountryData] = useState();
-  const [eventsData, setEventsData] = useState();
-  const {
-    query: { id, view },
-    basePath,
-    asPath,
-  } = router;
-
-  const path = `${basePath}/${asPath.split('/')[1]}/${id.join('/')}`;
-
-  const BackButton = () => (
-    <Button
-      key="back-button"
-      className={styles.backButton}
-      icon={<Arrow />}
-      size="xsmall"
-      onClick={() => router.push(path)}
-    >
-      <div>
-        <FormattedMessage id="button.back" defaultMessage="Back" />
-      </div>
-    </Button>
-  );
-
-  const menuOptions = [
-    {
-      render: BackButton,
-    },
-    {
-      label: <FormattedMessage id="metrics.pages" defaultMessage="Pages" />,
-      value: `${path}?view=url`,
-    },
-    {
-      label: <FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />,
-      value: `${path}?view=referrer`,
-    },
-    {
-      label: <FormattedMessage id="metrics.browsers" defaultMessage="Browsers" />,
-      value: `${path}?view=browser`,
-    },
-    {
-      label: <FormattedMessage id="metrics.operating-systems" defaultMessage="Operating system" />,
-      value: `${path}?view=os`,
-    },
-    {
-      label: <FormattedMessage id="metrics.devices" defaultMessage="Devices" />,
-      value: `${path}?view=device`,
-    },
-    {
-      label: <FormattedMessage id="metrics.countries" defaultMessage="Countries" />,
-      value: `${path}?view=country`,
-    },
-    {
-      label: <FormattedMessage id="metrics.events" defaultMessage="Events" />,
-      value: `${path}?view=event`,
-    },
-  ];
-
-  const tableProps = {
-    websiteId,
-    token,
-    websiteDomain: data?.domain,
-    limit: 10,
-    onExpand: handleExpand,
-  };
-
-  const DetailsComponent = views[view];
-
-  function handleDataLoad() {
-    if (!chartLoaded) {
-      setTimeout(() => setChartLoaded(true), 300);
-    }
-  }
-
-  function handleExpand(value) {
-    router.push(`${path}?view=${value}`);
-  }
-
-  if (!data) {
-    return null;
-  }
-
-  return (
-    <Page>
-      <div className="row">
-        <div className={classNames(styles.chart, 'col')}>
-          <WebsiteChart
-            websiteId={websiteId}
-            token={token}
-            title={data.name}
-            onDataLoad={handleDataLoad}
-            showLink={false}
-            stickyHeader
-          />
-        </div>
-      </div>
-      {!chartLoaded && <Loading />}
-      {chartLoaded && !view && (
-        <>
-          <div className={classNames(styles.row, 'row')}>
-            <div className="col-md-12 col-lg-6">
-              <PagesTable {...tableProps} />
-            </div>
-            <div className="col-md-12 col-lg-6">
-              <ReferrersTable {...tableProps} />
-            </div>
-          </div>
-          <div className={classNames(styles.row, 'row')}>
-            <div className="col-md-12 col-lg-4">
-              <BrowsersTable {...tableProps} />
-            </div>
-            <div className="col-md-12 col-lg-4">
-              <OSTable {...tableProps} />
-            </div>
-            <div className="col-md-12 col-lg-4">
-              <DevicesTable {...tableProps} />
-            </div>
-          </div>
-          <div className={classNames(styles.row, 'row')}>
-            <div className="col-12 col-md-12 col-lg-8">
-              <WorldMap data={countryData} />
-            </div>
-            <div className="col-12 col-md-12 col-lg-4">
-              <CountriesTable {...tableProps} onDataLoad={setCountryData} />
-            </div>
-          </div>
-          <div
-            className={classNames(styles.row, 'row', { [styles.hidden]: !eventsData?.length > 0 })}
-          >
-            <div className="col-12 col-md-12 col-lg-4">
-              <EventsTable {...tableProps} onDataLoad={setEventsData} />
-            </div>
-            <div className="col-12 col-md-12 col-lg-8 pt-5 pb-5">
-              <EventsChart websiteId={websiteId} token={token} />
-            </div>
-          </div>
-        </>
-      )}
-      {view && (
-        <MenuLayout
-          className={styles.view}
-          menuClassName={styles.menu}
-          contentClassName={styles.content}
-          menu={menuOptions}
-        >
-          <DetailsComponent {...tableProps} limit={false} />
-        </MenuLayout>
-      )}
-    </Page>
-  );
-}

components/WebsiteDetails.module.css

@@ -1,59 +0,0 @@
-.chart {
-  margin-bottom: 30px;
-}
-
-.view {
-  border-top: 1px solid var(--gray300);
-}
-
-.menu {
-  font-size: var(--font-size-small);
-}
-
-.content {
-  min-height: 600px;
-}
-
-.backButton {
-  align-self: flex-start;
-  margin-bottom: 16px;
-}
-
-.backButton svg {
-  transform: rotate(180deg);
-}
-
-.row {
-  border-top: 1px solid var(--gray300);
-  min-height: 430px;
-}
-
-.row > [class*='col-'] {
-  border-left: 1px solid var(--gray300);
-  padding: 0 20px;
-}
-
-.row > [class*='col-']:first-child {
-  border-left: 0;
-  padding-left: 0;
-}
-
-.row > [class*='col-']:last-child {
-  padding-right: 0;
-}
-
-.hidden {
-  display: none;
-}
-
-@media only screen and (max-width: 992px) {
-  .row {
-    border: 0;
-  }
-
-  .row > [class*='col-'] {
-    border-top: 1px solid var(--gray300);
-    border-left: 0;
-    padding: 0;
-  }
-}

components/WebsiteList.js

@@ -1,45 +0,0 @@
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-import { useRouter } from 'next/router';
-import WebsiteChart from 'components/metrics/WebsiteChart';
-import Page from 'components/layout/Page';
-import Button from 'components/common/Button';
-import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
-import useFetch from 'hooks/useFetch';
-import Arrow from 'assets/arrow-right.svg';
-import styles from './WebsiteList.module.css';
-
-export default function WebsiteList({ userId }) {
-  const router = useRouter();
-  const { data } = useFetch('/api/websites', { user_id: userId });
-
-  if (!data) {
-    return null;
-  }
-
-  return (
-    <Page>
-      {data.map(({ website_id, name }) => (
-        <div key={website_id} className={styles.website}>
-          <WebsiteChart websiteId={website_id} title={name} showLink />
-        </div>
-      ))}
-      {data.length === 0 && (
-        <EmptyPlaceholder
-          msg={
-            <FormattedMessage
-              id="message.no-websites-configured"
-              defaultMessage="You don't have any websites configured."
-            />
-          }
-        >
-          <Button icon={<Arrow />} size="medium" onClick={() => router.push('/settings')}>
-            <div>
-              <FormattedMessage id="message.go-to-settings" defaultMessage="Go to settings" />
-            </div>
-          </Button>
-        </EmptyPlaceholder>
-      )}
-    </Page>
-  );
-}

components/common/Button.js

@@ -1,44 +0,0 @@
-import React from 'react';
-import ReactTooltip from 'react-tooltip';
-import classNames from 'classnames';
-import Icon from './Icon';
-import styles from './Button.module.css';
-
-export default function Button({
-  type = 'button',
-  icon,
-  size,
-  variant,
-  children,
-  className,
-  tooltip,
-  tooltipId,
-  disabled = false,
-  onClick = () => {},
-  ...props
-}) {
-  return (
-    <button
-      data-tip={tooltip}
-      data-effect="solid"
-      data-for={tooltipId}
-      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.disabled]: disabled,
-      })}
-      disabled={disabled}
-      onClick={!disabled ? onClick : null}
-      {...props}
-    >
-      {icon && <Icon icon={icon} size={size} />}
-      {children}
-      {tooltip && <ReactTooltip id={tooltipId}>{tooltip}</ReactTooltip>}
-    </button>
-  );
-}

components/common/Button.module.css

@@ -1,82 +0,0 @@
-.button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: var(--font-size-normal);
-  background: var(--gray100);
-  padding: 8px 16px;
-  border-radius: 4px;
-  border: 0;
-  outline: none;
-  cursor: pointer;
-  white-space: nowrap;
-  position: relative;
-}
-
-.button:hover {
-  background: var(--gray200);
-}
-
-.button:active {
-  color: initial;
-}
-
-.large {
-  font-size: var(--font-size-large);
-}
-
-.medium {
-  font-size: var(--font-size-normal);
-}
-
-.small {
-  font-size: var(--font-size-small);
-}
-
-.xsmall {
-  font-size: var(--font-size-xsmall);
-}
-
-.action {
-  color: var(--gray50);
-  background: var(--gray900);
-}
-
-.action:hover {
-  background: var(--gray800);
-}
-
-.danger {
-  color: var(--gray50);
-  background: var(--red500);
-}
-
-.danger:hover {
-  background: var(--red400);
-}
-
-.light {
-  background: var(--gray50);
-}
-
-.light:hover {
-  background: var(--gray75);
-}
-
-.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);
-}

components/common/ButtonGroup.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import Button from './Button';
-import styles from './ButtonGroup.module.css';
-
-export default 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>
-  );
-}

components/common/ButtonGroup.module.css

@@ -1,29 +0,0 @@
-.group {
-  display: inline-flex;
-  border-radius: 4px;
-  overflow: hidden;
-  border: 1px solid var(--gray500);
-}
-
-.group .button {
-  border-radius: 0;
-  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;
-}
-
-.selected {
-  font-weight: 600;
-}

components/common/Calendar.js

@@ -1,267 +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/lang';
-import { chunk } from 'lib/array';
-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 startWeek = startOfWeek(date);
-  const startMonth = startOfMonth(date);
-  const startDay = subDays(startMonth, startMonth.getDay());
-  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>
-  );
-};

components/common/Calendar.module.css

@@ -1,105 +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;
-  min-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;
-}

components/common/Checkbox.js

@@ -1,27 +0,0 @@
-import React, { useRef } from 'react';
-import Icon from 'components/common/Icon';
-import Check from 'assets/check.svg';
-import styles from './Checkbox.module.css';
-
-export default function Checkbox({ name, value, label, onChange }) {
-  const ref = useRef();
-
-  return (
-    <div className={styles.container}>
-      <div className={styles.checkbox} onClick={() => ref.current.click()}>
-        {value && <Icon icon={<Check />} size="small" />}
-      </div>
-      <label className={styles.label} htmlFor={name}>
-        {label}
-      </label>
-      <input
-        ref={ref}
-        className={styles.input}
-        type="checkbox"
-        name={name}
-        value={value}
-        onChange={onChange}
-      />
-    </div>
-  );
-}

components/common/Checkbox.module.css

@@ -1,29 +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;
-}
-
-.input {
-  position: absolute;
-  visibility: hidden;
-  height: 0;
-  width: 0;
-  bottom: 100%;
-  right: 100%;
-}

components/common/CopyButton.js

@@ -1,26 +0,0 @@
-import React, { useState } from 'react';
-import Button from './Button';
-import { FormattedMessage } from 'react-intl';
-
-const defaultText = (
-  <FormattedMessage id="button.copy-to-clipboard" defaultMessage="Copy to clipboard" />
-);
-
-export default 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>
-  );
-}

components/common/DateFilter.js

@@ -1,119 +0,0 @@
-import React, { useState } from 'react';
-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 { getDateRange } from 'lib/date';
-import { dateFormat } from 'lib/lang';
-import Calendar from 'assets/calendar-alt.svg';
-import Icon from './Icon';
-
-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.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.custom-range" defaultMessage="Custom range" />,
-    value: 'custom',
-    divider: true,
-  },
-];
-
-export default function DateFilter({ value, startDate, endDate, onChange, className }) {
-  const [showPicker, setShowPicker] = useState(false);
-  const displayValue =
-    value === 'custom' ? (
-      <CustomRange startDate={startDate} endDate={endDate} onClick={() => handleChange('custom')} />
-    ) : (
-      value
-    );
-
-  function handleChange(value) {
-    if (value === 'custom') {
-      setShowPicker(true);
-      return;
-    }
-    onChange(getDateRange(value));
-  }
-
-  function handlePickerChange(value) {
-    setShowPicker(false);
-    onChange(value);
-  }
-
-  return (
-    <>
-      <DropDown
-        className={className}
-        value={displayValue}
-        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)}`}
-    </>
-  );
-};

components/common/DropDown.js

@@ -1,47 +0,0 @@
-import React, { useState, useRef } from 'react';
-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';
-
-export default function DropDown({
-  value,
-  className,
-  menuClassName,
-  options = [],
-  onChange = () => {},
-}) {
-  const [showMenu, setShowMenu] = useState(false);
-  const ref = useRef();
-
-  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}>
-        {options.find(e => e.value === value)?.label || value}
-        <Icon icon={<Chevron />} className={styles.icon} size="small" />
-      </div>
-      {showMenu && (
-        <Menu className={menuClassName} options={options} onSelect={handleSelect} float="bottom" />
-      )}
-    </div>
-  );
-}

components/common/Dropdown.module.css

@@ -1,24 +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;
-}
-
-.icon {
-  padding-left: 10px;
-}

components/common/EmptyPlaceholder.js

@@ -1,14 +1,16 @@
-import React from 'react';
-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';
 
-export default function EmptyPlaceholder({ msg, children }) {
+export function EmptyPlaceholder({ message, children }) {
   return (
-    <div className={styles.placeholder}>
-      <Icon icon={<Logo />} size="xlarge" />
-      <h2>{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>
   );
 }
+
+export default EmptyPlaceholder;

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;

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

components/common/ErrorMessage.js

@@ -0,0 +1,18 @@
+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();
+
+  return (
+    <div className={styles.error}>
+      <Icon className={styles.icon} size="large">
+        <Icons.Alert />
+      </Icon>
+      <Text>{formatMessage(messages.error)}</Text>
+    </div>
+  );
+}
+
+export default ErrorMessage;

components/common/ErrorMessage.module.css

@@ -0,0 +1,15 @@
+.error {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin: auto;
+  display: flex;
+  background-color: var(--base50);
+  padding: 10px;
+  z-index: 1;
+}
+
+.icon {
+  margin-right: 10px;
+}

components/common/Favicon.js

@@ -0,0 +1,22 @@
+import styles from './Favicon.module.css';
+
+function getHostName(url) {
+  const match = url.match(/^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:/\n?=]+)/im);
+  return match && match.length > 1 ? match[1] : null;
+}
+
+export function Favicon({ domain, ...props }) {
+  const hostName = domain ? getHostName(domain) : null;
+
+  return hostName ? (
+    <img
+      className={styles.favicon}
+      src={`https://icons.duckduckgo.com/ip3/${hostName}.ico`}
+      height="16"
+      alt=""
+      {...props}
+    />
+  ) : null;
+}
+
+export default Favicon;

components/common/Favicon.module.css

@@ -0,0 +1,3 @@
+.favicon {
+  margin-inline-end: 8px;
+}

components/common/FilterButtons.js

@@ -0,0 +1,13 @@
+import { ButtonGroup, Button, Flexbox } from 'react-basics';
+
+export function FilterButtons({ items, selectedKey, onSelect }) {
+  return (
+    <Flexbox justifyContent="center">
+      <ButtonGroup items={items} selectedKey={selectedKey} onSelect={onSelect}>
+        {({ key, label }) => <Button key={key}>{label}</Button>}
+      </ButtonGroup>
+    </Flexbox>
+  );
+}
+
+export default FilterButtons;

components/common/FilterLink.js

@@ -0,0 +1,40 @@
+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 useMessages from 'hooks/useMessages';
+import styles from './FilterLink.module.css';
+
+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={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)}
+        </Link>
+      )}
+      {externalUrl && (
+        <a className={styles.link} href={externalUrl} target="_blank" rel="noreferrer noopener">
+          <Icon className={styles.icon}>
+            <Icons.External />
+          </Icon>
+        </a>
+      )}
+    </div>
+  );
+}
+
+export default FilterLink;

components/common/FilterLink.module.css

@@ -0,0 +1,37 @@
+.row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.row.inactive {
+  color: var(--base500);
+}
+
+.row.inactive img {
+  opacity: 0.35;
+}
+
+.row.active {
+  color: var(--base900);
+  font-weight: 600;
+}
+
+.row .link {
+  display: none;
+  margin-inline-start: 20px;
+}
+
+.row .label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.row:hover .link {
+  display: block;
+}
+
+.icon {
+  cursor: pointer;
+}

components/common/HamburgerButton.js

@@ -0,0 +1,61 @@
+import { Button, Icon } from 'react-basics';
+import { useState } from 'react';
+import MobileMenu from './MobileMenu';
+import Icons from 'components/icons';
+import useMessages from 'hooks/useMessages';
+import useConfig from 'hooks/useConfig';
+
+export function HamburgerButton() {
+  const { formatMessage, labels } = useMessages();
+  const [active, setActive] = useState(false);
+  const { cloudMode } = useConfig();
+
+  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);
+
+  const handleClick = () => setActive(state => !state);
+  const handleClose = () => setActive(false);
+
+  return (
+    <>
+      <Button variant="quiet" onClick={handleClick}>
+        <Icon>{active ? <Icons.Close /> : <Icons.Menu />}</Icon>
+      </Button>
+      {active && <MobileMenu items={menuItems} onClose={handleClose} />}
+    </>
+  );
+}
+
+export default HamburgerButton;

components/common/HamburgerButton.module.css

@@ -0,0 +1,9 @@
+.button {
+  display: none;
+}
+
+@media only screen and (max-width: 768px) {
+  .button {
+    display: flex;
+  }
+}

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;

components/common/HoverTooltip.module.css

@@ -0,0 +1,43 @@
+.chart {
+  position: relative;
+}
+
+.tooltip {
+  position: fixed;
+  pointer-events: none;
+  z-index: var(--z-index-popup);
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.title {
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+}
+
+.metric {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+}
+
+.dot {
+  position: relative;
+  overflow: hidden;
+  border-radius: 100%;
+  margin-right: 8px;
+  background: var(--base50);
+}
+
+.color {
+  width: 10px;
+  height: 10px;
+}

components/common/Icon.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import styles from './Icon.module.css';
-
-export default 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>
-  );
-}

components/common/Icon.module.css

@@ -1,39 +0,0 @@
-.icon {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  vertical-align: middle;
-}
-
-.icon + * {
-  margin-left: 10px;
-}
-
-.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;
-}

components/common/LanguageButton.js

@@ -1,64 +0,0 @@
-import React, { useState, useRef } from 'react';
-import Head from 'next/head';
-import Menu from './Menu';
-import Button from './Button';
-import { menuOptions } from 'lib/lang';
-import useLocale from 'hooks/useLocale';
-import useDocumentClick from 'hooks/useDocumentClick';
-import Globe from 'assets/globe.svg';
-import styles from './LanguageButton.module.css';
-
-export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'left' }) {
-  const [showMenu, setShowMenu] = useState(false);
-  const [locale, setLocale] = useLocale();
-  const ref = useRef();
-  const selectedLocale = menuOptions.find(e => e.value === locale)?.display;
-
-  function handleSelect(value) {
-    setLocale(value);
-    setShowMenu(false);
-  }
-
-  function toggleMenu() {
-    setShowMenu(state => !state);
-  }
-
-  useDocumentClick(e => {
-    if (!ref.current.contains(e.target)) {
-      setShowMenu(false);
-    }
-  });
-
-  return (
-    <>
-      <Head>
-        {locale === 'zh-CN' && (
-          <link
-            href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap"
-            rel="stylesheet"
-          />
-        )}
-        {locale === 'ja-JP' && (
-          <link
-            href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap"
-            rel="stylesheet"
-          />
-        )}
-      </Head>
-      <div ref={ref} className={styles.container}>
-        <Button icon={<Globe />} onClick={toggleMenu} size="small">
-          <div>{selectedLocale}</div>
-        </Button>
-        {showMenu && (
-          <Menu
-            className={styles.menu}
-            options={menuOptions}
-            onSelect={handleSelect}
-            float={menuPosition}
-            align={menuAlign}
-          />
-        )}
-      </div>
-    </>
-  );
-}

components/common/LanguageButton.module.css

@@ -1,9 +0,0 @@
-.container {
-  display: flex;
-  position: relative;
-  cursor: pointer;
-}
-
-.menu {
-  z-index: 100;
-}

components/common/Link.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import NextLink from 'next/link';
-import styles from './Link.module.css';
-
-export default function Link({ className, children, ...props }) {
-  return (
-    <NextLink {...props}>
-      <a className={classNames(styles.link, className)}>{children}</a>
-    </NextLink>
-  );
-}

components/common/Link.module.css

@@ -1,23 +0,0 @@
-a.link,
-a.link:active,
-a.link:visited {
-  position: relative;
-  color: #2c2c2c;
-  text-decoration: none;
-}
-
-a.link:before {
-  content: '';
-  position: absolute;
-  bottom: -2px;
-  width: 0;
-  height: 2px;
-  background: #2680eb;
-  opacity: 0.5;
-  transition: width 100ms;
-}
-
-a.link:hover:before {
-  width: 100%;
-  transition: width 100ms;
-}

components/common/Loading.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import styles from './Loading.module.css';
-
-export default function Loading({ className }) {
-  return (
-    <div className={classNames(styles.loading, className)}>
-      <div />
-      <div />
-      <div />
-    </div>
-  );
-}

components/common/Loading.module.css

@@ -1,41 +0,0 @@
-@keyframes blink {
-  0% {
-    opacity: 0.2;
-  }
-  20% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.2;
-  }
-}
-
-.loading {
-  display: flex;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  margin: 0;
-}
-
-.loading div {
-  width: 10px;
-  height: 10px;
-  border-radius: 100%;
-  background: var(--gray400);
-  animation: blink 1.4s infinite;
-  animation-fill-mode: both;
-}
-
-.loading div + div {
-  margin-left: 10px;
-}
-
-.loading div:nth-child(2) {
-  animation-delay: 0.2s;
-}
-
-.loading div:nth-child(3) {
-  animation-delay: 0.4s;
-}

components/common/Menu.js

@@ -1,47 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import styles from './Menu.module.css';
-
-export default 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 === value,
-                [styles.divider]: divider,
-              })}
-              onClick={e => onSelect(value, e)}
-            >
-              {label}
-            </div>
-          );
-        })}
-    </div>
-  );
-}

components/common/Menu.module.css

@@ -1,46 +0,0 @@
-.menu {
-  border: 1px solid var(--gray500);
-  border-radius: 4px;
-  overflow: hidden;
-  z-index: 2;
-}
-
-.option {
-  font-size: var(--font-size-small);
-  font-weight: normal;
-  background: #fff;
-  padding: 4px 16px;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.option:hover {
-  background: #f5f5f5;
-}
-
-.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);
-}

components/common/MobileMenu.js

@@ -0,0 +1,38 @@
+import classNames from 'classnames';
+import { useRouter } from 'next/router';
+import Link from 'next/link';
+import styles from './MobileMenu.module.css';
+
+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)}>
+      <Items items={items} />
+    </div>
+  );
+}
+
+export default MobileMenu;

components/common/MobileMenu.module.css

@@ -0,0 +1,39 @@
+.menu {
+  position: fixed;
+  top: 60px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--base50);
+  z-index: var(--z-index-popup);
+  overflow: auto;
+}
+
+.items {
+  display: flex;
+  flex-direction: column;
+}
+
+.item {
+  font-size: var(--font-size-lg);
+  font-weight: 700;
+  line-height: 80px;
+  padding: 0 40px;
+}
+
+a.item {
+  color: var(--base600);
+}
+
+a.item.selected,
+.submenu a.item.selected {
+  color: var(--base900);
+}
+
+.submenu a.item {
+  color: var(--base600);
+  margin-left: 40px;
+}

components/common/Modal.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { useSpring, animated } from 'react-spring';
-import styles from './Modal.module.css';
-
-export default 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'),
-  );
-}

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: var(--gray900);
-  opacity: 0.1;
-}
-
-.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;
-}

components/common/NavMenu.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import { useRouter } from 'next/router';
-import classNames from 'classnames';
-import styles from './NavMenu.module.css';
-
-export default 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>
-  );
-}

components/common/NavMenu.module.css

@@ -1,20 +0,0 @@
-.menu {
-  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 {
-  font-weight: 600;
-}

components/common/NoData.js

@@ -1,12 +1,15 @@
-import React from 'react';
 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();
 
-export default function NoData({ className }) {
   return (
     <div className={classNames(styles.container, className)}>
-      <FormattedMessage id="message.no-data-available" defaultMessage="No data available." />
+      {formatMessage(messages.noDataAvailable)}
     </div>
   );
 }
+
+export default NoData;

components/common/NoData.module.css

@@ -1,7 +1,11 @@
 .container {
-  color: var(--gray500);
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  color: var(--base500);
+  font-size: var(--font-size-md);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  width: 100%;
+  height: 100%;
 }

components/common/RefreshButton.js

@@ -1,37 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { FormattedMessage } from 'react-intl';
-import { setDateRange } from 'redux/actions/websites';
-import Button from './Button';
-import Refresh from 'assets/redo.svg';
-import Dots from 'assets/ellipsis-h.svg';
-import useDateRange from 'hooks/useDateRange';
-import { getDateRange } from '../../lib/date';
-
-export default function RefreshButton({ websiteId }) {
-  const dispatch = useDispatch();
-  const [dateRange] = useDateRange(websiteId);
-  const [loading, setLoading] = useState(false);
-  const completed = useSelector(state => state.queries[`/api/website/${websiteId}/metrics`]);
-
-  function handleClick() {
-    if (dateRange) {
-      setLoading(true);
-      dispatch(setDateRange(websiteId, getDateRange(dateRange.value)));
-    }
-  }
-
-  useEffect(() => {
-    setLoading(false);
-  }, [completed]);
-
-  return (
-    <Button
-      icon={loading ? <Dots /> : <Refresh />}
-      tooltip={<FormattedMessage id="button.refresh" defaultMessage="Refresh" />}
-      tooltipId="button-refresh"
-      size="small"
-      onClick={handleClick}
-    />
-  );
-}

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;

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

components/common/Table.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import NoData from 'components/common/NoData';
-import styles from './Table.module.css';
-
-export default function Table({ columns, rows, empty }) {
-  if (empty && rows.length === 0) {
-    return empty;
-  }
-
-  return (
-    <div className={styles.table}>
-      <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={styles.body}>
-        {rows.length === 0 && <NoData />}
-        {rows.map((row, rowIndex) => (
-          <div className={classNames(styles.row, 'row')} key={rowIndex}>
-            {columns.map(({ key, render, className, style, cell }) => (
-              <div
-                key={`${rowIndex}${key}`}
-                className={classNames(styles.cell, className, cell?.className)}
-                style={{ ...style, ...cell?.style }}
-              >
-                {render ? render(row) : row[key]}
-              </div>
-            ))}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

components/common/Table.module.css

@@ -1,30 +0,0 @@
-.table {
-  display: flex;
-  flex-direction: column;
-}
-
-.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;
-  align-items: flex-start;
-}

components/common/Toast.js

@@ -1,26 +0,0 @@
-import React, { useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { useSpring, animated } from 'react-spring';
-import styles from './Toast.module.css';
-import Icon from 'components/common/Icon';
-import Close from 'assets/times.svg';
-
-export default 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'),
-  );
-}

components/common/Toast.module.css

@@ -1,25 +0,0 @@
-.toast {
-  position: absolute;
-  top: 30px;
-  left: 0;
-  right: 0;
-  width: 300px;
-  border-radius: 5px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 16px;
-  color: var(--gray50);
-  background: var(--green400);
-  margin: auto;
-  z-index: 2;
-  cursor: pointer;
-}
-
-.message {
-  font-size: var(--font-size-normal);
-}
-
-.close {
-  margin-left: 20px;
-}

components/common/UpdateNotice.js

@@ -0,0 +1,54 @@
+import { useState, useEffect, useCallback } from 'react';
+import { Button, Row, Column } from 'react-basics';
+import { setItem } from 'next-basics';
+import useStore, { checkVersion } from 'store/version';
+import { REPO_URL, VERSION_CHECK } from 'lib/constants';
+import styles from './UpdateNotice.module.css';
+import useMessages from 'hooks/useMessages';
+
+export function UpdateNotice() {
+  const { formatMessage, labels, messages } = useMessages();
+  const { latest, checked, hasUpdate, releaseUrl } = useStore();
+  const [dismissed, setDismissed] = useState(false);
+
+  const updateCheck = useCallback(() => {
+    setItem(VERSION_CHECK, { version: latest, time: Date.now() });
+  }, [latest]);
+
+  function handleViewClick() {
+    updateCheck();
+    setDismissed(true);
+    open(releaseUrl || REPO_URL, '_blank');
+  }
+
+  function handleDismissClick() {
+    updateCheck();
+    setDismissed(true);
+  }
+
+  useEffect(() => {
+    if (!checked) {
+      checkVersion();
+    }
+  }, [checked]);
+
+  if (!hasUpdate || dismissed) {
+    return null;
+  }
+
+  return (
+    <Row className={styles.notice}>
+      <Column variant="two" className={styles.message}>
+        {formatMessage(messages.newVersionAvailable, { version: `v${latest}` })}
+      </Column>
+      <Column className={styles.buttons}>
+        <Button variant="primary" onClick={handleViewClick}>
+          {formatMessage(labels.viewDetails)}
+        </Button>
+        <Button onClick={handleDismissClick}>{formatMessage(labels.dismiss)}</Button>
+      </Column>
+    </Row>
+  );
+}
+
+export default UpdateNotice;