diff --git a/.circleci/config.yml b/.circleci/config.yml index acee1e4..12c0931 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -48,4 +48,4 @@ workflows: tags: only: /v[0-9]+(\.[0-9]+)*/ requires: - - test \ No newline at end of file + - test diff --git a/__tests__/__snapshots__/index.js.snap b/__tests__/__snapshots__/index.js.snap index f57ecae..9c0926f 100644 --- a/__tests__/__snapshots__/index.js.snap +++ b/__tests__/__snapshots__/index.js.snap @@ -15,6 +15,8 @@ Object { "GhostButton": [Function], "Modal": [Function], "PrimaryButton": [Function], + "QATrackEventTag": [Function], + "QATrackTag": [Function], "SecondaryButton": [Function], "Tag": [Function], } diff --git a/__tests__/shared/components/__snapshots__/Avatar.jsx.snap b/__tests__/shared/components/__snapshots__/Avatar.jsx.snap index 0e9da75..45d3236 100644 --- a/__tests__/shared/components/__snapshots__/Avatar.jsx.snap +++ b/__tests__/shared/components/__snapshots__/Avatar.jsx.snap @@ -7,45 +7,17 @@ exports[`Snapshots 1`] = ` viewBox="0 0 141 141" width="141" xmlns="http://www.w3.org/2000/svg" - xmlnsXlink="http://www.w3.org/1999/xlink" > ico-user-default - - - - - - - - - - + opacity=".2" + stroke="#A3A3AE" + strokeWidth="3" + /> `; diff --git a/package-lock.json b/package-lock.json index 3ae520f..b151255 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "topcoder-react-ui-kit", - "version": "0.5.10", + "version": "1.0.7", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -6616,7 +6616,8 @@ "jsbn": { "version": "0.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "json-schema": { "version": "0.2.3", @@ -12010,7 +12011,7 @@ "dependencies": { "minimist": { "version": "1.2.0", - "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=" } } diff --git a/package.json b/package.json index f01e7d4..d0f3bee 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "lint:scss": "./node_modules/.bin/stylelint **/*.scss --syntax scss", "test": "npm run lint && npm run jest" }, - "version": "0.5.10", + "version": "2.0.1", "dependencies": { "prop-types": "^15.6.2", "react": "^16.4.1", diff --git a/src/assets/images/default-user-avatar.svg b/src/assets/images/default-user-avatar.svg index ed6ce1a..eee2a66 100644 --- a/src/assets/images/default-user-avatar.svg +++ b/src/assets/images/default-user-avatar.svg @@ -3,17 +3,10 @@ ico-user-default Created with Sketch. - - - - + - - - - - + diff --git a/src/shared/components/buttons/themes/danger.scss b/src/shared/components/buttons/themes/danger.scss index 5913fba..e1b368c 100644 --- a/src/shared/components/buttons/themes/danger.scss +++ b/src/shared/components/buttons/themes/danger.scss @@ -5,7 +5,7 @@ @import "https://github.com/default"; @mixin button { - background: $tc-red-70; + background: $tc-red-110; border-color: transparent; color: $tc-white; } @@ -38,7 +38,7 @@ } &:active { - background-color: $tc-red; + background-color: $tc-red-110; background-image: none; box-shadow: inset 0 1px 3px 0 rgba(71, 71, 79, 0.38); border-color: transparent; diff --git a/src/shared/components/buttons/themes/primary.scss b/src/shared/components/buttons/themes/primary.scss index 09ef08d..7c4dba9 100644 --- a/src/shared/components/buttons/themes/primary.scss +++ b/src/shared/components/buttons/themes/primary.scss @@ -5,7 +5,7 @@ @import "https://github.com/default"; @mixin button { - background: $tc-dark-blue; + background: $tc-dark-blue-110; border-color: transparent; color: $tc-white; } diff --git a/src/shared/components/tags/event/data-science.scss b/src/shared/components/tags/event/data-science.scss index aca8625..3a7d7b6 100644 --- a/src/shared/components/tags/event/data-science.scss +++ b/src/shared/components/tags/event/data-science.scss @@ -5,14 +5,14 @@ @import "https://github.com/default"; .button { - color: $tc-orange; + color: $tc-orange-110; background-color: $tc-orange-10; &:active, &:focus, &:hover { color: $tc-orange; - background-color: $tc-orange-10; + background-color: $tc-orange-30; } &:visited { diff --git a/src/shared/components/tags/event/design.scss b/src/shared/components/tags/event/design.scss index 64e113d..747e0d9 100644 --- a/src/shared/components/tags/event/design.scss +++ b/src/shared/components/tags/event/design.scss @@ -5,14 +5,14 @@ @import "https://github.com/default"; .button { - color: $tc-light-blue; + color: $tc-dark-blue-110; background-color: $tc-light-blue-10; &:active, &:focus, &:hover { color: $tc-light-blue; - background-color: $tc-light-blue-10; + background-color: $tc-light-blue-30; } &:visited { diff --git a/src/shared/components/tags/event/development.scss b/src/shared/components/tags/event/development.scss index e2a7c7e..e277356 100644 --- a/src/shared/components/tags/event/development.scss +++ b/src/shared/components/tags/event/development.scss @@ -5,14 +5,14 @@ @import "https://github.com/default"; .button { - color: $tc-green; + color: $tc-green-110; background-color: $tc-green-10; &:active, &:focus, &:hover { color: $tc-green; - background-color: $tc-green-10; + background-color: $tc-green-30; } &:visited { diff --git a/src/shared/components/tags/event/qa.scss b/src/shared/components/tags/event/qa.scss new file mode 100644 index 0000000..6f3b978 --- /dev/null +++ b/src/shared/components/tags/event/qa.scss @@ -0,0 +1,21 @@ +/** + * Event tag, colored with colors of qa track (purple). + */ + +@import "https://github.com/default"; + +.button { + color: $tc-purple-120; + background-color: $tc-purple-20; + + &:active, + &:focus, + &:hover { + color: $tc-purple; + background-color: $tc-purple-30; + } + + &:visited { + color: $tc-purple; + } +} diff --git a/src/shared/components/tags/index.jsx b/src/shared/components/tags/index.jsx index 27be7df..4c5ac01 100644 --- a/src/shared/components/tags/index.jsx +++ b/src/shared/components/tags/index.jsx @@ -6,10 +6,12 @@ import defaultTag from './default.scss'; import dataScienceTrackTag from './primary/data-science.scss'; import designTrackTag from './primary/design.scss'; import developmentTrackTag from './primary/development.scss'; +import qaTrackTag from './primary/qa.scss'; import dataScienceTrackEventTag from './event/data-science.scss'; import designTrackEventTag from './event/design.scss'; import developmentTrackEventTag from './event/development.scss'; +import qaTrackEventTag from './event/qa.scss'; export const Tag = themr('Tag', defaultTag)(GenericButton); @@ -21,3 +23,6 @@ export const DesignTrackEventTag = themr('DesignTrackEventTag', designTrackEvent export const DevelopmentTrackTag = themr('DevelopmentTrackTag', developmentTrackTag)(GenericButton); export const DevelopmentTrackEventTag = themr('DevelopmentTrackEventTag', developmentTrackEventTag)(GenericButton); + +export const QATrackTag = themr('QATrackTag', qaTrackTag)(GenericButton); +export const QATrackEventTag = themr('QATrackEventTag', qaTrackEventTag)(GenericButton); diff --git a/src/shared/components/tags/primary/data-science.scss b/src/shared/components/tags/primary/data-science.scss index 9cefbf0..fc3b064 100644 --- a/src/shared/components/tags/primary/data-science.scss +++ b/src/shared/components/tags/primary/data-science.scss @@ -5,7 +5,7 @@ @import "https://github.com/default"; .button { - background-color: $tc-orange; + background-color: $tc-orange-110; color: $tc-white; &:active, diff --git a/src/shared/components/tags/primary/design.scss b/src/shared/components/tags/primary/design.scss index 633192c..6251789 100644 --- a/src/shared/components/tags/primary/design.scss +++ b/src/shared/components/tags/primary/design.scss @@ -5,7 +5,7 @@ @import "https://github.com/default"; .button { - background-color: $tc-light-blue; + background-color: $tc-light-blue-110; color: $tc-white; &:active, diff --git a/src/shared/components/tags/primary/development.scss b/src/shared/components/tags/primary/development.scss index eb020f7..0f98252 100644 --- a/src/shared/components/tags/primary/development.scss +++ b/src/shared/components/tags/primary/development.scss @@ -5,7 +5,7 @@ @import "https://github.com/default"; .button { - background-color: $tc-green; + background-color: $tc-green-110; color: $tc-white; &:active, diff --git a/src/shared/components/tags/primary/qa.scss b/src/shared/components/tags/primary/qa.scss new file mode 100644 index 0000000..3deea37 --- /dev/null +++ b/src/shared/components/tags/primary/qa.scss @@ -0,0 +1,21 @@ +/** + * Primary tag, colored with colors of qa track (purple). + */ + +@import "https://github.com/default"; + +.button { + background-color: $tc-purple-120; + color: $tc-white; + + &:active, + &:focus, + &:hover { + color: $tc-white; + background-color: $tc-purple; + } + + &:visited { + color: $tc-white; + } +} diff --git a/src/styles/_mixins/variables.scss b/src/styles/_mixins/variables.scss index d1cb5b1..e5a0686 100644 --- a/src/styles/_mixins/variables.scss +++ b/src/styles/_mixins/variables.scss @@ -24,6 +24,7 @@ $tc-black: #151516; $tc-gray-90: #2a2a2b; $tc-gray-80: #404041; $tc-gray-70: #555; +$tc-gray-75: #006dea; $tc-gray-60: #6b6b6b; $tc-gray-50: #808080; $tc-gray-40: #959596; @@ -36,31 +37,32 @@ $tc-gray-neutral-light: #fafafb; $tc-white: #fff; /* Accents & Shades. */ -$tc-dark-blue-110: #006dea; +$tc-dark-blue-110: #006ad7; +$tc-dark-blue-105: #006feb; $tc-dark-blue-100: #0681ff; $tc-dark-blue-70: #55a5ff; $tc-dark-blue-30: #cee6ff; $tc-dark-blue-10: #f4f9ff; /* Light Blue - design color code. */ -$tc-light-blue-110: #169ed9; -$tc-light-blue-100: #26ade9; -$tc-light-blue-70: #67c5ef; -$tc-light-blue-30: #bde6f8; +$tc-light-blue-110: #0076a5; +$tc-light-blue-100: #15acec; +$tc-light-blue-70: #63c4f1; +$tc-light-blue-30: #bce6f9; $tc-light-blue-10: #e9f6fc; /* Warm Orange - data science color code. */ -$tc-orange-110: #f26500; -$tc-orange-100: #fb7d22; -$tc-orange-70: #fda464; -$tc-orange-30: #fee3d0; +$tc-orange-110: #ba4c00; +$tc-orange-100: #fd7d00; +$tc-orange-70: #ffa45d; +$tc-orange-30: #ffe3cf; $tc-orange-10: #fff0eb; /* Red - used for warnings/ */ $tc-red-110: #ea1900; -$tc-red-100: #f22f24; -$tc-red-70: #ff5b52; -$tc-red-30: #ffd4d1; +$tc-red-100: #f52c14; +$tc-red-70: #ff5a4c; +$tc-red-30: #ffd4d0; $tc-red-10: #fff4f4; /* Yellow. */ @@ -71,17 +73,20 @@ $tc-yellow-30: #fff8ca; $tc-yellow-10: #fffde5; /* Greens - development color code. */ -$tc-green-110: #55b000; -$tc-green-100: #60c700; -$tc-green-70: #96d957; -$tc-green-30: #cfefb2; -$tc-green-10: #effae5; +$tc-green-120: #258205; +$tc-green-110: #328732; +$tc-green-100: #5cc900; +$tc-green-70: #94db4e; +$tc-green-30: #cef0af; +$tc-green-10: #effae4; /* Purples. */ -$tc-purple-110: #9050a3; -$tc-purple-100: #9050a3; -$tc-purple-70: #b47dd6; -$tc-purple-30: #e2c7f2; +$tc-purple-120: #8231a9; +$tc-purple-110: #753488; +$tc-purple-100: #914da5; +$tc-purple-70: #b57ad8; +$tc-purple-30: #e2c6f3; +$tc-purple-20: #e6cff1; $tc-purple-10: #f8f2fb; /* TC Metal colors - Badges. @@ -89,7 +94,7 @@ $tc-purple-10: #f8f2fb; * For metals the level 100 is the base metal color; 110 is for text inside * the metal-colored areas; and 130 is for small text inside metal-colored * areas, for better visibility. */ -$tc-gold-130: #865e07; +$tc-gold-130: #9a6d00; $tc-gold-110: #c99014; $tc-gold-100: #ffd84d; @@ -99,13 +104,13 @@ $tc-silver-100: #d1d0cf; $tc-bronze-130: #733d17; $tc-bronze-110: #854e29; -$tc-bronze-100: #d98d64; +$tc-bronze-100: #d98f64; /* Pastel colors, used for levels. */ -$tc-pastel-green: #25c089; -$tc-pastel-blue: #666eff; -$tc-pastel-yellow: #fcb816; -$tc-pastel-crimson: #e6175c; +$tc-pastel-green: #12c188; +$tc-pastel-blue: #5656f4; +$tc-pastel-yellow: #feb900; +$tc-pastel-crimson: #e90c5a; /* Color aliases. */