diff --git a/README.md b/README.md index 1ecc623..8c25b42 100644 --- a/README.md +++ b/README.md @@ -2,33 +2,61 @@ [![Build Status](https://semaphoreci.com/api/v1/tcrosse/gitter-clone/branches/master/badge.svg)](https://semaphoreci.com/tcrosse/gitter-clone) [![codecov](https://codecov.io/gh/tylercrosse/gitter-clone/branch/master/graph/badge.svg)](https://codecov.io/gh/tylercrosse/gitter-clone) +<div align="center"> +</div> + This is app was built as portfolio piece representing a subset of the features of Troupe Technology's wonderful chat app, [Gitter](https://gitter.im/). I'm currently looking for a new position - Hire me! +--- ### Demo You can test a fully working live demo at http://138.68.24.248:3333/ +--- ### Major features -- Create Channels -- Send Messages to all subscribed clients on channel -- Load previous messages in channel - MD / syntax highlighting support for messages - Messages grouped into bursts +- Create Channels +- Load previous messages in channel +- Send Messages to all subscribed clients on channel +--- ### Built with -<div align="center"> - <img height="80" src="https://cdn.rawgit.com/tylercrosse/gitter-clone/assets/src/client/assets/img/react.svg"> - <img height="80" src="https://cdn.rawgit.com/tylercrosse/gitter-clone/assets/src/client/assets/img/redux.svg"> - <img height="80" src="https://cdn.rawgit.com/tylercrosse/gitter-clone/assets/src/client/assets/img/webpack.svg"> - <img height="80" src="https://cdn.rawgit.com/tylercrosse/gitter-clone/assets/src/client/assets/img/express.svg"> - <img height="80" src="https://cdn.rawgit.com/tylercrosse/gitter-clone/assets/src/client/assets/img/mongodb.svg"> - <img height="80" src="https://cdn.rawgit.com/tylercrosse/gitter-clone/assets/src/client/assets/img/jest.svg"> - <img height="80" src="https://cdn.rawgit.com/tylercrosse/gitter-clone/assets/src/client/assets/img/semaphor.svg"> - <img height="80" src="https://cdn.rawgit.com/tylercrosse/gitter-clone/assets/src/client/assets/img/digitalocean.svg"> -</div> +##### <img height="20" src="https://cdn.rawgit.com/tylercrosse/gitter-clone/assets/src/client/assets/img/react.svg"> [React](https://facebook.github.io/react/) + +React makes it really easy to focus on the view in a declarative way. I like that it makes it easy to write composable, testable UI. Routing is handled by [react router](https://reacttraining.com/react-router/). + +##### <img height="20" src="https://cdn.rawgit.com/tylercrosse/gitter-clone/assets/src/client/assets/img/redux.svg"> [Redux](http://redux.js.org/) + +Redux is where the fun is at. Maintain a flat minimal state, with dictionary of normalized objects. I use [reselect](https://github.com/reactjs/reselect) to compute derived data. [Redux devtools](https://github.com/zalmoxisus/redux-devtools-extension) are also great, I kept it enabled on production for anyone wanting to easily take a look at the app's state. +##### <img height="20" src="https://cdn.rawgit.com/tylercrosse/gitter-clone/assets/src/client/assets/img/webpack.svg"> [Webpack 2](https://webpack.js.org/) + +Fantastic code bundler once you get past the learning curve. I use it for a number of things including: transpile ES2015+ javascript to ES5 with [Babel](https://babeljs.io/), compile [Sass](http://sass-lang.com/) into css, optimize assets, hot reload code, build minimized split production code, + more. + +##### <img height="20" src="https://cdn.rawgit.com/tylercrosse/gitter-clone/assets/src/client/assets/img/express.svg"> [Express](https://expressjs.com/) + +It's nice to have JS everywhere. Express is fast and minimal. The backend is pretty simple with a router, a few controllers, and basic db interactions. Logging handled by [winston](https://github.com/winstonjs/winston). + +##### <img height="20" src="https://cdn.rawgit.com/tylercrosse/gitter-clone/assets/src/client/assets/img/mongodb.svg"> [MongoDB](https://www.mongodb.com/) + +This project doesn't currently require a ton of data persistence. MongoDB + [Mongoose](http://mongoosejs.com/) make it easy to quickly update the Schema. If the project continues to grow I will probably switch to a relational DB. Also Mongo is still trendy. + +##### <img height="20" src="https://cdn.rawgit.com/tylercrosse/gitter-clone/assets/src/client/assets/img/jest.svg"> [Jest](http://facebook.github.io/jest/) + +Unit tests run by Jest. If you haven't seen Jest recently, you should take another look. [Enzyme](https://github.com/airbnb/enzyme) is used for React support and [SuperTest](https://github.com/visionmedia/supertest) is used for HTTP assertions. [Enzyme-to-JSON](https://github.com/adriantoine/enzyme-to-json) is also great and worth checking out in conjunction with the other test utilities. + +##### <img height="20" src="https://cdn.rawgit.com/tylercrosse/gitter-clone/assets/src/client/assets/img/semaphor.svg"> [SemaphoreCI](https://semaphoreci.com/) + +Continuous integration handled by the super fast SemaphoreCI. Passing merges to master are auto deployed with help from [pm2](http://pm2.keymetrics.io/). + +##### <img height="20" src="https://cdn.rawgit.com/tylercrosse/gitter-clone/assets/src/client/assets/img/digitalocean.svg"> [Digital Ocean](https://www.digitalocean.com/) + +Application hosted on Ubuntu Digital Ocean droplet. SSH is fun! + +--- ### Setup If you don't have [yarn](https://yarnpkg.com/en/) commands can be run with `npm`. First, clone and cd into the repo and install the dependencies. @@ -41,16 +69,21 @@ $ yarn install Additional commands: ##### `yarn dev` -- Start development server on 127.0.0.1:3333 +- Start development server on `127.0.0.1:3333` ##### `yarn build` - Build a production version of the app. ##### `yarn start` -- Start production server on 127.0.0.1:3333 to serve built app. Requires the build command to have already been run. +- Start production server on `127.0.0.1:3333` to serve built app. Requires the build command to have already been run. ##### `yarn test` - Run all of the projects tests using jest. ##### `yarn lint` - Lint all of the projects javascript files using eslint. + +--- +### Contributing + +Thank you for your interest! Unfortunately, I'm not currently taking contributions. diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js index 3e83a12..449d17a 100644 --- a/config/webpack.config.dev.js +++ b/config/webpack.config.dev.js @@ -63,15 +63,24 @@ module.exports = merge(config, { }, include: [path.resolve(__dirname, '../src')] }, { - test: /\.css?$/, - loaders: ['style-loader', 'raw-loader'] - }, { + // test: /\.css?$/, + // loaders: ['style-loader', 'raw-loader'] + // }, { test: /\.scss$/, - use : [ + loaders : [ { loader: 'style-loader' }, { loader: 'css-loader', + }, { + loader: 'postcss-loader', + options: { + plugins() { + return [ + require('autoprefixer') + ] + } + } }, { loader: 'resolve-url-loader' }, { diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js index a3a4e2e..7ce7def 100644 --- a/config/webpack.config.prod.js +++ b/config/webpack.config.prod.js @@ -79,6 +79,15 @@ module.exports = merge(config, { use: [ { loader: 'css-loader', + }, { + loader: 'postcss-loader', + options: { + plugins() { + return [ + require('autoprefixer') + ] + } + } }, { loader: 'resolve-url-loader' }, { diff --git a/package.json b/package.json index 3ed1647..215bc7b 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "winston": "^2.3.1" }, "devDependencies": { - "autoprefixer": "^6.7.6", + "autoprefixer": "^6.7.7", "babel-cli": "^6.22.2", "babel-core": "^6.21.0", "babel-eslint": "^7.1.1", diff --git a/src/client/components/chatmain/chatmain.scss b/src/client/components/chatmain/chatmain.scss index 7ff9952..a435fdb 100644 --- a/src/client/components/chatmain/chatmain.scss +++ b/src/client/components/chatmain/chatmain.scss @@ -1,7 +1,7 @@ @import '../../mixins/_variables.scss'; .loading-container { - background-color: rgba(0, 0, 0, 0.5); + background-color: $trans-black5; display: flex; align-items: center; justify-content: center; @@ -14,8 +14,8 @@ width: 80px; height: 80px; border-radius: 100%; - border: 10px solid rgba(255, 255, 255, 0.2); - border-top-color: #FFF; + border: 10px solid $trans-white2; + border-top-color: $white; animation: spin 1s infinite linear; } @@ -66,7 +66,7 @@ flex-shrink: 0; display: flex; width: 70px; - border-left: 1px solid #f1f1f1; + border-left: 1px solid $seashell; .roster { list-style: none; @@ -87,8 +87,8 @@ } .status { - background-color: #fff; - box-shadow: inset 0 0 0 2px #fcb316; + background-color: $white; + box-shadow: inset 0 0 0 2px $supernova; position: absolute; top: 5px; left: -6px; @@ -98,7 +98,7 @@ justify-content: center; width: 7px; height: 7px; - border: 2px solid white; + border: 2px solid $white; border-radius: 80px; box-sizing: content-box; } @@ -121,7 +121,7 @@ padding-right: 18px; img { - border: 3px solid white; + border: 3px solid $white; border-radius: 4px; } } @@ -132,7 +132,7 @@ overflow: hidden; display: inline-block; max-width: 100%; - color: white; + color: $white; font-size: 24px; line-height: 40px; font-weight: 300; @@ -140,7 +140,7 @@ } .chat-user-avatar { - border-left: 1px solid rgba(0, 0, 0, 0.1); + border-left: 1px solid $trans-black1; padding: 8px 0 8px 19px; margin-right: 19px; } @@ -164,7 +164,7 @@ overflow-y: auto; flex-grow: 1; flex-shrink: 1; - background-color: #fdfdfd; + background-color: $romance; .chat-item { transition: background-color 0.2s linear; @@ -387,7 +387,7 @@ .chat-input { align-self: flex-end; - background-color: #fdfdfd; + background-color: $romance; flex-shrink: 0; width: 100%; border-top: 1px solid rgba(0, 0, 0, 0.05); @@ -414,11 +414,11 @@ min-height: 44px; margin: 0; padding: 0; - background-color: #fff; + background-color: $white; box-shadow: none; border: 0; outline: none; - color: black; + color: $black; font-size: 1em; line-height: 1.38em; resize: none; @@ -428,10 +428,11 @@ position: absolute; right: 0; top: 0; - height: 50px; + height: 42px; background-color: $maroon; - color: white; + color: $white; border-radius: 4px; + margin-right: 4px; border: 0; } } @@ -447,8 +448,8 @@ text-decoration: none; border: none; border-radius: 6px; - background: #ea9448; - color: #fff; + background: $sea-buckthorn; + color: $white; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -462,11 +463,11 @@ box-sizing: border-box; display: inline-block; padding: 9.6px 42px; - background-color: #46bc99; + background-color: $puerto-rico; border: none; border-radius: 6px; outline: none; - color: #ffffff; + color: $white; text-transform: uppercase; letter-spacing: 0.1em; text-align: center; diff --git a/src/client/components/chatmenu/ChatMenu.jsx b/src/client/components/chatmenu/ChatMenu.jsx index 6be1080..e6da959 100644 --- a/src/client/components/chatmenu/ChatMenu.jsx +++ b/src/client/components/chatmenu/ChatMenu.jsx @@ -1,5 +1,6 @@ import React from 'react'; import { connect } from 'react-redux'; +import { Link } from 'react-router'; import { openCreateRoomModal, closeModal, @@ -40,9 +41,14 @@ export class ChatMenu extends React.Component { <nav className="minibar"> <div className="minibar-inner"> <ul> - <li className="minibar-convos">G</li> + <li className="minibar-convos"> + <Link + to={'/'} + className="minibar-button" + >G</Link> + </li> <li className="minibar-search"> - <button className="minibar-button" onClick={this.handleMinibarButtonClick}> + <button className="minibar-button minibar-button-search" onClick={this.handleMinibarButtonClick}> Q </button> </li> diff --git a/src/client/components/chatmenu/ChatMenu.spec.js b/src/client/components/chatmenu/ChatMenu.spec.js index aeb440b..3802bb9 100644 --- a/src/client/components/chatmenu/ChatMenu.spec.js +++ b/src/client/components/chatmenu/ChatMenu.spec.js @@ -44,9 +44,9 @@ describe('<ChatMenu />', () => { const { component } = setup(); const wrapper = mount(component); expect(wrapper.state().active).toBeFalsy(); - wrapper.find('.minibar-button').simulate('click'); + wrapper.find('.minibar-button-search').simulate('click'); expect(wrapper.state().active).toBeTruthy(); - wrapper.find('.minibar-button').simulate('click'); + wrapper.find('.minibar-button-search').simulate('click'); expect(wrapper.state().active).toBeFalsy(); }); @@ -54,7 +54,7 @@ describe('<ChatMenu />', () => { const { component } = setup(); const wrapper = mount(component); expect(wrapper.state().active).toBeFalsy(); - wrapper.find('.minibar-button').simulate('click'); + wrapper.find('.minibar-button-search').simulate('click'); expect(wrapper.state().active).toBeTruthy(); // trouble simulating clientX on synthetic mouseLeave event wrapper.instance().handleMouseLeave({clientX: 400}); @@ -67,7 +67,7 @@ describe('<ChatMenu />', () => { expect(wrapper.state().active).toBeFalsy(); expect(wrapper.find('.chat-menu-panel').hasClass('active')) .toBeFalsy(); - wrapper.find('.minibar-button').simulate('click'); + wrapper.find('.minibar-button-search').simulate('click'); expect(wrapper.state().active).toBeTruthy(); expect(wrapper.find('.chat-menu-panel').hasClass('active')) .toBeTruthy(); diff --git a/src/client/components/chatmenu/chatmenu.scss b/src/client/components/chatmenu/chatmenu.scss index b0b0810..3d5d978 100644 --- a/src/client/components/chatmenu/chatmenu.scss +++ b/src/client/components/chatmenu/chatmenu.scss @@ -4,8 +4,8 @@ position: relative; height: 100vh; z-index: 101; - border-right: 1px solid #f7f6f6; - width: 75px; + border-right: 1px solid $black-haze; + min-width: 75px; .chat-menu-container { height: 100%; @@ -18,7 +18,7 @@ z-index: 2; height: 100%; overflow: hidden; - border-right: 1px solid #f1f1f1; + border-right: 1px solid $seashell; &::before { content: ' '; @@ -62,7 +62,10 @@ } .minibar-button { - display: block; + display: flex; + align-items: center; + justify-content: center; + text-align: center; width: 100%; height: 100%; padding: 0; @@ -126,8 +129,8 @@ left: 0; height: 100%; padding-left: 100%; - border-right: 1px solid #f1f1f1; - background-color: #fdfdfd; + border-right: 1px solid $seashell; + background-color: $romance; transition: transform 0.1s linear 0.05s; transform: translateX(-100%); z-index: 1; @@ -192,7 +195,7 @@ text-transform: uppercase; padding: 0 0 0 2.6rem; line-height: 65px; - color: #a2a3a3; + color: $grey-chateau; } } } @@ -226,7 +229,7 @@ align-items: center; bottom: 0; - background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), #fdfdfd 35%); + background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), $romance 35%); display: flex; flex-direction: row-reverse; font-size: 16px; @@ -248,12 +251,12 @@ background-color: transparent; border-radius: 0.5em; outline: none; - color: #46bc99; + color: $puerto-rico; text-transform: uppercase; letter-spacing: 0.1em; text-align: center; transition: background-color 0.1s ease, border-color 0.1s ease; - border: 1px solid #46bc99; + border: 1px solid $puerto-rico; } .panel-content { @@ -276,7 +279,7 @@ height: 38px; max-height: 38px; // opacity: 0; - color: #fff; + color: $white; transition: height 0.2s ease-in, max-height 0.2s ease-in, opacity 0.2s ease-in; } @@ -291,8 +294,8 @@ &:hover { cursor: pointer; - background-color: #f1f2f2; - color: black; + background-color: $seashell; + color: $black; outline: none; } } @@ -300,7 +303,7 @@ .convo-item-avatar { height: 22px; width: 22px; - background-color: #fff; + background-color: $white; border-radius: 2px; margin-right: 10px; margin-left: 13px; @@ -313,7 +316,7 @@ height: 38px; max-height: 38px; overflow: hidden; - color: #646565; + color: $storm-burst; font-size: 14px; font-weight: 400; line-height: 38px; @@ -324,7 +327,7 @@ margin: 0; &:hover { - color: black; + color: $black; font-weight: 500; } } diff --git a/src/client/components/explore/explore.scss b/src/client/components/explore/explore.scss index 33fafed..43dec48 100644 --- a/src/client/components/explore/explore.scss +++ b/src/client/components/explore/explore.scss @@ -1,13 +1,15 @@ +@import '../../mixins/_variables.scss'; + .explore { width: 100%; .explore-header { background: url('../../assets/img/cloneBanner.jpg') no-repeat center center; background-size: cover; - background-color: #512e92; + background-color: $gigas; height: 16em; position: relative; - color: white; + color: $white; h1 { position: absolute; @@ -30,7 +32,7 @@ } .explore-header-nav { - background-color: rgba(255,255,255,.3); + background-color: $trans-white3; width: 100%; height: 32px; margin-top: 64px; @@ -47,7 +49,7 @@ h3 { font-weight: 400; - color: rgb(188, 188, 188); + color: $french-grey; } } @@ -55,7 +57,7 @@ flex: 1; padding-top: calc(15px); padding-bottom: calc(15px); - background-color: #f1f1f1; + background-color: $seashell; height: 100%; } @@ -81,9 +83,9 @@ display: flex; flex-direction: column; opacity: 0.7; - background-color: #fff; + background-color: $white; border-radius: 3px; - color: #333; + color: $mine-shaft; transition: transform 0.2s ease, max-width 0.2s ease, margin 0.2s ease, opacity 0.2s ease; &:hover { @@ -126,7 +128,7 @@ justify-content: space-between; align-items: center; padding: 7.5px 10px; - border-top: 1px dotted rgb(242, 240, 237); + border-top: 1px dotted $isabelline; } .convo-card-info { @@ -153,11 +155,11 @@ line-height: 19px; box-sizing: border-box; display: inline-block; - background-color: #f68d42; + background-color: $sea-buckthorn; border: none; border-radius: 6px; outline: none; - color: #fff; + color: $white; text-transform: uppercase; letter-spacing: 1.2px; text-align: center; diff --git a/src/client/components/welcome/Welcome.jsx b/src/client/components/welcome/Welcome.jsx index f00455b..1e85b6f 100644 --- a/src/client/components/welcome/Welcome.jsx +++ b/src/client/components/welcome/Welcome.jsx @@ -1,11 +1,11 @@ import React from 'react'; import { connect } from 'react-redux'; +import { Link } from 'react-router'; import { signIn, openSignInModal, closeModal } from '../../actions/'; import SignInModal from '../SignInModal.jsx'; -import './welcome.scss'; import reactLogoSrc from '../../assets/img/react.svg'; import reduxLogoSrc from '../../assets/img/redux.svg'; import jestLogoSrc from '../../assets/img/jest.svg'; @@ -14,6 +14,7 @@ import expressLogoSrc from '../../assets/img/express.svg'; import mongodbLogoSrc from '../../assets/img/mongodb.svg'; import semaphorLogoSrc from '../../assets/img/semaphor.svg'; import digitaloceanLogoSrc from '../../assets/img/digitalocean.svg'; +import './welcome.scss'; export const Welcome = (props) => ( <div className="welcome"> @@ -37,9 +38,9 @@ export const Welcome = (props) => ( href="https://gitter.im/" target="_blank" rel="noreferrer noopener">Go to real Gitter.im</a> - <a + <Link className="intro-panel-button button-subdued" - href="/explore">Explore the clone</a> + to="/explore">Explore the clone</Link> </div> <ul className="mini-features-list"> <li> @@ -58,13 +59,8 @@ export const Welcome = (props) => ( </div> </header> <section className="tech-panel"> - <h1>Check out the real Gitter.im</h1> - <p>This is just a fan application. For the real Gitter messaging applcation go to - <a - href="https://gitter.im/" - target="_blank" - rel="noreferrer noopener"> gitter.im</a>.</p> <div className="wrap"> + <h1>Built with</h1> <ul className="tech-icons"> <li> <img className="react-logo"src={reactLogoSrc} alt="react logo" /> @@ -92,7 +88,7 @@ export const Welcome = (props) => ( </li> <li> <img className="semaphor-logo"src={semaphorLogoSrc} alt="semaphor logo" /> - <figcaption>SemaphorCI</figcaption> + <figcaption>SemaphoreCI</figcaption> </li> <li> <img className="digitalocean-logo"src={digitaloceanLogoSrc} alt="digitalocean logo" /> @@ -101,6 +97,16 @@ export const Welcome = (props) => ( </ul> </div> </section> + <section className="endoresment-panel"> + <div className="wrap"> + <h1>Check out the real Gitter.im</h1> + <p>This is just a fan application. For the real Gitter messaging applcation go to + <a + href="https://gitter.im/" + target="_blank" + rel="noreferrer noopener"> gitter.im</a></p> + </div> + </section> <footer className="bottom-panel"> Built with <span className="heart"><3</span> by <a diff --git a/src/client/components/welcome/welcome.scss b/src/client/components/welcome/welcome.scss index acc723c..c25d7ad 100644 --- a/src/client/components/welcome/welcome.scss +++ b/src/client/components/welcome/welcome.scss @@ -1,11 +1,13 @@ +@import '../../mixins/_variables.scss'; + .button-caribbean { - background-color: #46bc99; + background-color: $puerto-rico; border: none; } .button-subdued { background-color: transparent; - border: 1px solid #fffefe; + border: 1px solid $romance; } .welcome { @@ -15,6 +17,22 @@ margin: 0; text-align: center; + h1 { + position: relative; + + &::after { + content: ''; + position: absolute; + left: 0; + bottom: -15px; + display: block; + width: 60px; + height: 3px; + background: currentColor; + opacity: 0.1; + } + } + .wrap { margin: 0 auto; text-align: left; @@ -24,21 +42,22 @@ .intro-panel { background: url('../../assets/img/cloneBanner.jpg') no-repeat center center; background-size: cover; - background-color: #512e92; + background-color: $gigas; position: relative; overflow: hidden; padding: 50px 0; - color: rgba(255, 255, 255, 0.75); - text-shadow: 0 0 4px rgba(0, 0, 0, 0.2); + color: $trans-white75; + text-shadow: 0 0 4px $trans-black2; h1 { - // text-shadow: 0 0 8px rgba(0, 0, 0, 0.2); + // text-shadow: 0 0 8px $trans-black2; margin-top: 100px; margin-bottom: 60px; font-size: 60px; line-height: 72px; letter-spacing: -1px; - color: #fff; + color: $white; + position: relative; } h2 { @@ -46,7 +65,7 @@ font-size: 24px; line-height: 28px; letter-spacing: normal; - color: #fff; + color: $white; font-weight: 400; } @@ -96,7 +115,7 @@ border-radius: 8px; transition: background-color 0.1s ease, border-color 0.1s ease; text-align: center; - color: #fff; + color: $white; } } @@ -119,7 +138,18 @@ float: right; margin: -7px 0 0; line-height: 1; - background: rgba(0, 0, 0, 0.2); + background: $trans-black2; + } + + .tech-panel { + color: $flint; + padding: 50px 0; + + h1 { + margin: 32px 0 25px; + font-size: 36px; + font-weight: 400; + } } .tech-icons { @@ -137,23 +167,41 @@ img { max-width: 60px; height: 60px; - // #888888 } .react-logo { - fill: #61dafb; + fill: $react; } .redux-logo { - fill: #764abc; + fill: $redux; } .mongodb-logo { - fill: #69b23f; + fill: $mongodb; } .jest-logo { - fill: #c53c14; + fill: $jest; + } + } + + .endoresment-panel { + background: $sea-buckthorn; + color: $white; + padding: 50px 0; + + h1 { + font-size: 36px; + } + + a { + color: $white; + } + + p { + font-size: 21px; + font-weight: 300; } } @@ -162,8 +210,8 @@ padding: 100px 0 40px; font-size: 16px; line-height: 26px; - color: #918b80; - background: #f1f0ed; + color: $heathered-grey; + background: $gallery; text-align: center; .heart { @@ -181,7 +229,7 @@ transition: color 0.2s ease-in; &:hover { - color: #ea9448; + color: $sea-buckthorn; } } @@ -190,11 +238,11 @@ float: none; margin: 0 15px; text-align: center; - color: #aeaca5; + color: $silver-chalice; } } a { - color: #aeaca5; + color: $silver-chalice; } } diff --git a/src/client/global.scss b/src/client/global.scss index 6ee6ee2..e582afb 100644 --- a/src/client/global.scss +++ b/src/client/global.scss @@ -10,7 +10,7 @@ body { font-family: $primary-font; font-weight: 400; - color: #333; + color: $mine-shaft; line-height: 1.4; max-width: 100vw; overflow: auto; @@ -21,24 +21,24 @@ body { } .scroller::-webkit-scrollbar-track { - // background-color: rgba(200, 200, 200, 0.1); + // background-color: $trans-lightgrey; background-color: transparent; } .scroller::-webkit-scrollbar-thumb { border-radius: 10px; - background-color: rgba(100, 100, 100, 0.2); + background-color: $trans-darkgrey2; margin-right: 1px; -webkit-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; } .scroller:hover::-webkit-scrollbar-thumb { - background-color: rgba(100, 100, 100, 0.4); + background-color: $trans-darkgrey4; } .scroller::-webkit-scrollbar-thumb:window-inactive { - background-color: rgba(0, 0, 0, 0.1); + background-color: $trans-white2; } .modal-overlay { @@ -48,7 +48,7 @@ body { bottom: 0; left: 0; z-index: 1050; - background-color: rgba(0, 0, 0, 0.5); + background-color: $trans-black5; display: flex; align-items: center; justify-content: center; @@ -63,10 +63,10 @@ body { position: relative; width: 620px; max-width: 95%; - background: white; + background: $white; border-radius: 5px; text-align: left; - box-shadow: 0 0 0.4em rgba(0, 0, 0, 0.3); + box-shadow: 0 0 0.4em $trans-black3; transition: box-shadow 0.2s linear; } @@ -79,7 +79,7 @@ body { width: 100%; max-width: 100%; padding: 16px; - background: white; + background: $white; border-top-left-radius: 5px; border-top-right-radius: 5px; } @@ -96,15 +96,20 @@ body { .modal-close { margin-left: auto; font-size: 1.2em; - color: white; - transition: color 0.2s linear; - background: #949494; + color: $white; + background: $mountain-mist; border-radius: 100%; height: 20px; width: 20px; text-align: center; - line-height: 22px; - vertical-align: middle; + line-height: 0; + border: 0; + transition: background 0.2s linear; + + &:hover { + cursor: pointer; + background: $gondola; + } } .modal-body { @@ -112,7 +117,7 @@ body { box-sizing: border-box; width: 100%; padding: 1em; - background: #f2f0ed; + background: $isabelline; } .modal-footer { @@ -124,12 +129,12 @@ body { display: flex; width: 100%; padding: 1em; - background: white; + background: $white; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } } .validation-error { - color: red; + color: $red; } diff --git a/src/client/mixins/_variables.scss b/src/client/mixins/_variables.scss index 63c9e1b..a582b44 100644 --- a/src/client/mixins/_variables.scss +++ b/src/client/mixins/_variables.scss @@ -1,7 +1,42 @@ +$black: #000; +$gondola: #3a3133; +$mine-shaft: #333; +$trans-black5: rgba($black, 0.5); +$trans-black3: rgba($black, 0.3); +$trans-black2: rgba($black, 0.2); +$trans-black1: rgba($black, 0.1); +$trans-darkgrey4: rgba(100, 100, 100, 0.4); +$trans-darkgrey2: rgba(100, 100, 100, 0.2); +$trans-lightgrey: rgba(200, 200, 200, 0.1); +$storm-burst: #646565; +$flint: #726c61; +$heathered-grey: #918b81; +$mountain-mist: #949494; +$grey-chateau: #a2a3a3; +$silver-chalice: #aeaca5; +$french-grey: #bcbcbc; +$white: #fff; +$trans-white2: rgba($white, 0.2); +$trans-white3: rgba($white, 0.3); +$trans-white75: rgba($white, 0.75); +$gallery: #f1f0ed; +$seashell: #f1f1f1; +$romance: #fdfdfd; +$black-haze: #f7f6f6; +$isabelline: #f2f0ed; +$puerto-rico: #46bc99; $london: #ba9cc3; $violet: #753a88; +$gigas: #513290; $maroon: #cc2b5e; $razz: #ed1965; +$supernova: #fcb316; +$sea-buckthorn: #e89450; +$red: #fc0d1b; +$react: #61dafb; +$redux: #764abc; +$mongodb: #69b23f; +$jest: #c53c14; @font-face { font-family: 'Source Sans Pro'; diff --git a/yarn.lock b/yarn.lock index 2a70a1e..0ff1f69 100644 --- a/yarn.lock +++ b/yarn.lock @@ -263,7 +263,7 @@ atob@~1.1.0: version "1.1.3" resolved "https://registry.yarnpkg.com/atob/-/atob-1.1.3.tgz#95f13629b12c3a51a5d215abdce2aa9f32f80773" -autoprefixer@^6.3.1, autoprefixer@^6.7.6: +autoprefixer@^6.3.1: version "6.7.6" resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.6.tgz#00f05656c7ef73de9d2fd9b4668f6ef6905a855a" dependencies: @@ -274,6 +274,17 @@ autoprefixer@^6.3.1, autoprefixer@^6.7.6: postcss "^5.2.15" postcss-value-parser "^3.2.3" +autoprefixer@^6.7.7: + version "6.7.7" + resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.7.tgz#1dbd1c835658e35ce3f9984099db00585c782014" + dependencies: + browserslist "^1.7.6" + caniuse-db "^1.0.30000634" + normalize-range "^0.1.2" + num2fraction "^1.2.2" + postcss "^5.2.16" + postcss-value-parser "^3.2.3" + aws-sign2@~0.6.0: version "0.6.0" resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f" @@ -1375,7 +1386,7 @@ browserify-zlib@^0.1.4: dependencies: pako "~0.2.0" -browserslist@^1.0.1, browserslist@^1.5.2, browserslist@^1.7.5: +browserslist@^1.0.1, browserslist@^1.5.2, browserslist@^1.7.5, browserslist@^1.7.6: version "1.7.6" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.6.tgz#af98589ce6e7ab09618d29451faacb81220bd3ba" dependencies: @@ -1492,6 +1503,10 @@ caniuse-db@^1.0.30000346, caniuse-db@^1.0.30000628, caniuse-db@^1.0.30000631: version "1.0.30000631" resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000631.tgz#8aa6f65cff452c4aba1c2aaa1e724102fbb9114f" +caniuse-db@^1.0.30000634: + version "1.0.30000634" + resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000634.tgz#439f4b95e715b1fd105196d40c681edd7122e622" + capture-stack-trace@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.0.tgz#4a6fa07399c26bba47f0b2496b4d0fb408c5550d" @@ -5453,6 +5468,15 @@ postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0 source-map "^0.5.6" supports-color "^3.2.3" +postcss@^5.2.16: + version "5.2.16" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.16.tgz#732b3100000f9ff8379a48a53839ed097376ad57" + dependencies: + chalk "^1.1.3" + js-base64 "^2.1.9" + source-map "^0.5.6" + supports-color "^3.2.3" + pre-commit@^1.2.2: version "1.2.2" resolved "https://registry.yarnpkg.com/pre-commit/-/pre-commit-1.2.2.tgz#dbcee0ee9de7235e57f79c56d7ce94641a69eec6"