From d770b01e36da00f74995c9cddb334d95e9aa9f89 Mon Sep 17 00:00:00 2001
From: jesusbotella <jesus.botella@gmail.com>
Date: Mon, 22 Oct 2018 09:51:04 +0200
Subject: [PATCH] Refactor styles and some other things

---
 .../stylesheets/new-dashboard/_reset.scss     |   1 +
 .../new-dashboard/_typography.scss            |   6 +
 .../stylesheets/new-dashboard}/main.scss      |   2 +-
 .../new-dashboard/overrides/_dropdown.scss    |   4 -
 .../stylesheets/new-dashboard}/variables.scss |   0
 lib/assets/javascripts/new-dashboard/App.vue  |   4 +-
 .../NavigationBar/NavigationBar.vue           | 118 +++++++++---------
 .../components/NavigationBar/UserDropdown.vue |   6 +-
 lib/assets/javascripts/new-dashboard/main.js  |   2 -
 .../javascripts/new-dashboard/router/index.js |   8 +-
 webpack/common/alias.js                       |   1 +
 webpack/v4/entryPoints.js                     |   1 +
 12 files changed, 79 insertions(+), 74 deletions(-)
 rename lib/assets/javascripts/new-dashboard/styles/reset.scss => assets/stylesheets/new-dashboard/_reset.scss (97%)
 rename lib/assets/javascripts/new-dashboard/styles/typography.scss => assets/stylesheets/new-dashboard/_typography.scss (80%)
 rename {lib/assets/javascripts/new-dashboard/styles => assets/stylesheets/new-dashboard}/main.scss (67%)
 rename lib/assets/javascripts/new-dashboard/styles/borrar.scss => assets/stylesheets/new-dashboard/overrides/_dropdown.scss (55%)
 rename {lib/assets/javascripts/new-dashboard/styles => assets/stylesheets/new-dashboard}/variables.scss (100%)

diff --git a/lib/assets/javascripts/new-dashboard/styles/reset.scss b/assets/stylesheets/new-dashboard/_reset.scss
similarity index 97%
rename from lib/assets/javascripts/new-dashboard/styles/reset.scss
rename to assets/stylesheets/new-dashboard/_reset.scss
index 6b353b4cff..0606dcb77d 100644
--- a/lib/assets/javascripts/new-dashboard/styles/reset.scss
+++ b/assets/stylesheets/new-dashboard/_reset.scss
@@ -3,6 +3,7 @@
    License: none (public domain)
 */
 
+/* stylelint-disable */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
diff --git a/lib/assets/javascripts/new-dashboard/styles/typography.scss b/assets/stylesheets/new-dashboard/_typography.scss
similarity index 80%
rename from lib/assets/javascripts/new-dashboard/styles/typography.scss
rename to assets/stylesheets/new-dashboard/_typography.scss
index ecd985f664..e481249590 100644
--- a/lib/assets/javascripts/new-dashboard/styles/typography.scss
+++ b/assets/stylesheets/new-dashboard/_typography.scss
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600|Open+Sans:400,600');
+
 .text {
   font-family: 'Open Sans', sans-serif;
 }
@@ -44,3 +46,7 @@
 .letter-spacing {
   letter-spacing: 1px;
 }
+
+.is-txtWhite {
+  color: #FFF;
+}
diff --git a/lib/assets/javascripts/new-dashboard/styles/main.scss b/assets/stylesheets/new-dashboard/main.scss
similarity index 67%
rename from lib/assets/javascripts/new-dashboard/styles/main.scss
rename to assets/stylesheets/new-dashboard/main.scss
index 0652ed409d..d30a013f18 100644
--- a/lib/assets/javascripts/new-dashboard/styles/main.scss
+++ b/assets/stylesheets/new-dashboard/main.scss
@@ -1,4 +1,4 @@
 @import './variables';
 @import './reset';
 @import './typography';
-@import './borrar';
+@import './overrides/dropdown';
diff --git a/lib/assets/javascripts/new-dashboard/styles/borrar.scss b/assets/stylesheets/new-dashboard/overrides/_dropdown.scss
similarity index 55%
rename from lib/assets/javascripts/new-dashboard/styles/borrar.scss
rename to assets/stylesheets/new-dashboard/overrides/_dropdown.scss
index 9858736a41..475ec031cc 100644
--- a/lib/assets/javascripts/new-dashboard/styles/borrar.scss
+++ b/assets/stylesheets/new-dashboard/overrides/_dropdown.scss
@@ -1,7 +1,3 @@
-.is-txtWhite {
-  color: #FFF;
-}
-
 .Dropdown {
   top: 48px;
   right: 1px;
diff --git a/lib/assets/javascripts/new-dashboard/styles/variables.scss b/assets/stylesheets/new-dashboard/variables.scss
similarity index 100%
rename from lib/assets/javascripts/new-dashboard/styles/variables.scss
rename to assets/stylesheets/new-dashboard/variables.scss
diff --git a/lib/assets/javascripts/new-dashboard/App.vue b/lib/assets/javascripts/new-dashboard/App.vue
index c7a0d1c425..1915b9dd0d 100644
--- a/lib/assets/javascripts/new-dashboard/App.vue
+++ b/lib/assets/javascripts/new-dashboard/App.vue
@@ -23,8 +23,8 @@ export default {
 
 <style>
 #app {
-  font-family: 'Montserrat', 'Roboto', Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
+  font-family: 'Montserrat', 'Open Sans', Arial, sans-serif;
+  -webkit-font-smoothing: subpixel-antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
diff --git a/lib/assets/javascripts/new-dashboard/components/NavigationBar/NavigationBar.vue b/lib/assets/javascripts/new-dashboard/components/NavigationBar/NavigationBar.vue
index 02348787da..b416deb260 100644
--- a/lib/assets/javascripts/new-dashboard/components/NavigationBar/NavigationBar.vue
+++ b/lib/assets/javascripts/new-dashboard/components/NavigationBar/NavigationBar.vue
@@ -75,30 +75,30 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-@import 'new-dashboard/styles/variables';
+@import 'stylesheets/new-dashboard/variables';
 
 .navbar {
-    width: 100%;
-    padding: 0px 64px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background-color: $primaryColor;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0 64px;
+  background-color: $primaryColor;
 }
 
 .navbar-elementsContainer {
-    display: flex;
-    align-items: center;
-    margin: 0px;
-    padding: 0;
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding: 0;
 }
 
 .navbar-elementItem {
-  padding: 20px 0px 16px 0px;
-  margin-right: 34px;
-  border-bottom: 4px solid transparent;
   display: flex;
   align-items: center;
+  margin-right: 34px;
+  padding: 20px 0 16px;
+  border-bottom: 4px solid transparent;
 
   &.is-active {
     border-color: $white;
@@ -106,67 +106,67 @@ export default {
     .navbar-iconFill {
       fill: #FFF;
     }
-  }
 
-  &:last-child {
-    margin-right: 0;
+    .navbar-iconNegativeFill {
+      fill: transparent;
+    }
   }
 }
 
-.navbar-icon{
-    margin-right: 8px;
+.navbar-icon {
+  margin-right: 8px;
 }
 
-.navbar-imagotype{
-    position: absolute;
-    height: 24px;
-    width: 24px;
-    margin-left: 50%;
-    transform: translateX(-50%);
+.navbar-imagotype {
+  position: absolute;
+  left: 50%;
+  width: 24px;
+  height: 24px;
+  transform: translateX(-50%);
 }
 
 .navbar-search {
-    margin: 0;
-    input {
-        width: 134px;
-        height: 36px;
-        background-color: #fff;
-        border-radius: 18px;
-        border: 0px;
-        padding: 0 4px 0 38px;
-        background-image: url("../../assets/icons/navbar/loupe.svg");
-        background-repeat: no-repeat;
-        background-position: 16px center;
-        transition: width .3s cubic-bezier(.4,.01,.165,.99);
-        &::placeholder {
-            color: $textColor-light;
-        }
-        &:focus {
-            width: 280px;
-            outline: none;
-        }
+  margin: 0;
+
+  input {
+    width: 134px;
+    height: 36px;
+    padding: 0 4px 0 38px;
+    transition: width 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
+    border: 0;
+    border-radius: 18px;
+    background-color: #FFF;
+    background-image: url("../../assets/icons/navbar/loupe.svg");
+    background-repeat: no-repeat;
+    background-position: 16px center;
+
+    &::placeholder {
+      color: $textColor-light;
+    }
+
+    &:focus {
+      width: 280px;
+      outline: none;
     }
+  }
 }
 
 .navbar-user {
   position: relative;
-
-  .Dropdown {
-    display: block;
-  }
 }
 
 .navbar-avatar {
-    height: 36px;
-    width: 36px;
-    background-size: cover;
-    overflow: hidden;
-    background-color: $textColor-light;
-    border-radius: 50%;
-    display: flex;
-    margin-left: 30px;
-    &:hover{
-        cursor: pointer;
-    }
+  display: flex;
+  width: 36px;
+  height: 36px;
+  margin-left: 30px;
+  overflow: hidden;
+  border-radius: 50%;
+  background-color: $textColor-light;
+  background-size: cover;
+
+  &:hover {
+    cursor: pointer;
+  }
 }
 </style>
diff --git a/lib/assets/javascripts/new-dashboard/components/NavigationBar/UserDropdown.vue b/lib/assets/javascripts/new-dashboard/components/NavigationBar/UserDropdown.vue
index eaf3d3d843..b001308093 100644
--- a/lib/assets/javascripts/new-dashboard/components/NavigationBar/UserDropdown.vue
+++ b/lib/assets/javascripts/new-dashboard/components/NavigationBar/UserDropdown.vue
@@ -36,14 +36,16 @@ export default {
     },
 
     show: function () {
-      this.$dropdownView = this.renderView();
+      if (!this.$dropdownView) {
+        this.$dropdownView = this.renderView();
+      }
+
       this.$dropdownView.show();
       this.isDropdownOpen = true;
     },
 
     hide: function () {
       this.$dropdownView.hide();
-      this.$dropdownView.clean();
       this.isDropdownOpen = false;
     },
 
diff --git a/lib/assets/javascripts/new-dashboard/main.js b/lib/assets/javascripts/new-dashboard/main.js
index 51e2b87620..ffedc411a4 100644
--- a/lib/assets/javascripts/new-dashboard/main.js
+++ b/lib/assets/javascripts/new-dashboard/main.js
@@ -3,8 +3,6 @@ import App from './App';
 import router from './router';
 import store from './store';
 
-import './styles/main.scss';
-
 Vue.config.productionTip = false;
 
 /* eslint-disable no-new */
diff --git a/lib/assets/javascripts/new-dashboard/router/index.js b/lib/assets/javascripts/new-dashboard/router/index.js
index 6c4aa4d400..51ecc607b4 100644
--- a/lib/assets/javascripts/new-dashboard/router/index.js
+++ b/lib/assets/javascripts/new-dashboard/router/index.js
@@ -25,7 +25,7 @@ const router = new Router({
       name: 'home',
       component: Home,
       meta: {
-        title: route => 'Home | CARTO'
+        title: () => 'Home | CARTO'
       }
     },
     {
@@ -33,7 +33,7 @@ const router = new Router({
       name: 'solutions',
       component: Solutions,
       meta: {
-        title: route => 'Solutions | CARTO'
+        title: () => 'Solutions | CARTO'
       }
     },
     {
@@ -41,7 +41,7 @@ const router = new Router({
       name: 'maps',
       component: Maps,
       meta: {
-        title: route => 'Maps | CARTO'
+        title: () => 'Maps | CARTO'
       }
     },
     {
@@ -49,7 +49,7 @@ const router = new Router({
       name: 'data',
       component: Data,
       meta: {
-        title: route => 'Data | CARTO'
+        title: () => 'Data | CARTO'
       }
     }
   ]
diff --git a/webpack/common/alias.js b/webpack/common/alias.js
index 1e0ff856a6..030273f2c2 100644
--- a/webpack/common/alias.js
+++ b/webpack/common/alias.js
@@ -2,6 +2,7 @@ const { resolve } = require('path');
 
 module.exports = {
   'fixtures': resolve(resolve('.'), 'lib/assets/test/spec/fixtures'),
+  'stylesheets': resolve(resolve('.'), 'assets/stylesheets'),
   'backbone/core-view$': resolve(resolve('.'), 'lib/assets/javascripts/vendor/backbone/core-view.js'),
   'backbone/core-model$': resolve(resolve('.'), 'lib/assets/javascripts/vendor/backbone/core-model.js'),
   'jquery-ui$': resolve(resolve('.'), 'lib/assets/javascripts/vendor/jquery-ui.js'),
diff --git a/webpack/v4/entryPoints.js b/webpack/v4/entryPoints.js
index 8df967ac1c..93b9650e31 100644
--- a/webpack/v4/entryPoints.js
+++ b/webpack/v4/entryPoints.js
@@ -29,6 +29,7 @@ module.exports = {
   new_dashboard: [
     rootDir('lib/assets/javascripts/new-dashboard/main.js'),
     ...glob.sync(rootDir('assets/stylesheets/dashboard/*.scss')),
+    ...glob.sync(rootDir('assets/stylesheets/new-dashboard/main.scss')),
     rootDir('assets/stylesheets/editor-3/_scroll-view.scss'),
     rootDir('node_modules/internal-carto.js/themes/scss/entry.scss')
   ],