Mark Harding · Mark Harding · Olivia Madrid · Mark Harding · Mark Harding · Olivia Madrid
--- a/.gitlab-ci.yml
+++ b/.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
--- a/src/app/common/components/android-app-download-button/button.component.scss
+++ b/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);
    }
  }
 }
--- a/src/app/modules/auth/register.component.scss
+++ b/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{

--- a/src/app/modules/channels/list.component.scss
+++ b/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;


--- a/src/app/modules/channels/sorted/module.component.scss
+++ b/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);
+          }
        }
      }
    }

--- a/src/app/modules/forms/register/register.scss
+++ b/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{

--- a/src/app/modules/groups/list.component.scss
+++ b/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;


--- a/src/app/modules/homepage/homepage.component.scss
+++ b/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);

--- a/src/app/modules/legacy/components/cards/activity/activity.component.scss
+++ b/src/app/modules/legacy/components/cards/activity/activity.component.scss
@@ -3,7 +3,7 @@
 }
 .m-pin-button {
  overflow: visible;
-  
+
  .m-tooltip--bubble {
    width:100px;
  }
@@ -93,11 +93,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);

--- a/src/app/modules/legacy/components/social-icons/social-icons.scss
+++ b/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(){

--- a/src/app/modules/marketing/marketing.component.scss
+++ b/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%;
    }
  }

--- a/src/app/modules/media/videos/list.component.scss
+++ b/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;


--- a/src/app/modules/messenger/conversation/conversation.component.scss
+++ b/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;
          }

--- a/src/app/modules/modals/modal.scss
+++ b/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;

--- a/src/app/modules/modals/share/share.html
+++ b/src/app/modules/modals/share/share.html
-<h3 i18n="@@M_SHARE__HEADER">Share what's on your Mind</h3>
+<h3 i18n="@@M_SHARE__HEADER">Share this post</h3>
 <div class="m-share__copyableLinkContainer">
  <div class="m-share__copyableLink m-border" [class.focused]="shareUrlFocused"
    (click)="applyFocus(shareUrlEl)"

--- a/src/app/modules/monetization/affiliate/link.component.scss
+++ b/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(){

--- a/src/app/modules/newsfeed/feeds/tiles.component.scss
+++ b/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);
+      }
    }
  }
 }
--- a/src/app/modules/report/creator/creator.component.scss
+++ b/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{

--- a/src/app/modules/report/juryduty/session/content.component.scss
+++ b/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;

--- a/src/app/modules/report/juryduty/session/list.component.scss
+++ b/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);
+  }
+
 }