create styles for user settings profile

resources/styles/main.scss

@@ -44,6 +44,7 @@
 @import 'partials/sidebar-document-history';
 @import 'partials/dashboard-bar';
 @import 'partials/dashboard-grid';
+@import 'partials/user-settings';
 @import 'partials/activity-bar';
 @import 'partials/library-bar';
 @import 'partials/lightbox';

resources/styles/partials/user-settings.scss

@@ -0,0 +1,69 @@
+.user-settings {
+  flex-direction: column;
+}
+
+.user-settings-nav {
+  display: flex;
+
+  .user-settings-nav-inside {
+    align-items: center;
+    display: flex;
+    margin: 0 auto;
+
+    li {
+      background-color: transparent;
+      border: 1px solid $medium-ui-border;
+      border-radius: $br-small;
+      cursor: pointer;
+      margin: $medium;
+      padding: $small $medium;
+
+      &:hover {
+        background-color: $primary-ui-bg;
+        border-color: transparent;
+      }
+
+      &.current {
+        background-color: $main-ui-color;
+        border: 0;
+        color: $color-white;
+      }
+
+    }
+
+  }
+
+}
+
+.user-settings-content {
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  width: 500px;
+
+  .user-settings-label {
+    border-bottom: 1px solid $soft-ui-border;
+    font-weight: bold;
+    margin: $x-small 0 $medium 0;
+    padding: $medium;
+  }
+
+  .input-text {
+    color: $intense-ui-text;
+  }
+
+}
+
+.avatar-form {
+  align-items: center;
+  display: flex;
+
+  img {
+    border-radius: 50%;
+    flex-shrink: 0;
+    height: 120px;
+    margin-right: $medium;
+    width: 120px;
+  }
+
+}

src/uxbox/ui/settings.cljs

@@ -19,14 +19,28 @@
   (html
    [:main.dashboard-main
     (header)
-    [:section.dashboard-content
+    [:section.dashboard-content.user-settings
-     [:ul
+     [:div.user-settings-nav
-      [:li {:on-click #(r/go :settings/profile)} "Profile"]
+      [:ul.user-settings-nav-inside
+       [:li.current {:on-click #(r/go :settings/profile)} "Profile"]
        [:li {:on-click #(r/go :settings/password)} "Password"]
-      [:li {:on-click #(r/go :settings/notifications)} "Notifications"]]
+       [:li {:on-click #(r/go :settings/notifications)} "Notifications"]]]
 
-     [:section.dashboard-grid.library
+     [:section.user-settings-content
-      [:span "TODO 1"]]]]))
+      [:span.user-settings-label "Your avatar"]
+      [:form.avatar-form
+       [:img {:src "images/favicon.png" :border "0"}]
+       [:input {:type "file"}]]
+      [:span.user-settings-label "Name"]
+      [:input.input-text {:type "text" :placeholder "Your name"}]
+      [:span.user-settings-label "Username"]
+      [:input.input-text {:type "text" :placeholder "Your username"}]
+      [:span.user-settings-label "Email"]
+      [:input.input-text {:type "email" :placeholder "Your email"}]
+      [:span.user-settings-label "Choose a color theme"]
+      [:span "TODO RADIO BUTTONS"]
+      [:input.btn-primary {:type "submit" :value "Update settings"}]
+     ]]]))
 
 (def ^:static profile-page
   (mx/component