Refactor styles and some other things

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,

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;
+}

assets/stylesheets/new-dashboard/main.scss

@@ -1,4 +1,4 @@
 @import './variables';
 @import './reset';
 @import './typography';
-@import './borrar';
+@import './overrides/dropdown';

assets/stylesheets/new-dashboard/overrides/_dropdown.scss

@@ -1,7 +1,3 @@
-.is-txtWhite {
-  color: #FFF;
-}
-
 .Dropdown {
   top: 48px;
   right: 1px;

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;
 }
 

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>

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;
     },
 

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 */

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'
       }
     }
   ]

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'),

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')
   ],