.gitignore

@@ -39,3 +39,4 @@ cypress/videos
 !/.gitlab
 !/.githooks
 !/.prettierrc
+!.gitattributes

cypress/integration/blockchain/rewards-marketing.spec.js

+context('Rewards Product Page', () => {
+  before(() => {
+    cy.getCookie('minds_sess').then(sessionCookie => {
+      if (!sessionCookie) {
+        return cy.login(true);
+      }
+    });
+  });
+
+  beforeEach(() => {
+    cy.preserveCookies();
+  });
+
+  const joinRewards = '.m-marketing__mainWrapper .mf-button';
+
+  it('should have a join rewards button', () => {
+    cy.visit('/rewards');
+
+    cy.get(joinRewards)
+      .should('be.visible')
+      .should('contain', 'Join Rewards')
+      .click();
+
+    cy.location('pathname').should(
+      'contains',
+      '/wallet/tokens/contributions'
+    );
+  });
+});

cypress/integration/blockchain/token-marketing.spec.js

+context('Token Page', () => {
+  before(() => {
+    cy.getCookie('minds_sess').then(sessionCookie => {
+      if (!sessionCookie) {
+        return cy.login(true);
+      }
+    });
+  });
+
+  beforeEach(() => {
+    cy.preserveCookies();
+    cy.visit('/token');
+  });
+
+  it('should have the ability to trigger Buy Tokens modal', () => {
+    const tokensInput = 'm-blockchain--purchase input[name=amount]';
+    const buyTokensButton =
+      'm-blockchain--purchase .m-blockchainTokenPurchase__action .mf-button';
+    const anyBuyTokensModal =
+      'm-blockchain--purchase m-modal .m-modal-container';
+
+    cy.get(tokensInput)
+      .focus()
+      .clear()
+      .type('0');
+    cy.get(buyTokensButton).should('be.disabled');
+
+    cy.get(tokensInput)
+      .focus()
+      .clear()
+      .type('1');
+    cy.get(buyTokensButton)
+      .should('not.be.disabled')
+      .click();
+
+    cy.get('.m-get-metamask--cancel-btn.m-btn').click();
+
+    cy.get(anyBuyTokensModal).should('be.visible');
+  });
+
+  it('should have the ability to trigger Buy Eth modal', () => {
+    const buyEthLink =
+      'm-blockchain--purchase .m-blockchainTokenPurchase__ethRate a';
+    const buyEthModal = 'm-blockchain__eth-modal .m-modal-container';
+
+    cy.get(buyEthLink).click();
+
+    cy.get(buyEthModal).should('be.visible');
+  });
+});

cypress/integration/boost/marketing.spec.js

+context('Boost Product Page', () => {
+  before(() => {
+    cy.getCookie('minds_sess').then(sessionCookie => {
+      if (!sessionCookie) {
+        return cy.login(true);
+      }
+    });
+  });
+
+  beforeEach(() => {
+    cy.preserveCookies();
+  });
+
+  const createBoostButton = '.m-marketing__mainWrapper .mf-button';
+
+  it('should have a create boost button', () => {
+    cy.visit('/boost');
+
+    cy.get(createBoostButton)
+      .should('be.visible')
+      .should('contain', 'Create Boost')
+      .click();
+
+    cy.location('pathname').should(
+      'contains',
+      '/boost/console/newsfeed/create'
+    );
+  });
+});

cypress/integration/nodes/marketing.spec.js

+context('Pro Product Page', () => {
+  before(() => {
+    cy.getCookie('minds_sess').then(sessionCookie => {
+      if (!sessionCookie) {
+        return cy.login(true);
+      }
+    });
+  });
+
+  beforeEach(() => {
+    cy.preserveCookies();
+  });
+
+  const contactUsButton = '.m-marketing__mainWrapper .mf-button';
+
+  it('should have a contact us button', () => {
+    cy.visit('/nodes', {
+      onBeforeLoad(_window) {
+        cy.stub(_window, 'open');
+      },
+    });
+
+    cy.get(contactUsButton)
+      .should('be.visible')
+      .should('contain', 'Contact us for details')
+      .click();
+
+    cy.window()
+      .its('open')
+      .should('be.called');
+  });
+});

cypress/integration/plus/marketing.spec.js

+context('Plus Product Page', () => {
+  before(() => {
+    cy.getCookie('minds_sess').then(sessionCookie => {
+      if (!sessionCookie) {
+        return cy.login(true);
+      }
+    });
+  });
+
+  beforeEach(() => {
+    cy.preserveCookies();
+  });
+
+  const upgradeButton = 'm-plus--subscription .mf-button';
+  const wirePaymentsComponent = 'm-wire__paymentscreator .m-wire--creator';
+
+  it('should open the Wire Payment modal', () => {
+    cy.visit('/plus');
+
+    cy.get(upgradeButton)
+      .should('be.visible')
+      .should('contain', 'Upgrade to Plus')
+      .click();
+
+    cy.get(wirePaymentsComponent).should('be.visible');
+  });
+
+  it('should automatically open the Wire Payment modal', () => {
+    cy.visit('/plus?i=yearly&c=tokens');
+
+    cy.get(wirePaymentsComponent).should('be.visible');
+  });
+});

cypress/integration/pro/marketing.spec.js

+context('Pro Product Page', () => {
+  before(() => {
+    cy.getCookie('minds_sess').then(sessionCookie => {
+      if (!sessionCookie) {
+        return cy.login(true);
+      }
+    });
+  });
+
+  beforeEach(() => {
+    cy.preserveCookies();
+  });
+
+  const upgradeButton = 'm-pro--subscription .mf-button';
+  const wirePaymentsComponent = 'm-wire__paymentscreator .m-wire--creator';
+
+  it('should show a coming soon button', () => {
+    cy.visit('/pro');
+
+    cy.get(upgradeButton)
+      .should('be.visible')
+      .should('contain', 'Coming soon')
+      .click();
+  });
+
+  // it('should open the Wire Payment modal', () => {
+  //
+  //   cy.visit('/pro');
+  //
+  //   cy.get(upgradeButton)
+  //     .should('be.visible')
+  //     .should('contain', 'Upgrade to Pro')
+  //     .click();
+  //
+  //   cy.get(wirePaymentsComponent).should('be.visible');
+  // });
+  //
+  // it('should automatically open the Wire Payment modal', () => {
+  //   cy.visit('/pro?i=yearly&c=tokens');
+  //
+  //   cy.get(wirePaymentsComponent).should('be.visible');
+  // });
+});

cypress/integration/pro/settings.spec.js

@@ -21,7 +21,6 @@ context('Pro Settings', () => {
         43: '#tile_ratio_4\:3', // 4:3
         11: '#tile_ratio_1\:1' , // 1:1
       },
-      logoGuid: '#logo_guid', 
     }
 
     const hashtags = {

cypress/integration/upgrades.spec.js

+context('Upgrades page', () => {
+  before(() => {
+    cy.getCookie('minds_sess').then(sessionCookie => {
+      if (!sessionCookie) {
+        return cy.login(true);
+      }
+    });
+  });
+
+  beforeEach(() => {
+    cy.preserveCookies();
+    cy.visit('/upgrades');
+  });
+
+  it('should scroll to upgrades table', () => {
+    cy.viewport(1200, 600); // Only on desktop
+
+    const scrollButton = '[data-cy="m-upgrades__upgrade-now-button"]';
+    const heading = '.m-upgradesUpgradeOptions__header h2';
+
+    cy.get(scrollButton)
+      .should('contain', 'Upgrade now')
+      .click();
+
+    cy.wait(1500);
+    cy.isInViewport(heading);
+  });
+
+  // TODO: Toggles tests (make them testable)
+
+  it('should have the ability to trigger Buy Tokens modal', () => {
+    const tokensInput = 'm-blockchain--purchase input[name=amount]';
+    const buyTokensButton =
+      'm-blockchain--purchase .m-blockchainTokenPurchase__action .mf-button';
+    const anyBuyTokensModal =
+      'm-blockchain--purchase m-modal .m-modal-container';
+
+    cy.get(tokensInput)
+      .focus()
+      .clear()
+      .type('0');
+    cy.get(buyTokensButton).should('be.disabled');
+
+    cy.get(tokensInput)
+      .focus()
+      .clear()
+      .type('1');
+    cy.get(buyTokensButton)
+      .should('not.be.disabled')
+      .click();
+
+    cy.get('.m-get-metamask--cancel-btn.m-btn').click();
+
+    cy.get(anyBuyTokensModal).should('be.visible');
+  });
+
+  it('should have the ability to trigger Buy Eth modal', () => {
+    const buyEthLink =
+      'm-blockchain--purchase .m-blockchainTokenPurchase__ethRate a';
+    const buyEthModal = 'm-blockchain__eth-modal .m-modal-container';
+
+    cy.get(buyEthLink).click();
+
+    cy.get(buyEthModal).should('be.visible');
+  });
+
+  it('should navigate to Plus and trigger a Wire', () => {
+    const upgradeButton = cy.get(
+      '[data-cy="m-upgradeOptions__upgrade-to-plus-button"]'
+    );
+
+    upgradeButton.click();
+
+    cy.location('pathname').should('contain', '/plus');
+  });
+
+  it('should navigate to Pro and trigger a Wire', () => {
+    const upgradeButton = cy.get(
+      '[data-cy="m-upgradeOptions__upgrade-to-pro-button"]'
+    );
+
+    upgradeButton.click();
+
+    cy.location('pathname').should('contain', '/pro');
+  });
+
+  it('should navigate to Nodes', () => {
+    const upgradeButton = cy.get(
+      '[data-cy="m-upgradeOptions__contact-us-nodes-button"]'
+    );
+
+    upgradeButton.click();
+
+    cy.location('pathname').should('contain', '/nodes');
+  });
+});

cypress/integration/wire.spec.js → cypress/integration/wire/creator.spec.js

@@ -5,10 +5,10 @@
  * @desc Spec tests for Wire transactions.
  */
 
-import generateRandomId from "../support/utilities";
+import generateRandomId from "../../support/utilities";
 
 // Issue to re-enable https://gitlab.com/minds/front/issues/1846
-context.skip('Wire', () => {
+context.skip('Wire Creator', () => {
 
   const receiver = {
     username: generateRandomId(),

cypress/integration/wire/marketing.spec.js

+context('Pay Product Page', () => {
+  before(() => {
+    cy.getCookie('minds_sess').then(sessionCookie => {
+      if (!sessionCookie) {
+        return cy.login(true);
+      }
+    });
+  });
+
+  beforeEach(() => {
+    cy.preserveCookies();
+  });
+
+  const monetizeChannelButton = '.m-marketing__mainWrapper .mf-button';
+
+  it('should have a monetize channel button', () => {
+    cy.visit('/pay');
+
+    cy.get(monetizeChannelButton)
+      .should('be.visible')
+      .should('contain', 'Monetize your channel')
+      .click();
+
+    cy.location('pathname').should(
+      'contains',
+      '/wallet/tokens/contributions'
+    );
+  });
+});

cypress/support/commands.js

@@ -255,3 +255,36 @@ function b64toBlob(b64Data, contentType, sliceSize = 512) {
   blob.lastModifiedDate = new Date();
   return blob;
 }
+
+/**
+ * Check if certain element is on viewport
+ * @param {*} element
+ */
+Cypress.Commands.add('isInViewport', element => {
+  cy.get(element).then($el => {
+    const bottom = Cypress.$(cy.state('window')).height();
+    const rect = $el[0].getBoundingClientRect();
+
+    expect(rect.top).not.to.be.greaterThan(bottom);
+    expect(rect.bottom).not.to.be.greaterThan(bottom);
+    expect(rect.top).not.to.be.greaterThan(bottom);
+    expect(rect.bottom).not.to.be.greaterThan(bottom);
+  })
+});
+
+/**
+ * Check if certain element is on viewport
+ * @param {*} element
+ */
+Cypress.Commands.add('isNotInViewport', element => {
+  cy.get(element).then($el => {
+    const bottom = Cypress.$(cy.state('window')).height();
+    const rect = $el[0].getBoundingClientRect();
+
+    expect(rect.top).to.be.greaterThan(bottom);
+    expect(rect.bottom).to.be.greaterThan(bottom);
+    expect(rect.top).to.be.greaterThan(bottom);
+    expect(rect.bottom).to.be.greaterThan(bottom);
+  })
+});
+

src/app/common/common.module.ts

@@ -113,6 +113,9 @@ import { MarketingComponent } from './components/marketing/marketing.component';
 import { MarketingFooterComponent } from './components/marketing/footer.component';
 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';
 
 @NgModule({
   imports: [
@@ -215,6 +218,9 @@ import { MarketingAsFeaturedInComponent } from './components/marketing/as-featur
     MarketingComponent,
     MarketingFooterComponent,
     MarketingAsFeaturedInComponent,
+    SidebarMenuComponent,
+    ChartV2Component,
+    MiniChartComponent,
   ],
   exports: [
     MINDS_PIPES,
@@ -305,6 +311,7 @@ import { MarketingAsFeaturedInComponent } from './components/marketing/as-featur
     ToggleComponent,
     MarketingComponent,
     MarketingAsFeaturedInComponent,
+    SidebarMenuComponent,
   ],
   providers: [
     SiteService,

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

+<!-- <div
+  #chartContainer
+  class="m-chartV2__chartContainer"
+  [ngClass]="{ isTouchDevice: isTouchDevice }"
+>
+  <plotly-plot
+    *ngIf="init"
+    #graphDiv
+    id="graphDiv"
+    [data]="data"
+    [layout]="layout"
+    [config]="config"
+    [useResizeHandler]="true"
+    [style]="{ position: 'relative' }"
+    (hover)="onHover($event)"
+    (unhover)="onUnhover($event)"
+    (plotly_click)="onClick($event)"
+  >
+  </plotly-plot>
+</div>
+
+<div #hoverInfoDiv id="hoverInfoDiv" class="m-chartV2__hoverInfoDiv">
+  <i *ngIf="isTouchDevice" class="material-icons" (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>
+</div> -->

src/app/modules/analytics/v2/components/menu/menu.component.spec.ts → src/app/common/components/chart-v2/chart-v2.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { AnalyticsMenuComponent } from './menu.component';
+import { ChartV2Component } from './chart-v2.component';
 
-describe('AnalyticsMenuComponent', () => {
-  let component: AnalyticsMenuComponent;
-  let fixture: ComponentFixture<AnalyticsMenuComponent>;
+describe('ChartV2Component', () => {
+  let component: ChartV2Component;
+  let fixture: ComponentFixture<ChartV2Component>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [AnalyticsMenuComponent],
+      declarations: [ChartV2Component],
     }).compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(AnalyticsMenuComponent);
+    fixture = TestBed.createComponent(ChartV2Component);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
 
-  xit('should create', () => {
+  it('should create', () => {
     expect(component).toBeTruthy();
   });
 });

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

+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  HostListener,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Input,
+  ViewChild,
+  ElementRef,
+} from '@angular/core';
+// import { Subscription } from 'rxjs';
+// import { map } from 'rxjs/operators';
+// import {
+//   AnalyticsDashboardService,
+//   Timespan as TimespanBase,
+//   Buckets,
+// } from '../../dashboard.service';
+
+// import * as Plotly from 'plotly.js';
+// import chartPalette from '../../chart-palette.default';
+// import { ThemeService } from '../../../../../common/services/theme.service';
+// import isMobileOrTablet from '../../../../../helpers/is-mobile-or-tablet';
+
+@Component({
+  selector: 'm-chartV2',
+  templateUrl: './chart-v2.component.html',
+})
+export class ChartV2Component implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}
+
+// -------------------------------------------------------------------------
+
+// interface TimespanExtended extends TimespanBase {
+//   xTickFormat?: string;
+//   datePipe?: string;
+// }
+// export { TimespanExtended as Timespan };
+
+// @Component({
+//   selector: 'm-analytics__chart',
+//   templateUrl: 'chart.component.html',
+//   changeDetection: ChangeDetectionStrategy.OnPush,
+// })
+// export class AnalyticsChartComponent implements OnDestroy, OnInit {
+//   @ViewChild('graphDiv', { static: true }) graphDiv;
+//   @ViewChild('hoverInfoDiv', { static: true }) hoverInfoDivEl: ElementRef;
+//   @ViewChild('chartContainer', { static: true }) chartContainer: ElementRef;
+
+//   isTouchDevice: boolean;
+//   init: boolean = false;
+
+//   hoverInfoDiv: any;
+//   hoverInfo: any = {};
+
+//   metricSubscription: Subscription;
+//   selectedMetric$ = this.analyticsService.metrics$.pipe(
+//     map(metrics => {
+//       return metrics.find(metric => metric.visualisation !== null);
+//     })
+//   );
+//   selectedMetric;
+
+//   timespansSubscription: Subscription;
+//   selectedTimespan;
+
+//   themeSubscription: Subscription;
+//   isDark: boolean = false;
+
+//   segments: Buckets[];
+//   isComparison: boolean = false;
+
+//   data = [];
+//   layout;
+//   config = {
+//     displayModeBar: false,
+//     // responsive: true,
+//   };
+
+//   pointsPerSegment = 1;
+//   hoverPoint: number;
+//   lineRange: Array<any>;
+//   newLineRange = true;
+
+//   markerFills;
+//   shapes = [];
+//   timespanFormats = [
+//     { interval: 'day', xTickFormat: '%m/%d', datePipe: 'EEE MMM d, y' },
+//     { interval: 'month', xTickFormat: '%m/%Y', datePipe: 'MMM y' },
+//   ];
+//   datePipe: string = this.timespanFormats[0].datePipe;
+//   xTickFormat: string = this.timespanFormats[0].xTickFormat;
+//   // yTickPrefix: string = '';
+//   yTickFormat: string = '';
+
+//   // ***********************************************************
+
+//   constructor(
+//     private analyticsService: AnalyticsDashboardService,
+//     private themeService: ThemeService,
+//     protected cd: ChangeDetectorRef
+//   ) {}
+
+//   ngOnInit() {
+//     this.isTouchDevice = isMobileOrTablet();
+//     this.hoverInfoDiv = this.hoverInfoDivEl.nativeElement;
+
+//     this.timespansSubscription = this.analyticsService.timespans$.subscribe(
+//       timespans => {
+//         this.selectedTimespan = timespans.find(
+//           timespan => timespan.selected === true
+//         );
+
+//         const timespanFormat =
+//           this.timespanFormats.find(
+//             t => t.interval === this.selectedTimespan.interval
+//           ) || this.timespanFormats[0];
+
+//         this.xTickFormat = timespanFormat.xTickFormat;
+//         this.datePipe = timespanFormat.datePipe;
+
+//         if (this.init) {
+//           this.layout.xaxis.tickformat = this.xTickFormat;
+//         }
+//         this.detectChanges();
+//       }
+//     );
+
+//     this.themeSubscription = this.themeService.isDark$.subscribe(isDark => {
+//       this.isDark = isDark;
+//       if (this.init) {
+//         this.getData();
+//         this.getLayout();
+//       }
+//       this.detectChanges();
+//     });
+//     this.metricSubscription = this.selectedMetric$.subscribe(metric => {
+//       this.init = false;
+//       this.selectedMetric = metric;
+//       if (metric.unit && metric.unit === 'usd') {
+//         this.yTickFormat = '$.2f';
+//       }
+//       try {
+//         this.initPlot();
+//       } catch (err) {
+//         console.log(err);
+//       }
+//       this.detectChanges();
+//     });
+//   }
+
+//   swapSegmentColors() {
+//     const tempPaletteItem = chartPalette.segmentColorIds[0];
+//     chartPalette.segmentColorIds[0] = chartPalette.segmentColorIds[1];
+//     chartPalette.segmentColorIds[1] = tempPaletteItem;
+//   }
+
+//   initPlot() {
+//     this.segments = this.selectedMetric.visualisation.segments;
+//     if (this.segments.length === 2) {
+//       this.isComparison = true;
+
+//       // Reverse the segments so comparison line is layered behind current line
+//       this.segments.reverse();
+//       console.log(this.segments);
+
+//       // Current line should be blue
+//       this.swapSegmentColors();
+//     }
+
+//     this.pointsPerSegment = this.segments[0].buckets.length;
+
+//     for (let i = 0; i < this.pointsPerSegment; i++) {
+//       this.shapes[i] = {
+//         type: 'line',
+//         layer: 'below',
+//         x0: this.segments[0].buckets[i].date,
+//         y0: 0,
+//         x1: this.segments[0].buckets[i].date,
+//         y1: 0,
+//         line: {
+//           color: 'rgba(0, 0, 0, 0)',
+//           width: 2,
+//         },
+//       };
+//     }
+
+//     this.getData();
+//     this.getLayout();
+//     this.init = true;
+
+//     this.detectChanges();
+//   }
+
+//   getData() {
+//     this.markerFills = [];
+//     this.segments.forEach((segment, index) => {
+//       const segmentMarkerFills = [];
+//       for (let i = 0; i < this.pointsPerSegment; i++) {
+//         segmentMarkerFills[i] = this.getColor('m-white');
+//       }
+//       this.markerFills.push(segmentMarkerFills);
+//     });
+
+//     const globalSegmentSettings = {
+//       type: 'scatter',
+//       mode: 'lines+markers',
+//       line: {
+//         width: 1,
+//         dash: 'solid',
+//       },
+//       marker: {
+//         size: 7,
+//       },
+//       showlegend: false,
+//       hoverinfo: 'text',
+//       x: this.unpack(this.segments[0].buckets, 'date'),
+//     };
+
+//     this.segments.forEach((s, i) => {
+//       const segment = {
+//         ...globalSegmentSettings,
+//         line: {
+//           ...globalSegmentSettings.line,
+//           color: this.getColor(chartPalette.segmentColorIds[i]),
+//         },
+//         marker: {
+//           ...globalSegmentSettings.marker,
+//           color: this.markerFills[i],
+//           line: {
+//             color: this.getColor(chartPalette.segmentColorIds[i]),
+//             width: 1,
+//           },
+//         },
+//         y: this.unpack(this.segments[i].buckets, 'value'),
+//       };
+
+//       this.data[i] = segment;
+//     });
+
+//     if (this.isComparison) {
+//       this.data[0].line.dash = 'dot';
+//     }
+//   }
+
+//   getLayout() {
+//     this.layout = {
+//       width: 0,
+//       height: 0,
+//       autoexpand: 'true',
+//       autosize: 'true',
+//       hovermode: 'x',
+//       paper_bgcolor: this.getColor('m-white'),
+//       plot_bgcolor: this.getColor('m-white'),
+//       font: {
+//         family: 'Roboto',
+//       },
+//       xaxis: {
+//         tickformat: this.xTickFormat,
+//         tickmode: 'array',
+//         tickson: 'labels',
+//         tickcolor: this.getColor('m-grey-130'),
+//         tickangle: -45,
+//         tickfont: {
+//           color: this.getColor('m-grey-130'),
+//         },
+//         showgrid: false,
+//         showline: true,
+//         linecolor: this.getColor('m-grey-300'),
+//         linewidth: 1,
+//         zeroline: false,
+//         fixedrange: true,
+//         // automargin: true,
+//         // rangemode: 'nonnegative',
+//       },
+//       yaxis: {
+//         ticks: '',
+//         tickformat: this.yTickFormat,
+//         tickmode: 'array',
+//         tickson: 'labels',
+//         showgrid: true,
+//         gridcolor: this.getColor('m-grey-70'),
+//         zeroline: false,
+//         visible: true,
+//         side: 'right',
+//         tickfont: {
+//           color: this.getColor('m-grey-130'),
+//         },
+//         fixedrange: true,
+//         // automargin: true,
+//         // rangemode: 'nonnegative',
+//       },
+//       margin: {
+//         t: 16,
+//         b: 80,
+//         l: 0,
+//         r: 80,
+//         pad: 16,
+//       },
+//       shapes: this.shapes,
+//     };
+//   }
+
+//   onHover($event) {
+//     console.log($event);
+//     this.hoverPoint = $event.points[0].pointIndex;
+//     this.addMarkerFill();
+//     this.showShape($event);
+//     this.positionHoverInfo($event);
+//     this.populateHoverInfo();
+//     this.hoverInfoDiv.style.opacity = 1;
+//     this.detectChanges();
+//   }
+
+//   onUnhover($event) {
+//     this.emptyMarkerFill();
+//     this.hideShape();
+//     this.hoverInfoDiv.style.opacity = 0;
+//     this.detectChanges();
+//   }
+
+//   onClick($event) {
+//     if (!this.isTouchDevice) {
+//       return;
+//     }
+//     // TODO: use this for non-hover devices
+//   }
+
+//   addMarkerFill() {
+//     this.data.forEach((segment, i) => {
+//       this.markerFills[i][this.hoverPoint] = this.getColor(
+//         chartPalette.segmentColorIds[i]
+//       );
+//     });
+//   }
+
+//   emptyMarkerFill() {
+//     this.data.forEach((segment, i) => {
+//       this.markerFills[i][this.hoverPoint] = this.getColor('m-white');
+//       segment.marker.color = this.markerFills[i];
+//     });
+//   }
+
+//   showShape($event) {
+//     const hoverLine = this.shapes[this.hoverPoint];
+//     // Without this, entire graph resizes on every hover
+//     if (this.newLineRange) {
+//       this.newLineRange = false;
+//       this.lineRange = $event.yaxes[0].range;
+//     }
+
+//     hoverLine.y0 = this.lineRange[0];
+//     hoverLine.y1 = this.lineRange[1] * 0.99;
+//     hoverLine.line.color = this.getColor('m-grey-70');
+//     this.layout.shapes = this.shapes;
+//   }
+
+//   hideShape() {
+//     this.shapes[this.hoverPoint].line.color = 'rgba(0, 0, 0, 0)';
+//     this.layout.shapes = this.shapes;
+//   }
+
+//   populateHoverInfo() {
+//     const pt = this.isComparison ? 1 : 0;
+//     // TODO: format value strings here and remove ngSwitch from template?
+//     this.hoverInfo['date'] = this.segments[pt].buckets[this.hoverPoint].date;
+//     this.hoverInfo['value'] =
+//       this.selectedMetric.unit !== 'usd'
+//         ? this.segments[pt].buckets[this.hoverPoint].value
+//         : this.segments[pt].buckets[this.hoverPoint].value / 100;
+
+//     if (this.isComparison && this.segments[1]) {
+//       this.hoverInfo['comparisonValue'] =
+//         this.selectedMetric.unit !== 'usd'
+//           ? this.segments[0].buckets[this.hoverPoint].value
+//           : this.segments[0].buckets[this.hoverPoint].value / 100;
+
+//       this.hoverInfo['comparisonDate'] = this.segments[0].buckets[
+//         this.hoverPoint
+//       ].date;
+//     }
+//   }
+
+//   positionHoverInfo($event) {
+//     const pad = 16,
+//       pt = this.isComparison ? 1 : 0,
+//       xAxis = $event.points[pt].xaxis,
+//       yAxis = $event.points[pt].yaxis,
+//       pointXDist = xAxis.d2p($event.points[pt].x) + xAxis._offset,
+//       pointYDist = yAxis.d2p($event.points[pt].y) + yAxis._offset,
+//       plotRect = document
+//         .querySelector('.js-plotly-plot')
+//         .getBoundingClientRect(),
+//       hoverInfoRect = this.hoverInfoDiv.getBoundingClientRect();
+
+//     if (pointYDist < plotRect.height / 2) {
+//       // If point is in top half of plot, hoverinfo should go beneath it
+//       this.hoverInfoDiv.style.top = pointYDist + pad + 'px';
+//     } else {
+//       this.hoverInfoDiv.style.top =
+//         pointYDist - pad - hoverInfoRect.height + 'px';
+//     }
+
+//     if (pointXDist < plotRect.width / 2) {
+//       // If point is in left half of plot, hoverinfo should go on the right
+//       this.hoverInfoDiv.style.left = pointXDist + pad + 'px';
+//     } else {
+//       this.hoverInfoDiv.style.left =
+//         pointXDist - pad - hoverInfoRect.width + 'px';
+//     }
+//   }
+
+//   @HostListener('window:resize')
+//   applyDimensions() {
+//     if (this.init) {
+//       console.log(
+//         'chartcontainer: W ' +
+//           this.chartContainer.nativeElement.clientWidth +
+//           ', H ' +
+//           this.chartContainer.nativeElement.clientHeight
+//       );
+//       this.layout.width = this.chartContainer.nativeElement.clientWidth - 56; //- 32;
+//       this.layout.height = this.chartContainer.nativeElement.clientHeight;
+//       // this.layout = {
+//       //   ...this.layout,
+//       //   width: this.chartContainer.nativeElement.clientWidth, // - 32,
+//       //   height: this.chartContainer.nativeElement.clientHeight, // - 32,
+//       // };
+//       this.newLineRange = true;
+//       this.detectChanges();
+//     }
+//   }
+
+//   // * UTILITY -----------------------------------
+
+//   unpack(rows, key) {
+//     return rows.map(row => {
+//       if (key === 'date') {
+//         return row[key].slice(0, 10);
+//       } else if (this.selectedMetric.unit === 'usd') {
+//         return row[key] / 100;
+//       } else {
+//         return row[key];
+//       }
+//     });
+//   }
+
+//   getColor(colorId) {
+//     const palette = chartPalette.themeMaps;
+//     let colorCode = '#607d8b';
+
+//     if (palette.find(color => color.id === colorId)) {
+//       colorCode = palette.find(color => color.id === colorId).themeMap[
+//         +this.isDark
+//       ];
+//     }
+//     return colorCode;
+//   }
+
+//   detectChanges() {
+//     this.cd.markForCheck();
+//     this.cd.detectChanges();
+//   }
+// }
+
+/////////////////////////////////////////////////////////////////////
+// @Component({
+//   selector: 'm-graph',
+//   template: `
+//     <plotly-plot
+//       [data]="data"
+//       [layout]="_layout"
+//       [config]="_config"
+//     ></plotly-plot>
+//   `,
+// })
+// export class Graph {
+//   @Input() data;
+//   @Input() layout;
+//   @Input() config;
+
+//   get _config() {
+//     return {
+//       ...this.config,
+//       ...{
+//         displayModeBar: false,
+//       },
+//     };
+//   }
+
+//   get _layout() {
+//     return {
+//       ...this.layout,
+//       /*...{
+//         margin: {
+//           t: 0,
+//           b: 0,
+//         },
+//         },*/
+//     };
+//   }

src/app/common/components/editors/plugins/buttons.plugin.ts

@@ -443,7 +443,9 @@ export class ButtonsPlugin {
     const $input = this.$element.querySelector('.medium-media-buttons');
 
     if ($input) {
-      $input.parentNode.removeChild($input);
+      try {
+        $input.parentNode.removeChild($input);
+      } catch (e) {}
     }
   }
 

src/app/common/components/marketing/as-featured-in.component.html

@@ -6,29 +6,25 @@
   <ul class="m-grid__column-10">
     <li>
       <a
-        href="https://www.independent.co.uk/news/business/indyventure/minds-facebook-alternative-deletefacebook-social-network-data-a8475841.html"
+        href="https://www.wsj.com/articles/facebook-on-notice-as-vietnam-tightens-grip-on-social-media-11547036594"
         target="_blank"
       >
         <img
-          [src]="cdnAssetsUrl + 'assets/marketing/press-logos/independent.png'"
-          alt="Independent"
+          [src]="cdnAssetsUrl + 'assets/marketing/wsj.png'"
+          alt="The Wall Street Journal"
         />
       </a>
     </li>
+
     <li>
       <a
-        href="https://www.foxnews.com/tech/alternate-social-media-squash-extremist-content-without-violating-first-amendment"
+        href="https://www.wired.com/story/minds-anti-facebook/"
         target="_blank"
       >
-        <img
-          [src]="cdnAssetsUrl + 'assets/marketing/foxnews.png'"
-          alt="Fox News"
-        />
+        <img [src]="cdnAssetsUrl + 'assets/marketing/wired.png'" alt="Wired" />
       </a>
     </li>
-    <li *ngIf="false">
-      <img [src]="cdnAssetsUrl + 'assets/marketing/forbes.png'" alt="Forbes" />
-    </li>
+
     <li>
       <a
         href="https://techcrunch.com/2018/04/16/minds-aims-to-decentralize-the-social-network/"
@@ -40,35 +36,62 @@
         />
       </a>
     </li>
+
     <li>
       <a
-        href="https://mobile.reuters.com/article/amp/idUSKBN1K7147"
+        href="http://podcasts.joerogan.net/podcasts/bill-ottman"
         target="_blank"
       >
         <img
-          [src]="cdnAssetsUrl + 'assets/marketing/reuters.png'"
-          alt="Reuters"
+          [src]="cdnAssetsUrl + 'assets/marketing/tjre.png'"
+          alt="The Joe Rogan Experience"
         />
       </a>
     </li>
+
     <li>
       <a
-        href="https://www.wired.com/story/minds-anti-facebook/"
+        href="https://www.foxnews.com/tech/alternate-social-media-squash-extremist-content-without-violating-first-amendment"
         target="_blank"
       >
-        <img [src]="cdnAssetsUrl + 'assets/marketing/wired.png'" alt="Wired" />
+        <img
+          [src]="cdnAssetsUrl + 'assets/marketing/foxnews.png'"
+          alt="Fox News"
+        />
       </a>
     </li>
+
     <li>
       <a
-        href="http://podcasts.joerogan.net/podcasts/bill-ottman"
+        href="https://www.independent.co.uk/news/business/indyventure/minds-facebook-alternative-deletefacebook-social-network-data-a8475841.html"
         target="_blank"
       >
         <img
-          [src]="cdnAssetsUrl + 'assets/marketing/tjre.png'"
-          alt="The Joe Rogan Experience"
+          [src]="cdnAssetsUrl + 'assets/marketing/press-logos/independent.png'"
+          alt="Independent"
+        />
+      </a>
+    </li>
+
+    <li>
+      <a
+        href="https://www.reuters.com/article/us-vietnam-cyber-usa/u-s-lawmakers-urge-google-facebook-to-resist-vietnam-cybersecurity-law-idUSKBN1K7147"
+        target="_blank"
+      >
+        <img
+          [src]="cdnAssetsUrl + 'assets/marketing/reuters.png'"
+          alt="Reuters"
         />
       </a>
     </li>
+
+    <li>
+      <a
+        href="https://www.npr.org/2019/08/06/748810962/debate-over-policing-free-speech-intensifies-as-8chan-struggles-to-stay-online"
+        target="_blank"
+      >
+        <img [src]="cdnAssetsUrl + 'assets/marketing/npr.png'" alt="npr" />
+      </a>
+    </li>
   </ul>
 </div>

src/app/common/components/marketing/as-featured-in.component.scss

@@ -2,14 +2,19 @@
 
 .m-marketing__asFeaturedIn {
   max-width: 1084px;
-  margin: 40px auto 0;
+  margin: 45px auto 80px;
+
+  .m-marketing__asFeaturedIn--noMargin & {
+    margin-bottom: 0;
+  }
 
   @media screen and (max-width: $m-grid-min-vp) {
     &.m-grid {
       display: block;
+      margin-bottom: 45px;
     }
 
-    margin: 20px 0 45px;
+    margin: 20px 0 50px;
     padding: 0 12px;
   }
 
@@ -45,20 +50,8 @@
         object-fit: contain;
 
         @media screen and (max-width: $m-grid-min-vp) {
-          width: 40px;
-          height: 40px;
-        }
-      }
-
-      &.m-marketingAsFeaturedIn__item--bigger {
-        img {
-          width: 96px;
-          height: 96px;
-
-          @media screen and (max-width: $m-grid-min-vp) {
-            width: 40px;
-            height: 40px;
-          }
+          width: 32px;
+          height: 32px;
         }
       }
     }