.gitlab/merge_request_templates/default.md

+### Summary
+
+(What is the Merge request intending to do, in plain language)
+
+(Be sure to associate any related issues or merge requests)
+
+### Steps to test
+
+(Steps to demonstrate merge achieves goal)
+(Include any platform specific directions)
+
+### Estimated Regression Scope
+
+(What features do these changes effect in your estimation?)
+

cypress/integration/pro/page.spec.js

@@ -3,32 +3,38 @@
  * @desc E2E testing for Minds Pro's pages.
  */
 context('Pro Page', () => {
-  if (Cypress.env().pro_password) { // required to run tests against pro user only.  
+  if (Cypress.env().pro_password) {
+    // required to run tests against pro user only.
     const topBar = '.m-proChannel__topbar';
 
     let categories = [
       { label: 'Technology', tag: '#technology' },
       { label: 'Food', tag: '#food' },
-      { label: 'News', tag: '#news' }
+      { label: 'News', tag: '#news' },
     ];
 
     let footerLinks = [
       { label: 'Minds', link: 'https://www.minds.com/' },
       { label: 'Careers', link: 'https://www.minds.com/careers' },
     ];
-    
+
     const proButton = 'data-minds-sidebar-admin-pro-button';
 
     function resetSettings() {
       cy.visit(`/pro/settings`);
 
-      cy.route("POST", "**/api/v2/pro/settings").as("settings");
+      cy.route('POST', '**/api/v2/pro/settings').as('settings');
 
-      cy.get('#title').focus().clear().type('Title');
-      cy.get('#headline').focus().clear().type('This is a headline');
+      cy.get('#title')
+        .focus()
+        .clear()
+        .type('Title');
+      cy.get('#headline')
+        .focus()
+        .clear()
+        .type('This is a headline');
 
-      cy.contains('Hashtags')
-        .click();
+      cy.contains('Hashtags').click();
 
       // remove all hashtags
       removeInputs();
@@ -37,8 +43,7 @@ context('Pro Page', () => {
         let cat = categories[i];
         addTag(cat.label, cat.tag, i);
       }
-      cy.contains('Footer')
-        .click();
+      cy.contains('Footer').click();
 
       cy.get('#footer_text')
         .clear()
@@ -54,30 +59,36 @@ context('Pro Page', () => {
 
       cy.contains('Save')
         .click()
-        .wait('@settings').then((xhr) => {
+        .wait('@settings')
+        .then(xhr => {
           expect(xhr.status).to.equal(200);
           expect(xhr.response.body).to.deep.equal({ status: 'success' });
-        }
-      );
+        });
     }
 
     function removeInputs() {
-      cy.get('.m-draggableList__list .m-proSettings__field .m-proSettings__flexInputs').should('be.visible').within($el => {
-        for (let i = $el.length - 1; i >= 0; i--) { // flexInput. Start from the last one
-          let c = $el[i];
-          for (let j = 0; j < c.children.length; j++) { // inputs and the X button
-            let cc = c.children[j];
-            if (cc.nodeName === 'I') { // if it's the X button, click on it
-              cy.wrap(cc).click();
+      cy.get(
+        '.m-draggableList__list .m-proSettings__field .m-proSettings__dragDropRow--input'
+      )
+        .should('be.visible')
+        .within($el => {
+          for (let i = $el.length - 1; i >= 0; i--) {
+            // flexInput. Start from the last one
+            let c = $el[i];
+            for (let j = 0; j < c.children.length; j++) {
+              // inputs and the X button
+              let cc = c.children[j];
+              if (cc.nodeName === 'I') {
+                // if it's the X button, click on it
+                cy.wrap(cc).click();
+              }
             }
           }
-        }
-      });
+        });
     }
 
     function addTag(label, tag, index) {
-      cy.contains('+ Add Tag')
-        .click();
+      cy.contains('+ Add Tag').click();
 
       cy.get(`#tag-label-${index}`)
         .clear()
@@ -89,8 +100,7 @@ context('Pro Page', () => {
     }
 
     function addFooterLink(label, link, index) {
-      cy.contains('Add Link')
-        .click();
+      cy.contains('Add Link').click();
 
       cy.get(`#footer_link-title-${index}`)
         .clear()
@@ -116,42 +126,51 @@ context('Pro Page', () => {
     });
 
     it('should load the feed tab', () => {
-      cy.route("GET", "**/api/v2/pro/content/*/activities/top**").as("activities");
+      cy.route('GET', '**/api/v2/pro/content/*/activities/top**').as(
+        'activities'
+      );
       cy.contains('Feed')
         .click()
-        .wait('@activities').then((xhr) => {
-        expect(xhr.status).to.equal(200);
-      });
-    })
+        .wait('@activities')
+        .then(xhr => {
+          expect(xhr.status).to.equal(200);
+        });
+    });
 
     it('should load the videos tab', () => {
-      cy.route("GET", "**/api/v2/pro/content/*/videos/top**").as("videos");
+      cy.route('GET', '**/api/v2/pro/content/*/videos/top**').as('videos');
       cy.contains('Videos')
         .click()
-        .wait('@videos').then((xhr) => {
-        expect(xhr.status).to.equal(200);
-      });
-    })
+        .wait('@videos')
+        .then(xhr => {
+          expect(xhr.status).to.equal(200);
+        });
+    });
 
     it('should load the images tab', () => {
-      cy.route("GET", "**/api/v2/pro/content/*/images/top**").as("images");
+      cy.route('GET', '**/api/v2/pro/content/*/images/top**').as('images');
       cy.contains('Images')
         .click()
-        .wait('@images').then((xhr) => {
-        expect(xhr.status).to.equal(200);
-      });
+        .wait('@images')
+        .then(xhr => {
+          expect(xhr.status).to.equal(200);
+        });
 
       // should have sub-categories
-      cy.get('m-pro--channel--categories > .m-proChannel__category').each(($el, $index) => {
-        let c = categories.slice(0);
-        c.unshift({ label: 'All', tag: '#all' });
-        expect($el.text()).to.contain(c[$index].label);
-      });
+      cy.get('m-pro--channel--categories > .m-proChannel__category').each(
+        ($el, $index) => {
+          let c = categories.slice(0);
+          c.unshift({ label: 'All', tag: '#all' });
+          expect($el.text()).to.contain(c[$index].label);
+        }
+      );
 
       cy.get('m-pro--channel .m-overlay-modal').should('not.be.visible');
 
       // click on tile
-      cy.get('.m-proChannelListContent__list li:first-child m-pro--channel-tile').click();
+      cy.get(
+        '.m-proChannelListContent__list li:first-child m-pro--channel-tile'
+      ).click();
       cy.wait(200);
 
       // media modal should appear
@@ -159,35 +178,41 @@ context('Pro Page', () => {
 
       // close media modal
       cy.get('m-pro--channel .m-overlay-modal--close').click();
-    })
+    });
 
     it('should load the articles tab', () => {
-      cy.route("GET", "**/api/v2/pro/content/*/blogs/top**").as("blogs");
+      cy.route('GET', '**/api/v2/pro/content/*/blogs/top**').as('blogs');
       cy.contains('Articles')
         .click()
-        .wait('@blogs').then((xhr) => {
-        expect(xhr.status).to.equal(200);
-      });
-    })
+        .wait('@blogs')
+        .then(xhr => {
+          expect(xhr.status).to.equal(200);
+        });
+    });
 
     it('should load the groups tab', () => {
-      cy.route("GET", "**/api/v2/pro/content/*/groups/top**").as("groups");
+      cy.route('GET', '**/api/v2/pro/content/*/groups/top**').as('groups');
       cy.contains('Groups')
         .click()
-        .wait('@groups').then((xhr) => {
-        expect(xhr.status).to.equal(200);
-      });
-    })
+        .wait('@groups')
+        .then(xhr => {
+          expect(xhr.status).to.equal(200);
+        });
+    });
 
     it('should have a footer', () => {
       // should have a footer text
       cy.get('.m-proChannelFooter__text').contains('This is the footer text');
 
       // should have footer links
-      cy.get('.m-proChannel__footer .m-proChannelFooter .m-proChannelFooter__link').should('be.visible').each(($el, $index) => {
-        expect($el.text()).to.contain(footerLinks[$index].label);
-        expect($el.attr('href')).to.contain(footerLinks[$index].link);
-      });
-    })
+      cy.get(
+        '.m-proChannel__footer .m-proChannelFooter .m-proChannelFooter__link'
+      )
+        .should('be.visible')
+        .each(($el, $index) => {
+          expect($el.text()).to.contain(footerLinks[$index].label);
+          expect($el.attr('href')).to.contain(footerLinks[$index].link);
+        });
+    });
   }
-})
+});

cypress/integration/pro/settings.spec.js

@@ -3,30 +3,31 @@
  * @desc E2E testing for Minds Pro's settings.
  */
 context('Pro Settings', () => {
-  if (Cypress.env().pro_password) { // required to run tests against pro user only.  
+  if (Cypress.env().pro_password) {
+    // required to run tests against pro user only.
     const title = '#title';
     const headline = '#headline';
-    const previewButton = '.m-proSettings__previewBtn';
     const activityContainer = 'minds-activity';
     const footerText = '#footer_text';
 
     const theme = {
-      primaryColor: '#primary_color', 
-      plainBackgroundColor: '#plain_background_color',
+      textColor: '#textColor',
+      primaryColor: '#primaryColor',
+      plainBackgroundColor: '#plainBgColor',
       schemeLight: '#scheme_light',
       schemeDark: '#scheme_dark',
       aspectRatio: {
-        169: '#tile_ratio_16\:9', //  16:9
-        1610: '#tile_ratio_16\:10', // 16:10
-        43: '#tile_ratio_4\:3', // 4:3
-        11: '#tile_ratio_1\:1' , // 1:1
+        169: '#tile_ratio_16:9', //  16:9
+        1610: '#tile_ratio_16:10', // 16:10
+        43: '#tile_ratio_4:3', // 4:3
+        11: '#tile_ratio_1:1', // 1:1
       },
-    }
+    };
 
     const hashtags = {
-      labelInput0: '#tag-label-0', 
+      labelInput0: '#tag-label-0',
       hashtagInput0: '#tag-tag-0',
-      labelInput1: '#tag-label-1', 
+      labelInput1: '#tag-label-1',
       hashtagInput1: '#tag-tag-1',
       label1: 'label1',
       label2: 'label2',
@@ -34,40 +35,47 @@ context('Pro Settings', () => {
       hashtag1: '#hashtag1',
       hashtag2: '#hashtag2',
       hashtag3: '#hashtag3',
-    }
+    };
 
     const footer = {
       hrefInput: `#footer_link-href-0`,
       titleInput: `#footer_link-title-0`,
-    }
+    };
 
     const strings = {
-      title: "Minds Pro E2E",
-      headline: "This headline is a test",
-      footer: "This is a footer",
-      footerTitle: "Minds",
+      title: 'Minds Pro E2E',
+      headline: 'This headline is a test',
+      footer: 'This is a footer',
+      footerTitle: 'Minds',
       footerHref: 'https://www.minds.com/',
-    }
+    };
 
     before(() => {
       cy.login(true, Cypress.env().pro_username, Cypress.env().pro_password);
     });
 
     after(() => {
-      cy.visit("/pro/settings")
+      // cy.visit(`/${Cypress.env().username}`);
+      cy.visit('/pro/' + Cypress.env().pro_username + '/settings/hashtags')
         .location('pathname')
-        .should('eq', '/pro/settings');
+        .should(
+          'eq',
+          '/pro/' + Cypress.env().pro_username + '/settings/hashtags'
+        );
       clearHashtags();
     });
 
-    beforeEach(()=> {
+    beforeEach(() => {
       cy.preserveCookies();
       cy.server();
-      cy.route("POST", "**/api/v2/pro/settings").as("settings");
+      cy.route('POST', '**/api/v2/pro/settings').as('settings');
 
-      cy.visit("/pro/settings")
+      cy.visit('/pro/' + Cypress.env().pro_username + '/settings/general')
         .location('pathname')
-        .should('eq', '/pro/settings');
+        .should(
+          'eq',
+          '/pro/' + Cypress.env().pro_username + '/settings/general'
+        );
     });
 
     it('should update the title and headline', () => {
@@ -84,40 +92,36 @@ context('Pro Settings', () => {
 
       saveAndPreview();
       //check tab title.
-      cy.title()
-        .should('eq', strings.title+' - '+strings.headline+" | Minds"); 
+      cy.title().should(
+        'eq',
+        strings.title + ' - ' + strings.headline + ' | Minds'
+      );
     });
 
     // Need to find a way around the color input in Cypress.
 
     it('should allow the user to set a dark theme for posts', () => {
-      cy.contains('Theme')
-        .click();
+      cy.contains('Theme').click();
 
-      cy.get(theme.schemeDark)
-        .click();
+      cy.get(theme.schemeDark).click();
 
       saveAndPreview();
-      
-      cy.contains('Feed')
-        .click();
+
+      cy.contains('Feed').click();
 
       cy.get(activityContainer)
-      .should('have.css', 'background-color')
-      .and('eq', 'rgb(35, 35, 35)');
+        .should('have.css', 'background-color')
+        .and('eq', 'rgb(35, 35, 35)');
     });
 
     it('should allow the user to set a light theme for posts', () => {
-      cy.contains('Theme')
-        .click();
+      cy.contains('Theme').click();
 
-      cy.get(theme.schemeLight)
-        .click();
+      cy.get(theme.schemeLight).click();
 
       saveAndPreview();
-      
-      cy.contains('Feed')
-        .click();
+
+      cy.contains('Feed').click();
 
       cy.get(activityContainer)
         .should('have.css', 'background-color')
@@ -125,12 +129,10 @@ context('Pro Settings', () => {
     });
 
     it('should allow the user to set category hashtags', () => {
-      cy.contains('Hashtags')
-        .click();
+      cy.contains('Hashtags').click();
+
+      cy.contains('Add').click();
 
-      cy.contains('+ Add Tag')
-        .click();
-      
       cy.get(hashtags.labelInput0)
         .clear()
         .type(hashtags.label1);
@@ -138,10 +140,9 @@ context('Pro Settings', () => {
       cy.get(hashtags.hashtagInput0)
         .clear()
         .type(hashtags.hashtag1);
-      
-      cy.contains('+ Add Tag')
-        .click();
-      
+
+      cy.contains('Add').click();
+
       cy.get(hashtags.labelInput1)
         .first()
         .clear()
@@ -151,7 +152,7 @@ context('Pro Settings', () => {
         .first()
         .clear()
         .type(hashtags.hashtag2);
-    
+
       saveAndPreview();
 
       //check the labels are present and clickable.
@@ -160,20 +161,18 @@ context('Pro Settings', () => {
     });
 
     it('should allow the user to set footer', () => {
-      cy.contains('Footer')
-        .click();
+      cy.contains('Footer').click();
 
       cy.get(footerText)
         .clear()
         .type(strings.footer);
-      
-      cy.contains('Add Link')
-        .click();
-      
+
+      cy.contains('Add Link').click();
+
       cy.get(footer.hrefInput)
         .clear()
         .type(strings.footerHref);
-      
+
       cy.get(footer.titleInput)
         .clear()
         .type(strings.footerTitle);
@@ -189,50 +188,45 @@ context('Pro Settings', () => {
     function saveAndPreview() {
       //save and await response
       cy.contains('Save')
-        .click() 
-        .wait('@settings').then((xhr) => {
+        .click()
+        .wait('@settings')
+        .then(xhr => {
           expect(xhr.status).to.equal(200);
           expect(xhr.response.body).to.deep.equal({ status: 'success' });
         });
 
       //go to pro page
-      cy.get(previewButton)
-        .click();
+      cy.contains('View Pro Channel').click();
     }
 
     function clearHashtags() {
-      cy.contains('Hashtags')
-        .click();
-    
-      cy.contains('+ Add Tag')
-        .click();
-      
-      cy.contains('clear')
-        .click({multiple: true});
-        saveAndPreview();
+      cy.contains('Hashtags').click();
+
+      cy.contains('Add').click();
+
+      cy.contains('clear').click({ multiple: true });
+      saveAndPreview();
     }
 
-    // 
+    //
     // it.only('should update the theme', () => {
     //   // nav to theme tab
     //   cy.contains('Theme')
     //     .click();
-      
+
     //   cy.get(theme.plainBackgroundColor).then(elem => {
     //     elem.val('#00dd00');
     //         //save and await response
     //     cy.contains('Save')
-    //     .click() 
+    //     .click()
     //     .wait('@settings').then((xhr) => {
     //       expect(xhr.status).to.equal(200);
     //       expect(xhr.response.body).to.deep.equal({ status: 'success' });
     //     });
 
     //   //go to pro page
-    //   cy.get(previewButton)
-    //     .click();
-    //     });
+    // cy.contains('View Pro Channel').click();
 
     // })
   }
-})
+});

package-lock.json

@@ -1985,6 +1985,12 @@
       "integrity": "sha512-4GbNCDs98uHCT/OMv40qQC/OpoPbYn9XdXeTiFwHBBFO6eJhYEPUu2zDKirXSbHlvDV8oZ9l8EQ+HrEx/YS9DQ==",
       "dev": true
     },
+    "@types/sizzle": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.2.tgz",
+      "integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==",
+      "dev": true
+    },
     "@types/source-list-map": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
@@ -5308,13 +5314,14 @@
       "dev": true
     },
     "cypress": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-3.4.1.tgz",
-      "integrity": "sha512-1HBS7t9XXzkt6QHbwfirWYty8vzxNMawGj1yI+Fu6C3/VZJ8UtUngMW6layqwYZzLTZV8tiDpdCNBypn78V4Dg==",
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-3.6.1.tgz",
+      "integrity": "sha512-6n0oqENdz/oQ7EJ6IgESNb2M7Bo/70qX9jSJsAziJTC3kICfEMmJUlrAnP9bn+ut24MlXQST5nRXhUP5nRIx6A==",
       "dev": true,
       "requires": {
         "@cypress/listr-verbose-renderer": "0.4.1",
         "@cypress/xvfb": "1.2.4",
+        "@types/sizzle": "2.3.2",
         "arch": "2.1.1",
         "bluebird": "3.5.0",
         "cachedir": "1.3.0",
@@ -5341,6 +5348,7 @@
         "request-progress": "3.0.0",
         "supports-color": "5.5.0",
         "tmp": "0.1.0",
+        "untildify": "3.0.3",
         "url": "0.11.0",
         "yauzl": "2.10.0"
       },
@@ -19068,6 +19076,12 @@
         }
       }
     },
+    "untildify": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/untildify/-/untildify-3.0.3.tgz",
+      "integrity": "sha512-iSk/J8efr8uPT/Z4eSUywnqyrQU7DSdMfdqK4iWEaUVVmcP5JcnpRqmVMwcwcnmI1ATFNgC5V90u09tBynNFKA==",
+      "dev": true
+    },
     "upath": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/upath/-/upath-1.1.0.tgz",

package.json

@@ -64,7 +64,7 @@
     "@types/jasminewd2": "~2.0.4",
     "@types/node": "~10.12.18",
     "codelyzer": "^4.5.0",
-    "cypress": "^3.4.1",
+    "cypress": "^3.6.1",
     "cypress-file-upload": "^3.3.3",
     "gulp": "~4.0.0",
     "gulp-autoprefixer": "^6.0.0",

src/app/app.component.html

-<ng-container *ngIf="!isProDomain">
-  <m-v2-topbar *mIfFeature="'top-feeds'; else legacyTopbar">
-    <ng-container search>
-      <m-search--bar [defaultSizes]="false"></m-search--bar>
-    </ng-container>
-
-    <ng-container icons>
-      <m-notifications--topbar-toggle
-        *ngIf="session.isLoggedIn()"
-      ></m-notifications--topbar-toggle>
-    </ng-container>
-  </m-v2-topbar>
-  <ng-template #legacyTopbar>
-    <m-topbar class="m-noshadow">
+<ng-container *ngIf="ready">
+  <ng-container *ngIf="!isProDomain">
+    <m-v2-topbar *mIfFeature="'top-feeds'; else legacyTopbar">
       <ng-container search>
-        <m-search--bar></m-search--bar>
+        <m-search--bar [defaultSizes]="false"></m-search--bar>
       </ng-container>
 
       <ng-container icons>
-        <m-notifications--topbar-toggle></m-notifications--topbar-toggle>
-        <m-wallet--topbar-toggle></m-wallet--topbar-toggle>
+        <m-notifications--topbar-toggle
+          *ngIf="session.isLoggedIn()"
+        ></m-notifications--topbar-toggle>
       </ng-container>
-    </m-topbar>
-  </ng-template>
+    </m-v2-topbar>
+    <ng-template #legacyTopbar>
+      <m-topbar class="m-noshadow">
+        <ng-container search>
+          <m-search--bar></m-search--bar>
+        </ng-container>
 
-  <m-sidebar--markers
+        <ng-container icons>
+          <m-notifications--topbar-toggle></m-notifications--topbar-toggle>
+          <m-wallet--topbar-toggle></m-wallet--topbar-toggle>
+        </ng-container>
+      </m-topbar>
+    </ng-template>
+
+    <m-sidebar--markers
+      [class.has-v2-navbar]="featuresService.has('top-feeds')"
+    ></m-sidebar--markers>
+  </ng-container>
+
+  <m-body
     [class.has-v2-navbar]="featuresService.has('top-feeds')"
-  ></m-sidebar--markers>
-</ng-container>
+    [class.is-pro-domain]="isProDomain"
+  >
+    <m-announcement [id]="'blockchain:sale'" *ngIf="false">
+      <span
+        class="m-blockchain--wallet-address-notice--action"
+        routerLink="/tokens"
+        i18n="@@BLOCKCHAIN__SALE__NOTICE"
+      >
+        The MINDS token is now live. Learn more here.
+      </span>
+    </m-announcement>
+    <m-blockchain--wallet-address-notice></m-blockchain--wallet-address-notice>
+    <router-outlet></router-outlet>
+  </m-body>
+
+  <m-messenger *ngIf="minds.LoggedIn && !isProDomain"></m-messenger>
+
+  <m-hovercard-popup></m-hovercard-popup>
 
-<m-body
-  [class.has-v2-navbar]="featuresService.has('top-feeds')"
-  [class.is-pro-domain]="isProDomain"
->
-  <m-announcement [id]="'blockchain:sale'" *ngIf="false">
-    <span
-      class="m-blockchain--wallet-address-notice--action"
-      routerLink="/tokens"
-      i18n="@@BLOCKCHAIN__SALE__NOTICE"
-    >
-      The MINDS token is now live. Learn more here.
-    </span>
-  </m-announcement>
-  <m-blockchain--wallet-address-notice></m-blockchain--wallet-address-notice>
-  <router-outlet></router-outlet>
-</m-body>
-
-<m-messenger *ngIf="minds.LoggedIn && !isProDomain"></m-messenger>
-
-<m-hovercard-popup></m-hovercard-popup>
-
-<m-overlay-modal></m-overlay-modal>
-<m--blockchain--transaction-overlay></m--blockchain--transaction-overlay>
-<m-modal--tos-updated *ngIf="session.isLoggedIn()"></m-modal--tos-updated>
-<m-juryDutySession__summons
-  *ngIf="session.isLoggedIn() && !isProDomain"
-></m-juryDutySession__summons>
-
-<m-modal-signup-on-scroll *ngIf="!isProDomain"></m-modal-signup-on-scroll>
-
-<m-channel--onboarding *ngIf="showOnboarding"></m-channel--onboarding>
-
-<m-cookies-notice *ngIf="!session.isLoggedIn()"> </m-cookies-notice>
+  <m-overlay-modal></m-overlay-modal>
+  <m--blockchain--transaction-overlay></m--blockchain--transaction-overlay>
+  <m-modal--tos-updated *ngIf="session.isLoggedIn()"></m-modal--tos-updated>
+  <m-juryDutySession__summons
+    *ngIf="session.isLoggedIn() && !isProDomain"
+  ></m-juryDutySession__summons>
+
+  <m-modal-signup-on-scroll *ngIf="!isProDomain"></m-modal-signup-on-scroll>
+
+  <m-channel--onboarding *ngIf="showOnboarding"></m-channel--onboarding>
+
+  <m-cookies-notice *ngIf="!session.isLoggedIn()"> </m-cookies-notice>
+</ng-container>

src/app/app.component.ts

-import { Component, HostBinding } from '@angular/core';
+import { ChangeDetectorRef, Component, HostBinding } from '@angular/core';
 
 import { NotificationService } from './modules/notifications/notification.service';
 import { AnalyticsService } from './services/analytics';
@@ -18,6 +18,7 @@ import { ThemeService } from './common/services/theme.service';
 import { BannedService } from './modules/report/banned/banned.service';
 import { DiagnosticsService } from './services/diagnostics.service';
 import { SiteService } from './common/services/site.service';
+import { SsoService } from './common/services/sso.service';
 import { Subscription } from 'rxjs';
 import { RouterHistoryService } from './common/services/router-history.service';
 import { PRO_DOMAIN_ROUTES } from './modules/pro/pro.module';
@@ -29,8 +30,11 @@ import { PRO_DOMAIN_ROUTES } from './modules/pro/pro.module';
 })
 export class Minds {
   name: string;
+
   minds = window.Minds;
 
+  ready: boolean = false;
+
   showOnboarding: boolean = false;
 
   showTOSModal: boolean = false;
@@ -57,7 +61,9 @@ export class Minds {
     private bannedService: BannedService,
     private diagnostics: DiagnosticsService,
     private routerHistoryService: RouterHistoryService,
-    private site: SiteService
+    private site: SiteService,
+    private sso: SsoService,
+    private cd: ChangeDetectorRef
   ) {
     this.name = 'Minds';
 
@@ -67,8 +73,29 @@ export class Minds {
   }
 
   async ngOnInit() {
-    this.diagnostics.setUser(this.minds.user);
-    this.diagnostics.listen(); // Listen for user changes
+    try {
+      this.diagnostics.setUser(this.minds.user);
+      this.diagnostics.listen(); // Listen for user changes
+
+      if (this.sso.isRequired()) {
+        await this.sso.connect();
+      }
+    } catch (e) {
+      console.error('ngOnInit()', e);
+    }
+
+    this.ready = true;
+    this.detectChanges();
+
+    try {
+      await this.initialize();
+    } catch (e) {
+      console.error('initialize()', e);
+    }
+  }
+
+  async initialize() {
+    this.blockListService.fetch();
 
     if (!this.site.isProDomain) {
       this.notificationService.getNotifications();
@@ -136,4 +163,9 @@ export class Minds {
   get isProDomain() {
     return this.site.isProDomain;
   }
+
+  detectChanges() {
+    this.cd.markForCheck();
+    this.cd.detectChanges();
+  }
 }

src/app/common/api/client.service.ts

 import { Cookie } from '../../services/cookie';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { environment } from '../../../environments/environment';
-import { Location } from '@angular/common';
-import { SiteService } from '../services/site.service';
 
 /**
  * API Class
  */
 export class MindsHttpClient {
   base: string = '/';
-  origin: string = '';
   cookie: Cookie = new Cookie();
 
-  static _(http: HttpClient, site: SiteService) {
-    return new MindsHttpClient(http, site);
+  static _(http: HttpClient) {
+    return new MindsHttpClient(http);
   }
 
-  constructor(public http: HttpClient, protected site: SiteService) {
-    if (this.site.isProDomain) {
-      this.base = window.Minds.site_url;
-      this.origin = document.location.host;
-    }
-  }
+  constructor(public http: HttpClient) {}
 
   /**
    * Return a GET request
@@ -81,22 +73,11 @@ export class MindsHttpClient {
       'X-VERSION': environment.version,
     };
 
-    if (this.origin) {
-      const PRO_XSRF_JWT = this.cookie.get('PRO-XSRF-JWT') || '';
-
-      headers['X-MINDS-ORIGIN'] = this.origin;
-      headers['X-PRO-XSRF-JWT'] = PRO_XSRF_JWT;
-    }
-
     const builtOptions = {
       headers: new HttpHeaders(headers),
       cache: true,
     };
 
-    if (this.origin) {
-      builtOptions['withCredentials'] = true;
-    }
-
     return Object.assign(options, builtOptions);
   }
 }

src/app/common/common.module.ts

@@ -122,6 +122,11 @@ import { DashboardLayoutComponent } from './components/dashboard-layout/dashboar
 import { ShadowboxLayoutComponent } from './components/shadowbox-layout/shadowbox-layout.component';
 import { ShadowboxHeaderComponent } from './components/shadowbox-header/shadowbox-header.component';
 import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'ng-pick-datetime';
+import { DropdownSelectorComponent } from './components/dropdown-selector/dropdown-selector.component';
+import { ShadowboxSubmitButtonComponent } from './components/shadowbox-submit-button/shadowbox-submit-button.component';
+import { FormDescriptorComponent } from './components/form-descriptor/form-descriptor.component';
+import { FormToastComponent } from './components/form-toast/form-toast.component';
+import { SsoService } from './services/sso.service';
 
 PlotlyModule.plotlyjs = PlotlyJS;
 
@@ -235,6 +240,10 @@ PlotlyModule.plotlyjs = PlotlyJS;
     DashboardLayoutComponent,
     ShadowboxLayoutComponent,
     ShadowboxHeaderComponent,
+    DropdownSelectorComponent,
+    FormDescriptorComponent,
+    FormToastComponent,
+    ShadowboxSubmitButtonComponent,
   ],
   exports: [
     MINDS_PIPES,
@@ -330,9 +339,14 @@ PlotlyModule.plotlyjs = PlotlyJS;
     PageLayoutComponent,
     DashboardLayoutComponent,
     ShadowboxLayoutComponent,
+    DropdownSelectorComponent,
+    FormDescriptorComponent,
+    FormToastComponent,
+    ShadowboxSubmitButtonComponent,
   ],
   providers: [
     SiteService,
+    SsoService,
     {
       provide: AttachmentService,
       useFactory: AttachmentService._,
@@ -348,7 +362,7 @@ PlotlyModule.plotlyjs = PlotlyJS;
     {
       provide: MindsHttpClient,
       useFactory: MindsHttpClient._,
-      deps: [HttpClient, SiteService],
+      deps: [HttpClient],
     },
     {
       provide: NSFWSelectorCreatorService,

src/app/common/components/avatar/avatar.ts

@@ -63,7 +63,7 @@ export class MindsAvatar {
 
     if (this.object.type !== 'user') {
       this.src = `${this.minds.cdn_url}fs/v1/avatars/${this.object.guid}/large/${this.object.icontime}`;
-    } else if (this.object.guid !== this.minds.user.guid) {
+    } else if (!this.minds.user || this.object.guid !== this.minds.user.guid) {
       this.src = `${this.minds.cdn_url}icon/${this.object.guid}/large/${this.object.icontime}`;
     }
   }
@@ -130,6 +130,6 @@ export class MindsAvatar {
    * @returns true if the object guid matches the currently logged in user guid
    */
   isOwnerAvatar(): boolean {
-    return this.object.guid === this.minds.user.guid;
+    return this.minds.user && this.object.guid === this.minds.user.guid;
   }
 }

src/app/common/components/chart-v2/chart-v2.component.ts

@@ -241,7 +241,7 @@ export class ChartV2Component implements OnInit, OnDestroy {
       margin: {
         t: this.isMini ? 0 : 16,
         b: this.isMini ? 0 : 80,
-        l: this.isMini ? 0 : 0,
+        l: 0,
         r: this.isMini ? 0 : 80,
         pad: 16,
       },
@@ -377,7 +377,7 @@ export class ChartV2Component implements OnInit, OnDestroy {
     return rows.map(row => {
       if (key === 'date') {
         return row[key].slice(0, 10);
-      } else if (this.segments[0].unit === 'usd') {
+      } else if (this.rawData.unit && this.rawData.unit === 'usd') {
         return row[key] / 100;
       } else {
         return row[key];

src/app/common/components/dashboard-layout/dashboard-layout.component.scss

@@ -15,6 +15,13 @@ m-dashboardLayout {
   position: relative;
   display: block;
   width: 100%;
+  a {
+    font-weight: 400;
+    text-decoration: none;
+    @include m-theme() {
+      color: themed($m-blue);
+    }
+  }
 }
 
 @media screen and (max-width: $min-tablet) {

src/app/common/components/dashboard-layout/dashboard-layout.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'm-dashboardLayout',
   templateUrl: './dashboard-layout.component.html',
 })
-export class DashboardLayoutComponent implements OnInit {
+export class DashboardLayoutComponent {
   constructor() {}
-
-  ngOnInit() {}
 }

src/app/common/components/date-selector/date-selector.component.scss

@@ -38,3 +38,11 @@
     }
   }
 }
+
+.m-tooltip--hidden {
+  .m-tooltip--bubble {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+  }
+}

src/app/common/components/date-selector/date-selector.component.ts

 import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 /**
- * Date picker / selector - can be adapted to add time.
+ * Date picker / selector.
  */
 @Component({
   moduleId: module.id,
   selector: 'm-date-selector',
   template: `
-    <label class="m-dateSelector__label" *ngIf="label">{{ label }}</label>
+    <label class="m-dateSelector__label" *ngIf="label">{{ label }} </label>
     <input
       class="m-dateSelector__input"
+      [ngClass]="{ 'm-dateSelector__input--hidden': hideInput }"
       [owlDateTimeTrigger]="dt"
       [owlDateTime]="dt"
       [min]="min"
@@ -17,7 +18,15 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
       [(ngModel)]="date"
       (ngModelChange)="onDateChange($event)"
     />
-    <owl-date-time [pickerType]="'calendar'" #dt></owl-date-time>
+    <owl-date-time [pickerType]="calendarType" #dt></owl-date-time>
+    <m-tooltip
+      *ngIf="tooltipIcon"
+      icon="{{ tooltipIcon }}"
+      [owlDateTimeTrigger]="dt"
+      i18n-label="{{ i18n }}"
+    >
+      {{ tooltipText }}
+    </m-tooltip>
   `,
 })
 export class DateSelectorComponent {
@@ -26,6 +35,13 @@ export class DateSelectorComponent {
   @Input() dateFormat: string = 'short'; // legacy. TODO: implement localization.
   @Input() label: string; // label for input.
 
+  @Input() hideInput = false; // text input showing the date.
+  @Input() calendarType = 'calendar'; // timer/calendar/both.
+
+  @Input() i18n?: string; // i18n string to accompany tooltip text.
+  @Input() tooltipIcon?: string; // tooltip icon.
+  @Input() tooltipText?: string; // tooltip text.
+
   protected _date: Date;
 
   @Input('date') // parse input into Date object.

src/app/common/components/draggable-list/list.component.html

+<div
+  class="m-draggableList__listItem m-draggableList__listHeader"
+  *ngIf="headers"
+  (click)="clickedHeaderRow($event)"
+>
+  <ng-container *ngFor="let header of headers">
+    <div class="m-draggableList__cell">{{ header | titlecase }}</div>
+  </ng-container>
+  <div class="m-draggableList__cell"></div>
+</div>
+
+<ul
+  dndDropzone
+  [dndHorizontal]="false"
+  [dndEffectAllowed]="dndEffectAllowed"
+  (dndStart)="dragging = true"
+  (dndDrop)="onDrop($event)"
+  class="m-draggableList__list"
+  [ngClass]="{ dragging: dragging }"
+>
+  <div class="dndPlaceholder" dndPlaceholderRef></div>
+
+  <li
+    *ngFor="let item of data; let i = index; trackBy: trackByFunction"
+    [dndDraggable]="item"
+    [dndEffectAllowed]="'move'"
+    [dndDragImageOffsetFunction]="dragImageOffsetRight"
+    [dndDisableIf]="disabled"
+    class="m-draggableList__listItem"
+  >
+    <ng-container
+      [ngTemplateOutlet]="template"
+      [ngTemplateOutletContext]="{ item: item, i: i }"
+    ></ng-container>
+    <div class="m-draggableList__cell">
+      <i class="handle material-icons" dndHandle>open_with</i>
+      <i class="material-icons" (click)="removeItem(i)">
+        clear
+      </i>
+    </div>
+  </li>
+</ul>

src/app/common/components/draggable-list/list.component.scss

 @import 'themes';
 
-m-draggable-list {
+m-draggableList {
+  width: 100%;
+  @include m-theme() {
+    box-shadow: 0 1px 4px 0 rgba(themed($m-black), 0.1);
+  }
+
   ul.m-draggableList__list {
+    width: 100%;
     list-style: none;
     padding: 0;
+    padding-inline-start: 0;
     margin: 0;
     display: flex;
     flex-direction: column;
     transition: all ease 300ms;
 
     &.dndDragover {
-      padding-top: 16px;
-      padding-bottom: 16px;
+      // padding-top: 16px;
+      // padding-bottom: 16px;
+      @include m-theme() {
+        background-color: rgba(themed($m-black), 0.05);
+        box-shadow: 0 1px 4px 0 rgba(themed($m-black), 0.1);
+      }
+    }
+    &.dragging {
+      li.m-draggableList__listItem {
+        &:first-child {
+          @include m-theme() {
+            border-top: 1px solid themed($m-grey-50);
+          }
+        }
+      }
     }
+  }
 
-    li.m-draggableList__listItem {
-      padding: 8px;
-      border: 1px solid #ddd;
+  .m-draggableList__listItem {
+    display: flex;
+    align-items: center;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    @include m-theme() {
+      border: 1px solid themed($m-grey-50);
+      color: themed($m-grey-800);
+    }
+    // &:first-child {
+    &:not(.m-draggableList__listHeader) {
+      @include m-theme() {
+        border-top: none;
+      }
+    }
+    // }
+    &.m-draggableList__listHeader {
+      @include m-theme() {
+        // border-bottom: none;
+        color: themed($m-grey-300);
+      }
+    }
+  }
+  input.m-draggableList__cell {
+    width: 0;
+    min-width: 0;
+  }
+  .m-draggableList__cell {
+    padding: 10px 20px;
+    flex: 1 1 0px;
+    box-sizing: border-box;
 
+    @include m-theme() {
+      border: none;
+      border-right: 1px solid themed($m-grey-50);
+      background-color: themed($m-white);
+    }
+    &input {
+      width: 0;
+      min-width: 0;
+    }
+    &:last-child {
+      //icon cell
+      padding: 10px 15px;
+      flex: 0 0 80px;
+      max-width: 80px;
+      height: 40px;
       display: flex;
       align-items: center;
+      justify-content: space-between;
 
-      .handle {
-        @include m-theme() {
-          color: themed($grey-600);
-        }
+      @include m-theme() {
+        border-right: none;
+      }
+    }
+  }
+  i {
+    cursor: pointer;
+    width: auto;
+    height: auto;
+    transition: all 0.3s ease;
+
+    @include m-theme() {
+      color: themed($m-grey-300);
+    }
+    &.handle {
+      font-size: 20px;
+      padding-right: 8px;
+      @include m-theme() {
       }
     }
+    &:hover {
+      transform: scale(1.15);
+      @include m-theme() {
+        color: themed($m-grey-200);
+      }
+    }
+  }
+  .dndPlaceholder {
+    min-height: 100px;
+    @include m-theme() {
+      border: 1px dashed rgba(themed($m-grey-100), 0.8);
+    }
   }
 }

src/app/common/components/draggable-list/list.component.ts

-import { Component, ContentChild, Input, TemplateRef } from '@angular/core';
-import { DndDropEvent, EffectAllowed } from 'ngx-drag-drop';
+import {
+  Component,
+  ContentChild,
+  Input,
+  TemplateRef,
+  Output,
+  EventEmitter,
+  ChangeDetectorRef,
+} from '@angular/core';
+import {
+  DndDropEvent,
+  EffectAllowed,
+  DndDragImageOffsetFunction,
+} from 'ngx-drag-drop';
 
 @Component({
-  selector: 'm-draggable-list',
-  template: `
-    <ul
-      dndDropzone
-      [dndHorizontal]="false"
-      [dndEffectAllowed]="dndEffectAllowed"
-      (dndDrop)="onDrop($event)"
-      class="m-draggableList__list"
-    >
-      <div
-        class="dndPlaceholder"
-        dndPlaceholderRef
-        style="min-height:100px;border:1px dashed green;background-color:rgba(0, 0, 0, 0.1)"
-      ></div>
-
-      <li
-        *ngFor="let item of data; let i = index; trackBy: trackByFunction"
-        [dndDraggable]="item"
-        [dndEffectAllowed]="'move'"
-        class="m-draggableList__listItem"
-      >
-        <i class="handle material-icons" dndHandle>reorder</i>
-        <ng-container
-          [ngTemplateOutlet]="template"
-          [ngTemplateOutletContext]="{ item: item, i: i }"
-        ></ng-container>
-      </li>
-    </ul>
-  `,
+  selector: 'm-draggableList',
+  templateUrl: 'list.component.html',
 })
 export class DraggableListComponent {
   @Input() data: Array<any>;
   @Input() dndEffectAllowed: EffectAllowed = 'copyMove';
   @Input() id: string;
+  @Input() headers: string[];
+  @Input() disabled: boolean;
   @ContentChild(TemplateRef, { static: false }) template: TemplateRef<any>;
+  @Output() emptyListHeaderRowClicked: EventEmitter<any> = new EventEmitter();
+  @Output() arrayChanged: EventEmitter<any> = new EventEmitter();
+
+  dragging: boolean = false;
 
   trackByFunction(index, item) {
     return this.id ? item[this.id] + index : index;
   }
 
+  constructor(private cd: ChangeDetectorRef) {}
+
   onDrop(event: DndDropEvent) {
+    this.dragging = false;
     if (
       this.data &&
       (event.dropEffect === 'copy' || event.dropEffect === 'move')
@@ -50,7 +44,7 @@ export class DraggableListComponent {
       let dragIndex = this.data.findIndex(
         item => event.data[this.id] === item[this.id]
       );
-      let dropIndex = event.index || this.data.length;
+      let dropIndex = event.index;
       // remove element
       this.data.splice(dragIndex, 1);
 
@@ -60,6 +54,43 @@ export class DraggableListComponent {
       }
 
       this.data.splice(dropIndex, 0, event.data);
+      this.arrayChanged.emit(this.data);
     }
   }
+
+  removeItem(index) {
+    this.data.splice(index, 1);
+    this.arrayChanged.emit(this.data);
+  }
+
+  clickedHeaderRow($event) {
+    if (this.data.length === 0) {
+      this.emptyListHeaderRowClicked.emit($event);
+    }
+  }
+
+  dragImageOffsetRight: DndDragImageOffsetFunction = (
+    event: DragEvent,
+    dragImage: HTMLElement
+  ) => {
+    return {
+      x: dragImage.offsetWidth - 57,
+      y: event.offsetY + 10,
+    };
+  };
+
+  /**
+   * If input is focused then disable dragging
+   */
+  onFocusIn(e: FocusEvent | MouseEvent) {
+    this.disabled = true;
+  }
+
+  /**
+   * Re-enable when input not focused
+   * TODO: Make this smarter.. what if something else disabled the dragging?
+   */
+  onFocusOut(e: FocusEvent | MouseEvent) {
+    this.disabled = false;
+  }
 }

src/app/modules/analytics/v2/components/filter/filter.component.html → src/app/common/components/dropdown-selector/dropdown-selector.component.html

-<div class="m-analyticsFilter__labelWrapper" *ngIf="showLabel">
+<div class="m-dropdownSelector__labelWrapper" *ngIf="showLabel">
   <span>{{ filter.label }}</span>
   <m-tooltip icon="help">
     <div>{{ filter?.description }}</div>
@@ -13,7 +13,7 @@
   </m-tooltip>
 </div>
 <div
-  class="m-analyticsFilter__wrapper"
+  class="m-dropdownSelector__wrapper"
   [ngClass]="{
     expanded: expanded,
     dropUp: dropUp
@@ -21,27 +21,23 @@
   (blur)="expanded = false"
   tabindex="0"
 >
-  <div
-    class="m-analyticsFilter__header m-analyticsFilter__row"
-    (click)="expanded = !expanded"
-  >
-    <span class="m-analyticsFilter__option m-analyticsFilter__option--selected">
+  <div class="m-dropdownSelector__header" (click)="expanded = !expanded">
+    <span class="m-dropdownSelector__option">
       {{ selectedOption.label }}
     </span>
     <i class="material-icons" *ngIf="!expanded">keyboard_arrow_down</i>
     <i class="material-icons" *ngIf="expanded">keyboard_arrow_up</i>
   </div>
-  <div class="m-analyticsFilter__optionsContainer">
+  <div class="m-dropdownSelector__optionsContainer">
     <ng-container *ngFor="let option of filter.options">
       <div
-        class="m-analyticsFilter__option m-analyticsFilter__row"
+        class="m-dropdownSelector__option"
         (click)="updateFilter(option)"
         [ngClass]="{
           unavailable: option.available === false
         }"
       >
         {{ option.label }}
-        <!-- <span>{{ option.label }}</span> -->
       </div>
     </ng-container>
   </div>

src/app/modules/analytics/v2/components/filter/filter.component.scss → src/app/common/components/dropdown-selector/dropdown-selector.component.scss

 $rounded-top: 3px 3px 0 0;
 $rounded-bottom: 0 0 3px 3px;
 
-m-analytics__filter {
+m-dropdownSelector {
   position: relative;
   margin: 0 24px 36px 0;
   z-index: 2;
   display: block;
 }
-.m-analyticsFilter__labelWrapper {
+.m-dropdownSelector__labelWrapper {
   position: absolute;
   bottom: 115%;
   white-space: nowrap;
@@ -45,168 +45,179 @@ m-analytics__filter {
   }
 }
 
-.m-analyticsFilter__wrapper {
+.m-dropdownSelector__wrapper {
   cursor: pointer;
 
   &:focus {
     outline: 0;
   }
-  > * {
-    width: 180px;
-    box-sizing: border-box;
-  }
-  .m-analyticsFilter__optionsContainer {
-    padding: 8px 0;
-    .m-analyticsFilter__option {
-      transform: translateY(25%);
-    }
-  }
 
   &.expanded {
     @include m-theme() {
       box-shadow: 0px 1px 15px 0 rgba(themed($m-black), 0.15);
     }
-    .m-analyticsFilter__header {
+    .m-dropdownSelector__header {
       @include m-theme() {
         border-color: themed($m-blue);
       }
     }
-    .m-analyticsFilter__optionsContainer {
+    .m-dropdownSelector__optionsContainer {
       display: block;
     }
 
     &:not(.dropUp) {
-      .m-analyticsFilter__header {
+      .m-dropdownSelector__header {
         @include m-theme() {
           border-radius: $rounded-top;
         }
       }
-      .m-analyticsFilter__optionsContainer {
+      .m-dropdownSelector__optionsContainer {
         border-top: none;
         border-radius: $rounded-bottom;
       }
     }
     &.dropUp {
-      .m-analyticsFilter__header {
+      .m-dropdownSelector__header {
         border-radius: $rounded-bottom;
       }
-      .m-analyticsFilter__optionsContainer {
+      .m-dropdownSelector__optionsContainer {
         bottom: 100%;
         border-radius: $rounded-top;
         border-bottom: none;
+        @include m-theme() {
+          box-shadow: 0px -4px 16px -4px rgba(themed($m-black), 0.15);
+        }
       }
     }
   }
 
-  .m-analyticsFilter__header {
-    position: relative;
-    border-radius: 3px;
-    transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+  > * {
+    width: 180px;
+    box-sizing: border-box;
+  }
+}
 
+.m-dropdownSelector__header {
+  position: relative;
+  border-radius: 3px;
+  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+
+  @include m-theme() {
+    background-color: themed($m-white);
+    color: themed($m-grey-300);
+  }
+  @include m-theme() {
+    border: 1px solid themed($m-grey-100);
+  }
+  .m-dropdownSelector__label {
+    margin-right: 10px;
+  }
+  i {
+    flex-grow: 0;
+    width: 24px;
+    height: 24px;
+    padding-top: 2px;
+  }
+  .m-dropdownSelector__option {
     @include m-theme() {
-      background-color: themed($m-white);
-      color: themed($m-grey-300);
-    }
-    @include m-theme() {
-      border: 1px solid themed($m-grey-100);
+      color: themed($m-grey-500);
     }
-    .m-analyticsFilter__label {
-      margin-right: 10px;
-    }
-    i {
-      flex-grow: 0;
-      width: 24px;
-      height: 24px;
-    }
-    .m-analyticsFilter__option--selected {
+  }
+}
+
+.m-dropdownSelector__optionsContainer {
+  box-sizing: border-box;
+  position: absolute;
+  display: none;
+  border-radius: 3px;
+  left: 0px;
+  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  @include m-theme() {
+    border: 1px solid themed($m-blue);
+    border-top: 1px solid themed($m-blue);
+    background-color: themed($m-white);
+    box-shadow: 0px 8px 16px 0px rgba(themed($m-black), 0.15);
+  }
+
+  .m-dropdownSelector__option {
+    &:hover:not(.unavailable) {
       @include m-theme() {
         color: themed($m-grey-500);
+        background-color: rgba(themed($m-grey-100), 0.2);
       }
     }
-  }
-
-  .m-analyticsFilter__optionsContainer {
-    position: absolute;
-    display: none;
-    border-radius: 3px;
-    left: 0px;
-    transition: box-shadow 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
-    @include m-theme() {
-      border: 1px solid themed($m-blue);
-      border-top: 1px solid themed($m-blue);
-      background-color: themed($m-white);
+    &:first-child {
+      padding-top: 14px;
+    }
+    &:last-child {
+      padding-bottom: 14px;
     }
   }
+}
 
-  .m-analyticsFilter__row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 46px;
-    padding: 0 20px;
-    &.m-analyticsFilter__header {
-      padding-right: 10px;
-    }
+.m-dropdownSelector__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-right: 10px;
+}
+.m-dropdownSelector__option {
+  display: inline-block;
+  padding: 10px 20px;
+  box-sizing: border-box;
+  width: inherit;
+  border-radius: 3px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  @include m-theme() {
+    color: themed($m-grey-300);
   }
-  .m-analyticsFilter__option {
-    display: inline-block;
-    box-sizing: border-box;
-    width: inherit;
-    border-radius: 3px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
 
+  &.unavailable {
+    display: none;
+    text-decoration: line-through;
     @include m-theme() {
-      color: themed($m-grey-300);
-    }
-
-    &.unavailable {
-      text-decoration: line-through;
-      @include m-theme() {
-        color: themed($m-grey-50);
-      }
-    }
-    &:hover:not(.unavailable) {
-      @include m-theme() {
-        color: themed($m-grey-600);
-      }
+      color: themed($m-grey-50);
     }
   }
 }
 
 @media screen and (max-width: $min-tablet) {
-  m-analytics__filter {
-    .m-analyticsFilter__labelWrapper {
+  m-dropdownSelector {
+    .m-dropdownSelector__labelWrapper {
       .m-tooltip--bubble {
         width: 120px;
       }
     }
-    .m-analyticsFilter__wrapper {
-      > * {
-        width: 140px;
-      }
-    }
   }
 }
 
 @media screen and (max-width: $max-mobile) {
-  m-analytics__filter {
-    .m-analyticsFilter__wrapper {
-      .m-analyticsFilter__header {
+  m-dropdownSelector {
+    .m-dropdownSelector__wrapper {
+      > * {
+        width: 160px;
+      }
+      .m-dropdownSelector__header {
+        padding-right: 10px;
         i {
           display: none;
         }
       }
-      .m-analyticsFilter__row {
-        padding: 0 18px;
-        height: 40px;
-        &.m-analyticsFilter__header {
-          padding-right: 10px;
+      .m-dropdownSelector__optionsContainer {
+        .m-dropdownSelector__option {
+          &:first-child {
+            padding-top: 11px;
+          }
+          &:last-child {
+            padding-bottom: 11px;
+          }
         }
       }
-      .m-analyticsFilter__option--selected {
+      .m-dropdownSelector__option {
         margin-right: 0;
+        padding: 8px 18px;
       }
     }
   }