add presence badge in member list

Potential performance issues: - In large rooms, we should only update the presence for the users shown in the scrollcontainer
Minor dependencies update
2025-08-27 12:10:36 +02:00 · 2025-08-27 11:48:42 +02:00 · 2025-08-21 22:53:40 +02:00 · 2025-08-21 22:53:24 +02:00 · 2025-08-21 21:28:40 +02:00 · 2025-08-21 21:28:40 +02:00
285 changed files with 12894 additions and 5420 deletions
--- a/.github/workflows/prod-deploy.yml
+++ b/.github/workflows/prod-deploy.yml
@ -52,7 +52,7 @@ jobs:
          gpg --export | xxd -p
          echo '${{ secrets.GNUPG_PASSPHRASE }}' | gpg --batch --yes --pinentry-mode loopback --passphrase-fd 0 --armor --detach-sign cinny-${{ steps.vars.outputs.tag }}.tar.gz
      - name: Upload tagged release
-        uses: softprops/action-gh-release@6cbd405e2c4e67a21c47fa9e383d020e4e28b836
+        uses: softprops/action-gh-release@72f2c25fcb47643c292f7107632f7a47c1df5cd8
        with:
          files: |
            cinny-${{ steps.vars.outputs.tag }}.tar.gz
@ -70,7 +70,7 @@ jobs:
      - name: Set up QEMU
        uses: docker/setup-qemu-action@v3.6.0
      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3.11.1
+        uses: docker/setup-buildx-action@v3.10.0
      - name: Login to Docker Hub
        uses: docker/login-action@v3.5.0
        with:
--- a/2
+++ b/2
@ -11,7 +11,7 @@ RUN npm run build


 ## App
-FROM nginx:1.29.1-alpine
+FROM nginx:1.29.0-alpine

 COPY --from=builder /src/dist /app
 COPY --from=builder /src/docker-nginx.conf /etc/nginx/conf.d/default.conf
--- a/README.md
+++ b/README.md
@ -1,4 +1,4 @@
-# Gaboule Chat (Cinny)
+# Gaboule Chat (Cinny fork)
 <p>
    <a href="https://github.com/ajbura/cinny/releases">
        <img alt="GitHub release downloads" src="https://img.shields.io/github/downloads/ajbura/cinny/total?logo=github&style=social"></a>
@ -12,13 +12,7 @@
        <img alt="Sponsor Cinny" src="https://img.shields.io/opencollective/all/cinny?logo=opencollective&style=social"></a>
 </p>

-This client is a fork of [Cinny](https://github.com/cinnyapp/cinny).
-## Differences with upstream
- Added shield icon when messaging in an encrypted room
- Add presence badge in member list
- Branding changes
- Various small fixes
- Added theme: 'Familiar'
+This is a fork of [Cinny](https://github.com/cinnyapp/cinny).

 A Matrix client focusing primarily on simple, elegant and secure interface. The main goal is to have an instant messaging application that is easy on people and has a modern touch.
 - [Roadmap](https://github.com/orgs/cinnyapp/projects/1)
--- a/index.html
+++ b/index.html
@ -1,96 +1,95 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
-    <title>Gaboule Chat</title>
-    <meta name="name" content="Cinny" />
-    <meta name="author" content="Ajay Bura" />
-    <meta
-      name="description"
-      content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source."
-    />
-    <meta
-      name="keywords"
-      content="cinny, cinnyapp, cinnychat, matrix, matrix client, matrix.org, element"
-    />
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
+        <title>Gaboule Chat</title>
+        <meta name="name" content="Cinny" />
+        <meta name="author" content="Ajay Bura" />
+        <meta
+            name="description"
+            content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source."
+        />
+        <meta
+            name="keywords"
+            content="cinny, cinnyapp, cinnychat, matrix, matrix client, matrix.org, element"
+        />

-    <meta property="og:title" content="Cinny" />
-    <meta property="og:url" content="https://cinny.in" />
-    <meta property="og:image" content="https://cinny.in/assets/favicon-48x48.png" />
-    <meta
-      property="og:description"
-      content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source."
-    />
-    <meta name="theme-color" content="#000000" />
+        <meta property="og:title" content="Cinny" />
+        <meta property="og:url" content="https://cinny.in" />
+        <meta property="og:image" content="https://cinny.in/assets/favicon-48x48.png" />
+        <meta
+            property="og:description"
+            content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source."
+        />
+        <meta name="theme-color" content="#000000" />

-    <link id="favicon" rel="shortcut icon" href="./public/favicon.ico" />
+        <link id="favicon" rel="shortcut icon" href="./public/favicon.ico" />

-    <link rel="manifest" href="/manifest.json" />
-    <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="application-name" content="Cinny" />
-    <meta name="apple-mobile-web-app-title" content="Cinny" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+        <link rel="manifest" href="/manifest.json" />
+        <meta name="mobile-web-app-capable" content="yes" />
+        <meta name="application-name" content="Cinny" />
+        <meta name="apple-mobile-web-app-title" content="Cinny" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

-    <link
-      rel="apple-touch-icon"
-      sizes="57x57"
-      href="./public/res/apple/apple-touch-icon-57x57.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="60x60"
-      href="./public/res/apple/apple-touch-icon-60x60.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="72x72"
-      href="./public/res/apple/apple-touch-icon-72x72.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="76x76"
-      href="./public/res/apple/apple-touch-icon-76x76.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="114x114"
-      href="./public/res/apple/apple-touch-icon-114x114.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="120x120"
-      href="./public/res/apple/apple-touch-icon-120x120.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="144x144"
-      href="./public/res/apple/apple-touch-icon-144x144.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="152x152"
-      href="./public/res/apple/apple-touch-icon-152x152.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="167x167"
-      href="./public/res/apple/apple-touch-icon-167x167.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="180x180"
-      href="./public/res/apple/apple-touch-icon-180x180.png"
-    />
-  </head>
-  <body id="appBody">
-    <script>
-      window.global ||= window;
-    </script>
-    <div id="root"></div>
-    <div id="portalContainer"></div>
-    <script type="module" src="./src/index.tsx"></script>
-  </body>
+        <link
+            rel="apple-touch-icon"
+            sizes="57x57"
+            href="./public/res/apple/apple-touch-icon-57x57.png"
+        />
+        <link
+            rel="apple-touch-icon"
+            sizes="60x60"
+            href="./public/res/apple/apple-touch-icon-60x60.png"
+        />
+        <link
+            rel="apple-touch-icon"
+            sizes="72x72"
+            href="./public/res/apple/apple-touch-icon-72x72.png"
+        />
+        <link
+            rel="apple-touch-icon"
+            sizes="76x76"
+            href="./public/res/apple/apple-touch-icon-76x76.png"
+        />
+        <link
+            rel="apple-touch-icon"
+            sizes="114x114"
+            href="./public/res/apple/apple-touch-icon-114x114.png"
+        />
+        <link
+            rel="apple-touch-icon"
+            sizes="120x120"
+            href="./public/res/apple/apple-touch-icon-120x120.png"
+        />
+        <link
+            rel="apple-touch-icon"
+            sizes="144x144"
+            href="./public/res/apple/apple-touch-icon-144x144.png"
+        />
+        <link
+            rel="apple-touch-icon"
+            sizes="152x152"
+            href="./public/res/apple/apple-touch-icon-152x152.png"
+        />
+        <link
+            rel="apple-touch-icon"
+            sizes="167x167"
+            href="./public/res/apple/apple-touch-icon-167x167.png"
+        />
+        <link
+            rel="apple-touch-icon"
+            sizes="180x180"
+            href="./public/res/apple/apple-touch-icon-180x180.png"
+        />
+    </head>
+    <body id="appBody">
+        <script>
+            window.global ||= window;
+        </script>
+        <div id="root"></div>
+        <script type="module" src="./src/index.tsx"></script>
+    </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "cinny",
-  "version": "4.10.1",
+  "version": "4.9.1",
  "description": "Yet another matrix client",
  "main": "index.js",
  "type": "module",
@ -20,91 +20,99 @@
  "author": "Ajay Bura",
  "license": "AGPL-3.0-only",
  "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "1.1.6",
-    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.3.0",
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.0.3",
-    "@fontsource/inter": "4.5.14",
-    "@tanstack/react-query": "5.24.1",
-    "@tanstack/react-query-devtools": "5.24.1",
-    "@tanstack/react-virtual": "3.2.0",
-    "@vanilla-extract/css": "1.9.3",
-    "@vanilla-extract/recipes": "0.3.0",
-    "@vanilla-extract/vite-plugin": "3.7.1",
+    "@atlaskit/pragmatic-drag-and-drop": "1.7.4",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.4.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
+    "@fontsource/inter": "4.5.15",
+    "@tanstack/react-query": "5.85.5",
+    "@tanstack/react-query-devtools": "5.85.5",
+    "@tanstack/react-virtual": "3.13.12",
+    "@tippyjs/react": "4.2.6",
+    "@vanilla-extract/css": "1.17.4",
+    "@vanilla-extract/recipes": "0.5.7",
+    "@vanilla-extract/vite-plugin": "3.9.5",
    "await-to-js": "3.0.0",
    "badwords-list": "2.0.1-4",
-    "blurhash": "2.0.4",
+    "blurhash": "2.0.5",
    "browser-encrypt-attachment": "0.3.0",
    "chroma-js": "3.1.2",
-    "classnames": "2.3.2",
+    "classnames": "2.5.1",
    "dateformat": "5.0.3",
-    "dayjs": "1.11.10",
+    "dayjs": "1.11.14",
    "domhandler": "5.0.3",
    "emojibase": "15.3.1",
    "emojibase-data": "15.3.2",
    "file-saver": "2.0.5",
-    "focus-trap-react": "10.0.2",
-    "folds": "2.4.0",
-    "html-dom-parser": "4.0.0",
-    "html-react-parser": "4.2.0",
-    "i18next": "23.12.2",
-    "i18next-browser-languagedetector": "8.0.0",
-    "i18next-http-backend": "2.5.2",
-    "immer": "9.0.16",
+    "flux": "4.0.4",
+    "focus-trap-react": "10.3.1",
+    "folds": "2.2.0",
+    "formik": "2.4.6",
+    "html-dom-parser": "4.0.1",
+    "html-react-parser": "4.2.10",
+    "i18next": "23.16.8",
+    "i18next-browser-languagedetector": "8.2.0",
+    "i18next-http-backend": "2.7.3",
+    "immer": "9.0.21",
    "is-hotkey": "0.2.0",
-    "jotai": "2.6.0",
-    "linkify-react": "4.1.3",
-    "linkifyjs": "4.1.3",
-    "matrix-js-sdk": "38.2.0",
+    "jotai": "2.13.1",
+    "linkify-react": "4.3.2",
+    "linkifyjs": "4.3.2",
+    "matrix-js-sdk": "37.13.0",
    "millify": "6.1.0",
-    "pdfjs-dist": "4.2.67",
+    "pdfjs-dist": "4.10.38",
    "prismjs": "1.30.0",
-    "react": "18.2.0",
-    "react-aria": "3.29.1",
-    "react-blurhash": "0.2.0",
+    "prop-types": "15.8.1",
+    "react": "18.3.1",
+    "react-aria": "3.43.0",
+    "react-autosize-textarea": "7.1.0",
+    "react-blurhash": "0.3.0",
    "react-colorful": "5.6.1",
-    "react-dom": "18.2.0",
-    "react-error-boundary": "4.0.13",
+    "react-dom": "18.3.1",
+    "react-error-boundary": "4.1.2",
    "react-google-recaptcha": "2.1.0",
-    "react-i18next": "15.0.0",
-    "react-range": "1.8.14",
-    "react-router-dom": "6.20.0",
-    "sanitize-html": "2.12.1",
-    "slate": "0.112.0",
-    "slate-dom": "0.112.2",
-    "slate-history": "0.110.3",
-    "slate-react": "0.112.1",
-    "ua-parser-js": "1.0.35"
+    "react-i18next": "15.7.2",
+    "react-modal": "3.16.3",
+    "react-range": "1.10.0",
+    "react-router-dom": "6.30.1",
+    "sanitize-html": "2.17.0",
+    "slate": "0.118.1",
+    "slate-dom": "0.118.1",
+    "slate-history": "0.115.0",
+    "slate-react": "0.117.4",
+    "tippy.js": "6.3.7",
+    "ua-parser-js": "1.0.41"
  },
  "devDependencies": {
    "@esbuild-plugins/node-globals-polyfill": "0.2.3",
-    "@rollup/plugin-inject": "5.0.3",
-    "@rollup/plugin-wasm": "6.1.1",
+    "@rollup/plugin-inject": "5.0.5",
+    "@rollup/plugin-wasm": "6.2.2",
    "@types/chroma-js": "3.1.1",
-    "@types/file-saver": "2.0.5",
+    "@types/file-saver": "2.0.7",
    "@types/is-hotkey": "0.1.10",
-    "@types/node": "18.11.18",
-    "@types/prismjs": "1.26.0",
-    "@types/react": "18.2.39",
-    "@types/react-dom": "18.2.17",
-    "@types/react-google-recaptcha": "2.1.8",
-    "@types/sanitize-html": "2.9.0",
-    "@types/ua-parser-js": "0.7.36",
-    "@typescript-eslint/eslint-plugin": "5.46.1",
-    "@typescript-eslint/parser": "5.46.1",
-    "@vitejs/plugin-react": "4.2.0",
+    "@types/node": "18.19.123",
+    "@types/prismjs": "1.26.5",
+    "@types/react": "18.3.24",
+    "@types/react-dom": "18.3.7",
+    "@types/react-google-recaptcha": "2.1.9",
+    "@types/sanitize-html": "2.16.0",
+    "@types/ua-parser-js": "0.7.39",
+    "@typescript-eslint/eslint-plugin": "5.62.0",
+    "@typescript-eslint/parser": "5.62.0",
+    "@vitejs/plugin-react": "4.7.0",
    "buffer": "6.0.3",
-    "eslint": "8.29.0",
+    "eslint": "8.57.1",
    "eslint-config-airbnb": "19.0.4",
-    "eslint-config-prettier": "8.5.0",
-    "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-jsx-a11y": "6.6.1",
-    "eslint-plugin-react": "7.31.11",
-    "eslint-plugin-react-hooks": "4.6.0",
-    "prettier": "2.8.1",
-    "typescript": "4.9.4",
+    "eslint-config-prettier": "8.10.2",
+    "eslint-plugin-import": "2.32.0",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "4.6.2",
+    "prettier": "2.8.8",
+    "sass": "1.91.0",
+    "typescript": "4.9.5",
    "vite": "5.4.19",
-    "vite-plugin-pwa": "0.20.5",
-    "vite-plugin-static-copy": "1.0.4",
-    "vite-plugin-top-level-await": "1.4.4"
+    "vite-plugin-pwa": "0.21.2",
+    "vite-plugin-static-copy": "1.0.6",
+    "vite-plugin-top-level-await": "1.6.0"
  }
 }
--- a/public/res/ic/filled/category.svg
+++ b/public/res/ic/filled/category.svg
@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path fill="#231F20" d="M9,11H5c-1.1,0-2-0.9-2-2V5c0-1.1,0.9-2,2-2h4c1.1,0,2,0.9,2,2v4C11,10.1,10.1,11,9,11z"/>
+</g>
+<g>
+	<path fill="#231F20" d="M19,11h-4c-1.1,0-2-0.9-2-2V5c0-1.1,0.9-2,2-2h4c1.1,0,2,0.9,2,2v4C21,10.1,20.1,11,19,11z"/>
+</g>
+<g>
+	<path fill="#231F20" d="M9,21H5c-1.1,0-2-0.9-2-2v-4c0-1.1,0.9-2,2-2h4c1.1,0,2,0.9,2,2v4C11,20.1,10.1,21,9,21z"/>
+</g>
+<g>
+	<path fill="#231F20" d="M19,21h-4c-1.1,0-2-0.9-2-2v-4c0-1.1,0.9-2,2-2h4c1.1,0,2,0.9,2,2v4C21,20.1,20.1,21,19,21z"/>
+</g>
+</svg>
--- a/public/res/ic/filled/pin.svg
+++ b/public/res/ic/filled/pin.svg
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M13.8,4.5l0.7,0.7l-3.4,3.4L7.7,9.7l-1-1l-1.4,1.4l3.5,3.5l-5.7,5.7l1.4,1.4l5.7-5.7l3.5,3.5l1.4-1.4l-1-1l1.1-3.4l3.4-3.4
+	l0.7,0.7l1.4-1.4l-5.7-5.7L13.8,4.5z"/>
+</svg>
--- a/public/res/ic/filled/star.svg
+++ b/public/res/ic/filled/star.svg
@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="12,2 15.1,8.6 22,9.6 17,14.8 18.2,22 12,18.6 5.8,22 7,14.8 2,9.6 8.9,8.6 	"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/add-pin.svg
+++ b/public/res/ic/outlined/add-pin.svg
@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M13.8,4.7l0.7,0.7l-3.4,3.4L7.7,10l-1-1l-1.4,1.4l3.5,3.5l-5.7,5.7L4.6,21l5.7-5.7l3.5,3.5l1.4-1.4l-1-1l1.1-3.4l3.4-3.4
+		l0.7,0.7L20.9,9l-5.7-5.7L13.8,4.7z M13.7,12l-1,2.9l-3.4-3.4l2.9-1l3.7-3.7l1.4,1.4L13.7,12z"/>
+	<polygon points="10,3.3 7.8,3.3 7.8,1 6.3,1 6.3,3.3 4,3.3 4,4.8 6.3,4.8 6.3,7 7.8,7 7.8,4.8 10,4.8 	"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/add-user.svg
+++ b/public/res/ic/outlined/add-user.svg
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M14,11c2.2,0,4-1.8,4-4c0-2.2-1.8-4-4-4s-4,1.8-4,4C10,9.2,11.8,11,14,11z M14,5c1.1,0,2,0.9,2,2c0,1.1-0.9,2-2,2
+		s-2-0.9-2-2C12,5.9,12.9,5,14,5z"/>
+	<path d="M16,13h-4c-3.3,0-6,2.7-6,6v2h16v-2C22,15.7,19.3,13,16,13z M8,19c0-2.2,1.8-4,4-4h4c2.2,0,4,1.8,4,4H8z"/>
+	<polygon points="8,9 5,9 5,6 3,6 3,9 0,9 0,11 3,11 3,14 5,14 5,11 8,11 	"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/ball.svg
+++ b/public/res/ic/outlined/ball.svg
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M19.5,5.4c-0.5-0.5-1-1-1.5-1.4c-1.7-1.3-3.8-2-6-2S7.7,2.8,6,4C5.5,4.4,5,4.9,4.5,5.4C2.9,7.2,2,9.5,2,12
+	c0,2.5,0.9,4.8,2.5,6.6c0.5,0.5,1,1,1.5,1.4c1.7,1.3,3.8,2,6,2s4.3-0.8,6-2c0.5-0.4,1-0.9,1.5-1.4c1.6-1.8,2.5-4.1,2.5-6.6
+	C22,9.5,21.1,7.2,19.5,5.4z M4,12c0-2,0.8-3.9,2-5.3C7.2,8.1,8,10,8,12c0,2-0.8,3.9-2,5.3C4.8,15.9,4,14,4,12z M12,20
+	c-1.7,0-3.2-0.5-4.5-1.4C9.1,16.8,10,14.5,10,12c0-2.5-0.9-4.8-2.5-6.6C8.8,4.5,10.3,4,12,4s3.2,0.5,4.5,1.4C14.9,7.2,14,9.5,14,12
+	c0,2.5,0.9,4.8,2.5,6.6C15.2,19.5,13.7,20,12,20z M18,17.3c-1.2-1.4-2-3.3-2-5.3c0-2,0.8-3.9,2-5.3c1.2,1.4,2,3.3,2,5.3
+	C20,14,19.2,15.9,18,17.3z"/>
+</svg>
--- a/public/res/ic/outlined/bell-off.svg
+++ b/public/res/ic/outlined/bell-off.svg
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,22c1.1,0,2-0.9,2-2h-4C10,21.1,10.9,22,12,22z"/>
+	<path d="M20.1,18.1L20.1,18.1L16,14L9.2,7.2L7.8,5.8L5.9,3.9L4.5,5.3l2.1,2.1C6.2,8.2,6,9.1,6,10v6H4v2h13.2l1.5,1.5L20.1,18.1z
+		 M8,16v-6c0-0.4,0.1-0.7,0.1-1l7,7H8z"/>
+	<path d="M12,6c2.2,0,4,1.8,4,4v1.2l2,2V10c0-3-2.2-5.4-5-5.9V3h-2v1.1c-0.6,0.1-1.1,0.3-1.6,0.5L11,6.1C11.3,6.1,11.6,6,12,6z"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/bell-ping.svg
+++ b/public/res/ic/outlined/bell-ping.svg
@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<circle cx="17" cy="8" r="3"/>
+	<path d="M12,22c1.1,0,2-0.9,2-2h-4C10,21.1,10.9,22,12,22z"/>
+	<path d="M18,12.9C17.7,13,17.3,13,17,13s-0.7,0-1-0.1V16H8v-6c0-2.2,1.8-4,4-4c0.1,0,0.3,0,0.4,0c0.3-0.7,0.7-1.3,1.3-1.8
+		c-0.2-0.1-0.5-0.1-0.7-0.2V3h-2v1.1C8.2,4.6,6,7,6,10v6H4v2h16v-2h-2V12.9z"/>
+	<path d="M6.3,4.3L4.9,2.9C3.1,4.7,2,7.2,2,10h2C4,7.8,4.9,5.8,6.3,4.3z"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/bell-ring.svg
+++ b/public/res/ic/outlined/bell-ring.svg
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,22c1.1,0,2-0.9,2-2h-4C10,21.1,10.9,22,12,22z"/>
+	<path d="M18,10c0-3-2.2-5.4-5-5.9V3h-2v1.1C8.2,4.6,6,7,6,10v6H4v2h16v-2h-2V10z M16,16H8v-6c0-2.2,1.8-4,4-4s4,1.8,4,4V16z"/>
+	<path d="M6.3,4.3L4.9,2.9C3.1,4.7,2,7.2,2,10h2C4,7.8,4.9,5.8,6.3,4.3z"/>
+	<path d="M19.1,2.9l-1.4,1.4C19.1,5.8,20,7.8,20,10h2C22,7.2,20.9,4.7,19.1,2.9z"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/bell.svg
+++ b/public/res/ic/outlined/bell.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,22c1.1,0,2-0.9,2-2h-4C10,21.1,10.9,22,12,22z"/>
+	<path d="M18,16v-6c0-3-2.2-5.4-5-5.9V3h-2v1.1C8.2,4.6,6,7,6,10v6H4v2h16v-2H18z M16,16H8v-6c0-2.2,1.8-4,4-4s4,1.8,4,4V16z"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/bin.svg
+++ b/public/res/ic/outlined/bin.svg
@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<rect x="9" y="8" width="2" height="8"/>
+		</g>
+		<g>
+			<rect x="13" y="8" width="2" height="8"/>
+		</g>
+	</g>
+	<path d="M21,3h-5l-1.4-1.4C14.2,1.2,13.7,1,13.2,1h-2.3c-0.5,0-1,0.2-1.4,0.6L8,3H3v2h2v14c0,1.1,0.9,2,2,2h10c1.1,0,2-0.9,2-2V5h2
+		V3z M17,19H7V5h10V19z"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/bulb.svg
+++ b/public/res/ic/outlined/bulb.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M12,2c-0.3,0-0.6,0-0.9,0.1c-3.5,0.4-6.4,3.2-7,6.7c-0.5,3.1,0.8,6,3.1,7.7C7.7,16.8,8,17.4,8,18v4h8v-4
+	c0-0.6,0.3-1.2,0.8-1.6c1.9-1.5,3.2-3.8,3.2-6.4C20,5.6,16.4,2,12,2z M15.6,14.8c-1,0.7-1.6,1.9-1.6,3.2v2h-1.3v-8.1
+	c0.7-0.3,1.3-1,1.3-1.9c0-1.1-0.9-2-2-2s-2,0.9-2,2c0,0.8,0.5,1.6,1.3,1.9V20H10v-2c0-1.2-0.6-2.4-1.6-3.2C6.6,13.4,5.7,11.3,6.1,9
+	c0.4-2.6,2.6-4.7,5.2-5c0.2,0,0.5,0,0.7,0c3.3,0,6,2.7,6,6C18,11.9,17.1,13.7,15.6,14.8z"/>
+</svg>
--- a/public/res/ic/outlined/category.svg
+++ b/public/res/ic/outlined/category.svg
@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path fill="#221F1F" d="M9,5v4H5V5H9 M9,3H5C3.9,3,3,3.9,3,5v4c0,1.1,0.9,2,2,2h4c1.1,0,2-0.9,2-2V5C11,3.9,10.1,3,9,3L9,3z"/>
+	<path fill="#221F1F" d="M19,5v4h-4V5H19 M19,3h-4c-1.1,0-2,0.9-2,2v4c0,1.1,0.9,2,2,2h4c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3L19,3
+		z"/>
+	<path fill="#221F1F" d="M9,15v4H5v-4H9 M9,13H5c-1.1,0-2,0.9-2,2v4c0,1.1,0.9,2,2,2h4c1.1,0,2-0.9,2-2v-4C11,13.9,10.1,13,9,13
+		L9,13z"/>
+	<path fill="#221F1F" d="M19,15v4h-4v-4H19 M19,13h-4c-1.1,0-2,0.9-2,2v4c0,1.1,0.9,2,2,2h4c1.1,0,2-0.9,2-2v-4
+		C21,13.9,20.1,13,19,13L19,13z"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/check.svg
+++ b/public/res/ic/outlined/check.svg
@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<polygon points="9.5,14.1 6,10.6 4.6,12 8.1,15.5 9.5,16.9 19.4,7 18,5.6 "/>
+</svg>
--- a/public/res/ic/outlined/chevron-bottom.svg
+++ b/public/res/ic/outlined/chevron-bottom.svg
@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="4.2,9.2 5.6,7.8 12,14.2 18.4,7.8 19.8,9.2 12,17 	"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/chevron-left.svg
+++ b/public/res/ic/outlined/chevron-left.svg
@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="14.8,4.2 16.2,5.6 9.8,12 16.2,18.4 14.8,19.8 7,12 	"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/chevron-right.svg
+++ b/public/res/ic/outlined/chevron-right.svg
@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="9.2,4.2 7.8,5.6 14.2,12 7.8,18.4 9.2,19.8 17,12 	"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/chevron-top.svg
+++ b/public/res/ic/outlined/chevron-top.svg
@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="4.2,14.8 5.6,16.2 12,9.8 18.4,16.2 19.8,14.8 12,7 	"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/circle-plus.svg
+++ b/public/res/ic/outlined/circle-plus.svg
@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8
+		S16.4,20,12,20z"/>
+	<polygon points="13,7 11,7 11,11 7,11 7,13 11,13 11,17 13,17 13,13 17,13 17,11 13,11 	"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/cmd.svg
+++ b/public/res/ic/outlined/cmd.svg
@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M20,4H4C2.9,4,2,4.9,2,6v12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V6C22,4.9,21.1,4,20,4z M20,18H4V6h16V18z"/>
+	<polygon points="7.5,16.5 12.1,12 7.5,7.5 6.5,8.5 9.9,12 6.5,15.5 	"/>
+	<rect x="13" y="14.5" width="5" height="1.5"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/coin.svg
+++ b/public/res/ic/outlined/coin.svg
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8
+		S16.4,20,12,20z"/>
+	<path d="M13,11.3h-2c-0.7,0-1.3-0.6-1.3-1.3s0.6-1.3,1.3-1.3h4V7.3h-2.3V6h-1.5v1.3H11c-1.5,0-2.8,1.2-2.8,2.8s1.2,2.8,2.8,2.8h2
+		c0.7,0,1.3,0.6,1.3,1.3s-0.6,1.3-1.3,1.3H9v1.5h2.3V18h1.5v-1.3H13c1.5,0,2.8-1.2,2.8-2.8S14.5,11.3,13,11.3z"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/cross.svg
+++ b/public/res/ic/outlined/cross.svg
@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<polygon points="17.7,16.2 13.4,12 17.7,7.8 16.2,6.3 12,10.6 7.8,6.3 6.3,7.8 10.6,12 6.3,16.2 7.8,17.7 12,13.4 16.2,17.7 "/>
+</svg>
--- a/public/res/ic/outlined/cup.svg
+++ b/public/res/ic/outlined/cup.svg
@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M23,12c0-2.4-1.7-4.4-4-4.9V5c0-1.1-0.9-2-2-2H5C3.9,3,3,3.9,3,5v10c0,3.3,2.7,6,6,6h4c2.6,0,4.9-1.7,5.7-4.1
+	C21.1,16.6,23,14.5,23,12z M17,5v2H5V5H17z M13,19H9c-2.2,0-4-1.8-4-4V9h12v6C17,17.2,15.2,19,13,19z M19,14.8V9.2
+	c1.2,0.4,2,1.5,2,2.8S20.2,14.4,19,14.8z"/>
+</svg>
--- a/public/res/ic/outlined/dog.svg
+++ b/public/res/ic/outlined/dog.svg
@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<circle cx="10" cy="11" r="1"/>
+	<circle cx="14" cy="11" r="1"/>
+	<path d="M20.3,16.2C20,14.7,19.6,13,19,11.3c0.6-2.1,1.6-6.7,0.4-8.4c-0.3-0.5-0.8-0.7-1.4-0.7c-1.2,0-2.8,1.3-3.7,2.3
+		C13.6,4.2,12.8,4,12,4s-1.6,0.2-2.3,0.6c-1-1-2.5-2.3-3.7-2.3c-0.6,0-1.1,0.2-1.4,0.7C3.4,4.6,4.4,9.2,5,11.3
+		c-0.6,1.7-1,3.4-1.3,4.9C3.2,18.7,5.1,21,7.6,21h8.7C18.9,21,20.8,18.7,20.3,16.2z M5.8,3.8C5.9,3.8,5.9,3.8,6,3.8
+		c0.5,0,1.5,0.8,2.5,1.7C7.5,6.3,6.7,7.6,6,9C5.6,6.8,5.3,4.5,5.8,3.8z M17.9,18.3c-0.4,0.5-1,0.7-1.6,0.7H7.6
+		c-0.6,0-1.2-0.3-1.6-0.7c-0.2-0.3-0.6-0.8-0.4-1.6C7,10,9.4,6,12,6s5,4,6.3,10.6C18.5,17.4,18.1,18,17.9,18.3z M18,9
+		c-0.7-1.4-1.5-2.6-2.5-3.5c0.9-0.9,2-1.7,2.5-1.7c0.1,0,0.1,0,0.2,0.1C18.7,4.5,18.5,6.6,18,9z"/>
+	<path d="M12.6,14h-1.2c-0.8,0-1.4,0.6-1.4,1.4v0c0,0.4,0.1,0.7,0.4,1l0.9,0.9c0.4,0.4,1,0.4,1.4,0l0.9-0.9c0.3-0.3,0.4-0.6,0.4-1v0
+		C14,14.6,13.4,14,12.6,14z"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/download.svg
+++ b/public/res/ic/outlined/download.svg
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<g>
+		<path d="M19,21H5c-1.1,0-2-0.9-2-2v-3h2v3h14v-3h2v3C21,20.1,20.1,21,19,21z"/>
+	</g>
+	<polygon points="15.3,11.3 13,13.6 13,3 11,3 11,13.6 8.7,11.3 7.3,12.7 12,17.4 16.7,12.7 	"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/emoji-add.svg
+++ b/public/res/ic/outlined/emoji-add.svg
@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8V2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10h-2C20,16.4,16.4,20,12,20z"/>
+	<circle cx="9.5" cy="8.5" r="1.5"/>
+	<circle cx="14.5" cy="8.5" r="1.5"/>
+	<path d="M6,12c0,3.3,2.7,6,6,6s6-2.7,6-6h-2c0,2.2-1.8,4-4,4s-4-1.8-4-4H6z"/>
+	<polygon points="20.8,3.3 20.8,0 19.3,0 19.3,3.3 16,3.3 16,4.8 19.3,4.8 19.3,8 20.8,8 20.8,4.8 24,4.8 24,3.3 	"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/emoji.svg
+++ b/public/res/ic/outlined/emoji.svg
@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8
+		S16.4,20,12,20z"/>
+	<circle cx="9.5" cy="8.5" r="1.5"/>
+	<circle cx="14.5" cy="8.5" r="1.5"/>
+	<path d="M16,12c0,2.2-1.8,4-4,4s-4-1.8-4-4H6c0,3.3,2.7,6,6,6s6-2.7,6-6H16z"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/explore.svg
+++ b/public/res/ic/outlined/explore.svg
@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8
+		S16.4,20,12,20z"/>
+	<path d="M9,12l3,6l3-6l-3-6L9,12z M13,12c0,0.6-0.4,1-1,1c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1C12.6,11,13,11.4,13,12z"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/external.svg
+++ b/public/res/ic/outlined/external.svg
@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 3V5H17.8L12.9 9.9L14.3 11.3L19 6.6V10.2H21V3H14Z" fill="black"/>
+<path d="M5 5H10V3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V14.2H19V19H5V5Z" fill="black"/>
+</svg>
--- a/public/res/ic/outlined/eye-blind.svg
+++ b/public/res/ic/outlined/eye-blind.svg
@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.92896 3.51471L3.51474 4.92892L5.97515 7.38933C4.46742 8.5776 3.32116 9.93994 2.7 10.8C2.1 11.5 2.1 12.5 2.7 13.2C4 15 7.6 19 12 19C13.5709 19 15.0398 18.4902 16.3384 17.7526L19.0711 20.4853L20.4853 19.0711L4.92896 3.51471ZM4.2 12C4.68291 11.3561 5.85678 9.9637 7.39721 8.81139L9.29238 10.7066C9.10496 11.0982 9 11.5368 9 12C9 13.6569 10.3431 15 12 15C12.4632 15 12.9018 14.895 13.2934 14.7076L14.8573 16.2715C13.9566 16.7128 12.9896 17 12 17C8.4 17 5.1 13.2 4.2 12Z" fill="black"/>
+<path d="M9.6226 5.37995L11.2906 7.04797C11.5254 7.01661 11.762 7 12 7C15.6 7 18.9 10.8 19.8 12C19.493 12.4094 18.9066 13.1213 18.1244 13.8817L19.5194 15.2768C20.2973 14.4974 20.9049 13.7471 21.3 13.2C21.9 12.5 21.9 11.5 21.3 10.8C20 9 16.4 5 12 5C11.1762 5 10.3805 5.14021 9.6226 5.37995Z" fill="black"/>
+</svg>
--- a/public/res/ic/outlined/eye.svg
+++ b/public/res/ic/outlined/eye.svg
@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 19C7.6 19 4 15 2.7 13.2C2.1 12.5 2.1 11.5 2.7 10.8C4 9 7.6 5 12 5C16.4 5 20 9 21.3 10.8C21.9 11.5 21.9 12.5 21.3 13.2C20 15 16.4 19 12 19ZM12 7C8.4 7 5.1 10.8 4.2 12C5.1 13.2 8.4 17 12 17C15.6 17 18.9 13.2 19.8 12C18.9 10.8 15.6 7 12 7Z" fill="black"/>
+<path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" fill="black"/>
+</svg>
--- a/public/res/ic/outlined/file.svg
+++ b/public/res/ic/outlined/file.svg
@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M13.8,2H6C4.9,2,4,2.9,4,4v16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8.2L13.8,2z M18,20H6V4h7v3c0,1.1,0.9,2,2,2h3V20z"/>
+</svg>
--- a/public/res/ic/outlined/flag.svg
+++ b/public/res/ic/outlined/flag.svg
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M18.5,5l-2.1,2.8L15.5,9l0.9,1.2l2.1,2.8H9H7v2v4H5V5H18.5 M21,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h2c1.1,0,2-0.9,2-2
+	v-4h12v-2l-3-4l3-4V3L21,3z"/>
+</svg>
--- a/public/res/ic/outlined/hash-globe.svg
+++ b/public/res/ic/outlined/hash-globe.svg
@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="16,12 14,12 14,14 10,14 10,10 12,10 12,8 10,8 10,3 8,3 8,8 3,8 3,10 8,10 8,14 3,14 3,16 8,16 8,21 10,21 10,16 
+		14,16 14,21 16,21 16,16 21,16 21,14 16,14 	"/>
+	<path d="M18.5,1C16,1,14,3,14,5.5s2,4.5,4.5,4.5S23,8,23,5.5S21,1,18.5,1z M17.5,7C17.5,7,17.5,7,17.5,7c-0.2-0.1-0.3-0.1-0.3-0.2
+		c-0.6-0.5-1.7-1.1-1.8-2c-0.1-0.7,0.8-1.6,1.3-2c0.8-0.6,2.3-1.1,3.2-0.5c0.6,0.4-1.2,1-1.4,1.3c-0.3,0.4-0.3,0.9-0.3,1.4
+		c0,0.5,0.1,1.2-0.2,1.6C17.9,6.9,17.7,7,17.5,7z M20.8,7.9c-0.4,0.3-0.9,0.2-1.3,0.5c-0.1,0.1-0.2,0.2-0.3,0.2
+		c-0.2,0.1-0.5-0.1-0.5-0.3c-0.3-0.8,0.3-1.2,0.9-1.3c0.3,0,0.7,0,1,0c0.2,0,0.4,0.1,0.4,0.3C21.1,7.5,20.9,7.7,20.8,7.9z"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/hash-lock.svg
+++ b/public/res/ic/outlined/hash-lock.svg
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="16,12 14,12 14,14 10,14 10,10 12,10 12,8 10,8 10,3 8,3 8,8 3,8 3,10 8,10 8,14 3,14 3,16 8,16 8,21 10,21 10,16 
+		14,16 14,21 16,21 16,16 21,16 21,14 16,14 	"/>
+	<path d="M21,4V3c0-1.7-1.3-3-3-3s-3,1.3-3,3v1c-0.6,0-1,0.4-1,1v4c0,0.6,0.4,1,1,1h6c0.6,0,1-0.4,1-1V5C22,4.4,21.6,4,21,4z
+		 M19.5,4h-3V3c0-0.8,0.7-1.5,1.5-1.5s1.5,0.7,1.5,1.5V4z"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/hash-plus.svg
+++ b/public/res/ic/outlined/hash-plus.svg
@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="16,12 14,12 14,14 10,14 10,10 12,10 12,8 10,8 10,3 8,3 8,8 3,8 3,10 8,10 8,14 3,14 3,16 8,16 8,21 10,21 10,16 
+		14,16 14,21 16,21 16,16 21,16 21,14 16,14 	"/>
+	<g>
+		<path d="M19,0c-2.8,0-5,2.2-5,5s2.2,5,5,5s5-2.2,5-5S21.8,0,19,0z M22,5.8h-2.3V8h-1.5V5.8H16V4.3h2.3V2h1.5v2.3H22V5.8z"/>
+	</g>
+</g>
+</svg>
--- a/public/res/ic/outlined/hash-search.svg
+++ b/public/res/ic/outlined/hash-search.svg
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="16.1,12 14.1,12 14.1,14 10.1,14 10.1,10 12.1,10 12.1,8 10.1,8 10.1,3 8.1,3 8.1,8 3.1,8 3.1,10 8.1,10 8.1,14 
+		3.1,14 3.1,16 8.1,16 8.1,21 10.1,21 10.1,16 14.1,16 14.1,21 16.1,21 16.1,16 21.1,16 21.1,14 16.1,14 	"/>
+	<path d="M24,9l-2.7-2.7c0.5-0.7,0.8-1.5,0.8-2.3c0-2.2-1.8-4-4-4s-4,1.8-4,4s1.8,4,4,4c0.8,0,1.5-0.2,2.2-0.6l2.7,2.7L24,9z
+		 M18.1,6.5c-1.4,0-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5S19.5,6.5,18.1,6.5z"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/hash-shield.svg
+++ b/public/res/ic/outlined/hash-shield.svg
@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="16,12 14,12 14,14 10,14 10,10 12,10 12,8 10,8 10,3 8,3 8,8 3,8 3,10 8,10 8,14 3,14 3,16 8,16 8,21 10,21 10,16 
+		14,16 14,21 16,21 16,16 21,16 21,14 16,14 	"/>
+	<path d="M18,0l-4,2v2c0,1.9,0.9,3.7,2.4,4.8L18,10l1.6-1.2C21.1,7.7,22,5.9,22,4V2L18,0z"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/hash.svg
+++ b/public/res/ic/outlined/hash.svg
@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M21,10V8h-5V3h-2v5h-4V3H8v5H3v2h5v4H3v2h5v5h2v-5h4v5h2v-5h5v-2h-5v-4H21z M14,14h-4v-4h4V14z"/>
+</svg>
--- a/public/res/ic/outlined/heart.svg
+++ b/public/res/ic/outlined/heart.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M16.6,5.1c0.9,0,1.8,0.4,2.5,1c0.7,0.7,1,1.5,1,2.5c0,0.9-0.4,1.8-1,2.5l-0.7,0.7L12,18.2l-7.1-7.1c-0.7-0.7-1-1.5-1-2.5
+	c0-0.9,0.4-1.8,1-2.5c0.7-0.7,1.5-1,2.5-1s1.8,0.4,2.5,1l0.7,0.7L12,8.2l1.4-1.4l0.7-0.7C14.8,5.5,15.7,5.1,16.6,5.1 M16.6,3.1
+	c-1.4,0-2.8,0.5-3.9,1.6L12,5.4l-0.7-0.7c-1.1-1.1-2.5-1.6-3.9-1.6C6,3.1,4.6,3.6,3.5,4.7c-2.2,2.1-2.2,5.6,0,7.8L12,21l7.8-7.8
+	l0.7-0.7c1.1-1.1,1.6-2.5,1.6-3.9c0-1.4-0.5-2.8-1.6-3.9C19.4,3.6,18,3.1,16.6,3.1L16.6,3.1z"/>
+</svg>
--- a/public/res/ic/outlined/home.svg
+++ b/public/res/ic/outlined/home.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,3L2,12h3v7c0,1.1,0.9,2,2,2h10c1.1,0,2-0.9,2-2v-7h3L12,3z M17,12v7H7v-7v-1.8l5-4.5l5,4.5V12z"/>
+	<circle cx="12" cy="14" r="2"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/horizontal-menu.svg
+++ b/public/res/ic/outlined/horizontal-menu.svg
@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<circle cx="5" cy="12" r="2"/>
+	<circle cx="12" cy="12" r="2"/>
+	<circle cx="19" cy="12" r="2"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/inbox.svg
+++ b/public/res/ic/outlined/inbox.svg
@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M19,12V5c0-1.1-0.9-2-2-2H7C5.9,3,5,3.9,5,5v7c-1.1,0-2,0.9-2,2v5c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2v-5
+	C21,12.9,20.1,12,19,12z M7,5h10v7h-3v1c0,1.1-0.9,2-2,2c-1.1,0-2-0.9-2-2v-1H7V5z M19,19H5v-5h3.1c0.4,1.7,2,3,3.9,3
+	c1.9,0,3.4-1.3,3.9-3H19V19z"/>
+</svg>
--- a/public/res/ic/outlined/info.svg
+++ b/public/res/ic/outlined/info.svg
@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8
+		S16.4,20,12,20z"/>
+	<g>
+		<polygon points="12.8,15.5 12.8,10 12.2,10 11.3,10 10,10 10,11 11.3,11.5 11.3,15.5 10,16 10,17 14,17 14,16 		"/>
+		<circle cx="12" cy="8" r="1"/>
+	</g>
+</g>
+</svg>
--- a/public/res/ic/outlined/invite-arrow.svg
+++ b/public/res/ic/outlined/invite-arrow.svg
@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M16.3,7.3l-1.4,1.4l2.3,2.3H8.2c-0.8,0-1.6-0.3-2.1-0.9C5.6,9.6,5.2,8.8,5.2,8s0.3-1.6,0.9-2.1l1.2-1.2L5.9,3.3L4.7,4.5
+		c-1.9,1.9-1.9,5.1,0,7.1C5.7,12.5,6.9,13,8.2,13h8.9l-2.3,2.3l1.4,1.4L21,12L16.3,7.3z"/>
+	<polygon points="9,17.3 6.8,17.3 6.8,15 5.3,15 5.3,17.3 3,17.3 3,18.8 5.3,18.8 5.3,21 6.8,21 6.8,18.8 9,18.8 	"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/invite-cancel-arrow.svg
+++ b/public/res/ic/outlined/invite-cancel-arrow.svg
@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M16.3,7.3l-1.4,1.4l2.3,2.3H8.2c-0.8,0-1.6-0.3-2.1-0.9C5.6,9.6,5.2,8.8,5.2,8s0.3-1.6,0.9-2.1l1.2-1.2L5.9,3.3L4.7,4.5
+		c-1.9,1.9-1.9,5.1,0,7.1C5.7,12.5,6.9,13,8.2,13h8.9l-2.3,2.3l1.4,1.4L21,12L16.3,7.3z"/>
+	<polygon points="8.7,19.6 7.1,18 8.7,16.4 7.6,15.4 6,17 4.4,15.4 3.3,16.4 4.9,18 3.3,19.6 4.4,20.7 6,19.1 7.6,20.7 	"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/invite.svg
+++ b/public/res/ic/outlined/invite.svg
@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="19.8,16 18.3,16 18.3,18.3 16,18.3 16,19.8 18.3,19.8 18.3,22 19.8,22 19.8,19.8 22,19.8 22,18.3 19.8,18.3 	"/>
+	<path d="M20,4H4C2.9,4,2,4.9,2,6v12c0,1.1,0.9,2,2,2h10v-2H4V9.9l8,5.3l8-5.3V14h2V6C22,4.9,21.1,4,20,4z M20,7.5l-8,5.3L4,7.5V6
+		h16V7.5z"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/join-arrow.svg
+++ b/public/res/ic/outlined/join-arrow.svg
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M4.6,4.5l1.2-1.2l1.4,1.4L6,5.9C4.8,7,4.8,9,6,10.1C6.6,10.7,7.3,11,8.1,11H17l-2.3-2.3l1.4-1.4l4.7,4.7l-4.7,4.7l-1.4-1.4
+	L17,13H8.1c-1.3,0-2.6-0.5-3.5-1.5C2.6,9.6,2.6,6.4,4.6,4.5z"/>
+</svg>
--- a/public/res/ic/outlined/leave-arrow.svg
+++ b/public/res/ic/outlined/leave-arrow.svg
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M19.4,4.5l-1.2-1.2l-1.4,1.4L18,5.9c1.2,1.2,1.2,3.1,0,4.2c-0.6,0.6-1.3,0.9-2.1,0.9H7l2.3-2.3L7.8,7.3L3.1,12l4.7,4.7
+	l1.4-1.4L7,13h8.9c1.3,0,2.6-0.5,3.5-1.5C21.4,9.6,21.4,6.4,19.4,4.5z"/>
+</svg>
--- a/public/res/ic/outlined/lock.svg
+++ b/public/res/ic/outlined/lock.svg
@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M18,10h-1V7.2c0-2.6-1.9-4.9-4.5-5.2C9.5,1.7,7,4.1,7,7v3H6c-1.1,0-2,0.9-2,2v8c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-8
+		C20,10.9,19.1,10,18,10z M9,7c0-1.7,1.3-3,3-3c1.7,0,3,1.3,3,3v3H9V7z M18,20H6v-8h12V20z"/>
+	<circle cx="12" cy="16" r="2"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/markdown.svg
+++ b/public/res/ic/outlined/markdown.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="12,7 12,7 8,11 4,7 4,7 4,7 2,7 2,17 4,17 4,9.8 8,13.8 12,9.8 12,17 14,17 14,7 12,7 	"/>
+	<path d="M20,14V7h-2v7h-2l3,3c0.1,0,0.5-0.4,1-0.9c0.9-0.9,2-2.1,2-2.1H20z"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/message-unread.svg
+++ b/public/res/ic/outlined/message-unread.svg
@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<rect x="7" y="12" fill="#010101" width="10" height="2"/>
+	<g>
+		<circle fill="#010101" cx="19" cy="6" r="4"/>
+	</g>
+	<path fill="#010101" d="M13.3,8H7v2h7.5C14,9.4,13.6,8.7,13.3,8z"/>
+	<path fill="#010101" d="M19,12v5.6l-2.4-1.3L16.1,16h-0.5H5V6h8c0-0.7,0.1-1.4,0.3-2H4.8C3.8,4,3,4.9,3,6v10c0,1.1,0.8,2,1.8,2
+		h10.8l5.4,3v-9.3C20.4,11.9,19.7,12,19,12z"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/message.svg
+++ b/public/res/ic/outlined/message.svg
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path fill="#010101" d="M19,6v11.6l-2.4-1.3L16.1,16h-0.5H5V6H19 M19.2,4H4.8C3.8,4,3,4.9,3,6v10c0,1.1,0.8,2,1.8,2h10.8l5.4,3V6
+		C21,4.9,20.2,4,19.2,4L19.2,4z"/>
+	<rect x="7" y="8" fill="#010101" width="10" height="2"/>
+	<rect x="7" y="12" fill="#010101" width="10" height="2"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/pause.svg
+++ b/public/res/ic/outlined/pause.svg
@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<g>
+		<rect x="9" y="8" width="2" height="8"/>
+	</g>
+	<g>
+		<rect x="13" y="8" width="2" height="8"/>
+	</g>
+	<path d="M12,4c4.4,0,8,3.6,8,8s-3.6,8-8,8s-8-3.6-8-8S7.6,4,12,4 M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2
+		L12,2z"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/peace.svg
+++ b/public/res/ic/outlined/peace.svg
@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M20,12c0,1.6-0.5,3.1-1.3,4.3L13,10.6V4.1
+	C16.9,4.6,20,7.9,20,12z M11,19.9c-1.7-0.2-3.2-1-4.4-2.1l4.4-4.4V19.9z M13,13.4l4.4,4.4c-1.2,1.1-2.7,1.9-4.4,2.1V13.4z M11,4.1
+	v6.5l-5.7,5.7C4.5,15.1,4,13.6,4,12C4,7.9,7.1,4.6,11,4.1z"/>
+</svg>
--- a/public/res/ic/outlined/pencil.svg
+++ b/public/res/ic/outlined/pencil.svg
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M20.6,5.6l-2.2-2.2C18,3,17.5,2.8,17,2.8S16,3,15.6,3.4L3,16v5h5L20.6,8.4C21.4,7.6,21.4,6.4,20.6,5.6z M7.2,19H5v-2.2
+	l9.2-9.2l2.2,2.2L7.2,19z M15.6,6.2L17,4.8c0,0,0,0,0,0L19.2,7l-1.4,1.4L15.6,6.2z"/>
+</svg>
--- a/public/res/ic/outlined/photo.svg
+++ b/public/res/ic/outlined/photo.svg
@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M19,5v12.7l-5-5.8l-2,2L8.9,9.6
+		l-3.9,7V5H19z M18.2,19H5.4l3.7-6.6l2.8,3.8l2-2L18.2,19z"/>
+	<circle cx="14.5" cy="8.5" r="1.5"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/pin.svg
+++ b/public/res/ic/outlined/pin.svg
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M13.8,4.5l0.7,0.7l-3.4,3.4L7.7,9.7l-1-1l-1.4,1.4l3.5,3.5l-5.7,5.7l1.4,1.4l5.7-5.7l3.5,3.5l1.4-1.4l-1-1l1.1-3.4l3.4-3.4
+	l0.7,0.7l1.4-1.4l-5.7-5.7L13.8,4.5z M13.7,11.8l-1,2.9l-3.4-3.4l2.9-1l3.7-3.7l1.4,1.4L13.7,11.8z"/>
+</svg>
--- a/public/res/ic/outlined/play.svg
+++ b/public/res/ic/outlined/play.svg
@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,4c4.4,0,8,3.6,8,8s-3.6,8-8,8s-8-3.6-8-8S7.6,4,12,4 M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2
+		L12,2z"/>
+	<polygon points="10,8 10,16 16,12 	"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/plus.svg
+++ b/public/res/ic/outlined/plus.svg
@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<polygon points="19,11 13,11 13,5 11,5 11,11 5,11 5,13 11,13 11,19 13,19 13,13 19,13 "/>
+</svg>
--- a/public/res/ic/outlined/power.svg
+++ b/public/res/ic/outlined/power.svg
@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M17.6,5l-1.3,1.6C18,7.8,19,9.8,19,12c0,3.9-3.1,7-7,7s-7-3.1-7-7c0-2.2,1-4.2,2.6-5.5L6.4,5C4.3,6.6,3,9.2,3,12
+		c0,5,4,9,9,9c5,0,9-4,9-9C21,9.2,19.7,6.6,17.6,5z"/>
+	<rect x="11" y="2" width="2" height="10"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/recent-clock.svg
+++ b/public/res/ic/outlined/recent-clock.svg
@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="11,7 11,13 14.5,16.5 15.9,15.1 13,12.2 13,7 	"/>
+	<path d="M12,2C8.7,2,5.8,3.6,4,6V4H2.5v5h5V7.5H5.4C6.9,5.4,9.3,4,12,4c4.4,0,8,3.6,8,8s-3.6,8-8,8s-8-3.6-8-8H2
+		c0,5.5,4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z"/>
+</g>
+<g>
+	<polygon points="49,44 49,50 53.2,54.2 54.7,52.8 51,49.2 51,44 	"/>
+	<polygon points="45.5,47 40.5,47 40.5,42 42,42 42,45.5 45.5,45.5 	"/>
+	<path d="M50,40c-4.1,0-7.6,2.5-9.2,6h2.2c1.4-2.4,4-4,6.9-4c4.4,0,8,3.6,8,8s-3.6,8-8,8s-8-3.6-8-8h-2c0,5.5,4.5,10,10,10
+		s10-4.5,10-10S55.5,40,50,40z"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/reply-arrow.svg
+++ b/public/res/ic/outlined/reply-arrow.svg
@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M21,13v-2H9c-1.1,0-2,0.9-2,2v4.6l-2.3-2.3l-1.4,1.4L8,21.4l4.7-4.7l-1.4-1.4L9,17.6V13H21z"/>
+</svg>
--- a/public/res/ic/outlined/search.svg
+++ b/public/res/ic/outlined/search.svg
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M21.7,20.3l-5.4-5.4c1.1-1.4,1.7-3.1,1.7-4.9c0-4.4-3.6-8-8-8s-8,3.6-8,8s3.6,8,8,8c1.8,0,3.5-0.6,4.9-1.7l5.4,5.4
+	L21.7,20.3z M10,16c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S13.3,16,10,16z"/>
+</svg>
--- a/public/res/ic/outlined/send.svg
+++ b/public/res/ic/outlined/send.svg
@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M4,5.2L17.5,12L4,18.8v-4.3l1.6-0.5l5.7-1.9l-5.7-1.9L4,9.6V5.2 M2,2v11v-2l3,1l-3,1v9l20-10L2,2L2,2z"/>
+</svg>
--- a/public/res/ic/outlined/settings.svg
+++ b/public/res/ic/outlined/settings.svg
@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M13,4v0.6v1.3l1.2,0.5c0.5,0.2,1,0.5,1.4,0.8l1.1,0.8l1.2-0.7l0.5-0.3l1,1.7l-0.5,0.3l-1.2,0.7l0.2,1.3
+		c0,0.3,0.1,0.6,0.1,0.8s0,0.5-0.1,0.8l-0.2,1.3l1.2,0.7l0.5,0.3l-1,1.7l-0.5-0.3l-1.2-0.7l-1.1,0.8c-0.4,0.3-0.9,0.6-1.4,0.8
+		L13,18.1v1.3V20h-2v-0.6v-1.3l-1.2-0.5c-0.5-0.2-1-0.5-1.4-0.8l-1.1-0.8l-1.2,0.7l-0.5,0.3l-1-1.7l0.5-0.3l1.2-0.7l-0.2-1.3
+		C6,12.5,6,12.2,6,12s0-0.5,0.1-0.8l0.2-1.3L5.1,9.2L4.6,8.9l1-1.7l0.5,0.3l1.2,0.7l1.1-0.8c0.4-0.3,0.9-0.6,1.4-0.8L11,5.9V4.6V4
+		H13 M13,2h-2C9.9,2,9,2.9,9,4v0.6C8.3,4.9,7.7,5.2,7.1,5.7L6.6,5.4c-0.3-0.2-0.7-0.3-1-0.3c-0.7,0-1.4,0.4-1.7,1l-1,1.7
+		c-0.6,1-0.2,2.2,0.7,2.7l0.5,0.3C4,11.3,4,11.6,4,12s0,0.7,0.1,1.1l-0.5,0.3c-1,0.6-1.3,1.8-0.7,2.7l1,1.7c0.4,0.6,1,1,1.7,1
+		c0.3,0,0.7-0.1,1-0.3l0.5-0.3c0.6,0.5,1.2,0.8,1.9,1.1V20c0,1.1,0.9,2,2,2h2c1.1,0,2-0.9,2-2v-0.6c0.7-0.3,1.3-0.7,1.9-1.1l0.5,0.3
+		c0.3,0.2,0.7,0.3,1,0.3c0.7,0,1.4-0.4,1.7-1l1-1.7c0.6-1,0.2-2.2-0.7-2.7l-0.5-0.3C20,12.7,20,12.4,20,12s0-0.7-0.1-1.1l0.5-0.3
+		c1-0.6,1.3-1.8,0.7-2.7l-1-1.7c-0.4-0.6-1-1-1.7-1c-0.3,0-0.7,0.1-1,0.3l-0.5,0.3c-0.6-0.5-1.2-0.8-1.9-1.1V4C15,2.9,14.1,2,13,2
+		L13,2z"/>
+	<g>
+		<path d="M12,16c-2.2,0-4-1.8-4-4s1.8-4,4-4s4,1.8,4,4S14.2,16,12,16z M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,10,12,10z
+			"/>
+	</g>
+</g>
+</svg>
--- a/public/res/ic/outlined/shield-empty.svg
+++ b/public/res/ic/outlined/shield-empty.svg
@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M12,2L3,6v7c0,5,4,9,9,9c5,0,9-4,9-9V6L12,2z M19,13c0,3.9-3.1,7-7,7s-7-3.1-7-7V7.3l7-3.1l7,3.1V13z"/>
+</svg>
--- a/public/res/ic/outlined/shield-user.svg
+++ b/public/res/ic/outlined/shield-user.svg
@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,2L3,6v7c0,5,4,9,9,9c5,0,9-4,9-9V6L12,2z M19,13c0,3.9-3.1,7-7,7s-7-3.1-7-7V7.3l7-3.1l7,3.1V13z"/>
+	<circle cx="12" cy="9" r="2"/>
+	<path d="M15,16H9v-1c0-1.7,1.3-3,3-3h0c1.7,0,3,1.3,3,3V16z"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/shield.svg
+++ b/public/res/ic/outlined/shield.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,2L3,6v7c0,5,4,9,9,9c5,0,9-4,9-9V6L12,2z M19,13c0,3.9-3.1,7-7,7s-7-3.1-7-7V7.3l7-3.1l7,3.1V13z"/>
+	<path d="M10,11c0,0.7,0.4,1.4,1,1.7V16h2v-3.3c0.6-0.3,1-1,1-1.7c0-1.1-0.9-2-2-2S10,9.9,10,11z"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/space-globe.svg
+++ b/public/res/ic/outlined/space-globe.svg
@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M15.4,13.7L14,14l-0.2,1.4c-0.4,2.8-1.3,4.2-1.7,4.6c-0.4-0.3-1.3-1.8-1.7-4.6L10,14l-1.4-0.2c-2.8-0.4-4.2-1.3-4.6-1.7
+		c0.3-0.4,1.8-1.3,4.6-1.7L10,10l0.2-1.4c0.4-2.8,1.3-4.2,1.7-4.6V2c-1.7,0-3.1,2.6-3.7,6.3C4.6,8.9,2,10.3,2,12s2.6,3.1,6.3,3.7
+		c0.6,3.7,2,6.3,3.7,6.3s3.1-2.6,3.7-6.3c3.7-0.6,6.3-2,6.3-3.7h-2.1C19.6,12.4,18.2,13.3,15.4,13.7z"/>
+	<path d="M18.5,1C16,1,14,3,14,5.5s2,4.5,4.5,4.5S23,8,23,5.5S21,1,18.5,1z M17.5,7C17.5,7,17.5,7,17.5,7c-0.2-0.1-0.3-0.1-0.3-0.2
+		c-0.6-0.5-1.7-1.1-1.8-2c-0.1-0.7,0.8-1.6,1.3-2c0.8-0.6,2.3-1.1,3.2-0.5c0.6,0.4-1.2,1-1.4,1.3c-0.3,0.4-0.3,0.9-0.3,1.4
+		c0,0.5,0.1,1.2-0.2,1.6C17.9,6.9,17.7,7,17.5,7z M20.8,7.9c-0.4,0.3-0.9,0.2-1.3,0.5c-0.1,0.1-0.2,0.2-0.3,0.2
+		c-0.2,0.1-0.5-0.1-0.5-0.3c-0.3-0.8,0.3-1.2,0.9-1.3c0.3,0,0.7,0,1,0c0.2,0,0.4,0.1,0.4,0.3C21.1,7.5,20.9,7.7,20.8,7.9z"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/space-lock.svg
+++ b/public/res/ic/outlined/space-lock.svg
@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M21,4V3c0-1.7-1.3-3-3-3s-3,1.3-3,3v1c-0.6,0-1,0.4-1,1v4c0,0.6,0.4,1,1,1h6c0.6,0,1-0.4,1-1V5C22,4.4,21.5,4,21,4z
+		 M19.5,4h-3V3c0-0.8,0.7-1.5,1.5-1.5s1.5,0.7,1.5,1.5V4z"/>
+	<path d="M15.4,13.7L14,14l-0.2,1.4c-0.4,2.8-1.3,4.2-1.7,4.6c-0.4-0.3-1.3-1.8-1.7-4.6L10,14l-1.4-0.2C5.8,13.3,4.4,12.4,4,12
+		c0.3-0.4,1.8-1.3,4.6-1.7L10,10l0.2-1.4c0.4-2.8,1.3-4.2,1.7-4.6V2c-1.7,0-3.1,2.6-3.7,6.3C4.6,8.9,2,10.3,2,12s2.6,3.1,6.3,3.7
+		c0.6,3.7,2,6.3,3.7,6.3s3.1-2.6,3.7-6.3c3.7-0.6,6.3-2,6.3-3.7h-2.1C19.6,12.4,18.2,13.3,15.4,13.7z"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/space-plus.svg
+++ b/public/res/ic/outlined/space-plus.svg
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M15.4,13.7L14,14l-0.2,1.4c-0.4,2.8-1.3,4.2-1.7,4.6c-0.4-0.3-1.3-1.8-1.7-4.6L10,14l-1.4-0.2c-2.8-0.4-4.2-1.3-4.6-1.7
+		c0.3-0.4,1.8-1.3,4.6-1.7L10,10l0.2-1.4c0.4-2.8,1.3-4.2,1.7-4.6V2c-1.7,0-3.1,2.6-3.7,6.3C4.6,8.9,2,10.3,2,12s2.6,3.1,6.3,3.7
+		c0.6,3.7,2,6.3,3.7,6.3s3.1-2.6,3.7-6.3c3.7-0.6,6.3-2,6.3-3.7h-2.1C19.6,12.4,18.2,13.3,15.4,13.7z"/>
+  <path d="M19,0c-2.8,0-5,2.2-5,5s2.2,5,5,5s5-2.2,5-5S21.8,0,19,0z M22,5.8h-2.3V8h-1.5V5.8H16V4.3h2.3V2h1.5v2.3H22V5.8z"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/space.svg
+++ b/public/res/ic/outlined/space.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M12,4.1c0.4,0.3,1.3,1.8,1.7,4.6L14,10l1.4,0.2c2.8,0.4,4.2,1.3,4.6,1.7c-0.3,0.4-1.8,1.3-4.6,1.7L14,14l-0.2,1.4
+	c-0.4,2.8-1.3,4.2-1.7,4.6c-0.4-0.3-1.3-1.8-1.7-4.6L10,14l-1.4-0.2c-2.8-0.4-4.2-1.3-4.6-1.7c0.3-0.4,1.8-1.3,4.6-1.7L10,10
+	l0.2-1.4C10.7,5.8,11.6,4.4,12,4.1 M12,2c-1.7,0-3.1,2.6-3.7,6.3C4.6,8.9,2,10.3,2,12s2.6,3.1,6.3,3.7c0.6,3.7,2,6.3,3.7,6.3
+	s3.1-2.6,3.7-6.3c3.7-0.6,6.3-2,6.3-3.7s-2.6-3.1-6.3-3.7C15.1,4.6,13.7,2,12,2L12,2z"/>
+</svg>
--- a/public/res/ic/outlined/star.svg
+++ b/public/res/ic/outlined/star.svg
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M12,6.7l1.7,3.7l4.1,0.6l-3,3.1l0.7,4.2l-3.5-2l-3.5,2l0.7-4.2l-3-3.1l4.1-0.6L12,6.7 M12,2L8.9,8.6L2,9.6l5,5.1L5.8,22
+	l6.2-3.4l6.2,3.4L17,14.8l5-5.1l-6.9-1.1L12,2L12,2z"/>
+</svg>
--- a/public/res/ic/outlined/sticker.svg
+++ b/public/res/ic/outlined/sticker.svg
@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 3L21 8V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H16ZM19 9H17C15.8954 9 15 8.10457 15 7V5H5V19H19V9Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 13.6569 10.3431 15 12 15C13.6569 15 15 13.6569 15 12H17C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12H9Z" fill="black"/>
+</svg>
--- a/public/res/ic/outlined/sun.svg
+++ b/public/res/ic/outlined/sun.svg
@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,9c1.7,0,3,1.3,3,3s-1.3,3-3,3s-3-1.3-3-3S10.3,9,12,9 M12,7c-2.8,0-5,2.2-5,5s2.2,5,5,5s5-2.2,5-5S14.8,7,12,7L12,7z"
+		/>
+	<g>
+		<rect x="11" y="2" width="2" height="3"/>
+	</g>
+	<g>
+		<rect x="19" y="11" width="3" height="2"/>
+	</g>
+	<g>
+		<rect x="11" y="19" width="2" height="3"/>
+	</g>
+	<g>
+		<rect x="2" y="11" width="3" height="2"/>
+	</g>
+	<g>
+		<rect x="17" y="4.5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 9.5104 -10.9811)" width="2" height="3"/>
+	</g>
+	<g>
+		<rect x="16.5" y="17" transform="matrix(0.7071 0.7071 -0.7071 0.7071 18.0105 -7.4602)" width="3" height="2"/>
+	</g>
+	<g>
+		<rect x="5" y="16.5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 14.4896 1.0399)" width="2" height="3"/>
+	</g>
+	<g>
+		<rect x="4.5" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 5.9895 -2.4809)" width="3" height="2"/>
+	</g>
+</g>
+</svg>
--- a/public/res/ic/outlined/tick-mark.svg
+++ b/public/res/ic/outlined/tick-mark.svg
@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<rect x="13.6" y="6" transform="matrix(0.7071 0.7071 -0.7071 0.7071 10.9064 -7.6107)" width="2" height="6.7"/>
+	<rect x="1.8" y="12.9" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 0.1967 27.7885)" width="8.1" height="2"/>
+	<polygon points="21.3,6.3 13,14.6 8.7,10.3 7.3,11.7 13,17.4 22.7,7.7 	"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/user.svg
+++ b/public/res/ic/outlined/user.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,11c2.2,0,4-1.8,4-4s-1.8-4-4-4S8,4.8,8,7S9.8,11,12,11z M12,5c1.1,0,2,0.9,2,2s-0.9,2-2,2s-2-0.9-2-2S10.9,5,12,5z"/>
+	<path d="M14,13h-4c-3.3,0-6,2.7-6,6v2h16v-2C20,15.7,17.3,13,14,13z M6,19c0-2.2,1.8-4,4-4h4c2.2,0,4,1.8,4,4H6z"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/vertical-menu.svg
+++ b/public/res/ic/outlined/vertical-menu.svg
@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<circle cx="12" cy="5" r="2"/>
+	<circle cx="12" cy="12" r="2"/>
+	<circle cx="12" cy="19" r="2"/>
+</g>
+</svg>
--- a/public/res/ic/outlined/vlc.svg
+++ b/public/res/ic/outlined/vlc.svg
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M19.4,20L14,2h-4L4.6,20H2v2h2h16h2v-2H19.4z M15.8,15H8.2l0.9-3h5.8L15.8,15z M11.5,4h1l1.8,6H9.7L11.5,4z M6.7,20l0.9-3
+	h8.8l0.9,3H6.7z"/>
+</svg>
--- a/public/res/ic/outlined/volume-full.svg
+++ b/public/res/ic/outlined/volume-full.svg
@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M9,7.8v8.3L6.8,14H4v-4h2.8L9,7.8 M11,3L6,8H4c-1.1,0-2,0.9-2,2v4c0,1.1,0.9,2,2,2h2l5,5V3L11,3z"/>
+	<path d="M13,3v2c3.9,0,7,3.1,7,7s-3.1,7-7,7v2c5,0,9-4,9-9S18,3,13,3z"/>
+	<g>
+		<path d="M13,17v-2c1.7,0,3-1.3,3-3s-1.3-3-3-3V7c2.8,0,5,2.2,5,5S15.8,17,13,17z"/>
+	</g>
+</g>
+</svg>
--- a/public/res/ic/outlined/volume-mute.svg
+++ b/public/res/ic/outlined/volume-mute.svg
@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M2,10v4c0,1.1,0.9,2,2,2h2l5,5V3L6,8H4C2.9,8,2,8.9,2,10z M9,7.8v8.3L6.8,14H4v-4h2.8L9,7.8z"/>
+	<polygon points="20.7,9.7 19.3,8.3 17,10.6 14.7,8.3 13.3,9.7 15.6,12 13.3,14.3 14.7,15.7 17,13.4 19.3,15.7 20.7,14.3 18.4,12 	
+		"/>
+</g>
+</svg>
--- a/src/app/atoms/avatar/Avatar.jsx
+++ b/src/app/atoms/avatar/Avatar.jsx
@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Avatar.scss';
+
+import Text from '../text/Text';
+import RawIcon from '../system-icons/RawIcon';
+
+import ImageBrokenSVG from '../../../../public/res/svg/image-broken.svg';
+import { avatarInitials } from '../../../util/common';
+
+const Avatar = React.forwardRef(({ text, bgColor, iconSrc, iconColor, imageSrc, size }, ref) => {
+  let textSize = 's1';
+  if (size === 'large') textSize = 'h1';
+  if (size === 'small') textSize = 'b1';
+  if (size === 'extra-small') textSize = 'b3';
+
+  return (
+    <div ref={ref} className={`avatar-container avatar-container__${size} noselect`}>
+      {imageSrc !== null ? (
+        <img
+          draggable="false"
+          src={imageSrc}
+          onLoad={(e) => {
+            e.target.style.backgroundColor = 'transparent';
+          }}
+          onError={(e) => {
+            e.target.src = ImageBrokenSVG;
+          }}
+          alt=""
+        />
+      ) : (
+        <span
+          style={{ backgroundColor: iconSrc === null ? bgColor : 'transparent' }}
+          className={`avatar__border${iconSrc !== null ? '--active' : ''}`}
+        >
+          {iconSrc !== null ? (
+            <RawIcon size={size} src={iconSrc} color={iconColor} />
+          ) : (
+            text !== null && (
+              <Text variant={textSize} primary>
+                {avatarInitials(text)}
+              </Text>
+            )
+          )}
+        </span>
+      )}
+    </div>
+  );
+});
+
+Avatar.defaultProps = {
+  text: null,
+  bgColor: 'transparent',
+  iconSrc: null,
+  iconColor: null,
+  imageSrc: null,
+  size: 'normal',
+};
+
+Avatar.propTypes = {
+  text: PropTypes.string,
+  bgColor: PropTypes.string,
+  iconSrc: PropTypes.string,
+  iconColor: PropTypes.string,
+  imageSrc: PropTypes.string,
+  size: PropTypes.oneOf(['large', 'normal', 'small', 'extra-small']),
+};
+
+export default Avatar;
--- a/src/app/atoms/avatar/Avatar.scss
+++ b/src/app/atoms/avatar/Avatar.scss
@ -0,0 +1,56 @@
+@use '../../partials/flex';
+
+.avatar-container {
+  display: inline-flex;
+  width: 42px;
+  height: 42px;
+  border-radius: var(--bo-radius);
+  position: relative;
+
+  &__large {
+    width: var(--av-large);
+    height: var(--av-large);
+  }
+  &__normal {
+    width: var(--av-normal);
+    height: var(--av-normal);
+  }
+
+  &__small {
+    width: var(--av-small);
+    height: var(--av-small);
+  }
+
+  &__extra-small {
+    width: var(--av-extra-small);
+    height: var(--av-extra-small);
+  }
+
+  > img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: inherit;
+    background-color: var(--bg-surface-hover);
+  }
+
+  .avatar__border {
+    @extend .cp-fx__row--c-c;
+    
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+
+    .text {
+      color: white;
+    }
+    &--active {
+      @extend .avatar__border;
+      box-shadow: var(--bs-surface-border);
+    }
+  }
+}
--- a/src/app/atoms/avatar/render.js
+++ b/src/app/atoms/avatar/render.js
@ -0,0 +1,57 @@
+import { avatarInitials, cssVar } from '../../../util/common';
+
+// renders the avatar and returns it as an URL
+export default async function renderAvatar({
+  text, bgColor, imageSrc, size, borderRadius, scale,
+}) {
+  try {
+    const canvas = document.createElement('canvas');
+    canvas.width = size * scale;
+    canvas.height = size * scale;
+
+    const ctx = canvas.getContext('2d');
+
+    ctx.scale(scale, scale);
+
+    // rounded corners
+    ctx.beginPath();
+    ctx.moveTo(size, size);
+    ctx.arcTo(0, size, 0, 0, borderRadius);
+    ctx.arcTo(0, 0, size, 0, borderRadius);
+    ctx.arcTo(size, 0, size, size, borderRadius);
+    ctx.arcTo(size, size, 0, size, borderRadius);
+
+    if (imageSrc) {
+      // clip corners of image
+      ctx.closePath();
+      ctx.clip();
+
+      const img = new Image();
+      img.crossOrigin = 'anonymous';
+      const promise = new Promise((resolve, reject) => {
+        img.onerror = reject;
+        img.onload = resolve;
+      });
+      img.src = imageSrc;
+      await promise;
+
+      ctx.drawImage(img, 0, 0, size, size);
+    } else {
+      // colored background
+      ctx.fillStyle = cssVar(bgColor);
+      ctx.fill();
+
+      // centered letter
+      ctx.fillStyle = '#fff';
+      ctx.font = `${cssVar('--fs-s1')} ${cssVar('--font-primary')}`;
+      ctx.textBaseline = 'middle';
+      ctx.textAlign = 'center';
+      ctx.fillText(avatarInitials(text), size / 2, size / 2);
+    }
+
+    return canvas.toDataURL();
+  } catch (e) {
+    console.error(e);
+    return imageSrc;
+  }
+}
--- a/src/app/atoms/badge/NotificationBadge.jsx
+++ b/src/app/atoms/badge/NotificationBadge.jsx
@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './NotificationBadge.scss';
+
+import Text from '../text/Text';
+
+function NotificationBadge({ alert, content }) {
+  const notificationClass = alert ? ' notification-badge--alert' : '';
+  return (
+    <div className={`notification-badge${notificationClass}`}>
+      {content !== null && <Text variant="b3" weight="bold">{content}</Text>}
+    </div>
+  );
+}
+
+NotificationBadge.defaultProps = {
+  alert: false,
+  content: null,
+};
+
+NotificationBadge.propTypes = {
+  alert: PropTypes.bool,
+  content: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+};
+
+export default NotificationBadge;
--- a/src/app/atoms/badge/NotificationBadge.scss
+++ b/src/app/atoms/badge/NotificationBadge.scss
@ -0,0 +1,21 @@
+.notification-badge {
+  min-width: 16px;
+  min-height: 8px;
+  padding: 0 var(--sp-ultra-tight);
+  background-color: var(--bg-badge);
+  border-radius: var(--bo-radius);
+
+  .text {
+    color: var(--tc-badge);
+    text-align: center;
+  }
+
+  &--alert {
+    background-color: var(--bg-positive);
+  }
+
+  &:empty {
+    min-width: 8px;
+    margin: 0 var(--sp-ultra-tight);
+  }
+}
--- a/src/app/atoms/button/Button.jsx
+++ b/src/app/atoms/button/Button.jsx
@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Button.scss';
+
+import Text from '../text/Text';
+import RawIcon from '../system-icons/RawIcon';
+import { blurOnBubbling } from './script';
+
+const Button = React.forwardRef(({
+  id, className, variant, iconSrc,
+  type, onClick, children, disabled,
+}, ref) => {
+  const iconClass = (iconSrc === null) ? '' : `btn-${variant}--icon`;
+  return (
+    <button
+      ref={ref}
+      id={id === '' ? undefined : id}
+      className={`${className ? `${className} ` : ''}btn-${variant} ${iconClass} noselect`}
+      onMouseUp={(e) => blurOnBubbling(e, `.btn-${variant}`)}
+      onClick={onClick}
+      // eslint-disable-next-line react/button-has-type
+      type={type}
+      disabled={disabled}
+    >
+      {iconSrc !== null && <RawIcon size="small" src={iconSrc} />}
+      {typeof children === 'string' && <Text variant="b1">{ children }</Text>}
+      {typeof children !== 'string' && children }
+    </button>
+  );
+});
+
+Button.defaultProps = {
+  id: '',
+  className: null,
+  variant: 'surface',
+  iconSrc: null,
+  type: 'button',
+  onClick: null,
+  disabled: false,
+};
+
+Button.propTypes = {
+  id: PropTypes.string,
+  className: PropTypes.string,
+  variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
+  iconSrc: PropTypes.string,
+  type: PropTypes.oneOf(['button', 'submit', 'reset']),
+  onClick: PropTypes.func,
+  children: PropTypes.node.isRequired,
+  disabled: PropTypes.bool,
+};
+
+export default Button;
--- a/src/app/atoms/button/Button.scss
+++ b/src/app/atoms/button/Button.scss
@ -0,0 +1,81 @@
+@use 'state';
+@use '../../partials/dir';
+@use '../../partials/text';
+
+.btn-surface,
+.btn-primary,
+.btn-positive,
+.btn-caution,
+.btn-danger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  min-width: 80px;
+  padding: var(--sp-extra-tight) var(--sp-normal);
+  background-color: transparent;
+  border: none;
+  border-radius: var(--bo-radius);
+  cursor: pointer;
+  @include state.disabled;
+
+  & .text {
+    @extend .cp-txt__ellipsis;
+  }
+  
+  &--icon {
+    @include dir.side(padding, var(--sp-tight), var(--sp-loose));
+
+  }
+  .ic-raw {
+    @include dir.side(margin, 0, var(--sp-extra-tight));
+    flex-shrink: 0;
+  }
+}
+
+@mixin color($textColor, $iconColor) {
+  .text {
+    color: $textColor;
+  }
+  .ic-raw {
+    background-color: $iconColor;
+  }
+}
+
+
+.btn-surface {
+  box-shadow: var(--bs-surface-border);
+  @include color(var(--tc-surface-high), var(--ic-surface-normal));
+  @include state.hover(var(--bg-surface-hover));
+  @include state.focus(var(--bs-surface-outline));
+  @include state.active(var(--bg-surface-active));
+}
+
+.btn-primary {
+  background-color: var(--bg-primary);
+  @include color(var(--tc-primary-high), var(--ic-primary-normal));
+  @include state.hover(var(--bg-primary-hover));
+  @include state.focus(var(--bs-primary-outline));
+  @include state.active(var(--bg-primary-active));
+}
+.btn-positive {
+  box-shadow: var(--bs-positive-border);
+  @include color(var(--tc-positive-high), var(--ic-positive-normal));
+  @include state.hover(var(--bg-positive-hover));
+  @include state.focus(var(--bs-positive-outline));
+  @include state.active(var(--bg-positive-active));
+}
+.btn-caution {
+  box-shadow: var(--bs-caution-border);
+  @include color(var(--tc-caution-high), var(--ic-caution-normal));
+  @include state.hover(var(--bg-caution-hover));
+  @include state.focus(var(--bs-caution-outline));
+  @include state.active(var(--bg-caution-active));
+}
+.btn-danger {
+  box-shadow: var(--bs-danger-border);
+  @include color(var(--tc-danger-high), var(--ic-danger-normal));
+  @include state.hover(var(--bg-danger-hover));
+  @include state.focus(var(--bs-danger-outline));
+  @include state.active(var(--bg-danger-active));
+}
--- a/src/app/atoms/button/Checkbox.jsx
+++ b/src/app/atoms/button/Checkbox.jsx
@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Checkbox.scss';
+
+function Checkbox({
+  variant, isActive, onToggle,
+  disabled, tabIndex,
+}) {
+  const className = `checkbox checkbox-${variant}${isActive ? ' checkbox--active' : ''}`;
+  if (onToggle === null) return <span className={className} />;
+  return (
+    // eslint-disable-next-line jsx-a11y/control-has-associated-label
+    <button
+      onClick={() => onToggle(!isActive)}
+      className={className}
+      type="button"
+      disabled={disabled}
+      tabIndex={tabIndex}
+    />
+  );
+}
+
+Checkbox.defaultProps = {
+  variant: 'primary',
+  isActive: false,
+  onToggle: null,
+  disabled: false,
+  tabIndex: 0,
+};
+
+Checkbox.propTypes = {
+  variant: PropTypes.oneOf(['primary', 'positive', 'caution', 'danger']),
+  isActive: PropTypes.bool,
+  onToggle: PropTypes.func,
+  disabled: PropTypes.bool,
+  tabIndex: PropTypes.number,
+};
+
+export default Checkbox;
--- a/src/app/atoms/button/Checkbox.scss
+++ b/src/app/atoms/button/Checkbox.scss
@ -0,0 +1,39 @@
+@use '../../partials/flex';
+@use './state';
+
+.checkbox {
+  width: 20px;
+  height: 20px;
+
+  border-radius: calc(var(--bo-radius) / 2);
+  background-color: var(--bg-surface-border);
+  box-shadow: var(--bs-surface-border);
+  cursor: pointer;
+  @include state.disabled;
+  @extend .cp-fx__row--c-c;
+
+  &--active {
+    background-color: black;
+    &::before {
+      content: "";
+      display: inline-block;
+      width: 12px;
+      height: 6px;
+      border: 6px solid white;
+      border-width: 0 0 3px 3px;
+      transform: rotateZ(-45deg) translate(1px, -1px);
+    }
+  }
+}
+.checkbox-primary.checkbox--active {
+  background-color: var(--bg-primary);
+}
+.checkbox-positive.checkbox--active {
+  background-color: var(--bg-positive);
+}
+.checkbox-caution.checkbox--active {
+  background-color: var(--bg-caution);
+}
+.checkbox-danger.checkbox--active {
+  background-color: var(--bg-danger);
+}
--- a/src/app/atoms/button/IconButton.jsx
+++ b/src/app/atoms/button/IconButton.jsx
@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './IconButton.scss';
+
+import RawIcon from '../system-icons/RawIcon';
+import Tooltip from '../tooltip/Tooltip';
+import { blurOnBubbling } from './script';
+import Text from '../text/Text';
+
+const IconButton = React.forwardRef(({
+  variant, size, type,
+  tooltip, tooltipPlacement, src,
+  onClick, tabIndex, disabled, isImage,
+  className,
+}, ref) => {
+  const btn = (
+    <button
+      ref={ref}
+      className={`ic-btn ic-btn-${variant} ${className}`}
+      onMouseUp={(e) => blurOnBubbling(e, `.ic-btn-${variant}`)}
+      onClick={onClick}
+      // eslint-disable-next-line react/button-has-type
+      type={type}
+      tabIndex={tabIndex}
+      disabled={disabled}
+    >
+      <RawIcon size={size} src={src} isImage={isImage} />
+    </button>
+  );
+  if (tooltip === null) return btn;
+  return (
+    <Tooltip
+      placement={tooltipPlacement}
+      content={<Text variant="b2">{tooltip}</Text>}
+    >
+      {btn}
+    </Tooltip>
+  );
+});
+
+IconButton.defaultProps = {
+  variant: 'surface',
+  size: 'normal',
+  type: 'button',
+  tooltip: null,
+  tooltipPlacement: 'top',
+  onClick: null,
+  tabIndex: 0,
+  disabled: false,
+  isImage: false,
+  className: '',
+};
+
+IconButton.propTypes = {
+  variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
+  size: PropTypes.oneOf(['normal', 'small', 'extra-small']),
+  type: PropTypes.oneOf(['button', 'submit', 'reset']),
+  tooltip: PropTypes.string,
+  tooltipPlacement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+  src: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
+  tabIndex: PropTypes.number,
+  disabled: PropTypes.bool,
+  isImage: PropTypes.bool,
+  className: PropTypes.string,
+};
+
+export default IconButton;
--- a/src/app/atoms/button/IconButton.scss
+++ b/src/app/atoms/button/IconButton.scss
@ -0,0 +1,56 @@
+@use 'state';
+
+.ic-btn {
+  padding: var(--sp-extra-tight);
+  border: none;
+  border-radius: var(--bo-radius);
+  background-color: transparent;
+  font-size: 0;
+  line-height: 0;
+  cursor: pointer;
+  @include state.disabled;
+}
+
+@mixin color($color) {
+  .ic-raw {
+    background-color: $color;
+  }
+}
+@mixin focus($color) {
+  &:focus {
+    outline: none;
+    background-color: $color;
+  }
+}
+
+.ic-btn-surface {
+  @include color(var(--ic-surface-normal));
+  @include state.hover(var(--bg-surface-hover));
+  @include focus(var(--bg-surface-hover));
+  @include state.active(var(--bg-surface-active));
+}
+.ic-btn-primary {
+  @include color(var(--ic-primary-normal));
+  @include state.hover(var(--bg-primary-hover));
+  @include focus(var(--bg-primary-hover));
+  @include state.active(var(--bg-primary-active));
+  background-color: var(--bg-primary);
+}
+.ic-btn-positive {
+  @include color(var(--ic-positive-normal));
+  @include state.hover(var(--bg-positive-hover));
+  @include focus(var(--bg-positive-hover));
+  @include state.active(var(--bg-positive-active));
+}
+.ic-btn-caution {
+  @include color(var(--ic-caution-normal));
+  @include state.hover(var(--bg-caution-hover));
+  @include focus(var(--bg-caution-hover));
+  @include state.active(var(--bg-caution-active));
+}
+.ic-btn-danger {
+  @include color(var(--ic-danger-normal));
+  @include state.hover(var(--bg-danger-hover));
+  @include focus(var(--bg-danger-hover));
+  @include state.active(var(--bg-danger-active));
+}
--- a/src/app/atoms/button/RadioButton.jsx
+++ b/src/app/atoms/button/RadioButton.jsx
@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './RadioButton.scss';
+
+function RadioButton({ isActive, onToggle, disabled }) {
+  if (onToggle === null) return <span className={`radio-btn${isActive ? ' radio-btn--active' : ''}`} />;
+  return (
+    // eslint-disable-next-line jsx-a11y/control-has-associated-label
+    <button
+      onClick={() => onToggle(!isActive)}
+      className={`radio-btn${isActive ? ' radio-btn--active' : ''}`}
+      type="button"
+      disabled={disabled}
+    />
+  );
+}
+
+RadioButton.defaultProps = {
+  isActive: false,
+  onToggle: null,
+  disabled: false,
+};
+
+RadioButton.propTypes = {
+  isActive: PropTypes.bool,
+  onToggle: PropTypes.func,
+  disabled: PropTypes.bool,
+};
+
+export default RadioButton;
--- a/Show more
+++ b/Show more
Author	SHA1	Message	Date
anavoi	2a30d18bd0	add presence badge in member list Potential performance issues: - In large rooms, we should only update the presence for the users shown in the scrollcontainer	2025-08-27 12:10:36 +02:00
anavoi	03298013b3	Minor dependencies update	2025-08-27 11:48:42 +02:00
anavoi	f2e0d23c30	Fix fallback messages	2025-08-21 22:53:40 +02:00
anavoi	180111a02e	Add shield icon when messaging in an encrypted room	2025-08-21 22:53:24 +02:00
anavoi	eb5e2b61c0	power level improvements changed default colors added more presets	2025-08-21 21:28:40 +02:00
Ajay Bura	724174f5fa	New add existing room/space modal (#2451 )	2025-08-21 21:28:40 +02:00
Ajay Bura	865467c7ca	Fix message button opens left dm room (#2453 )	2025-08-21 21:28:40 +02:00
Ajay Bura	b0f03a611a	Fix incorrectly parsed mxid (#2452 )	2025-08-21 21:28:40 +02:00
Krishan	ac1d398d42	Release v4.9.1 (#2446 )	2025-08-21 21:28:40 +02:00
Ajay Bura	5dc0cf97e5	Add new join with address prompt (#2442 )	2025-08-21 21:26:22 +02:00
Ajay Bura	2cda1812ce	Fix type error when accessing FileList (#2441 )	2025-08-21 21:26:22 +02:00
Ajay Bura	0ee4a2aa4d	Open user profile at around mouse anchor (#2440 )	2025-08-21 21:26:22 +02:00
Ajay Bura	db4aaa202a	Hide block user button for own profile (#2439 )	2025-08-21 21:26:22 +02:00
Ajay Bura	17dfbc47ce	Fix room v12 mention pills (#2438 )	2025-08-21 21:26:22 +02:00
Ajay Bura	198919454c	Fix missing creators support using via (#2431 ) * add additional_creators in IRoomCreateContent type * use creators in getViaServers * consider creators in guessing perfect parent	2025-08-21 21:26:22 +02:00
Ajay Bura	d40818af89	Open tombstone space as space (#2428 )	2025-08-21 21:26:22 +02:00
Krishan	8d9b128501	Release v4.9.0 (#2421 )	2025-08-21 21:26:22 +02:00
Ajay Bura	fa575fc09d	Support room version 12 (#2399 ) * WIP - support room version 12 * add room creators hook * revert changes from powerlevels * improve use room creators hook * add hook to get dm users * add options to add creators in create room/space * add member item component in member drawer * remove unused import * extract member drawer header component * get room creators as set only if room version support them * add room permissions hook * support room v12 creators power * make predecessor event id optional * add info about founders in permissions * allow to create infinite powers to room creators * allow everyone with permission to create infinite power * handle additional creators in room upgrade * add option to follow space tombstone	2025-08-21 21:24:05 +02:00
Ajay Bura	a79164318c	Redesign user profile view (#2396 ) * WIP - new profile view * render common rooms in user profile * add presence component * WIP - room user profile * temp hide profile button * show mutual rooms in spaces, rooms and direct messages categories * add message button * add option to change user powers in profile * improve ban info and option to unban * add share user button in user profile * add option to block user in user profile * improve blocked user alert body * add moderation tool in user profile * open profile view on left side in member drawer * open new user profile in all places	2025-08-21 21:16:38 +02:00
anavoi	9fc30bff57	change tooltip delay in sidebar items	2025-08-21 21:00:52 +02:00
anavoi	1e2548ad11	power level improvements changed default colors added more presets	2025-08-21 21:00:43 +02:00
anavoi	10d9e703f5	hide connecting header when syncing	2025-08-09 12:03:47 +02:00
anavoi	5f28824b8a	update source code links and branding changes	2025-08-09 11:03:10 +02:00