Merge pull request #2288 from Human-Connection/migrate-styleguide-icons

Migrate styleguide icons

webapp/.babelrc

@@ -12,6 +12,7 @@
   ],
   "env": {
     "test": {
+      "plugins": ["require-context-hook"],
       "presets": [
         [
           "@babel/preset-env",

webapp/README.md

@@ -92,15 +92,15 @@ You can then visit the Storybook playground on `http://localhost:3002`
 
 ## Styleguide Migration
 
-We are currently in the process of migrating our styleguide components and design tokens from the [Nitro Styleguide](https://github.com/Human-Connection/Nitro-Styleguide) into the main [Human Connection repository](https://github.com/Human-Connection/Human-Connection) and refactoring our components in the process. During this migration, our new components will live in a `view` folder to separate them from the old, yet untouched components.
+We are currently in the process of migrating our styleguide components and design tokens from the [Nitro Styleguide](https://github.com/Human-Connection/Nitro-Styleguide) into the main [Human Connection repository](https://github.com/Human-Connection/Human-Connection) and refactoring our components in the process. During this migration, our new components will live in a `_new/` folder to separate them from the old, yet untouched components.
 
 ### Folder Structure
 
-The folder structure we are aiming for is based on the [directory setup proposed by Nuxt.js](https://nuxtjs.org/guide/directory-structure):
+The folder structure we are following is [prescribed by Nuxt.js](https://nuxtjs.org/guide/directory-structure):
 
-- **assets** contains icons, images and logos in `svg` format
-- **components** are the generic building blocks of the app – small, reusable and usually not coupled to state
-- **features** are composed of components but tied to a particular function of the app (e.g. `comment` or `post`)
+- **assets** contains icons, images and logos in `svg` format and all shared SCSS files such as `tokens`
+- **components** separated into two sub-folders:
+    - **generic** are the generic building blocks of the app – small, reusable and usually not coupled to state
+    - **features** are composed of components but tied to a particular function of the app (e.g. `comment` or `post`)
 - **layouts** can use components to create layout templates for pages
 - **pages** are the entry points for all `routes` in the app and are composed of layouts, features and components
-- **styles** holds all shared SCSS files such as `variables` and `mixins`

webapp/assets/_new/icons/index.js

@@ -0,0 +1,13 @@
+const svgFileList = require.context('./svgs', true, /\.svg/)
+const icons = {}
+const iconNames = []
+
+svgFileList.keys().forEach(fileName => {
+  const svgCode = svgFileList(fileName)
+  const iconName = fileName.replace('./', '').replace('.svg', '')
+  icons[iconName] = svgCode
+  iconNames.push(iconName)
+})
+
+export { iconNames }
+export default icons

webapp/assets/_new/icons/svgs/angellist.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>angellist</title>
+<path d="M12.813 4c0.312 0.021 0.615 0.118 0.875 0.25 0.521 0.265 0.919 0.67 1.281 1.125 0.725 0.91 1.311 2.103 1.813 3.313 0.207 0.498 0.39 0.985 0.563 1.469 0.109-0.401 0.21-0.808 0.344-1.219 0.391-1.201 0.902-2.395 1.594-3.344 0.346-0.474 0.731-0.895 1.25-1.188s1.174-0.421 1.813-0.281c0.628 0.138 1.091 0.677 1.281 1.156s0.24 0.97 0.25 1.5c0.020 1.060-0.168 2.29-0.406 3.5-0.385 1.96-0.863 3.535-1.063 4.188 0.328 0.248 0.624 0.516 0.844 0.813 1.025 1.382 0.75 3.010 0.75 3.375 0 4.219-1.55 6.731-3.406 8s-3.874 1.344-4.75 1.344c-0.805 0-2.922 0.024-4.938-0.906s-3.906-3.011-3.906-6.563c0-1.078 0.261-1.996 0.906-2.625 0.403-0.392 0.929-0.57 1.469-0.625-0.205-0.548-0.361-1.162-0.281-1.844 0.089-0.757 0.563-1.558 1.344-2.063 0.319-0.206 0.672-0.326 1.031-0.344 0.169-0.008 0.336 0.001 0.5 0.031-0.273-0.768-0.577-1.665-0.844-2.625-0.325-1.173-0.597-2.383-0.625-3.469-0.014-0.543 0.037-1.059 0.219-1.563s0.577-1.017 1.156-1.25c0.303-0.122 0.625-0.177 0.938-0.156zM12.656 5.969c-0.013-0.002-0.018 0.026-0.031 0.031 0.004 0.007-0.006 0.024-0.031 0.094-0.051 0.14-0.104 0.453-0.094 0.844 0.020 0.781 0.229 1.879 0.531 2.969 0.497 1.791 1.081 3.25 1.313 3.813 0.442-0.431 1.082-0.719 1.781-0.719h0.063c-0.255-0.9-0.658-2.135-1.25-3.563-0.465-1.121-1.026-2.178-1.531-2.813-0.253-0.317-0.492-0.526-0.625-0.594-0.066-0.034-0.103-0.060-0.125-0.063zM21.656 6.125c-0.047-0-0.102 0.001-0.156 0.031-0.168 0.095-0.391 0.304-0.625 0.625-0.468 0.641-0.925 1.687-1.281 2.781-0.488 1.498-0.754 2.761-0.906 3.594 0.721 0.094 1.355 0.232 1.906 0.406 0.238-0.82 0.595-2.103 0.906-3.688 0.224-1.139 0.39-2.277 0.375-3.063-0.006-0.332-0.054-0.548-0.094-0.688-0.040 0.001-0.078 0-0.125 0zM16.125 15c-0.248 0-0.319 0.061-0.406 0.156s-0.169 0.254-0.188 0.469c-0.015 0.179 0.007 0.355 0.063 0.5 0.046 0.070 0.080 0.147 0.125 0.219 0.020 0.024 0.040 0.042 0.063 0.063 0.062 0.056 0.14 0.102 0.219 0.125 1.258 0.369 2.844 0.844 2.844 0.844 0.399 0.115 0.723 0.546 0.723 0.961 0 0.444-0.352 0.881-0.785 0.977 0 0-0.565 0.117-1.125 0.469-0.348 0.218-0.665 0.461-0.844 0.813-0.109 0.214-0.156 0.468-0.156 0.781 0 0.866 0.241 1.414 0.469 1.75s0.375 0.406 0.375 0.406l-1.094 1.656s-0.515-0.316-0.938-0.938c-0.189-0.278-0.354-0.651-0.5-1.063-0.079 0.184-0.099 0.39-0.219 0.531-0.466 0.55-1.139 0.906-1.906 0.906-0.74 0-1.409-0.369-1.906-0.813s-0.89-0.987-1.281-1.594l1.688-1.094c0.346 0.537 0.672 0.982 0.938 1.219s0.412 0.281 0.563 0.281c0.124 0 0.312-0.113 0.375-0.188-0.216-0.366-0.428-0.696-0.656-1-0.988-1.312-2.049-2.044-2.656-2.188-0.376-0.089-0.483-0.046-0.594 0.063s-0.313 0.471-0.313 1.219c0 2.907 1.245 4.056 2.75 4.75s3.296 0.719 4.094 0.719c0.727 0 2.304-0.097 3.625-1s2.531-2.589 2.531-6.344c0-0.822 0.143-1.5-0.344-2.156s-1.846-1.5-5.531-1.5zM11.5 15.031c-0.34 0.22-0.376 0.367-0.406 0.625s0.025 0.662 0.188 1.063c0.324 0.802 0.938 1.531 0.938 1.531 0.663 0.506 1.276 1.177 1.875 2l0.063-0.031c-0.196-0.257-0.218-0.129-0.063-0.125s0.414-0.041 0.594-0.125 0.279-0.181 0.313-0.25 0.064-0.147-0.063-0.469c-0.536-1.37-1.376-2.666-2.156-3.438-0.39-0.386-0.765-0.63-1-0.719s-0.239-0.090-0.281-0.063z"></path>
+</svg>

webapp/assets/_new/icons/svgs/angle-down.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>angle-down</title>
+<path d="M4.219 10.781l11.781 11.781 11.781-11.781 1.438 1.438-12.5 12.5-0.719 0.688-0.719-0.688-12.5-12.5z"></path>
+</svg>

webapp/assets/_new/icons/svgs/arrow-down.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>arrow-down</title>
+<path d="M15 4h2v20.063l6.781-6.781 1.438 1.438-8.5 8.5-0.719 0.688-0.719-0.688-8.5-8.5 1.438-1.438 6.781 6.781v-20.063z"></path>
+</svg>

webapp/assets/_new/icons/svgs/arrow-left.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>arrow-left</title>
+<path d="M13.281 6.781l1.438 1.438-6.781 6.781h20.063v2h-20.063l6.781 6.781-1.438 1.438-8.5-8.5-0.688-0.719 0.688-0.719z"></path>
+</svg>

webapp/assets/_new/icons/svgs/arrow-right.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>arrow-right</title>
+<path d="M18.719 6.781l8.5 8.5 0.688 0.719-0.688 0.719-8.5 8.5-1.438-1.438 6.781-6.781h-20.063v-2h20.063l-6.781-6.781z"></path>
+</svg>

webapp/assets/_new/icons/svgs/at.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>at</title>
+<path d="M16.188 4c6.337 0.093 11.62 5.29 11.813 11.625 0.005 0.143 0 0.274 0 0.406-0.012 3.289-2.716 5.97-6 5.969-1.271-0.001-2.391-0.628-3.125-1.563-0.827 0.948-2.027 1.563-3.375 1.563-2.473 0-4.5-2.027-4.5-4.5v-3c0-2.473 2.027-4.5 4.5-4.5 0.928 0 1.781 0.295 2.5 0.781v-0.781h2v8c0 1.116 0.883 1.999 2 2 2.208 0.001 3.992-1.766 4-3.969 0-0.122 0.003-0.231 0-0.344-0.16-5.253-4.589-9.61-9.844-9.688-6.165-0.090-11.048 5.348-10 11.719 0.696 4.234 4.182 7.613 8.438 8.188 2.919 0.394 5.61-0.452 7.656-2.094l1.25 1.563c-2.452 1.968-5.691 2.968-9.156 2.5-5.139-0.694-9.346-4.723-10.188-9.844-1.242-7.545 4.666-14.139 12.031-14.031zM15.5 12c-1.393 0-2.5 1.107-2.5 2.5v3c0 1.393 1.107 2.5 2.5 2.5s2.5-1.107 2.5-2.5v-3c0-1.393-1.107-2.5-2.5-2.5z"></path>
+</svg>

webapp/assets/_new/icons/svgs/balance-scale.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>balance-scale</title>
+<path d="M16 5c1.292 0 2.394 0.844 2.813 2h7.188v2h-1.406l0.281 0.5 4 7 0.125 0.25v0.25c0 2.75-2.25 5-5 5s-5-2.25-5-5v-0.25l0.125-0.25 4-7 0.281-0.5h-4.594c-0.304 0.84-0.973 1.509-1.813 1.813v13.188h4v2h-10v-2h4v-13.188c-0.842-0.304-1.507-0.969-1.813-1.813h-4.594l0.281 0.5 4 7 0.125 0.25v0.25c0 2.75-2.251 5-5 5s-5-2.25-5-5v-0.25l0.125-0.25 4-7 0.281-0.5h-1.406v-2h7.188c0.418-1.156 1.521-2 2.813-2zM16 7c-0.564 0-1 0.436-1 1s0.436 1 1 1 1-0.436 1-1-0.436-1-1-1zM8 12.031l-2.281 3.969h4.563zM24 12.031l-2.281 3.969h4.563zM5.25 18c0.402 1.161 1.444 2 2.75 2s2.348-0.839 2.75-2h-5.5zM21.25 18c0.402 1.161 1.444 2 2.75 2s2.348-0.839 2.75-2h-5.5z"></path>
+</svg>

webapp/assets/_new/icons/svgs/ban.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>ban</title>
+<path d="M16 3c7.168 0 13 5.832 13 13s-5.832 13-13 13-13-5.832-13-13 5.832-13 13-13zM16 5c-2.647 0-5.073 0.918-6.969 2.469l15.344 15.656c1.635-1.919 2.625-4.399 2.625-7.125 0-6.087-4.913-11-11-11zM7.625 8.875c-1.635 1.919-2.625 4.399-2.625 7.125 0 6.087 4.913 11 11 11 2.647 0 5.073-0.918 6.969-2.469z"></path>
+</svg>

webapp/assets/_new/icons/svgs/bars.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>bars</title>
+<path d="M4 7h24v2h-24v-2zM4 15h24v2h-24v-2zM4 23h24v2h-24v-2z"></path>
+</svg>

webapp/assets/_new/icons/svgs/bell.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>bell</title>
+<path d="M15 3c1.105 0 2 0.895 2 2 0 0.085-0.021 0.168-0.031 0.25 3.521 0.924 6.031 4.273 6.031 8.031v8.719c0 0.565 0.435 1 1 1h1v2h-7.188c0.114 0.316 0.188 0.647 0.188 1 0 1.645-1.355 3-3 3s-3-1.355-3-3c0-0.353 0.073-0.684 0.188-1h-7.188v-2h1c0.565 0 1-0.435 1-1v-9c0-3.726 2.574-6.866 6.031-7.75-0.010-0.082-0.031-0.165-0.031-0.25 0-1.105 0.895-2 2-2zM14.563 7c-3.118 0.226-5.563 2.824-5.563 6v9c0 0.353-0.073 0.684-0.188 1h12.375c-0.114-0.316-0.188-0.647-0.188-1v-8.719c0-3.319-2.546-6.183-5.813-6.281-0.064-0.002-0.124-0-0.188 0-0.148 0-0.292-0.011-0.438 0zM15 25c-0.564 0-1 0.436-1 1s0.436 1 1 1 1-0.436 1-1-0.436-1-1-1z"></path>
+</svg>

webapp/assets/_new/icons/svgs/bold.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>bold</title>
+<path d="M16 7h-9v18h11c2.8 0 5-2.2 5-5 0-2.2-1.4-4-3.3-4.7 0.8-0.9 1.3-2 1.3-3.3 0-2.8-2.2-5-5-5zM9 15v-6h7c1.7 0 3 1.3 3 3s-1.3 3-3 3h-7zM9 23v-6h9c1.7 0 3 1.3 3 3s-1.3 3-3 3h-9zM16 5v0c3.9 0 7 3.1 7 7 0 0.9-0.2 1.8-0.5 2.6 1.5 1.3 2.5 3.3 2.5 5.4 0 3.9-3.1 7-7 7h-13v-22h11zM11 11v0 2h5c0.6 0 1-0.4 1-1s-0.4-1-1-1h-5zM11 19v0 2h7c0.6 0 1-0.4 1-1s-0.4-1-1-1h-7z"></path>
+</svg>

webapp/assets/_new/icons/svgs/bookmark.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>bookmark</title>
+<path d="M7 5h18v23l-1.594-1.188-7.406-5.563-7.406 5.563-1.594 1.188v-23zM9 7v17l6.406-4.813 0.594-0.438 0.594 0.438 6.406 4.813v-17h-14z"></path>
+</svg>

webapp/assets/_new/icons/svgs/bullhorn.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>bullhorn</title>
+<path d="M28 3.031v9.156c1.156 0.418 2 1.521 2 2.813s-0.844 2.394-2 2.813v9.156l-1.594-1.156s-2.007-1.443-4.875-2.906-6.587-2.906-9.813-2.906h-3.375l1.625 5.719 0.344 1.281h-6.063l-0.219-0.719-2-7-0.031-0.156v-9.125h9.719c3.27 0 6.987-1.412 9.844-2.875s4.844-2.938 4.844-2.938zM26 6.75c-0.82 0.558-1.459 1.064-3.531 2.125-2.929 1.5-6.726 3.050-10.469 3.125v6c3.708 0.073 7.499 1.595 10.438 3.094 2.078 1.060 2.735 1.567 3.563 2.125v-16.469zM4 12v6h6v-6h-6zM4.344 20l1.406 5h1.906l-1.406-5h-1.906z"></path>
+</svg>

webapp/assets/_new/icons/svgs/check.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>check</title>
+<path d="M28.281 6.281l1.438 1.438-18 18-0.719 0.688-0.719-0.688-8-8 1.438-1.438 7.281 7.281z"></path>
+</svg>

webapp/assets/_new/icons/svgs/clock.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>clock-o</title>
+<path d="M16 4c6.616 0 12 5.384 12 12s-5.384 12-12 12-12-5.384-12-12 5.384-12 12-12zM16 6c-5.535 0-10 4.465-10 10s4.465 10 10 10 10-4.465 10-10-4.465-10-10-10zM15 8h2v7h5v2h-7v-9z"></path>
+</svg>

webapp/assets/_new/icons/svgs/close.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>close</title>
+<path d="M7.219 5.781l8.781 8.781 8.781-8.781 1.438 1.438-8.781 8.781 8.781 8.781-1.438 1.438-8.781-8.781-8.781 8.781-1.438-1.438 8.781-8.781-8.781-8.781z"></path>
+</svg>

webapp/assets/_new/icons/svgs/cogs.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>cogs</title>
+<path d="M21.5 2.5h2v1.406c0.828 0.146 1.586 0.474 2.25 0.938l0.938-0.938 1.406 1.406-0.938 0.938c0.464 0.664 0.792 1.421 0.938 2.25h1.406v2h-1.406c-0.147 0.837-0.466 1.613-0.938 2.281l0.969 1.031-1.469 1.375-0.938-1c-0.656 0.451-1.405 0.763-2.219 0.906v1.406h-2v-1.406c-0.828-0.146-1.586-0.474-2.25-0.938l-1.031 1.063-1.438-1.438 1.063-1.031c-0.464-0.664-0.792-1.421-0.938-2.25h-1.406v-2h1.406c0.143-0.814 0.456-1.563 0.906-2.219l-1-0.938 1.375-1.469 1.031 0.969c0.669-0.471 1.445-0.79 2.281-0.938v-1.406zM22.5 5.813c-2.055 0-3.688 1.632-3.688 3.688s1.632 3.688 3.688 3.688 3.688-1.632 3.688-3.688-1.632-3.688-3.688-3.688zM9.531 11.719l0.719 1.813c0.53-0.132 1.087-0.219 1.656-0.219 0.571 0 1.126 0.085 1.656 0.219l0.719-1.813 1.844 0.75-0.719 1.813c0.944 0.571 1.742 1.372 2.313 2.313l1.813-0.719 0.75 1.844-1.813 0.719c0.132 0.529 0.219 1.087 0.219 1.656s-0.086 1.126-0.219 1.656l1.813 0.719-0.75 1.844-1.813-0.719c-0.569 0.952-1.367 1.766-2.313 2.344l0.719 1.781-1.844 0.75-0.719-1.781c-0.529 0.134-1.087 0.219-1.656 0.219-0.573 0-1.123-0.084-1.656-0.219l-0.719 1.781-1.844-0.75 0.719-1.781c-0.961-0.577-1.765-1.384-2.344-2.344l-1.781 0.719-0.75-1.844 1.781-0.719c-0.134-0.53-0.219-1.087-0.219-1.656s0.085-1.128 0.219-1.656l-1.781-0.719 0.75-1.844 1.781 0.719c0.577-0.945 1.392-1.743 2.344-2.313l-0.719-1.813zM11.906 15.313c-2.663 0-4.813 2.118-4.813 4.781s2.15 4.813 4.813 4.813 4.781-2.15 4.781-4.813-2.118-4.781-4.781-4.781z"></path>
+</svg>

webapp/assets/_new/icons/svgs/comment.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>comment</title>
+<path d="M3 6h26v20h-9.563l-2.719 2.719-0.719 0.688-0.719-0.688-2.719-2.719h-9.563v-20zM5 8v16h8.406l0.313 0.281 2.281 2.281 2.281-2.281 0.313-0.281h8.406v-16h-22zM9 11h14v2h-14v-2zM9 15h14v2h-14v-2zM9 19h10v2h-10v-2z"></path>
+</svg>

webapp/assets/_new/icons/svgs/comments.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>comments</title>
+<path d="M2 5h20v16h-9.656l-4.719 3.781-1.625 1.313v-5.094h-4v-16zM4 7v12h4v2.906l3.375-2.688 0.281-0.219h8.344v-12h-16zM24 9h6v16h-4v5.094l-6.344-5.094h-9.313l2.5-2h7.5l3.656 2.906v-2.906h4v-12h-4v-2z"></path>
+</svg>

webapp/assets/_new/icons/svgs/edit.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>edit</title>
+<path d="M25 4.031c0.765 0 1.517 0.298 2.094 0.875 1.154 1.154 1.154 3.034 0 4.188l-10.094 10.125-0.313 0.063-3.5 0.688-1.469 0.313 0.313-1.469 0.688-3.5 0.063-0.313 0.219-0.219 9.906-9.875c0.577-0.577 1.329-0.875 2.094-0.875zM25 5.969c-0.235 0-0.464 0.121-0.688 0.344l-9.688 9.688-0.344 1.719 1.719-0.344 9.688-9.688c0.446-0.446 0.446-0.929 0-1.375-0.223-0.223-0.453-0.344-0.688-0.344zM4 8h13.188l-2 2h-9.188v16h16v-9.188l2-2v13.188h-20v-20z"></path>
+</svg>

webapp/assets/_new/icons/svgs/ellipsis-v.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>ellipsis-v</title>
+<path d="M16 6c1.105 0 2 0.895 2 2s-0.895 2-2 2-2-0.895-2-2 0.895-2 2-2zM16 14c1.105 0 2 0.895 2 2s-0.895 2-2 2-2-0.895-2-2 0.895-2 2-2zM16 22c1.105 0 2 0.895 2 2s-0.895 2-2 2-2-0.895-2-2 0.895-2 2-2z"></path>
+</svg>

webapp/assets/_new/icons/svgs/envelope.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>envelope</title>
+<path d="M3 8h26v18h-26v-18zM7.313 10l8.688 5.781 8.688-5.781h-17.375zM5 10.875v13.125h22v-13.125l-10.438 6.969-0.563 0.344-0.563-0.344z"></path>
+</svg>

webapp/assets/_new/icons/svgs/exclamation-circle.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>exclamation-circle</title>
+<path d="M16 4c6.616 0 12 5.384 12 12s-5.384 12-12 12-12-5.384-12-12 5.384-12 12-12zM16 6c-5.535 0-10 4.465-10 10s4.465 10 10 10 10-4.465 10-10-4.465-10-10-10zM15 10h2v8h-2v-8zM15 20h2v2h-2v-2z"></path>
+</svg>

webapp/assets/_new/icons/svgs/eye-slash.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>eye-slash</title>
+<path d="M3.719 2.281l6.75 6.75c1.685-0.612 3.538-1.031 5.531-1.031 8.395 0 14.494 7.044 14.75 7.344l0.625 0.719-0.656 0.656c-0.193 0.192-3.247 3.135-7.344 5.219l6.344 6.344-1.438 1.438-8.688-8.719-11.125-11.125-6.188-6.156zM16 10c-1.389 0-2.697 0.254-3.938 0.625l2.063 2.063c0.513-0.415 1.165-0.688 1.875-0.688 1.654 0 3 1.346 3 3 0 0.71-0.273 1.362-0.688 1.875l2.844 2.844c1.144-1.249 1.844-2.904 1.844-4.719 0-1.3-0.386-2.556-1.063-3.656-1.776-0.788-3.773-1.344-5.938-1.344zM6.625 10.875l2.563 2.563c-0.121 0.513-0.188 1.027-0.188 1.563 0 3.565 2.68 6.54 6.219 6.938l0.094 0.031c0.466 0.039 0.908 0.039 1.375 0l0.125-0.031c0.261-0.029 0.531-0.068 0.781-0.125l1.719 1.719c-0.778 0.198-1.577 0.343-2.375 0.406h-0.063c-0.29 0.025-0.585 0.063-0.875 0.063s-0.585-0.037-0.875-0.063h-0.063c-6.964-0.555-13.495-6.934-13.781-7.219l-0.656-0.656 0.625-0.719c0.144-0.17 2.137-2.479 5.375-4.469zM7.281 12.844c-1.775 1.146-3.13 2.351-3.875 3.094 0.914 0.811 2.659 2.238 4.781 3.5-0.75-1.316-1.188-2.825-1.188-4.438 0-0.737 0.107-1.452 0.281-2.156zM24.719 12.844c0.173 0.702 0.281 1.421 0.281 2.156 0 1.614-0.438 3.12-1.188 4.438 2.123-1.262 3.836-2.658 4.75-3.469-0.745-0.742-2.072-1.98-3.844-3.125zM16 14c-0.163 0-0.302 0.056-0.438 0.125l1.313 1.313c0.069-0.136 0.125-0.275 0.125-0.438 0-0.551-0.448-1-1-1z"></path>
+</svg>

webapp/assets/_new/icons/svgs/eye.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>eye</title>
+<path d="M16 8c8.336 0 14.75 7.344 14.75 7.344l0.594 0.656-0.594 0.656s-5.849 6.668-13.625 7.281c-0.372 0.047-0.741 0.063-1.125 0.063s-0.753-0.015-1.125-0.063c-7.776-0.614-13.625-7.281-13.625-7.281l-0.594-0.656 0.594-0.656s6.414-7.344 14.75-7.344zM16 10c-2.228 0-4.282 0.618-6.063 1.438h0.031c-0.618 1.044-0.969 2.258-0.969 3.563 0 3.614 2.711 6.583 6.219 6.969 0.259 0.016 0.517 0.031 0.781 0.031 0.243 0 0.48-0.018 0.719-0.031 0.021-0.002 0.042 0.002 0.063 0 3.508-0.386 6.219-3.355 6.219-6.969 0-1.325-0.365-2.54-1-3.594-1.765-0.805-3.798-1.406-6-1.406zM16 12c1.657 0 3 1.343 3 3s-1.343 3-3 3-3-1.343-3-3 1.343-3 3-3zM7.25 12.938c-1.897 1.266-3.238 2.571-3.719 3.063 0.573 0.586 2.324 2.326 4.844 3.781-0.873-1.386-1.375-3.027-1.375-4.781 0-0.714 0.092-1.392 0.25-2.063zM24.75 12.938c0.157 0.665 0.25 1.348 0.25 2.063 0 1.754-0.502 3.395-1.375 4.781 2.52-1.455 4.27-3.195 4.844-3.781-0.481-0.492-1.822-1.797-3.719-3.063z"></path>
+</svg>

webapp/assets/_new/icons/svgs/file.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>file</title>
+<path d="M5 3h13.406l0.313 0.281 6 6 0.281 0.313v19.406h-20v-26zM7 5v22h16v-16h-6v-6h-10zM19 6.438v2.563h2.563z"></path>
+</svg>

webapp/assets/_new/icons/svgs/filter.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>filter</title>
+<path d="M5 4h22v2.344l-0.219 0.281-7.781 9.719v7.156l-0.406 0.313-4 3-1.594 1.188v-11.656l-7.781-9.719-0.219-0.281v-2.344zM7.281 6l7.188 9h3.063l7.188-9h-17.438zM15 17v7l2-1.5v-5.5h-2z"></path>
+</svg>

webapp/assets/_new/icons/svgs/flag.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>flag</title>
+<path d="M5 5h12v14h-10v10h-2v-24zM18 8h9v14h-9v-14z"></path>
+</svg>

webapp/assets/_new/icons/svgs/flash.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>flash</title>
+<path d="M18.875 4l1.438 1.375-6.031 6.406 8.344 5.031-9.188 9.188h4.563v2h-8v-8h2v4.563l7.375-7.375-7.188-4.344-1.063-0.625 0.844-0.906z"></path>
+</svg>

webapp/assets/_new/icons/svgs/globe.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>globe</title>
+<path d="M16 4c6.616 0 12 5.384 12 12s-5.384 12-12 12-12-5.384-12-12 5.384-12 12-12zM16 6c-0.273 0-0.545 0.041-0.813 0.063l2.219 0.156 0.531 2.313-3 0.563-0.813-1.125-1.719 0.375 0.594 2.656-4 1.906-2.688 2.125 0.969 1.969h3.719l4.031 3.031-1.063 4 1.094 1.906c0.307 0.028 0.623 0.063 0.938 0.063 1.542 0 3.010-0.349 4.313-0.969l1.594-5s-0.737-1.813-0.844-1.813-2.094 0.344-2.094 0.344l-1.938-1.594 0.969-3 1.719-1.281 1.75-0.25 1.625 1 0.688-1.25-2.688-0.875-2.156 0.688-0.156-2.063 0.875-0.75 1.063 0.469-0.188-2 0.813-0.094c-1.545-0.977-3.375-1.563-5.344-1.563zM14.875 6.063c-0.807 0.089-1.576 0.263-2.313 0.531l0.75 0.125zM6.063 16.781c0.315 4.108 3.068 7.526 6.844 8.75l-2.844-3.5h-1.156l-1.875-2.063v-2.063z"></path>
+</svg>

webapp/assets/_new/icons/svgs/graduation-cap.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>graduation-cap</title>
+<path d="M16 6.781l0.313 0.094 15.344 5.125-2.844 0.938-2.813 0.938v5.125c0 0.82-0.499 1.5-1.094 1.969s-1.332 0.798-2.219 1.094c-1.773 0.591-4.112 0.938-6.688 0.938s-4.914-0.346-6.688-0.938c-0.887-0.296-1.624-0.625-2.219-1.094s-1.094-1.149-1.094-1.969v-5.125l-2-0.656v8.063c0.597 0.346 1 0.979 1 1.719 0 1.105-0.895 2-2 2s-2-0.895-2-2c0-0.74 0.403-1.373 1-1.719v-8.75l-1.656-0.531 2.844-0.938 12.5-4.188zM16 8.875l-9.375 3.125 9.375 3.125 9.375-3.125zM8 14.563v4.438c0 0.009-0.004 0.126 0.313 0.375s0.883 0.565 1.625 0.813c1.484 0.495 3.667 0.813 6.063 0.813s4.579-0.318 6.063-0.813c0.742-0.247 1.309-0.563 1.625-0.813s0.313-0.366 0.313-0.375v-4.438l-7.688 2.563-0.313 0.094-0.313-0.094z"></path>
+</svg>

webapp/assets/_new/icons/svgs/heart-o.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>heart-o</title>
+<path d="M9.5 5c3.433 0 5.645 2.066 6.5 2.938 0.855-0.871 3.067-2.938 6.5-2.938 4.138 0 7.5 3.404 7.5 7.5 0 2.857-2.469 5.031-2.469 5.031l-11.531 11.563-0.719-0.719-10.813-10.844s-0.619-0.573-1.219-1.469-1.25-2.134-1.25-3.563c0-4.096 3.362-7.5 7.5-7.5zM9.5 7c-3.042 0-5.5 2.496-5.5 5.5 0 0.772 0.423 1.716 0.906 2.438s0.969 1.188 0.969 1.188l10.125 10.125 10.125-10.125s1.875-2.080 1.875-3.625c0-3.004-2.458-5.5-5.5-5.5-2.986 0-5.75 2.906-5.75 2.906l-0.75 0.844-0.75-0.844s-2.764-2.906-5.75-2.906z"></path>
+</svg>

webapp/assets/_new/icons/svgs/image.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>image</title>
+<path d="M2 5h28v22h-28v-22zM4 7v12.875l7-7 0.719 0.719 5.75 5.813 4.531-4.531 0.719 0.719 5.281 5.313v-13.906h-24zM24 9c1.105 0 2 0.895 2 2s-0.895 2-2 2-2-0.895-2-2 0.895-2 2-2zM11 15.719l-7 7v2.281h16.188zM22 17.719l-3.125 3.094 4.156 4.188h4.969v-1.281z"></path>
+</svg>

webapp/assets/_new/icons/svgs/italic.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>italic</title>
+<path d="M11.75 5h10.031l-0.094 1.063-0.188 3-0.063 0.938h-2l-0.875 12h2l-0.063 1.063-0.188 3-0.063 0.938h-10.031l0.094-1.063 0.188-3 0.063-0.938h2l0.875-12h-2l0.063-1.063 0.188-3zM13.625 7l-0.063 1h2l-0.063 1.063-1 14-0.063 0.938h-2l-0.063 1h6l0.063-1h-2l0.063-1.063 1-14 0.063-0.938h2l0.063-1h-6z"></path>
+</svg>

webapp/assets/_new/icons/svgs/link.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>link</title>
+<path d="M21.75 4c1.671 0 3.225 0.661 4.406 1.844s1.844 2.735 1.844 4.406-0.662 3.255-1.844 4.438l-1.469 1.469c-1.181 1.183-2.766 1.844-4.438 1.844-0.793 0-1.565-0.153-2.281-0.438l1.625-1.625c0.215 0.038 0.432 0.063 0.656 0.063 1.138 0 2.226-0.445 3.031-1.25l1.469-1.469c1.66-1.66 1.66-4.372 0-6.031-0.804-0.805-1.863-1.25-3-1.25s-2.227 0.444-3.031 1.25l-1.469 1.469c-0.997 0.996-1.391 2.393-1.188 3.688l-1.625 1.625c-0.285-0.716-0.438-1.487-0.438-2.281 0-1.671 0.662-3.255 1.844-4.438l1.469-1.469c1.181-1.183 2.766-1.844 4.438-1.844zM19.281 11.281l1.438 1.438-8 8-1.438-1.438zM11.75 14c0.793 0 1.565 0.153 2.281 0.438l-1.625 1.625c-0.215-0.038-0.432-0.063-0.656-0.063-1.138 0-2.226 0.445-3.031 1.25l-1.469 1.469c-1.66 1.66-1.66 4.372 0 6.031 0.804 0.805 1.863 1.25 3 1.25s2.227-0.444 3.031-1.25l1.469-1.469c0.997-0.996 1.391-2.393 1.188-3.688l1.625-1.625c0.285 0.716 0.438 1.487 0.438 2.281 0 1.671-0.662 3.256-1.844 4.438l-1.469 1.469c-1.181 1.183-2.766 1.844-4.438 1.844s-3.225-0.661-4.406-1.844c-1.182-1.182-1.844-2.735-1.844-4.406s0.662-3.256 1.844-4.438l1.469-1.469c1.181-1.183 2.766-1.844 4.438-1.844z"></path>
+</svg>

webapp/assets/_new/icons/svgs/list-ol.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>list-ol</title>
+<path d="M5.969 3h2.031v7h-2v-4.531c-0.444 0.255-0.913 0.531-1.594 0.531v-2c0.494 0 1.25-0.656 1.25-0.656zM11 6h17v2h-17v-2zM6.5 12c1.383 0 2.5 1.117 2.5 2.5 0 0.481-0.248 1.090-0.75 1.5l0.031 0.031-0.125 0.094-0.875 0.875h1.719v2h-5v-1.625l0.313-0.281 2.688-2.594c0-0.217-0.283-0.5-0.5-0.5s-0.5 0.283-0.5 0.5v0.5h-2v-0.5c0-1.383 1.117-2.5 2.5-2.5zM11 15h17v2h-17v-2zM4 21h4v1.469l-0.125 0.25-0.406 0.688c0.853 0.398 1.531 1.089 1.531 2.094 0 1.383-1.117 2.5-2.5 2.5h-2.5v-2h2.5c0.217 0 0.5-0.283 0.5-0.5s-0.283-0.5-0.5-0.5h-1.5v-1.375l0.125-0.219 0.25-0.406h-1.375v-2zM11 24h17v2h-17v-2z"></path>
+</svg>

webapp/assets/_new/icons/svgs/list-ul.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>list-ul</title>
+<path d="M4 5h6v6h-6v-6zM6 7v2h2v-2h-2zM12 7h15v2h-15v-2zM4 13h6v6h-6v-6zM6 15v2h2v-2h-2zM12 15h15v2h-15v-2zM4 21h6v6h-6v-6zM6 23v2h2v-2h-2zM12 23h15v2h-15v-2z"></path>
+</svg>

webapp/assets/_new/icons/svgs/lock.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>lock</title>
+<path d="M15 3c3.845 0 7 3.155 7 7v3h3v16h-20v-16h3v-3c0-3.845 3.155-7 7-7zM15 5c-2.755 0-5 2.245-5 5v3h10v-3c0-2.755-2.245-5-5-5zM7 15v12h16v-12h-16z"></path>
+</svg>

webapp/assets/_new/icons/svgs/map-marker.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>map-marker</title>
+<path d="M16 3c4.959 0 9 4.042 9 9 0 1.406-0.57 3.020-1.344 4.781s-1.77 3.631-2.781 5.375c-2.023 3.488-4.063 6.406-4.063 6.406l-0.813 1.188-0.813-1.188s-2.039-2.918-4.063-6.406c-1.012-1.744-2.007-3.613-2.781-5.375s-1.344-3.375-1.344-4.781c0-4.958 4.041-9 9-9zM16 5c-3.877 0-7 3.123-7 7 0 0.803 0.43 2.316 1.156 3.969s1.73 3.484 2.719 5.188c1.572 2.71 2.546 4.144 3.125 5 0.579-0.856 1.553-2.29 3.125-5 0.988-1.704 1.993-3.535 2.719-5.188s1.156-3.166 1.156-3.969c0-3.877-3.122-7-7-7zM16 10c1.105 0 2 0.895 2 2s-0.895 2-2 2-2-0.895-2-2 0.895-2 2-2z"></path>
+</svg>

webapp/assets/_new/icons/svgs/medkit.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>medkit</title>
+<path d="M14 5h4c1.093 0 2 0.907 2 2v1h6c1.645 0 3 1.355 3 3v15h-26v-15c0-1.645 1.355-3 3-3h6v-1c0-1.093 0.907-2 2-2zM14 7v1h4v-1h-4zM6 10c-0.565 0-1 0.435-1 1v13h22v-13c0-0.565-0.435-1-1-1h-20zM15 13h2v3h3v2h-3v3h-2v-3h-3v-2h3v-3z"></path>
+</svg>

webapp/assets/_new/icons/svgs/minus.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>minus</title>
+<path d="M5 15h22v2h-22v-2z"></path>
+</svg>

webapp/assets/_new/icons/svgs/money.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>money</title>
+<path d="M27.938 4.75l0.75 4.25h-2.031l-0.344-1.938-11.313 1.938h-11.844zM2 10h28v16h-28v-16zM6.938 12c0.033 0.163 0.063 0.327 0.063 0.5 0 1.381-1.119 2.5-2.5 2.5-0.173 0-0.337-0.029-0.5-0.063v6.125c0.163-0.033 0.327-0.063 0.5-0.063 1.381 0 2.5 1.119 2.5 2.5 0 0.173-0.029 0.337-0.063 0.5h18.125c-0.033-0.163-0.063-0.327-0.063-0.5 0-1.381 1.119-2.5 2.5-2.5 0.173 0 0.337 0.029 0.5 0.063v-6.125c-0.163 0.033-0.327 0.063-0.5 0.063-1.381 0-2.5-1.119-2.5-2.5 0-0.173 0.029-0.337 0.063-0.5h-18.125zM16 13c2.75 0 5 2.25 5 5s-2.25 5-5 5-5-2.25-5-5 2.25-5 5-5zM16 15c-1.669 0-3 1.331-3 3s1.331 3 3 3 3-1.331 3-3-1.331-3-3-3z"></path>
+</svg>

webapp/assets/_new/icons/svgs/mouse-pointer.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>mouse-pointer</title>
+<path d="M9 2.594l1.719 1.688 16.125 16.156-7.094 0.875 1.844 3.625 0.438 0.906-0.875 0.438-4 2.063-0.438-0.906-2.031-4.031-4.031 3.375-1.656 1.375v-25.563zM11 7.438v16.406l4.313-3.625 0.594 1.125 2.156 4.313 1.313-0.688-2.063-4-0.656-1.281 1.406-0.188 4.5-0.531z"></path>
+</svg>

webapp/assets/_new/icons/svgs/paint-brush.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>paint-brush</title>
+<path d="M24.813 4.031c0.837 0 1.648 0.335 2.281 0.969 1.267 1.267 1.267 3.327 0 4.594v0.031l-12.688 12.5-0.5 0.469c-0.124 0.793-0.46 1.572-1.063 2.188l-0.031 0.031c-1.318 1.318-3.898 3.188-7.813 3.188h-1.844l1-1.563c0.967-1.474 1.37-2.804 1.688-4s0.479-2.31 1.313-3.219c0.565-0.616 1.282-0.985 2.031-1.125l0.625-0.594 12.688-12.5c0.633-0.633 1.476-0.969 2.313-0.969zM24.813 6c-0.313 0-0.64 0.14-0.906 0.406l-9.063 8.906 1.813 1.813 9.031-8.938c0.533-0.533 0.533-1.248 0-1.781-0.267-0.267-0.562-0.406-0.875-0.406zM13.406 16.719l-1.5 1.469 1.813 1.813 1.5-1.469zM9.969 20.031c-0.506-0.014-0.997 0.153-1.344 0.531-0.267 0.291-0.511 1.152-0.844 2.406-0.216 0.814-0.55 1.794-1.031 2.844 2.249-0.421 3.787-1.537 4.656-2.406 0.827-0.827 0.808-2.069 0.031-2.781-0.417-0.383-0.963-0.579-1.469-0.594z"></path>
+</svg>

webapp/assets/_new/icons/svgs/paragraph.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>paragraph</title>
+<path d="M12 5h12v2h-2v20h-2v-20h-2v20h-2v-10h-4c-3.302 0-6-2.698-6-6s2.698-6 6-6zM12 7c-2.22 0-4 1.78-4 4s1.78 4 4 4h4v-8h-4z"></path>
+</svg>

webapp/assets/_new/icons/svgs/paw.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>paw</title>
+<path d="M12.5 5c1.069 0 2.002 0.608 2.594 1.438s0.906 1.903 0.906 3.063-0.314 2.233-0.906 3.063-1.525 1.438-2.594 1.438-2.002-0.608-2.594-1.438-0.906-1.903-0.906-3.063 0.314-2.233 0.906-3.063 1.525-1.438 2.594-1.438zM16 9.5c0-1.159 0.314-2.233 0.906-3.063s1.525-1.438 2.594-1.438 2.002 0.608 2.594 1.438 0.906 1.903 0.906 3.063-0.314 2.233-0.906 3.063-1.525 1.438-2.594 1.438-2.002-0.608-2.594-1.438-0.906-1.903-0.906-3.063zM12.5 7c-0.312 0-0.656 0.156-0.969 0.594s-0.531 1.133-0.531 1.906 0.219 1.469 0.531 1.906 0.657 0.594 0.969 0.594 0.656-0.156 0.969-0.594 0.531-1.133 0.531-1.906-0.219-1.469-0.531-1.906-0.657-0.594-0.969-0.594zM19.5 7c-0.312 0-0.656 0.156-0.969 0.594s-0.531 1.133-0.531 1.906 0.219 1.469 0.531 1.906 0.657 0.594 0.969 0.594 0.656-0.156 0.969-0.594 0.531-1.133 0.531-1.906-0.219-1.469-0.531-1.906-0.657-0.594-0.969-0.594zM7.5 12c1.069 0 2.002 0.608 2.594 1.438s0.906 1.903 0.906 3.063-0.314 2.233-0.906 3.063-1.525 1.438-2.594 1.438-2.002-0.608-2.594-1.438-0.906-1.903-0.906-3.063 0.314-2.233 0.906-3.063 1.525-1.438 2.594-1.438zM24.5 12c1.069 0 2.002 0.608 2.594 1.438s0.906 1.903 0.906 3.063-0.314 2.233-0.906 3.063-1.525 1.438-2.594 1.438-2.002-0.608-2.594-1.438-0.906-1.903-0.906-3.063 0.314-2.233 0.906-3.063 1.525-1.438 2.594-1.438zM7.5 14c-0.312 0-0.656 0.156-0.969 0.594s-0.531 1.133-0.531 1.906 0.219 1.469 0.531 1.906 0.657 0.594 0.969 0.594 0.656-0.156 0.969-0.594 0.531-1.133 0.531-1.906-0.219-1.469-0.531-1.906-0.657-0.594-0.969-0.594zM24.5 14c-0.312 0-0.656 0.156-0.969 0.594s-0.531 1.133-0.531 1.906 0.219 1.469 0.531 1.906 0.657 0.594 0.969 0.594 0.656-0.156 0.969-0.594 0.531-1.133 0.531-1.906-0.219-1.469-0.531-1.906-0.657-0.594-0.969-0.594zM16 16c1.339 0 2.29 0.861 2.75 1.625s0.73 1.417 0.969 1.656c0.142 0.142 1.126 0.562 2.125 1.094 0.5 0.266 1.012 0.582 1.438 1.094s0.719 1.238 0.719 2.031c0 1.921-1.579 3.5-3.5 3.5-0.867 0-1.77-0.279-2.656-0.531s-1.844-0.469-1.844-0.469-0.957 0.216-1.844 0.469-1.79 0.531-2.656 0.531c-1.921 0-3.5-1.579-3.5-3.5 0-0.813 0.291-1.538 0.719-2.063s0.935-0.869 1.438-1.125c1.006-0.513 1.97-0.877 2.125-1.031 0.264-0.264 0.544-0.897 1-1.656s1.385-1.625 2.719-1.625zM16 18c-0.667 0-0.737 0.135-1.031 0.625s-0.514 1.358-1.25 2.094c-0.845 0.845-1.881 0.995-2.625 1.375-0.372 0.19-0.677 0.39-0.844 0.594s-0.25 0.41-0.25 0.813c0 0.841 0.659 1.5 1.5 1.5 0.29 0 1.224-0.221 2.094-0.469s1.59-0.531 2.406-0.531c0.817 0 1.536 0.284 2.406 0.531s1.803 0.469 2.094 0.469c0.841 0 1.5-0.659 1.5-1.5 0-0.353-0.077-0.542-0.25-0.75s-0.464-0.423-0.844-0.625c-0.759-0.404-1.801-0.583-2.625-1.406-0.727-0.727-0.952-1.568-1.25-2.063s-0.37-0.656-1.031-0.656z"></path>
+</svg>

webapp/assets/_new/icons/svgs/plus.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>plus</title>
+<path d="M15 5h2v10h10v2h-10v10h-2v-10h-10v-2h10v-10z"></path>
+</svg>

webapp/assets/_new/icons/svgs/question-circle.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>question-circle</title>
+<path d="M16 4c6.616 0 12 5.384 12 12s-5.384 12-12 12-12-5.384-12-12 5.384-12 12-12zM16 6c-5.535 0-10 4.465-10 10s4.465 10 10 10 10-4.465 10-10-4.465-10-10-10zM16 10c2.197 0 4 1.803 4 4 0 1.621-1.055 3.082-2.594 3.594l-0.406 0.125v1.281h-2v-1.281c0-0.856 0.56-1.635 1.375-1.906l0.406-0.125c0.727-0.242 1.219-0.92 1.219-1.688 0-1.117-0.883-2-2-2s-2 0.883-2 2h-2c0-2.197 1.803-4 4-4zM15 20h2v2h-2v-2z"></path>
+</svg>

webapp/assets/_new/icons/svgs/quote-right.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>quote-right</title>
+<path d="M4 8h10v10c0 3.302-2.698 6-6 6v-2c2.22 0 4-1.78 4-4h-8v-10zM18 8h10v10c0 3.302-2.698 6-6 6v-2c2.22 0 4-1.78 4-4h-8v-10zM6 10v6h6v-6h-6zM20 10v6h6v-6h-6z"></path>
+</svg>

webapp/assets/_new/icons/svgs/search.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>search</title>
+<path d="M19 3c5.511 0 10 4.489 10 10s-4.489 10-10 10c-2.395 0-4.588-0.839-6.313-2.25l-7.969 7.969-1.438-1.438 7.969-7.969c-1.411-1.724-2.25-3.917-2.25-6.313 0-5.511 4.489-10 10-10zM19 5c-4.43 0-8 3.57-8 8s3.57 8 8 8 8-3.57 8-8-3.57-8-8-8z"></path>
+</svg>

webapp/assets/_new/icons/svgs/shield.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>shield</title>
+<path d="M16 4c2.25 0 3.764 0.886 5.125 1.625s2.606 1.375 4.875 1.375h1v1c0 7.745-2.608 12.78-5.25 15.813s-5.375 4.125-5.375 4.125l-0.375 0.125-0.375-0.125s-2.734-1.118-5.375-4.156-5.25-8.063-5.25-15.781v-1h1c2.282 0 3.517-0.637 4.875-1.375s2.875-1.625 5.125-1.625zM16 6c-1.75 0-2.755 0.613-4.156 1.375-1.183 0.643-2.748 1.262-4.781 1.469 0.192 6.736 2.429 11.027 4.688 13.625 2.046 2.354 3.763 3.156 4.25 3.375 0.486-0.217 2.205-0.997 4.25-3.344 2.258-2.591 4.497-6.892 4.688-13.656-2.027-0.206-3.597-0.826-4.781-1.469-1.403-0.761-2.406-1.375-4.156-1.375z"></path>
+</svg>

webapp/assets/_new/icons/svgs/shopping-cart.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>shopping-cart</title>
+<path d="M4.75 7h2.219c0.918 0 1.716 0.61 1.938 1.5l2.625 10.5h11.469l1.906-7h-13.656l-0.5-2h16.75l-2.594 9.531c-0.238 0.87-1.004 1.469-1.906 1.469h-11.469c-0.917 0-1.714-0.61-1.938-1.5l-2.625-10.5h-2.219c-0.552 0-1-0.448-1-1s0.448-1 1-1zM21.75 21c1.645 0 3 1.355 3 3s-1.355 3-3 3-3-1.355-3-3 1.355-3 3-3zM12.75 21c1.645 0 3 1.355 3 3s-1.355 3-3 3-3-1.355-3-3 1.355-3 3-3zM12.75 23c-0.564 0-1 0.436-1 1s0.436 1 1 1 1-0.436 1-1-0.436-1-1-1zM21.75 23c-0.564 0-1 0.436-1 1s0.436 1 1 1 1-0.436 1-1-0.436-1-1-1z"></path>
+</svg>

webapp/assets/_new/icons/svgs/sign-in.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>sign-in</title>
+<path d="M6 4h20v9h-2v-7h-16v20h16v-7h2v9h-20v-24zM17.5 11l1.406 1.406-2.594 2.594h11.688v2h-11.688l2.594 2.594-1.406 1.406-4.313-4.281-0.688-0.719 0.688-0.719z"></path>
+</svg>

webapp/assets/_new/icons/svgs/sign-out.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>sign-out</title>
+<path d="M6 4h20v8l-2-2v-4h-16v20h16v-4l2-2v8h-20v-24zM22.406 11l4.313 4.281 0.688 0.719-0.688 0.719-4.313 4.281-1.406-1.406 2.563-2.594h-9.656v-2h9.656l-2.563-2.594z"></path>
+</svg>

webapp/assets/_new/icons/svgs/smile.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>smile-o</title>
+<path d="M16 4c6.616 0 12 5.384 12 12s-5.384 12-12 12-12-5.384-12-12 5.384-12 12-12zM16 6c-5.535 0-10 4.465-10 10s4.465 10 10 10 10-4.465 10-10-4.465-10-10-10zM11.5 12c0.828 0 1.5 0.672 1.5 1.5s-0.672 1.5-1.5 1.5-1.5-0.672-1.5-1.5 0.672-1.5 1.5-1.5zM20.5 12c0.828 0 1.5 0.672 1.5 1.5s-0.672 1.5-1.5 1.5-1.5-0.672-1.5-1.5 0.672-1.5 1.5-1.5zM10.813 19c1.039 1.793 2.962 3 5.188 3s4.149-1.207 5.188-3l1.719 1c-1.383 2.387-3.954 4-6.906 4s-5.523-1.613-6.906-4z"></path>
+</svg>

webapp/assets/_new/icons/svgs/sort-amount-asc.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>sort-amount-asc</title>
+<path d="M4 5h2v2h-2v-2zM21 5h2v18.688l2.594-2.594 1.406 1.406-4.281 4.313-0.719 0.688-0.719-0.688-4.281-4.313 1.406-1.406 2.594 2.594v-18.688zM4 9h4v2h-4v-2zM4 13h6v2h-6v-2zM4 17h8v2h-8v-2zM4 21h10v2h-10v-2zM4 25h12v2h-12v-2z"></path>
+</svg>

webapp/assets/_new/icons/svgs/sort-amount-desc.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>sort-amount-desc</title>
+<path d="M4 5h12v2h-12v-2zM21 5h2v18.688l2.594-2.594 1.406 1.406-4.281 4.313-0.719 0.688-0.719-0.688-4.281-4.313 1.406-1.406 2.594 2.594v-18.688zM4 9h10v2h-10v-2zM4 13h8v2h-8v-2zM4 17h6v2h-6v-2zM4 21h4v2h-4v-2zM4 25h2v2h-2v-2z"></path>
+</svg>

webapp/assets/_new/icons/svgs/trash.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>trash</title>
+<path d="M14.25 4h4c0.522 0 1.061 0.186 1.438 0.563s0.563 0.915 0.563 1.438v1h6v2h-1v16c0 1.645-1.355 3-3 3h-12c-1.645 0-3-1.355-3-3v-16h-1v-2h6v-1c0-0.522 0.185-1.061 0.563-1.438s0.915-0.563 1.438-0.563zM14.25 6v1h4v-1h-4zM9.25 9v16c0 0.555 0.445 1 1 1h12c0.555 0 1-0.445 1-1v-16h-14zM11.25 12h2v11h-2v-11zM15.25 12h2v11h-2v-11zM19.25 12h2v11h-2v-11z"></path>
+</svg>

webapp/assets/_new/icons/svgs/tree.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>tree</title>
+<path d="M16 3.594l0.719 0.688 5.938 5.969 1 0.969-1.281 0.625s-1.015 0.366-2.438 0.688l4.406 4.406 1 0.969-1.25 0.625s-1.079 0.304-1.625 0.5l3.594 3.594 0.969 1-1.219 0.625s-2.462 1.176-6.813 1.594v3.156h-2v-3.031c-0.335 0.011-0.648 0.031-1 0.031s-0.666-0.021-1-0.031v3.031h-2v-3.156c-4.343-0.417-6.781-1.594-6.781-1.594l-1.25-0.625 0.969-1 3.594-3.594c-0.546-0.196-1.625-0.5-1.625-0.5l-1.25-0.625 1-0.969 4.406-4.406c-1.422-0.322-2.438-0.688-2.438-0.688l-1.281-0.625 1-0.969 5.938-5.969zM16 6.438l-4 3.969c0.593 0.199 0.714 0.356 2.188 0.5l1.813 0.188 1.813-0.188c1.474-0.144 1.594-0.301 2.188-0.5zM16 11.438l-1.188 1.156-4.594 4.594c0.465 0.163 0.453 0.219 1.406 0.406l1.844 0.375-1.344 1.313-3.625 3.656c1.287 0.457 3.459 1.063 7.5 1.063 4.077 0 6.258-0.607 7.531-1.063l-3.656-3.656-1.344-1.313 1.844-0.375c0.953-0.188 0.941-0.243 1.406-0.406l-4.594-4.594z"></path>
+</svg>

webapp/assets/_new/icons/svgs/university.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>university</title>
+<path d="M16 3.906l12.375 5.156 0.625 0.281v2.656h-2v11h2v5h-26v-5h2v-11h-2v-2.656l0.625-0.281 12-5zM16 6.094l-9.375 3.906h18.75zM7 12v11h2v-11h-2zM11 12v11h2v-11h-2zM15 12v11h2v-11h-2zM19 12v11h2v-11h-2zM23 12v11h2v-11h-2zM5 25v1h22v-1h-22z"></path>
+</svg>

webapp/assets/_new/icons/svgs/unlink.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>unlink</title>
+<path d="M21.75 4c1.603 0 3.189 0.626 4.406 1.844 2.435 2.435 2.435 6.409 0 8.844l-1.469 1.469c-1.015 1.016-2.304 1.618-3.625 1.781l-0.25-2c0.901-0.111 1.745-0.494 2.438-1.188h0.031l1.469-1.469c1.671-1.671 1.671-4.36 0-6.031s-4.36-1.671-6.031 0l-1.469 1.469c-0.692 0.692-1.076 1.564-1.188 2.469l-2-0.25c0.162-1.319 0.765-2.609 1.781-3.625l1.469-1.469c1.218-1.218 2.834-1.844 4.438-1.844zM7.719 6.281l4 4-1.438 1.438-4-4zM10.938 14.063l0.25 2c-0.901 0.111-1.745 0.494-2.438 1.188h-0.031l-1.469 1.469c-1.671 1.671-1.671 4.36 0 6.031s4.36 1.671 6.031 0l1.469-1.469c0.692-0.692 1.076-1.564 1.188-2.469l2 0.25c-0.162 1.319-0.765 2.609-1.781 3.625l-1.469 1.469c-2.435 2.435-6.409 2.435-8.844 0s-2.435-6.409 0-8.844l1.469-1.469c1.015-1.016 2.304-1.618 3.625-1.781zM21.719 20.281l4 4-1.438 1.438-4-4z"></path>
+</svg>

webapp/assets/_new/icons/svgs/user-plus.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>user-plus</title>
+<path d="M12 2c3.854 0 7 3.146 7 7 0 2.409-1.231 4.552-3.094 5.813 0.486 0.208 0.964 0.441 1.406 0.719 1.318-0.957 2.94-1.531 4.688-1.531 4.406 0 8 3.594 8 8s-3.594 8-8 8-8-3.594-8-8c0-1.897 0.671-3.657 1.781-5.031-1.127-0.611-2.405-0.969-3.781-0.969-4.431 0-8 3.569-8 8h-2c0-4.119 2.527-7.658 6.094-9.188-1.863-1.26-3.094-3.404-3.094-5.813 0-3.854 3.146-7 7-7zM12 4c-2.773 0-5 2.227-5 5s2.227 5 5 5 5-2.227 5-5-2.227-5-5-5zM22 16c-3.326 0-6 2.674-6 6s2.674 6 6 6 6-2.674 6-6-2.674-6-6-6zM21 18h2v3h3v2h-3v3h-2v-3h-3v-2h3v-3z"></path>
+</svg>

webapp/assets/_new/icons/svgs/user-times.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>user-times</title>
+<path d="M12 2c3.854 0 7 3.146 7 7 0 2.409-1.231 4.552-3.094 5.813 0.486 0.208 0.964 0.441 1.406 0.719 1.318-0.957 2.94-1.531 4.688-1.531 4.406 0 8 3.594 8 8s-3.594 8-8 8-8-3.594-8-8c0-1.897 0.671-3.657 1.781-5.031-1.127-0.611-2.405-0.969-3.781-0.969-4.431 0-8 3.569-8 8h-2c0-4.119 2.527-7.658 6.094-9.188-1.863-1.26-3.094-3.404-3.094-5.813 0-3.854 3.146-7 7-7zM12 4c-2.773 0-5 2.227-5 5s2.227 5 5 5 5-2.227 5-5-2.227-5-5-5zM22 16c-3.326 0-6 2.674-6 6s2.674 6 6 6 6-2.674 6-6-2.674-6-6-6zM19.719 18.281l2.281 2.281 2.281-2.281 1.438 1.438-2.281 2.281 2.281 2.281-1.438 1.438-2.281-2.281-2.281 2.281-1.438-1.438 2.281-2.281-2.281-2.281z"></path>
+</svg>

webapp/assets/_new/icons/svgs/user.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<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="M15 5c3.854 0 7 3.146 7 7 0 2.409-1.231 4.552-3.094 5.813 3.567 1.53 6.094 5.069 6.094 9.188h-2c0-4.431-3.569-8-8-8s-8 3.569-8 8h-2c0-4.119 2.527-7.658 6.094-9.188-1.863-1.26-3.094-3.404-3.094-5.813 0-3.854 3.146-7 7-7zM15 7c-2.773 0-5 2.227-5 5s2.227 5 5 5 5-2.227 5-5-2.227-5-5-5z"></path>
+</svg>

webapp/assets/_new/icons/svgs/users.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>users</title>
+<path d="M8 7c3.302 0 6 2.698 6 6 0 1.984-0.975 3.75-2.469 4.844 1.459 0.725 2.68 1.862 3.469 3.281 0.789-1.42 2.010-2.557 3.469-3.281-1.494-1.094-2.469-2.86-2.469-4.844 0-3.302 2.698-6 6-6s6 2.698 6 6c0 1.984-0.975 3.75-2.469 4.844 2.638 1.31 4.469 4.020 4.469 7.156h-2c0-3.326-2.674-6-6-6s-6 2.674-6 6h-2c0-3.326-2.674-6-6-6s-6 2.674-6 6h-2c0-3.136 1.831-5.846 4.469-7.156-1.494-1.094-2.469-2.86-2.469-4.844 0-3.302 2.698-6 6-6zM8 9c-2.221 0-4 1.779-4 4s1.779 4 4 4 4-1.779 4-4-1.779-4-4-4zM22 9c-2.221 0-4 1.779-4 4s1.779 4 4 4 4-1.779 4-4-1.779-4-4-4z"></path>
+</svg>

webapp/assets/_new/icons/svgs/warning.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>warning</title>
+<path d="M16 3.219l0.875 1.5 12 20.781 0.844 1.5h-27.438l0.844-1.5 12-20.781zM16 7.219l-10.25 17.781h20.5zM15 14h2v6h-2v-6zM15 21h2v2h-2v-2z"></path>
+</svg>

webapp/assets/styles/main.scss

@@ -160,7 +160,7 @@ hr {
     align-content: center;
     align-items: center;
 
-    .ds-icon {
+    .base-icon {
       padding-right: $space-xx-small;
     }
   }

webapp/components/Avatar/Avatar.spec.js

@@ -1,11 +1,7 @@
-import { mount, createLocalVue } from '@vue/test-utils'
-import Styleguide from '@human-connection/styleguide'
+import { mount } from '@vue/test-utils'
 import Avatar from './Avatar.vue'
-import Filters from '~/plugins/vue-filters'
 
-const localVue = createLocalVue()
-localVue.use(Styleguide)
-localVue.use(Filters)
+const localVue = global.localVue
 
 describe('Avatar.vue', () => {
   let propsData = {}
@@ -22,6 +18,7 @@ describe('Avatar.vue', () => {
     ).toBe(false)
   })
 
+  // this is testing the style guide
   it('renders an icon', () => {
     expect(
       Wrapper()

webapp/components/AvatarMenu/AvatarMenu.spec.js

@@ -1,15 +1,8 @@
-import { config, mount, createLocalVue } from '@vue/test-utils'
+import { config, mount } from '@vue/test-utils'
 import Vuex from 'vuex'
-import VTooltip from 'v-tooltip'
-import Styleguide from '@human-connection/styleguide'
 import AvatarMenu from './AvatarMenu.vue'
-import Filters from '~/plugins/vue-filters'
 
-const localVue = createLocalVue()
-localVue.use(Styleguide)
-localVue.use(Vuex)
-localVue.use(Filters)
-localVue.use(VTooltip)
+const localVue = global.localVue
 
 config.stubs['nuxt-link'] = '<span><slot /></span>'
 config.stubs['router-link'] = '<span><slot /></span>'

webapp/components/AvatarMenu/AvatarMenu.vue

@@ -12,7 +12,7 @@
         @click.prevent="toggleMenu"
       >
         <hc-avatar :user="user" />
-        <ds-icon size="xx-small" name="angle-down" />
+        <base-icon class="dropdown-arrow" name="angle-down" />
       </a>
     </template>
     <template #popover="{ closeMenu }">
@@ -33,13 +33,13 @@
             :parents="item.parents"
             @click.native="closeMenu(false)"
           >
-            <ds-icon :name="item.route.icon" />
+            <base-icon :name="item.route.icon" />
             {{ item.route.name }}
           </ds-menu-item>
         </ds-menu>
         <hr />
         <nuxt-link class="logout-link" :to="{ name: 'logout' }">
-          <ds-icon name="sign-out" />
+          <base-icon name="sign-out" />
           {{ $t('login.logout') }}
         </nuxt-link>
       </div>

webapp/components/CategoriesSelect/CategoriesSelect.spec.js

@@ -1,9 +1,7 @@
-import { mount, createLocalVue } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import CategoriesSelect from './CategoriesSelect'
-import Styleguide from '@human-connection/styleguide'
 
-const localVue = createLocalVue()
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 describe('CategoriesSelect.vue', () => {
   let wrapper

webapp/components/CategoriesSelect/CategoriesSelect.vue

@@ -10,7 +10,7 @@
             :primary="isActive(category.id)"
             :disabled="isDisabled(category.id)"
           >
-            <ds-icon :name="category.icon" />
+            <base-icon :name="category.icon" />
             {{ $t(`contribution.category.name.${category.slug}`) }}
           </ds-button>
         </ds-flex-item>

webapp/components/Category/index.spec.js

@@ -1,9 +1,8 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils'
-import Styleguide from '@human-connection/styleguide'
+import { shallowMount } from '@vue/test-utils'
+
 import Category from './index'
 
-const localVue = createLocalVue()
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 describe('Category', () => {
   let icon
@@ -21,7 +20,7 @@ describe('Category', () => {
 
   describe('given Strings for Icon and Name', () => {
     beforeEach(() => {
-      icon = 'mouse-cursor'
+      icon = 'mouse-pointer'
       name = 'Peter'
     })
 

webapp/components/Category/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <ds-tag>
-    <ds-icon size="large" :name="icon" />
+  <ds-tag class="category-tag">
+    <base-icon :name="icon" />
     {{ name }}
   </ds-tag>
 </template>
@@ -14,3 +14,15 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.category-tag {
+  display: inline-flex;
+  align-items: center;
+
+  > .base-icon {
+    margin-right: $space-xx-small;
+    font-size: $font-size-base;
+  }
+}
+</style>

webapp/components/Comment/Comment.spec.js

@@ -1,12 +1,8 @@
-import { config, shallowMount, createLocalVue } from '@vue/test-utils'
+import { config, shallowMount } from '@vue/test-utils'
 import Comment from './Comment.vue'
 import Vuex from 'vuex'
-import Styleguide from '@human-connection/styleguide'
 
-const localVue = createLocalVue()
-
-localVue.use(Vuex)
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 config.stubs['client-only'] = '<span><slot /></span>'
 

webapp/components/Comment/Comment.vue

@@ -3,7 +3,7 @@
     <ds-card>
       <ds-space margin-bottom="base" />
       <ds-text style="padding-left: 40px; font-weight: bold;" color="soft">
-        <ds-icon name="ban" />
+        <base-icon name="ban" />
         {{ this.$t('comment.content.unavailable-placeholder') }}
       </ds-text>
       <ds-space margin-bottom="base" />

webapp/components/CommentForm/CommentForm.spec.js

@@ -1,12 +1,11 @@
-import { mount, createLocalVue } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import CommentForm from './CommentForm'
-import Styleguide from '@human-connection/styleguide'
+
 import MutationObserver from 'mutation-observer'
 
 global.MutationObserver = MutationObserver
 
-const localVue = createLocalVue()
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 describe('CommentForm.vue', () => {
   let mocks

webapp/components/CommentList/CommentList.spec.js

@@ -1,14 +1,9 @@
-import { config, mount, createLocalVue } from '@vue/test-utils'
+import { config, mount } from '@vue/test-utils'
 import CommentList from './CommentList'
 import Vuex from 'vuex'
-import Styleguide from '@human-connection/styleguide'
-import Filters from '~/plugins/vue-filters'
 
-const localVue = createLocalVue()
+const localVue = global.localVue
 
-localVue.use(Styleguide)
-localVue.use(Vuex)
-localVue.use(Filters)
 localVue.filter('truncate', string => string)
 
 config.stubs['v-popover'] = '<span><slot /></span>'

webapp/components/CommentList/CommentList.vue

@@ -2,7 +2,7 @@
   <div id="comments">
     <h3 style="margin-top: -10px;">
       <span>
-        <ds-icon name="comments" />
+        <base-icon name="comments" />
         <ds-tag
           v-if="post.comments.length"
           style="margin-top: -4px; margin-left: -12px; position: absolute;"

webapp/components/ContentMenu.vue

@@ -3,7 +3,7 @@
     <template slot="default" slot-scope="{ toggleMenu }">
       <slot name="button" :toggleMenu="toggleMenu">
         <ds-button class="content-menu-trigger" size="small" ghost @click.prevent="toggleMenu">
-          <ds-icon name="ellipsis-v" />
+          <base-icon name="ellipsis-v" />
         </ds-button>
       </slot>
     </template>
@@ -16,7 +16,7 @@
           :parents="item.parents"
           @click.stop.prevent="openItem(item.route, toggleMenu)"
         >
-          <ds-icon :name="item.route.icon" />
+          <base-icon :name="item.route.icon" />
           {{ item.route.name }}
         </ds-menu-item>
       </ds-menu>

webapp/components/ContributionForm/ContributionForm.spec.js

@@ -1,20 +1,16 @@
-import { config, mount, createLocalVue } from '@vue/test-utils'
+import { config, mount } from '@vue/test-utils'
 import ContributionForm from './ContributionForm.vue'
-import Styleguide from '@human-connection/styleguide'
+
 import Vuex from 'vuex'
 import PostMutations from '~/graphql/PostMutations.js'
 import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
-import Filters from '~/plugins/vue-filters'
+
 import TeaserImage from '~/components/TeaserImage/TeaserImage'
 import MutationObserver from 'mutation-observer'
 
 global.MutationObserver = MutationObserver
 
-const localVue = createLocalVue()
-
-localVue.use(Vuex)
-localVue.use(Styleguide)
-localVue.use(Filters)
+const localVue = global.localVue
 
 config.stubs['client-only'] = '<span><slot /></span>'
 config.stubs['nuxt-link'] = '<span><slot /></span>'

webapp/components/DeleteData/DeleteData.spec.js

@@ -1,12 +1,9 @@
-import { mount, createLocalVue } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import DeleteData from './DeleteData.vue'
-import Styleguide from '@human-connection/styleguide'
+
 import Vuex from 'vuex'
 
-const localVue = createLocalVue()
-
-localVue.use(Vuex)
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 describe('DeleteData.vue', () => {
   let mocks

webapp/components/DeleteData/DeleteData.vue

@@ -5,7 +5,7 @@
       <ds-container>
         <ds-flex>
           <ds-flex-item :width="{ base: '22%', sm: '12%', md: '12%', lg: '8%' }">
-            <ds-icon name="warning" size="xxx-large" class="delete-warning-icon" />
+            <base-icon name="warning" class="delete-warning-icon" />
           </ds-flex-item>
           <ds-flex-item :width="{ base: '78%', sm: '88%', md: '88%', lg: '92%' }">
             <ds-heading>{{ $t('settings.deleteUserAccount.name') }}</ds-heading>
@@ -134,6 +134,7 @@ export default {
 <style lang="scss">
 .delete-warning-icon {
   color: $color-danger;
+  font-size: $font-size-xxx-large;
 }
 
 .checkbox-container {

webapp/components/DonationInfo/DonationInfo.spec.js

@@ -1,9 +1,8 @@
-import { mount, createLocalVue } from '@vue/test-utils'
-import Styleguide from '@human-connection/styleguide'
+import { mount } from '@vue/test-utils'
+
 import DonationInfo from './DonationInfo.vue'
 
-const localVue = createLocalVue()
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 const mockDate = new Date(2019, 11, 6)
 global.Date = jest.fn(() => mockDate)

webapp/components/DropdownFilter/DropdownFilter.spec.js

@@ -1,11 +1,8 @@
-import { mount, createLocalVue } from '@vue/test-utils'
-import VTooltip from 'v-tooltip'
-import Styleguide from '@human-connection/styleguide'
+import { mount } from '@vue/test-utils'
+
 import DropdownFilter from './DropdownFilter.vue'
 
-const localVue = createLocalVue()
-localVue.use(Styleguide)
-localVue.use(VTooltip)
+const localVue = global.localVue
 
 describe('DropdownFilter.vue', () => {
   let propsData, wrapper, mocks

webapp/components/DropdownFilter/DropdownFilter.vue

@@ -9,9 +9,9 @@
       href="#"
       @click.prevent="toggleMenu()"
     >
-      <ds-icon style="margin-right: 2px;" name="filter" />
-      <label for="dropdown">{{ selected }}</label>
-      <ds-icon style="margin-left: 2px" size="xx-small" name="angle-down" />
+      <base-icon name="filter" />
+      <label class="label" for="dropdown">{{ selected }}</label>
+      <base-icon class="dropdown-arrow" name="angle-down" />
     </a>
     <ds-menu
       slot="popover"
@@ -59,7 +59,16 @@ export default {
   height: 100%;
   padding: $space-xx-small;
   color: $text-color-soft;
+
+  > .label {
+    margin: 0 $space-xx-small;
+  }
 }
+
+.dropdown-arrow {
+  font-size: $font-size-xx-small;
+}
+
 .dropdown-menu {
   user-select: none;
   display: flex;

webapp/components/Editor/Editor.spec.js

@@ -1,13 +1,12 @@
-import { mount, createLocalVue } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Editor from './Editor'
-import Styleguide from '@human-connection/styleguide'
+
 import MutationObserver from 'mutation-observer'
 import Vue from 'vue'
 
 global.MutationObserver = MutationObserver
 
-const localVue = createLocalVue()
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 describe('Editor.vue', () => {
   let wrapper

webapp/components/Editor/nodes/Embed.spec.js

@@ -1,14 +1,9 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils'
-import Vuex from 'vuex'
-import Styleguide from '@human-connection/styleguide'
+import { shallowMount } from '@vue/test-utils'
+
 import Embed from './Embed'
 
 let Wrapper, propsData, component
 const someUrl = 'https://www.youtube.com/watch?v=qkdXAtO40Fo'
-const localVue = createLocalVue()
-
-localVue.use(Vuex)
-localVue.use(Styleguide)
 
 describe('Embed.vue', () => {
   beforeEach(() => {

webapp/components/Embed/EmbedComponent.spec.js

@@ -1,14 +1,11 @@
-import { mount, createLocalVue } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Vuex from 'vuex'
-import Styleguide from '@human-connection/styleguide'
+
 import EmbedComponent from './EmbedComponent'
 
 let wrapper, propsData, getters, mocks
 const someUrl = 'https://www.youtube.com/watch?v=qkdXAtO40Fo'
-const localVue = createLocalVue()
-
-localVue.use(Vuex)
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 describe('EmbedComponent.vue', () => {
   const Wrapper = () => {

webapp/components/Emotions/Emotions.spec.js

@@ -1,13 +1,10 @@
-import { mount, createLocalVue } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Emotions from './Emotions.vue'
-import Styleguide from '@human-connection/styleguide'
+
 import Vuex from 'vuex'
 import PostMutations from '~/graphql/PostMutations.js'
 
-const localVue = createLocalVue()
-
-localVue.use(Styleguide)
-localVue.use(Vuex)
+const localVue = global.localVue
 
 describe('Emotions.vue', () => {
   let wrapper

webapp/components/Empty/Empty.spec.js

@@ -1,9 +1,8 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils'
-import Styleguide from '@human-connection/styleguide'
+import { shallowMount } from '@vue/test-utils'
+
 import Empty from './Empty.vue'
 
-const localVue = createLocalVue()
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 describe('Empty.vue', () => {
   let propsData, wrapper

webapp/components/EnterNonce/EnterNonce.spec.js

@@ -1,10 +1,7 @@
-import { mount, createLocalVue } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import EnterNonce from './EnterNonce.vue'
-import Styleguide from '@human-connection/styleguide'
 
-const localVue = createLocalVue()
-
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 describe('EnterNonce ', () => {
   let wrapper

webapp/components/FilterMenu/FilterMenu.spec.js

@@ -1,12 +1,7 @@
-import { mount, createLocalVue } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import FilterMenu from './FilterMenu.vue'
-import Styleguide from '@human-connection/styleguide'
-import VTooltip from 'v-tooltip'
 
-const localVue = createLocalVue()
-
-localVue.use(Styleguide)
-localVue.use(VTooltip)
+const localVue = global.localVue
 
 describe('FilterMenu.vue', () => {
   let wrapper

webapp/components/FilterPosts/FilterPosts.spec.js

@@ -1,16 +1,11 @@
-import { mount, createLocalVue } from '@vue/test-utils'
-import VTooltip from 'v-tooltip'
-import Styleguide from '@human-connection/styleguide'
+import { mount } from '@vue/test-utils'
+
 import Vuex from 'vuex'
 import FilterPosts from './FilterPosts.vue'
 import locales from '~/locales'
 import orderBy from 'lodash/orderBy'
 
-const localVue = createLocalVue()
-
-localVue.use(Styleguide)
-localVue.use(VTooltip)
-localVue.use(Vuex)
+const localVue = global.localVue
 
 let mutations
 let getters

webapp/components/FilterPosts/FilterPosts.vue

@@ -8,7 +8,7 @@
       slot-scope="{ toggleMenu }"
       @click.prevent="toggleMenu()"
     >
-      <ds-icon size="xx-small" name="angle-down" />
+      <base-icon class="dropdown-arrow" name="angle-down" />
     </ds-button>
     <template slot="popover">
       <ds-container>

webapp/components/Hashtag/Hashtag.spec.js

@@ -1,9 +1,8 @@
-import { config, shallowMount, createLocalVue } from '@vue/test-utils'
-import Styleguide from '@human-connection/styleguide'
+import { config, shallowMount } from '@vue/test-utils'
+
 import Hashtag from './Hashtag'
 
-const localVue = createLocalVue()
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 config.stubs['nuxt-link'] = '<span><slot /></span>'