Merge remote-tracking branch 'upstream/master' into moritzdietz/fix-typos-and-wording

.github/FUNDING.yml

@@ -1 +1,2 @@
-liberapay: kfiven
+patreon: ajbura
+liberapay: ajbura

.gitignore

@@ -1,5 +1,4 @@
 experiment
 package-lock.json
-dist
 node_modules
 devAssets

_redirects

@@ -0,0 +1,3 @@
+# Redirects from what the browser requests to what we serve
+/login       /
+/register    /

dist/assets/add-user.d87fd7bdbcd69110487cade29b6cdab6.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M14,11c2.2,0,4-1.8,4-4c0-2.2-1.8-4-4-4s-4,1.8-4,4C10,9.2,11.8,11,14,11z M14,5c1.1,0,2,0.9,2,2c0,1.1-0.9,2-2,2
+		s-2-0.9-2-2C12,5.9,12.9,5,14,5z"/>
+	<path d="M16,13h-4c-3.3,0-6,2.7-6,6v2h16v-2C22,15.7,19.3,13,16,13z M8,19c0-2.2,1.8-4,4-4h4c2.2,0,4,1.8,4,4H8z"/>
+	<polygon points="8,9 5,9 5,6 3,6 3,9 0,9 0,11 3,11 3,14 5,14 5,11 8,11 	"/>
+</g>
+</svg>

dist/assets/ball.d64e4e7685f6563c60790ede65f2e420.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M19.5,5.4c-0.5-0.5-1-1-1.5-1.4c-1.7-1.3-3.8-2-6-2S7.7,2.8,6,4C5.5,4.4,5,4.9,4.5,5.4C2.9,7.2,2,9.5,2,12
+	c0,2.5,0.9,4.8,2.5,6.6c0.5,0.5,1,1,1.5,1.4c1.7,1.3,3.8,2,6,2s4.3-0.8,6-2c0.5-0.4,1-0.9,1.5-1.4c1.6-1.8,2.5-4.1,2.5-6.6
+	C22,9.5,21.1,7.2,19.5,5.4z M4,12c0-2,0.8-3.9,2-5.3C7.2,8.1,8,10,8,12c0,2-0.8,3.9-2,5.3C4.8,15.9,4,14,4,12z M12,20
+	c-1.7,0-3.2-0.5-4.5-1.4C9.1,16.8,10,14.5,10,12c0-2.5-0.9-4.8-2.5-6.6C8.8,4.5,10.3,4,12,4s3.2,0.5,4.5,1.4C14.9,7.2,14,9.5,14,12
+	c0,2.5,0.9,4.8,2.5,6.6C15.2,19.5,13.7,20,12,20z M18,17.3c-1.2-1.4-2-3.3-2-5.3c0-2,0.8-3.9,2-5.3c1.2,1.4,2,3.3,2,5.3
+	C20,14,19.2,15.9,18,17.3z"/>
+</svg>

dist/assets/browserconfig.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="mstile-70x70.png"/>
+            <square150x150logo src="mstile-150x150.png"/>
+            <wide310x150logo src="mstile-310x150.png"/>
+            <square310x310logo src="mstile-310x310.png"/>
+            <TileColor>#fff</TileColor>
+
+        </tile>
+
+    </msapplication>
+
+</browserconfig>

dist/assets/bulb.ec7fff230a9158e7a61a3526d851ebb0.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M12,2c-0.3,0-0.6,0-0.9,0.1c-3.5,0.4-6.4,3.2-7,6.7c-0.5,3.1,0.8,6,3.1,7.7C7.7,16.8,8,17.4,8,18v4h8v-4
+	c0-0.6,0.3-1.2,0.8-1.6c1.9-1.5,3.2-3.8,3.2-6.4C20,5.6,16.4,2,12,2z M15.6,14.8c-1,0.7-1.6,1.9-1.6,3.2v2h-1.3v-8.1
+	c0.7-0.3,1.3-1,1.3-1.9c0-1.1-0.9-2-2-2s-2,0.9-2,2c0,0.8,0.5,1.6,1.3,1.9V20H10v-2c0-1.2-0.6-2.4-1.6-3.2C6.6,13.4,5.7,11.3,6.1,9
+	c0.4-2.6,2.6-4.7,5.2-5c0.2,0,0.5,0,0.7,0c3.3,0,6,2.7,6,6C18,11.9,17.1,13.7,15.6,14.8z"/>
+</svg>

dist/assets/chevron-bottom.8fba8942b34b3f8d54820d2dfde94cc2.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="4.2,9.2 5.6,7.8 12,14.2 18.4,7.8 19.8,9.2 12,17 	"/>
+</g>
+</svg>

dist/assets/chevron-left.af75452474340d13e5a890bfee1328c2.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="14.8,4.2 16.2,5.6 9.8,12 16.2,18.4 14.8,19.8 7,12 	"/>
+</g>
+</svg>

dist/assets/cinny.1d68e14fd73c8b58ee0f56e0441d13aa.svg

@@ -0,0 +1,19 @@
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In  -->
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18" enable-background="new 0 0 18 18" xml:space="preserve">
+<defs>
+</defs>
+<g>
+	<g>
+		<circle fill="#FFFFFF" cx="9" cy="9" r="8.5"/>
+	</g>
+	<g>
+		<path d="M9,0C4,0,0,4,0,9c0,5,4,9,9,9c5,0,9-4,9-9C18,4,14,0,9,0z M1.2,10.8l3.5-2.3c0-0.1,0-0.2,0-0.3c0-1.8,1.3-3.2,3.1-3.4
+			c0.1,0,0.2,0,0.4,0c1.2,0,2.3,0.6,2.9,1.6c0.3-0.1,0.6-0.1,0.9-0.1c0.4,0,0.8,0,1.2,0.1c0.7,0.2,1.4,0.5,2,0.9
+			C14.6,7.1,14,7,13.3,7c-1.2,0-2.2,0.4-2.9,1.4c-0.7,0.9-1.1,2-1.1,3.2c0,1.5-0.4,2.9-1.3,4.2c-0.3,0.4-0.5,0.7-0.8,1
+			C4.2,16.1,1.9,13.8,1.2,10.8z"/>
+		<circle cx="9.5" cy="6.4" r="0.5"/>
+	</g>
+</g>
+</svg>

dist/assets/circle-plus.d6fd1e875f585a026f8196da8e1a7b64.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8
+		S16.4,20,12,20z"/>
+	<polygon points="13,7 11,7 11,11 7,11 7,13 11,13 11,17 13,17 13,13 17,13 17,11 13,11 	"/>
+</g>
+</svg>

dist/assets/cross.5745f0df2f96e79157985c990c3b6c40.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<polygon points="17.7,16.2 13.4,12 17.7,7.8 16.2,6.3 12,10.6 7.8,6.3 6.3,7.8 10.6,12 6.3,16.2 7.8,17.7 12,13.4 16.2,17.7 "/>
+</svg>

dist/assets/cup.1f535a372aeb6b1d0125212ce50cf733.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M23,12c0-2.4-1.7-4.4-4-4.9V5c0-1.1-0.9-2-2-2H5C3.9,3,3,3.9,3,5v10c0,3.3,2.7,6,6,6h4c2.6,0,4.9-1.7,5.7-4.1
+	C21.1,16.6,23,14.5,23,12z M17,5v2H5V5H17z M13,19H9c-2.2,0-4-1.8-4-4V9h12v6C17,17.2,15.2,19,13,19z M19,14.8V9.2
+	c1.2,0.4,2,1.5,2,2.8S20.2,14.4,19,14.8z"/>
+</svg>

dist/assets/dog.5eb5c0a8666085e3485d44e93df471fb.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<circle cx="10" cy="11" r="1"/>
+	<circle cx="14" cy="11" r="1"/>
+	<path d="M20.3,16.2C20,14.7,19.6,13,19,11.3c0.6-2.1,1.6-6.7,0.4-8.4c-0.3-0.5-0.8-0.7-1.4-0.7c-1.2,0-2.8,1.3-3.7,2.3
+		C13.6,4.2,12.8,4,12,4s-1.6,0.2-2.3,0.6c-1-1-2.5-2.3-3.7-2.3c-0.6,0-1.1,0.2-1.4,0.7C3.4,4.6,4.4,9.2,5,11.3
+		c-0.6,1.7-1,3.4-1.3,4.9C3.2,18.7,5.1,21,7.6,21h8.7C18.9,21,20.8,18.7,20.3,16.2z M5.8,3.8C5.9,3.8,5.9,3.8,6,3.8
+		c0.5,0,1.5,0.8,2.5,1.7C7.5,6.3,6.7,7.6,6,9C5.6,6.8,5.3,4.5,5.8,3.8z M17.9,18.3c-0.4,0.5-1,0.7-1.6,0.7H7.6
+		c-0.6,0-1.2-0.3-1.6-0.7c-0.2-0.3-0.6-0.8-0.4-1.6C7,10,9.4,6,12,6s5,4,6.3,10.6C18.5,17.4,18.1,18,17.9,18.3z M18,9
+		c-0.7-1.4-1.5-2.6-2.5-3.5c0.9-0.9,2-1.7,2.5-1.7c0.1,0,0.1,0,0.2,0.1C18.7,4.5,18.5,6.6,18,9z"/>
+	<path d="M12.6,14h-1.2c-0.8,0-1.4,0.6-1.4,1.4v0c0,0.4,0.1,0.7,0.4,1l0.9,0.9c0.4,0.4,1,0.4,1.4,0l0.9-0.9c0.3-0.3,0.4-0.6,0.4-1v0
+		C14,14.6,13.4,14,12.6,14z"/>
+</g>
+</svg>

dist/assets/download.ab30aec19573b4189334338c801b4180.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<g>
+		<path d="M19,21H5c-1.1,0-2-0.9-2-2v-3h2v3h14v-3h2v3C21,20.1,20.1,21,19,21z"/>
+	</g>
+	<polygon points="15.3,11.3 13,13.6 13,3 11,3 11,13.6 8.7,11.3 7.3,12.7 12,17.4 16.7,12.7 	"/>
+</g>
+</svg>

dist/assets/emoji.c38fa1f5cad58bfdc4819433e8b0db91.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8
+		S16.4,20,12,20z"/>
+	<circle cx="9.5" cy="8.5" r="1.5"/>
+	<circle cx="14.5" cy="8.5" r="1.5"/>
+	<path d="M16,12c0,2.2-1.8,4-4,4s-4-1.8-4-4H6c0,3.3,2.7,6,6,6s6-2.7,6-6H16z"/>
+</g>
+</svg>

dist/assets/external.c37f42201429884adc1da8fc5ee65b88.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="14,3 14,5 17.8,5 12.9,9.9 14.3,11.3 19,6.6 19,10.2 21,10.2 21,3 	"/>
+	<path d="M3,10.2h2V5h5V3H5C3.9,3,3,3.9,3,5V10.2z"/>
+	<path d="M5,14.2H3V19c0,1.1,0.9,2,2,2h5v-2H5V14.2z"/>
+	<path d="M19,19h-5v2h5c1.1,0,2-0.9,2-2v-4.8h-2V19z"/>
+</g>
+</svg>

dist/assets/file.71d04d960aa446d4672fc1f60cd462dc.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M13.8,2H6C4.9,2,4,2.9,4,4v16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8.2L13.8,2z M18,20H6V4h7v3c0,1.1,0.9,2,2,2h3V20z"/>
+</svg>

dist/assets/flag.a3cef985a409ca05e544734d3acda439.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M18.5,5l-2.1,2.8L15.5,9l0.9,1.2l2.1,2.8H9H7v2v4H5V5H18.5 M21,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h2c1.1,0,2-0.9,2-2
+	v-4h12v-2l-3-4l3-4V3L21,3z"/>
+</svg>

dist/assets/hash-lock.5fc3f6871813a605ef0a1b07f0272176.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="16,12 14,12 14,14 10,14 10,10 12,10 12,8 10,8 10,3 8,3 8,8 3,8 3,10 8,10 8,14 3,14 3,16 8,16 8,21 10,21 10,16 
+		14,16 14,21 16,21 16,16 21,16 21,14 16,14 	"/>
+	<path d="M21,4V3c0-1.7-1.3-3-3-3s-3,1.3-3,3v1c-0.6,0-1,0.4-1,1v4c0,0.6,0.4,1,1,1h6c0.6,0,1-0.4,1-1V5C22,4.4,21.6,4,21,4z
+		 M19.5,4h-3V3c0-0.8,0.7-1.5,1.5-1.5s1.5,0.7,1.5,1.5V4z"/>
+</g>
+</svg>

dist/assets/hash-plus.60e5def51051413b7e6ef2fda40475bc.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="16,12 14,12 14,14 10,14 10,10 12,10 12,8 10,8 10,3 8,3 8,8 3,8 3,10 8,10 8,14 3,14 3,16 8,16 8,21 10,21 10,16 
+		14,16 14,21 16,21 16,16 21,16 21,14 16,14 	"/>
+	<g>
+		<path d="M19,0c-2.8,0-5,2.2-5,5s2.2,5,5,5s5-2.2,5-5S21.8,0,19,0z M22,5.8h-2.3V8h-1.5V5.8H16V4.3h2.3V2h1.5v2.3H22V5.8z"/>
+	</g>
+</g>
+</svg>

dist/assets/hash-search.2c279449d5bb4495ea7775e690826fb7.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="16.1,12 14.1,12 14.1,14 10.1,14 10.1,10 12.1,10 12.1,8 10.1,8 10.1,3 8.1,3 8.1,8 3.1,8 3.1,10 8.1,10 8.1,14 
+		3.1,14 3.1,16 8.1,16 8.1,21 10.1,21 10.1,16 14.1,16 14.1,21 16.1,21 16.1,16 21.1,16 21.1,14 16.1,14 	"/>
+	<path d="M24,9l-2.7-2.7c0.5-0.7,0.8-1.5,0.8-2.3c0-2.2-1.8-4-4-4s-4,1.8-4,4s1.8,4,4,4c0.8,0,1.5-0.2,2.2-0.6l2.7,2.7L24,9z
+		 M18.1,6.5c-1.4,0-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5S19.5,6.5,18.1,6.5z"/>
+</g>
+</svg>

dist/assets/hash.3bccb5a751524cfc69b43d8962cea627.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M21,10V8h-5V3h-2v5h-4V3H8v5H3v2h5v4H3v2h5v5h2v-5h4v5h2v-5h5v-2h-5v-4H21z M14,14h-4v-4h4V14z"/>
+</svg>

dist/assets/home.25f584ca53422e4a3e85d3f1cdd7b122.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,3L2,12h3v7c0,1.1,0.9,2,2,2h10c1.1,0,2-0.9,2-2v-7h3L12,3z M17,12v7H7v-7v-1.8l5-4.5l5,4.5V12z"/>
+	<circle cx="12" cy="14" r="2"/>
+</g>
+</svg>

dist/assets/invite-arrow.c4e5f226cbbfab22c6fb8eff6f26d9b5.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M16.3,7.3l-1.4,1.4l2.3,2.3H8.2c-0.8,0-1.6-0.3-2.1-0.9C5.6,9.6,5.2,8.8,5.2,8s0.3-1.6,0.9-2.1l1.2-1.2L5.9,3.3L4.7,4.5
+		c-1.9,1.9-1.9,5.1,0,7.1C5.7,12.5,6.9,13,8.2,13h8.9l-2.3,2.3l1.4,1.4L21,12L16.3,7.3z"/>
+	<polygon points="9,17.3 6.8,17.3 6.8,15 5.3,15 5.3,17.3 3,17.3 3,18.8 5.3,18.8 5.3,21 6.8,21 6.8,18.8 9,18.8 	"/>
+</g>
+</svg>

dist/assets/invite-cancel-arrow.3113613517f3605743e09e1016eec0d8.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M16.3,7.3l-1.4,1.4l2.3,2.3H8.2c-0.8,0-1.6-0.3-2.1-0.9C5.6,9.6,5.2,8.8,5.2,8s0.3-1.6,0.9-2.1l1.2-1.2L5.9,3.3L4.7,4.5
+		c-1.9,1.9-1.9,5.1,0,7.1C5.7,12.5,6.9,13,8.2,13h8.9l-2.3,2.3l1.4,1.4L21,12L16.3,7.3z"/>
+	<polygon points="8.7,19.6 7.1,18 8.7,16.4 7.6,15.4 6,17 4.4,15.4 3.3,16.4 4.9,18 3.3,19.6 4.4,20.7 6,19.1 7.6,20.7 	"/>
+</g>
+</svg>

dist/assets/invite.254774e653e2b009d11d79c0b07ae538.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="19.8,16 18.3,16 18.3,18.3 16,18.3 16,19.8 18.3,19.8 18.3,22 19.8,22 19.8,19.8 22,19.8 22,18.3 19.8,18.3 	"/>
+	<path d="M20,4H4C2.9,4,2,4.9,2,6v12c0,1.1,0.9,2,2,2h10v-2H4V9.9l8,5.3l8-5.3V14h2V6C22,4.9,21.1,4,20,4z M20,7.5l-8,5.3L4,7.5V6
+		h16V7.5z"/>
+</g>
+</svg>

dist/assets/join-arrow.b158dd9a6d19e393ac5e419c8cec4949.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M4.6,4.5l1.2-1.2l1.4,1.4L6,5.9C4.8,7,4.8,9,6,10.1C6.6,10.7,7.3,11,8.1,11H17l-2.3-2.3l1.4-1.4l4.7,4.7l-4.7,4.7l-1.4-1.4
+	L17,13H8.1c-1.3,0-2.6-0.5-3.5-1.5C2.6,9.6,2.6,6.4,4.6,4.5z"/>
+</svg>

dist/assets/leave-arrow.a14d056eec03951908412ec70d2601b2.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M19.4,4.5l-1.2-1.2l-1.4,1.4L18,5.9c1.2,1.2,1.2,3.1,0,4.2c-0.6,0.6-1.3,0.9-2.1,0.9H7l2.3-2.3L7.8,7.3L3.1,12l4.7,4.7
+	l1.4-1.4L7,13h8.9c1.3,0,2.6-0.5,3.5-1.5C21.4,9.6,21.4,6.4,19.4,4.5z"/>
+</svg>

dist/assets/manifest.json

@@ -0,0 +1,59 @@
+{
+  "name": "Cinny",
+  "short_name": "Cinny",
+  "description": "A matrix client",
+  "dir": "auto",
+  "lang": "en-US",
+  "display": "standalone",
+  "orientation": "any",
+  "start_url": "/?homescreen=1",
+  "background_color": "#fff",
+  "theme_color": "#fff",
+  "icons": [
+    {
+      "src": "android-chrome-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

dist/assets/manifest.webapp

@@ -0,0 +1,14 @@
+{
+  "version": "1.0.0",
+  "name": "Cinny",
+  "description": "A matrix client",
+  "icons": {
+    "60": "firefox_app_60x60.png",
+    "128": "firefox_app_128x128.png",
+    "512": "firefox_app_512x512.png"
+  },
+  "developer": {
+    "name": "ajbura, 1997kB",
+    "url": null
+  }
+}

dist/assets/peace.6b673eb6c7ea027fdde9fd8262fda828.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M20,12c0,1.6-0.5,3.1-1.3,4.3L13,10.6V4.1
+	C16.9,4.6,20,7.9,20,12z M11,19.9c-1.7-0.2-3.2-1-4.4-2.1l4.4-4.4V19.9z M13,13.4l4.4,4.4c-1.2,1.1-2.7,1.9-4.4,2.1V13.4z M11,4.1
+	v6.5l-5.7,5.7C4.5,15.1,4,13.6,4,12C4,7.9,7.1,4.6,11,4.1z"/>
+</svg>

dist/assets/photo.7b243761b447ef50835e8a2455a1438c.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M19,5v12.7l-5-5.8l-2,2L8.9,9.6
+		l-3.9,7V5H19z M18.2,19H5.4l3.7-6.6l2.8,3.8l2-2L18.2,19z"/>
+	<circle cx="14.5" cy="8.5" r="1.5"/>
+</g>
+</svg>

dist/assets/play.8838e717b724f8097895aae1dad87e92.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,4c4.4,0,8,3.6,8,8s-3.6,8-8,8s-8-3.6-8-8S7.6,4,12,4 M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2
+		L12,2z"/>
+	<polygon points="10,8 10,16 16,12 	"/>
+</g>
+</svg>

dist/assets/plus.6ba97826d509c8c6b7189fe492a504a9.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<polygon points="19,11 13,11 13,5 11,5 11,11 5,11 5,13 11,13 11,19 13,19 13,13 19,13 "/>
+</svg>

dist/assets/power.f0b0240b3ec31ce3f04f1aa7b175b02d.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M17.6,5l-1.3,1.6C18,7.8,19,9.8,19,12c0,3.9-3.1,7-7,7s-7-3.1-7-7c0-2.2,1-4.2,2.6-5.5L6.4,5C4.3,6.6,3,9.2,3,12
+		c0,5,4,9,9,9c5,0,9-4,9-9C21,9.2,19.7,6.6,17.6,5z"/>
+	<rect x="11" y="2" width="2" height="10"/>
+</g>
+</svg>

dist/assets/reply-arrow.4652dfc3651a804bb60877d388196c95.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M21,13v-2H9c-1.1,0-2,0.9-2,2v4.6l-2.3-2.3l-1.4,1.4L8,21.4l4.7-4.7l-1.4-1.4L9,17.6V13H21z"/>
+</svg>

dist/assets/search.062efbb79fafd84810e946829b5b6115.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M21.7,20.3l-5.4-5.4c1.1-1.4,1.7-3.1,1.7-4.9c0-4.4-3.6-8-8-8s-8,3.6-8,8s3.6,8,8,8c1.8,0,3.5-0.6,4.9-1.7l5.4,5.4
+	L21.7,20.3z M10,16c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S13.3,16,10,16z"/>
+</svg>

dist/assets/send.507da28d5579add6eccc11cba4870a69.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M4,5.2L17.5,12L4,18.8v-4.3l1.6-0.5l5.7-1.9l-5.7-1.9L4,9.6V5.2 M2,2v11v-2l3,1l-3,1v9l20-10L2,2L2,2z"/>
+</svg>

dist/assets/settings.63c73133e69b9475120089774abfbaf1.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M13,4v0.6v1.3l1.2,0.5c0.5,0.2,1,0.5,1.4,0.8l1.1,0.8l1.2-0.7l0.5-0.3l1,1.7l-0.5,0.3l-1.2,0.7l0.2,1.3
+		c0,0.3,0.1,0.6,0.1,0.8s0,0.5-0.1,0.8l-0.2,1.3l1.2,0.7l0.5,0.3l-1,1.7l-0.5-0.3l-1.2-0.7l-1.1,0.8c-0.4,0.3-0.9,0.6-1.4,0.8
+		L13,18.1v1.3V20h-2v-0.6v-1.3l-1.2-0.5c-0.5-0.2-1-0.5-1.4-0.8l-1.1-0.8l-1.2,0.7l-0.5,0.3l-1-1.7l0.5-0.3l1.2-0.7l-0.2-1.3
+		C6,12.5,6,12.2,6,12s0-0.5,0.1-0.8l0.2-1.3L5.1,9.2L4.6,8.9l1-1.7l0.5,0.3l1.2,0.7l1.1-0.8c0.4-0.3,0.9-0.6,1.4-0.8L11,5.9V4.6V4
+		H13 M13,2h-2C9.9,2,9,2.9,9,4v0.6C8.3,4.9,7.7,5.2,7.1,5.7L6.6,5.4c-0.3-0.2-0.7-0.3-1-0.3c-0.7,0-1.4,0.4-1.7,1l-1,1.7
+		c-0.6,1-0.2,2.2,0.7,2.7l0.5,0.3C4,11.3,4,11.6,4,12s0,0.7,0.1,1.1l-0.5,0.3c-1,0.6-1.3,1.8-0.7,2.7l1,1.7c0.4,0.6,1,1,1.7,1
+		c0.3,0,0.7-0.1,1-0.3l0.5-0.3c0.6,0.5,1.2,0.8,1.9,1.1V20c0,1.1,0.9,2,2,2h2c1.1,0,2-0.9,2-2v-0.6c0.7-0.3,1.3-0.7,1.9-1.1l0.5,0.3
+		c0.3,0.2,0.7,0.3,1,0.3c0.7,0,1.4-0.4,1.7-1l1-1.7c0.6-1,0.2-2.2-0.7-2.7l-0.5-0.3C20,12.7,20,12.4,20,12s0-0.7-0.1-1.1l0.5-0.3
+		c1-0.6,1.3-1.8,0.7-2.7l-1-1.7c-0.4-0.6-1-1-1.7-1c-0.3,0-0.7,0.1-1,0.3l-0.5,0.3c-0.6-0.5-1.2-0.8-1.9-1.1V4C15,2.9,14.1,2,13,2
+		L13,2z"/>
+	<g>
+		<path d="M12,16c-2.2,0-4-1.8-4-4s1.8-4,4-4s4,1.8,4,4S14.2,16,12,16z M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,10,12,10z
+			"/>
+	</g>
+</g>
+</svg>

dist/assets/shield.498420bdf2ec5957adc2646fa892026d.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,2L3,6v7c0,5,4,9,9,9c5,0,9-4,9-9V6L12,2z M19,13c0,3.9-3.1,7-7,7s-7-3.1-7-7V7.3l7-3.1l7,3.1V13z"/>
+	<path d="M10,11c0,0.7,0.4,1.4,1,1.7V16h2v-3.3c0.6-0.3,1-1,1-1.7c0-1.1-0.9-2-2-2S10,9.9,10,11z"/>
+</g>
+</svg>

dist/assets/space-lock.2efa7b53ab33a849560b10cddf5f2ad0.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M21,4V3c0-1.7-1.3-3-3-3s-3,1.3-3,3v1c-0.6,0-1,0.4-1,1v4c0,0.6,0.4,1,1,1h6c0.6,0,1-0.4,1-1V5C22,4.4,21.5,4,21,4z
+		 M19.5,4h-3V3c0-0.8,0.7-1.5,1.5-1.5s1.5,0.7,1.5,1.5V4z"/>
+	<path d="M15.4,13.7L14,14l-0.2,1.4c-0.4,2.8-1.3,4.2-1.7,4.6c-0.4-0.3-1.3-1.8-1.7-4.6L10,14l-1.4-0.2C5.8,13.3,4.4,12.4,4,12
+		c0.3-0.4,1.8-1.3,4.6-1.7L10,10l0.2-1.4c0.4-2.8,1.3-4.2,1.7-4.6V2c-1.7,0-3.1,2.6-3.7,6.3C4.6,8.9,2,10.3,2,12s2.6,3.1,6.3,3.7
+		c0.6,3.7,2,6.3,3.7,6.3s3.1-2.6,3.7-6.3c3.7-0.6,6.3-2,6.3-3.7h-2.1C19.6,12.4,18.2,13.3,15.4,13.7z"/>
+</g>
+</svg>

dist/assets/space.05c198da2fedc28c7a57d8c86a588e82.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M12,4.1c0.4,0.3,1.3,1.8,1.7,4.6L14,10l1.4,0.2c2.8,0.4,4.2,1.3,4.6,1.7c-0.3,0.4-1.8,1.3-4.6,1.7L14,14l-0.2,1.4
+	c-0.4,2.8-1.3,4.2-1.7,4.6c-0.4-0.3-1.3-1.8-1.7-4.6L10,14l-1.4-0.2c-2.8-0.4-4.2-1.3-4.6-1.7c0.3-0.4,1.8-1.3,4.6-1.7L10,10
+	l0.2-1.4C10.7,5.8,11.6,4.4,12,4.1 M12,2c-1.7,0-3.1,2.6-3.7,6.3C4.6,8.9,2,10.3,2,12s2.6,3.1,6.3,3.7c0.6,3.7,2,6.3,3.7,6.3
+	s3.1-2.6,3.7-6.3c3.7-0.6,6.3-2,6.3-3.7s-2.6-3.1-6.3-3.7C15.1,4.6,13.7,2,12,2L12,2z"/>
+</svg>

dist/assets/tick-mark.9737a73dcc44eb0e793759bd547a71a0.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<rect x="13.6" y="6" transform="matrix(0.7071 0.7071 -0.7071 0.7071 10.9064 -7.6107)" width="2" height="6.7"/>
+	<rect x="1.8" y="12.9" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 0.1967 27.7885)" width="8.1" height="2"/>
+	<polygon points="21.3,6.3 13,14.6 8.7,10.3 7.3,11.7 13,17.4 22.7,7.7 	"/>
+</g>
+</svg>

dist/assets/user.fb26a2eef540a21e7f9ffefd2321927b.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,11c2.2,0,4-1.8,4-4s-1.8-4-4-4S8,4.8,8,7S9.8,11,12,11z M12,5c1.1,0,2,0.9,2,2s-0.9,2-2,2s-2-0.9-2-2S10.9,5,12,5z"/>
+	<path d="M14,13h-4c-3.3,0-6,2.7-6,6v2h16v-2C20,15.7,17.3,13,14,13z M6,19c0-2.2,1.8-4,4-4h4c2.2,0,4,1.8,4,4H6z"/>
+</g>
+</svg>

dist/assets/vertical-menu.180cbca47512a24456ba0a74e64a5405.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<circle cx="12" cy="5" r="2"/>
+	<circle cx="12" cy="12" r="2"/>
+	<circle cx="12" cy="19" r="2"/>
+</g>
+</svg>

dist/assets/vlc.12ce0b57b1b136a0150c3c5f147ef08f.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M19.4,20L14,2h-4L4.6,20H2v2h2h16h2v-2H19.4z M15.8,15H8.2l0.9-3h5.8L15.8,15z M11.5,4h1l1.8,6H9.7L11.5,4z M6.7,20l0.9-3
+	h8.8l0.9,3H6.7z"/>
+</svg>

dist/assets/volume-full.a74609ebaadf79cabc7fee7590f52793.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M9,7.8v8.3L6.8,14H4v-4h2.8L9,7.8 M11,3L6,8H4c-1.1,0-2,0.9-2,2v4c0,1.1,0.9,2,2,2h2l5,5V3L11,3z"/>
+	<path d="M13,3v2c3.9,0,7,3.1,7,7s-3.1,7-7,7v2c5,0,9-4,9-9S18,3,13,3z"/>
+	<g>
+		<path d="M13,17v-2c1.7,0,3-1.3,3-3s-1.3-3-3-3V7c2.8,0,5,2.2,5,5S15.8,17,13,17z"/>
+	</g>
+</g>
+</svg>

dist/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link href="https://api.fontshare.com/css?f[]=supreme@300,301,400,401,500,501,700,701&display=swap" rel="stylesheet"><title>Cinny</title><meta name="name" content="Cinny"><meta name="description" content="Yet another matrix client. Where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source."><meta name="keywords" content="cinny, cinnyapp, cinnychat, matrix, matrix client, matrix.org, element"><meta property="og:title" content="Cinny"><meta property="og:url" content="https://cinny.in"><meta property="og:image" content="https://cinny.in/assets/favicon-48x48.png"><meta property="og:description" content="Yet another matrix client. Where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source."><meta name="theme-color" content="#000000"><link rel="shortcut icon" href="assets/favicon.ico"><link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png"><link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png"><link rel="icon" type="image/png" sizes="48x48" href="assets/favicon-48x48.png"><link rel="manifest" href="assets/manifest.json"><meta name="mobile-web-app-capable" content="yes"><meta name="theme-color" content="#fff"><meta name="application-name" content="Cinny"><link rel="apple-touch-icon" sizes="57x57" href="assets/apple-touch-icon-57x57.png"><link rel="apple-touch-icon" sizes="60x60" href="assets/apple-touch-icon-60x60.png"><link rel="apple-touch-icon" sizes="72x72" href="assets/apple-touch-icon-72x72.png"><link rel="apple-touch-icon" sizes="76x76" href="assets/apple-touch-icon-76x76.png"><link rel="apple-touch-icon" sizes="114x114" href="assets/apple-touch-icon-114x114.png"><link rel="apple-touch-icon" sizes="120x120" href="assets/apple-touch-icon-120x120.png"><link rel="apple-touch-icon" sizes="144x144" href="assets/apple-touch-icon-144x144.png"><link rel="apple-touch-icon" sizes="152x152" href="assets/apple-touch-icon-152x152.png"><link rel="apple-touch-icon" sizes="167x167" href="assets/apple-touch-icon-167x167.png"><link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon-180x180.png"><link rel="apple-touch-icon" sizes="1024x1024" href="assets/apple-touch-icon-1024x1024.png"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="apple-mobile-web-app-title" content="Cinny"><meta name="msapplication-TileColor" content="#fff"><meta name="msapplication-TileImage" content="assets/mstile-144x144.png"><meta name="msapplication-config" content="assets/browserconfig.xml"><script defer="defer" src="polyfill.1b01f0f1fe35ab48e585.bundle.js"></script><script defer="defer" src="main.b16695b6316dfd5b68d4.bundle.js"></script><link href="main.7e67114cb989c8c9f008.bundle.css" rel="stylesheet"></head><body id="appBody"><div id="root"></div></body></html>

dist/main.b16695b6316dfd5b68d4.bundle.js.LICENSE.txt

@@ -0,0 +1,140 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/*!
+	autosize 4.0.2
+	license: MIT
+	http://www.jacklmoore.com/autosize
+*/
+
+/*!
+  * prr
+  * (c) 2013 Rod Vagg <rod@vagg.org>
+  * https://github.com/rvagg/prr
+  * License: MIT
+  */
+
+/*!
+  Copyright (c) 2015 Jed Watson.
+  Based on code that is Copyright 2013-2015, Facebook, Inc.
+  All rights reserved.
+*/
+
+/*!
+ * Adapted from jQuery UI core
+ *
+ * http://jqueryui.com
+ *
+ * Copyright 2014 jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ *
+ * http://api.jqueryui.com/category/ui-core/
+ */
+
+/*!
+ * Determine if an object is a Buffer
+ *
+ * @author   Feross Aboukhadijeh <https://feross.org>
+ * @license  MIT
+ */
+
+/*!
+ * The buffer module from node.js, for the browser.
+ *
+ * @author   Feross Aboukhadijeh <https://feross.org>
+ * @license  MIT
+ */
+
+/*!
+ * content-type
+ * Copyright(c) 2015 Douglas Christopher Wilson
+ * MIT Licensed
+ */
+
+/*!
+ * repeat-string <https://github.com/jonschlinkert/repeat-string>
+ *
+ * Copyright (c) 2014-2015, Jon Schlinkert.
+ * Licensed under the MIT License.
+ */
+
+/*! https://mths.be/punycode v1.3.2 by @mathias */
+
+/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
+
+/*! safe-buffer. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */
+
+/**
+ * @license IDBWrapper - A cross-browser wrapper for IndexedDB
+ * Version 1.7.2
+ * Copyright (c) 2011 - 2017 Jens Arps
+ * http://jensarps.de/
+ *
+ * Licensed under the MIT license
+ */
+
+/**
+ * Prism: Lightweight, robust, elegant syntax highlighting
+ *
+ * @license MIT <https://opensource.org/licenses/MIT>
+ * @author Lea Verou <https://lea.verou.me>
+ * @namespace
+ * @public
+ */
+
+/** @license React v0.20.2
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**!
+ * is
+ * the definitive JavaScript type testing library
+ * 
+ * @copyright 2013 Enrico Marino
+ * @license MIT
+ */

package.json

@@ -12,7 +12,7 @@
     "build": "webpack --config ./webpack.prod.js"
   },
   "keywords": [],
-  "author": "",
+  "author": "Ajay Bura",
   "license": "ISC",
   "dependencies": {
     "@tippyjs/react": "^4.2.5",

public/index.html

@@ -7,7 +7,8 @@
     <link href="https://api.fontshare.com/css?f[]=supreme@300,301,400,401,500,501,700,701&display=swap" rel="stylesheet">
     <title>Cinny</title>
     <meta name="name"        content="Cinny">
-    <meta name="description" content="Yet another Matrix client. Where you can enjoy the conversation using a simple, elegant and secure interface protected by e2ee with the power of open source.">
+    <meta name="author"      content="Ajay Bura">
+    <meta name="description" content="Yet another Matrix client. Where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source.">
     <meta name="keywords"    content="cinny, cinnyapp, cinnychat, matrix, matrix client, matrix.org, element">
   
     <meta property="og:title"       content="Cinny">

public/res/ic/outlined/info.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8
+		S16.4,20,12,20z"/>
+	<g>
+		<polygon points="12.8,15.5 12.8,10 12.2,10 11.3,10 10,10 10,11 11.3,11.5 11.3,15.5 10,16 10,17 14,17 14,16 		"/>
+		<circle cx="12" cy="8" r="1"/>
+	</g>
+</g>
+</svg>

src/app/molecules/popup-window/PopupWindow.scss

@@ -5,7 +5,7 @@
 }
 
 .pw {
-  --popup-window-drawer-width: 312px;
+  --popup-window-drawer-width: 280px;
 
   width: 100%;
   height: 100%;
@@ -51,26 +51,21 @@
 
 .pw__drawer {
   & .header {
-    padding-left: var(--sp-extra-tight);
+    padding-left: var(--sp-tight);
-
+    & .header__title-wrapper {
-    & .ic-btn-surface:first-child {
+      margin: 0 var(--sp-extra-tight);
-      margin-right: var(--sp-ultra-tight);
     }
-
     [dir=rtl] & {
-        padding-right: var(--sp-extra-tight);
+        padding-right: var(--sp-tight);
-      & .ic-btn-surface:first-child {
-        margin-right: 0;
-        margin-left: var(--sp-ultra-tight);
-      }
     }
   }
 }
 
 .pw-content-selector {
+  margin: 0 var(--sp-extra-tight);
+  border-radius: var(--bo-radius);
   &--selected {
-    border: 1px solid var(--bg-surface-border);
+    box-shadow: var(--bs-surface-border);
-    border-width: 1px 0;
     background-color: var(--bg-surface);
 
     & .context-menu__item > button {
@@ -81,17 +76,13 @@
   }
 
   & .context-menu__item > button {
+    border-radius: var(--bo-radius);
     & .text {
       color: var(--tc-surface-normal);
     }
-    padding-left: var(--sp-normal);
     & .ic-raw {
       margin-right: var(--sp-tight);
-    }
+      [dir=rtl] & {
-
-    [dir=rtl] & {
-      padding-right: var(--sp-normal);
-      & .ic-raw {
         margin-right: 0;
         margin-left: var(--sp-tight);
       }

src/app/organisms/settings/Settings.jsx

@@ -1,49 +1,121 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import './Settings.scss';
 
+import initMatrix from '../../../client/initMatrix';
 import settings from '../../../client/state/settings';
 
 import Text from '../../atoms/text/Text';
 import IconButton from '../../atoms/button/IconButton';
+import Button from '../../atoms/button/Button';
 import SegmentedControls from '../../atoms/segmented-controls/SegmentedControls';
 
-import PopupWindow from '../../molecules/popup-window/PopupWindow';
+import PopupWindow, { PWContentSelector } from '../../molecules/popup-window/PopupWindow';
 import SettingTile from '../../molecules/setting-tile/SettingTile';
 
+import SunIC from '../../../../public/res/ic/outlined/sun.svg';
+import LockIC from '../../../../public/res/ic/outlined/lock.svg';
+import InfoIC from '../../../../public/res/ic/outlined/info.svg';
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
 
+import CinnySVG from '../../../../public/res/svg/cinny.svg';
+
+function AppearanceSection() {
+  return (
+    <div className="settings-content">
+      <SettingTile
+        title="Theme"
+        content={(
+          <SegmentedControls
+            selected={settings.getThemeIndex()}
+            segments={[
+              { text: 'Light' },
+              { text: 'Silver' },
+              { text: 'Dark' },
+              { text: 'Butter' },
+            ]}
+            onSelect={(index) => settings.setTheme(index)}
+          />
+        )}
+      />
+    </div>
+  );
+}
+
+function SecuritySection() {
+  return (
+    <div className="settings-content">
+      <Text>{`Device ID: ${initMatrix.matrixClient.getDeviceId()}`}</Text>
+    </div>
+  );
+}
+
+function AboutSection() {
+  return (
+    <div className="settings-content settings__about">
+      <div className="settings__about__branding">
+        <img width="60" height="60" src={CinnySVG} alt="Cinny logo" />
+        <div>
+          <Text variant="h2">
+            Cinny
+            <span className="text text-b3" style={{ margin: '0 var(--sp-extra-tight)' }}>v1.0.0</span>
+          </Text>
+          <Text>Yet another matrix client</Text>
+
+          <div className="settings__about__btns">
+            <Button onClick={() => window.open('https://github.com/ajbura/cinny')}>Source code</Button>
+            <Button onClick={() => window.open('https://liberapay.com/ajbura/donate')}>Support</Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function Settings({ isOpen, onRequestClose }) {
+  const settingSections = [{
+    name: 'Appearance',
+    iconSrc: SunIC,
+    render() {
+      return <AppearanceSection />;
+    },
+  }, {
+    name: 'Security & Privacy',
+    iconSrc: LockIC,
+    render() {
+      return <SecuritySection />;
+    },
+  }, {
+    name: 'Help & About',
+    iconSrc: InfoIC,
+    render() {
+      return <AboutSection />;
+    },
+  }];
+  const [selectedSection, setSelectedSection] = useState(settingSections[0]);
+
   return (
     <PopupWindow
       className="settings-window"
       isOpen={isOpen}
       onRequestClose={onRequestClose}
       title="Settings"
+      contentTitle={selectedSection.name}
+      drawer={
+        settingSections.map((section) => (
+          <PWContentSelector
+            key={section.name}
+            selected={selectedSection.name === section.name}
+            onClick={() => setSelectedSection(section)}
+            iconSrc={section.iconSrc}
+          >
+            {section.name}
+          </PWContentSelector>
+        ))
+      }
       contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />}
     >
-      <div className="settings-content">
+      {selectedSection.render()}
-        <SettingTile
-          title="Theme"
-          content={(
-            <SegmentedControls
-              selected={settings.getThemeIndex()}
-              segments={[
-                { text: 'Light' },
-                { text: 'Silver' },
-                { text: 'Dark' },
-                { text: 'Butter' },
-              ]}
-              onSelect={(index) => settings.setTheme(index)}
-            />
-          )}
-        />
-        <div style={{ flex: '1' }} />
-        <Text className="settings__about" variant="b1">
-          <a href="https://cinny.in/#about" target="_blank" rel="noreferrer">About</a>
-        </Text>
-        <Text className="settings__about">Version: 1.0.0</Text>
-      </div>
     </PopupWindow>
   );
 }

src/app/organisms/settings/Settings.scss

@@ -1,6 +1,6 @@
 .settings-window {
   & .pw__content-container {
-    height: 100%;
+    min-height: 100%;
   }
 }
 
@@ -12,11 +12,27 @@
     margin-right: var(--sp-normal);
   }
 
-  display: flex;
+  & .setting-tile {
-  flex-direction: column;
+    margin-top: var(--sp-normal);
-  height: 100%;
+  }
 }
 
 .settings__about {
-  text-align: center;
+  &__branding {
+    margin-top: var(--sp-extra-tight);
+    margin-bottom: var(--sp-normal);
+    display: flex;
+
+    & > div {
+      margin: 0 calc(var(--sp-loose) + var(--sp-ultra-tight));
+    }
+
+  }
+  &__btns {
+    margin: 0;
+    margin-top: var(--sp-normal);
+    & button:last-child {
+      margin: 0 var(--sp-tight)
+    }
+  }
 }