From b33ca03af7aa3db657b09f976d43fbbe27e0d4a1 Mon Sep 17 00:00:00 2001
From: elhombretecla <delacruzgarciajuan@gmail.com>
Date: Thu, 3 Mar 2016 21:25:19 +0100
Subject: [PATCH] create styles for user settings profile

---
 resources/styles/main.scss                   |  1 +
 resources/styles/partials/user-settings.scss | 69 ++++++++++++++++++++
 src/uxbox/ui/settings.cljs                   | 28 ++++++--
 3 files changed, 91 insertions(+), 7 deletions(-)
 create mode 100644 resources/styles/partials/user-settings.scss

diff --git a/resources/styles/main.scss b/resources/styles/main.scss
index 63aec9a599..39eb30979a 100644
--- a/resources/styles/main.scss
+++ b/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';
diff --git a/resources/styles/partials/user-settings.scss b/resources/styles/partials/user-settings.scss
new file mode 100644
index 0000000000..d117cfde23
--- /dev/null
+++ b/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;
+  }
+
+}
diff --git a/src/uxbox/ui/settings.cljs b/src/uxbox/ui/settings.cljs
index 361ac4ebcd..700202d44b 100644
--- a/src/uxbox/ui/settings.cljs
+++ b/src/uxbox/ui/settings.cljs
@@ -19,14 +19,28 @@
   (html
    [:main.dashboard-main
     (header)
-    [:section.dashboard-content
-     [:ul
-      [:li {:on-click #(r/go :settings/profile)} "Profile"]
-      [:li {:on-click #(r/go :settings/password)} "Password"]
-      [:li {:on-click #(r/go :settings/notifications)} "Notifications"]]
+    [:section.dashboard-content.user-settings
+     [:div.user-settings-nav
+      [: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"]]]
 
-     [:section.dashboard-grid.library
-      [:span "TODO 1"]]]]))
+     [:section.user-settings-content
+      [: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