[NEW] Rocket.Chat UI Redesign

.circleci/Dockerfile

@@ -0,0 +1,20 @@
+FROM node:4
+
+ADD . /app
+
+ENV RC_VERSION=0.57.0-designpreview \
+    DEPLOY_METHOD=docker \
+    NODE_ENV=production \
+    PORT=3000 \
+    ROOT_URL=http://localhost:3000
+
+RUN set -x \
+ && cd /app/bundle/programs/server \
+ && npm install \
+ && npm cache clear
+
+WORKDIR /app/bundle
+
+EXPOSE 3000
+
+CMD ["node", "main.js"]

.circleci/config.yml

@@ -0,0 +1,77 @@
+# Javascript Node CircleCI 2.0 configuration file
+#
+# Check https://circleci.com/docs/2.0/language-javascript/ for more details
+#
+version: 2
+jobs:
+  build:
+    docker:
+      # specify the version you desire here
+      - image: circleci/node:7.10
+
+      # Specify service dependencies here if necessary
+      # CircleCI maintains a library of pre-built images
+      # documented at https://circleci.com/docs/2.0/circleci-images/
+      # - image: circleci/mongo:3.4.4
+
+    working_directory: ~/repo
+
+    steps:
+      - checkout
+
+      - run:
+          name: Install Meteor
+          command: if [ ! -e "$HOME/.meteor/meteor" ]; then curl https://install.meteor.com | sed s/--progress-bar/-sL/g | /bin/sh; fi
+          filters:
+            branches:
+              only: color-variables
+
+      # Download and cache dependencies
+      - restore_cache:
+          key: dependency-cache-{{ checksum "package.json" }}
+          filters:
+            branches:
+              only: color-variables
+
+      - run:
+          name: Build Rocket.Chat
+          command: |
+            meteor npm install
+            set +e
+            meteor add rocketchat:lib
+            set -e
+            meteor build --server-only --directory /tmp/build
+          filters:
+            branches:
+              only: color-variables
+
+      - save_cache:
+          key: dependency-cache-{{ checksum "package.json" }}
+          paths:
+            - ./node_modules
+            - ./.meteor
+            - $HOME/.meteor
+          filters:
+            branches:
+              only: color-variables
+
+      - setup_remote_docker
+
+      - run:
+          name: Build Docker image
+          command: |
+            docker login -u $DOCKER_LOGIN -p $DOCKER_PASSWORD
+            cp .circleci/Dockerfile /tmp/build
+            cd /tmp/build
+            docker build -t rocketchat/rocket.chat:designpreview .
+            docker push rocketchat/rocket.chat:designpreview
+          filters:
+            branches:
+              only: color-variables
+      - run:
+          name: Notify on demo
+          command: |
+            curl -X POST -H 'Content-Type: application/json' --data "{\"text\":\"@here Nova [build](${CIRCLE_BUILD_URL}) pronta :marioparty:\"}" $WEBHOOK_URL
+          filters:
+            branches:
+              only: color-variables

.postcssrc

@@ -2,6 +2,11 @@
 	"plugins": {
 		"postcss-smart-import": {},
 		"postcss-cssnext": {
+			"features": {
+				"customProperties": {
+					"preserve": true
+				}
+			},
 			"browsers": [
 				"ie > 10",
 				"last 2 Edge versions",

.stylelintrc

@@ -1,5 +1,8 @@
 {
-	"rules": {
+    "plugins": [
+		"stylelint-order"
+	],
+    "rules": {
 		"at-rule-empty-line-before": [ "always", {
 			except: [
 				"blockless-after-same-name-blockless",
@@ -43,7 +46,6 @@
 		"declaration-colon-newline-after": "always-multi-line",
 		"declaration-colon-space-after": "always-single-line",
 		"declaration-colon-space-before": "never",
-		"declaration-empty-line-before": "never",
 		"font-family-no-duplicate-names": true,
 		"function-calc-no-unspaced-operator": true,
 		"function-comma-newline-after": "always-multi-line",
@@ -107,5 +109,220 @@
 		"value-list-comma-space-after": "always-single-line",
 		"value-list-comma-space-before": "never",
 		"value-list-max-empty-lines": 0,
+		"order/properties-order": [
+            [
+                {
+                    "emptyLineBefore": "always",
+                    "order": "strict",
+                    "properties": [
+                        "position",
+                        "z-index",
+                        "top",
+                        "right",
+                        "bottom",
+                        "left"
+                    ]
+                },
+                {
+                    "emptyLineBefore": "always",
+                    "order": "strict",
+                    "properties": [
+                        "display",
+                        "visibility",
+                        "float",
+                        "clear",
+                        "overflow",
+                        "overflow-x",
+                        "overflow-y",
+                        "clip",
+                        "zoom",
+                        "flex-direction",
+                        "flex-order",
+                        "flex-pack",
+                        "flex-align",
+                        "flex"
+                    ]
+                },
+                {
+                    "emptyLineBefore": "always",
+                    "order": "strict",
+                    "properties": [
+                        "box-sizing",
+                        "width",
+                        "min-width",
+                        "max-width",
+                        "height",
+                        "min-height",
+                        "max-height",
+                        "margin",
+                        "margin-top",
+                        "margin-right",
+                        "margin-bottom",
+                        "margin-left",
+                        "padding",
+                        "padding-top",
+                        "padding-right",
+                        "padding-bottom",
+                        "padding-left"
+                    ]
+                },
+                {
+                    "emptyLineBefore": "always",
+                    "order": "strict",
+                    "properties": [
+                        "table-layout",
+                        "empty-cells",
+                        "caption-side",
+                        "border-spacing",
+                        "border-collapse",
+                        "list-style",
+                        "list-style-position",
+                        "list-style-type",
+                        "list-style-image"
+                    ]
+                },
+                {
+                    "emptyLineBefore": "always",
+                    "order": "strict",
+                    "properties": [
+                        "content",
+                        "quotes",
+                        "counter-reset",
+                        "counter-increment",
+                        "resize",
+                        "cursor",
+                        "user-select",
+                        "nav-index",
+                        "nav-up",
+                        "nav-right",
+                        "nav-down",
+                        "nav-left",
+                        "transition",
+                        "transition-delay",
+                        "transition-timing-function",
+                        "transition-duration",
+                        "transition-property",
+                        "transform",
+                        "transform-origin",
+                        "animation",
+                        "animation-name",
+                        "animation-duration",
+                        "animation-play-state",
+                        "animation-timing-function",
+                        "animation-delay",
+                        "animation-iteration-count",
+                        "animation-direction",
+                        "text-align",
+                        "text-align-last",
+                        "vertical-align",
+                        "white-space",
+                        "text-decoration",
+                        "text-emphasis",
+                        "text-emphasis-color",
+                        "text-emphasis-style",
+                        "text-emphasis-position",
+                        "text-indent",
+                        "text-justify",
+                        "text-transform",
+                        "letter-spacing",
+                        "word-spacing",
+                        "text-outline",
+                        "text-transform",
+                        "text-wrap",
+                        "text-overflow",
+                        "text-overflow-ellipsis",
+                        "text-overflow-mode",
+                        "word-wrap",
+                        "word-break",
+                        "tab-size",
+                        "hyphens",
+                        "pointer-events"
+                    ]
+                },
+                {
+                    "emptyLineBefore": "always",
+                    "order": "strict",
+                    "properties": [
+                        "opacity",
+                        "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
+                        "color",
+                        "border",
+                        "border-collapse",
+                        "border-width",
+                        "border-style",
+                        "border-color",
+                        "border-top",
+                        "border-top-width",
+                        "border-top-style",
+                        "border-top-color",
+                        "border-right",
+                        "border-right-width",
+                        "border-right-style",
+                        "border-right-color",
+                        "border-bottom",
+                        "border-bottom-width",
+                        "border-bottom-style",
+                        "border-bottom-color",
+                        "border-left",
+                        "border-left-width",
+                        "border-left-style",
+                        "border-left-color",
+                        "border-radius",
+                        "border-top-left-radius",
+                        "border-top-right-radius",
+                        "border-bottom-right-radius",
+                        "border-bottom-left-radius",
+                        "border-image",
+                        "border-image-source",
+                        "border-image-slice",
+                        "border-image-width",
+                        "border-image-outset",
+                        "border-image-repeat",
+                        "outline",
+                        "outline-width",
+                        "outline-style",
+                        "outline-color",
+                        "outline-offset",
+                        "background",
+                        "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
+                        "background-color",
+                        "background-image",
+                        "background-repeat",
+                        "background-attachment",
+                        "background-position",
+                        "background-position-x",
+                        "background-position-y",
+                        "background-clip",
+                        "background-origin",
+                        "background-size",
+                        "box-decoration-break",
+                        "box-shadow",
+                        "filter:progid:DXImageTransform.Microsoft.gradient",
+                        "text-shadow"
+                    ]
+                },
+                {
+                    "emptyLineBefore": "always",
+                    "order": "strict",
+                    "properties": [
+                        "font",
+                        "font-family",
+                        "font-size",
+                        "font-weight",
+                        "font-style",
+                        "font-variant",
+                        "font-size-adjust",
+                        "font-stretch",
+                        "font-effect",
+                        "font-emphasize",
+                        "font-emphasize-position",
+                        "font-emphasize-style",
+                        "font-smooth",
+                        "line-height"
+                    ]
+                }
+            ],
+            { unspecified: "bottomAlphabetical" }
+        ]
 	}
 }

client/routes/router.js

@@ -68,13 +68,13 @@ FlowRouter.route('/home', {
 	}
 });
 
-FlowRouter.route('/changeavatar', {
-	name: 'changeAvatar',
-
-	action() {
-		BlazeLayout.render('main', {center: 'avatarPrompt'});
-	}
-});
+// FlowRouter.route('/changeavatar', {
+// 	name: 'changeAvatar',
+//
+// 	action() {
+// 		BlazeLayout.render('main', {center: 'avatarPrompt'});
+// 	}
+// });
 
 FlowRouter.route('/account/:group?', {
 	name: 'account',
@@ -85,7 +85,10 @@ FlowRouter.route('/account/:group?', {
 		}
 		params.group = _.capitalize(params.group, true);
 		BlazeLayout.render('main', { center: `account${ params.group }` });
-	}
+	},
+	triggersExit: [function() {
+		$('.main-content').addClass('rc-old');
+	}]
 });
 
 FlowRouter.route('/history/private', {