Marcelo Rivera · Mark Harding · Mark Harding · Ben · Xander Miller · Xander Miller
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@ Minds Front
 Front-end web application for Minds. Please run inside of [the Minds repo](https://github.com/minds/minds).

 ## Documentation
-Documentation for Minds can be found at [minds.org/docs](https://www.minds.org/docs)
+Please see the documentation on [developers.minds.com](https://developers.minds.com) for instructions on how to [build the Minds Front-end](https://developers.minds.com/docs/guides/frontend).

 ### Building
 Please see the documentation on Minds.org for instructions on how to [build the Minds Front-end](https://www.minds.org/docs/install/preparation.html#front-end).

--- a/cypress/integration/newsfeed.spec.js
+++ b/cypress/integration/newsfeed.spec.js
+import generateRandomId from '../support/utilities';
+
 context('Newsfeed', () => {
  before(() => {
    cy.getCookie('minds_sess').then(sessionCookie => {
@@ -14,7 +16,6 @@ context('Newsfeed', () => {
    cy.route('POST', '**/api/v1/media').as('mediaPOST');
    cy.route('POST', '**/api/v1/newsfeed/**').as('newsfeedEDIT');
    cy.route('POST', '**/api/v1/media/**').as('mediaEDIT');
-
    cy.visit('/newsfeed/subscriptions')
      .location('pathname')
      .should('eq', '/newsfeed/subscriptions');
@@ -37,6 +38,19 @@ context('Newsfeed', () => {
    cy.get('minds-newsfeed-poster textarea').type(content);
  };

+  const attachRichEmbed = (embedUrl) => {
+    cy.get('minds-newsfeed-poster').should('be.visible');
+    cy.get('minds-newsfeed-poster textarea')
+      .type(embedUrl);
+      
+    cy.route('GET',  `**/api/v1/newsfeed/preview?url=${embedUrl}**`)
+      .as('previewGET')
+      .wait('@previewGET')
+      .then(xhr => {
+        expect(xhr.status).to.equal(200);
+      });
+  }
+
  const attachImageToActivity = () => {
    cy.uploadFile(
      '#attachment-input-poster',
@@ -511,4 +525,140 @@ context('Newsfeed', () => {
    deleteActivityFromNewsfeed();
  });

+  it('should show a rich embed post from youtube in a modal', () => {
+    const content = generateRandomId() + " ",
+      url = 'https://www.youtube.com/watch?v=jNQXAC9IVRw';
+
+    // set up post.
+    newActivityContent(content);
+    attachRichEmbed(url);
+
+    // post and await.
+    cy.get('.m-posterActionBar__PostButton')
+      .click()
+      .wait('@newsfeedPOST').then(xhr => {
+        expect(xhr.status).to.equal(200);
+
+        //get activity, click it.
+        cy.get(`[minds-data-activity-guid='${xhr.response.body.guid}']`)
+          .click();
+
+        //check modal is open.
+        cy.get('[data-cy=data-minds-media-modal]')
+          .contains(content);
+        
+        // close modal and tidy.
+        cy.get('.m-overlay-modal--backdrop')
+          .click({force: true});
+
+        deleteActivityFromNewsfeed();
+      });
+  });
+
+  it('should not open vimeo in a modal', () => {
+    const content = generateRandomId() + " ",
+      url = 'https://vimeo.com/8733915';
+
+    // set up post.
+    newActivityContent(content);
+    attachRichEmbed(url);
+
+    // post and await.
+    cy.get('.m-posterActionBar__PostButton')
+      .click()
+      .wait('@newsfeedPOST').then(xhr => {
+        expect(xhr.status).to.equal(200);
+
+        //get activity, make assertions tht would not be true for modals.
+        cy.get(`[minds-data-activity-guid='${xhr.response.body.guid}']`)
+          .should('be.visible')
+          .get('iframe')          
+          .should('be.visible')
+          .get('.minds-more')
+          .should('be.visible');
+        
+          // tidy.
+        deleteActivityFromNewsfeed();
+      });
+  });
+
+
+  it('should not open soundcloud in a modal', () => {
+    const content = generateRandomId() + " ",
+      url = 'https://soundcloud.com/richarddjames/piano-un10-it-happened';
+
+    // set up post.
+    newActivityContent(content);
+    attachRichEmbed(url);
+
+    // post and await.
+    cy.get('.m-posterActionBar__PostButton')
+      .click()
+      .wait('@newsfeedPOST').then(xhr => {
+        expect(xhr.status).to.equal(200);
+
+        //get activity, make assertions tht would not be true for modals.
+        cy.get(`[minds-data-activity-guid='${xhr.response.body.guid}']`)
+          .should('be.visible')
+          .get('.m-rich-embed-action-overlay')          
+          .should('be.visible')
+          .get('.minds-more')
+          .should('be.visible');
+
+        deleteActivityFromNewsfeed();
+      });
+  });
+
+  it('should not open spotify in a modal', () => {
+    const content = generateRandomId() + " ",
+      url = 'https://open.spotify.com/track/2MZSXhq4XDJWu6coGoXX1V?si=nvja0EfwR3q6GMQmYg6gPQ';
+
+    // set up post.
+    newActivityContent(content);
+    attachRichEmbed(url);
+
+    // post and await.
+    cy.get('.m-posterActionBar__PostButton')
+      .click()
+      .wait('@newsfeedPOST').then(xhr => {
+        expect(xhr.status).to.equal(200);
+
+        //get activity, make assertions tht would not be true for modals.
+        cy.get(`[minds-data-activity-guid='${xhr.response.body.guid}']`)
+          .should('be.visible')
+          .get('.m-rich-embed-action-overlay')          
+          .should('be.visible')
+          .get('.minds-more')
+          .should('be.visible');
+
+        deleteActivityFromNewsfeed();
+      });
+  });
+
+  it('should not open spotify in a modal', () => {
+    const content = generateRandomId() + " ",
+      url = 'http://giphygifs.s3.amazonaws.com/media/IzVquL965ib4s/giphy.gif';
+
+    // set up post.
+    newActivityContent(content);
+    attachRichEmbed(url);
+
+    // post and await.
+    cy.get('.m-posterActionBar__PostButton')
+      .click()
+      .wait('@newsfeedPOST').then(xhr => {
+        expect(xhr.status).to.equal(200);
+
+        //get activity, make assertions tht would not be true for modals.
+        cy.get(`[minds-data-activity-guid='${xhr.response.body.guid}']`)
+          .should('be.visible')
+          .get('.m-rich-embed-action-overlay')          
+          .should('be.visible')
+          .get('.minds-more')
+          .should('be.visible');
+
+        deleteActivityFromNewsfeed();
+      });
+  });
+
 });
--- a/package-lock.json
+++ b/package-lock.json
@@ -595,7 +595,8 @@
              "version": "2.1.1",
              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
              "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-              "dev": true
+              "dev": true,
+              "optional": true
            },
            "aproba": {
              "version": "1.2.0",
@@ -619,13 +620,15 @@
              "version": "1.0.0",
              "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
              "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-              "dev": true
+              "dev": true,
+              "optional": true
            },
            "brace-expansion": {
              "version": "1.1.11",
              "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
              "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
              "dev": true,
+              "optional": true,
              "requires": {
                "balanced-match": "^1.0.0",
                "concat-map": "0.0.1"
@@ -642,19 +645,22 @@
              "version": "1.1.0",
              "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
              "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
-              "dev": true
+              "dev": true,
+              "optional": true
            },
            "concat-map": {
              "version": "0.0.1",
              "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
              "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-              "dev": true
+              "dev": true,
+              "optional": true
            },
            "console-control-strings": {
              "version": "1.1.0",
              "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
              "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-              "dev": true
+              "dev": true,
+              "optional": true
            },
            "core-util-is": {
              "version": "1.0.2",
@@ -785,7 +791,8 @@
              "version": "2.0.3",
              "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
              "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-              "dev": true
+              "dev": true,
+              "optional": true
            },
            "ini": {
              "version": "1.3.5",
@@ -799,6 +806,7 @@
              "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
              "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
              "dev": true,
+              "optional": true,
              "requires": {
                "number-is-nan": "^1.0.0"
              }
@@ -815,6 +823,7 @@
              "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
              "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
              "dev": true,
+              "optional": true,
              "requires": {
                "brace-expansion": "^1.1.7"
              }
@@ -823,13 +832,15 @@
              "version": "0.0.8",
              "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
              "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-              "dev": true
+              "dev": true,
+              "optional": true
            },
            "minipass": {
              "version": "2.3.5",
              "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz",
              "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
              "dev": true,
+              "optional": true,
              "requires": {
                "safe-buffer": "^5.1.2",
                "yallist": "^3.0.0"
@@ -850,6 +861,7 @@
              "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
              "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
              "dev": true,
+              "optional": true,
              "requires": {
                "minimist": "0.0.8"
              }
@@ -938,7 +950,8 @@
              "version": "1.0.1",
              "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
              "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-              "dev": true
+              "dev": true,
+              "optional": true
            },
            "object-assign": {
              "version": "4.1.1",
@@ -952,6 +965,7 @@
              "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
              "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
              "dev": true,
+              "optional": true,
              "requires": {
                "wrappy": "1"
              }
@@ -1047,7 +1061,8 @@
              "version": "5.1.2",
              "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
              "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-              "dev": true
+              "dev": true,
+              "optional": true
            },
            "safer-buffer": {
              "version": "2.1.2",
@@ -1089,6 +1104,7 @@
              "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
              "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
              "dev": true,
+              "optional": true,
              "requires": {
                "code-point-at": "^1.0.0",
                "is-fullwidth-code-point": "^1.0.0",
@@ -1110,6 +1126,7 @@
              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
              "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
              "dev": true,
+              "optional": true,
              "requires": {
                "ansi-regex": "^2.0.0"
              }
@@ -1158,13 +1175,15 @@
              "version": "1.0.2",
              "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
              "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-              "dev": true
+              "dev": true,
+              "optional": true
            },
            "yallist": {
              "version": "3.0.3",
              "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz",
              "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==",
-              "dev": true
+              "dev": true,
+              "optional": true
            }
          }
        },
@@ -5793,11 +5812,6 @@
      "integrity": "sha1-gGZJMmzqp8qjMG112YXqJ0i6kTw=",
      "dev": true
    },
-    "dialog-polyfill": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/dialog-polyfill/-/dialog-polyfill-0.5.0.tgz",
-      "integrity": "sha512-fOj68T8KB6UIsDFmK7zYbmORJMLYkRmtsLM1W6wbCVUWu4Hdcud5bqbvuueTxO84JXtK9HcpCHV9vNwlWUdCIw=="
-    },
    "diff": {
      "version": "3.5.0",
      "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz",
@@ -7717,7 +7731,8 @@
          "version": "2.1.1",
          "resolved": false,
          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "aproba": {
          "version": "1.2.0",
@@ -7741,13 +7756,15 @@
          "version": "1.0.0",
          "resolved": false,
          "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "brace-expansion": {
          "version": "1.1.11",
          "resolved": false,
          "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
          "dev": true,
+          "optional": true,
          "requires": {
            "balanced-match": "^1.0.0",
            "concat-map": "0.0.1"
@@ -7764,19 +7781,22 @@
          "version": "1.1.0",
          "resolved": false,
          "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "concat-map": {
          "version": "0.0.1",
          "resolved": false,
          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "console-control-strings": {
          "version": "1.1.0",
          "resolved": false,
          "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "core-util-is": {
          "version": "1.0.2",
@@ -7907,7 +7927,8 @@
          "version": "2.0.3",
          "resolved": false,
          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "ini": {
          "version": "1.3.5",
@@ -7921,6 +7942,7 @@
          "resolved": false,
          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
          "dev": true,
+          "optional": true,
          "requires": {
            "number-is-nan": "^1.0.0"
          }
@@ -7937,6 +7959,7 @@
          "resolved": false,
          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
          "dev": true,
+          "optional": true,
          "requires": {
            "brace-expansion": "^1.1.7"
          }
@@ -7945,13 +7968,15 @@
          "version": "0.0.8",
          "resolved": false,
          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "minipass": {
          "version": "2.2.4",
          "resolved": false,
          "integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==",
          "dev": true,
+          "optional": true,
          "requires": {
            "safe-buffer": "^5.1.1",
            "yallist": "^3.0.0"
@@ -7972,6 +7997,7 @@
          "resolved": false,
          "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
          "dev": true,
+          "optional": true,
          "requires": {
            "minimist": "0.0.8"
          }
@@ -8060,7 +8086,8 @@
          "version": "1.0.1",
          "resolved": false,
          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "object-assign": {
          "version": "4.1.1",
@@ -8074,6 +8101,7 @@
          "resolved": false,
          "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
          "dev": true,
+          "optional": true,
          "requires": {
            "wrappy": "1"
          }
@@ -8169,7 +8197,8 @@
          "version": "5.1.1",
          "resolved": false,
          "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "safer-buffer": {
          "version": "2.1.2",
@@ -8211,6 +8240,7 @@
          "resolved": false,
          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
          "dev": true,
+          "optional": true,
          "requires": {
            "code-point-at": "^1.0.0",
            "is-fullwidth-code-point": "^1.0.0",
@@ -8232,6 +8262,7 @@
          "resolved": false,
          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
          "dev": true,
+          "optional": true,
          "requires": {
            "ansi-regex": "^2.0.0"
          }
@@ -8280,13 +8311,15 @@
          "version": "1.0.2",
          "resolved": false,
          "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "yallist": {
          "version": "3.0.2",
          "resolved": false,
          "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=",
-          "dev": true
+          "dev": true,
+          "optional": true
        }
      }
    },
@@ -14887,9 +14920,9 @@
      "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ="
    },
    "prettier": {
-      "version": "1.18.2",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.18.2.tgz",
-      "integrity": "sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw==",
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
+      "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
      "dev": true
    },
    "pretty-hrtime": {

--- a/package.json
+++ b/package.json
@@ -81,7 +81,7 @@
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-mocha-reporter": "^2.2.5",
-    "prettier": "1.18.2",
+    "prettier": "^1.19.1",
    "pretty-quick": "^1.11.1",
    "protractor": "~5.4.2",
    "ts-node": "~7.0.0",

--- a/src/app/common/common.module.ts
+++ b/src/app/common/common.module.ts
@@ -115,7 +115,14 @@ import { ToggleComponent } from './components/toggle/toggle.component';
 import { MarketingAsFeaturedInComponent } from './components/marketing/as-featured-in.component';
 import { SidebarMenuComponent } from './components/sidebar-menu/sidebar-menu.component';
 import { ChartV2Component } from './components/chart-v2/chart-v2.component';
-import { MiniChartComponent } from './components/mini-chart/mini-chart.component';
+import * as PlotlyJS from 'plotly.js/dist/plotly.js';
+import { PlotlyModule } from 'angular-plotly.js';
+import { PageLayoutComponent } from './components/page-layout/page-layout.component';
+import { DashboardLayoutComponent } from './components/dashboard-layout/dashboard-layout.component';
+import { ShadowboxLayoutComponent } from './components/shadowbox-layout/shadowbox-layout.component';
+import { ShadowboxHeaderComponent } from './components/shadowbox-header/shadowbox-header.component';
+
+PlotlyModule.plotlyjs = PlotlyJS;

 @NgModule({
  imports: [
@@ -124,6 +131,7 @@ import { MiniChartComponent } from './components/mini-chart/mini-chart.component
    RouterModule,
    FormsModule,
    ReactiveFormsModule,
+    PlotlyModule,
  ],
  declarations: [
    MINDS_PIPES,
@@ -220,7 +228,10 @@ import { MiniChartComponent } from './components/mini-chart/mini-chart.component
    MarketingAsFeaturedInComponent,
    SidebarMenuComponent,
    ChartV2Component,
-    MiniChartComponent,
+    PageLayoutComponent,
+    DashboardLayoutComponent,
+    ShadowboxLayoutComponent,
+    ShadowboxHeaderComponent,
  ],
  exports: [
    MINDS_PIPES,
@@ -312,6 +323,10 @@ import { MiniChartComponent } from './components/mini-chart/mini-chart.component
    MarketingComponent,
    MarketingAsFeaturedInComponent,
    SidebarMenuComponent,
+    ChartV2Component,
+    PageLayoutComponent,
+    DashboardLayoutComponent,
+    ShadowboxLayoutComponent,
  ],
  providers: [
    SiteService,

--- a/src/app/common/components/autocomplete/index.ts
+++ b/src/app/common/components/autocomplete/index.ts
 export * from './text-input-autocomplete.module';
-export {
-  TextInputAutocompleteMenuComponent,
-} from './text-input-autocomplete-menu.component';
+export { TextInputAutocompleteMenuComponent } from './text-input-autocomplete-menu.component';
--- a/src/app/common/components/avatar/avatar.ts
+++ b/src/app/common/components/avatar/avatar.ts
 import { Component, EventEmitter } from '@angular/core';
-
-import { Client } from '../../../services/api';
+import { UserAvatarService } from '../../services/user-avatar.service';
+import { of, Observable } from 'rxjs';

 @Component({
  selector: 'minds-avatar',
@@ -14,17 +14,28 @@ import { Client } from '../../../services/api';
  ],
  outputs: ['added'],
  template: `
-    <div class="minds-avatar" [style.background-image]="'url(' + src + ')'">
+    <div
+      class="minds-avatar"
+      [ngStyle]="{ 'background-image': 'url(' + (getSrc() | async) + ')' }"
+    >
      <img
-        *ngIf="!src"
+        *ngIf="!(userAvatarService.src$ | async)"
        src="{{ minds.cdn_assets_url }}assets/avatars/blue/default-large.png"
        class="mdl-shadow--4dp"
      />
      <div *ngIf="editing" class="overlay">
        <i class="material-icons">{{ icon }}</i>
        <ng-container *ngIf="showPrompt">
-          <span *ngIf="src" i18n="@@COMMON__AVATAR__CHANGE">Change avatar</span>
-          <span *ngIf="!src" i18n="@@COMMON__AVATAR__ADD">Add an avatar</span>
+          <span
+            *ngIf="userAvatarService.src$ | async"
+            i18n="@@COMMON__AVATAR__CHANGE"
+            >Change avatar</span
+          >
+          <span
+            *ngIf="!(userAvatarService.src$ | async)"
+            i18n="@@COMMON__AVATAR__ADD"
+            >Add an avatar</span
+          >
        </ng-container>
      </div>
      <input *ngIf="editing" type="file" #file (change)="add($event)" />
@@ -40,18 +51,21 @@ export class MindsAvatar {
  index: number = 0;
  icon: string = 'camera';
  showPrompt: boolean = true;
-
  file: any;
  added: EventEmitter<any> = new EventEmitter();

+  constructor(public userAvatarService: UserAvatarService) {}
+
  set _object(value: any) {
    if (!value) return;
-
    value.icontime = value.icontime ? value.icontime : '';
    this.object = value;
-    this.src = `${this.minds.cdn_url}fs/v1/avatars/${this.object.guid}/large/${this.object.icontime}`;
-    if (this.object.type === 'user')
+
+    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) {
      this.src = `${this.minds.cdn_url}icon/${this.object.guid}/large/${this.object.icontime}`;
+    }
  }

  set _src(value: any) {
@@ -63,6 +77,10 @@ export class MindsAvatar {
    if (!this.editing && this.file) this.done();
  }

+  /**
+   * New avatar added.
+   * @param e - the element.
+   */
  add(e) {
    if (!this.editing) return;

@@ -78,6 +96,9 @@ export class MindsAvatar {
        typeof reader.result === 'string'
          ? reader.result
          : reader.result.toString();
+      if (this.object.type === 'user' && this.isOwnerAvatar()) {
+        this.userAvatarService.src$.next(this.src);
+      }
    };
    reader.readAsDataURL(this.file);

@@ -87,9 +108,28 @@ export class MindsAvatar {
    if (this.waitForDoneSignal !== true) this.done();
  }

+  /**
+   * Called upon being done.
+   */
  done() {
    console.log('sending done');
    this.added.next(this.file);
    this.file = null;
  }
+
+  /**
+   * Gets the src of the image
+   * @returns { Observables<string> } the src for the image.
+   */
+  getSrc(): Observable<string> {
+    return this.isOwnerAvatar() ? this.userAvatarService.src$ : of(this.src);
+  }
+
+  /**
+   * Determined whether this is a users avatar.
+   * @returns true if the object guid matches the currently logged in user guid
+   */
+  isOwnerAvatar(): boolean {
+    return this.object.guid === this.minds.user.guid;
+  }
 }
--- a/src/app/common/components/badges/badges.component.ts
+++ b/src/app/common/components/badges/badges.component.ts
@@ -43,8 +43,8 @@ export class ChannelBadgesComponent {
      return true;
    } else if (
      !this.user.is_admin &&
-      (this.session.isAdmin() &&
-        this.user.guid !== this.session.getLoggedInUser().guid)
+      this.session.isAdmin() &&
+      this.user.guid !== this.session.getLoggedInUser().guid
    ) {
      return true;
    }

--- a/src/app/modules/analytics/v2/chart-palette.default.ts
+++ b/src/app/modules/analytics/v2/chart-palette.default.ts
--- a/src/app/common/components/chart-v2/chart-v2.component.html
+++ b/src/app/common/components/chart-v2/chart-v2.component.html
-<!-- <div
+<div
  #chartContainer
  class="m-chartV2__chartContainer"
-  [ngClass]="{ isTouchDevice: isTouchDevice }"
+  [ngClass]="{ isTouchDevice: isTouchDevice, isMini: isMini }"
 >
  <plotly-plot
    *ngIf="init"
-    #graphDiv
-    id="graphDiv"
    [data]="data"
    [layout]="layout"
    [config]="config"
@@ -14,48 +12,70 @@
    [style]="{ position: 'relative' }"
    (hover)="onHover($event)"
    (unhover)="onUnhover($event)"
-    (plotly_click)="onClick($event)"
+    id="graphDiv"
  >
  </plotly-plot>
 </div>
-
-<div #hoverInfoDiv id="hoverInfoDiv" class="m-chartV2__hoverInfoDiv">
-  <i *ngIf="isTouchDevice" class="material-icons" (click)="onUnhover($event)"
+<div #hoverInfoDiv class="m-chartV2__hoverInfoDiv">
+  <i
+    *ngIf="isTouchDevice"
+    class="material-icons m-chartV2__hoverInfo__closeBtn"
+    (click)="onUnhover($event)"
    >close</i
  >
-  <div class="m-chartV2__hoverInfo__row">
-    {{ hoverInfo.date | utcDate | date: datePipe }}
-  </div>
-  <div
-    [ngSwitch]="selectedMetric?.unit"
-    class="m-chartV2__hoverInfo__row--primary"
-  >
-    <ng-template ngSwitchCase="number">
-      {{ hoverInfo.value | number }} {{ selectedMetric.label | lowercase }}
-    </ng-template>
-    <ng-template ngSwitchCase="usd">
-      {{ hoverInfo.value | currency }} USD
-    </ng-template>
-    <ng-template ngSwitchDefault>
-      {{ hoverInfo.value | number: '1.1-3' }} {{ selectedMetric?.unit }}
-    </ng-template>
-  </div>
-  <div class="m-chartV2__hoverInfo__row" *ngIf="isComparison">
-    vs
-    <ng-container
-      [ngSwitch]="selectedMetric?.unit"
-      class="m-chartV2__hoverInfo__row"
-    >
-      <ng-template ngSwitchCase="number">
-        {{ hoverInfo.comparisonValue | number }}
-      </ng-template>
-      <ng-template ngSwitchCase="usd">
-        {{ hoverInfo.comparisonValue | currency }}
-      </ng-template>
-      <ng-template ngSwitchDefault>
-        {{ hoverInfo.comparisonValue | number: '1.1-3' }}
-      </ng-template>
-    </ng-container>
-    on {{ hoverInfo.comparisonDate | utcDate | date: datePipe }}
+  <div class="m-chartV2__hoverInfo__wrapper">
+    <div class="m-chartV2__hoverInfo__arrowContainer" *ngIf="isMini">
+      <i class="material-icons">arrow_upward</i>
+    </div>
+    <div class="m-chartV2__hoverInfo__rowsContainer">
+      <div class="m-chartV2__hoverInfo__row">
+        {{ hoverInfo.date | utcDate | date: datePipe }}
+      </div>
+      <div
+        [ngSwitch]="rawData?.unit"
+        class="m-chartV2__hoverInfo__row--primary"
+      >
+        <ng-template ngSwitchCase="number">
+          {{ hoverInfo.value | number: '1.0-0' | abbr }}
+          {{ rawData.label | lowercase }}
+        </ng-template>
+        <ng-template ngSwitchCase="usd">
+          {{ hoverInfo.value | currency }} USD
+        </ng-template>
+        <ng-template ngSwitchCase="eth">
+          {{ hoverInfo.value | number: '1.3-3' }} ETH
+        </ng-template>
+        <ng-template ngSwitchCase="tokens">
+          {{ hoverInfo.value | number: '1.1-3' }} Tokens
+        </ng-template>
+        <ng-template ngSwitchDefault>
+          {{ hoverInfo.value | number: '1.0-3' }} {{ rawData?.unit }}
+        </ng-template>
+      </div>
+      <div class="m-chartV2__hoverInfo__row" *ngIf="isComparison">
+        vs
+        <ng-container
+          [ngSwitch]="rawData?.unit"
+          class="m-chartV2__hoverInfo__row"
+        >
+          <ng-template ngSwitchCase="number">
+            {{ hoverInfo.comparisonValue | number: '1.0-0' | abbr }}
+          </ng-template>
+          <ng-template ngSwitchCase="usd">
+            {{ hoverInfo.comparisonValue | currency }}
+          </ng-template>
+          <ng-template ngSwitchCase="eth">
+            {{ hoverInfo.value | number: '1.3-3' }} ETH
+          </ng-template>
+          <ng-template ngSwitchCase="tokens">
+            {{ hoverInfo.value | number: '1.1-3' }} Tokens
+          </ng-template>
+          <ng-template ngSwitchDefault>
+            {{ hoverInfo.comparisonValue | number: '1.1-3' }}
+          </ng-template>
+        </ng-container>
+        on {{ hoverInfo.comparisonDate | utcDate | date: datePipe }}
+      </div>
+    </div>
  </div>
-</div> -->
+</div>
--- a/src/app/common/components/chart-v2/chart-v2.component.scss
+++ b/src/app/common/components/chart-v2/chart-v2.component.scss
+m-chartV2 {
+  display: block;
+  position: relative;
+  margin-left: 40px;
+}
+.js-plotly-plot,
+.plot-container {
+  height: 44vh;
+  min-height: 44vh;
+  display: block;
+}
+#graphDiv {
+  display: block;
+  position: relative;
+  g,
+  g > * {
+    cursor: default;
+  }
+
+  > * {
+    transition: background-color 0.3s cubic-bezier(0.23, 1, 0.32, 1),
+      color 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  }
+
+  .main-svg {
+    max-width: 100%;
+  }
+}
+
+.m-chartV2__hoverInfoDiv {
+  width: 160px;
+  padding: 12px;
+  position: absolute;
+  pointer-events: none;
+  border-radius: 3px;
+  font-size: 12px;
+  z-index: 9999999999;
+  opacity: 0;
+  transition: opacity 0.2s ease-in;
+  @include m-theme() {
+    background-color: themed($m-white);
+    box-shadow: 0 0 4px rgba(themed($m-black), 0.3);
+    color: themed($m-grey-300);
+  }
+
+  [class*='m-chartV2__hoverInfo__row'] {
+    padding-bottom: 4px;
+    font-weight: 300;
+    &:last-of-type {
+      padding-top: 2px;
+    }
+  }
+  .m-chartV2__hoverInfo__row--primary {
+    font-weight: 400;
+    font-size: 15px;
+    @include m-theme() {
+      color: themed($m-grey-600);
+    }
+  }
+
+  .m-chartV2__hoverInfo__closeBtn {
+    display: none;
+    font-size: 15px;
+    position: absolute;
+    cursor: pointer;
+    top: 10px;
+    right: 10px;
+    transition: color 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+    @include m-theme() {
+      color: themed($m-grey-300);
+    }
+    &:active {
+      @include m-theme() {
+        color: themed($m-grey-500);
+      }
+    }
+  }
+}
+
+// ----------------------------------------------------
+
+.isTouchDevice .m-chartV2__hoverInfoDiv .m-chartV2__hoverInfo__closeBtn {
+  display: block;
+}
+
+@media screen and (max-width: $min-tablet) {
+  m-chartV2 {
+    margin-left: 16px;
+  }
+}
+
+// ----------------------------------------------------
+m-chartV2.isMini {
+  margin-left: 0;
+  margin-top: 24px;
+  .js-plotly-plot,
+  .plot-container {
+    height: 40px;
+    min-height: 40px;
+  }
+  .m-chartV2__chartContainer {
+    // margin-right: 24px;
+  }
+  .m-chartV2__hoverInfoDiv {
+    width: 150px;
+    padding: 0px;
+
+    .m-chartV2__hoverInfo__wrapper {
+      display: flex;
+    }
+    .m-chartV2__hoverInfo__rowsContainer {
+      display: flex;
+      flex-direction: column;
+      padding: 14px 14px 14px 0;
+    }
+    .m-chartV2__hoverInfo__arrowContainer {
+      width: 20px;
+      i {
+        margin-left: -4px;
+        transform: rotate(-45deg) scaleX(0.5);
+        @include m-theme() {
+          color: themed($m-grey-600);
+        }
+      }
+    }
+    [class*='m-chartV2__hoverInfo__row'] {
+      line-height: 1.1;
+    }
+    .m-chartV2__hoverInfo__row--primary {
+      font-size: 12px;
+    }
+  }
+  @media screen and (max-width: $min-tablet) {
+    margin-left: 0;
+  }
+}
--- a/src/app/common/components/chart-v2/chart-v2.component.spec.ts
+++ b/src/app/common/components/chart-v2/chart-v2.component.spec.ts
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { UtcDatePipe } from '../../pipes/utcdate';
+import { AbbrPipe } from '../../pipes/abbr';
+import { MockService } from '../../../utils/mock';
+import { ThemeService } from '../../services/theme.service';
 import { ChartV2Component } from './chart-v2.component';

 describe('ChartV2Component', () => {
@@ -8,14 +12,46 @@ describe('ChartV2Component', () => {

  beforeEach(async(() => {
    TestBed.configureTestingModule({
-      declarations: [ChartV2Component],
+      declarations: [ChartV2Component, UtcDatePipe, AbbrPipe],
+      providers: [
+        {
+          provide: ThemeService,
+          useValue: MockService(ThemeService),
+        },
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ChartV2Component);
    component = fixture.componentInstance;
-    fixture.detectChanges();
+    component.rawData = {
+      id: 'views',
+      label: 'Pageviews',
+      permissions: ['admin', 'user'],
+      unit: 'usd',
+      description: '',
+      visualisation: {
+        type: 'chart',
+        segments: [
+          {
+            buckets: [
+              {
+                key: 1567296000000,
+                date: '2019-09-01T00:00:00+00:00',
+                value: 11,
+              },
+              {
+                key: 1567382400000,
+                date: '2019-09-02T00:00:00+00:00',
+                value: 12,
+              },
+            ],
+          },
+        ],
+      },
+    };
  });

  it('should create', () => {

--- a/src/app/common/components/chart-v2/chart-v2.component.ts
+++ b/src/app/common/components/chart-v2/chart-v2.component.ts
--- a/src/app/common/components/dashboard-layout/dashboard-layout.component.html
+++ b/src/app/common/components/dashboard-layout/dashboard-layout.component.html
+<div class="m-dashboardLayout__header">
+  <ng-content select="[m-dashboardLayout__header]"></ng-content>
+</div>
+<div class="m-dashboardLayout__body">
+  <ng-content select="[m-dashboardLayout__body]"></ng-content>
+</div>
--- a/src/app/common/components/dashboard-layout/dashboard-layout.component.scss
+++ b/src/app/common/components/dashboard-layout/dashboard-layout.component.scss
+m-dashboardLayout {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+}
+.m-dashboardLayout__header {
+  h3 {
+    font-size: 26px;
+    font-weight: 500;
+    margin-top: 0;
+    margin-right: 24px;
+  }
+}
+.m-dashboardLayout__body {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+
+@media screen and (max-width: $min-tablet) {
+  m-dashboardLayout {
+    display: block;
+    padding: 0;
+    max-width: none;
+    width: 100%;
+  }
+  .m-dashboardLayout__header {
+    padding-left: 24px;
+  }
+}
+
+@media screen and (max-width: $max-mobile) {
+}
--- a/src/app/common/components/mini-chart/mini-chart.component.spec.ts
+++ b/src/app/common/components/mini-chart/mini-chart.component.spec.ts
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';

-import { MiniChartComponent } from './mini-chart.component';
+import { DashboardLayoutComponent } from './dashboard-layout.component';

-describe('MiniChartComponent', () => {
-  let component: MiniChartComponent;
-  let fixture: ComponentFixture<MiniChartComponent>;
+describe('DashboardLayoutComponent', () => {
+  let component: DashboardLayoutComponent;
+  let fixture: ComponentFixture<DashboardLayoutComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
-      declarations: [MiniChartComponent],
+      declarations: [DashboardLayoutComponent],
    }).compileComponents();
  }));

  beforeEach(() => {
-    fixture = TestBed.createComponent(MiniChartComponent);
+    fixture = TestBed.createComponent(DashboardLayoutComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

--- a/src/app/common/components/mini-chart/mini-chart.component.ts
+++ b/src/app/common/components/mini-chart/mini-chart.component.ts
 import { Component, OnInit } from '@angular/core';

 @Component({
-  selector: 'm-miniChart',
-  templateUrl: './mini-chart.component.html',
+  selector: 'm-dashboardLayout',
+  templateUrl: './dashboard-layout.component.html',
 })
-export class MiniChartComponent implements OnInit {
+export class DashboardLayoutComponent implements OnInit {
  constructor() {}

  ngOnInit() {}

--- a/src/app/common/components/featured-content/featured-content.component.ts
+++ b/src/app/common/components/featured-content/featured-content.component.ts
@@ -79,9 +79,7 @@ export class FeaturedContentComponent implements OnInit {
        component
      );

-      const componentRef: ComponentRef<
-        any
-      > = this.dynamicHost.viewContainerRef.createComponent(
+      const componentRef: ComponentRef<any> = this.dynamicHost.viewContainerRef.createComponent(
        componentFactory,
        void 0,
        this.injector

--- a/src/app/common/components/featured-content/featured-content.service.ts
+++ b/src/app/common/components/featured-content/featured-content.service.ts
 import { Injectable } from '@angular/core';
-import {
-  filter,
-  first,
-  map,
-  switchMap,
-  mergeMap,
-  skip,
-  take,
-} from 'rxjs/operators';
+import { filter, first, switchMap, mergeMap, skip, take } from 'rxjs/operators';
 import { FeedsService } from '../../services/feeds.service';
+import { Subscription } from 'rxjs';

 @Injectable()
 export class FeaturedContentService {
-  offset: number = -1;
+  offset = 0;
+  maximumOffset = 0;
+  feedLength = 0;
+  protected feedSubscription: Subscription;

  constructor(protected feedsService: FeedsService) {
+    this.onInit();
+  }
+
+  onInit() {
+    this.feedSubscription = this.feedsService.feed.subscribe(feed => {
+      this.feedLength = feed.length;
+      this.maximumOffset = this.feedLength - 1;
+    });
+
    this.feedsService
      .setLimit(12)
      .setOffset(0)
@@ -23,28 +28,36 @@ export class FeaturedContentService {
  }

  async fetch() {
-    if (this.offset >= this.feedsService.rawFeed.getValue().length) {
-      this.offset = -1;
-    }
-    // Refetch every 2 calls, if not loading
-    if (this.offset % 2 && !this.feedsService.inProgress.getValue()) {
-      this.feedsService.clear();
-      this.feedsService.fetch();
-    }
    return await this.feedsService.feed
      .pipe(
-        filter(feed => feed.length > 0),
-        first(),
-        mergeMap(feed => feed),
+        filter(entities => entities.length > 0),
+        mergeMap(feed => feed), // Convert feed array to stream
        skip(this.offset++),
        take(1),
        switchMap(async entity => {
          if (!entity) {
            return false;
+          } else {
+            const resolvedEntity = await entity.pipe(first()).toPromise();
+            this.resetOffsetAtEndOfStream();
+            return resolvedEntity;
          }
-          return await entity.pipe(first()).toPromise();
        })
      )
      .toPromise();
  }
+
+  protected resetOffsetAtEndOfStream() {
+    if (this.offset >= this.maximumOffset) {
+      this.offset = 0;
+      this.fetchNextFeed();
+    }
+  }
+
+  protected fetchNextFeed() {
+    if (!this.feedsService.inProgress.getValue()) {
+      this.feedsService.clear();
+      this.feedsService.fetch();
+    }
+  }
 }
--- a/src/app/common/components/mini-chart/mini-chart.component.html
+++ b/src/app/common/components/mini-chart/mini-chart.component.html
-<p>
-  mini-chart works!
-</p>