.gitlab-ci.yml

@@ -7,7 +7,16 @@ stages:
  - test
  - build
  - prepare
- - deploy
+ - review
+ - deploy:staging
+ - deploy:canary
+ - deploy:production
+
+cache:
+ key: $CI_BUILD_REF_SLUG
+ paths:
+ - node_modules
+ policy: pull
 
 test:
  image: circleci/node:8-browsers
@@ -15,6 +24,11 @@ test:
  script:
  - npm install # Should be cached...
  - npm run test -- --no-watch --no-progress --browsers=ChromeHeadlessCI
+ cache:
+ key: $CI_BUILD_REF_SLUG
+ paths:
+ - node_modules
+ policy: pull-push
 
 build:review:
  stage: build
@@ -22,6 +36,7 @@ build:review:
  - npm install # TODO: Why is this needed?
  - npm run postinstall
  - npm install -g gulp-cli
+ - npm rebuild node-sass
  - gulp build.sass && gulp build.sass ##weird build needs to be run twice for now
  - sh build/base-locale.sh dist
  artifacts:
@@ -39,6 +54,7 @@ build:production:en:
  - npm install # TODO: Why is this needed?
  - npm run postinstall
  - npm install -g gulp-cli
+ - npm rebuild node-sass
  - gulp build.sass --deploy-url=https://cdn-assets.minds.com/front/dist/en && gulp build.sass --deploy-url=https://cdn-assets.minds.com/front/dist/en ##weird build needs to be run twice for now
  - sh build/base-locale.sh dist https://cdn-assets.minds.com/front/dist
  artifacts:
@@ -56,6 +72,7 @@ build:production:i18n:
  - npm install # TODO: Why is this needed?
  - npm run postinstall
  - npm install -g gulp-cli
+ - npm rebuild node-sass
  - gulp build.sass --deploy-url=https://cdn-assets.minds.com/front/dist/en && gulp build.sass --deploy-url=https://cdn-assets.minds.com/front/dist/en ##weird build needs to be run twice for now
  - sh build/i18n-locales-all.sh dist https://cdn-assets.minds.com/front/dist
  artifacts:
@@ -67,7 +84,7 @@ build:production:i18n:
  - master
  - test/gitlab-ci
 
-prepare:
+prepare:review:
  stage: prepare
  image: minds/ci:latest
  script:
@@ -81,8 +98,23 @@ prepare:
  - master
  - test/gitlab-ci
 
-deploy:review:
- stage: deploy
+prepare:production:
+ stage: prepare
+ image: minds/ci:latest
+ script:
+ - docker login -u gitlab-ci-token -p ${CI_BUILD_TOKEN} ${CI_REGISTRY} 
+ - docker build -t $CI_REGISTRY_IMAGE/front-init:$CI_BUILD_REF -f containers/front-init/Dockerfile dist/.
+ - docker push $CI_REGISTRY_IMAGE/front-init:$CI_BUILD_REF
+ only:
+ refs:
+ - master
+ - test/gitlab-ci
+ dependencies:
+ - build:production:en
+ - build:production:i18n
+
+review:start:
+ stage: review
  image: minds/helm-eks:latest
  script:
  - aws eks update-kubeconfig --name=sandbox
@@ -100,14 +132,14 @@ deploy:review:
  environment:
  name: review/$CI_COMMIT_REF_NAME
  url: https://$CI_BUILD_REF_SLUG.$KUBE_INGRESS_BASE_DOMAIN
- on_stop: deploy:review:stop
+ on_stop: review:stop
  except: 
  refs:
  - master
  - test/gitlab-ci
 
-deploy:review:stop:
- stage: deploy
+review:stop:
+ stage: review
  image: minds/helm-eks:latest
  script:
  - aws eks update-kubeconfig --name=sandbox
@@ -124,13 +156,73 @@ deploy:review:stop:
  - master
  - test/gitlab-ci
 
+staging:fpm:
+ stage: deploy:staging
+ image: minds/ci:latest
+ script:
+ - IMAGE_LABEL="staging"
+ ## Sync assets with CDN
+ - aws s3 sync dist $S3_REPOSITORY_URL
+ - $(aws ecr get-login --no-include-email --region us-east-1)
+ ## Update docker front-init container
+ - docker login -u gitlab-ci-token -p ${CI_BUILD_TOKEN} ${CI_REGISTRY} 
+ - docker pull $CI_REGISTRY_IMAGE/front-init:$CI_BUILD_REF
+ - docker tag $CI_REGISTRY_IMAGE/front-init:$CI_BUILD_REF $ECR_REPOSITORY_URL:$IMAGE_LABEL
+ - docker push $ECR_REPOSITORY_URL:$IMAGE_LABEL
+ ## Deploy the new container in rolling restart
+ - aws ecs update-service --service=$ECS_APP_STAGING_SERVICE --force-new-deployment --region us-east-1 --cluster=$ECS_CLUSTER
+ only:
+ refs:
+ - master
+ - test/gitlab-ci
+ dependencies:
+ - build:production:en
+ - build:production:i18n
+ environment:
+ name: staging
+ url: https://www.minds.com/?canary=1 # requires canary cookie
+
+deploy:canary:
+ stage: deploy:canary
+ image: minds/ci:latest
+ script:
+ - IMAGE_LABEL="canary"
+ ## Sync assets with CDN
+ - aws s3 sync dist $S3_REPOSITORY_URL
+ - $(aws ecr get-login --no-include-email --region us-east-1)
+ ## Update docker front-init container
+ - docker login -u gitlab-ci-token -p ${CI_BUILD_TOKEN} ${CI_REGISTRY} 
+ - docker pull $CI_REGISTRY_IMAGE/front-init:$CI_BUILD_REF
+ - docker tag $CI_REGISTRY_IMAGE/front-init:$CI_BUILD_REF $ECR_REPOSITORY_URL:$IMAGE_LABEL
+ - docker push $ECR_REPOSITORY_URL:$IMAGE_LABEL
+ ## Deploy the new container in rolling restart
+ - aws ecs update-service --service=$ECS_APP_CANARY_SERVICE --force-new-deployment --region us-east-1 --cluster=$ECS_CLUSTER
+ only:
+ refs:
+ - master
+ - test/gitlab-ci
+ dependencies:
+ - build:production:en
+ - build:production:i18n
+ environment:
+ name: canary
+ url: https://www.minds.com/?canary=1 # requires canary cookie
+ when: manual
+ allow_failure: false # prevents auto deploy to full production
 
 deploy:production:
- stage: deploy
+ stage: deploy:production
  image: minds/ci:latest
  script:
- - aws s3 sync dist $REPOSITORY_URL
- - aws ecs update-service --service=$SERVICE --force-new-deployment --region us-east-1 --cluster=$CLUSTER
+ - IMAGE_LABEL="production"
+ - $(aws ecr get-login --no-include-email --region us-east-1)
+ ## Update docker front-init container
+ - docker login -u gitlab-ci-token -p ${CI_BUILD_TOKEN} ${CI_REGISTRY} 
+ - docker pull $CI_REGISTRY_IMAGE/front-init:$CI_BUILD_REF
+ - docker tag $CI_REGISTRY_IMAGE/front-init:$CI_BUILD_REF $ECR_REPOSITORY_URL:$IMAGE_LABEL
+ - docker push $ECR_REPOSITORY_URL:$IMAGE_LABEL
+ ## Deploy the new container in rolling restart
+ - aws ecs update-service --service=$ECS_APP_PRODUCTION_SERVICE --force-new-deployment --region us-east-1 --cluster=$ECS_CLUSTER
  only:
  refs:
  - master
@@ -140,3 +232,6 @@ deploy:production:
  - build:production:i18n
  environment:
  name: production
+ url: https://www.minds.com
+ when: delayed
+ start_in: 2 hours # reduce? can always be deployed manually earlier too

src/app/common/components/android-app-download-button/button.component.scss

 .m-androidApp__download {
  box-sizing: border-box;
- border: 2px solid rgba(255,255,255,0.6);
  border-radius: 8px;
- background: #111;
+ @include m-theme(){
+ border: 1px solid rgba(themed($m-white-always), 0.7);
+ background: themed($m-black-always);
+ }
 
  display: block;
  position: relative;
  text-decoration: none;
 
  height: 48px;
- padding: 0 8px;
+ padding: 2px 8px 0 8px;
  margin: auto;
 
  cursor: pointer;
@@ -32,13 +34,13 @@
  -webkit-font-smoothing: antialiased;
 
  @include m-theme(){
- color: themed($m-white);
+ color: themed($m-white-always);
  }
  }
 
  i.material-icons {
  @include m-theme(){
- color: themed($m-white);
+ color: themed($m-white-always);
  }
  }
 }

src/app/modules/auth/register.component.scss

@@ -104,7 +104,6 @@
  padding:0;
  }
  .mdl-card__title{
- //color: #FFF !important;
  display:none;
  }
  .m-login-box input{

src/app/modules/channels/channel.component.scss

@@ -262,9 +262,14 @@ m-channel{
  font-size: 28px;
  margin: 0;
  }
+ .minds-button-edit > button {
+ font-size:16px;
+ }
+ minds-user-dropdown > button {
+ font-size:24px;
+ }
  button{
  border:0;
- font-size:16px;
  margin-right:-26px;
  }
  }

src/app/modules/channels/list.component.scss

@@ -3,7 +3,6 @@
  flex-direction: row;
  flex-wrap: row;
  flex-flow: row wrap;
- //background: #FFF;
  max-width: 1280px;
  margin: auto;
 

src/app/modules/channels/sorted/module.component.scss

@@ -42,9 +42,11 @@ m-channels--sorted-module {
  width: 100%;
  height: 100%;
  display: inline-block;
- background-color: #333;
  background-position: center center;
  background-size: cover;
+ @include m-theme(){
+ background-color: themed($m-grey-900);
+ }
  }
 
  > i.material-icons {
@@ -53,7 +55,9 @@ m-channels--sorted-module {
 
  &.m-mature-module-thumbnail {
  transform-style: preserve-3d;
- background-color: rgba(0, 0, 0, 0.65);
+ @include m-theme(){
+ background-color: rgba(themed($m-black), 0.65);
+ }
 
  > .m-channels--sorted-module__TileImage {
  filter: blur(5px) grayscale(100%);
@@ -68,7 +72,9 @@ m-channels--sorted-module {
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3em;
- color: #fff;
+ @include m-theme(){
+ color: themed($m-white);
+ }
  }
  }
  }

src/app/modules/forms/register/register.scss

@@ -22,7 +22,6 @@ minds-form-register{
 
  //this is exactly the same as modal.scss
  .m-fb-register-button{
- color: #3b5998;
  width: 170px;
  border: 0;
  cursor:pointer;
@@ -31,15 +30,18 @@ minds-form-register{
  padding: 0;
  margin: 0;
  margin-left: 8px;
- border: 1px solid #3b5998;
  @include m-theme(){
  background-color: themed($m-white);
+ color: themed($m-facebook);
+ border: 1px solid themed($m-facebook);
  }
 
  .m-social-icons-icon-inline{
- fill: #3b5998;
  vertical-align: middle;
  display: inline-block;
+ @include m-theme(){
+ fill: themed($m-facebook);
+ }
  }
 
  .m-signup-button-text{

src/app/modules/groups/list.component.scss

@@ -3,7 +3,6 @@
  flex-direction: row;
  flex-wrap: row;
  flex-flow: row wrap;
- //background: #FFF;
  max-width: 1280px;
  margin: auto;
 

src/app/modules/homepage/homepage.component.scss

@@ -92,8 +92,6 @@
  font-weight: 800;
  letter-spacing: 1.25px;
  line-height: 1;
- //color: rgba(255,255,255,0.85);
- //color: rgba(0,0,0,0.85);
 
  @media screen and (max-width: 720px){
  font-size: 42px;
@@ -102,7 +100,6 @@
 
  h3 {
  font-size: 26px;
- //color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
  letter-spacing: 0.25px;
  line-height: 1.25;
@@ -131,7 +128,6 @@
  padding:0;
  }
  .mdl-card__title{
- //color: #FFF !important;
  display:none;
  }
  .m-login-box input{
@@ -142,7 +138,6 @@
  text-rendering: optimizeLegibility;
  font-family: 'Roboto', Helvetica, sans-serif;
  letter-spacing: 1px;
- //box-shadow: 0 0 6px rgba(255,255,255,0.22);
  @include m-theme(){
  background:rgba(themed($m-white),0.9);
  color:themed($m-grey-800);

src/app/modules/legacy/components/buttons/user-dropdown.ts

@@ -18,6 +18,7 @@ import { BlockListService } from "../../../../common/services/block-list.service
  <ul class="minds-dropdown-menu" [hidden]="!showMenu" >
  <li class="mdl-menu__item" [hidden]="user.blocked" (click)="block()" i18n="@@MINDS__BUTTONS__USER_DROPDOWN__BLOCK">Block @{{user.username}}</li>
  <li class="mdl-menu__item" [hidden]="!user.blocked" (click)="unBlock()" i18n="@@MINDS__BUTTONS__USER_DROPDOWN__UNBLOCK">Un-Block @{{user.username}}</li>
+ <li class="mdl-menu__item" [hidden]="user.subscribed" (click)="subscribe()" i18n="@@MINDS__BUTTONS__USER_DROPDOWN__SUBSCRIBE">Subscribe</li>
  <li class="mdl-menu__item" [hidden]="!user.subscribed" (click)="unSubscribe()" i18n="@@MINDS__BUTTONS__USER_DROPDOWN__UNSUBSCRIBE">Unsubscribe</li>
  <li class="mdl-menu__item" *ngIf="session.isAdmin()" [hidden]="user.banned !== 'yes'" (click)="unBan()" i18n="@@MINDS__BUTTONS__USER_DROPDOWN__UNBAN_GLOBALLY">Un-ban globally</li>
  <li class="mdl-menu__item"
@@ -185,6 +186,17 @@ export class UserDropdownButton {
  this.showMenu = false;
  }
 
+ subscribe() {
+ this.user.subscribed = true;
+ this.client.post('api/v1/subscribe/' + this.user.guid, {})
+ .then((response: any) => {
+ this.user.subscribed = true;
+ })
+ .catch((e) => {
+ this.user.subscribed = false;
+ });
+ }
+
  unSubscribe() {
  this.user.subscribed = false;
  this.client.delete('api/v1/subscribe/' + this.user.guid, {})
@@ -247,7 +259,6 @@ export class UserDropdownButton {
  e.stopPropagation();
  if (this.showMenu) {
  this.showMenu = false;
-
  return;
  }
  this.showMenu = true;

src/app/modules/legacy/components/cards/activity/activity.component.scss

@@ -99,11 +99,9 @@ minds-activity {
  line-height: 9px;
  border-radius: 3px;
  vertical-align: middle;
- //text-align: center;
  display: flex;
  justify-content: space-around;
  max-width: 300px;
- //box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.07), 0 4px 2px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.07);
 
  @include m-theme(){
  background-color: themed($m-white);

src/app/modules/legacy/components/cards/activity/activity.component.spec.ts

@@ -221,6 +221,7 @@ export class RemindMock {
  @Input() object;
  @Input() events;
  @Input() boosted;
+ @Output() matureVisibilityChange: EventEmitter<any> = new EventEmitter<any>();
 }
 
 @Component({

src/app/modules/legacy/components/cards/activity/activity.html

@@ -61,14 +61,14 @@
 
  <div m-read-more class="mdl-card__supporting-text message m-mature-message" [class.m-activity--message-remind]="activity.remind_object"
  [hidden]="!activity.message || editing">
- <a class="m-mature-text-toggle" (click)="activity.mature_visibility = !activity.mature_visibility"
+ <a class="m-mature-text-toggle" (click)="toggleMatureVisibility()"
  *ngIf="attachment.shouldBeBlurred(activity) || attachment.isForcefullyShown(activity)"
  [ngClass]="{ 'mdl-color-text--red-500': attachment.isForcefullyShown(activity) }">
  <i class="material-icons m-material-icons-inline">explicit</i>
  </a>
 
  <span class="m-mature-message-content" [innerHtml]="activity.message | tags" [ngClass]="{ 'm-mature-text': attachment.shouldBeBlurred(activity) }"
- (click)="activity.mature && !activity.mature_visibility ? activity.mature_visibility = !activity.mature_visibility : null">
+ (click)="activity.mature && !activity.mature_visibility ? toggleMatureVisibility(): null">
  </span>
  <m-read-more--button></m-read-more--button>
  </div>
@@ -127,7 +127,7 @@
  <div class="m-rich-embed"
  *ngIf="activity.perma_url && activity.title"
  [ngClass]="{ 'm-mature-content': attachment.shouldBeBlurred(activity), 'm-mature-content-shown': attachment.isForcefullyShown(activity) }">
- <div class="m-mature-overlay" (click)="activity.mature_visibility = !activity.mature_visibility">
+ <div class="m-mature-overlay" (click)="toggleMatureVisibility()">
  <span class="m-mature-overlay-note">
  <i class="material-icons" title="Mature content" i18n-title="@@M__COMMON__MATURE_CONTENT">explicit</i>
  <span i18n="@@M__COMMON__CONFIRM_18">Click to confirm your are 18+</span>
@@ -157,7 +157,7 @@
  <div class="item item-image item-image-video m-activity--video"
  [ngClass]="{ 'm-mature-content': attachment.shouldBeBlurred(activity), 'm-mature-content-shown': attachment.isForcefullyShown(activity) }"
  *ngIf="activity.custom_type == 'video'">
- <div class="m-mature-overlay" (click)="activity.mature_visibility = !activity.mature_visibility">
+ <div class="m-mature-overlay" (click)="toggleMatureVisibility()">
  <span class="m-mature-overlay-note">
  <i class="material-icons" title="Mature content" i18n-title="@@M__COMMON__MATURE_CONTENT">explicit</i>
  <span i18n="@@M__COMMON__CONFIRM_18">Click to confirm your are 18+</span>
@@ -183,7 +183,7 @@
  <div class="item item-image allow-select m-activity--image"
  [ngClass]="{ 'm-mature-content': attachment.shouldBeBlurred(activity), 'm-mature-content-shown': attachment.isForcefullyShown(activity) }"
  *ngIf="activity.thumbnail_src && !activity.perma_url">
- <div class="m-mature-overlay" (click)="activity.mature_visibility = !activity.mature_visibility">
+ <div class="m-mature-overlay" (click)="toggleMatureVisibility()">
  <span class="m-mature-overlay-note">
  <i class="material-icons" title="Mature content" i18n-title="@@M__COMMON__MATURE_CONTENT">explicit</i>
  <span i18n="@@M__COMMON__CONFIRM_18">Click to confirm your are 18+</span>
@@ -199,7 +199,7 @@
  <div class="item item-image allow-select"
  [ngClass]="{ 'm-mature-content': attachment.shouldBeBlurred(activity), 'm-mature-content-shown': attachment.isForcefullyShown(activity) }"
  *ngIf="activity.custom_type == 'batch'">
- <div class="m-mature-overlay" (click)="activity.mature_visibility = !activity.mature_visibility">
+ <div class="m-mature-overlay" (click)="toggleMatureVisibility()">
  <span class="m-mature-overlay-note">
  <i class="material-icons" title="Mature content" i18n-title="@@M__COMMON__MATURE_CONTENT">explicit</i>
  <span i18n="@@M__COMMON__CONFIRM_18">Click to confirm your are 18+</span>
@@ -215,7 +215,12 @@
  <!-- Reminds -->
  <div *ngIf="activity.remind_object">
  <ng-container *ngIf="!isOwnerBlocked(activity.remind_object); else blockedRemindTemplate">
- <minds-remind [object]="activity.remind_object" [events]="childEventsEmitter" [boosted]="activity.boosted"></minds-remind>
+ <minds-remind
+ [object]="activity.remind_object"
+ [events]="childEventsEmitter"
+ [boosted]="activity.boosted"
+ (matureVisibilityChange)="onRemindMatureVisibilityChange()"
+ ></minds-remind>
  </ng-container>
  <ng-template #blockedRemindTemplate>
  <div class="m-activity__blockedRemind">

src/app/modules/legacy/components/cards/activity/activity.ts

@@ -417,6 +417,25 @@ export class Activity implements OnInit {
  return activity && activity.pending && activity.pending !== '0';
  }
 
+ toggleMatureVisibility() {
+ this.activity.mature_visibility = !this.activity.mature_visibility;
+
+ if (this.activity.remind_object) {
+ // this.activity.remind_object.mature_visibility = !this.activity.remind_object.mature_visibility;
+
+ this.activity.remind_object = Object.assign({}, {
+ ...this.activity.remind_object,
+ mature_visibility: !this.activity.remind_object.mature_visibility
+ });
+ }
+
+ this.detectChanges();
+ }
+
+ onRemindMatureVisibilityChange() {
+ this.activity.mature_visibility = !this.activity.mature_visibility;
+ }
+
  detectChanges() {
  this.cd.markForCheck();
  this.cd.detectChanges();

src/app/modules/legacy/components/cards/remind/remind.ts

-import { Component, ChangeDetectionStrategy, ChangeDetectorRef, EventEmitter, Input } from '@angular/core';
+import { Component, ChangeDetectionStrategy, ChangeDetectorRef, EventEmitter, Input, Output } from '@angular/core';
 import { Router } from "@angular/router";
 
 import { Client } from '../../../../../services/api';
@@ -38,6 +38,8 @@ export class Remind {
  menuOptions: any = [];
  canDelete: boolean = false;
 
+ @Output('matureVisibilityChange') onMatureVisibilityChange: EventEmitter<any> = new EventEmitter<any>();
+
  constructor(
  public session: Session,
  public client: Client,
@@ -127,8 +129,13 @@ export class Remind {
 
  menuOptionSelected(e) { /* NOOP */ }
 
- showMediaModal(subtype: string) {
+ toggleMatureVisibility() {
+ this.activity.mature_visibility = !this.activity.mature_visibility;
 
+ this.onMatureVisibilityChange.emit();
+ }
+
+ showMediaModal(subtype: string) {
  // Mobile users go to media page instead of modal
  if (isMobile()) {
  this.router.navigate([`/media/${this.activity.entity_guid}`]);

src/app/modules/legacy/components/social-icons/social-icons.scss

@@ -27,10 +27,14 @@
  }
  }
  .m-social-icons-icon--facebook .m-social-icons-icon-inline{
- background-color: #3067a3 !important;
+ @include m-theme(){
+ background-color: themed($m-facebook) !important;
+ }
  }
  .m-social-icons-icon--twitter .m-social-icons-icon-inline{
- background-color: #03b3ee !important;
+ @include m-theme(){
+ background-color: themed($m-twitter) !important;
+ }
  }
  .m-social-icons-icon--email .m-social-icons-icon-inline{
  @include m-theme(){
@@ -38,10 +42,14 @@
  }
  }
  .m-social-icons-icon--linkedin .m-social-icons-icon-inline{
- background-color: #0071a1 !important;
+ @include m-theme(){
+ background-color: themed($m-linkedin) !important;
+ }
  }
  .m-social-icons-icon--gplus .m-social-icons-icon-inline{
- background-color: #e15440 !important;
+ @include m-theme(){
+ background-color: themed($m-red) !important;
+ }
  }
  .m-social-icons-icon--embed .m-social-icons-icon-inline{
  @include m-theme(){

src/app/modules/marketing/marketing.component.scss

@@ -27,7 +27,7 @@
 
  .m-marketing--header-inner, .m-marketingHeader__inner,
  .m-marketing--hero-inner, .m-marketingHero__inner,
- .m-marketing--hero--inner { 
+ .m-marketing--hero--inner {
  display: flex;
  flex-direction: row;
  align-items: center;
@@ -95,7 +95,6 @@
 
  h3 {
  font-size: 26px;
- //color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
  letter-spacing: 0.25px;
  line-height: 1.25;
@@ -407,7 +406,7 @@
  }
 
  .m-marketing--section--subsection-image {
- img { 
+ img {
  max-width: 100%;
  }
  }

src/app/modules/media/modal/modal.component.html

@@ -13,16 +13,25 @@
  (mouseleave)="hovering=false"
  [class.m-mediaModal__fullscreenButton--active]="hovering"
  >
- <i *ngIf="!isFullscreen" class="material-icons">fullscreen</i>
- <i *ngIf="isFullscreen" class="material-icons">fullscreen_exit</i>
- <!-- <m-tooltip *ngIf="!isFullscreen" [anchor]="right" icon="fullscreen">Fullscreen</m-tooltip>
- <m-tooltip *ngIf="isFullscreen" [anchor]="right" icon="fullscreen_exit">Exit fullscreen</m-tooltip> -->
+ <i *ngIf="!isFullscreen" class="material-icons m-mediaModal__fullscreenIcon--enable">fullscreen</i>
+ <i *ngIf="isFullscreen" class="material-icons m-mediaModal__fullscreenIcon--disable">fullscreen_exit</i>
  </div>
  </div>
  </div>
  <!-- Media: video -->
  <div class="m-mediaModal__theater m-mediaModal__theater--video" *ngIf="entity.modal_subtype === 'video'">
- <!-- TODO OJM video theater with no full screen -->
+ <m-video
+ width="100%"
+ height="300px"
+ [muted]="false"
+ [poster]="entity.custom_data.thumbnail_src"
+ [src]="[{ 'res': '360', 'uri': 'api/v1/media/' + entity.custom_data.guid + '/play', 'type': 'video/mp4' }]"
+ [guid]="entity.custom_data.guid"
+ [playCount]="entity['play:count']"
+ [torrent]="[{ res: '360', key: entity.custom_data.guid + '/360.mp4' }]"
+ #player>
+ <video-ads [player]="player" *ngIf="activity.monetized"></video-ads>
+ </m-video>
  </div>
  <!-- </div> -->
  <div class="m-mediaModal__contentWrapper">
@@ -72,7 +81,17 @@
  </div>
  <!-- Comments -->
  <div class="m-mediaModal__commentsWrapper" *ngIf="entity.guid">
- <m-comments__tree [entity]="entity"></m-comments__tree>
+ <m-comments__tree
+ *ngIf="group?.guid"
+ class="m-group__chat"
+ [limit]="24"
+ [entity]="entity"
+ [conversation]="true"
+ [canDelete]="group['is:moderator'] || group['is:creator']"
+ [readonly]="!group['is:member']"
+ [scrollable]="true"
+ >
+ </m-comments__tree>
  </div>
  </div>
 </div>

src/app/modules/media/modal/modal.component.scss

@@ -19,13 +19,11 @@ m-media--modal {
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
- border: 1px solid salmon;
  max-height: 100%;
  max-height: 98vh;
 
 
  .m-mediaModal__theater {
- border: 1px solid gold;
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
@@ -95,25 +93,31 @@ m-media--modal {
 
  // TODO OJM fullscreen styles e.g. .myClass:not(:fullscreen)
  .m-mediaModal__fullscreenButton {
- font-size: 28px;
  @include m-theme(){
  color: themed($m-white-always);
  }
- transition: transform 200ms linear;
+ transition: transform 150ms ease;
+
 
  // .m-tooltip--bubble {
  // right: 8px;
  // }
 
+
  &.m-mediaModal__fullscreenButton--active {
- transform: scale(1.2);
+ .m-mediaModal__fullscreenIcon--enable {
+ transform: scale(1.2);
+ }
+ .m-mediaModal__fullscreenIcon--disable {
+ transform: scale(0.83);
+ }
  }
 
- &:hover {
- // TODO OJM: add --active class on hover and transform: scale(1.2)?
-  // i {
-  // font-size:32px;
- // }
+ .m-mediaModal__fullscreenIcon--disable {
+ font-size: 28px;
+ }
+ .m-mediaModal__fullscreenIcon--disable {
+ font-size: 34px;
  }
  }
  }
@@ -121,16 +125,15 @@ m-media--modal {
 
  // * Content ********************************************
 
- // TODO OJM see .m-group--conversation
  .m-mediaModal__contentWrapper {
- border: 1px solid green;
+ // border: 1px solid green;
  display: flex;
  flex-direction: column;
  width: calc(33% - 12px); //1/3rd of screen
  // width: 300px;
  min-width: 300px;
 
- height: 100%; // TODO check this vh fallback
+ height: 100%;
  height: 90vh;
  padding: 16px;
  font-family: 'Roboto', Helvetica, sans-serif;

src/app/modules/media/videos/list.component.scss

@@ -3,7 +3,6 @@
  flex-direction: row;
  flex-wrap: row;
  flex-flow: row wrap;
- //background: #FFF;
  max-width: 1280px;
  margin: auto;
 

src/app/modules/messenger/conversation/conversation.component.scss

@@ -46,7 +46,6 @@
  &.odd{
  text-align:left;
  .m-messenger--conversation-message-bubble{
- //color:#FFF !important;
  @include m-theme(){
  background-color: themed($m-blue-grey-100) !important;
  }

src/app/modules/modals/modal.scss

@@ -20,7 +20,6 @@ m-modal-signup, m-modal-signup-on-action{
  .mdl-card__title{
  flex-wrap: wrap;
  margin-bottom: 0;
- //padding-bottom: 0;
 
  img{
  width: 168px;
@@ -129,10 +128,14 @@ m-modal-share {
  margin: 0 4px;
  }
  .m-social-share-twitter {
- background: #4099FF !important;
+ @include m-theme(){
+ background: themed($m-twitter) !important;
+ }
  }
  .m-social-share-fb {
- background: #335795 !important;
+ @include m-theme(){
+ background: themed($m-facebook) !important;
+ }
  }
  .m-social-share-email {
  @include m-theme(){

src/app/modules/monetization/affiliate/link.component.scss

@@ -24,10 +24,14 @@
  padding:24px 0 0;
 
  .m-affiliate--link-buttons-twitter{
- background:#4099FF !important;
+ @include m-theme(){
+ background: themed($m-twitter) !important;
+ }
  }
  .m-affiliate--link-buttons-fb{
- background:#335795 !important;
+ @include m-theme(){
+ background: themed($m-facebook) !important;
+ }
  }
  .m-affiliate--link-buttons-email{
  @include m-theme(){

src/app/modules/newsfeed/feeds/tiles.component.scss

@@ -11,7 +11,9 @@ m-newsfeed__tiles {
  margin: auto;
 
  &.m-newsfeed__tiles--has-elements {
- background: #ffffff;
+ @include m-theme(){
+ background: themed($m-white);
+ }
  padding: 8px;
  }
 
@@ -24,7 +26,9 @@ m-newsfeed__tiles {
  margin: 4px;
  overflow: hidden;
  transform-style: preserve-3d;
- background-color: rgba(0, 0, 0, 0.65);
+ @include m-theme(){
+ background-color: rgba(themed($m-black), 0.65);
+ }
 
  &.m-newsfeed-tiles__Tile--is-mature > img {
  filter: blur(5px) grayscale(100%);
@@ -45,9 +49,11 @@ m-newsfeed__tiles {
  position: absolute;
  bottom: 4px;
  right: 4px;
- color: #fff;
- text-shadow: 1px 1px rgba(0, 0, 0, .35);
  pointer-events: none;
+ @include m-theme(){
+ color: themed($m-white);
+ text-shadow: 1px 1px rgba(themed($m-black), .35);
+ }
  }
 
  i.material-icons.mature-icon {
@@ -57,7 +63,9 @@ m-newsfeed__tiles {
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3em;
- color: #fff;
+ @include m-theme(){
+ color: themed($m-white);
+ }
  }
  }
 }

src/app/modules/notifications/notification.component.html

@@ -398,7 +398,7 @@
 
  <!-- Boost revoked -->
  <ng-template ngSwitchCase="boost_revoked">
- <a [routerLink]="notification.entityObj.type == 'activity' ? ['/newsfeed', notification.entityObj.guid] : ['/boost/console/content']">
+ <a [routerLink]="notification.entityObj && notification.entityObj.type == 'activity' ? ['/newsfeed', notification.entityObj.guid] : ['/boost/console/content']">
  <p><ng-container i18n="@@NOTIFICATIONS__NOTIFICATION__BOOST_REVOKED__BOOST_FOR">You revoked your boost <span *ngIf="notification.entityObj">for </span></ng-container>
  <span class="pseudo-link mdl-color-text--blue-grey-400" *ngIf="notification.entityObj && notification.entityObj.title">{{notification.entityObj.title | excerpt}}</span>
  <span class="pseudo-link mdl-color-text--blue-grey-400" *ngIf="notification.entityObj && !notification.entityObj.title && notification.entityObj.name">{{notification.entityObj.name}}</span>

src/app/modules/report/creator/creator.component.scss

@@ -19,12 +19,15 @@
  }
  border-radius: 24px;
  font-weight: 600;
- /* background: #fafafa; */
 
  &.m-reportCreatorSubjects__subject--active {
- border-color: #4690D6;
+ @include m-theme(){
+ border-color: themed($m-blue);
+ }
  span {
- color: #4690D6;
+ @include m-theme(){
+ color: themed($m-blue);
+ }
  }
  }
 
@@ -38,13 +41,17 @@
  text-rendering: optimizeLegibility;
  font-size: 16px;
  font-weight: 500;
- color: #555;
  cursor: pointer;
+ @include m-theme(){
+ color: themed($m-grey-700);
+ }
  }
 
  i {
- color: #888;
  display: none;
+ @include m-theme(){
+ color: themed($m-grey-400);
+ }
  }
 
  //&:last-child{

src/app/modules/report/juryduty/session/content.component.scss

 .m-juryDutySession__content {
- background: #FFF;
  padding: 16px;
+ @include m-theme(){
+ background: themed($m-white);
+ }
 
  h3 {
  margin: 0;

src/app/modules/report/juryduty/session/list.component.scss

@@ -4,13 +4,16 @@
  padding: 0;
 }
 .m-juryDutySessionList__item {
- margin-bottom: 16px; 
+ margin-bottom: 16px;
 }
 
 .m-juryDutySessionList__number {
  font-size: 56px;
  font-weight: 800;
- color: #444;
  padding: 32px;
  display: block;
+ @include m-theme(){
+ color: themed($m-grey-800);
+ }
+
 }

src/app/modules/report/juryduty/session/session.component.scss

 .m-juryDutySession__hero {
- background: #132552;
  padding: 42px 0;
  text-align: center;
+ @include m-theme(){
+ background: themed($m-blue-grey-800);
+ }
 
  i {
  font-size: 112px;
- color: #FFF;
+ @include m-theme(){
+ color: themed($m-white);
+ }
  }
 }
 
@@ -20,6 +24,8 @@
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
- color: #666;
+ @include m-theme(){
+ color: themed($m-grey-600);
+ }
  }
 }
\ No newline at end of file

src/app/modules/report/marketing/marketing.component.scss

 .m-reports__marketing {
 
- 
+
 
  .m-marketing__hero {
- background-color: #132552 !important;
  padding-bottom: 72px;
+ @include m-theme(){
+ background-color: themed($m-blue-grey-800) !important;
+ }
 
  .m-marketingHero__inner {
  padding-top: 0;
@@ -12,18 +14,22 @@
  }
 
  .m-btn {
- color: #FFF;
- border-color: #FFF;
  margin-top: 32px;
+ @include m-theme(){
+ color: themed($m-white);
+ border-color: themed($m-white);
+ }
  }
  }
 
  .m-marketingHero__actions {
  i {
- color: #FFF;
  font-size: 170px;
  text-align: center;
  width: 100%;
+ @include m-theme(){
+ color: themed($m-white);
+ }
  }
  }
 }
@@ -39,7 +45,9 @@
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
- color: #666;
+ @include m-theme(){
+ color: themed($m-grey-600);
+ }
  }
 
  .m-layout__row {
@@ -56,8 +64,10 @@
  b {
  font-size: 72px;
  line-height: 1;
- color: #444;
  display: block;
+ @include m-theme(){
+ color: themed($m-grey-800);
+ }
  }
 
  span {
@@ -65,9 +75,11 @@
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-weight: 500;
- color: #555;
  margin-top: 16px;
  display: block;
+ @include m-theme(){
+ color: themed($m-grey-700);
+ }
  }
 
 }
@@ -76,15 +88,19 @@
  list-style: decimal;
  font-size: 24px;
  font-weight: 800;
- color: #aaa;
+ @include m-theme(){
+ color: themed($m-grey-200);
+ }
 
  li {
  padding: 16px;
 
  p {
  font-size: 24px;
- color: #555;
  font-weight: 500;
+ @include m-theme(){
+ color: themed($m-grey-700);
+ }
  }
  }
 
@@ -97,12 +113,14 @@
 
  li {
  width: 50%;
- color: #888;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  cursor: default;
  padding: 0;
+ @include m-theme(){
+ color: themed($m-grey-400);
+ }
 
  @media screen and (max-width: 890px) {
  width: 100%;

src/app/modules/search/search.component.scss

@@ -194,8 +194,6 @@ m-search--bar-suggestions{
 m-search {
  display: block;
  min-height: 100vh;
- //background-color: themed($m-white);
- //background: rgba(252,252,252,1);
  padding-top: 42px;
 
  .m-toolbar {

src/app/modules/third-party-networks/third-party-networks.scss

@@ -15,12 +15,12 @@
  text-decoration:none;
  }
 
- background-color: #3067a3 !important;
  padding:8px;
  font-weight:bold;
  cursor:pointer;
  @include m-theme(){
  color: themed($m-white);
+ background-color: themed($m-facebook) !important;
  }
 }
 

src/app/modules/wallet/balances/balance.component.scss

@@ -141,14 +141,18 @@ m-wallet--balance-money, m-wallet--balance-reward, m-wallet--balance-tokens {
  .m-btn--slim {
  height: 30px;
  margin: 0 0 0 28px;
- color: #888; 
+ @include m-theme(){
+ color: themed($m-grey-400);
+ }
  }
 
  p {
  text-align: left;
  margin: 0;
  padding: 0 8px;
- color: #666;
+ @include m-theme(){
+ color: themed($m-grey-600);
+ }
  }
 
 }

src/app/modules/wallet/tokens/referrals/links/links.component.scss

@@ -145,19 +145,27 @@
  }
 
  .m-referrals-links__shareButton--twitter {
- background-color: #03b3ee;
+ @include m-theme(){
+ background-color: themed($m-twitter);
+ }
  }
 
  .m-referrals-links__shareButton--messenger {
- background-color: #0084ff;
+ @include m-theme(){
+ background-color: themed($m-messenger);
+ }
  }
 
  .m-referrals-links__shareButton--facebook {
- background-color: #3b5998;
+ @include m-theme(){
+ background-color: themed($m-facebook);
+ }
  }
 
  .m-referrals-links__shareButton--whatsapp {
- background-color: #25d366;
+ @include m-theme(){
+ background-color: themed($m-whatsapp);
+ }
  }
 
  .m-referrals-links__shareButton--sms,

src/stylesheets/components/components.scss

@@ -660,10 +660,10 @@ m-translate {
 
 svg.m-facebook-icon{
  cursor:pointer;
- background-color: #3067a3 !important;
  margin:auto;
  @include m-theme(){
  fill: themed($m-white);
+ background-color: themed($m-facebook) !important;
  }
 }
 

src/stylesheets/core/animations.scss

+@import 'themes';
+
 .m-pulsating--small {
- box-shadow: 0 0 0 red;
  animation: pulse--small 1.5s infinite;
+ @include m-theme(){
+ box-shadow: 0 0 0 themed($m-red);
+ }
 }
 
 .m-pulsating--big {
- box-shadow: 0 0 0 red;
  animation: pulse--big 2s infinite;
+ @include m-theme(){
+ box-shadow: 0 0 0 themed($m-red);
+ }
 }
 
 @keyframes pulse--small {
  20% {
- box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.6);
+ @include m-theme(){
+ box-shadow: 0 0 0 0 rgba(themed($m-red), 0.6);
+ }
  }
  99% {
- box-shadow: 0 0 0 7px rgba(244, 67, 54, 0);
+ @include m-theme(){
+ box-shadow: 0 0 0 7px rgba(themed($m-red), 0);
+ }
  }
  100% {
- box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
+ @include m-theme(){
+ box-shadow: 0 0 0 0 rgba(themed($m-red), 0);
+ }
  }
 }
 
 @keyframes pulse--big {
  0% {
- box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.4);
+ @include m-theme(){
+ box-shadow: 0 0 0 0 rgba(themed($m-red), 0.4);
+ }
  }
  70% {
- box-shadow: 0 0 0 15px rgba(244, 67, 54, 0);
+ @include m-theme(){
+ box-shadow: 0 0 0 15px rgba(themed($m-red), 0);
+ }
  }
  100% {
- box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
+ @include m-theme(){
+ box-shadow: 0 0 0 0 rgba(themed($m-red), 0);
+ }
  }
 }

src/stylesheets/themes.scss

@@ -65,7 +65,14 @@ $red-light: #e57373;
 $black: #000;
 $white: #fff;
 
+$facebook: #3b5998;
+$messenger: #0084ff;
+$twitter: #03b3ee;
+$whatsapp: #25d366;
+$linkedin: #0071a1;
+
 // Theme maps
+// e.g. m-grey-100 in light mode will become m-grey-900 in dark mode
 $themes: (
  light: (
  m-grey-950: $grey-950,
@@ -105,19 +112,25 @@ $themes: (
  m-amber-light: $amber-light,
  m-red-dark: $red-dark,
  m-red: $red,
- m-red-light: $red-light, 
+ m-red-light: $red-light,
 
  m-black: $black,
  m-black-always: $black,
  m-white: $white,
- m-white-always: $white, 
+ m-white-always: $white,
  m-body-bg: #f8f8f8,
 
  m-warn-bg: $amber-light,
  m-warn-fg: $black,
+
+ m-facebook: $facebook,
+ m-messenger: $messenger,
+ m-twitter: $twitter,
+ m-whatsapp: $whatsapp,
+ m-linkedin: $linkedin,
  ),
  dark: (
- 
+
  m-grey-950: lighten($grey-50, $percent),
  m-grey-900: lighten($grey-100, $percent),
  m-grey-800: lighten($grey-200, $percent),
@@ -143,16 +156,16 @@ $themes: (
  m-blue-grey-200: lighten($blue-grey-800, $percent),
  m-blue-grey-100: lighten($blue-grey-900, $percent),
  m-blue-grey-50: lighten($blue-grey-950, $percent),
- 
+
  m-black: $white,
  m-black-always: $black,
  m-white: lighten($grey-990, $percent),
- m-white-always: $white, 
- m-body-bg: lighten(#080808, $percent), 
+ m-white-always: $white,
+ m-body-bg: lighten(#080808, $percent),
 
- m-blue-dark: lighten($blue-dark, $percent),
+ m-blue-dark: lighten($blue-bright, 15%),
  m-blue: $blue-bright,
- m-blue-light: lighten($blue-bright, 10%),
+ m-blue-light: $blue-dark,
  m-green-dark: lighten($green-dark, $percent),
  m-green: lighten($green, $percent),
  m-green-light: lighten($green-light, $percent),
@@ -165,6 +178,12 @@ $themes: (
 
  m-warn-bg: $grey-900,
  m-warn-fg: $white,
+
+ m-facebook: $facebook,
+ m-messenger: $messenger,
+ m-twitter: $twitter,
+ m-whatsapp: $whatsapp,
+ m-linkedin: $linkedin,
  ),
 );
 
@@ -218,3 +237,9 @@ $m-red-light: 'm-red-light';
 
 $m-warn-bg: 'm-warn-bg';
 $m-warn-fg: 'm-warn-fg';
+
+$m-facebook: 'm-facebook';
+$m-messenger: 'm-messenger';
+$m-twitter: 'm-twitter';
+$m-whatsapp: 'm-whatsapp';
+$m-linkedin: 'm-linkedin';