🚧 Basic user profile style refactor.

frontend/resources/styles/common/dependencies/helpers.scss

@@ -17,6 +17,8 @@ $size-1: 0.25rem;
 $size-2: 0.5rem;
 $size-3: 0.8rem;
 $size-4: 1rem;
+$size-5: 1.5rem;
+$size-6: 2rem;
 
 // Border radius
 $br-small: 3px;

frontend/resources/styles/common/framework.scss

@@ -14,8 +14,7 @@
   border-radius: 3px;
   cursor: pointer;
   display: flex;
-  font-size: $fs16;
+  font-size: $fs14;
-  font-weight: bold;
   justify-content: center;
   padding: 1rem;
   transition: all .4s;
@@ -26,7 +25,7 @@
     flex-shrink: 0;
   }
   &.btn-small {
-    font-size: $fs14;
+    font-size: $fs12;
     padding: .7rem 1rem;
     line-height: 1.15;
   }
@@ -36,13 +35,13 @@
   @extend %btn;
   align-items: center;
   background: $color-primary;
-  color: $color-white;
+  color: $color-black;
   justify-content: center;
   display: flex;
   padding: 1rem;
   &:hover {
-    background: $color-primary-dark;
+    background: $color-black;
-    color: $color-white;
+    color: $color-primary;
   }
 }
 
@@ -137,8 +136,6 @@
   border: 1px solid $color-black;
   border-radius: 2px;
   color: $color-black;
-  font-size: $fs12;
-  font-weight: normal;
   padding: $x-small $small;
 
   &:hover {
@@ -150,7 +147,8 @@
 
 input[type=button][disabled],
 .btn-disabled {
-  opacity: .5;
+  background-color: $color-gray-10;
+  color: $color-gray-40;
   pointer-events: none;
 }
 
@@ -383,11 +381,11 @@ ul.slider-dots {
 
 input,
 select {
-  background-color: $color-gray-50;
+  background-color: $color-white;
   box-sizing: border-box;
   color: $color-gray-60;
   font-family: "sourcesanspro", sans-serif;
-  font-size: $fs16;
+  font-size: $fs14;
   margin-bottom: $medium;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -419,8 +417,8 @@ input[type="checkbox"]:focus {
 
 .input-text {
   border: none;
-  border-bottom: 1px solid $color-gray-60;
+  border-bottom: 1px solid transparent;
-  background-color: $color-gray-50;
+  background-color: $color-white;
   box-shadow: none;
   outline: none;
   padding: $small $big $small $small;
@@ -501,7 +499,7 @@ input.element-name {
     cursor: pointer;
     display: flex;
     margin-right: 15px;
-    font-size: 13px;
+    font-size: $fs13;
 
     &:before{
       content:"";
@@ -622,7 +620,7 @@ input[type=radio]:checked + label:before{
       position: absolute;
       left: 3.2px;
       top: 0px;
-      font-size: 11px;
+      font-size: $fs11;
       transition: border 0.2s linear 0s, color 0.2s linear 0s;
     }
 
@@ -663,7 +661,7 @@ input[type=radio]:checked + label:before{
       &::after {
         content:"✓";
         color: #000000;
-        font-size: 16px;
+        font-size: $fs16;
       }
 
     }

frontend/resources/styles/main/layouts/library-page.scss

@@ -46,17 +46,24 @@
 }
 
 .library-header-navigation-item {
-    margin: 0 $size-4;
+    margin: 0 $size-6;
     color: $color-gray;
     text-transform: uppercase;
     border-bottom: 1px solid transparent;
     
-    &:hover, &.current {
+    &:hover {
+        color: $color-black;
+    }
+
+    &.current {
         color: $color-black;
         border-bottom: 1px solid $color-primary;
     }
+
 }
 
+
+
 .library-sidebar {
     background-color: $color-white;
     padding: $size-2;

frontend/resources/styles/main/layouts/main-layout.scss

@@ -28,6 +28,25 @@
   }
 }
 
+.settings-layout {
+  background-color: $color-white;
+  display: grid;
+  grid-template-rows: 40px 1fr;
+  grid-template-columns: 40px 1fr;
+  height: 100vh;
+
+  & .left-bar {
+    grid-row: 2;
+    grid-column: 1;
+  }
+
+  & .settings-content {
+    grid-row: 1 / span 2;
+  }
+}
+
+
+
 .dashboard-content {
   background-color: lighten($color-gray-10, 5%);
   display: flex;

frontend/resources/styles/main/partials/library-bar.scss

@@ -129,6 +129,14 @@
       }
     }
   }
+
+  &.profile-bar {
+    background-color: $color-gray-10;
+
+    .library-bar-inside {
+      display: none;
+    }
+  }
 }
 
 .projects-row {

frontend/resources/styles/main/partials/user-settings.scss

@@ -1,51 +1,14 @@
-.user-settings {
+.user-settings-page {
-  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 $color-gray-20;
-      border-radius: $br-small;
-      cursor: pointer;
-      margin: $medium;
-      padding: $small $medium;
-
-      &:hover {
-        background-color: $color-gray-10;
-        border-color: transparent;
-      }
-
-      &.current {
-        background-color: $color-gray-50;
-        border: 0;
-        color: $color-primary;
-      }
-
-    }
-
-  }
-
-}
-
-.user-settings-content {
   display: flex;
   flex-direction: column;
   margin: 0 auto;
   width: 500px;
 
   .user-settings-label {
-    border-bottom: 1px solid $color-gray-60;
+    color: $color-black;
-    font-weight: bold;
+    font-size: $fs15;
-    margin: $x-small 0 $medium 0;
+    margin: $x-big 0 $x-small 0;
-    padding: $medium;
+    padding: $medium 0;
   }
 
   .input-text {
@@ -56,8 +19,6 @@
     margin-top: $medium;
   }
 
-}
-
   .profile-form,
   .password-form {
     display: flex;
@@ -77,3 +38,5 @@
     }
 
   }
+}
+

frontend/src/uxbox/main/ui/dashboard.cljs

@@ -5,8 +5,7 @@
 ;; This Source Code Form is "Incompatible With Secondary Licenses", as
 ;; defined by the Mozilla Public License, v. 2.0.
 ;;
-;; Copyright (c) 2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
+;; Copyright (c) 2020 UXBOX Labs SL
-;; Copyright (c) 2020 Andrey Antukh <niwi@niwi.nz>
 
 (ns uxbox.main.ui.dashboard
   (:require
@@ -94,5 +93,4 @@
 
          :dashboard-project
          (mf/element project-page #js {:team-id team-id
-                                       :project-id project-id}))]]])
+                                       :project-id project-id}))]]]))
-  )

frontend/src/uxbox/main/ui/dashboard/project.cljs

@@ -5,8 +5,7 @@
 ;; This Source Code Form is "Incompatible With Secondary Licenses", as
 ;; defined by the Mozilla Public License, v. 2.0.
 ;;
-;; Copyright (c) 2020 Andrey Antukh <niwi@niwi.nz>
+;; Copyright (c) 2020 UXBOX Labs SL
-;; Copyright (c) 2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 (ns uxbox.main.ui.dashboard.project
   (:require

frontend/src/uxbox/main/ui/dashboard/recent_files.cljs

@@ -5,8 +5,7 @@
 ;; This Source Code Form is "Incompatible With Secondary Licenses", as
 ;; defined by the Mozilla Public License, v. 2.0.
 ;;
-;; Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
+;; Copyright (c) 2020 UXBOX Labs SL
-;; Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 (ns uxbox.main.ui.dashboard.recent-files
   (:require

frontend/src/uxbox/main/ui/settings.cljs

@@ -11,21 +11,28 @@
    [potok.core :as ptk]
    [rumext.alpha :as mf]
    [uxbox.builtins.icons :as i]
+   [uxbox.main.refs :as refs]
+   [uxbox.main.ui.dashboard.profile :refer [profile-section]]
    [uxbox.main.ui.messages :refer [messages-widget]]
    [uxbox.main.ui.settings.header :refer [header]]
    [uxbox.main.ui.settings.password :refer [password-page]]
    [uxbox.main.ui.settings.profile :refer [profile-page]]))
 
 (mf/defc settings
-  {:wrap [mf/wrap-memo]}
   [{:keys [route] :as props}]
-  (let [section (get-in route [:data :name])]
+  (let [section (get-in route [:data :name])
-    [:main.dashboard-main
+        profile (mf/deref refs/profile)]
+    [:main.settings-main
      [:& messages-widget]
+
+     [:section.settings-layout
+      [:div.main-logo i/logo-icon]
+      [:div.left-bar]
+      [:div.settings-content
        [:& header {:section section}]
        (case section
          :settings-profile (mf/element profile-page)
-       :settings-password (mf/element password-page))]))
+         :settings-password (mf/element password-page))]]]))
 
 
 

frontend/src/uxbox/main/ui/settings/header.cljs

@@ -2,8 +2,7 @@
 ;; License, v. 2.0. If a copy of the MPL was not distributed with this
 ;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
 ;;
-;; Copyright (c) 2015-2017 Andrey Antukh <niwi@niwi.nz>
+;; Copyright (c) 2020 UXBOX Labs SL
-;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 (ns uxbox.main.ui.settings.header
   (:require
@@ -15,25 +14,18 @@
    [uxbox.util.i18n :as i18n :refer [tr t]]
    [uxbox.util.router :as rt]))
 
-(mf/defc header-link
-  [{:keys [section content] :as props}]
-  (let [on-click #(st/emit! (rt/nav section))]
-    [:a {:on-click on-click} content]))
-
 (mf/defc header
   [{:keys [section] :as props}]
   (let [profile? (= section :settings-profile)
-        password? (= section :settings-password)]
+        password? (= section :settings-password)
-    [:header#main-bar.main-bar
+        locale (i18n/use-locale)]
-     [:div.main-logo
+    [:header.main-bar
-      [:& header-link {:section :dashboard-projects
+     [:nav.library-header-navigation
-                       :content i/logo}]]
+      [:a.library-header-navigation-item
-     [:ul.main-nav
+       {:class (when profile? "current")
-      [:li {:class (when profile? "current")}
+        :on-click #(st/emit! (rt/nav :settings-profile))}
-       [:& header-link {:section :settings-profile
+       (t locale "settings.profile")]
-                        :content (tr "settings.profile")}]]
+      [:a.library-header-navigation-item
-      [:li {:class (when password? "current")}
+       {:class (when password? "current")
-       [:& header-link {:section :settings-password
+        :on-click #(st/emit! (rt/nav :settings-password))}
-                        :content (tr "settings.password")}]]]
+       (t locale "settings.password")]]]))
-     #_[:& user]]))
-

frontend/src/uxbox/main/ui/settings/password.cljs

@@ -105,6 +105,5 @@
 
 (mf/defc password-page
   [props]
-  [:section.dashboard-content.user-settings
+  [:section.user-settings-page
-   [:section.user-settings-content
+   [:& password-form]])
-    [:& password-form]]])

frontend/src/uxbox/main/ui/settings/profile.cljs

@@ -130,8 +130,7 @@
 
 (mf/defc profile-page
   []
-  [:section.dashboard-content.user-settings
+  [:section.user-settings-page
-   [:section.user-settings-content
    [:span.user-settings-label (tr "settings.profile.your-avatar")]
    [:& profile-photo-form]
-    [:& profile-form]]])
+   [:& profile-form]])