6 files changed, 128 insertions, 3 deletions
diff --git a/css/icons.css b/css/icons.css
new file mode 100644
index 0000000..9639072
--- /dev/null
+++ b/css/icons.css
@@ -0,0 +1,8 @@
+.actionButtons .newFolder {
+  background-image: url("../icons/symbolic/light/normal/folder-new.svg");
+}
+
+.actionButtons .newFolder:hover {
+  background-image: url("../icons/symbolic/light/hovered/folder-new.svg");
+}
+/*# sourceMappingURL=icons.css.map */
+\ No newline at end of file
diff --git a/css/icons.css.map b/css/icons.css.map
new file mode 100644
index 0000000..c4f44d4
--- /dev/null
+++ b/css/icons.css.map
@@ -0,0 +1,9 @@
+{
+    "version": 3,
+    "mappings": "AAAA,AACI,cADU,CACV,UAAU,CAAC;EACT,gBAAgB,EAAE,oDAAoD;CACvE;;AAHL,AAII,cAJU,CAIV,UAAU,AAAA,MAAM,CAAC;EACf,gBAAgB,EAAE,qDAAqD;CACxE",
+    "sources": [
+        "icons.scss"
+    ],
+    "names": [],
+    "file": "icons.css"
+}
+\ No newline at end of file
diff --git a/css/icons.scss b/css/icons.scss
new file mode 100644
index 0000000..b3c5892
--- /dev/null
+++ b/css/icons.scss
@@ -0,0 +1,8 @@
+.actionButtons {
+    .newFolder {
+      background-image: url("../icons/symbolic/light/normal/folder-new.svg");
+    }
+    .newFolder:hover {
+      background-image: url("../icons/symbolic/light/hovered/folder-new.svg");
+    }
+  }
+\ No newline at end of file
diff --git a/css/main.css b/css/main.css
index 7ce0b17..af7bb2d 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1 +1,48 @@
-/* No CSS *//*# sourceMappingURL=main.css.map */
-\ No newline at end of file
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+.topNavigationBar {
+  padding: 5px 10px;
+  -webkit-user-select: none;
+  -webkit-app-region: drag;
+  background: #0075c4;
+  /* Old browsers */
+  /* FF3.6-15 */
+  /* Chrome10-25,Safari5.1-6 */
+  background: -webkit-gradient(linear, left top, left bottom, from(#0075c4), to(#0267c1));
+  background: linear-gradient(to bottom, #0075c4 0%, #0267c1 100%);
+  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0075c4', endColorstr='#0267c1',GradientType=0 );
+  /* IE6-9 */
+}
+
+.titlebar {
+  text-align: center;
+  font-size: 12px;
+  margin: 0px 0px 10px 0px;
+  color: white;
+  font-weight: 400;
+}
+
+.actionButtons .btn {
+  background: transparent;
+  width: 32px;
+  height: 32px;
+  border: none;
+  outline: none;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.actionButtons .newFolder {
+  background-image: url("../icons/symbolic/light/normal/folder-new.svg");
+}
+
+.actionButtons .newFolder:hover {
+  background-image: url("../icons/symbolic/light/hovered/folder-new.svg");
+}
+/*# sourceMappingURL=main.css.map */
+\ No newline at end of file
diff --git a/css/main.css.map b/css/main.css.map
index 4e05efb..fefc85b 100644
--- a/css/main.css.map
+++ b/css/main.css.map
@@ -1,8 +1,9 @@
 {
     "version": 3,
-    "mappings": "",
+    "mappings": "AAAA,AAAA,IAAI,CAAC;EACH,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,WAAW,EAAE,2HACiD;CAC/D;;AAED,AAAA,iBAAiB,CAAC;EAChB,OAAO,EAAE,QAAQ;EACjB,mBAAmB,EAAE,IAAI;EACzB,kBAAkB,EAAE,IAAI;EACxB,UAAU,EAAE,OAAO;EAAE,kBAAkB;EACvC,UAAU,EAAE,mDAIX;EAAE,cAAc;EACjB,UAAU,EAAE,sDAIX;EAAE,6BAA6B;EAChC,UAAU,EAAE,oDAIX;EAAE,sDAAsD;EACzD,MAAM,EAAE,2GAA2G;EAAE,WAAW;CACjI;;AAED,AAAA,SAAS,CAAC;EACR,UAAU,EAAE,MAAM;EAClB,SAAS,EAAE,IAAI;EACf,MAAM,EAAE,gBAAgB;EACxB,KAAK,EAAE,KAAK;EACZ,WAAW,EAAE,GAAG;CACjB;;AAED,AACE,cADY,CACZ,IAAI,CAAC;EACH,UAAU,EAAE,WAAW;EACvB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,OAAO;EACxB,mBAAmB,EAAE,MAAM;EAC3B,iBAAiB,EAAE,SAAS;CAC7B;;AChDH,AACI,cADU,CACV,UAAU,CAAC;EACT,gBAAgB,EAAE,oDAAoD;CACvE;;AAHL,AAII,cAJU,CAIV,UAAU,AAAA,MAAM,CAAC;EACf,gBAAgB,EAAE,qDAAqD;CACxE",
     "sources": [
-        "main.scss"
+        "main.scss",
+        "icons.scss"
     ],
     "names": [],
     "file": "main.css"
diff --git a/css/main.scss b/css/main.scss
index e69de29..4bbee18 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -0,0 +1,52 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+.topNavigationBar {
+  padding: 5px 10px;
+  -webkit-user-select: none;
+  -webkit-app-region: drag;
+  background: #0075c4; /* Old browsers */
+  background: -moz-linear-gradient(
+    top,
+    #0075c4 0%,
+    #0267c1 100%
+  ); /* FF3.6-15 */
+  background: -webkit-linear-gradient(
+    top,
+    #0075c4 0%,
+    #0267c1 100%
+  ); /* Chrome10-25,Safari5.1-6 */
+  background: linear-gradient(
+    to bottom,
+    #0075c4 0%,
+    #0267c1 100%
+  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0075c4', endColorstr='#0267c1',GradientType=0 ); /* IE6-9 */
+}
+
+.titlebar {
+  text-align: center;
+  font-size: 12px;
+  margin: 0px 0px 10px 0px;
+  color: white;
+  font-weight: 400;
+}
+
+.actionButtons {
+  .btn {
+    background: transparent;
+    width: 32px;
+    height: 32px;
+    border: none;
+    outline: none;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+}
+
+@import "icons.scss";