Client: Header & Menu & Icons (#8770)

* header revamp - wip

* fix webpack fonts

* wip icons

* fix compilation errors

* implement icons loading without iconmoo

* new svg implementation

* wip

* fix issues with svgs

* fix issues with svgs

* fix bits svg

* fix displaying of pet in avatar

* avatar class icon

* no party header

* update navigation

* split code by route

* round gems and gp

* add string for faqs

* fix icons in css

npm-shrinkwrap.json

@@ -541,6 +541,11 @@
       "from": "babel-core@>=6.0.0 <7.0.0",
       "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.24.1.tgz"
     },
+    "babel-eslint": {
+      "version": "7.2.3",
+      "from": "babel-eslint@latest",
+      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-7.2.3.tgz"
+    },
     "babel-generator": {
       "version": "6.24.1",
       "from": "babel-generator@>=6.24.1 <7.0.0",
@@ -630,6 +635,11 @@
       "from": "babel-plugin-syntax-async-functions@>=6.13.0 <7.0.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz"
     },
+    "babel-plugin-syntax-dynamic-import": {
+      "version": "6.18.0",
+      "from": "babel-plugin-syntax-dynamic-import@latest",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz"
+    },
     "babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
       "from": "babel-plugin-syntax-object-rest-spread@>=6.8.0 <7.0.0",
@@ -4198,6 +4208,700 @@
       "from": "fs.realpath@>=1.0.0 <2.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
     },
+    "fsevents": {
+      "version": "1.1.1",
+      "from": "fsevents@>=1.0.0 <2.0.0",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.1.1.tgz",
+      "optional": true,
+      "dependencies": {
+        "abbrev": {
+          "version": "1.1.0",
+          "from": "abbrev@>=1.0.0 <2.0.0",
+          "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.0.tgz",
+          "optional": true
+        },
+        "ansi-regex": {
+          "version": "2.1.1",
+          "from": "ansi-regex@>=2.0.0 <3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz"
+        },
+        "ansi-styles": {
+          "version": "2.2.1",
+          "from": "ansi-styles@>=2.2.1 <3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "optional": true
+        },
+        "aproba": {
+          "version": "1.1.1",
+          "from": "aproba@>=1.0.3 <2.0.0",
+          "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.1.1.tgz",
+          "optional": true
+        },
+        "are-we-there-yet": {
+          "version": "1.1.2",
+          "from": "are-we-there-yet@>=1.1.2 <1.2.0",
+          "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.2.tgz",
+          "optional": true
+        },
+        "asn1": {
+          "version": "0.2.3",
+          "from": "asn1@>=0.2.3 <0.3.0",
+          "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.3.tgz",
+          "optional": true
+        },
+        "assert-plus": {
+          "version": "0.2.0",
+          "from": "assert-plus@>=0.2.0 <0.3.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz",
+          "optional": true
+        },
+        "asynckit": {
+          "version": "0.4.0",
+          "from": "asynckit@>=0.4.0 <0.5.0",
+          "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+          "optional": true
+        },
+        "aws-sign2": {
+          "version": "0.6.0",
+          "from": "aws-sign2@>=0.6.0 <0.7.0",
+          "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",
+          "optional": true
+        },
+        "aws4": {
+          "version": "1.6.0",
+          "from": "aws4@>=1.2.1 <2.0.0",
+          "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.6.0.tgz",
+          "optional": true
+        },
+        "balanced-match": {
+          "version": "0.4.2",
+          "from": "balanced-match@>=0.4.1 <0.5.0",
+          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz"
+        },
+        "bcrypt-pbkdf": {
+          "version": "1.0.1",
+          "from": "bcrypt-pbkdf@>=1.0.0 <2.0.0",
+          "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz",
+          "optional": true
+        },
+        "block-stream": {
+          "version": "0.0.9",
+          "from": "block-stream@*",
+          "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz"
+        },
+        "boom": {
+          "version": "2.10.1",
+          "from": "boom@>=2.0.0 <3.0.0",
+          "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz"
+        },
+        "brace-expansion": {
+          "version": "1.1.6",
+          "from": "brace-expansion@>=1.0.0 <2.0.0",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.6.tgz"
+        },
+        "buffer-shims": {
+          "version": "1.0.0",
+          "from": "buffer-shims@>=1.0.0 <2.0.0",
+          "resolved": "https://registry.npmjs.org/buffer-shims/-/buffer-shims-1.0.0.tgz"
+        },
+        "caseless": {
+          "version": "0.11.0",
+          "from": "caseless@>=0.11.0 <0.12.0",
+          "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.11.0.tgz",
+          "optional": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "from": "chalk@>=1.1.1 <2.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "optional": true
+        },
+        "code-point-at": {
+          "version": "1.1.0",
+          "from": "code-point-at@>=1.0.0 <2.0.0",
+          "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz"
+        },
+        "combined-stream": {
+          "version": "1.0.5",
+          "from": "combined-stream@>=1.0.5 <1.1.0",
+          "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz"
+        },
+        "commander": {
+          "version": "2.9.0",
+          "from": "commander@>=2.9.0 <3.0.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.9.0.tgz",
+          "optional": true
+        },
+        "concat-map": {
+          "version": "0.0.1",
+          "from": "concat-map@0.0.1",
+          "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
+        },
+        "console-control-strings": {
+          "version": "1.1.0",
+          "from": "console-control-strings@>=1.1.0 <1.2.0",
+          "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz"
+        },
+        "core-util-is": {
+          "version": "1.0.2",
+          "from": "core-util-is@>=1.0.0 <1.1.0",
+          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz"
+        },
+        "cryptiles": {
+          "version": "2.0.5",
+          "from": "cryptiles@>=2.0.0 <3.0.0",
+          "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz",
+          "optional": true
+        },
+        "dashdash": {
+          "version": "1.14.1",
+          "from": "dashdash@>=1.12.0 <2.0.0",
+          "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
+          "optional": true,
+          "dependencies": {
+            "assert-plus": {
+              "version": "1.0.0",
+              "from": "assert-plus@>=1.0.0 <2.0.0",
+              "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+              "optional": true
+            }
+          }
+        },
+        "debug": {
+          "version": "2.2.0",
+          "from": "debug@>=2.2.0 <2.3.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.2.0.tgz",
+          "optional": true
+        },
+        "deep-extend": {
+          "version": "0.4.1",
+          "from": "deep-extend@>=0.4.0 <0.5.0",
+          "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.4.1.tgz",
+          "optional": true
+        },
+        "delayed-stream": {
+          "version": "1.0.0",
+          "from": "delayed-stream@>=1.0.0 <1.1.0",
+          "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz"
+        },
+        "delegates": {
+          "version": "1.0.0",
+          "from": "delegates@>=1.0.0 <2.0.0",
+          "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+          "optional": true
+        },
+        "ecc-jsbn": {
+          "version": "0.1.1",
+          "from": "ecc-jsbn@>=0.1.1 <0.2.0",
+          "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz",
+          "optional": true
+        },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "from": "escape-string-regexp@>=1.0.2 <2.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "optional": true
+        },
+        "extend": {
+          "version": "3.0.0",
+          "from": "extend@>=3.0.0 <3.1.0",
+          "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.0.tgz",
+          "optional": true
+        },
+        "extsprintf": {
+          "version": "1.0.2",
+          "from": "extsprintf@1.0.2",
+          "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.0.2.tgz"
+        },
+        "forever-agent": {
+          "version": "0.6.1",
+          "from": "forever-agent@>=0.6.1 <0.7.0",
+          "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
+          "optional": true
+        },
+        "form-data": {
+          "version": "2.1.2",
+          "from": "form-data@>=2.1.1 <2.2.0",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.2.tgz",
+          "optional": true
+        },
+        "fs.realpath": {
+          "version": "1.0.0",
+          "from": "fs.realpath@>=1.0.0 <2.0.0",
+          "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
+        },
+        "fstream": {
+          "version": "1.0.10",
+          "from": "fstream@>=1.0.2 <2.0.0",
+          "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.10.tgz"
+        },
+        "fstream-ignore": {
+          "version": "1.0.5",
+          "from": "fstream-ignore@>=1.0.5 <1.1.0",
+          "resolved": "https://registry.npmjs.org/fstream-ignore/-/fstream-ignore-1.0.5.tgz",
+          "optional": true
+        },
+        "gauge": {
+          "version": "2.7.3",
+          "from": "gauge@>=2.7.1 <2.8.0",
+          "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.3.tgz",
+          "optional": true
+        },
+        "generate-function": {
+          "version": "2.0.0",
+          "from": "generate-function@>=2.0.0 <3.0.0",
+          "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.0.0.tgz",
+          "optional": true
+        },
+        "generate-object-property": {
+          "version": "1.2.0",
+          "from": "generate-object-property@>=1.1.0 <2.0.0",
+          "resolved": "https://registry.npmjs.org/generate-object-property/-/generate-object-property-1.2.0.tgz",
+          "optional": true
+        },
+        "getpass": {
+          "version": "0.1.6",
+          "from": "getpass@>=0.1.1 <0.2.0",
+          "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.6.tgz",
+          "optional": true,
+          "dependencies": {
+            "assert-plus": {
+              "version": "1.0.0",
+              "from": "assert-plus@>=1.0.0 <2.0.0",
+              "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+              "optional": true
+            }
+          }
+        },
+        "glob": {
+          "version": "7.1.1",
+          "from": "glob@>=7.0.5 <8.0.0",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.1.tgz"
+        },
+        "graceful-fs": {
+          "version": "4.1.11",
+          "from": "graceful-fs@>=4.1.2 <5.0.0",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz"
+        },
+        "graceful-readlink": {
+          "version": "1.0.1",
+          "from": "graceful-readlink@>=1.0.0",
+          "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
+          "optional": true
+        },
+        "har-validator": {
+          "version": "2.0.6",
+          "from": "har-validator@>=2.0.6 <2.1.0",
+          "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-2.0.6.tgz",
+          "optional": true
+        },
+        "has-ansi": {
+          "version": "2.0.0",
+          "from": "has-ansi@>=2.0.0 <3.0.0",
+          "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+          "optional": true
+        },
+        "has-unicode": {
+          "version": "2.0.1",
+          "from": "has-unicode@>=2.0.0 <3.0.0",
+          "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+          "optional": true
+        },
+        "hawk": {
+          "version": "3.1.3",
+          "from": "hawk@>=3.1.3 <3.2.0",
+          "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz",
+          "optional": true
+        },
+        "hoek": {
+          "version": "2.16.3",
+          "from": "hoek@>=2.0.0 <3.0.0",
+          "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz"
+        },
+        "http-signature": {
+          "version": "1.1.1",
+          "from": "http-signature@>=1.1.0 <1.2.0",
+          "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz",
+          "optional": true
+        },
+        "inflight": {
+          "version": "1.0.6",
+          "from": "inflight@>=1.0.4 <2.0.0",
+          "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz"
+        },
+        "inherits": {
+          "version": "2.0.3",
+          "from": "inherits@>=2.0.1 <2.1.0",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz"
+        },
+        "ini": {
+          "version": "1.3.4",
+          "from": "ini@>=1.3.0 <1.4.0",
+          "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.4.tgz",
+          "optional": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "from": "is-fullwidth-code-point@>=1.0.0 <2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz"
+        },
+        "is-my-json-valid": {
+          "version": "2.15.0",
+          "from": "is-my-json-valid@>=2.12.4 <3.0.0",
+          "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.15.0.tgz",
+          "optional": true
+        },
+        "is-property": {
+          "version": "1.0.2",
+          "from": "is-property@>=1.0.0 <2.0.0",
+          "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
+          "optional": true
+        },
+        "is-typedarray": {
+          "version": "1.0.0",
+          "from": "is-typedarray@>=1.0.0 <1.1.0",
+          "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+          "optional": true
+        },
+        "isarray": {
+          "version": "1.0.0",
+          "from": "isarray@>=1.0.0 <1.1.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
+        },
+        "isstream": {
+          "version": "0.1.2",
+          "from": "isstream@>=0.1.2 <0.2.0",
+          "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
+          "optional": true
+        },
+        "jodid25519": {
+          "version": "1.0.2",
+          "from": "jodid25519@>=1.0.0 <2.0.0",
+          "resolved": "https://registry.npmjs.org/jodid25519/-/jodid25519-1.0.2.tgz",
+          "optional": true
+        },
+        "jsbn": {
+          "version": "0.1.1",
+          "from": "jsbn@>=0.1.0 <0.2.0",
+          "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
+          "optional": true
+        },
+        "json-schema": {
+          "version": "0.2.3",
+          "from": "json-schema@0.2.3",
+          "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
+          "optional": true
+        },
+        "json-stringify-safe": {
+          "version": "5.0.1",
+          "from": "json-stringify-safe@>=5.0.1 <5.1.0",
+          "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+          "optional": true
+        },
+        "jsonpointer": {
+          "version": "4.0.1",
+          "from": "jsonpointer@>=4.0.0 <5.0.0",
+          "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-4.0.1.tgz",
+          "optional": true
+        },
+        "jsprim": {
+          "version": "1.3.1",
+          "from": "jsprim@>=1.2.2 <2.0.0",
+          "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.3.1.tgz",
+          "optional": true
+        },
+        "mime-db": {
+          "version": "1.26.0",
+          "from": "mime-db@>=1.26.0 <1.27.0",
+          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.26.0.tgz"
+        },
+        "mime-types": {
+          "version": "2.1.14",
+          "from": "mime-types@>=2.1.7 <2.2.0",
+          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.14.tgz"
+        },
+        "minimatch": {
+          "version": "3.0.3",
+          "from": "minimatch@>=3.0.2 <4.0.0",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.3.tgz"
+        },
+        "minimist": {
+          "version": "0.0.8",
+          "from": "minimist@0.0.8",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz"
+        },
+        "mkdirp": {
+          "version": "0.5.1",
+          "from": "mkdirp@>=0.5.1 <0.6.0",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz"
+        },
+        "ms": {
+          "version": "0.7.1",
+          "from": "ms@0.7.1",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.1.tgz",
+          "optional": true
+        },
+        "node-pre-gyp": {
+          "version": "0.6.33",
+          "from": "node-pre-gyp@>=0.6.29 <0.7.0",
+          "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.6.33.tgz",
+          "optional": true
+        },
+        "nopt": {
+          "version": "3.0.6",
+          "from": "nopt@>=3.0.6 <3.1.0",
+          "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
+          "optional": true
+        },
+        "npmlog": {
+          "version": "4.0.2",
+          "from": "npmlog@>=4.0.1 <5.0.0",
+          "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.0.2.tgz",
+          "optional": true
+        },
+        "number-is-nan": {
+          "version": "1.0.1",
+          "from": "number-is-nan@>=1.0.0 <2.0.0",
+          "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz"
+        },
+        "oauth-sign": {
+          "version": "0.8.2",
+          "from": "oauth-sign@>=0.8.1 <0.9.0",
+          "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz",
+          "optional": true
+        },
+        "object-assign": {
+          "version": "4.1.1",
+          "from": "object-assign@>=4.1.0 <5.0.0",
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+          "optional": true
+        },
+        "once": {
+          "version": "1.4.0",
+          "from": "once@>=1.3.0 <2.0.0",
+          "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz"
+        },
+        "path-is-absolute": {
+          "version": "1.0.1",
+          "from": "path-is-absolute@>=1.0.0 <2.0.0",
+          "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz"
+        },
+        "pinkie": {
+          "version": "2.0.4",
+          "from": "pinkie@>=2.0.0 <3.0.0",
+          "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
+          "optional": true
+        },
+        "pinkie-promise": {
+          "version": "2.0.1",
+          "from": "pinkie-promise@>=2.0.0 <3.0.0",
+          "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
+          "optional": true
+        },
+        "process-nextick-args": {
+          "version": "1.0.7",
+          "from": "process-nextick-args@>=1.0.6 <1.1.0",
+          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz"
+        },
+        "punycode": {
+          "version": "1.4.1",
+          "from": "punycode@>=1.4.1 <2.0.0",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+          "optional": true
+        },
+        "qs": {
+          "version": "6.3.1",
+          "from": "qs@>=6.3.0 <6.4.0",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.3.1.tgz",
+          "optional": true
+        },
+        "rc": {
+          "version": "1.1.7",
+          "from": "rc@>=1.1.6 <1.2.0",
+          "resolved": "https://registry.npmjs.org/rc/-/rc-1.1.7.tgz",
+          "optional": true,
+          "dependencies": {
+            "minimist": {
+              "version": "1.2.0",
+              "from": "minimist@>=1.2.0 <2.0.0",
+              "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+              "optional": true
+            }
+          }
+        },
+        "readable-stream": {
+          "version": "2.2.2",
+          "from": "readable-stream@>=2.0.0 <3.0.0||>=1.1.13 <2.0.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.2.tgz",
+          "optional": true
+        },
+        "request": {
+          "version": "2.79.0",
+          "from": "request@>=2.79.0 <3.0.0",
+          "resolved": "https://registry.npmjs.org/request/-/request-2.79.0.tgz",
+          "optional": true
+        },
+        "rimraf": {
+          "version": "2.5.4",
+          "from": "rimraf@>=2.5.4 <2.6.0",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.5.4.tgz"
+        },
+        "semver": {
+          "version": "5.3.0",
+          "from": "semver@>=5.3.0 <5.4.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+          "optional": true
+        },
+        "set-blocking": {
+          "version": "2.0.0",
+          "from": "set-blocking@>=2.0.0 <2.1.0",
+          "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+          "optional": true
+        },
+        "signal-exit": {
+          "version": "3.0.2",
+          "from": "signal-exit@>=3.0.0 <4.0.0",
+          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
+          "optional": true
+        },
+        "sntp": {
+          "version": "1.0.9",
+          "from": "sntp@>=1.0.0 <2.0.0",
+          "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
+          "optional": true
+        },
+        "sshpk": {
+          "version": "1.10.2",
+          "from": "sshpk@>=1.7.0 <2.0.0",
+          "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.10.2.tgz",
+          "optional": true,
+          "dependencies": {
+            "assert-plus": {
+              "version": "1.0.0",
+              "from": "assert-plus@>=1.0.0 <2.0.0",
+              "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+              "optional": true
+            }
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "from": "string_decoder@>=0.10.0 <0.11.0",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "from": "string-width@>=1.0.1 <2.0.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz"
+        },
+        "stringstream": {
+          "version": "0.0.5",
+          "from": "stringstream@>=0.0.4 <0.1.0",
+          "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
+          "optional": true
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "from": "strip-ansi@>=3.0.1 <4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz"
+        },
+        "strip-json-comments": {
+          "version": "2.0.1",
+          "from": "strip-json-comments@>=2.0.1 <2.1.0",
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+          "optional": true
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "from": "supports-color@>=2.0.0 <3.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "optional": true
+        },
+        "tar": {
+          "version": "2.2.1",
+          "from": "tar@>=2.2.1 <2.3.0",
+          "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz"
+        },
+        "tar-pack": {
+          "version": "3.3.0",
+          "from": "tar-pack@>=3.3.0 <3.4.0",
+          "resolved": "https://registry.npmjs.org/tar-pack/-/tar-pack-3.3.0.tgz",
+          "optional": true,
+          "dependencies": {
+            "once": {
+              "version": "1.3.3",
+              "from": "once@>=1.3.3 <1.4.0",
+              "resolved": "https://registry.npmjs.org/once/-/once-1.3.3.tgz",
+              "optional": true
+            },
+            "readable-stream": {
+              "version": "2.1.5",
+              "from": "readable-stream@>=2.1.4 <2.2.0",
+              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.1.5.tgz",
+              "optional": true
+            }
+          }
+        },
+        "tough-cookie": {
+          "version": "2.3.2",
+          "from": "tough-cookie@>=2.3.0 <2.4.0",
+          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.2.tgz",
+          "optional": true
+        },
+        "tunnel-agent": {
+          "version": "0.4.3",
+          "from": "tunnel-agent@>=0.4.1 <0.5.0",
+          "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.3.tgz",
+          "optional": true
+        },
+        "tweetnacl": {
+          "version": "0.14.5",
+          "from": "tweetnacl@>=0.14.0 <0.15.0",
+          "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
+          "optional": true
+        },
+        "uid-number": {
+          "version": "0.0.6",
+          "from": "uid-number@>=0.0.6 <0.1.0",
+          "resolved": "https://registry.npmjs.org/uid-number/-/uid-number-0.0.6.tgz",
+          "optional": true
+        },
+        "util-deprecate": {
+          "version": "1.0.2",
+          "from": "util-deprecate@>=1.0.1 <1.1.0",
+          "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
+        },
+        "uuid": {
+          "version": "3.0.1",
+          "from": "uuid@>=3.0.0 <4.0.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.0.1.tgz",
+          "optional": true
+        },
+        "verror": {
+          "version": "1.3.6",
+          "from": "verror@1.3.6",
+          "resolved": "https://registry.npmjs.org/verror/-/verror-1.3.6.tgz",
+          "optional": true
+        },
+        "wide-align": {
+          "version": "1.1.0",
+          "from": "wide-align@>=1.1.0 <2.0.0",
+          "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.0.tgz",
+          "optional": true
+        },
+        "wrappy": {
+          "version": "1.0.2",
+          "from": "wrappy@>=1.0.0 <2.0.0",
+          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
+        },
+        "xtend": {
+          "version": "4.0.1",
+          "from": "xtend@>=4.0.0 <5.0.0",
+          "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
+          "optional": true
+        }
+      }
+    },
     "fstream": {
       "version": "1.0.11",
       "from": "fstream@>=1.0.2 <2.0.0",
@@ -10808,6 +11512,11 @@
       "resolved": "https://registry.npmjs.org/simple-fmt/-/simple-fmt-0.1.0.tgz",
       "dev": true
     },
+    "simple-html-tokenizer": {
+      "version": "0.1.1",
+      "from": "simple-html-tokenizer@>=0.1.1 <0.2.0",
+      "resolved": "https://registry.npmjs.org/simple-html-tokenizer/-/simple-html-tokenizer-0.1.1.tgz"
+    },
     "simple-is": {
       "version": "0.2.0",
       "from": "simple-is@>=0.2.0 <0.3.0",
@@ -11507,6 +12216,28 @@
       "from": "supports-color@>=2.0.0 <3.0.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz"
     },
+    "svg-inline-loader": {
+      "version": "0.7.1",
+      "from": "svg-inline-loader@latest",
+      "resolved": "https://registry.npmjs.org/svg-inline-loader/-/svg-inline-loader-0.7.1.tgz"
+    },
+    "svg-url-loader": {
+      "version": "2.0.2",
+      "from": "svg-url-loader@latest",
+      "resolved": "https://registry.npmjs.org/svg-url-loader/-/svg-url-loader-2.0.2.tgz",
+      "dependencies": {
+        "file-loader": {
+          "version": "0.10.0",
+          "from": "file-loader@0.10.0",
+          "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-0.10.0.tgz"
+        },
+        "loader-utils": {
+          "version": "0.2.16",
+          "from": "loader-utils@0.2.16",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.16.tgz"
+        }
+      }
+    },
     "svgo": {
       "version": "0.7.2",
       "from": "svgo@>=0.7.0 <0.8.0",
@@ -11534,6 +12265,18 @@
         }
       }
     },
+    "svgo-loader": {
+      "version": "1.2.1",
+      "from": "svgo-loader@latest",
+      "resolved": "https://registry.npmjs.org/svgo-loader/-/svgo-loader-1.2.1.tgz",
+      "dependencies": {
+        "loader-utils": {
+          "version": "1.1.0",
+          "from": "loader-utils@>=1.0.3 <2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.1.0.tgz"
+        }
+      }
+    },
     "syntax-error": {
       "version": "1.3.0",
       "from": "syntax-error@>=1.1.1 <2.0.0",
@@ -12517,16 +13260,16 @@
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.3.1.tgz",
       "dependencies": {
         "async": {
-          "version": "2.4.0",
+          "version": "2.4.1",
-          "from": "async@>=2.1.2 <3.0.0",
+          "from": "async@^2.1.2",
-          "resolved": "https://registry.npmjs.org/async/-/async-2.4.0.tgz"
+          "resolved": "https://registry.npmjs.org/async/-/async-2.4.1.tgz"
         }
       }
     },
     "webpack": {
-      "version": "2.5.1",
+      "version": "2.6.1",
-      "from": "webpack@>=2.2.1 <3.0.0",
+      "from": "webpack@2.6.1",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-2.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-2.6.1.tgz",
       "dependencies": {
         "acorn": {
           "version": "5.0.3",
@@ -12534,9 +13277,9 @@
           "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.0.3.tgz"
         },
         "async": {
-          "version": "2.4.0",
+          "version": "2.4.1",
           "from": "async@>=2.1.2 <3.0.0",
-          "resolved": "https://registry.npmjs.org/async/-/async-2.4.0.tgz"
+          "resolved": "https://registry.npmjs.org/async/-/async-2.4.1.tgz"
         },
         "source-list-map": {
           "version": "1.1.2",
@@ -12549,9 +13292,9 @@
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz"
         },
         "uglify-js": {
-          "version": "2.8.26",
+          "version": "2.8.28",
-          "from": "uglify-js@>=2.8.5 <3.0.0",
+          "from": "uglify-js@>=2.8.27 <3.0.0",
-          "resolved": "http://registry.npmjs.org/uglify-js/-/uglify-js-2.8.26.tgz",
+          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.28.tgz",
           "dependencies": {
             "yargs": {
               "version": "3.10.0",

package.json

@@ -15,8 +15,10 @@
     "aws-sdk": "^2.0.25",
     "axios": "^0.16.0",
     "babel-core": "^6.0.0",
+    "babel-eslint": "^7.2.3",
     "babel-loader": "^6.0.0",
     "babel-plugin-syntax-async-functions": "^6.13.0",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-transform-async-to-module-method": "^6.8.0",
     "babel-plugin-transform-object-rest-spread": "^6.16.0",
     "babel-plugin-transform-regenerator": "^6.16.1",
@@ -109,6 +111,9 @@
     "shelljs": "^0.7.6",
     "stripe": "^4.2.0",
     "superagent": "^3.4.3",
+    "svg-inline-loader": "^0.7.1",
+    "svg-url-loader": "^2.0.2",
+    "svgo-loader": "^1.2.1",
     "universal-analytics": "~0.3.2",
     "url-loader": "^0.5.7",
     "useragent": "^2.1.9",
@@ -208,6 +213,7 @@
     "nightwatch": "^0.9.12",
     "phantomjs-prebuilt": "^2.1.12",
     "protractor": "^3.1.1",
+    "raw-loader": "^0.5.1",
     "require-again": "^2.0.0",
     "rewire": "^2.3.3",
     "selenium-server": "^3.0.1",

test/client/unit/specs/filters/roundBigNumber.js

@@ -0,0 +1,20 @@
+import roundBigNumberFilter from 'client/filters/roundBigNumber';
+
+describe('round big number filter', () => {
+  it('can round a decimal number', () => {
+    expect(roundBigNumberFilter(4.567)).to.equal(4.57);
+    expect(roundBigNumberFilter(4.562)).to.equal(4.56);
+  });
+
+  it('can round thousands', () => {
+    expect(roundBigNumberFilter(70065)).to.equal('70.1k');
+  });
+
+  it('can round milions', () => {
+    expect(roundBigNumberFilter(10000987)).to.equal('10.0m');
+  });
+
+  it('can round bilions', () => {
+    expect(roundBigNumberFilter(1000000000)).to.equal('1.0b');
+  });
+});

webpack/webpack.base.conf.js

@@ -83,7 +83,7 @@ const baseConfig = {
         },
       },
       {
-        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        test: /\.(png|jpe?g|gif)(\?.*)?$/,
         loader: 'url-loader',
         query: {
           limit: 10000,
@@ -98,6 +98,22 @@ const baseConfig = {
           name: utils.assetsPath('fonts/[name].[hash:7].[ext]'),
         },
       },
+      {
+        test: /\.svg$/,
+        use: [
+          { loader: 'svg-inline-loader' },
+          { loader: 'svgo-loader' },
+        ],
+        exclude: [path.resolve(projectRoot, 'website/client/assets/svg/for-css')],
+      },
+      {
+        test: /\.svg$/,
+        use: [
+          { loader: 'svg-url-loader' },
+          { loader: 'svgo-loader' },
+        ],
+        include: [path.resolve(projectRoot, 'website/client/assets/svg/for-css')],
+      },
     ],
   },
 };

website/client/.babelrc

@@ -15,6 +15,7 @@
   "plugins": [
     "transform-object-rest-spread",
     "syntax-async-functions",
+    "syntax-dynamic-import",
     "transform-regenerator",
   ],
 }

website/client/.eslintrc

@@ -8,5 +8,9 @@
   ],
   "globals": {
     "$": true,
+  },
+  "parser": "babel-eslint",
+  "rules": {
+    "strict": 0
   }
 }

website/client/assets/guilds/gold-guild-badge.svg

@@ -1,18 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="78" height="76" viewBox="0 0 78 76">
-    <defs>
-        <path id="a" d="M35 0L0 15.235C0 45.705 4.255 62.941 35 76c30.745-13.059 35-30.294 35-60.765L35 0z"/>
-        <rect id="b" width="70" height="24" y="42" rx="12"/>
-    </defs>
-    <g fill="none" fill-rule="evenodd">
-        <g transform="translate(4)">
-            <use fill="#FFBC5A" xlink:href="#a"/>
-            <path stroke="#DF911E" stroke-width="10" d="M34.03 5.031l4.443 1.934 12.031 5.237 12.032 5.237 2.445 1.065c-.183 14.83-1.676 23.96-5.418 31.395C55.326 58.32 47.803 64.81 35 70.545 22.197 64.81 14.674 58.32 10.437 49.9c-3.742-7.435-5.235-16.565-5.418-31.395L35 5.454l-.97-.423z"/>
-            <path stroke="#FFA623" stroke-width="6" d="M34.421 3.02a506596810.815 506596810.815 0 0 0 16.882 7.348l12.03 5.237 3.66 1.593c-.111 15.9-1.621 25.609-5.643 33.6C56.795 59.848 48.69 66.734 35 72.733c-13.691-6-21.795-12.885-26.35-21.935-4.022-7.991-5.532-17.7-5.643-33.6L35 3.272l-.579-.252z"/>
-        </g>
-        <g transform="translate(4)">
-            <use fill="#FFF" xlink:href="#b"/>
-            <rect width="74" height="28" x="-2" y="40" stroke="#DF911E" stroke-width="4" rx="14"/>
-        </g>
-        <path fill="#DF911E" d="M31 30.667V34h16v-3.333C47 27.557 41.668 26 39 26c-2.666 0-8 1.556-8 4.667zM39.006 16A4.005 4.005 0 0 0 35 20c0 2.208 1.795 4 4.006 4A3.993 3.993 0 0 0 43 20c0-2.207-1.781-4-3.994-4"/>
-    </g>
-</svg>

website/client/assets/header/svg/bits.svg

@@ -1,96 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="104px" height="56px" viewBox="0 0 104 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: sketchtool 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
-    <title>5E629D7C-1B16-4B17-8A09-5769348D3BB0</title>
-    <desc>Created with sketchtool.</desc>
-    <defs></defs>
-    <g id="Navigation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Navigation---Desktop-HD" transform="translate(-1336.000000, 0.000000)">
-            <g id="Navigation">
-                <g id="Bits" transform="translate(1336.000000, 0.000000)">
-                    <rect id="Rectangle" fill="#6133B4" x="24" y="0" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy" fill="#4F2A93" x="16" y="0" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-40" fill="#4F2A93" x="24" y="8" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-100" fill="#432476" x="16" y="8" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-21" fill="#432476" x="32" y="0" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-41" fill="#432476" x="32" y="8" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-24" fill="#4F2A93" x="40" y="0" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-42" fill="#432476" x="40" y="8" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-28" fill="#432476" x="48" y="0" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-43" fill="#6133B4" x="48" y="8" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-29" fill="#6133B4" x="56" y="0" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-44" fill="#4F2A93" x="56" y="8" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-34" fill="#6133B4" x="64" y="0" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-45" fill="#4F2A93" x="64" y="8" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-35" fill="#4F2A93" x="72" y="0" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-46" fill="#6133B4" x="72" y="8" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-37" fill="#6133B4" x="80" y="0" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-47" fill="#4F2A93" x="80" y="8" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-38" fill="#6133B4" x="88" y="0" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-48" fill="#4F2A93" x="88" y="8" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-39" fill="#432476" x="96" y="0" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-49" fill="#6133B4" x="96" y="8" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-59" fill="#432476" x="24" y="16" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-101" fill="#432476" x="16" y="16" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-109" fill="#4F2A93" x="8" y="16" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-58" fill="#6133B4" x="32" y="16" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-57" fill="#4F2A93" x="40" y="16" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-56" fill="#4F2A93" x="48" y="16" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-55" fill="#4F2A93" x="56" y="16" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-54" fill="#6133B4" x="64" y="16" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-53" fill="#4F2A93" x="72" y="16" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-52" fill="#432476" x="80" y="16" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-51" fill="#4F2A93" x="88" y="16" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-50" fill="#4F2A93" x="96" y="16" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-69" fill="#432476" x="24" y="24" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-102" fill="#6133B4" x="16" y="24" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-68" fill="#4F2A93" x="32" y="24" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-67" fill="#432476" x="40" y="24" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-66" fill="#432476" x="48" y="24" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-65" fill="#4F2A93" x="56" y="24" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-64" fill="#432476" x="64" y="24" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-63" fill="#4F2A93" x="72" y="24" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-62" fill="#4F2A93" x="80" y="24" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-61" fill="#432476" x="88" y="24" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-60" fill="#4F2A93" x="96" y="24" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-79" fill="#432476" x="24" y="32" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-103" fill="#432476" x="16" y="32" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-106" fill="#432476" x="8" y="32" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-78" fill="#6133B4" x="32" y="32" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-77" fill="#4F2A93" x="40" y="32" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-76" fill="#6133B4" x="48" y="32" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-75" fill="#432476" x="56" y="32" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-74" fill="#4F2A93" x="64" y="32" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-73" fill="#6133B4" x="72" y="32" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-72" fill="#4F2A93" x="80" y="32" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-71" fill="#6133B4" x="88" y="32" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-70" fill="#4F2A93" x="96" y="32" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-89" fill="#4F2A93" x="24" y="40" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-104" fill="#432476" x="16" y="40" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-107" fill="#432476" x="8" y="40" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-108" fill="#4F2A93" x="0" y="40" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-88" fill="#432476" x="32" y="40" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-87" fill="#432476" x="40" y="40" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-86" fill="#6133B4" x="48" y="40" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-85" fill="#6133B4" x="56" y="40" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-84" fill="#6133B4" x="64" y="40" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-83" fill="#432476" x="72" y="40" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-82" fill="#432476" x="80" y="40" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-81" fill="#6133B4" x="88" y="40" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-80" fill="#432476" x="96" y="40" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-99" fill="#6133B4" x="24" y="48" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-105" fill="#4F2A93" x="16" y="48" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-98" fill="#4F2A93" x="32" y="48" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-97" fill="#432476" x="40" y="48" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-96" fill="#4F2A93" x="48" y="48" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-95" fill="#432476" x="56" y="48" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-94" fill="#4F2A93" x="64" y="48" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-93" fill="#4F2A93" x="72" y="48" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-92" fill="#6133B4" x="80" y="48" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-91" fill="#432476" x="88" y="48" width="8" height="8"></rect>
-                    <rect id="Rectangle-Copy-90" fill="#6133B4" x="96" y="48" width="8" height="8"></rect>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

website/client/assets/header/svg/experience.svg

@@ -1,27 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: sketchtool 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
-    <title>EEA09955-0BD9-4FA6-B404-275F69C78BA0</title>
-    <desc>Created with sketchtool.</desc>
-    <defs></defs>
-    <g id="Header" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Header---Desktop-HD" transform="translate(-180.000000, -172.000000)">
-            <g id="Header" transform="translate(0.000000, 56.000000)">
-                <g id="Experience" transform="translate(180.000000, 116.000000)">
-                    <g id="-g-Experience">
-                        <polygon id="Shape" fill="#FFA623" points="8 8 12 6 8 4 6 0 4 4 0 6 4 8 6 12"></polygon>
-                        <polygon id="Shape" fill="#FFFFFF" opacity="0.25" points="2.25 6 4.75 4.75 6 6"></polygon>
-                        <polygon id="Shape" fill="#FFFFFF" opacity="0.25" points="6 9.75 4.75 7.25 6 6"></polygon>
-                        <polygon id="Shape" fill="#FFFFFF" opacity="0.25" points="9.75 6 7.25 7.25 6 6"></polygon>
-                        <polygon id="Shape" fill="#FFFFFF" opacity="0.25" points="6 2.25 7.25 4.75 6 6"></polygon>
-                        <polygon id="Shape" fill="#BF7D1A" opacity="0.25" points="9.75 6 7.25 4.75 6 6"></polygon>
-                        <polygon id="Shape" fill="#BF7D1A" opacity="0.5" points="6 9.75 7.25 7.25 6 6"></polygon>
-                        <polygon id="Shape" fill="#FFFFFF" opacity="0.5" points="2.25 6 4.75 7.25 6 6"></polygon>
-                        <polygon id="Shape" fill="#FFFFFF" opacity="0.5" points="6 2.25 4.75 4.75 6 6"></polygon>
-                        <polygon id="Shape" fill="#FFFFFF" opacity="0.5" points="5.4 6.6 4.25 6 5.4 5.4 6 4.25 6.6 5.4 7.75 6 6.6 6.6 6 7.75"></polygon>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

website/client/assets/header/svg/gem.svg

@@ -1,25 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: sketchtool 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
-    <title>9830DCF8-FFC1-4ABB-BD3F-11C30C41F8FE</title>
-    <desc>Created with sketchtool.</desc>
-    <defs></defs>
-    <g id="Navigation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Navigation---Desktop-HD" transform="translate(-1119.000000, -12.000000)">
-            <g id="Navigation">
-                <g id="Gem" transform="translate(1119.000000, 12.000000)">
-                    <g id="-g-Gem" transform="translate(1.000000, 5.000000)">
-                        <polygon id="Shape" fill="#46A7D9" points="8 8 15 23 22 8"></polygon>
-                        <polygon id="Shape" fill="#A9DCF6" points="22 8 15 23 30 8"></polygon>
-                        <polygon id="Shape" fill="#2995CD" points="0 8 15 23 8 8"></polygon>
-                        <polygon id="Shape" fill="#50B5E9" points="4 0 8 8 0 8"></polygon>
-                        <polygon id="Shape" fill="#50B5E9" points="26 0 30 8 22 8"></polygon>
-                        <polygon id="Shape" fill="#50B5E9" points="15 0 22 8 8 8"></polygon>
-                        <polygon id="Shape" fill="#2995CD" points="8 8 4 0 15 0"></polygon>
-                        <polygon id="Shape" fill="#2995CD" points="22 8 26 0 15 0"></polygon>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

website/client/assets/header/svg/gold.svg

@@ -1,23 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: sketchtool 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
-    <title>45D3A740-CE56-4F37-90D2-5871CB868045</title>
-    <desc>Created with sketchtool.</desc>
-    <defs></defs>
-    <g id="Navigation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Navigation---Desktop-HD" transform="translate(-1200.000000, -12.000000)">
-            <g id="Navigation">
-                <g id="Gold" transform="translate(1200.000000, 12.000000)">
-                    <g id="-g-Gold" transform="translate(1.000000, 1.000000)">
-                        <circle id="Oval" fill="#FFB445" cx="15" cy="15" r="14"></circle>
-                        <path d="M5.1,24.9 C-0.4,19.4 -0.4,10.6 5.1,5.1 C10.6,-0.4 19.4,-0.4 24.9,5.1" id="Shape" fill="#FFFFFF" opacity="0.3"></path>
-                        <circle id="Oval" fill="#BF8734" cx="15" cy="15" r="12"></circle>
-                        <circle id="Oval" fill="#FFB445" cx="15" cy="15" r="10"></circle>
-                        <path d="M7.9,22.1 C4,18.2 4,11.8 7.9,7.9 C11.8,4 18.1,4 22,7.9" id="Shape" fill="#FFFFFF" opacity="0.3"></path>
-                        <polygon id="Shape" fill="#BF8734" points="17 10 17 14 13 14 13 10 11 10 11 20 13 20 13 16 17 16 17 20 19 20 19 10"></polygon>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

website/client/assets/header/svg/health.svg

@@ -1,28 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: sketchtool 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
-    <title>03D27E53-B4F4-4600-B8F0-7C6348593CE5</title>
-    <desc>Created with sketchtool.</desc>
-    <defs></defs>
-    <g id="Header" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Header---Desktop-HD" transform="translate(-180.000000, -148.000000)">
-            <g id="Header" transform="translate(0.000000, 56.000000)">
-                <g id="Health" transform="translate(180.000000, 92.000000)">
-                    <g id="-g-Health">
-                        <polygon id="Shape" fill="#F74E52" points="0 1.5 2.5 0 6 1.9 9.5 0 12 1.5 12 6 9.5 9.5 6 12 2.5 9.5 0 6"></polygon>
-                        <polygon id="Shape" fill="#FF6165" points="3.2 8.8 1 5.7 1 2.05 2.5 1.15 6 3.05 9.5 1.15 11 2.05 11 5.7 8.8 8.8 6 10.75"></polygon>
-                        <polygon id="Shape" fill="#FFFFFF" opacity="0.5" points="6 7.25 8.8 8.8 6 10.75"></polygon>
-                        <polygon id="Shape" fill="#B52428" opacity="0.35" points="6 7.25 3.2 8.8 6 10.75"></polygon>
-                        <polygon id="Shape" fill="#FFFFFF" opacity="0.25" points="3.2 8.8 1 5.7 6 7.25"></polygon>
-                        <polygon id="Shape" fill="#B52428" opacity="0.5" points="8.8 8.8 11 5.7 6 7.25"></polygon>
-                        <polygon id="Shape" fill="#B52428" opacity="0.35" points="6 7.25 9.5 1.15 11 2.05 11 5.7"></polygon>
-                        <polygon id="Shape" fill="#B52428" opacity="0.5" points="6 7.25 2.5 1.15 1 2.05 1 5.7"></polygon>
-                        <polygon id="Shape" fill="#FFFFFF" opacity="0.5" points="6 7.25 2.5 1.15 6 3.05"></polygon>
-                        <polygon id="Shape" fill="#FFFFFF" opacity="0.25" points="6 7.25 9.5 1.15 6 3.05"></polygon>
-                        <polygon id="Shape" fill="#FFFFFF" opacity="0.5" points="4.3 7.7 2.5 5.2 2.5 2.9 2.55 2.9 6 4.75 9.45 2.9 9.5 2.9 9.5 5.2 7.7 7.7 6 8.95"></polygon>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

website/client/assets/header/svg/logo.svg

@@ -1,35 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="128px" height="28px" viewBox="0 0 128 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: sketchtool 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
-    <title>3FAFE54A-3179-4DDB-A979-179E451CC634</title>
-    <desc>Created with sketchtool.</desc>
-    <defs>
-        <polygon id="path-1" points="0 27.7962154 127.812615 27.7962154 127.812615 -9.23076923e-05 0 -9.23076923e-05"></polygon>
-    </defs>
-    <g id="Navigation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Navigation---Desktop-HD" transform="translate(-20.000000, -14.000000)">
-            <g id="Navigation">
-                <g id="Logo" transform="translate(20.000000, 14.000000)">
-                    <g>
-                        <path d="M24.0521231,26.2991385 C23.2204308,26.2099077 23.2108923,25.8382154 23.2201231,20.8788308 C23.2201231,20.8788308 23.1367385,20.5674462 23.6145846,20.2972923 C24.0921231,20.0277538 25.5453538,17.6182154 24.6524308,15.5631385 C23.7601231,13.5074462 24.4035077,13.6114462 24.7770462,13.8191385 C25.1508923,14.0268308 25.3312,13.7637538 25.1090462,12.6357538 C24.6524308,10.3105231 23.9382769,9.52344615 22.2579692,8.47390769 C21.1539692,7.78436923 21.5536615,6.53390769 23.1235077,6.62621538 C23.8896615,6.67083077 23.8896615,6.67175385 23.9856615,6.07113846 C24.1382769,5.12406154 23.8352,3.50590769 22.6592,3.28252308 C21.8490462,3.12898462 20.8419692,3.99575385 19.6441231,3.39175385 C18.4462769,2.78775385 16.4656615,4.29575385 15.6555077,4.64621538 C14.8456615,4.99667692 14.1770462,4.99975385 13.2530462,4.97729231 C12.3284308,4.95544615 13.7425846,6.50836923 15.1588923,6.85821538 C16.3748923,7.15852308 15.9022769,7.37390769 15.8327385,8.36867692 C15.7552,9.48129231 16.0730462,9.95790769 15.5539692,10.0748308 C14.7576615,10.2532923 13.8684308,8.1136 12.5022769,7.21821538 C9.3992,5.18344615 7.56043077,6.15236923 2.14904615,0.201292308 C1.21089231,-0.831015385 1.59212308,2.35883077 2.17027692,4.06283077 C3.71273846,8.61206154 6.70227692,9.21636923 8.11243077,9.35390769 C9.29150769,9.46929231 10.0955077,9.19483077 10.0955077,9.65021538 C10.0955077,9.97944615 8.70473846,10.1305231 8.16596923,10.1320615 C7.65212308,10.1336 7.06750769,10.0825231 6.40443077,9.95883077 C5.33089231,9.75821538 6.97273846,12.4936 8.02750769,13.3609846 C9.80781538,14.8259077 11.8459692,15.3745231 13.4835077,15.5409846 C13.9567385,15.5889846 14.6296615,15.5803692 14.6296615,15.9517538 C14.6296615,16.3031385 14.2758154,16.3889846 13.8573538,16.3923692 C11.5625846,16.4089846 10.2450462,18.2409846 9.8712,20.3588308 C9.63396923,21.7052923 9.81150769,23.2268308 9.83643077,24.3643692 L9.92535385,25.1763692 C10.1053538,26.6016 4.97766154,27.1514462 4.29858462,24.8542154 C3.55643077,22.3434462 7.60750769,21.0166769 7.68227692,18.6216 C7.72904615,17.1132923 6.34873846,16.4283692 6.34873846,16.4283692 L6.34873846,15.8111385 L6.34873846,14.2240615 L4.76135385,14.2240615 L4.76135385,12.6369846 L3.17427692,12.6369846 L3.17427692,11.0496 L1.58689231,11.0496 L1.58689231,12.6369846 L1.58689231,14.2240615 L1.58689231,15.8111385 L3.17427692,15.8111385 L3.17427692,17.3985231 L4.76135385,17.3985231 L5.78658462,17.3985231 C6.38073846,17.3985231 6.85673846,17.7908308 6.80166154,18.6382154 C6.66504615,20.7317538 2.21335385,22.0176 3.43673846,25.3545231 C4.32104615,27.7659077 8.13335385,27.7960615 11.9496615,27.7960615 L19.0681231,27.7896 C19.2902769,27.7896 19.6022769,27.6831385 19.1481231,26.5348308 C18.7810462,25.6077538 17.5158154,26.2585231 16.4416615,26.2585231 C15.3050462,26.2585231 15.2656615,25.2991385 15.9955077,24.2862154 C16.4416615,23.6677538 17.0096615,23.2080615 17.9745846,22.7585231 C19.4607385,22.0662154 20.5918154,22.9569846 21.1490462,23.7219077 C21.9493538,24.8206769 22.2028923,26.0766769 21.4970462,26.2742154 C20.6459692,26.5117538 20.3841231,26.5434462 20.3555077,27.3539077 C20.3342769,27.9351385 20.6121231,27.7763692 21.9512,27.7763692 L26.3961231,27.7763692 C27.0835077,27.7763692 27.0330462,27.2456 26.3413538,26.3259077 C25.8499692,25.6726769 25.3133538,26.4351385 24.0521231,26.2991385 Z" id="Fill-1" fill="#FFFFFF"></path>
-                        <mask id="mask-2" fill="white">
-                            <use xlink:href="#path-1"></use>
-                        </mask>
-                        <g id="Clip-4"></g>
-                        <polygon id="Fill-3" fill="#FFFFFF" mask="url(#mask-2)" points="0 10.8272923 1.58707692 10.8272923 1.58707692 9.24021538 0 9.24021538"></polygon>
-                        <path d="M113.986,19.8937538 C113.381077,19.4272923 112.511538,19.5389846 112.043846,20.1445231 C111.504769,20.8439077 110.689692,21.2451385 109.808462,21.2451385 C108.316462,21.2451385 107.083538,20.0848308 106.993077,18.5996 C106.99,18.3854462 106.987846,16.8519077 106.987846,16.6525231 C106.987846,15.0971385 108.253077,13.8319077 109.808462,13.8319077 C110.589385,13.8319077 111.315846,14.1439077 111.854308,14.7106769 C112.381077,15.2651385 113.257385,15.2879077 113.811846,14.7611385 C114.366308,14.2346769 114.389077,13.3583692 113.862308,12.8039077 C112.811538,11.6971385 111.333692,11.0626769 109.808462,11.0626769 C106.726,11.0626769 104.218615,13.5700615 104.218615,16.6525231 C104.218615,16.6716 104.219231,18.5900615 104.226923,18.7312923 C104.387846,21.6937538 106.839231,24.0143692 109.808462,24.0143692 C111.555231,24.0143692 113.169077,23.2205231 114.236769,21.8359077 C114.703846,21.2303692 114.591538,20.3608308 113.986,19.8937538" id="Fill-5" fill="#FFFFFF" mask="url(#mask-2)"></path>
-                        <path d="M122.222769,21.2450154 C120.731077,21.2450154 119.498462,20.0850154 119.407692,18.6007077 C119.404615,18.3853231 119.402462,16.8450154 119.402462,16.6524 C119.402462,15.0973231 120.667692,13.8317846 122.222769,13.8317846 C123.778154,13.8317846 125.043385,15.0973231 125.043385,16.6524 C125.043385,16.8520923 125.041231,18.3856308 125.037846,18.5979385 C124.948308,20.0840923 123.715385,21.2450154 122.222769,21.2450154 M126.428,10.8231692 C125.782769,10.8231692 125.245231,11.2665538 125.091692,11.8637846 C124.251692,11.3588615 123.272308,11.0625538 122.222769,11.0625538 C119.140615,11.0625538 116.633231,13.5702462 116.633231,16.6524 C116.633231,16.6717846 116.634154,18.5893231 116.641231,18.7311692 C116.802154,21.6936308 119.253846,24.0142462 122.222769,24.0142462 C123.297538,24.0142462 124.302462,23.7068615 125.157538,23.1782462 C125.370154,23.6699385 125.858462,24.0142462 126.428,24.0142462 C127.192615,24.0142462 127.812615,23.3942462 127.812615,22.6296308 L127.812615,16.6773231 L127.812615,16.6524 L127.812615,12.2077846 C127.812615,11.4431692 127.192615,10.8231692 126.428,10.8231692" id="Fill-6" fill="#FFFFFF" mask="url(#mask-2)"></path>
-                        <path d="M58.8612923,21.2450154 C57.3692923,21.2450154 56.1366769,20.0847077 56.0462154,18.5994769 C56.0428308,18.3856308 56.0406769,16.8520923 56.0406769,16.6524 C56.0406769,15.0973231 57.3059077,13.8317846 58.8612923,13.8317846 C60.4166769,13.8317846 61.6819077,15.0973231 61.6819077,16.6524 C61.6819077,16.8520923 61.6797538,18.3856308 61.6763692,18.5979385 C61.5868308,20.0840923 60.3539077,21.2450154 58.8612923,21.2450154 M63.0665231,10.8231692 C62.4212923,10.8231692 61.8837538,11.2665538 61.7302154,11.8637846 C60.8902154,11.3588615 59.9108308,11.0625538 58.8612923,11.0625538 C55.7788308,11.0625538 53.2714462,13.5702462 53.2714462,16.6524 C53.2714462,16.6717846 53.2720615,18.5899385 53.2797538,18.7311692 C53.4406769,21.6936308 55.8923692,24.0142462 58.8612923,24.0142462 C59.9360615,24.0142462 60.9409846,23.7068615 61.7960615,23.1782462 C62.0086769,23.6699385 62.4969846,24.0142462 63.0665231,24.0142462 C63.8311385,24.0142462 64.4511385,23.3942462 64.4511385,22.6296308 L64.4511385,16.6773231 L64.4511385,16.6524 L64.4511385,12.2077846 C64.4511385,11.4431692 63.8311385,10.8231692 63.0665231,10.8231692" id="Fill-7" fill="#FFFFFF" mask="url(#mask-2)"></path>
-                        <path d="M83.4511385,10.8231385 C82.6865231,10.8231385 82.0665231,11.4431385 82.0665231,12.2077538 L82.0665231,22.6296 C82.0665231,23.3942154 82.6865231,24.0142154 83.4511385,24.0142154 C84.2157538,24.0142154 84.8357538,23.3942154 84.8357538,22.6296 L84.8357538,12.2077538 C84.8357538,11.4431385 84.2157538,10.8231385 83.4511385,10.8231385" id="Fill-8" fill="#FFFFFF" mask="url(#mask-2)"></path>
-                        <path d="M99.7588308,10.8231385 C98.9942154,10.8231385 98.3742154,11.4431385 98.3742154,12.2077538 L98.3742154,22.6296 C98.3742154,23.3942154 98.9942154,24.0142154 99.7588308,24.0142154 C100.523446,24.0142154 101.143446,23.3942154 101.143446,22.6296 L101.143446,12.2077538 C101.143446,11.4431385 100.523446,10.8231385 99.7588308,10.8231385" id="Fill-9" fill="#FFFFFF" mask="url(#mask-2)"></path>
-                        <path d="M76.2663385,18.6008 C76.1752615,20.0851077 74.9426462,21.2451077 73.4512615,21.2451077 C71.9589538,21.2451077 70.7263385,20.0848 70.6358769,18.5977231 C70.6324923,18.3841846 70.6306462,16.8518769 70.6306462,16.6524923 C70.6306462,15.0971077 71.8958769,13.8318769 73.4512615,13.8318769 C75.0060308,13.8318769 76.2715692,15.0971077 76.2715692,16.6524923 C76.2715692,16.8451077 76.2694154,18.3854154 76.2663385,18.6008 M73.4512615,11.0626462 C72.4217231,11.0626462 71.4595692,11.3472615 70.6306462,11.8346462 L70.6306462,6.66510769 C70.6306462,5.90049231 70.0106462,5.28049231 69.2460308,5.28049231 C68.4811077,5.28049231 67.8614154,5.90049231 67.8614154,6.66510769 L67.8614154,16.6524923 L67.8614154,16.6774154 L67.8614154,22.6297231 C67.8614154,23.3943385 68.4811077,24.0143385 69.2460308,24.0143385 C69.8155692,24.0143385 70.3038769,23.6697231 70.5164923,23.1783385 C71.3715692,23.7069538 72.3761846,24.0143385 73.4512615,24.0143385 C76.4201846,24.0143385 78.8718769,21.6937231 79.0328,18.7263385 C79.0398769,18.5894154 79.0408,16.6715692 79.0408,16.6524923 C79.0408,13.5700308 76.5331077,11.0626462 73.4512615,11.0626462" id="Fill-10" fill="#FFFFFF" mask="url(#mask-2)"></path>
-                        <path d="M45.6635692,11.0626462 C44.7088,11.0626462 43.7949538,11.3017231 42.9900308,11.7398769 L42.9900308,6.66510769 C42.9900308,5.90049231 42.3700308,5.28049231 41.6054154,5.28049231 C40.8404923,5.28049231 40.2208,5.90049231 40.2208,6.66510769 L40.2208,22.6297231 C40.2208,23.3943385 40.8404923,24.0143385 41.6054154,24.0143385 C42.3700308,24.0143385 42.9900308,23.3943385 42.9900308,22.6297231 L42.9900308,15.4731077 C43.0955692,15.3832615 43.1931077,15.2817231 43.2709538,15.1580308 C43.7909538,14.3275692 44.6854154,13.8318769 45.6635692,13.8318769 C47.2186462,13.8318769 48.4838769,15.0971077 48.4838769,16.6524923 C48.4838769,16.9060308 48.4817231,22.2869538 48.4780308,22.5955692 C48.4595692,23.3435692 49.0404923,23.9743385 49.7918769,24.0124923 C49.8158769,24.0137231 49.8398769,24.0143385 49.8635692,24.0143385 C50.5958769,24.0143385 51.2078769,23.4398769 51.2454154,22.7001846 C51.2521846,22.5632615 51.2531077,16.7112615 51.2531077,16.6524923 C51.2531077,13.5700308 48.7457231,11.0626462 45.6635692,11.0626462" id="Fill-11" fill="#FFFFFF" mask="url(#mask-2)"></path>
-                        <path d="M94.5025231,10.8231385 L92.8871385,10.8231385 L92.8871385,6.66498462 C92.8871385,5.90036923 92.2671385,5.28036923 91.5025231,5.28036923 C90.7379077,5.28036923 90.1179077,5.90036923 90.1179077,6.66498462 L90.1179077,10.8231385 L88.5025231,10.8231385 C87.7379077,10.8231385 87.1179077,11.4431385 87.1179077,12.2077538 C87.1179077,12.9723692 87.7379077,13.5923692 88.5025231,13.5923692 L90.1179077,13.5923692 L90.1179077,22.6296 C90.1179077,23.3942154 90.7379077,24.0142154 91.5025231,24.0142154 C92.2671385,24.0142154 92.8871385,23.3942154 92.8871385,22.6296 L92.8871385,13.5923692 L94.5025231,13.5923692 C95.2671385,13.5923692 95.8871385,12.9723692 95.8871385,12.2077538 C95.8871385,11.4431385 95.2671385,10.8231385 94.5025231,10.8231385" id="Fill-12" fill="#FFFFFF" mask="url(#mask-2)"></path>
-                        <path d="M84.7845538,6.66495385 C84.7845538,7.42956923 84.1645538,8.04956923 83.3999385,8.04956923 C82.6353231,8.04956923 82.0153231,7.42956923 82.0153231,6.66495385 C82.0153231,5.90033846 82.6353231,5.28033846 83.3999385,5.28033846 C84.1645538,5.28033846 84.7845538,5.90033846 84.7845538,6.66495385" id="Fill-13" fill="#FF6066" mask="url(#mask-2)"></path>
-                        <path d="M101.092246,6.66495385 C101.092246,7.42956923 100.472246,8.04956923 99.7076308,8.04956923 C98.9430154,8.04956923 98.3230154,7.42956923 98.3230154,6.66495385 C98.3230154,5.90033846 98.9430154,5.28033846 99.7076308,5.28033846 C100.472246,5.28033846 101.092246,5.90033846 101.092246,6.66495385" id="Fill-14" fill="#4FB5E8" mask="url(#mask-2)"></path>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

website/client/assets/header/svg/magic.svg

@@ -1,23 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: sketchtool 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
-    <title>7E7FE8AE-769F-4424-8713-31DAA23B5DA6</title>
-    <desc>Created with sketchtool.</desc>
-    <defs></defs>
-    <g id="Header" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Header---Desktop-HD" transform="translate(-180.000000, -196.000000)">
-            <g id="Header" transform="translate(0.000000, 56.000000)">
-                <g id="Magic" transform="translate(180.000000, 140.000000)">
-                    <g id="-g-Magic" transform="translate(1.000000, 0.000000)">
-                        <polygon id="Shape" fill="#2995CD" points="10 7.5 5 12 0 7.5 5 0"></polygon>
-                        <polygon id="Shape" fill="#50B5E9" points="1.3 7.35 5 5.85 5 10.65"></polygon>
-                        <polygon id="Shape" fill="#1F709A" opacity="0.25" points="5 5.85 8.7 7.35 5 10.65"></polygon>
-                        <polygon id="Shape" fill="#FFFFFF" opacity="0.25" points="5 5.85 5 1.8 8.7 7.35"></polygon>
-                        <polygon id="Shape" fill="#FFFFFF" opacity="0.5" points="1.3 7.35 5 1.8 5 5.85"></polygon>
-                        <polygon id="Shape" fill="#FFFFFF" opacity="0.5" points="2.6 7.15 5 3.6 7.4 7.15 5 9.3"></polygon>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

website/client/assets/header/svg/notifications.svg

@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: sketchtool 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
-    <title>3FDC9D95-73E9-4C8D-990F-8CC8EC415CCD</title>
-    <desc>Created with sketchtool.</desc>
-    <defs></defs>
-    <g id="Navigation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Navigation---Desktop-HD" transform="translate(-1324.000000, -12.000000)" fill="#D5C8FF">
-            <g id="Navigation">
-                <g id="Notifications" transform="translate(1324.000000, 12.000000)">
-                    <path d="M26,4 L6,4 C4.3,4 3,5.3 3,7 L3,21 C3,22.7 4.3,24 6,24 L11,24 L13.9,27.1 C15.1,28.3 17,28.3 18.1,27.1 L21,24 L26,24 C27.7,24 29,22.7 29,21 L29,7 C29,5.3 27.7,4 26,4 L26,4 Z M27,21 C27,21.6 26.6,22 26,22 L20.1,22 L16.6,25.7 C16.4,25.9 16.2,26 16,26 C15.8,26 15.6,25.9 15.3,25.7 L11.9,22 L6,22 C5.4,22 5,21.6 5,21 L5,7 C5,6.4 5.4,6 6,6 L26,6 C26.6,6 27,6.4 27,7 L27,21 L27,21 Z M24,11 L8,11 L8,9 L24,9 L24,11 L24,11 Z M24,15 L8,15 L8,13 L24,13 L24,15 L24,15 Z M24,19 L8,19 L8,17 L24,17 L24,19 L24,19 Z"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

website/client/assets/header/svg/user.svg

@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: sketchtool 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
-    <title>E4029491-6F2E-4C6A-9D7A-E4F780C314B9</title>
-    <desc>Created with sketchtool.</desc>
-    <defs></defs>
-    <g id="Navigation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Navigation---Desktop-HD" transform="translate(-1376.000000, -12.000000)" fill="#FFFFFF">
-            <g id="Navigation">
-                <g id="User" transform="translate(1376.000000, 12.000000)">
-                    <path d="M20,17 L19.6,17 C21.5,15.8 22.9,13.7 23,11.2 C23.1,7.4 19.9,4 16.1,4 C12.1,4 9,7.1 9,11 C9,13.6 10.3,15.8 12.4,17 L12,17 C8.1,17 5,20.1 5,24 L5,25 C5,26.7 6.3,28 8,28 L24,28 C25.7,28 27,26.7 27,25 L27,24 C27,20.1 23.9,17 20,17 L20,17 Z M11,11 C11,8.2 13.2,6 16,6 C18.8,6 21,8.2 21,11 C21,13.8 18.8,16 16,16 C13.2,16 11,13.8 11,11 L11,11 Z M24,26 L8,26 C7.4,26 7,25.6 7,25 L7,24 C7,21.2 9.2,19 12,19 L20,19 C22.8,19 25,21.2 25,24 L25,25 C25,25.6 24.6,26 24,26 L24,26 Z"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

website/client/assets/scss/colors.scss

@@ -5,6 +5,9 @@
 $white: #FFFFFF;
 $black: #1A181D;
 
+$header-color: #D5C8FF;
+$header-dark-background: #271B3D;
+
 $gray-10: #34313A;
 $gray-50: #4E4A57;
 $gray-100: #686274;

website/client/assets/scss/form.scss

@@ -27,11 +27,11 @@ input, textarea, input.form-control, textarea.form-control {
     background: $gray-500;
   }
 
-  &.input-search { // TODO Abstract to work with all icons
+  &.input-search {
     background-repeat: no-repeat;
     background-position: center left 16px;
     background-size: 16px 16px;
-    background-image: url(~client/assets/svg/search.svg);
+    background-image: url(~client/assets/svg/for-css/search.svg);
     padding-left: 40px;
   }
 
@@ -42,13 +42,13 @@ input, textarea, input.form-control, textarea.form-control {
 
   &.input-valid {
     padding-right: 37px;
-    background-image: url(~client/assets/svg/check.svg);
+    background-image: url(~client/assets/svg/for-css/check.svg);
     background-size: 13px 10px;
   }
 
   &.input-invalid {
     padding-right: 40px;
-    background-image: url(~client/assets/svg/alert.svg);
+    background-image: url(~client/assets/svg/for-css/alert.svg);
     background-size: 16px 16px;
   }
 }
@@ -84,7 +84,7 @@ $bg-disabled-control: #34303a;
 
   .custom-control-input {
     &:checked~.custom-control-indicator {
-      background-image: url(~client/assets/svg/checkbox-white.svg);
+      background-image: url(~client/assets/svg/for-css/checkbox-white.svg);
       background-color: $purple-400;
       border-color: $purple-400;
     }

website/client/assets/scss/icon.scss

@@ -0,0 +1,9 @@
+.svg-icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  stroke-width: 0;
+  stroke: currentColor;
+  fill: currentColor;
+  transition: none;
+}

website/client/assets/scss/index.scss

@@ -2,7 +2,7 @@
 @import './utils';
 @import './colors';
 
-* {
+*:not(.svg-icon *) {
   transition-duration: .15s;
   transition-property: border-color, box-shadow, color;
   transition-timing-function: ease-in;
@@ -19,3 +19,5 @@
 @import './dropdown';
 @import './popover';
 @import './item';
+@import './stats';
+@import './icon';

website/client/assets/scss/stats.scss

@@ -0,0 +1,11 @@
+.bg-health {
+  background: $red-50;
+}
+
+.bg-experience {
+  background: $yellow-100;
+}
+
+.bg-mana {
+  background: $blue-100;
+}

website/client/assets/scss/utils.scss

@@ -13,4 +13,8 @@
   }
 
   @return $string;
+}
+
+@function base64svg ($image) {
+ @return 'data:image/svg+xml;base64,' + $image;
 }

website/client/assets/svg/README.md

@@ -0,0 +1 @@
+SVGs used inside CSS / SCSS with `url(...)` must go in the `for-css` folder.

website/client/assets/svg/buff.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="12" viewBox="0 0 10 12">
+    <path fill="#BDA8FF" fill-rule="evenodd" d="M5 0l5 6H7v2H3V6H0l5-6zM3 9h4v1H3V9zm0 2h4v1H3v-1z"/>
+</svg>

website/client/assets/svg/experience.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#FFA623" d="M16 16l8-4-8-4-4-8-4 8-8 4 8 4 4 8z"/>
+        <path fill="#FFF" d="M4.5 12l5-2.5L12 12zM12 19.5l-2.5-5L12 12zM19.5 12l-5 2.5L12 12zM12 4.5l2.5 5L12 12z" opacity=".25"/>
+        <path fill="#BF7D1A" d="M19.5 12l-5-2.5L12 12z" opacity=".25"/>
+        <path fill="#BF7D1A" d="M12 19.5l2.5-5L12 12z" opacity=".5"/>
+        <path fill="#FFF" d="M4.5 12l5 2.5L12 12zM12 4.5l-2.5 5L12 12z" opacity=".5"/>
+        <path fill="#FFF" d="M10.8 13.2L8.5 12l2.3-1.2L12 8.5l1.2 2.3 2.3 1.2-2.3 1.2-1.2 2.3z" opacity=".5"/>
+    </g>
+</svg>

website/client/assets/svg/for-css/bits.svg

@@ -0,0 +1,79 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="56" viewBox="0 0 128 56">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#6133B4" d="M24 0h8v8h-8z"/>
+        <path fill="#4F2A93" d="M16 0h8v8h-8zM24 8h8v8h-8z"/>
+        <path fill="#432874" d="M16 8h8v8h-8zM32 0h8v8h-8zM32 8h8v8h-8z"/>
+        <path fill="#4F2A93" d="M40 0h8v8h-8z"/>
+        <path fill="#432874" d="M40 8h8v8h-8zM48 0h8v8h-8z"/>
+        <path fill="#6133B4" d="M48 8h8v8h-8zM56 0h8v8h-8z"/>
+        <path fill="#4F2A93" d="M56 8h8v8h-8z"/>
+        <path fill="#6133B4" d="M64 0h8v8h-8z"/>
+        <path fill="#4F2A93" d="M64 8h8v8h-8zM72 0h8v8h-8z"/>
+        <path fill="#6133B4" d="M72 8h8v8h-8zM80 0h8v8h-8z"/>
+        <path fill="#4F2A93" d="M80 8h8v8h-8z"/>
+        <path fill="#6133B4" d="M88 0h8v8h-8z"/>
+        <path fill="#4F2A93" d="M88 8h8v8h-8z"/>
+        <path fill="#432874" d="M96 0h8v8h-8z"/>
+        <path fill="#6133B4" d="M96 8h8v8h-8z"/>
+        <path fill="#432874" d="M24 16h8v8h-8zM16 16h8v8h-8z"/>
+        <path fill="#4F2A93" d="M8 16h8v8H8z"/>
+        <path fill="#6133B4" d="M32 16h8v8h-8z"/>
+        <path fill="#4F2A93" d="M40 16h8v8h-8zM48 16h8v8h-8zM56 16h8v8h-8z"/>
+        <path fill="#6133B4" d="M64 16h8v8h-8z"/>
+        <path fill="#4F2A93" d="M72 16h8v8h-8z"/>
+        <path fill="#432874" d="M80 16h8v8h-8z"/>
+        <path fill="#4F2A93" d="M88 16h8v8h-8zM96 16h8v8h-8z"/>
+        <path fill="#432874" d="M24 24h8v8h-8z"/>
+        <path fill="#6133B4" d="M16 24h8v8h-8z"/>
+        <path fill="#4F2A93" d="M32 24h8v8h-8z"/>
+        <path fill="#432874" d="M40 24h8v8h-8zM48 24h8v8h-8z"/>
+        <path fill="#4F2A93" d="M56 24h8v8h-8z"/>
+        <path fill="#432874" d="M64 24h8v8h-8z"/>
+        <path fill="#4F2A93" d="M72 24h8v8h-8zM80 24h8v8h-8z"/>
+        <path fill="#432874" d="M88 24h8v8h-8z"/>
+        <path fill="#4F2A93" d="M96 24h8v8h-8z"/>
+        <path fill="#432874" d="M24 32h8v8h-8zM16 32h8v8h-8zM8 32h8v8H8z"/>
+        <path fill="#6133B4" d="M32 32h8v8h-8z"/>
+        <path fill="#4F2A93" d="M40 32h8v8h-8z"/>
+        <path fill="#6133B4" d="M48 32h8v8h-8z"/>
+        <path fill="#432874" d="M56 32h8v8h-8z"/>
+        <path fill="#4F2A93" d="M64 32h8v8h-8z"/>
+        <path fill="#6133B4" d="M72 32h8v8h-8z"/>
+        <path fill="#4F2A93" d="M80 32h8v8h-8z"/>
+        <path fill="#6133B4" d="M88 32h8v8h-8z"/>
+        <path fill="#4F2A93" d="M96 32h8v8h-8zM24 40h8v8h-8z"/>
+        <path fill="#432874" d="M16 40h8v8h-8zM8 40h8v8H8z"/>
+        <path fill="#4F2A93" d="M0 40h8v8H0z"/>
+        <path fill="#432874" d="M32 40h8v8h-8zM40 40h8v8h-8z"/>
+        <path fill="#6133B4" d="M48 40h8v8h-8zM56 40h8v8h-8zM64 40h8v8h-8z"/>
+        <path fill="#432874" d="M72 40h8v8h-8zM80 40h8v8h-8z"/>
+        <path fill="#6133B4" d="M88 40h8v8h-8z"/>
+        <path fill="#432874" d="M96 40h8v8h-8z"/>
+        <path fill="#6133B4" d="M24 48h8v8h-8z"/>
+        <path fill="#4F2A93" d="M16 48h8v8h-8zM32 48h8v8h-8z"/>
+        <path fill="#432874" d="M40 48h8v8h-8z"/>
+        <path fill="#4F2A93" d="M48 48h8v8h-8z"/>
+        <path fill="#432874" d="M56 48h8v8h-8z"/>
+        <path fill="#4F2A93" d="M64 48h8v8h-8zM72 48h8v8h-8z"/>
+        <path fill="#6133B4" d="M80 48h8v8h-8z"/>
+        <path fill="#432874" d="M88 48h8v8h-8z"/>
+        <path fill="#6133B4" d="M96 48h8v8h-8z"/>
+        <path fill="#4F2A93" d="M104 0h8v8h-8z"/>
+        <path fill="#432874" d="M104 8h8v8h-8z"/>
+        <path fill="#6133B4" d="M104 16h8v8h-8z"/>
+        <path fill="#4F2A93" d="M104 24h8v8h-8z"/>
+        <path fill="#432874" d="M104 32h8v8h-8z"/>
+        <path fill="#6133B4" d="M104 40h8v8h-8z"/>
+        <path fill="#4F2A93" d="M104 48h8v8h-8z"/>
+        <path fill="#432874" d="M112 0h8v8h-8z"/>
+        <path fill="#6133B4" d="M112 8h8v8h-8z"/>
+        <path fill="#4F2A93" d="M112 16h8v8h-8z"/>
+        <path fill="#6133B4" d="M112 24h8v8h-8zM112 32h8v8h-8z"/>
+        <path fill="#4F2A93" d="M112 40h8v8h-8z"/>
+        <path fill="#432874" d="M112 48h8v8h-8zM120 0h8v8h-8z"/>
+        <path fill="#4F2A93" d="M120 8h8v8h-8zM120 16h8v8h-8z"/>
+        <path fill="#432874" d="M120 24h8v8h-8zM120 32h8v8h-8z"/>
+        <path fill="#6133B4" d="M120 40h8v8h-8z"/>
+        <path fill="#4F2A93" d="M120 48h8v8h-8z"/>
+    </g>
+</svg>

website/client/assets/svg/gold-guild-badge.svg

@@ -0,0 +1,10 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="33" height="32" viewBox="0 0 33 32">
+<title>gold-guild-badge</title>
+<path fill="#ffbc5a" d="M16.421 0l-14.737 6.415c0 12.829 1.792 20.087 14.737 25.585 12.945-5.499 14.737-12.755 14.737-25.585l-14.737-6.415z"></path>
+<path fill="none" stroke="#df911e" stroke-width="4.2105" stroke-miterlimit="4" stroke-linecap="butt" stroke-linejoin="miter" d="M16.013 2.118l13.032 5.673c-0.077 6.244-0.706 10.088-2.281 13.219-1.784 3.546-4.952 6.278-10.342 8.693-5.391-2.415-8.558-5.147-10.342-8.693-1.576-3.131-2.204-6.975-2.281-13.219l12.624-5.495-0.408-0.178z"></path>
+<path fill="none" stroke="#ffa623" stroke-width="2.5263" stroke-miterlimit="4" stroke-linecap="butt" stroke-linejoin="miter" d="M16.177 1.272c-76071129.935-33717654.139-128176134.231-108564304.818-128176134.231-195580731.325 0-117804502.285 95499418.059-213303920.343 213303920.343-213303920.343s213303920.343 95499418.058 213303920.343 213303920.343l-298431692.74 195580737.294c-0.047 6.695-0.683 10.783-2.376 14.147-1.918 3.811-5.331 6.71-11.095 9.236-5.765-2.526-9.177-5.425-11.095-9.236-1.693-3.365-2.329-7.453-2.376-14.147l13.471-5.864-0.244-0.106z"></path>
+<path fill="#fff" d="M6.737 17.684h19.368c2.791 0 5.053 2.262 5.053 5.053s-2.262 5.053-5.053 5.053h-19.368c-2.791 0-5.053-2.262-5.053-5.053s2.262-5.053 5.053-5.053z"></path>
+<path fill="none" stroke="#df911e" stroke-width="1.6842" stroke-miterlimit="4" stroke-linecap="butt" stroke-linejoin="miter" d="M6.737 16.842h19.368c3.256 0 5.895 2.639 5.895 5.895s-2.639 5.895-5.895 5.895h-19.368c-3.256 0-5.895-2.639-5.895-5.895s2.639-5.895 5.895-5.895z"></path>
+<path fill="#df911e" d="M13.053 12.912v1.403h6.737v-1.403c0-1.309-2.245-1.965-3.368-1.965s-3.368 0.655-3.368 1.965zM16.424 6.737c-0 0-0 0-0 0-0.931 0-1.685 0.754-1.686 1.684 0 0.93 0.756 1.684 1.687 1.684 0 0 0 0 0 0 0.929 0 1.681-0.753 1.681-1.681 0-0.001 0-0.002 0-0.003 0-0.929-0.75-1.684-1.682-1.684z"></path>
+</svg>

website/client/assets/svg/gold.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g fill="none" fill-rule="evenodd">
+        <circle cx="12" cy="12" r="12" fill="#FFA623"/>
+        <path fill="#FFF" d="M6.3 17.7c-3.1-3.1-3.1-8.2 0-11.3 3.1-3.1 8.2-3.1 11.3 0" opacity=".5"/>
+        <path fill="#FFF" d="M17.7 6.3c3.1 3.1 3.1 8.2 0 11.3-3.1 3.1-8.2 3.1-11.3 0" opacity=".25"/>
+        <path fill="#BF7D1A" d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8z" opacity=".5"/>
+        <path fill="#BF7D1A" d="M13 9v2h-2V9H9v6h2v-2h2v2h2V9z" opacity=".75"/>
+    </g>
+</svg>

website/client/assets/svg/healer.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#CF8229" d="M24.61 47.604s-1.789-.735-2.585-1.138l-.183-.09c-5.13-2.58-10.54-5.782-13.881-12.108-3.777-7.15-3.05-18.565-2.955-19.843.075-1.003.378-3.464.378-3.464s1.941-.858 2.901-1.311l13.864-7.012c.764-.363 2.462-1.114 2.462-1.114s1.697.75 2.463 1.114l13.86 7.01c.966.457 3.05 1.315 3.05 1.315s.157 2.467.232 3.465c.094 1.275.822 12.69-2.955 19.84-3.343 6.33-8.755 9.53-13.876 12.103l-.19.096c-.795.402-2.584 1.137-2.584 1.137"/>
+        <path fill="#E29E45" d="M12.694 16.147l11.059-5.695c.27-.129.564-.192.858-.192V5.829c-.294 0-.588.063-.858.192L9.888 13.032a1.985 1.985 0 0 0-.727.603l3.533 2.523v-.011M24.612 10.259V5.827z"/>
+        <path fill="#FDC67E" d="M23.752 6.008L9.89 13.02c-.655.31-1.09.945-1.145 1.665-.034.466-.81 11.487 2.531 17.814 2.782 5.266 7.36 8.048 12.242 10.504l.19.096c.284.142.593.213.902.213V5.816c-.293 0-.585.064-.858.192"/>
+        <path fill="#FFA623" d="M25.512 43.099l.19-.096c4.885-2.454 9.462-5.238 12.244-10.505 3.341-6.326 2.565-17.347 2.53-17.813a2.009 2.009 0 0 0-1.143-1.665L25.468 6.008a1.999 1.999 0 0 0-.858-.192v37.496c.31 0 .618-.071.902-.213"/>
+        <path fill="#FFDDB5" d="M12.694 16.134l11.059-5.694c.27-.129.564-.192.858-.192V5.816c-.294 0-.587.064-.858.192L9.889 13.02a1.985 1.985 0 0 0-.728.603l3.533 2.523v-.012"/>
+        <path fill="#FDC67E" d="M39.333 13.02L25.468 6.008a1.999 1.999 0 0 0-.858-.192v4.431c.294 0 .588.065.858.192l11.065 5.702 3.527-2.519a1.973 1.973 0 0 0-.727-.602"/>
+        <path fill="#FFA623" d="M24.214 38.858c-4.197-2.128-7.383-4.438-9.389-8.235-2.239-4.238-2.229-11.63-2.131-14.477L9.16 13.623a2 2 0 0 0-.417 1.062c-.015.207-.174 2.498-.057 5.531.148 3.798.731 8.765 2.59 12.282 2.782 5.267 7.357 8.05 12.242 10.505l.19.096c.284.142.593.213.902.213v-4.33c-.098 0-.197-.04-.397-.124"/>
+        <path fill="#E59025" d="M34.395 30.623c-2.008 3.804-5.203 6.113-9.406 8.243-.188.078-.282.117-.378.117v4.33c.31 0 .618-.072.9-.214l.19-.096c4.885-2.455 9.462-5.238 12.244-10.504 1.857-3.518 2.443-8.485 2.59-12.282.118-3.034-.044-5.325-.06-5.532a1.995 1.995 0 0 0-.414-1.064l-3.527 2.521c.129 3.53-.07 10.566-2.139 14.481"/>
+        <path fill="#FFE4C9" d="M16.076 24.564l5.69-2.845 2.845 2.845zM24.61 33.098l-2.845-5.688 2.846-2.846z"/>
+        <path fill="#E59025" d="M33.145 24.564l-5.689 2.846-2.845-2.846zM24.61 16.03l2.846 5.689-2.845 2.845z"/>
+        <path fill="#E59025" d="M33.145 24.564l-5.689-2.845-2.845 2.845zM24.61 33.098l2.846-5.688-2.845-2.846z"/>
+        <path fill="#FFE4C9" d="M16.076 24.564l5.69 2.846 2.845-2.846zM24.61 16.03l-2.845 5.689 2.846 2.845z"/>
+    </g>
+</svg>

website/client/assets/svg/health.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#F74E52" d="M2 4.5L6.167 2 12 5.167 17.833 2 22 4.5V12l-4.167 5.833L12 22l-5.833-4.167L2 12z"/>
+        <path fill="#FF6165" d="M7.333 16.667L3.667 11.5V5.417l2.5-1.5L12 7.083l5.833-3.166 2.5 1.5V11.5l-3.666 5.167L12 19.917z"/>
+        <path fill="#FFF" d="M12 14.083l4.667 2.584L12 19.917z" opacity=".5"/>
+        <path fill="#B52428" d="M12 14.083l-4.667 2.584L12 19.917z" opacity=".35"/>
+        <path fill="#FFF" d="M7.333 16.667L3.667 11.5 12 14.083z" opacity=".25"/>
+        <path fill="#B52428" d="M16.667 16.667l3.666-5.167L12 14.083z" opacity=".5"/>
+        <path fill="#B52428" d="M12 14.083l5.833-10.166 2.5 1.5V11.5z" opacity=".35"/>
+        <path fill="#B52428" d="M12 14.083L6.167 3.917l-2.5 1.5V11.5z" opacity=".5"/>
+        <path fill="#FFF" d="M12 14.083L6.167 3.917 12 7.083z" opacity=".5"/>
+        <path fill="#FFF" d="M12 14.083l5.833-10.166L12 7.083z" opacity=".25"/>
+        <path fill="#FFF" d="M9.167 14.833l-3-4.166V6.833h.083L12 9.917l5.75-3.084h.083v3.834l-3 4.166L12 16.917z" opacity=".5"/>
+    </g>
+</svg>

website/client/assets/svg/logo.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="28" viewBox="0 0 128 28">
+    <defs>
+        <path id="a" d="M0 27.796h127.813V0H0z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#FFF" d="M24.052 26.3c-.832-.09-.841-.462-.832-5.421 0 0-.083-.312.395-.582.477-.27 1.93-2.679 1.037-4.734-.892-2.056-.248-1.952.125-1.744.374.208.554-.055.332-1.183-.457-2.325-1.17-3.113-2.851-4.162-1.104-.69-.704-1.94.866-1.848.766.045.766.046.862-.555.152-.947-.15-2.565-1.327-2.788-.81-.154-1.817.713-3.015.109-1.198-.604-3.178.904-3.988 1.254s-1.479.354-2.403.331c-.925-.022.49 1.531 1.906 1.881 1.216.3.743.516.674 1.51-.078 1.113.24 1.59-.279 1.707-.796.178-1.686-1.961-3.052-2.857C9.4 5.183 7.56 6.152 2.15.201 1.211-.83 1.592 2.36 2.17 4.063c1.543 4.55 4.532 5.153 5.942 5.29 1.18.116 1.984-.158 1.984.297 0 .33-1.391.48-1.93.482a9.469 9.469 0 0 1-1.762-.173c-1.073-.2.569 2.535 1.624 3.402 1.78 1.465 3.818 2.014 5.456 2.18.473.048 1.146.04 1.146.41 0 .352-.354.438-.773.441-2.294.017-3.612 1.849-3.986 3.967-.237 1.346-.06 2.868-.035 4.005l.09.812c.18 1.426-4.948 1.975-5.627-.322-.743-2.51 3.309-3.837 3.383-6.232.047-1.509-1.333-2.194-1.333-2.194V14.224H4.76v-1.587H3.174V11.05H1.587v4.761h1.587V17.4h2.613c.594 0 1.07.392 1.015 1.24-.137 2.093-4.589 3.379-3.365 6.716.884 2.41 4.696 2.441 8.513 2.441l7.118-.006c.222 0 .534-.107.08-1.255-.367-.927-1.632-.276-2.706-.276-1.137 0-1.176-.96-.446-1.973.446-.618 1.014-1.078 1.979-1.527 1.486-.693 2.617.198 3.174.963.8 1.099 1.054 2.355.348 2.552-.851.238-1.113.27-1.141 1.08-.022.581.256.422 1.595.422h4.445c.688 0 .637-.53-.055-1.45-.491-.653-1.028.11-2.289-.027z"/>
+        <mask id="b" fill="#fff">
+            <use xlink:href="#a"/>
+        </mask>
+        <path fill="#FFF" d="M0 10.827h1.587V9.24H0zM113.986 19.894a1.385 1.385 0 0 0-1.942.25c-.54.7-1.354 1.101-2.236 1.101a2.82 2.82 0 0 1-2.815-2.645 416.05 416.05 0 0 1-.005-1.947 2.824 2.824 0 0 1 2.82-2.821c.781 0 1.508.312 2.046.879a1.385 1.385 0 0 0 2.008-1.907 5.614 5.614 0 0 0-4.054-1.741 5.596 5.596 0 0 0-5.59 5.59c0 .019.001 1.937.009 2.078a5.589 5.589 0 0 0 5.581 5.283c1.747 0 3.361-.793 4.429-2.178a1.385 1.385 0 0 0-.251-1.942M122.223 21.245a2.819 2.819 0 0 1-2.815-2.644 419.52 419.52 0 0 1-.006-1.949 2.824 2.824 0 0 1 2.82-2.82 2.824 2.824 0 0 1 2.821 2.82c0 .2-.002 1.734-.005 1.946a2.818 2.818 0 0 1-2.815 2.647m4.205-10.422c-.645 0-1.183.444-1.336 1.04a5.55 5.55 0 0 0-2.87-.8 5.596 5.596 0 0 0-5.589 5.59c0 .019.001 1.936.008 2.078a5.589 5.589 0 0 0 8.517 4.447 1.384 1.384 0 0 0 2.655-.548V12.208c0-.765-.62-1.385-1.385-1.385M58.861 21.245a2.819 2.819 0 0 1-2.815-2.646c-.003-.213-.005-1.747-.005-1.947a2.824 2.824 0 0 1 2.82-2.82 2.824 2.824 0 0 1 2.82 2.82c0 .2-.001 1.734-.005 1.946a2.818 2.818 0 0 1-2.815 2.647m4.206-10.422c-.646 0-1.183.444-1.337 1.04a5.55 5.55 0 0 0-2.869-.8 5.596 5.596 0 0 0-5.59 5.59c0 .019.001 1.937.009 2.078a5.589 5.589 0 0 0 8.516 4.447 1.384 1.384 0 0 0 2.655-.548V12.208c0-.765-.62-1.385-1.384-1.385M83.451 10.823c-.764 0-1.384.62-1.384 1.385V22.63a1.385 1.385 0 0 0 2.769 0V12.208c0-.765-.62-1.385-1.385-1.385M99.759 10.823c-.765 0-1.385.62-1.385 1.385V22.63a1.385 1.385 0 0 0 2.77 0V12.208c0-.765-.62-1.385-1.385-1.385M76.266 18.6a2.82 2.82 0 0 1-2.815 2.645 2.82 2.82 0 0 1-2.815-2.647c-.004-.214-.005-1.746-.005-1.946a2.824 2.824 0 0 1 2.82-2.82 2.824 2.824 0 0 1 2.82 2.82c0 .193-.002 1.733-.005 1.949m-2.815-7.538c-1.03 0-1.991.284-2.82.772v-5.17a1.385 1.385 0 0 0-2.77 0V22.63a1.385 1.385 0 0 0 2.655.548c.856.529 1.86.836 2.935.836a5.59 5.59 0 0 0 5.582-5.288c.007-.137.008-2.054.008-2.074a5.596 5.596 0 0 0-5.59-5.59M45.664 11.063a5.58 5.58 0 0 0-2.674.677V6.665a1.385 1.385 0 0 0-2.77 0V22.63a1.385 1.385 0 1 0 2.77 0v-7.157c.106-.09.203-.191.281-.315a2.808 2.808 0 0 1 2.393-1.326 2.824 2.824 0 0 1 2.82 2.82c0 .254-.002 5.635-.006 5.944a1.385 1.385 0 0 0 2.767.104c.007-.137.008-5.989.008-6.048a5.596 5.596 0 0 0-5.59-5.59M94.503 10.823h-1.616V6.665a1.385 1.385 0 0 0-2.77 0v4.158h-1.614a1.385 1.385 0 0 0 0 2.77h1.615v9.037a1.385 1.385 0 0 0 2.77 0v-9.038h1.615a1.385 1.385 0 0 0 0-2.769" mask="url(#b)"/>
+        <path fill="#FF6066" d="M84.785 6.665a1.385 1.385 0 1 1-2.77 0 1.385 1.385 0 0 1 2.77 0" mask="url(#b)"/>
+        <path fill="#4FB5E8" d="M101.092 6.665a1.385 1.385 0 1 1-2.77 0 1.385 1.385 0 0 1 2.77 0" mask="url(#b)"/>
+    </g>
+</svg>

website/client/assets/svg/mana.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#2995CD" d="M22 15l-10 9-10-9L12 0z"/>
+        <path fill="#50B5E9" d="M4.6 14.7l7.4-3v9.6z"/>
+        <path fill="#1F709A" d="M12 11.7l7.4 3-7.4 6.6z" opacity=".25"/>
+        <path fill="#FFF" d="M12 11.7V3.6l7.4 11.1z" opacity=".25"/>
+        <path fill="#FFF" d="M4.6 14.7L12 3.6v8.1z" opacity=".5"/>
+        <path fill="#FFF" d="M7.2 14.3L12 7.2l4.8 7.1-4.8 4.3z" opacity=".5"/>
+    </g>
+</svg>

website/client/assets/svg/notifications.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>notifications</title>
+<path d="M26 4h-20c-1.7 0-3 1.3-3 3v14c0 1.7 1.3 3 3 3h5l2.9 3.1c1.2 1.2 3.1 1.2 4.2 0l2.9-3.1h5c1.7 0 3-1.3 3-3v-14c0-1.7-1.3-3-3-3v0zM27 21c0 0.6-0.4 1-1 1h-5.9l-3.5 3.7c-0.2 0.2-0.4 0.3-0.6 0.3s-0.4-0.1-0.7-0.3l-3.4-3.7h-5.9c-0.6 0-1-0.4-1-1v-14c0-0.6 0.4-1 1-1h20c0.6 0 1 0.4 1 1v14zM24 11h-16v-2h16v2zM24 15h-16v-2h16v2zM24 19h-16v-2h16v2z"></path>
+</svg>

website/client/assets/svg/rogue.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#4F2A93" d="M6.492 35.154l7.358-7.359c1.05-4.274 2.135-8.752 2.22-9.226.072-.495.235-1.597 1.132-2.653.453-.53 1.008-.966 1.707-1.35L39.353 3.301l6.69-1.557-1.494 6.599-11.334 20.542c-.359.655-.768 1.185-1.248 1.615l-.083.073c-1.065.906-2.133 1.064-2.707 1.15-.447.081-5.02 1.19-9.185 2.212l-7.36 7.36.868 4.688-9.87-1.826-1.828-9.871 4.69.868z"/>
+        <path fill="#4F2A93" d="M36.05 41.079l-7.358-7.359c-4.274-1.05-8.753-2.135-9.226-2.22-.495-.071-1.597-.234-2.653-1.13-.53-.454-.966-1.01-1.35-1.708L4.197 8.218 2.641 1.527 9.24 3.021 29.78 14.355c.656.36 1.186.768 1.616 1.248l.073.084c.906 1.064 1.064 2.133 1.15 2.707.081.446 1.19 5.019 2.212 9.184l7.36 7.361 4.688-.868-1.826 9.87-9.871 1.827.868-4.689z"/>
+        <path fill="#C6B6E4" d="M18.141 27.193c.22.399.432.664.647.848l7.643-2.722L6.48 5.368c-.164.188.048.728.39 1.377"/>
+        <path fill="#8966C7" d="M18.792 28.043c.39.332.78.386 1.181.447.622.091 10.277 2.468 10.277 2.468l.91-.91-4.73-4.728-7.638 2.723z"/>
+        <path fill="#7A54C0" d="M28.306 17.029c.398.219.663.432.847.647l-2.721 7.642L6.482 5.37c.184-.163.714.036 1.353.363"/>
+        <path fill="#6133B4" d="M29.155 17.68c.332.39.386.78.447 1.181.092.622 2.469 10.276 2.469 10.276l-.91.91-4.73-4.729 2.724-7.638z"/>
+        <path fill="#8966C7" d="M35.402 36.111l-1.494-1.494.467-3.177 1.494 1.495zM38.39 39.1l-1.494-1.495.468-3.176 1.494 1.494zM32.07 29.137l.81.81-.467 3.174-2.164-2.162"/>
+        <path fill="#6133B4" d="M33.908 34.617l-1.495-1.495.468-3.176 1.494 1.494zM36.896 37.605l-1.494-1.494.468-3.176 1.494 1.494zM39.885 40.594L38.39 39.1l.467-3.177 2.849 2.849z"/>
+        <path fill="#C6B6E4" d="M30.25 30.959l.162-1.657 1.66-.165-.165 1.659zM39.632 38.52l-.637 3.436 2.037-2.037zM43.069 37.882l-3.437.637 1.4 1.4zM41.032 39.92l-2.037 2.036 3.437-.636zM42.432 41.32l.637-3.437-2.037 2.037z"/>
+    </g>
+</svg>

website/client/assets/svg/silver-guild-badge.svg

@@ -6,8 +6,8 @@
     <g fill="none" fill-rule="evenodd">
         <g transform="translate(4)">
             <use fill="#E1E0E3" xlink:href="#a"/>
-            <path stroke="#A5A1AC" stroke-width="10" d="M34.03 5.031l4.443 1.934 12.031 5.237 12.032 5.237 2.445 1.065c-.183 14.83-1.676 23.96-5.418 31.395C55.326 58.32 47.803 64.81 35 70.545 22.197 64.81 14.674 58.32 10.437 49.9c-3.742-7.435-5.235-16.565-5.418-31.395L35 5.454l-.97-.423z"/>
+            <path stroke="#A5A1AC" stroke-width="10" d="M35 5.453L5.02 18.503c.182 14.831 1.675 23.961 5.417 31.396C14.674 58.32 22.197 64.81 35 70.545 47.803 64.81 55.326 58.32 59.563 49.9c3.742-7.435 5.235-16.565 5.418-31.395l-2.445-1.065L38.473 6.965l-4.442-1.934.969.422z"/>
-            <path stroke="#C3C0C7" stroke-width="6" d="M34.421 3.02a506596810.815 506596810.815 0 0 0 16.882 7.348l12.03 5.237 3.66 1.593c-.111 15.9-1.621 25.609-5.643 33.6C56.795 59.848 48.69 66.734 35 72.733c-13.691-6-21.795-12.885-26.35-21.935-4.022-7.991-5.532-17.7-5.643-33.6L35 3.272l-.579-.252z"/>
+            <path stroke="#C3C0C7" stroke-width="6" d="M35 3.272L3.007 17.198c.111 15.9 1.621 25.609 5.643 33.6C13.205 59.848 21.31 66.734 35 72.733c13.691-6 21.795-12.885 26.35-21.935 4.022-7.991 5.532-17.7 5.643-33.6l-3.66-1.593L39.272 5.131l-4.85-2.111.579.252z"/>
         </g>
         <g transform="translate(4)">
             <use fill="#FFF" xlink:href="#b"/>

website/client/assets/svg/user.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>user</title>
+<path d="M20 17h-0.4c1.9-1.2 3.3-3.3 3.4-5.8 0.1-3.8-3.1-7.2-6.9-7.2-4 0-7.1 3.1-7.1 7 0 2.6 1.3 4.8 3.4 6h-0.4c-3.9 0-7 3.1-7 7v1c0 1.7 1.3 3 3 3h16c1.7 0 3-1.3 3-3v-1c0-3.9-3.1-7-7-7v0zM11 11c0-2.8 2.2-5 5-5s5 2.2 5 5c0 2.8-2.2 5-5 5s-5-2.2-5-5v0zM24 26h-16c-0.6 0-1-0.4-1-1v-1c0-2.8 2.2-5 5-5h8c2.8 0 5 2.2 5 5v1c0 0.6-0.4 1-1 1v0z"></path>
+</svg>

website/client/assets/svg/warrior.svg

@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" viewBox="0 0 48 48">
+    <defs>
+        <path id="a" d="M31.392 9.115l-6.791 7.124v6.314l6.791-6.791V9.115z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd" transform="translate(0 1)">
+        <path fill="#F06166" d="M18.39 28.762l6.334 2.92c.526.243.868.732.999 1.297.219.948.883 3.156.937 4.33a.88.88 0 0 1-1.24.844l-10.588-5.07a1.781 1.781 0 0 1-.762-.763L9 21.733a.88.88 0 0 1 .844-1.24c1.173.054 3.335.683 4.33.937.56.142 1.054.472 1.296.998l2.92 6.334z"/>
+        <path fill="#C82B2B" d="M3.073 44.085l2.732 2.733 7.085-.557.364-4.656 4.069-4.067 7.401 3.522 5.536-1.49-2.322-9.99 15.514-14.477L46.422.741l-.007.002.003-.003V.734L32.057 3.702 17.58 19.218l-9.99-2.322L6.1 22.43l3.522 7.403L5.555 33.9l-4.654.367-.559 7.084 2.732 2.733z"/>
+        <path fill="#F06166" d="M8.927 41.769l-3.544-3.544 8.767-8.765 3.542 3.544z"/>
+        <path fill="#F06166" d="M3.377 40.231l.255-3.235 3.236-.255 3.544 3.546-.255 3.233-3.234.258z"/>
+        <path fill="#FFB6B8" d="M33.935 6.526l.3 6.391 8.108-8.108c-.15-.14-6.26.565-8.408 1.717"/>
+        <path fill="#F27B86" d="M33.787 6.602L16.66 24.568l4.39 1.538 13.186-13.189-.3-6.392c-.048.027-.148.077-.148.077"/>
+        <path fill="#F27B86" d="M16.66 24.567l-.148.164 1.864 4.045 2.67-2.67-4.386-1.539zM40.624 13.22l-6.392-.3 8.109-8.108c.14.15-.565 6.259-1.717 8.408"/>
+        <path fill="#E5414D" d="M40.548 13.368L22.582 30.496l-1.538-4.39L34.233 12.92l6.391.3a5.032 5.032 0 0 0-.076.148"/>
+        <path fill="#E5414D" d="M22.582 30.495l-.163.148-4.045-1.864 2.67-2.67 1.538 4.386z"/>
+        <path fill="#FFB6B8" d="M6.867 36.742l-.75 2.742-2.486-2.487zM10.406 40.28l-2.742.75 2.486 2.486z"/>
+        <path fill="#FFB6B8" d="M6.867 36.742l3.546 3.546-2.748.741-1.547-1.545z"/>
+        <path fill="#F27B86" d="M3.382 40.237l2.742-.75-2.486-2.486zM6.921 43.776l.75-2.742 2.486 2.486z"/>
+        <path fill="#F27B86" d="M3.382 40.237l3.547 3.546.74-2.748-1.545-1.547z"/>
+        <path fill="#E5414D" d="M14.701 36.01l-3.552-3.553 2.143-2.14 3.552 3.55z"/>
+        <path fill="#F06166" d="M12.56 38.151L9.008 34.6l2.142-2.14 3.552 3.55z"/>
+        <path fill="#E5414D" d="M10.418 40.293L6.866 36.74l2.142-2.14 3.552 3.55z"/>
+        <path fill="#FFB6B8" d="M18.395 28.764l-2.92-6.334a1.629 1.629 0 0 0-.46-.576 2.12 2.12 0 0 0-.836-.422c-.995-.254-3.157-.883-4.33-.937a.871.871 0 0 0-.727.336l4.258 3.634 3.13 6.192 1.89-1.89-.005-.003z"/>
+        <path fill="#F06166" d="M13.38 24.466L9.12 20.83a.871.871 0 0 0-.117.904l5.07 10.587c.085.165.197.313.327.444l2.109-2.108-3.13-6.192z"/>
+        <path fill="#F27B86" d="M26.674 37.312c-.054-1.173-.684-3.337-.937-4.33a2.12 2.12 0 0 0-.423-.836 1.629 1.629 0 0 0-.576-.46l-6.334-2.92-.002-.005-1.891 1.891 6.192 3.13 3.635 4.258a.874.874 0 0 0 .336-.728"/>
+        <path fill="#E5414D" d="M22.703 33.781l3.634 4.259a.871.871 0 0 1-.904.117l-10.587-5.07a1.766 1.766 0 0 1-.444-.327l2.109-2.108 6.192 3.13z"/>
+        <mask id="b" fill="#fff">
+            <use xlink:href="#a"/>
+        </mask>
+        <path fill="#FFB6B8" d="M29.472 23.28h.987V5.828h-.987zM24.601 27.692h2.92V10.24h-2.92z" mask="url(#b)"/>
+    </g>
+</svg>

website/client/assets/svg/wizard.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#1F6EA2" d="M24.462 1.151c-3.695 3.714-7.321 14.62-9.236 20.913-.84-1.062-1.799-2.076-3.158-3.326-4.806 3.514-7.357 7.25-10.646 11.816 8.916 7.926 11.233 9.256 22.995 16.005l.045-.025h.001l.045.025c11.76-6.749 14.079-8.08 22.994-16.005-3.287-4.566-5.841-8.302-10.645-11.816-1.361 1.25-2.317 2.264-3.158 3.326-1.915-6.294-5.543-17.2-9.236-20.913h-.001z"/>
+        <path fill="#278ABF" d="M24.464 32.108l3.561-1.265c6.075-.605 8.425-2.281 9.426-3.498l6.053 2.707.002.013a.45.45 0 0 1-.105.286 4.97 4.97 0 0 1-.32.33c-3.405 3.315-18.237 11.981-18.617 12.202V32.108z"/>
+        <path fill="#53B4E5" d="M36.406 23.041c.23-.188.292-.34.674-.336 1.183.067 5.169 5.175 6.064 6.461.194.278.366.61.36.885l-6.053-2.707c.236-.367.19-.92-.355-1.252-.818-.501-2.529.949-2.959.284-.599-.927 2.04-3.147 2.27-3.335"/>
+        <path fill="#2AA0CF" d="M23.591 7.487c-5.39 15.419-8.227 23.817-8.227 23.817l9.097 4.76V6.839c-.36 0-.718.216-.87.648"/>
+        <path fill="#278ABF" d="M25.332 7.487c-.152-.432-.51-.648-.87-.648v29.225l9.097-4.76s-2.837-8.398-8.227-23.817"/>
+        <path fill="#4DB2D6" d="M24.462 32.108L20.9 30.843c-6.075-.605-8.342-2.352-9.425-3.498L5.42 30.052l-.002.013a.45.45 0 0 0 .106.286c.09.104.197.215.318.33 3.406 3.315 18.238 11.981 18.619 12.202V32.108z"/>
+        <path fill="#6BC4E9" d="M12.519 23.041c-.23-.188-.292-.34-.674-.336-1.183.067-5.169 5.175-6.063 6.461-.194.278-.367.61-.361.885l6.053-2.707c-.236-.367-.19-.92.356-1.252.817-.501 2.528.949 2.958.284.6-.927-2.039-3.147-2.27-3.335"/>
+        <path fill="#A9DBF6" d="M24.463 34.998v-5.101l-7.21-4.13-1.48 4.049z"/>
+        <path fill="#84CFF2" d="M24.463 34.998v-5.101l7.207-4.13 1.483 4.049z"/>
+    </g>
+</svg>

website/client/components/appHeader.vue

@@ -1,31 +1,55 @@
 <template lang="pug">
 #app-header.row
-  user-list-detail
+  user-list-detail(:user="user")
+  .no-party.d-flex.justify-content-center.text-center(v-if="!user.party._id")
+    .align-self-center(v-once)
+      h3 {{ $t('battleWithFriends') }}
+      span.small-text(v-html="$t('inviteFriendsParty')")
+      br
+      button.btn.btn-primary {{ $t('startAParty') }}
 </template>
 
 <style lang="scss" scoped>
 @import '~client/assets/scss/colors.scss';
 
-// TODO move to colors.scss if used in other places
-$header-dark-background: #271B3D;
-$header-text-color: #D5C8FF;
-
-/* TODO refactor: only partially ported from SemanticUI; */
 #app-header {
   padding-left: 14px;
   margin-top: 56px;
   background: $purple-50;
-  height: 192px;
+  height: 204px;
-  color: $header-text-color;
+  color: $header-color;
+}
+
+.no-party {
+  flex-grow: 1;
+
+  .small-text {
+    color: $header-color;
+  }
+
+  h3 {
+    color: $white;
+    margin-bottom: 4px;
+  }
+
+  button {
+    margin-top: 16px;
+  }
 }
 </style>
 
 <script>
+import { mapState } from 'client/libs/store';
 import UserListDetail from './userListDetail';
 
 export default {
   components: {
     UserListDetail,
   },
+  computed: {
+    ...mapState({
+      user: 'user.data',
+    }),
+  },
 };
 </script>

website/client/components/appMenu.vue

@@ -1,8 +1,7 @@
 <template lang="pug">
 nav.navbar.navbar-inverse.fixed-top.navbar-toggleable-sm
   .navbar-header
-    // TODO srcset / svg images
+    .logo.svg-icon(v-html="icons.logo")
-    img(src="~assets/header/png/logo@3x.png")
   .collapse.navbar-collapse
     ul.navbar-nav.mr-auto
       router-link.nav-item(tag="li", :to="{name: 'tasks'}", exact)
@@ -13,20 +12,18 @@ nav.navbar.navbar-inverse.fixed-top.navbar-toggleable-sm
           router-link.dropdown-item(:to="{name: 'items'}", exact) {{ $t('items') }}
           router-link.dropdown-item(:to="{name: 'equipment'}") {{ $t('equipment') }}
           router-link.dropdown-item(:to="{name: 'stable'}") {{ $t('stable') }}
-      router-link.nav-item(tag="li", :to="{name: 'market'}", exact)
+      router-link.nav-item(tag="li", :to="{name: 'shops'}", exact)
-        a.nav-link(v-once) {{ $t('market') }}
+        a.nav-link(v-once) {{ $t('shops') }}
+      router-link.nav-item(tag="li", :to="{name: 'party'}", exact)
+        a.nav-link(v-once) {{ $t('party') }}
       router-link.nav-item.dropdown(tag="li", :to="{name: 'tavern'}", :class="{'active': $route.path.startsWith('/guilds')}")
         a.nav-link(v-once) {{ $t('guilds') }}
         .dropdown-menu
           router-link.dropdown-item(:to="{name: 'tavern'}") {{ $t('tavern') }}
           router-link.dropdown-item(:to="{name: 'myGuilds'}") {{ $t('myGuilds') }}
           router-link.dropdown-item(:to="{name: 'guildsDiscovery'}") {{ $t('guildsDiscovery') }}
-      router-link.nav-item.dropdown(tag="li", :to="{name: 'tavern'}", :class="{'active': $route.path.startsWith('/social')}")
+      router-link.nav-item(tag="li", :to="{name: 'challenges'}", exact)
-        a.nav-link(v-once) {{ $t('social') }}
+        a.nav-link(v-once) {{ $t('challenges') }}
-        .dropdown-menu
-          router-link.dropdown-item(:to="{name: 'inbox'}") {{ $t('inbox') }}
-          router-link.dropdown-item(:to="{name: 'challenges'}") {{ $t('challenges') }}
-          router-link.dropdown-item(:to="{name: 'party'}") {{ $t('party') }}
       router-link.nav-item.dropdown(tag="li", to="/help", :class="{'active': $route.path.startsWith('/help')}")
         a.nav-link(v-once) {{ $t('help') }}
         .dropdown-menu
@@ -34,40 +31,43 @@ nav.navbar.navbar-inverse.fixed-top.navbar-toggleable-sm
           router-link.dropdown-item(to="/help/report-bug") {{ $t('reportBug') }}
           router-link.dropdown-item(to="/help/request-feature") {{ $t('requestAF') }}
     .item-with-icon
-      img(src="~assets/header/png/gem@3x.png")
+      .svg-icon(v-html="icons.gem")
-      span {{userGems}}
+      span {{userGems | roundBigNumber}}
     .item-with-icon
-      img(src="~assets/header/png/gold@3x.png")
+      .svg-icon(v-html="icons.gold")
-      span {{user.stats.gp | floor}}
+      span {{user.stats.gp | roundBigNumber}}
-    .item-with-icon
+    .item-with-icon.item-notifications
-      img(src="~assets/header/png/notifications@3x.png")
+      .svg-icon(v-html="icons.notifications")
-    router-link.dropdown.item-with-icon(:to="{name: 'avatar'}")
+    router-link.dropdown.item-with-icon.item-user(:to="{name: 'avatar'}")
-      // TODO icons should be white when active
+      .svg-icon(v-html="icons.user")
-      img(src="~assets/header/png/user@3x.png")
       .dropdown-menu.dropdown-menu-right.user-dropdown
-        router-link.dropdown-item(:to="{name: 'avatar'}") {{ $t('editAvatar') }}
+        router-link.dropdown-item.edit-avatar(:to="{name: 'avatar'}") 
-        // .dropdown-divider
+          h3 {{ user.profile.name }}
+          span.small-text {{ $t('editAvatar') }}
+        //.dropdown-divider
         router-link.dropdown-item(:to="{name: 'stats'}") {{ $t('stats') }}
         router-link.dropdown-item(:to="{name: 'achievements'}") {{ $t('achievements') }}
-        // .dropdown-divider
         router-link.dropdown-item(:to="{name: 'settings'}") {{ $t('settings') }}
-        // .dropdown-divider
         router-link.dropdown-item(to="/logout") {{ $t('logout') }}
 </template>
 
 <style lang="scss" scoped>
 @import '~client/assets/scss/colors.scss';
+@import '~client/assets/scss/utils.scss';
 
 nav.navbar {
-  background: $purple-100 url(~assets/header/png/bits.png) right no-repeat;
+  background: $purple-100 url(~assets/svg/for-css/bits.svg) right no-repeat;
-  padding: 0 1.5rem;
+  padding-left: 25px;
+  padding-right: 12.5px;
   height: 56px;
+  box-shadow: 0 1px 2px 0 rgba($black, 0.24);
 }
 
 .navbar-header {
-  margin-right: 3rem;
+  margin-right: 48px;
 
-  img {
+  .logo {
+    width: 128px;
     height: 28px;
   }
 }
@@ -78,18 +78,18 @@ nav.navbar {
     color: $white;
     font-weight: bold;
     line-height: 1.5;
-    padding: 1rem 1.5rem;
+    padding: 16px 24px;
     transition: none;
   }
 
   &:hover {
     .nav-link {
       color: $white;
-      background: $purple-300;
+      background: $purple-200;
     }
   }
 
-  &.active,&:hover {
+  &.active:not(:hover) {
     .nav-link {
       box-shadow: 0px -4px 0px $purple-300 inset;
     }
@@ -102,8 +102,12 @@ nav.navbar {
   margin-top: 0; // remove the gap so it doesn't close
 }
 
+.dropdown + .dropdown {
+  margin-left: 0px;
+}
+
 .dropdown-menu:not(.user-dropdown) {
-  background: $purple-300;
+  background: $purple-200;
   border-radius: 0px;
   border: none;
   box-shadow: none;
@@ -117,13 +121,14 @@ nav.navbar {
     box-shadow: none;
     color: $white;
     border: none;
+    line-height: 1.5;
 
     &.active {
       background: $purple-300;
     }
 
     &:hover {
-      background: $purple-200;
+      background: $purple-300;
 
       &:last-child {
         border-bottom-right-radius: 5px;
@@ -135,23 +140,76 @@ nav.navbar {
 
 .item-with-icon {
   color: $white;
-  font-weight: bold;
+  font-size: 16px;
-  padding: 0.75rem 0;
+  font-weight: normal;
-  padding-left: 1rem;
+  padding-top: 16px;
+  padding-left: 16px;
 
-  img {
+  .svg-icon {
     vertical-align: middle;
-    width: 32px;
+    width: 24px;
-    height: 32px;
+    height: 24px;
-    margin-right: 0.5rem;
+    margin-right: 8px;
+    float: left;
   }
 }
+
+.item-notifications, .item-user {
+  padding-right: 12.5px;
+  padding-left: 12.5px;
+  color: $header-color;
+
+  &:hover {
+    color: $white;
+  }
+
+  .svg-icon {
+    margin-right: 0px;
+    color: inherit;
+  }
+}
+
+.item-notifications {
+  margin-left: 33.5px;
+}
+
+.item-user .edit-avatar {
+  h3 {
+    color: $gray-10;
+    margin-bottom: 0px;
+  }
+
+  .small-text {
+    color: $gray-200;
+    font-style: normal;
+    display: block;
+  }
+
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
 </style>
 
 <script>
 import { mapState, mapGetters } from 'client/libs/store';
+import gemIcon from 'assets/svg/gem.svg';
+import goldIcon from 'assets/svg/gold.svg';
+import notificationsIcon from 'assets/svg/notifications.svg';
+import userIcon from 'assets/svg/user.svg';
+import logo from 'assets/svg/logo.svg';
 
 export default {
+  data () {
+    return {
+      icons: Object.freeze({
+        gem: gemIcon,
+        gold: goldIcon,
+        notifications: notificationsIcon,
+        user: userIcon,
+        logo,
+      }),
+    };
+  },
   computed: {
     ...mapGetters({
       userGems: 'user:gems',

website/client/components/avatar.vue

@@ -2,7 +2,7 @@
 .avatar(:style="{width, height, paddingTop}", :class="backgroundClass")
   .character-sprites
     template(v-if="!avatarOnly" v-once)
-      // Mount
+      // Mount Body
       span(v-if="user.items.currentMount", :class="'Mount_Body_' + user.items.currentMount")
 
     // Buffs that cause visual changes to avatar: Snowman, Ghost, Flower, etc
@@ -40,13 +40,18 @@
       span(v-if="user.items.currentMount", :class="'Mount_Head_' + user.items.currentMount")
       // Pet
       span.current-pet(v-if="user.items.currentPet", :class="'Pet-' + user.items.currentPet")
+  .class-badge.d-flex.justify-content-center(v-if="user.flags.classSelected")
+    .align-self-center.svg-icon(v-html="icons[user.stats.class]")
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
+@import '~client/assets/scss/colors.scss';
+
 .avatar {
   width: 140px;
   height: 147px;
   image-rendering: pixelated;
+  position: relative;
 }
 
 .character-sprites {
@@ -60,12 +65,35 @@
 }
 
 .current-pet {
-  bottom: 21px;
+  bottom: 0px;
-  left: 20px;
+  left: 0px;
+}
+
+.class-badge {
+  $badge-size: 32px;
+  position: absolute;
+  left: calc(50% - (16px));
+  bottom: -($badge-size / 2);
+
+  width: $badge-size;
+  height: $badge-size;
+  background: $white;
+  box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
+  border-radius: 100px;
+
+  .svg-icon {
+    width: 19px;
+    height: 19px;
+  }
 }
 </style>
 
 <script>
+import warriorIcon from 'assets/svg/warrior.svg';
+import rogueIcon from 'assets/svg/rogue.svg';
+import healerIcon from 'assets/svg/healer.svg';
+import wizardIcon from 'assets/svg/wizard.svg';
+
 export default {
   props: {
     user: {
@@ -85,6 +113,16 @@ export default {
       default: 147,
     },
   },
+  data () {
+    return {
+      icons: Object.freeze({
+        warrior: warriorIcon,
+        rogue: rogueIcon,
+        healer: healerIcon,
+        wizard: wizardIcon,
+      }),
+    };
+  },
   computed: {
     paddingTop () {
       let val = '28px';

website/client/components/guilds/discovery.vue

@@ -8,7 +8,7 @@
         .float-right
           span.dropdown-label {{ $t('sortBy') }}
           b-dropdown(:text="$t('sort')", right=true)
-            b-dropdown-item(v-for='sortOption in sortOptions', @click='sort(sortOption.value)') {{sortOption.text}}
+            b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}
     .col-md-12
       public-guild-item(v-for="guild in filteredGuilds", :key='guild._id', :guild="guild", :display-leave='true')
       mugen-scroll(

website/client/components/guilds/groupFormModal.vue

@@ -20,7 +20,7 @@
           span.custom-control-indicator
           span.custom-control-description(v-once) {{ $t('onlyLeaderCreatesChallenges') }}
           b-tooltip.icon(:content="$t('privateDescription')")
-            img(src='~assets/guilds/information.svg')
+            .svg-icon(v-html='icons.information')
 
         br
         label.custom-control.custom-checkbox
@@ -34,7 +34,7 @@
           span.custom-control-indicator
           span.custom-control-description(v-once) {{ $t('privateGuild') }}
           b-tooltip.icon(:content="$t('privateDescription')")
-            img(src='~assets/guilds/information.svg')
+            .svg-icon(v-html='icons.information')
 
         br
         label.custom-control.custom-checkbox
@@ -72,20 +72,20 @@
 
       .form-group.text-center
         div.item-with-icon
-          img(src="~assets/guilds/green-gem.svg")
+          .svg-icon(v-html="icons.gem")
           span.count 4
         button.btn.btn-primary.btn-md(v-if='!newGuild.id', :disabled='!newGuild.name || !newGuild.description') {{ $t('createGuild') }}
         button.btn.btn-primary.btn-md(v-if='newGuild.id', :disabled='!newGuild.name || !newGuild.description') {{ $t('updateGuild') }}
         .gem-description(v-once) {{ $t('guildGemCostInfo') }}
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>
-  @import '~client/assets/scss/colors.scss';
+  @import '~client/assets/scss/colors.scss';
-
+
   textarea {
     height: 150px;
   }
-
+
   .description-count, .gem-description {
     font-size: 12px;
     line-height: 1.33;
@@ -175,6 +175,9 @@ import bFormCheckbox from 'bootstrap-vue/lib/components/form-checkbox';
 import bFormSelect from 'bootstrap-vue/lib/components/form-select';
 import bTooltip from 'bootstrap-vue/lib/components/tooltip';
 
+import gemIcon from 'assets/svg/gem.svg';
+import informationIcon from 'assets/svg/information.svg';
+
 export default {
   components: {
     bModal,
@@ -256,6 +259,11 @@ export default {
     });
     data.categoriesHashByKey = hashedCategories;
 
+    data.icons = Object.freeze({
+      gem: gemIcon,
+      information: informationIcon,
+    });
+
     return data;
   },
   mounted () {

website/client/components/guilds/guild.vue

@@ -12,12 +12,12 @@
         .float-right
           .row.icon-row
             .col-6
-              img.icon.shield(src="~assets/guilds/gold-guild-badge.svg")
+              .svg-icon.shield(v-html="icons.goldGuildBadge")
               span.number {{guild.memberCount}}
               div(v-once) {{ $t('guildMembers') }}
             .col-6
               .item-with-icon
-                img.icon.gem(src="~assets/header/png/gem@3x.png")
+                .svg-icon.gem(v-html="icons.gem")
                 span.number {{guild.memberCount}}
                 div(v-once) {{ $t('guildBank') }}
     .row.chat-row
@@ -32,7 +32,7 @@
 
         .row
           .col-md-2
-            img.icon(src="~assets/chat/like.svg")
+            .svg-icon(v-html="icons.like")
           .col-md-10
             .card(v-for="msg in guild.chat", :key="msg.id")
               .card-block
@@ -44,19 +44,19 @@
                 .text {{msg.text}}
                 hr
                 span.action(v-once)
-                  img.icon(src="~assets/chat/like.svg")
+                  .svg-icon(v-html="icons.like")
                   | {{$t('like')}}
                 span.action(v-once)
-                  img.icon(src="~assets/chat/copy.svg")
+                  .svg-icon(v-html="icons.copy")
                   | {{$t('copyAsTodo')}}
                 span.action(v-once)
-                  img.icon(src="~assets/chat/report.svg")
+                  .svg-icon(v-html="icons.report")
                   | {{$t('report')}}
                 span.action(v-once)
-                  img.icon(src="~assets/chat/delete.svg")
+                  .svg-icon(v-html="icons.delete")
                   | {{$t('delete')}}
                 span.action.float-right
-                  img.icon(src="~assets/chat/liked.svg")
+                  .svg-icon(v-html="icons.liked")
                   | +3
 
   .col-md-4.sidebar
@@ -100,105 +100,104 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '~client/assets/scss/colors.scss';
+@import '~client/assets/scss/colors.scss';
 
-  .sidebar {
+.sidebar {
-    background-color: $gray-600;
+  background-color: $gray-600;
+}
+
+.card {
+  margin: 2em 0;
+  padding: 1em;
+
+  h3.leader {
+    color: $purple-200;
   }
 
-  .card {
+  .text {
-    margin: 2em 0;
-    padding: 1em;
-
-    h3.leader {
-      color: $purple-200;
-    }
-
-    .text {
-      font-size: 16px;
-      line-height: 1.43;
-      color: $gray-50;
-    }
-  }
-
-  .guild-background {
-    background-image: linear-gradient(to bottom, rgba($gray-600, 0), $gray-600);
-    height: 300px;
-  }
-
-  textarea {
-    height: 150px;
-    width: 100%;
-    border-radius: 2px;
-    background-color: $white;
-    border: solid 1px $gray-400;
     font-size: 16px;
-    font-style: italic;
     line-height: 1.43;
-    color: $gray-300;
+    color: $gray-50;
-    padding: .5em;
   }
+}
 
-  .icon.shield, .icon.gem {
+.guild-background {
-    width: 40px;
+  background-image: linear-gradient(to bottom, rgba($gray-600, 0), $gray-600);
-    margin-right: 1em;
+  height: 300px;
-  }
+}
 
-  .icon-row {
+textarea {
-    width: 200px;
+  height: 150px;
-    margin-top: 3em;
+  width: 100%;
-    margin-right: 3em;
+  background-color: $white;
+  border: solid 1px $gray-400;
+  font-size: 16px;
+  font-style: italic;
+  line-height: 1.43;
+  color: $gray-300;
+  padding: .5em;
+}
 
-    .number {
+.svg-icon.shield, .svg-icon.gem {
-      font-size: 22px;
+  width: 40px;
-      font-weight: bold;
+  margin-right: 1em;
-    }
+}
-  }
 
-  .chat-row {
+.icon-row {
-    margin-top: 2em;
+  width: 200px;
+  margin-top: 3em;
+  margin-right: 3em;
 
-    .send-chat {
+  .number {
-      margin-top: -3.5em;
+    font-size: 22px;
-      z-index: 10;
-      position: relative;
-      margin-right: 1em;
-    }
-  }
-
-  .hr {
-    width: 100%;
-    height: 20px;
-    border-bottom: 1px solid $gray-500;
-    text-align: center;
-    margin: 2em 0;
-  }
-
-  .hr-middle {
-    font-size: 16px;
     font-weight: bold;
-    font-family: 'Roboto Condensed';
-    line-height: 1.5;
-    text-align: center;
-    color: $gray-200;
-    background-color: $gray-700;
-    padding: .2em;
-    margin-top: .2em;
-    display: inline-block;
-    width: 100px;
   }
+}
 
-  span.action {
+.chat-row {
-    font-size: 14px;
+  margin-top: 2em;
-    line-height: 1.33;
+
-    color: $gray-200;
+  .send-chat {
-    font-weight: 500;
+    margin-top: -3.5em;
+    z-index: 10;
+    position: relative;
     margin-right: 1em;
   }
+}
 
-  span.action .icon {
+.hr {
-    margin-right: .3em;
+  width: 100%;
-  }
+  height: 20px;
+  border-bottom: 1px solid $gray-500;
+  text-align: center;
+  margin: 2em 0;
+}
+
+.hr-middle {
+  font-size: 16px;
+  font-weight: bold;
+  font-family: 'Roboto Condensed';
+  line-height: 1.5;
+  text-align: center;
+  color: $gray-200;
+  background-color: $gray-700;
+  padding: .2em;
+  margin-top: .2em;
+  display: inline-block;
+  width: 100px;
+}
+
+span.action {
+  font-size: 14px;
+  line-height: 1.33;
+  color: $gray-200;
+  font-weight: 500;
+  margin-right: 1em;
+}
+
+span.action .icon {
+  margin-right: .3em;
+}
 </style>
 
 <script>
@@ -206,6 +205,14 @@ import groupUtilities from 'client/mixins/groupsUtilities';
 import { mapState } from 'client/libs/store';
 import membersModal from './membersModal';
 
+import deleteIcon from 'assets/svg/delete.svg';
+import copyIcon from 'assets/svg/copy.svg';
+import likeIcon from 'assets/svg/like.svg';
+import likedIcon from 'assets/svg/liked.svg';
+import reportIcon from 'assets/svg/report.svg';
+import gemIcon from 'assets/svg/gem.svg';
+import goldGuildBadgeIcon from 'assets/svg/gold-guild-badge.svg';
+
 export default {
   mixins: [groupUtilities],
   props: ['guildId'],
@@ -215,6 +222,15 @@ export default {
   data () {
     return {
       guild: null,
+      icons: Object.freeze({
+        like: likeIcon,
+        copy: copyIcon,
+        report: reportIcon,
+        delete: deleteIcon,
+        gem: gemIcon,
+        goldGuildBadge: goldGuildBadgeIcon,
+        liked: likedIcon,
+      }),
     };
   },
   computed: {

website/client/components/guilds/membersModal.vue

@@ -16,7 +16,7 @@ div
         .col-6
           span.dropdown-label {{ $t('sortBy') }}
           b-dropdown(:text="$t('sort')", right=true)
-            b-dropdown-item(v-for='sortOption in sortOptions', @click='sort(sortOption.value)') {{sortOption.text}}
+            b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}
     .row(v-for='member in members', :key='member', )
       .col-8
         user-list-detail

website/client/components/guilds/myGuilds.vue

@@ -4,7 +4,7 @@
 
   .col-10.no-guilds.standard-page(v-if='filteredGuilds.length === 0')
     .no-guilds-wrapper
-      img(src='~assets/guilds/grey-badge.svg')
+      .svg-icon(v-html='icons.greyBadge')
       h2 {{$t('noGuildsTitle')}}
       p {{$t('noGuildsParagraph1')}}
       p {{$t('noGuildsParagraph2')}}
@@ -17,33 +17,33 @@
         .float-right
           span.dropdown-label {{ $t('sortBy') }}
           b-dropdown(:text="$t('sort')", right=true)
-            b-dropdown-item(v-for='sortOption in sortOptions', @click='sort(sortOption.value)') {{sortOption.text}}
+            b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}
     .row
       .col-md-12
         public-guild-item(v-for="guild in filteredGuilds", :key='guild._id', :guild="guild", :display-gem-bank='true')
 </template>
 
 <style lang="scss" scoped>
-  @import '~client/assets/scss/colors.scss';
+@import '~client/assets/scss/colors.scss';
-  .sort-select {
+.sort-select {
-    margin: 2em;
+  margin: 2em;
+}
+
+.no-guilds {
+  text-align: center;
+  color: $gray-200;
+  margin-top: 15em;
+
+  p {
+    font-size: 14px;
+    line-height: 1.43;
   }
 
-  .no-guilds {
+  .no-guilds-wrapper {
-    text-align: center;
+    width: 400px;
-    color: $gray-200;
+    margin: 0 auto;
-    margin-top: 15em;
-
-    p {
-      font-size: 14px;
-      line-height: 1.43;
-    }
-
-    .no-guilds-wrapper {
-      width: 400px;
-      margin: 0 auto;
-    }
   }
+}
 </style>
 
 <script>
@@ -58,11 +58,16 @@ import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
 import PublicGuildItem from './publicGuildItem';
 import Sidebar from './sidebar';
 
+import greyBadgeIcon from 'assets/svg/grey-badge.svg';
+
 export default {
   mixins: [groupUtilities],
   components: { PublicGuildItem, MugenScroll, Sidebar, bFormSelect, bDropdown, bDropdownItem },
   data () {
     return {
+      icons: Object.freeze({
+        greyBadge: greyBadgeIcon,
+      }),
       loading: false,
       search: '',
       filters: {},

website/client/components/guilds/publicGuildItem.vue

@@ -3,7 +3,7 @@
   .card-block
     .row
       .col-md-2
-        img.icon.shield(src="~assets/guilds/gold-guild-badge.svg")
+        .svg-icon.shield(v-html="icons.goldGuildBadge")
         .member-count {{guild.memberCount}}
       .col-md-10
         .row
@@ -15,7 +15,7 @@
             button.btn.btn-danger(v-if='isMember && displayLeave' @click='leave()', v-once) {{ $t('leave') }}
             button.btn.btn-success(v-if='!isMember'  @click='join()', v-once) {{ $t('join') }}
             div.item-with-icon(v-if='displayGemBank')
-              img(src="~assets/guilds/green-gem.svg")
+              .svg-icon(v-html="icons.gem")
               span.count {{ guild.balance }}
             div.guild-bank(v-if='displayGemBank', v-once) {{$t('guildBank')}}
         .row
@@ -26,89 +26,84 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '~client/assets/scss/colors.scss';
+@import '~client/assets/scss/colors.scss';
 
-  .card {
+.card {
-    height: 260px;
+  height: 260px;
-    border-radius: 4px;
+  border-radius: 4px;
-    background-color: $white;
+  background-color: $white;
-    box-shadow: 0 2px 2px 0 rgba($black, 0.15), 0 1px 4px 0 rgba($black, 0.1);
+  box-shadow: 0 2px 2px 0 rgba($black, 0.15), 0 1px 4px 0 rgba($black, 0.1);
-    margin-bottom: 1rem;
+  margin-bottom: 1rem;
 
-    .category-label {
+  .category-label {
-      min-width: 100px;
+    min-width: 100px;
-      border-radius: 100px;
+    border-radius: 100px;
-      background-color: $gray-600;
+    background-color: $gray-600;
-      padding: .5em;
+    padding: .5em;
-      display: inline-block;
+    display: inline-block;
-      margin-right: .5em;
+    margin-right: .5em;
-      font-size: 12px;
+    font-size: 12px;
-      font-weight: 500;
+    font-weight: 500;
-      line-height: 1.33;
+    line-height: 1.33;
-      text-align: center;
+    text-align: center;
-      color: $gray-300;
+    color: $gray-300;
+  }
+
+  .recommend-text {
+    font-size: 12px;
+    font-style: italic;
+    line-height: 2;
+    color: $gray-300;
+  }
+
+  .cta-container {
+    margin: 0 auto;
+    margin-top: 4em;
+  }
+
+  .item-with-icon {
+    .svg-icon {
+      height: 37px;
     }
 
-    .recommend-text {
+    .count {
-      font-size: 12px;
+      font-size: 20px;
-      font-style: italic;
+      height: 37px;
-      line-height: 2;
+      width: 37px;
-      color: $gray-300;
+      margin-left: .2em;
-    }
-
-    .cta-container {
-      margin: 0 auto;
-      margin-top: 4em;
-    }
-
-    .shield {
-      width: 70px;
-      height: 76px;
-      margin: auto;
-      margin: 4em auto;
-      display: block;
-      background-size: cover;
-      width: 100%;
-      height: 100px;
-    }
-
-    .item-with-icon {
-      img {
-        height: 37px;
-      }
-
-      .count {
-        font-size: 20px;
-        height: 37px;
-        width: 37px;
-        margin-left: .2em;
-      }
-    }
-
-    .guild-bank {
-      font-size: 12px;
-      line-height: 1.33;
-      color: $gray-300;
-    }
-
-    .member-count {
-      position: relative;
-      top: -3.6em;
-      left: -.1em;
-      font-size: 28px;
-      font-weight: bold;
-      font-family: 'Roboto Condensed';
-      line-height: 1.2;
-      text-align: center;
-      color: #b36213;
     }
   }
+
+  .shield {
+    width: 70px;
+  }
+
+  .guild-bank {
+    font-size: 12px;
+    line-height: 1.33;
+    color: $gray-300;
+  }
+
+  .member-count {
+    position: relative;
+    top: -3.6em;
+    left: -.1em;
+    font-size: 28px;
+    font-weight: bold;
+    font-family: 'Roboto Condensed';
+    line-height: 1.2;
+    text-align: center;
+    color: #b36213;
+  }
+}
 </style>
 
 <script>
 import { mapState } from 'client/libs/store';
 import groupUtilities from 'client/mixins/groupsUtilities';
 import findIndex from 'lodash/findIndex';
+import gemIcon from 'assets/svg/gem.svg';
+import goldGuildBadgeIcon from 'assets/svg/gold-guild-badge.svg';
 
 export default {
   mixins: [groupUtilities],
@@ -119,6 +114,14 @@ export default {
       return this.isMemberOfGroup(this.user, this.guild);
     },
   },
+  data () {
+    return {
+      icons: Object.freeze({
+        gem: gemIcon,
+        goldGuildBadge: goldGuildBadgeIcon,
+      }),
+    };
+  },
   methods: {
     async join () {
       // @TODO: This needs to be in the notifications where users will now accept invites

website/client/components/inventory/drawer.vue

@@ -2,8 +2,7 @@
 .drawer-container
   .drawer-title(@click="open = !open")
     | {{title}}
-    img.drawer-toggle-icon(src="~assets/drawer/minimize.svg", v-if="open")
+    .drawer-toggle-icon.svg-icon(v-html="open ? icons.minimize : icons.expand", :class="{ closed: !open }")
-    img.drawer-toggle-icon.closed(src="~assets/drawer/expand.svg", v-else)
   transition(name="slide-up", @afterLeave="adjustPagePadding", @afterEnter="adjustPagePadding")
     .drawer-content(v-show="open")
       slot(name="drawer-header")
@@ -36,10 +35,10 @@
 
 .drawer-toggle-icon {
   float: right;
-  margin: 10px;
+  margin-right: 16px;
 
   &.closed {
-    margin-top: 5px;
+    margin-top: 3px;
   }
 }
 
@@ -128,6 +127,9 @@
 </style>
 
 <script>
+import expandIcon from 'assets/svg/expand.svg';
+import minimizeIcon from 'assets/svg/minimize.svg';
+
 export default {
   props: {
     title: {
@@ -141,6 +143,10 @@ export default {
   data () {
     return {
       open: true,
+      icons: Object.freeze({
+        expand: expandIcon,
+        minimize: minimizeIcon,
+      }),
     };
   },
   methods: {

website/client/components/social/index.vue

@@ -1,19 +0,0 @@
-<template lang="pug">
-.row
-  secondary-menu.col-12
-    router-link.nav-link(:to="{name: 'tavern'}", exact) {{ $t('tavern') }}
-    router-link.nav-link(:to="{name: 'inbox'}") {{ $t('inbox') }}
-    router-link.nav-link(:to="{name: 'guildsDiscovery'}") {{ $t('guilds') }}
-  .col-12
-    router-view
-</template>
-
-<script>
-import SecondaryMenu from 'client/components/secondaryMenu';
-
-export default {
-  components: {
-    SecondaryMenu,
-  },
-};
-</script>

website/client/components/userListDetail.vue

@@ -1,53 +1,67 @@
 <template lang="pug">
-div
+.d-flex
-  avatar#header-avatar(:user="user", style='float:left;')
+  avatar#header-avatar(:user="user")
-  div(style='float:left;')
+  div
-    span.character-name {{user.profile.name}}
+    h3.character-name 
-    span.character-level Lvl {{user.stats.lvl}}
+      | {{user.profile.name}}
+      .is-buffed(v-if="isBuffed")
+        .svg-icon(v-html="icons.buff")
+    span.small-text.character-level {{ characterLevel }}
     .progress-container.d-flex
-      img.icon(src="~assets/header/png/health@3x.png")
+      .svg-icon(v-html="icons.health")
       .progress
-        .progress-bar.bg-danger(:style="{width: `${percent(user.stats.hp, MAX_HEALTH)}%`}")
+        .progress-bar.bg-health(:style="{width: `${percent(user.stats.hp, MAX_HEALTH)}%`}")
-      span {{user.stats.hp | round}} / {{MAX_HEALTH}}
+      span.small-text {{user.stats.hp | round}} / {{MAX_HEALTH}}
     .progress-container.d-flex
-      img.icon(src="~assets/header/png/experience@3x.png")
+      .svg-icon(v-html="icons.experience")
       .progress
-        .progress-bar.bg-warning(:style="{width: `${percent(user.stats.exp, toNextLevel)}%`}")
+        .progress-bar.bg-experience(:style="{width: `${percent(user.stats.exp, toNextLevel)}%`}")
-      span {{user.stats.exp | round}} / {{toNextLevel}}
+      span.small-text {{user.stats.exp | round}} / {{toNextLevel}}
-    .progress-container.d-flex(ng-if="user.flags.classSelected && !user.preferences.disableClasses")
+    .progress-container.d-flex(v-if="user.flags.classSelected && !user.preferences.disableClasses")
-      img.icon(src="~assets/header/png/magic@3x.png")
+      .svg-icon(v-html="icons.mana")
       .progress
-        .progress-bar(:style="{width: `${percent(user.stats.mp, maxMP)}%`}")
+        .progress-bar.bg-mana(:style="{width: `${percent(user.stats.mp, maxMP)}%`}")
-      span {{user.stats.mp | round}} / {{maxMP}}
+      span.small-text {{user.stats.mp | round}} / {{maxMP}}
 </template>
 
 <style lang="scss" scoped>
 @import '~client/assets/scss/colors.scss';
 
-// TODO move to colors.scss if used in other places
+.small-text {
-$header-dark-background: #271B3D;
+  color: $header-color;
-$header-text-color: #D5C8FF;
+}
 
 .character-name {
-  display: block;
+  margin-top: 24px;
-  font-size: 16px;
+  margin-bottom: 1px;
-  margin-top: 32px;
-  line-height: 1.5;
   color: $white;
-  font-weight: bold;
 }
 
 .character-level {
   display: block;
-  font-size: 12px;
+  font-style: normal;
-  margin-top: 4px;
+  margin-bottom: 16px;
-  margin-bottom: 20px;
+}
-  line-height: 1;
+
+.is-buffed {
+  width: 20px;
+  height: 20px;
+  background: $header-dark-background;
+  display: inline-block;
+  margin-left: 16px;
+  vertical-align: middle;
+
+  .svg-icon {
+    display: block;
+    width: 10px;
+    height: 12px;
+    margin: 0 auto;
+  }
 }
 
 #header-avatar {
   margin-top: 24px;
-  margin-right: 1rem;
+  margin-right: 16px;
 }
 
 .progress-container {
@@ -55,58 +69,87 @@ $header-text-color: #D5C8FF;
 }
 
 .progress-container > span {
-  font-size: 12px;
+  color: $header-color;
-  margin-left: 10px;
+  margin-left: 16px;
-  line-height: 1em;
+  font-style: normal;
 }
 
-.progress-container > .icon {
+.progress-container > .svg-icon {
-  width: 12px;
+  width: 24px;
-  height: 12px;
+  height: 24px;
-  margin-right: 10px;
+  margin-right: 8px;
+  margin-top: -4px;
 }
 
 .progress-container > .progress {
   width: 203px;
   margin: 0px;
-  border-radius: 0px;
+  border-radius: 2px;
-  height: 12px;
+  height: 16px;
   background-color: $header-dark-background;
 }
 
 .progress-container > .progress > .progress-bar {
-  border-radius: 0px;
+  border-radius: 2px;
-  height: 12px;
+  height: 16px;
   min-width: 0px;
 }
 </style>
 
 <script>
 import Avatar from './avatar';
-import { mapState } from 'client/libs/store';
+import { mapState, mapGetters } from 'client/libs/store';
 
 import { toNextLevel } from '../../common/script/statHelpers';
 import statsComputed from '../../common/script/libs/statsComputed';
 import percent from '../../common/script/libs/percent';
 
+import buffIcon from 'assets/svg/buff.svg';
+import healthIcon from 'assets/svg/health.svg';
+import experienceIcon from 'assets/svg/experience.svg';
+import manaIcon from 'assets/svg/mana.svg';
+
 export default {
   components: {
     Avatar,
   },
+  props: {
+    user: {
+      type: Object,
+      required: true,
+    },
+  },
+  data () {
+    return {
+      icons: Object.freeze({
+        buff: buffIcon,
+        health: healthIcon,
+        experience: experienceIcon,
+        mana: manaIcon,
+      }),
+    };
+  },
   methods: {
     percent,
   },
   computed: {
     ...mapState({
-      user: 'user.data',
       MAX_HEALTH: 'constants.MAX_HEALTH',
     }),
+    ...mapGetters({
+      isBuffed: 'user:isBuffed',
+    }),
     maxMP () {
       return statsComputed(this.user).maxMP;
     },
     toNextLevel () { // Exp to next level
       return toNextLevel(this.user.stats.lvl);
     },
+    characterLevel () {
+      return `${this.$t('level')} ${this.user.stats.lvl} ${
+        this.user.stats.class ? this.$t(this.user.stats.class) : ''
+      }`;
+    },
   },
 };
 </script>

website/client/filters/registerGlobals.js

@@ -1,6 +1,8 @@
 import Vue from 'vue';
 import round from './round';
 import floor from './floor';
+import roundBigNumber from './roundBigNumber';
 
 Vue.filter('round', round);
 Vue.filter('floor', floor);
+Vue.filter('roundBigNumber', roundBigNumber);

website/client/filters/roundBigNumber.js

@@ -0,0 +1,25 @@
+import round from './round';
+
+function _convertToThousand (num) {
+  return `${(num / Math.pow(10, 3)).toFixed(1)}k`;
+}
+
+function _convertToMillion (num) {
+  return `${(num / Math.pow(10, 6)).toFixed(1)}m`;
+}
+
+function _convertToBillion (num) {
+  return `${(num / Math.pow(10, 9)).toFixed(1)}b`;
+}
+
+export default function roundBigNumber (num) {
+  if (num > 999999999) {
+    return _convertToBillion(num);
+  } else if (num > 999999) {
+    return _convertToMillion(num);
+  } else if (num > 999) {
+    return _convertToThousand(num);
+  } else {
+    return round(num);
+  }
+}

website/client/router.js

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 
-import EmptyView from './components/emptyView';
+// import EmptyView from './components/emptyView';
 // TODO Dummy elements used as placeholder until real components are implemented
 import ParentPage from './components/parentPage';
 import Page from './components/page';
@@ -9,23 +9,28 @@ import Page from './components/page';
 // Tasks
 import UserTasks from './components/userTasks';
 
+// Except for tasks that are always loaded all the other main level
+// components are loaded in separate webpack chunks.
+// See https://webpack.js.org/guides/code-splitting-async/
+// for docs
+
 // Inventory
-import InventoryContainer from './components/inventory/index';
+const InventoryContainer = () => import(/* webpackChunkName: "inventory" */'./components/inventory/index');
-import ItemsPage from './components/inventory/items/index';
+const ItemsPage = () => import(/* webpackChunkName: "inventory" */'./components/inventory/items/index');
-import EquipmentPage from './components/inventory/equipment/index';
+const EquipmentPage = () => import(/* webpackChunkName: "inventory" */'./components/inventory/equipment/index');
-import StablePage from './components/inventory/stable';
+const StablePage = () => import(/* webpackChunkName: "inventory" */'./components/inventory/stable');
 
 // Social
-import SocialContainer from './components/social/index';
+// TODO add inbox back
-import InboxPage from './components/social/inbox/index';
+// import InboxPage from './components/social/inbox/index';
-import InboxConversationPage from './components/social/inbox/conversationPage';
+// import InboxConversationPage from './components/social/inbox/conversationPage';
 
 // Guilds
-import GuildIndex from './components/guilds/index';
+const GuildIndex = () => import(/* webpackChunkName: "guilds" */ './components/guilds/index');
-import TavernPage from './components/guilds/tavern';
+const TavernPage = () => import(/* webpackChunkName: "guilds" */ './components/guilds/tavern');
-import MyGuilds from './components/guilds/myGuilds';
+const MyGuilds = () => import(/* webpackChunkName: "guilds" */ './components/guilds/myGuilds');
-import GuildsDiscoveryPage from './components/guilds/discovery';
+const GuildsDiscoveryPage = () => import(/* webpackChunkName: "guilds" */ './components/guilds/discovery');
-import GuildPage from './components/guilds/guild';
+const GuildPage = () => import(/* webpackChunkName: "guilds" */ './components/guilds/guild');
 
 Vue.use(VueRouter);
 
@@ -49,7 +54,7 @@ export default new VueRouter({
         { name: 'stable', path: 'stable', component: StablePage },
       ],
     },
-    { name: 'market', path: '/market', component: Page },
+    { name: 'shops', path: '/shops', component: Page },
     {
       path: '/guilds',
       component: GuildIndex,
@@ -73,30 +78,25 @@ export default new VueRouter({
         },
       ],
     },
-    {
+    { name: 'challenges', path: 'challenges', component: Page },
-      path: '/social',
+    { name: 'party', path: 'party', component: Page },
-      component: SocialContainer,
+    /* TODO add inbox back
-      children: [
+      {
-        {
+        path: 'inbox',
-          path: 'inbox',
+        component: EmptyView,
-          component: EmptyView,
+        children: [
-          children: [
+          {
-            {
+            name: 'inbox',
-              name: 'inbox',
+            path: '',
-              path: '',
+            component: InboxPage,
-              component: InboxPage,
+          },
-            },
+          {
-            {
+            name: 'conversation',
-              name: 'conversation',
+            path: 'conversation/:id',
-              path: 'conversation/:id',
+            component: InboxConversationPage,
-              component: InboxConversationPage,
+          },
-            },
+        ],
-          ],
+      }, */
-        },
-        { name: 'challenges', path: 'challenges', component: Page },
-        { name: 'party', path: 'party', component: Page },
-      ],
-    },
     {
       path: '/user',
       component: ParentPage,

website/client/store/getters/user.js

@@ -1,3 +1,8 @@
 export function gems (store) {
   return store.state.user.data.balance * 4;
+}
+
+export function isBuffed (store) {
+  const buffs = store.state.user.data.stats.buffs;
+  return buffs.str || buffs.per || buffs.con || buffs.int;
 }

website/common/locales/en/newClient.json

@@ -1,4 +1,6 @@
 {
+  "shops": "Shops",
+  "faq": "FAQ",
   "costumePopoverText": "Select \"Use Costume\" to equip items to your avatar without affecting the stats from your Battle Gear! This means that you can dress up your avatar in whatever outfit you like while still having your best Battle Gear equipped.",
   "autoEquipPopoverText": "Select this option to automatically equip gear as soon as you purchase it.",
   "costumeDisabled": "You have disabled your costume.",
@@ -22,6 +24,7 @@
   "groupBy2": "Group By",
   "quantity": "Quantity",
   "AZ": "A-Z",
+  "editAvatar": "Edit Avatar",
   "sort": "Sort",
   "memberCount": "Member Count",
   "recentActivity": "Recent Activity",
@@ -60,5 +63,6 @@
   "noGuildsTitle": "You aren’t a member of any Guilds.",
   "noGuildsParagraph1": "Guilds are social groups created by other players that can offer you support,  accountability, and encouraging chat.",
   "noGuildsParagraph2": "Click the Discover tab to see recommended Guilds based on your interests, browse Habitica’s public Guilds, or create your own Guild.",
-  "privateDescription": "A private Guild will not be displayed in Habitica’s Guild directory. New members can be added by invitation only."
+  "privateDescription": "A private Guild will not be displayed in Habitica’s Guild directory. New members can be added by invitation only.",
+  "inviteFriendsParty": "Inviting friends to your party will grant you an exclusive <br/> Quest Scroll to battle the Basi-List together!"
 }