From f85d69bb756ae9707e79b9d1993a4e69501bb22e Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Wed, 29 Jun 2016 17:32:38 +0530 Subject: [PATCH 001/234] AS#149564193179843, Import and render Navbar from react-components repo -- exported Panel component to be used in connect v2 -- Updated default exported components --- exports.coffee | 7 +++++++ package.json | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 exports.coffee diff --git a/exports.coffee b/exports.coffee new file mode 100644 index 000000000..f75e8a4cb --- /dev/null +++ b/exports.coffee @@ -0,0 +1,7 @@ +module.exports = + default: require './components/FileUploader/FileUploaderContainer.cjsx' + NavBar: require './components/Navbar/Navbar.jsx' + SearchBar: require './components/SearchBar/SearchBar.jsx' + UserDropdown: require './components/UserDropdownMenu/UserDropdownMenu.jsx' + TCFooter: require './components/TCFooter/TCFooter.jsx' + Panel: require './components/Panel/Panel.jsx' \ No newline at end of file diff --git a/package.json b/package.json index 25e65f8b5..5f4457127 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "appirio-tech-react-components", "version": "0.0.0", - "main": "./index.coffee", + "main": "./exports.coffee", "devDependencies": { "appirio-tech-webpack-config": "0.x.x", "eslint": "^2.3.0", From 153cf74e46cb6635ed1ff8f69de62a75a5db3c49 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Wed, 29 Jun 2016 17:47:33 +0530 Subject: [PATCH 002/234] AS#149564193179843, Import and render Navbar from react-components repo -- Trying to load components differently --- exports.coffee | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exports.coffee b/exports.coffee index f75e8a4cb..fe0de65ca 100644 --- a/exports.coffee +++ b/exports.coffee @@ -1,7 +1,7 @@ module.exports = default: require './components/FileUploader/FileUploaderContainer.cjsx' - NavBar: require './components/Navbar/Navbar.jsx' + NavBar: require './components/Navbar/Navbar' SearchBar: require './components/SearchBar/SearchBar.jsx' UserDropdown: require './components/UserDropdownMenu/UserDropdownMenu.jsx' TCFooter: require './components/TCFooter/TCFooter.jsx' - Panel: require './components/Panel/Panel.jsx' \ No newline at end of file + Panel: require './components/Panel/Panel' \ No newline at end of file From 7ee8ae93107cccd0e437da4e2bc4b0aba8d306c3 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Wed, 29 Jun 2016 18:15:56 +0530 Subject: [PATCH 003/234] AS#149564193179843, Import and render Navbar from react-components repo -- Loaded components so that they can used in jsx syntax as normal react component --- exports.coffee | 50 ++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 44 insertions(+), 6 deletions(-) diff --git a/exports.coffee b/exports.coffee index fe0de65ca..c406f4e20 100644 --- a/exports.coffee +++ b/exports.coffee @@ -1,7 +1,45 @@ +NavBar = require './components/Navbar/Navbar' +Panel = require './components/Panel/Panel' +SearchBar = require './components/SearchBar/SearchBar' +UserDropdown = require './components/UserDropdownMenu/UserDropdownMenu' +TCFooter = require './components/TCFooter/TCFooter' +ProgressBar = require './components/ProgressBar/ProgressBar' +MenuBar = require './components/MenuBar/MenuBar' +ImageViewer = require './components/ImageViewer/ImageViewer' +FileUploader = require './components/FileUploader/FileUploader' +Loader = require './components/Loader/Loader' +Icons = require './components/Icons/Icons' +StandardListItem = require './components/StandardListItem/StandardListItem' +TaggedValue = require './components/TaggedValue/TaggedValue' +QuickLinks = require './components/QuickLinks/QuickLinks' +Tooltip = require './components/Tooltip/Tooltip' +Avatar = require './components/Avatar/Avatar' +Carousel = require './components/Carousel/Carousel' +Checkbox = require './components/Checkbox/Checkbox' +Dropdown = require './components/Dropdown/Dropdown' +ManageSteps = require './components/ManageSteps/ManageSteps' +StepRow = require './components/StepRow/StepRow' +SubNav = require './components/SubNav/SubNav' + module.exports = - default: require './components/FileUploader/FileUploaderContainer.cjsx' - NavBar: require './components/Navbar/Navbar' - SearchBar: require './components/SearchBar/SearchBar.jsx' - UserDropdown: require './components/UserDropdownMenu/UserDropdownMenu.jsx' - TCFooter: require './components/TCFooter/TCFooter.jsx' - Panel: require './components/Panel/Panel' \ No newline at end of file + NavBar : NavBar.default + Panel : Panel.default + SearchBar : SearchBar.default + UserDropdown : UserDropdown.default + ProgressBar : ProgressBar.default + MenuBar : MenuBar.default + ImageViewer : ImageViewer.default + FileUploader : FileUploader.default + Loader : Loader.default + Icons : Icons.default + StandardListItem : StandardListItem.default + TaggedValue : TaggedValue.default + QuickLinks : QuickLinks.default + Tooltip : Tooltip.default + Avatar : Avatar.default + Carousel : Carousel.default + Checkbox : Checkbox.default + Dropdown : Dropdown.default + ManageSteps : ManageSteps.default + StepRow : StepRow.default + SubNav : SubNav.default \ No newline at end of file From a5a2defe715181f0fb65e889d4549662a5194502 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Wed, 29 Jun 2016 18:18:03 +0530 Subject: [PATCH 004/234] AS#149564193179843, Import and render Navbar from react-components repo -- Removed Icons --- exports.coffee | 2 -- 1 file changed, 2 deletions(-) diff --git a/exports.coffee b/exports.coffee index c406f4e20..bdf1080d1 100644 --- a/exports.coffee +++ b/exports.coffee @@ -8,7 +8,6 @@ MenuBar = require './components/MenuBar/MenuBar' ImageViewer = require './components/ImageViewer/ImageViewer' FileUploader = require './components/FileUploader/FileUploader' Loader = require './components/Loader/Loader' -Icons = require './components/Icons/Icons' StandardListItem = require './components/StandardListItem/StandardListItem' TaggedValue = require './components/TaggedValue/TaggedValue' QuickLinks = require './components/QuickLinks/QuickLinks' @@ -31,7 +30,6 @@ module.exports = ImageViewer : ImageViewer.default FileUploader : FileUploader.default Loader : Loader.default - Icons : Icons.default StandardListItem : StandardListItem.default TaggedValue : TaggedValue.default QuickLinks : QuickLinks.default From 97c7554152876533da76e72651feaaed9ff4accd Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Wed, 29 Jun 2016 18:25:40 +0530 Subject: [PATCH 005/234] AS#149564193179843, Import and render Navbar from react-components repo -- Removing old styles dips --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 5f4457127..404d6d5c1 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,6 @@ "build-navbar": "webpack $BUILD --tc --config navbar.webpack.config.coffee;" }, "dependencies": { - "appirio-styles": "0.0.26", "appirio-tech-api-schemas": "^5.0.69", "appirio-tech-client-app-layer": "^0.1.3", "classnames": "^2.2.3", From e97fff3daf958330f257b916a474828e57792d34 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Wed, 29 Jun 2016 18:28:43 +0530 Subject: [PATCH 006/234] AS#149564193179843, Import and render Navbar from react-components repo -- Updated web pack config dep version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 404d6d5c1..62e2bb6d2 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "0.0.0", "main": "./exports.coffee", "devDependencies": { - "appirio-tech-webpack-config": "0.x.x", + "appirio-tech-webpack-config": "appirio-tech/webpack-config.git#feature/connectv2", "eslint": "^2.3.0", "eslint-plugin-react": "^4.2.0", "babel-core": "^6.6.5", From 80e28dc54b88dfc51f31c9c46aa9138cc9d101de Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 30 Jun 2016 16:44:55 +0530 Subject: [PATCH 007/234] AS#149564193179843, Import and render Navbar from react-components repo -- Fixed imports after removing dependency on appirio-styles repo. -- Fixed colors to be used from tc-ui instead of appirio-styles --- components/Carousel/Carousel.scss | 2 +- components/Carousel/CarouselExamples.scss | 4 +-- components/Checkbox/Checkbox.scss | 1 - components/Dropdown/Dropdown.scss | 9 ++++-- components/Dropdown/DropdownExamples.scss | 1 + components/ExampleApp/ExampleApp.scss | 6 ++-- .../ExampleComponent/ExampleComponent.scss | 6 ++-- components/ExampleNav/ExampleNavStyle.scss | 4 +-- .../FileUploader/FileUploaderStyles.scss | 6 ++-- components/ImageViewer/ImageViewer.scss | 2 +- .../ImageViewerHeader/ImageViewerHeader.scss | 4 +-- components/Loader/LoaderStyle.scss | 10 +++---- components/ManageSteps/ManageSteps.scss | 4 +-- .../ManageSteps/ManageStepsExamples.scss | 2 +- components/MenuBar/MenuBar.scss | 6 ++-- components/MenuBar/MenuBarExamples.scss | 2 +- components/Navbar/Navbar.scss | 18 +++++------ components/Navbar/NavbarExample.scss | 4 +-- components/Panel/Panel.scss | 8 ++--- components/Prize/PrizeItem.scss | 30 +++++++------------ components/ProgressBar/ProgressBar.scss | 23 ++++++-------- components/QuickLinks/QuickLinks.scss | 4 +-- components/QuickLinks/QuickLinksExample.scss | 2 +- components/SearchBar/SearchBar.scss | 25 +++++++--------- .../SearchSuggestions/SearchSuggestions.scss | 28 ++++++++--------- components/StepRow/StepRow.scss | 2 +- components/SubNav/SubNav.scss | 11 +++---- components/SubNav/SubNavExamples.scss | 4 +-- .../SubTrackDetails/SubTrackDetails.jsx | 2 +- .../SubTrackDetails/SubTrackDetails.scss | 17 +++++------ components/TCFooter/TCFooter.scss | 8 ++--- components/TaggedValue/TaggedValue.scss | 15 ++++------ components/Tooltip/Tooltip.scss | 4 +-- .../UploadedFile/UploadedFileStyles.scss | 11 +++---- .../UploadedFiles/UploadedFilesStyles.scss | 2 +- .../UserDropdownMenu/UserDropdownMenu.scss | 13 ++------ package.json | 1 + 37 files changed, 134 insertions(+), 167 deletions(-) diff --git a/components/Carousel/Carousel.scss b/components/Carousel/Carousel.scss index cb699725a..a5f446514 100644 --- a/components/Carousel/Carousel.scss +++ b/components/Carousel/Carousel.scss @@ -1,4 +1,4 @@ -@import 'topcoder/tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; $pager-bg-color: #737380; diff --git a/components/Carousel/CarouselExamples.scss b/components/Carousel/CarouselExamples.scss index d6d4c8b34..f39f4f310 100644 --- a/components/Carousel/CarouselExamples.scss +++ b/components/Carousel/CarouselExamples.scss @@ -1,4 +1,4 @@ -@import 'topcoder/tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; .Carousel { .StandardListItem { @@ -8,7 +8,7 @@ .CarouselExamples { > p { - border: 1px solid $accent-gray; + border: 1px solid $tc-gray-40; margin: 20px 0px; } .limited-width { diff --git a/components/Checkbox/Checkbox.scss b/components/Checkbox/Checkbox.scss index 02f1f6cac..209166dcb 100644 --- a/components/Checkbox/Checkbox.scss +++ b/components/Checkbox/Checkbox.scss @@ -1,4 +1,3 @@ -@import "work/work-includes"; .Checkbox { label { diff --git a/components/Dropdown/Dropdown.scss b/components/Dropdown/Dropdown.scss index 876e386de..b320b5c53 100644 --- a/components/Dropdown/Dropdown.scss +++ b/components/Dropdown/Dropdown.scss @@ -1,4 +1,4 @@ -@import "topcoder/tc-includes"; +@import '~tc-ui/src/styles/tc-includes'; .Dropdown { margin-top: 30px; @@ -18,10 +18,15 @@ background-color: #fff; padding: 11px 20px; border-radius: 5px; + box-sizing: border-box; + + li { + list-style: none; + } li a { color: #394146; - font-size: "Roboto", Arial, Helvetica, sans-serif; + font-family: "Roboto", Arial, Helvetica, sans-serif; font-size: 12px; line-height: 26px; } diff --git a/components/Dropdown/DropdownExamples.scss b/components/Dropdown/DropdownExamples.scss index b86dd3e10..fb255d838 100644 --- a/components/Dropdown/DropdownExamples.scss +++ b/components/Dropdown/DropdownExamples.scss @@ -12,6 +12,7 @@ .full-width { width: 100%; + box-sizing: border-box; .Dropdown:before { right: initial; diff --git a/components/ExampleApp/ExampleApp.scss b/components/ExampleApp/ExampleApp.scss index 703006c42..ed45eb76e 100644 --- a/components/ExampleApp/ExampleApp.scss +++ b/components/ExampleApp/ExampleApp.scss @@ -1,7 +1,7 @@ -@import "work/work-styles"; +@import '~tc-ui/src/styles/tc-includes'; body { - background-color: $grey-lighter; + background-color: $tc-gray-neutral-light; padding: 15px; .invisible { @@ -13,6 +13,6 @@ body { margin : 80px 0 40px 0; text-align : center; padding-bottom: 10px; - border-bottom : 1px solid $grey-light; + border-bottom : 1px solid $tc-gray-neutral-dark; } } diff --git a/components/ExampleComponent/ExampleComponent.scss b/components/ExampleComponent/ExampleComponent.scss index e8dd37392..baa78443d 100644 --- a/components/ExampleComponent/ExampleComponent.scss +++ b/components/ExampleComponent/ExampleComponent.scss @@ -1,6 +1,6 @@ // Whenever you need predefined color variables or mixins // Add the following line to the top of your .scss file -@import 'topcoder/tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; // Declare local variables, if necessary $peaches: #ffdab9; @@ -19,7 +19,7 @@ $peaches: #ffdab9; // Prefer flat over nested structure .item-list { - background-color: $white; + background-color: white; } .peaches-color { @@ -28,7 +28,7 @@ $peaches: #ffdab9; // Always nest media queries .on-sale { - border: 3px solid $primary; + border: 3px solid $tc-dark-blue; @media screen and (max-width: 700px) { border-width: 2px; } diff --git a/components/ExampleNav/ExampleNavStyle.scss b/components/ExampleNav/ExampleNavStyle.scss index a13a8a4a5..ec67962b7 100644 --- a/components/ExampleNav/ExampleNavStyle.scss +++ b/components/ExampleNav/ExampleNavStyle.scss @@ -1,4 +1,4 @@ -@import "work/work-includes"; +@import '~tc-ui/src/styles/tc-includes'; .ExampleNav { position: fixed; @@ -16,6 +16,6 @@ } .back { - color: $grey-dark; + color: $tc-gray-30; } } \ No newline at end of file diff --git a/components/FileUploader/FileUploaderStyles.scss b/components/FileUploader/FileUploaderStyles.scss index 6d40856b8..ba6e31aa2 100644 --- a/components/FileUploader/FileUploaderStyles.scss +++ b/components/FileUploader/FileUploaderStyles.scss @@ -1,4 +1,4 @@ -@import "work/work-includes"; +@import '~tc-ui/src/styles/tc-includes'; .FileUploader { position: relative; @@ -18,14 +18,14 @@ .drag-and-drop { .Dropzone { text-align: center; - border : 3px dashed $grey; + border : 3px dashed $tc-gray-20; margin : 10px; display : block; p { font-size: 20px; margin: 30px 0px; - color: $grey; + color: $tc-gray-20; } } } diff --git a/components/ImageViewer/ImageViewer.scss b/components/ImageViewer/ImageViewer.scss index 4d4f33aef..afd8c14dc 100644 --- a/components/ImageViewer/ImageViewer.scss +++ b/components/ImageViewer/ImageViewer.scss @@ -1,4 +1,4 @@ -@import "work/work-includes"; + .ImageViewer { diff --git a/components/ImageViewerHeader/ImageViewerHeader.scss b/components/ImageViewerHeader/ImageViewerHeader.scss index 1ecdc48cf..a65ff4295 100644 --- a/components/ImageViewerHeader/ImageViewerHeader.scss +++ b/components/ImageViewerHeader/ImageViewerHeader.scss @@ -1,4 +1,4 @@ -@import "work/work-includes"; +@import '~tc-ui/src/styles/tc-includes'; .ImageViewerHeader { @@ -30,7 +30,7 @@ } .title { - color: $gray; + color: $tc-gray-20; } } } diff --git a/components/Loader/LoaderStyle.scss b/components/Loader/LoaderStyle.scss index 4468d4958..884b20d07 100644 --- a/components/Loader/LoaderStyle.scss +++ b/components/Loader/LoaderStyle.scss @@ -1,4 +1,4 @@ -@import "work/work-includes"; +@import '~tc-ui/src/styles/tc-includes'; .Loader { position : absolute; @@ -20,10 +20,10 @@ .Loader__loader { width: 50px; height: 50px; - border-top : 10px solid $grey-light; - border-right : 10px solid $grey-light; - border-bottom : 10px solid $grey-light; - border-left : 10px solid $grey-lighter ; + border-top : 10px solid $tc-gray-neutral-dark; + border-right : 10px solid $tc-gray-neutral-dark; + border-bottom : 10px solid $tc-gray-neutral-dark; + border-left : 10px solid $tc-gray-neutral-light; -webkit-transform: translateZ(0); -ms-transform : translateZ(0); transform : translateZ(0); diff --git a/components/ManageSteps/ManageSteps.scss b/components/ManageSteps/ManageSteps.scss index 22ca4796f..b332f91a0 100644 --- a/components/ManageSteps/ManageSteps.scss +++ b/components/ManageSteps/ManageSteps.scss @@ -1,4 +1,4 @@ -@import "work/work-includes"; + .ManageSteps { h5 { @@ -6,7 +6,7 @@ } .StepRow { - @include justify-content(center); + justify-content: center; } hr { diff --git a/components/ManageSteps/ManageStepsExamples.scss b/components/ManageSteps/ManageStepsExamples.scss index 537c37a82..d1b9fdec2 100644 --- a/components/ManageSteps/ManageStepsExamples.scss +++ b/components/ManageSteps/ManageStepsExamples.scss @@ -1,4 +1,4 @@ -@import "work/work-includes"; + .ManageStepsExamples { padding: 40px; diff --git a/components/MenuBar/MenuBar.scss b/components/MenuBar/MenuBar.scss index 9617e9bf3..5cafda08d 100644 --- a/components/MenuBar/MenuBar.scss +++ b/components/MenuBar/MenuBar.scss @@ -1,4 +1,4 @@ -@import 'topcoder/tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; $menu-bar-item-text-color: #737380; @@ -33,10 +33,10 @@ $menu-bar-item-text-color: #737380; display: flex; &.selected { - border-bottom: 2px solid $primary-light; + border-bottom: 2px solid $tc-light-blue; a { - color: $black; + color: $tc-black; } } diff --git a/components/MenuBar/MenuBarExamples.scss b/components/MenuBar/MenuBarExamples.scss index ef14e46c2..1b9e113e3 100644 --- a/components/MenuBar/MenuBarExamples.scss +++ b/components/MenuBar/MenuBarExamples.scss @@ -1,4 +1,4 @@ -@import 'topcoder/tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; .MenuBar { &.vertical { diff --git a/components/Navbar/Navbar.scss b/components/Navbar/Navbar.scss index b71349d6b..e7b29061f 100755 --- a/components/Navbar/Navbar.scss +++ b/components/Navbar/Navbar.scss @@ -1,9 +1,5 @@ // this is to include tc styles in the output library -@import "topcoder/tc-styles"; - -$navbar-bg: #FAFAFB; -$border-color: #CFCFD2; -$placeholder-bg: #B47DD6; +@import '~tc-ui/src/styles/tc-includes'; /* Breakpoints - update as necessary */ $mobile: 768px; @@ -11,8 +7,8 @@ $super-wide: 1376px; .Navbar { height: 60px; - background-color: $navbar-bg; - border-bottom: 1px solid $border-color; + background-color: $tc-gray-neutral-light; + border-bottom: 1px solid $tc-gray-30; padding: 10px 20px; width: 100%; @@ -74,11 +70,11 @@ $super-wide: 1376px; } &:hover { - background-color: $accent-gray; + background-color: $tc-gray-40; .mobile-wrap { svg > g > g { - stroke: $white; + stroke: white; } } } @@ -137,11 +133,11 @@ $super-wide: 1376px; cursor: pointer; &:hover { - background-color: $accent-gray; + background-color: $tc-gray-40; .mobile-wrap { svg > g > g { - stroke: $white; + stroke: white; } } } diff --git a/components/Navbar/NavbarExample.scss b/components/Navbar/NavbarExample.scss index abced894b..760faf143 100644 --- a/components/Navbar/NavbarExample.scss +++ b/components/Navbar/NavbarExample.scss @@ -1,10 +1,10 @@ -@import "topcoder/tc-styles"; +@import '~tc-ui/src/styles/tc-includes'; .search-results { .exact-match, .members, .challenges { - border-bottom: 1px solid $accent-gray; + border-bottom: 1px solid $tc-gray-40; margin: 10px 0px; padding: 0px 10px 10px 10px; diff --git a/components/Panel/Panel.scss b/components/Panel/Panel.scss index a16519b1e..fdfce7a4f 100644 --- a/components/Panel/Panel.scss +++ b/components/Panel/Panel.scss @@ -1,4 +1,4 @@ -@import 'topcoder/tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; $panel-header-text-color: #737380; $panel-header-bg-color: #DFDFE1; @@ -15,9 +15,9 @@ $panel-header-bg-color: #DFDFE1; } .panel-body { - border-left : 1px solid $accent-gray; - border-right : 1px solid $accent-gray; - border-bottom : 1px solid $accent-gray; + border-left : 1px solid $tc-gray-40; + border-right : 1px solid $tc-gray-40; + border-bottom : 1px solid $tc-gray-40; padding: 10px; } } \ No newline at end of file diff --git a/components/Prize/PrizeItem.scss b/components/Prize/PrizeItem.scss index 374950d1c..ffecae4ac 100644 --- a/components/Prize/PrizeItem.scss +++ b/components/Prize/PrizeItem.scss @@ -1,12 +1,4 @@ -@import 'topcoder/tc-includes'; - -$gold: #FFD900; -$silver: #A9BCD4; -$bronze: #BD731E; -$gray-30: #C3C3C8; -$gray: #47474F; -$purple: #B47DD6; -$accent: #59A7FF; +@import '~tc-ui/src/styles/tc-includes'; .TaggedValue { display:inline-block; @@ -17,7 +9,7 @@ $accent: #59A7FF; font-family: "Roboto", Arial, Helvetica, sans-serif; font-size: 13px; line-height: 15px; - color: $white; + color: white; font-weight: 500; } .tagged-value-bg{ @@ -25,14 +17,14 @@ $accent: #59A7FF; padding: 1px 4px 1px 4px; min-width: 15px; max-height: 15px; - background: $gray-30; + background: $tc-gray-30; border-radius: 8px; text-align: center; font-size: 11px; line-height: 13px; font-family: "Roboto-Black", Arial, Helvetica, sans-serif; font-weight: bold; - color: $gray; + color: $tc-gray-80; } } @@ -40,18 +32,18 @@ $accent: #59A7FF; .prize { .TaggedValue:nth-child(1) { .tagged-value-bg { - background: $gold; + background: $tc-gold; } } .TaggedValue:nth-child(2) { .tagged-value-bg { - background: $silver; + background: $tc-silver; } } .TaggedValue:nth-child(3) { .tagged-value-bg { - background: $bronze; + background: $tc-bronze; } } } @@ -59,18 +51,18 @@ $accent: #59A7FF; .bonus { .TaggedValue:nth-child(1) { .tagged-value-bg { - background: $purple; + background: $tc-purple-70; } } .TaggedValue:nth-child(2) { .tagged-value-bg { - background: $purple; + background: $tc-purple-70; } } .TaggedValue:nth-child(3) { .tagged-value-bg { - background: $accent; + background: $tc-dark-blue-70; } } } @@ -81,7 +73,7 @@ $accent: #59A7FF; font-weight: bold; font-size: 15px; line-height: 18px; - color: $white; + color: white; } .items { margin-top: 10px; diff --git a/components/ProgressBar/ProgressBar.scss b/components/ProgressBar/ProgressBar.scss index 3bc32ef22..badfd80b8 100644 --- a/components/ProgressBar/ProgressBar.scss +++ b/components/ProgressBar/ProgressBar.scss @@ -1,9 +1,4 @@ -@import 'topcoder/tc-includes'; - -$accent: #59A7FF; -$gray: #47474F; -$gray-30: #C3C3C8; -$light-gray: #DCDCE0; +@import '~tc-ui/src/styles/tc-includes'; .ProgressBar { .progress-box { @@ -23,7 +18,7 @@ $light-gray: #DCDCE0; font-weight: 500; font-size: 13px; line-height: 15px; - color: $white + color: white; } } .progress-ui { @@ -36,7 +31,7 @@ $light-gray: #DCDCE0; position: absolute; height: 4px; width: 100%; - background-color: $light-gray; + background-color: $tc-gray-20; display: inline-block; } @@ -45,9 +40,9 @@ $light-gray: #DCDCE0; left:0px; position: absolute; height: 4px; - background-color: $accent; + background-color: $tc-dark-blue-70; display: inline-block; - border-right: 4px solid $gray; + border-right: 4px solid $tc-gray-80; } .progress-circles { @@ -59,14 +54,14 @@ $light-gray: #DCDCE0; .circle { position: absolute; float: left; - background: $light-gray; - border: 3px solid $gray; + background: $tc-gray-20; + border: 3px solid $tc-gray-80; width: 13px; height: 13px; border-radius: 50%; } .completed { - background: $accent; + background: $tc-dark-blue; } } } @@ -83,7 +78,7 @@ $light-gray: #DCDCE0; font-family: "Roboto", Arial, Helvetica, sans-serif; font-size: 11px; line-height: 15px; - color: $gray-30; + color: $tc-gray-30; } } } diff --git a/components/QuickLinks/QuickLinks.scss b/components/QuickLinks/QuickLinks.scss index 8f1490c84..fe268cde3 100644 --- a/components/QuickLinks/QuickLinks.scss +++ b/components/QuickLinks/QuickLinks.scss @@ -1,4 +1,4 @@ -@import "topcoder/tc-includes"; +@import '~tc-ui/src/styles/tc-includes'; $link-text-hover-color: #7A7F83; @@ -37,7 +37,7 @@ $link-text-hover-color: #7A7F83; .label { font-size: 12px; line-height: 26px; - color: $accent-gray-dark; + color: $tc-gray-90; } } } diff --git a/components/QuickLinks/QuickLinksExample.scss b/components/QuickLinks/QuickLinksExample.scss index fe33ad19e..f2c07d21c 100644 --- a/components/QuickLinks/QuickLinksExample.scss +++ b/components/QuickLinks/QuickLinksExample.scss @@ -1,4 +1,4 @@ -@import "topcoder/tc-includes"; +@import '~tc-ui/src/styles/tc-includes'; .example-wrap { width: 332px; diff --git a/components/SearchBar/SearchBar.scss b/components/SearchBar/SearchBar.scss index 63ce73fc0..8c95dc0b0 100644 --- a/components/SearchBar/SearchBar.scss +++ b/components/SearchBar/SearchBar.scss @@ -1,13 +1,10 @@ -@import "topcoder/tc-includes"; - -$border-color: #D8D8DB; -$active-icon-wrap-bg: #888894; +@import '~tc-ui/src/styles/tc-includes'; .SearchBar { - background-color: $white; + background-color: white; height: 40px; width: 100%; - border: 1px solid $border-color; + border: 1px solid $tc-gray-20; border-radius: 4px; position: relative; padding-left: 15px; @@ -25,7 +22,7 @@ $active-icon-wrap-bg: #888894; left: 15px; top: 50%; transform: translateY(-50%); - color: $accent-gray; + color: $tc-gray-40; font-size: 15px; line-height: 20px; width: 75%; @@ -44,7 +41,7 @@ $active-icon-wrap-bg: #888894; } &.state-focused { - border-color: $accent-gray; + border-color: $tc-gray-40; .search-typeahead-text { display: block; @@ -52,7 +49,7 @@ $active-icon-wrap-bg: #888894; .search-icon-wrap { cursor: pointer; - background-color: $active-icon-wrap-bg; + background-color: $tc-gray-50; } .suggestions-panel { @@ -61,7 +58,7 @@ $active-icon-wrap-bg: #888894; } &.state-filled { - border-color: $border-color; + border-color: $tc-gray-20; .search-typeahead-text { display: none; @@ -69,7 +66,7 @@ $active-icon-wrap-bg: #888894; .search-icon-wrap { cursor: pointer; - background-color: $active-icon-wrap-bg; + background-color: $tc-gray-50; } .suggestions-panel { @@ -83,7 +80,7 @@ $active-icon-wrap-bg: #888894; outline: 0px; border: 0px none; font-size: 17px; - color: $accent-gray-dark; + color: $tc-gray-90; line-height: 20px; width: 90%; position: absolute; @@ -105,7 +102,7 @@ $active-icon-wrap-bg: #888894; } .search-typeahead-text { - color: $accent-gray; + color: $tc-gray-40; display: none; z-index: 10; left: 16.5px; @@ -126,7 +123,7 @@ $active-icon-wrap-bg: #888894; position: absolute; top: -1px; right: -1px; - background-color: $gray-light; + background-color: $tc-gray-neutral-dark; border-top-right-radius: 4px; border-bottom-right-radius: 4px; diff --git a/components/SearchSuggestions/SearchSuggestions.scss b/components/SearchSuggestions/SearchSuggestions.scss index 52668c273..da38d077b 100644 --- a/components/SearchSuggestions/SearchSuggestions.scss +++ b/components/SearchSuggestions/SearchSuggestions.scss @@ -1,16 +1,16 @@ -@import 'topcoder/tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; .SearchSuggestions { margin-bottom: 30px; - background-color: $white; - border: 1px solid $gray-dark; + background-color: white; + border: 1px solid $tc-gray-30; box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.3); border-radius: 2px; min-height: 303px; position: relative; .panel-header { - background-color: $gray-lighter; + background-color: $tc-gray-neutral-light; position: relative; height: 36px; padding-left: 14px; @@ -18,7 +18,7 @@ .label { font-size: 12px; line-height: 14px; - color: $gray-darker; + color: $tc-gray-30; position: relative; } @@ -37,7 +37,7 @@ a, a:visited { font-size: 12px; line-height: 14px; - color: $gray-darker; + color: $tc-gray-30; background-color: transparent; border: 0px; outline: 0px; @@ -55,7 +55,7 @@ .recent-search-panel-action { a, a:hover, a:active { - color: $dark-blue; + color: $tc-dark-blue; border: 0px; outline: 0px; } @@ -69,7 +69,7 @@ padding-bottom: 5px; li.selected { - background-color: $gray-light; + background-color: $tc-gray-neutral-dark; } .StandardListItem { @@ -80,7 +80,7 @@ max-height: 36px; .label { - color: $accent-gray-dark; + color: $tc-gray-90; font-size: 16px; line-height: 30px; white-space: nowrap; @@ -92,7 +92,7 @@ } .StandardListItem:hover { - background-color: $gray-light; + background-color: $tc-gray-neutral-dark; } @@ -101,8 +101,8 @@ display:block; height: 40px; padding: 14px 15px; - background-color: $primary-lighter; - color: $accent-gray-dark; + background-color: $tc-dark-blue-70; + color: $tc-gray-90; font-size: 12px; line-height: 14px; position: absolute; @@ -115,8 +115,8 @@ } .footer-link:hover, .footer-link:active { - background-color: $primary-light; - color: $black; + background-color: $tc-light-blue; + color: $tc-black; border: 0px none; outline: 0px none; } diff --git a/components/StepRow/StepRow.scss b/components/StepRow/StepRow.scss index cf239999c..c2d69c5b7 100644 --- a/components/StepRow/StepRow.scss +++ b/components/StepRow/StepRow.scss @@ -1,4 +1,4 @@ -@import "work/work-includes"; + .StepRow { .name { diff --git a/components/SubNav/SubNav.scss b/components/SubNav/SubNav.scss index 78fe29e69..eae157786 100644 --- a/components/SubNav/SubNav.scss +++ b/components/SubNav/SubNav.scss @@ -1,21 +1,18 @@ -@import 'topcoder/tc-includes'; - -$subnav-item-bg-color: #B47DD6; -$subnav-item-text-color: #7A7F83; +@import '~tc-ui/src/styles/tc-includes'; .SubNav { - background-color: $accent-gray-dark; + background-color: $tc-gray-50; .StandardListItem { padding: 20px 0px; .label { - color: $subnav-item-text-color; + color: $tc-gray-60; } .label:active, .label:hover { - color: $white; + color: white; } } } \ No newline at end of file diff --git a/components/SubNav/SubNavExamples.scss b/components/SubNav/SubNavExamples.scss index 81bc13175..37933a405 100644 --- a/components/SubNav/SubNavExamples.scss +++ b/components/SubNav/SubNavExamples.scss @@ -1,8 +1,8 @@ -@import 'topcoder/tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; .SubNavExamples { > p { - border: 1px solid $accent-gray; + border: 1px solid $tc-gray-40; margin: 20px 0px; } } \ No newline at end of file diff --git a/components/SubTrackDetails/SubTrackDetails.jsx b/components/SubTrackDetails/SubTrackDetails.jsx index e2d29a6ff..b4225bd56 100644 --- a/components/SubTrackDetails/SubTrackDetails.jsx +++ b/components/SubTrackDetails/SubTrackDetails.jsx @@ -13,7 +13,7 @@ const SubTrackDetails = ({name, code, description, tracks}) => { {hidden: tracks.indexOf('design') === -1} ) const dataScienceClass = classNames( - 'verticalLine', 'dataScience', + 'verticalLine', 'data', {hidden: tracks.indexOf('data science') === -1} ) diff --git a/components/SubTrackDetails/SubTrackDetails.scss b/components/SubTrackDetails/SubTrackDetails.scss index 887a0b9d2..24140b250 100644 --- a/components/SubTrackDetails/SubTrackDetails.scss +++ b/components/SubTrackDetails/SubTrackDetails.scss @@ -1,8 +1,5 @@ -@import "topcoder/tc-includes"; +@import '~tc-ui/src/styles/tc-includes'; -$develop-bar-color: #21B2F1; -$design-bar-color: #60C700; -$dataScience-bar-color: #FB7D22; $track-desc-text-color: #DCDCE0; .SubTrackDetails{ @@ -13,22 +10,22 @@ $track-desc-text-color: #DCDCE0; font-size: 15px; line-height: 18px; margin-left: 11px; - color: $white; + color: white; float: left; font-weight: bold; font-family: "Roboto", Arial, Helvetica, sans-serif; } .develop { - background-color: $develop-bar-color; + @include tc-track-colors; } .design { - background-color: $design-bar-color + @include tc-track-colors; } - .dataScience { - background-color: $dataScience-bar-color + .data { + @include tc-track-colors; } } @@ -38,7 +35,7 @@ $track-desc-text-color: #DCDCE0; line-height: 18px; margin-top: 7px; font-family: "Roboto", Arial, Helvetica, sans-serif; - color: $track-desc-text-color; + color: $tc-gray-20; } .verticalLine { diff --git a/components/TCFooter/TCFooter.scss b/components/TCFooter/TCFooter.scss index f44a5cbb0..74cf2e29b 100644 --- a/components/TCFooter/TCFooter.scss +++ b/components/TCFooter/TCFooter.scss @@ -1,8 +1,8 @@ -@import 'topcoder/tc-includes'; +@import '~tc-ui/src/styles/tc-includes'; .TCFooter { width: 100%; - background-color: $gray-darkest; + background-color: $tc-gray-90; padding: 1px 20px 30px 20px; font-family: 'Roboto', Arial; } @@ -51,8 +51,8 @@ .MenuBar { width: 100%; li { - background-color: $white; - border-bottom: 1px solid $gray-light; + background-color: white; + border-bottom: 1px solid $tc-gray-neutral-dark; } } } diff --git a/components/TaggedValue/TaggedValue.scss b/components/TaggedValue/TaggedValue.scss index 696700909..fa8c4ebad 100644 --- a/components/TaggedValue/TaggedValue.scss +++ b/components/TaggedValue/TaggedValue.scss @@ -1,9 +1,4 @@ -@import 'topcoder/tc-includes'; - -$gray-30: #C3C3C8; -$gray: #47474F; -$purple: #B47DD6; -$accent: #59A7FF; +@import '~tc-ui/src/styles/tc-includes'; .TaggedValue { display:inline-block; @@ -13,21 +8,21 @@ $accent: #59A7FF; padding: 4px 4px 1px 4px; min-width: 15px; max-height: 15px; - background: $accent; + background: $tc-dark-blue-70; border-radius: 8px; text-align: center; font-size: 11px; line-height: 13px; font-family: "Roboto", Arial, Helvetica, sans-serif; font-weight: bold; - color: $gray; + color: $tc-gray-80; padding: 1px 7px 2px 7px; } .subText { font-family: "Roboto", Arial, Helvetica, sans-serif; font-size: 13px; line-height: 15px; - color: $white; + color: white; font-weight: 500; padding-left: 6px; padding-right: 10px; @@ -35,6 +30,6 @@ $accent: #59A7FF; } .count-one { .tagged-value-bg { - background: $purple; + background: $tc-purple-70; } } diff --git a/components/Tooltip/Tooltip.scss b/components/Tooltip/Tooltip.scss index 0abddc79e..48ec1b75a 100644 --- a/components/Tooltip/Tooltip.scss +++ b/components/Tooltip/Tooltip.scss @@ -1,6 +1,4 @@ -@import 'topcoder/tc-includes'; - -$tc-gray-80: #47474f; +@import '~tc-ui/src/styles/tc-includes'; .Tooltip { .tooltip-target { diff --git a/components/UploadedFile/UploadedFileStyles.scss b/components/UploadedFile/UploadedFileStyles.scss index bd959707c..3a2f048ce 100644 --- a/components/UploadedFile/UploadedFileStyles.scss +++ b/components/UploadedFile/UploadedFileStyles.scss @@ -1,10 +1,10 @@ -@import "work/work-includes"; +@import '~tc-ui/src/styles/tc-includes'; .UploadedFile { width: 203px; main { - background-color: $grey-lighter; + background-color: $tc-gray-neutral-light; height : 135px; position : relative; @@ -29,7 +29,8 @@ margin-top: 5px; p { - @include ellipsis(180px); + @include ellipsis; + max-width: 180px; font-weight: 400; } @@ -63,11 +64,11 @@ width : 100%; height : 82px; border-width: 0; - color : $text-color-lighter; + color : $tc-gray-50; &:focus { border-width: 1px; - color: $text-color; + color: $tc-gray-80; } } } diff --git a/components/UploadedFiles/UploadedFilesStyles.scss b/components/UploadedFiles/UploadedFilesStyles.scss index 77cd6aca0..c38f44123 100644 --- a/components/UploadedFiles/UploadedFilesStyles.scss +++ b/components/UploadedFiles/UploadedFilesStyles.scss @@ -1,4 +1,4 @@ -@import "work/work-includes"; + .UploadedFiles { margin-right: auto; diff --git a/components/UserDropdownMenu/UserDropdownMenu.scss b/components/UserDropdownMenu/UserDropdownMenu.scss index d7b8a02dc..72283663e 100644 --- a/components/UserDropdownMenu/UserDropdownMenu.scss +++ b/components/UserDropdownMenu/UserDropdownMenu.scss @@ -1,13 +1,7 @@ -@import "topcoder/tc-includes"; -@import "topcoder/tc-buttons"; - -$user-dropdown-bg: #FAFAFB; -$placeholder-bg: #B47DD6; -$username-color: #737380; +@import '~tc-ui/src/styles/tc-includes'; .UserDropdownMenu { padding: 15px 20px; - background-color: $user-dropdown-bg; display: inline-block; position: relative; @@ -40,7 +34,6 @@ $username-color: #737380; font-family: "Roboto", Arial, Helvetica, sans-serif; font-size: 14px; line-height: 16px; - color: $username-color; @include ellipsis; margin: 0px; margin-right: 10px; @@ -72,7 +65,7 @@ $username-color: #737380; } .user-menu-item:hover { - background-color: $gray-light; + background-color: $tc-gray-neutral-dark; } } @@ -82,7 +75,7 @@ $username-color: #737380; ul:not(:last-child) { li:last-child a { - border-bottom: 1px solid $gray-light; + border-bottom: 1px solid $tc-gray-neutral-dark; display: block; } } diff --git a/package.json b/package.json index 62e2bb6d2..c8ea2365e 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "react-dropzone": "^3.3.2", "react-redux": "^4.2.1", "react-select": "^0.9.1", + "tc-ui": "https://github.com/appirio-tech/tc-ui.git#feature/connectv2", "isomorphic-fetch": "^2.2.1" } } From 07841766dc8b9f9684dafa58882986409efbd0ad Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 30 Jun 2016 17:46:02 +0530 Subject: [PATCH 008/234] AS#149564193179843, Import and render Navbar from react-components repo -- Fixed import so that we have all tc styles --- components/Carousel/Carousel.scss | 2 +- components/Carousel/CarouselExamples.scss | 2 +- components/Dropdown/Dropdown.scss | 3 +-- components/Dropdown/DropdownExamples.scss | 1 - components/ExampleApp/ExampleApp.scss | 2 +- components/ExampleComponent/ExampleComponent.scss | 2 +- components/ExampleNav/ExampleNavStyle.scss | 2 +- components/FileUploader/FileUploaderStyles.scss | 2 +- components/ImageViewerHeader/ImageViewerHeader.scss | 2 +- components/Loader/LoaderStyle.scss | 2 +- components/MenuBar/MenuBar.scss | 2 +- components/MenuBar/MenuBarExamples.scss | 2 +- components/Navbar/Navbar.scss | 2 +- components/Navbar/NavbarExample.scss | 2 +- components/Panel/Panel.scss | 2 +- components/Prize/PrizeItem.scss | 2 +- components/ProgressBar/ProgressBar.scss | 2 +- components/QuickLinks/QuickLinks.scss | 2 +- components/QuickLinks/QuickLinksExample.scss | 2 +- components/SearchBar/SearchBar.scss | 2 +- components/SearchSuggestions/SearchSuggestions.scss | 2 +- components/SubNav/SubNav.scss | 2 +- components/SubNav/SubNavExamples.scss | 2 +- components/SubTrackDetails/SubTrackDetails.scss | 2 +- components/TCFooter/TCFooter.scss | 2 +- components/TaggedValue/TaggedValue.scss | 2 +- components/Tooltip/Tooltip.scss | 2 +- components/UploadedFile/UploadedFileStyles.scss | 2 +- components/UserDropdownMenu/UserDropdownMenu.scss | 2 +- 29 files changed, 28 insertions(+), 30 deletions(-) diff --git a/components/Carousel/Carousel.scss b/components/Carousel/Carousel.scss index a5f446514..e26335a16 100644 --- a/components/Carousel/Carousel.scss +++ b/components/Carousel/Carousel.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-includes'; +@import '~tc-ui/src/styles/tc-styles'; $pager-bg-color: #737380; diff --git a/components/Carousel/CarouselExamples.scss b/components/Carousel/CarouselExamples.scss index f39f4f310..a2a99c7fb 100644 --- a/components/Carousel/CarouselExamples.scss +++ b/components/Carousel/CarouselExamples.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-includes'; +@import '~tc-ui/src/styles/tc-styles'; .Carousel { .StandardListItem { diff --git a/components/Dropdown/Dropdown.scss b/components/Dropdown/Dropdown.scss index b320b5c53..7f66ae4f2 100644 --- a/components/Dropdown/Dropdown.scss +++ b/components/Dropdown/Dropdown.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-includes'; +@import '~tc-ui/src/styles/tc-styles'; .Dropdown { margin-top: 30px; @@ -18,7 +18,6 @@ background-color: #fff; padding: 11px 20px; border-radius: 5px; - box-sizing: border-box; li { list-style: none; diff --git a/components/Dropdown/DropdownExamples.scss b/components/Dropdown/DropdownExamples.scss index fb255d838..b86dd3e10 100644 --- a/components/Dropdown/DropdownExamples.scss +++ b/components/Dropdown/DropdownExamples.scss @@ -12,7 +12,6 @@ .full-width { width: 100%; - box-sizing: border-box; .Dropdown:before { right: initial; diff --git a/components/ExampleApp/ExampleApp.scss b/components/ExampleApp/ExampleApp.scss index ed45eb76e..122b7e5c6 100644 --- a/components/ExampleApp/ExampleApp.scss +++ b/components/ExampleApp/ExampleApp.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-includes'; +@import '~tc-ui/src/styles/tc-styles'; body { background-color: $tc-gray-neutral-light; diff --git a/components/ExampleComponent/ExampleComponent.scss b/components/ExampleComponent/ExampleComponent.scss index baa78443d..978f10dc9 100644 --- a/components/ExampleComponent/ExampleComponent.scss +++ b/components/ExampleComponent/ExampleComponent.scss @@ -1,6 +1,6 @@ // Whenever you need predefined color variables or mixins // Add the following line to the top of your .scss file -@import '~tc-ui/src/styles/tc-includes'; +@import '~tc-ui/src/styles/tc-styles'; // Declare local variables, if necessary $peaches: #ffdab9; diff --git a/components/ExampleNav/ExampleNavStyle.scss b/components/ExampleNav/ExampleNavStyle.scss index ec67962b7..cae066013 100644 --- a/components/ExampleNav/ExampleNavStyle.scss +++ b/components/ExampleNav/ExampleNavStyle.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-includes'; +@import '~tc-ui/src/styles/tc-styles'; .ExampleNav { position: fixed; diff --git a/components/FileUploader/FileUploaderStyles.scss b/components/FileUploader/FileUploaderStyles.scss index ba6e31aa2..9d7d58b35 100644 --- a/components/FileUploader/FileUploaderStyles.scss +++ b/components/FileUploader/FileUploaderStyles.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-includes'; +@import '~tc-ui/src/styles/tc-styles'; .FileUploader { position: relative; diff --git a/components/ImageViewerHeader/ImageViewerHeader.scss b/components/ImageViewerHeader/ImageViewerHeader.scss index a65ff4295..3c39e51af 100644 --- a/components/ImageViewerHeader/ImageViewerHeader.scss +++ b/components/ImageViewerHeader/ImageViewerHeader.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-includes'; +@import '~tc-ui/src/styles/tc-styles'; .ImageViewerHeader { diff --git a/components/Loader/LoaderStyle.scss b/components/Loader/LoaderStyle.scss index 884b20d07..e3cb7bc3b 100644 --- a/components/Loader/LoaderStyle.scss +++ b/components/Loader/LoaderStyle.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-includes'; +@import '~tc-ui/src/styles/tc-styles'; .Loader { position : absolute; diff --git a/components/MenuBar/MenuBar.scss b/components/MenuBar/MenuBar.scss index 5cafda08d..fad171222 100644 --- a/components/MenuBar/MenuBar.scss +++ b/components/MenuBar/MenuBar.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-includes'; +@import '~tc-ui/src/styles/tc-styles'; $menu-bar-item-text-color: #737380; diff --git a/components/MenuBar/MenuBarExamples.scss b/components/MenuBar/MenuBarExamples.scss index 1b9e113e3..40ac8dce3 100644 --- a/components/MenuBar/MenuBarExamples.scss +++ b/components/MenuBar/MenuBarExamples.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-includes'; +@import '~tc-ui/src/styles/tc-styles'; .MenuBar { &.vertical { diff --git a/components/Navbar/Navbar.scss b/components/Navbar/Navbar.scss index e7b29061f..6165e35b1 100755 --- a/components/Navbar/Navbar.scss +++ b/components/Navbar/Navbar.scss @@ -1,5 +1,5 @@ // this is to include tc styles in the output library -@import '~tc-ui/src/styles/tc-includes'; +@import '~tc-ui/src/styles/tc-styles'; /* Breakpoints - update as necessary */ $mobile: 768px; diff --git a/components/Navbar/NavbarExample.scss b/components/Navbar/NavbarExample.scss index 760faf143..90d13bb4f 100644 --- a/components/Navbar/NavbarExample.scss +++ b/components/Navbar/NavbarExample.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-includes'; +@import '~tc-ui/src/styles/tc-styles'; .search-results { .exact-match, diff --git a/components/Panel/Panel.scss b/components/Panel/Panel.scss index fdfce7a4f..1da4c8cd5 100644 --- a/components/Panel/Panel.scss +++ b/components/Panel/Panel.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-includes'; +@import '~tc-ui/src/styles/tc-styles'; $panel-header-text-color: #737380; $panel-header-bg-color: #DFDFE1; diff --git a/components/Prize/PrizeItem.scss b/components/Prize/PrizeItem.scss index ffecae4ac..b1ff2af57 100644 --- a/components/Prize/PrizeItem.scss +++ b/components/Prize/PrizeItem.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-includes'; +@import '~tc-ui/src/styles/tc-styles'; .TaggedValue { display:inline-block; diff --git a/components/ProgressBar/ProgressBar.scss b/components/ProgressBar/ProgressBar.scss index badfd80b8..a9ebb8523 100644 --- a/components/ProgressBar/ProgressBar.scss +++ b/components/ProgressBar/ProgressBar.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-includes'; +@import '~tc-ui/src/styles/tc-styles'; .ProgressBar { .progress-box { diff --git a/components/QuickLinks/QuickLinks.scss b/components/QuickLinks/QuickLinks.scss index fe268cde3..a8d2b11e1 100644 --- a/components/QuickLinks/QuickLinks.scss +++ b/components/QuickLinks/QuickLinks.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-includes'; +@import '~tc-ui/src/styles/tc-styles'; $link-text-hover-color: #7A7F83; diff --git a/components/QuickLinks/QuickLinksExample.scss b/components/QuickLinks/QuickLinksExample.scss index f2c07d21c..97cb7aa0a 100644 --- a/components/QuickLinks/QuickLinksExample.scss +++ b/components/QuickLinks/QuickLinksExample.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-includes'; +@import '~tc-ui/src/styles/tc-styles'; .example-wrap { width: 332px; diff --git a/components/SearchBar/SearchBar.scss b/components/SearchBar/SearchBar.scss index 8c95dc0b0..ddfe6a4e0 100644 --- a/components/SearchBar/SearchBar.scss +++ b/components/SearchBar/SearchBar.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-includes'; +@import '~tc-ui/src/styles/tc-styles'; .SearchBar { background-color: white; diff --git a/components/SearchSuggestions/SearchSuggestions.scss b/components/SearchSuggestions/SearchSuggestions.scss index da38d077b..5b2d67e2d 100644 --- a/components/SearchSuggestions/SearchSuggestions.scss +++ b/components/SearchSuggestions/SearchSuggestions.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-includes'; +@import '~tc-ui/src/styles/tc-styles'; .SearchSuggestions { margin-bottom: 30px; diff --git a/components/SubNav/SubNav.scss b/components/SubNav/SubNav.scss index eae157786..b1eb5ccba 100644 --- a/components/SubNav/SubNav.scss +++ b/components/SubNav/SubNav.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-includes'; +@import '~tc-ui/src/styles/tc-styles'; .SubNav { background-color: $tc-gray-50; diff --git a/components/SubNav/SubNavExamples.scss b/components/SubNav/SubNavExamples.scss index 37933a405..12143d5b3 100644 --- a/components/SubNav/SubNavExamples.scss +++ b/components/SubNav/SubNavExamples.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-includes'; +@import '~tc-ui/src/styles/tc-styles'; .SubNavExamples { > p { diff --git a/components/SubTrackDetails/SubTrackDetails.scss b/components/SubTrackDetails/SubTrackDetails.scss index 24140b250..a194155f0 100644 --- a/components/SubTrackDetails/SubTrackDetails.scss +++ b/components/SubTrackDetails/SubTrackDetails.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-includes'; +@import '~tc-ui/src/styles/tc-styles'; $track-desc-text-color: #DCDCE0; diff --git a/components/TCFooter/TCFooter.scss b/components/TCFooter/TCFooter.scss index 74cf2e29b..acc63a7c0 100644 --- a/components/TCFooter/TCFooter.scss +++ b/components/TCFooter/TCFooter.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-includes'; +@import '~tc-ui/src/styles/tc-styles'; .TCFooter { width: 100%; diff --git a/components/TaggedValue/TaggedValue.scss b/components/TaggedValue/TaggedValue.scss index fa8c4ebad..440ea35bd 100644 --- a/components/TaggedValue/TaggedValue.scss +++ b/components/TaggedValue/TaggedValue.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-includes'; +@import '~tc-ui/src/styles/tc-styles'; .TaggedValue { display:inline-block; diff --git a/components/Tooltip/Tooltip.scss b/components/Tooltip/Tooltip.scss index 48ec1b75a..998822a5a 100644 --- a/components/Tooltip/Tooltip.scss +++ b/components/Tooltip/Tooltip.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-includes'; +@import '~tc-ui/src/styles/tc-styles'; .Tooltip { .tooltip-target { diff --git a/components/UploadedFile/UploadedFileStyles.scss b/components/UploadedFile/UploadedFileStyles.scss index 3a2f048ce..764a211a5 100644 --- a/components/UploadedFile/UploadedFileStyles.scss +++ b/components/UploadedFile/UploadedFileStyles.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-includes'; +@import '~tc-ui/src/styles/tc-styles'; .UploadedFile { width: 203px; diff --git a/components/UserDropdownMenu/UserDropdownMenu.scss b/components/UserDropdownMenu/UserDropdownMenu.scss index 72283663e..776f45e47 100644 --- a/components/UserDropdownMenu/UserDropdownMenu.scss +++ b/components/UserDropdownMenu/UserDropdownMenu.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-includes'; +@import '~tc-ui/src/styles/tc-styles'; .UserDropdownMenu { padding: 15px 20px; From b59b5d00cef80be6e55979501d3396f4f466ed9c Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Fri, 1 Jul 2016 14:41:11 +0530 Subject: [PATCH 009/234] AS#149564193179843, Import and render Navbar from react-components repo -- Used better way to import tc-ui --- components/Carousel/Carousel.scss | 2 +- components/Carousel/CarouselExamples.scss | 2 +- components/Dropdown/Dropdown.scss | 2 +- components/ExampleApp/ExampleApp.scss | 2 +- components/ExampleComponent/ExampleComponent.scss | 2 +- components/ExampleNav/ExampleNavStyle.scss | 2 +- components/FileUploader/FileUploaderStyles.scss | 2 +- components/ImageViewerHeader/ImageViewerHeader.scss | 2 +- components/Loader/LoaderStyle.scss | 2 +- components/MenuBar/MenuBar.scss | 2 +- components/MenuBar/MenuBarExamples.scss | 2 +- components/Navbar/Navbar.scss | 2 +- components/Navbar/NavbarExample.scss | 2 +- components/Panel/Panel.scss | 2 +- components/Prize/PrizeItem.scss | 2 +- components/ProgressBar/ProgressBar.scss | 2 +- components/QuickLinks/QuickLinks.scss | 2 +- components/QuickLinks/QuickLinksExample.scss | 2 +- components/SearchBar/SearchBar.scss | 2 +- components/SearchSuggestions/SearchSuggestions.scss | 2 +- components/SubNav/SubNav.scss | 2 +- components/SubNav/SubNavExamples.scss | 2 +- components/SubTrackDetails/SubTrackDetails.scss | 2 +- components/TCFooter/TCFooter.scss | 2 +- components/TaggedValue/TaggedValue.scss | 2 +- components/Tooltip/Tooltip.scss | 2 +- components/UploadedFile/UploadedFileStyles.scss | 2 +- components/UserDropdownMenu/UserDropdownMenu.scss | 2 +- 28 files changed, 28 insertions(+), 28 deletions(-) diff --git a/components/Carousel/Carousel.scss b/components/Carousel/Carousel.scss index e26335a16..fa872c7e0 100644 --- a/components/Carousel/Carousel.scss +++ b/components/Carousel/Carousel.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-styles'; +@import 'tc-styles'; $pager-bg-color: #737380; diff --git a/components/Carousel/CarouselExamples.scss b/components/Carousel/CarouselExamples.scss index a2a99c7fb..b2b9de36c 100644 --- a/components/Carousel/CarouselExamples.scss +++ b/components/Carousel/CarouselExamples.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-styles'; +@import 'tc-styles'; .Carousel { .StandardListItem { diff --git a/components/Dropdown/Dropdown.scss b/components/Dropdown/Dropdown.scss index 7f66ae4f2..28d8555f5 100644 --- a/components/Dropdown/Dropdown.scss +++ b/components/Dropdown/Dropdown.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-styles'; +@import 'tc-styles'; .Dropdown { margin-top: 30px; diff --git a/components/ExampleApp/ExampleApp.scss b/components/ExampleApp/ExampleApp.scss index 122b7e5c6..0e28f04d5 100644 --- a/components/ExampleApp/ExampleApp.scss +++ b/components/ExampleApp/ExampleApp.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-styles'; +@import 'tc-styles'; body { background-color: $tc-gray-neutral-light; diff --git a/components/ExampleComponent/ExampleComponent.scss b/components/ExampleComponent/ExampleComponent.scss index 978f10dc9..eebbbccef 100644 --- a/components/ExampleComponent/ExampleComponent.scss +++ b/components/ExampleComponent/ExampleComponent.scss @@ -1,6 +1,6 @@ // Whenever you need predefined color variables or mixins // Add the following line to the top of your .scss file -@import '~tc-ui/src/styles/tc-styles'; +@import 'tc-styles'; // Declare local variables, if necessary $peaches: #ffdab9; diff --git a/components/ExampleNav/ExampleNavStyle.scss b/components/ExampleNav/ExampleNavStyle.scss index cae066013..0c1f6c13a 100644 --- a/components/ExampleNav/ExampleNavStyle.scss +++ b/components/ExampleNav/ExampleNavStyle.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-styles'; +@import 'tc-styles'; .ExampleNav { position: fixed; diff --git a/components/FileUploader/FileUploaderStyles.scss b/components/FileUploader/FileUploaderStyles.scss index 9d7d58b35..e676a241f 100644 --- a/components/FileUploader/FileUploaderStyles.scss +++ b/components/FileUploader/FileUploaderStyles.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-styles'; +@import 'tc-styles'; .FileUploader { position: relative; diff --git a/components/ImageViewerHeader/ImageViewerHeader.scss b/components/ImageViewerHeader/ImageViewerHeader.scss index 3c39e51af..33d57e877 100644 --- a/components/ImageViewerHeader/ImageViewerHeader.scss +++ b/components/ImageViewerHeader/ImageViewerHeader.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-styles'; +@import 'tc-styles'; .ImageViewerHeader { diff --git a/components/Loader/LoaderStyle.scss b/components/Loader/LoaderStyle.scss index e3cb7bc3b..349e64f94 100644 --- a/components/Loader/LoaderStyle.scss +++ b/components/Loader/LoaderStyle.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-styles'; +@import 'tc-styles'; .Loader { position : absolute; diff --git a/components/MenuBar/MenuBar.scss b/components/MenuBar/MenuBar.scss index fad171222..2a2b2783a 100644 --- a/components/MenuBar/MenuBar.scss +++ b/components/MenuBar/MenuBar.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-styles'; +@import 'tc-styles'; $menu-bar-item-text-color: #737380; diff --git a/components/MenuBar/MenuBarExamples.scss b/components/MenuBar/MenuBarExamples.scss index 40ac8dce3..c9a5b491e 100644 --- a/components/MenuBar/MenuBarExamples.scss +++ b/components/MenuBar/MenuBarExamples.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-styles'; +@import 'tc-styles'; .MenuBar { &.vertical { diff --git a/components/Navbar/Navbar.scss b/components/Navbar/Navbar.scss index 6165e35b1..465fe30f0 100755 --- a/components/Navbar/Navbar.scss +++ b/components/Navbar/Navbar.scss @@ -1,5 +1,5 @@ // this is to include tc styles in the output library -@import '~tc-ui/src/styles/tc-styles'; +@import 'tc-styles'; /* Breakpoints - update as necessary */ $mobile: 768px; diff --git a/components/Navbar/NavbarExample.scss b/components/Navbar/NavbarExample.scss index 90d13bb4f..0615251ff 100644 --- a/components/Navbar/NavbarExample.scss +++ b/components/Navbar/NavbarExample.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-styles'; +@import 'tc-styles'; .search-results { .exact-match, diff --git a/components/Panel/Panel.scss b/components/Panel/Panel.scss index 1da4c8cd5..1bac38df0 100644 --- a/components/Panel/Panel.scss +++ b/components/Panel/Panel.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-styles'; +@import 'tc-styles'; $panel-header-text-color: #737380; $panel-header-bg-color: #DFDFE1; diff --git a/components/Prize/PrizeItem.scss b/components/Prize/PrizeItem.scss index b1ff2af57..678c08541 100644 --- a/components/Prize/PrizeItem.scss +++ b/components/Prize/PrizeItem.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-styles'; +@import 'tc-styles'; .TaggedValue { display:inline-block; diff --git a/components/ProgressBar/ProgressBar.scss b/components/ProgressBar/ProgressBar.scss index a9ebb8523..6645036e2 100644 --- a/components/ProgressBar/ProgressBar.scss +++ b/components/ProgressBar/ProgressBar.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-styles'; +@import 'tc-styles'; .ProgressBar { .progress-box { diff --git a/components/QuickLinks/QuickLinks.scss b/components/QuickLinks/QuickLinks.scss index a8d2b11e1..0b73a62dd 100644 --- a/components/QuickLinks/QuickLinks.scss +++ b/components/QuickLinks/QuickLinks.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-styles'; +@import 'tc-styles'; $link-text-hover-color: #7A7F83; diff --git a/components/QuickLinks/QuickLinksExample.scss b/components/QuickLinks/QuickLinksExample.scss index 97cb7aa0a..2ebe06d86 100644 --- a/components/QuickLinks/QuickLinksExample.scss +++ b/components/QuickLinks/QuickLinksExample.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-styles'; +@import 'tc-styles'; .example-wrap { width: 332px; diff --git a/components/SearchBar/SearchBar.scss b/components/SearchBar/SearchBar.scss index ddfe6a4e0..aa71a439d 100644 --- a/components/SearchBar/SearchBar.scss +++ b/components/SearchBar/SearchBar.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-styles'; +@import 'tc-styles'; .SearchBar { background-color: white; diff --git a/components/SearchSuggestions/SearchSuggestions.scss b/components/SearchSuggestions/SearchSuggestions.scss index 5b2d67e2d..71a7a07b9 100644 --- a/components/SearchSuggestions/SearchSuggestions.scss +++ b/components/SearchSuggestions/SearchSuggestions.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-styles'; +@import 'tc-styles'; .SearchSuggestions { margin-bottom: 30px; diff --git a/components/SubNav/SubNav.scss b/components/SubNav/SubNav.scss index b1eb5ccba..670e0e898 100644 --- a/components/SubNav/SubNav.scss +++ b/components/SubNav/SubNav.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-styles'; +@import 'tc-styles'; .SubNav { background-color: $tc-gray-50; diff --git a/components/SubNav/SubNavExamples.scss b/components/SubNav/SubNavExamples.scss index 12143d5b3..e0665e3bd 100644 --- a/components/SubNav/SubNavExamples.scss +++ b/components/SubNav/SubNavExamples.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-styles'; +@import 'tc-styles'; .SubNavExamples { > p { diff --git a/components/SubTrackDetails/SubTrackDetails.scss b/components/SubTrackDetails/SubTrackDetails.scss index a194155f0..e8e2cc8e3 100644 --- a/components/SubTrackDetails/SubTrackDetails.scss +++ b/components/SubTrackDetails/SubTrackDetails.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-styles'; +@import 'tc-styles'; $track-desc-text-color: #DCDCE0; diff --git a/components/TCFooter/TCFooter.scss b/components/TCFooter/TCFooter.scss index acc63a7c0..a7b5808be 100644 --- a/components/TCFooter/TCFooter.scss +++ b/components/TCFooter/TCFooter.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-styles'; +@import 'tc-styles'; .TCFooter { width: 100%; diff --git a/components/TaggedValue/TaggedValue.scss b/components/TaggedValue/TaggedValue.scss index 440ea35bd..a80da592a 100644 --- a/components/TaggedValue/TaggedValue.scss +++ b/components/TaggedValue/TaggedValue.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-styles'; +@import 'tc-styles'; .TaggedValue { display:inline-block; diff --git a/components/Tooltip/Tooltip.scss b/components/Tooltip/Tooltip.scss index 998822a5a..56bb6b2d7 100644 --- a/components/Tooltip/Tooltip.scss +++ b/components/Tooltip/Tooltip.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-styles'; +@import 'tc-styles'; .Tooltip { .tooltip-target { diff --git a/components/UploadedFile/UploadedFileStyles.scss b/components/UploadedFile/UploadedFileStyles.scss index 764a211a5..40f11d622 100644 --- a/components/UploadedFile/UploadedFileStyles.scss +++ b/components/UploadedFile/UploadedFileStyles.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-styles'; +@import 'tc-styles'; .UploadedFile { width: 203px; diff --git a/components/UserDropdownMenu/UserDropdownMenu.scss b/components/UserDropdownMenu/UserDropdownMenu.scss index 776f45e47..582b3ce02 100644 --- a/components/UserDropdownMenu/UserDropdownMenu.scss +++ b/components/UserDropdownMenu/UserDropdownMenu.scss @@ -1,4 +1,4 @@ -@import '~tc-ui/src/styles/tc-styles'; +@import 'tc-styles'; .UserDropdownMenu { padding: 15px 20px; From ce96b8bfee6b1c1929cd9dc87106c2edaf49de1c Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Fri, 1 Jul 2016 14:54:46 +0530 Subject: [PATCH 010/234] AS#149564193179843, Import and render Navbar from react-components repo -- Fixed color for SearchSuggestions component after removing old appirio styles --- components/SearchSuggestions/SearchSuggestions.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/SearchSuggestions/SearchSuggestions.scss b/components/SearchSuggestions/SearchSuggestions.scss index 71a7a07b9..6f15c7cc8 100644 --- a/components/SearchSuggestions/SearchSuggestions.scss +++ b/components/SearchSuggestions/SearchSuggestions.scss @@ -101,7 +101,7 @@ display:block; height: 40px; padding: 14px 15px; - background-color: $tc-dark-blue-70; + background-color: $tc-dark-blue-10; color: $tc-gray-90; font-size: 12px; line-height: 14px; @@ -115,7 +115,7 @@ } .footer-link:hover, .footer-link:active { - background-color: $tc-light-blue; + background-color: $tc-dark-blue-30; color: $tc-black; border: 0px none; outline: 0px none; From 6351b2efeada076e09c1f90ff0f8a01f8ba7145b Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Mon, 4 Jul 2016 13:33:25 +0530 Subject: [PATCH 011/234] AS#149564193179843, Import and render Navbar from react-components repo -- Exported icons --- exports.coffee | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/exports.coffee b/exports.coffee index bdf1080d1..25faef06f 100644 --- a/exports.coffee +++ b/exports.coffee @@ -19,6 +19,14 @@ Dropdown = require './components/Dropdown/Dropdown' ManageSteps = require './components/ManageSteps/ManageSteps' StepRow = require './components/StepRow/StepRow' SubNav = require './components/SubNav/SubNav' +# Icons +TopcoderLogo = require './components/TopcoderLogo/TopcoderLogo' +TopcoderMobileLogo = require './components/TopcoderMobileLogo/TopcoderMobileLogo' +MagnifyGlassIcon = require './components/MagnifyGlassIcon/MagnifyGlassIcon' +LeftArrowIcon = require './components/LeftArrowIcon/LeftArrowIcon' +RightArrowIcon = require './components/RightArrowIcon/RightArrowIcon' +HamburgerIcon = require './components/HamburgerIcon/HamburgerIcon' +PlaceholderIcon = require './components/PlaceholderIcon/PlaceholderIcon' module.exports = NavBar : NavBar.default From 6559176fa4dfb062b7ff3aba8d3cb29bc9508917 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Mon, 4 Jul 2016 13:47:56 +0530 Subject: [PATCH 012/234] AS#149564193179843, Import and render Navbar from react-components repo -- Exported icons --- exports.coffee | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/exports.coffee b/exports.coffee index 25faef06f..81708ba57 100644 --- a/exports.coffee +++ b/exports.coffee @@ -20,13 +20,13 @@ ManageSteps = require './components/ManageSteps/ManageSteps' StepRow = require './components/StepRow/StepRow' SubNav = require './components/SubNav/SubNav' # Icons -TopcoderLogo = require './components/TopcoderLogo/TopcoderLogo' -TopcoderMobileLogo = require './components/TopcoderMobileLogo/TopcoderMobileLogo' -MagnifyGlassIcon = require './components/MagnifyGlassIcon/MagnifyGlassIcon' -LeftArrowIcon = require './components/LeftArrowIcon/LeftArrowIcon' -RightArrowIcon = require './components/RightArrowIcon/RightArrowIcon' -HamburgerIcon = require './components/HamburgerIcon/HamburgerIcon' -PlaceholderIcon = require './components/PlaceholderIcon/PlaceholderIcon' +TopcoderLogo = require './components/Icons/TopcoderLogo' +TopcoderMobileLogo = require './components/Icons/TopcoderMobileLogo' +MagnifyGlassIcon = require './components/Icons/MagnifyGlassIcon' +LeftArrowIcon = require './components/Icons/LeftArrowIcon' +RightArrowIcon = require './components/Icons/RightArrowIcon' +HamburgerIcon = require './components/Icons/HamburgerIcon' +PlaceholderIcon = require './components/Icons/PlaceholderIcon' module.exports = NavBar : NavBar.default From 0b0411ec6f02e21e40836c7d3e64b42534930289 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Mon, 4 Jul 2016 14:56:10 +0530 Subject: [PATCH 013/234] AS#149564193179843, Import and render Navbar from react-components repo -- Exported icons --- exports.coffee | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/exports.coffee b/exports.coffee index 81708ba57..d19101cd1 100644 --- a/exports.coffee +++ b/exports.coffee @@ -48,4 +48,11 @@ module.exports = Dropdown : Dropdown.default ManageSteps : ManageSteps.default StepRow : StepRow.default - SubNav : SubNav.default \ No newline at end of file + SubNav : SubNav.default, + TopcoderLogo : TopcoderLogo.default, + TopcoderMobileLogo: TopcoderMobileLogo.default, + MagnifyGlassIcon : MagnifyGlassIcon.default, + LeftArrowIcon : LeftArrowIcon.default, + RightArrowIcon : RightArrowIcon.default, + PlaceholderIcon : PlaceholderIcon.default, + HamburgerIcon : HamburgerIcon.default \ No newline at end of file From 59259bbadcd028ede0a8cd13cb3eff87a8639646 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Mon, 4 Jul 2016 16:12:50 +0530 Subject: [PATCH 014/234] AS#148343855905796, Top bar - Logged out state -- Used correct buttons styles for login and register buttons -- fixed colors for menu bar --- components/MenuBar/MenuBar.scss | 15 ++++++++++----- components/UserDropdownMenu/UserDropdownMenu.jsx | 4 ++-- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/components/MenuBar/MenuBar.scss b/components/MenuBar/MenuBar.scss index 2a2b2783a..5afb86faf 100644 --- a/components/MenuBar/MenuBar.scss +++ b/components/MenuBar/MenuBar.scss @@ -1,10 +1,8 @@ @import 'tc-styles'; -$menu-bar-item-text-color: #737380; - .MenuBar { display: flex; - font-family: 'Roboto', Arial; + @include roboto-medium; &.horizontal { flex-direction: row; @@ -33,7 +31,7 @@ $menu-bar-item-text-color: #737380; display: flex; &.selected { - border-bottom: 2px solid $tc-light-blue; + border-bottom: 2px solid $tc-dark-blue-70; a { color: $tc-black; @@ -48,7 +46,14 @@ $menu-bar-item-text-color: #737380; text-transform: uppercase; font-size: 12px; line-height: 14px; - color: $menu-bar-item-text-color; + color: $tc-gray-50; + } + } + + li:hover { + a { + color: white; } } + } diff --git a/components/UserDropdownMenu/UserDropdownMenu.jsx b/components/UserDropdownMenu/UserDropdownMenu.jsx index f26453653..e862b3cac 100644 --- a/components/UserDropdownMenu/UserDropdownMenu.jsx +++ b/components/UserDropdownMenu/UserDropdownMenu.jsx @@ -24,8 +24,8 @@ const UserDropdownMenu = ({username, userImage, domain, loginUrl, registerUrl}) const publicDOM = ( ) From b03fb8d62aff42f9e8e02ab8f2f520bb31356367 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Mon, 4 Jul 2016 17:21:17 +0530 Subject: [PATCH 015/234] AS#148343855905796, Top bar - Logged out state -- connect logo --- components/Icons/ConnectLogo.jsx | 30 ++++++++++++++++++++++++++++++ exports.coffee | 4 +++- 2 files changed, 33 insertions(+), 1 deletion(-) create mode 100644 components/Icons/ConnectLogo.jsx diff --git a/components/Icons/ConnectLogo.jsx b/components/Icons/ConnectLogo.jsx new file mode 100644 index 000000000..7b9d1ff3a --- /dev/null +++ b/components/Icons/ConnectLogo.jsx @@ -0,0 +1,30 @@ +import React from 'react' + +const ConnectLogo = ({ width, height }) => { + return ( + + connect-logo + + + + + + + + + + + + + + connect + + + + + + + ) +} + +export default ConnectLogo diff --git a/exports.coffee b/exports.coffee index d19101cd1..dbdfad07a 100644 --- a/exports.coffee +++ b/exports.coffee @@ -21,6 +21,7 @@ StepRow = require './components/StepRow/StepRow' SubNav = require './components/SubNav/SubNav' # Icons TopcoderLogo = require './components/Icons/TopcoderLogo' +ConnectLogo = require './components/Icons/ConnectLogo' TopcoderMobileLogo = require './components/Icons/TopcoderMobileLogo' MagnifyGlassIcon = require './components/Icons/MagnifyGlassIcon' LeftArrowIcon = require './components/Icons/LeftArrowIcon' @@ -55,4 +56,5 @@ module.exports = LeftArrowIcon : LeftArrowIcon.default, RightArrowIcon : RightArrowIcon.default, PlaceholderIcon : PlaceholderIcon.default, - HamburgerIcon : HamburgerIcon.default \ No newline at end of file + HamburgerIcon : HamburgerIcon.default, + ConnectLogo : ConnectLogo.default \ No newline at end of file From eea4bc8d3736a72a9feb4dcced7cd04a659cc489 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Tue, 5 Jul 2016 19:34:35 +0530 Subject: [PATCH 016/234] AS#148343855905796, Top bar - Logged out state -- avoiding css conflict by nesting classes --- components/TCFooter/TCFooter.scss | 46 +++++++++++++++---------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/components/TCFooter/TCFooter.scss b/components/TCFooter/TCFooter.scss index a7b5808be..f7eaa6d5c 100644 --- a/components/TCFooter/TCFooter.scss +++ b/components/TCFooter/TCFooter.scss @@ -5,33 +5,33 @@ background-color: $tc-gray-90; padding: 1px 20px 30px 20px; font-family: 'Roboto', Arial; -} -.social-links { - font-size: 13px; - line-height: 1.2em; - text-align: center; - font-weight: normal; - margin: 30px 2px 0; - color: #fff; - - a { - display: inline-block; - background-size: contain; - background-repeat: no-repeat; - margin: 23px 0; - - + a { - margin-left: 30px; + .social-links { + font-size: 13px; + line-height: 1.2em; + text-align: center; + font-weight: normal; + margin: 30px 2px 0; + color: #fff; + + a { + display: inline-block; + background-size: contain; + background-repeat: no-repeat; + margin: 23px 0; + + + a { + margin-left: 30px; + } } } -} -.copyright-notice { - text-align: center; - font-size: 12px; - line-height: 14px; - color: #656565; + .copyright-notice { + text-align: center; + font-size: 12px; + line-height: 14px; + color: #656565; + } } From 86e3278e860f7979c0846949bc4bea4a7ba4062a Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Tue, 5 Jul 2016 19:41:06 +0530 Subject: [PATCH 017/234] AS#148343855905796, Top bar - Logged out state -- avoiding css conflict by nesting classes --- components/TCFooter/TCFooter.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/TCFooter/TCFooter.scss b/components/TCFooter/TCFooter.scss index f7eaa6d5c..a4bce3710 100644 --- a/components/TCFooter/TCFooter.scss +++ b/components/TCFooter/TCFooter.scss @@ -74,7 +74,7 @@ display: block; } - .social-links { + .TCFooter .social-links { a { width: 27px; @@ -115,7 +115,7 @@ } } - .copyright-notice { + .TCFooter .copyright-notice { font-size: 15px; color: #fff; } @@ -128,7 +128,7 @@ display: none; } - .social-links { + .TCFooter .social-links { a { width: 32px; From e746114cf5d4e70db8df790a63515fd30ef8ea84 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Fri, 15 Jul 2016 17:48:50 +0530 Subject: [PATCH 018/234] fixed attribute names for svg --- components/Icons/ConnectLogo.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/Icons/ConnectLogo.jsx b/components/Icons/ConnectLogo.jsx index 7b9d1ff3a..55475a61b 100644 --- a/components/Icons/ConnectLogo.jsx +++ b/components/Icons/ConnectLogo.jsx @@ -5,7 +5,7 @@ const ConnectLogo = ({ width, height }) => { connect-logo - + @@ -16,7 +16,7 @@ const ConnectLogo = ({ width, height }) => { - + connect From 59b2724b9e9b7d78ac2a076dfcb76fd6ea648e2e Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Wed, 20 Jul 2016 15:32:29 +0530 Subject: [PATCH 019/234] AS#148343855905800, Tool bar - All Projects (dashboard) -- Added option for using react router links for MenuBar component -- upgraded version of react router --- components/MenuBar/MenuBar.jsx | 8 ++++++-- package.json | 4 ++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/components/MenuBar/MenuBar.jsx b/components/MenuBar/MenuBar.jsx index 919bd2ec9..6453d79bf 100644 --- a/components/MenuBar/MenuBar.jsx +++ b/components/MenuBar/MenuBar.jsx @@ -1,5 +1,6 @@ import React, { PropTypes, Component } from 'react' import classNames from 'classnames' +import {Link} from 'react-router' require('./MenuBar.scss') @@ -19,7 +20,7 @@ export default class MenuBar extends Component { } render() { - const { orientation, items } = this.props + const { orientation, items, forReactRouter } = this.props const mbClasses = classNames({ MenuBar: true, @@ -36,9 +37,12 @@ export default class MenuBar extends Component { const linkTarget = item.target || '_self' const linkContent = this.state.mobile ? : item.text + const linkDom = forReactRouter + ? { linkContent } + : {linkContent} return (
  • - {linkContent} + { linkDom }
    • ) } diff --git a/package.json b/package.json index c8ea2365e..ed4d4c882 100644 --- a/package.json +++ b/package.json @@ -13,8 +13,7 @@ "history": "^1.17.0", "ignore-styles": "^1.2.0", "mocha": "^2.4.5", - "npm-prepublish": "^1.2.1", - "react-router": "^1.0.3" + "npm-prepublish": "^1.2.1" }, "scripts": { "example": "webpack-dev-server -d --progress --inline --colors", @@ -38,6 +37,7 @@ "react-dropzone": "^3.3.2", "react-redux": "^4.2.1", "react-select": "^0.9.1", + "react-router": "^2.4.6", "tc-ui": "https://github.com/appirio-tech/tc-ui.git#feature/connectv2", "isomorphic-fetch": "^2.2.1" } From a66bad8ad696dea5813b1f96fb21957bec3a5c22 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 21 Jul 2016 17:45:09 +0530 Subject: [PATCH 020/234] AS#158084430378383, Add Switch Button to react components library -- Added switch button component --- components/SwitchButton/SwitchButton.jsx | 18 ++++++++++++ components/SwitchButton/SwitchButton.scss | 36 +++++++++++++++++++++++ exports.coffee | 4 ++- package.json | 1 + 4 files changed, 58 insertions(+), 1 deletion(-) create mode 100644 components/SwitchButton/SwitchButton.jsx create mode 100644 components/SwitchButton/SwitchButton.scss diff --git a/components/SwitchButton/SwitchButton.jsx b/components/SwitchButton/SwitchButton.jsx new file mode 100644 index 000000000..bf00c2955 --- /dev/null +++ b/components/SwitchButton/SwitchButton.jsx @@ -0,0 +1,18 @@ +import React from 'react' +import classNames from 'classnames' +import ReactSwitchButton from 'react-switch-button' + +require('./SwitchButton.scss') +require('react-switch-button/dist/react-switch-button.min.css') + +const SwitchButton = (props) => { + const switchButtonClass = classNames( + 'SwitchButton' + ) + return ( +
    + +
    + ) +} +export default SwitchButton diff --git a/components/SwitchButton/SwitchButton.scss b/components/SwitchButton/SwitchButton.scss new file mode 100644 index 000000000..8c469dd74 --- /dev/null +++ b/components/SwitchButton/SwitchButton.scss @@ -0,0 +1,36 @@ +@import 'tc-styles'; + +.SwitchButton { + + .rsbc-switch-button>label:first-child { + min-width: 100px; + } + + .rsbc-switch-button.rsbc-switch-button-flat-round input[type="checkbox"]+label { + background-color: $tc-gray-50; + } + + .rsbc-switch-button.rsbc-switch-button-flat-round input[type="checkbox"]+label:before { + background-color: $tc-gray-50; + } + + .rsbc-switch-button.rsbc-switch-button-flat-round input[type="checkbox"]+label:after { + background-color: $tc-gray-10; + } + + .rsbc-switch-button.rsbc-switch-button-flat-round:hover input[type="checkbox"]+label, + .rsbc-switch-button.rsbc-switch-button-flat-round:hover input[type="checkbox"]+label:before { + background-color: $tc-gray-40; + } + + .rsbc-switch-button.rsbc-switch-button-flat-round input[type="checkbox"]:checked+label { + background-color: $tc-dark-blue-90; + } + .rsbc-switch-button.rsbc-switch-button-flat-round input[type="checkbox"]:checked+label:before { + background-color: $tc-dark-blue-90; + } + + .rsbc-switch-button.rsbc-switch-button-flat-round input[type="checkbox"]:checked+label:after { + background-color: $tc-gray-10; + } +} \ No newline at end of file diff --git a/exports.coffee b/exports.coffee index dbdfad07a..c928a9e1d 100644 --- a/exports.coffee +++ b/exports.coffee @@ -19,6 +19,7 @@ Dropdown = require './components/Dropdown/Dropdown' ManageSteps = require './components/ManageSteps/ManageSteps' StepRow = require './components/StepRow/StepRow' SubNav = require './components/SubNav/SubNav' +SwitchButton = require './components/SwitchButton/SwitchButton' # Icons TopcoderLogo = require './components/Icons/TopcoderLogo' ConnectLogo = require './components/Icons/ConnectLogo' @@ -57,4 +58,5 @@ module.exports = RightArrowIcon : RightArrowIcon.default, PlaceholderIcon : PlaceholderIcon.default, HamburgerIcon : HamburgerIcon.default, - ConnectLogo : ConnectLogo.default \ No newline at end of file + ConnectLogo : ConnectLogo.default, + SwitchButton : SwitchButton.default \ No newline at end of file diff --git a/package.json b/package.json index ed4d4c882..27b0a2d53 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "react-redux": "^4.2.1", "react-select": "^0.9.1", "react-router": "^2.4.6", + "react-switch-button": "^1.1.2", "tc-ui": "https://github.com/appirio-tech/tc-ui.git#feature/connectv2", "isomorphic-fetch": "^2.2.1" } From b3a1d5d828ce818b8167dca75f33d0a38e68e640 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 21 Jul 2016 17:49:44 +0530 Subject: [PATCH 021/234] AS#148343855905800, Tool bar - All Projects (dashboard) -- Added default theme --- components/Dropdown/Dropdown.jsx | 31 ++++++++++------------- components/Dropdown/Dropdown.scss | 42 ++++++++++++++++++++++++++++++- 2 files changed, 54 insertions(+), 19 deletions(-) diff --git a/components/Dropdown/Dropdown.jsx b/components/Dropdown/Dropdown.jsx index 2a06bfc35..00942b58a 100644 --- a/components/Dropdown/Dropdown.jsx +++ b/components/Dropdown/Dropdown.jsx @@ -1,6 +1,7 @@ require('./Dropdown.scss') import React, { Component, PropTypes } from 'react' +import classNames from 'classnames' class Dropdown extends Component { constructor(props) { @@ -64,26 +65,20 @@ class Dropdown extends Component { const pointerShadow = this.props.pointerShadow const noPointer = this.props.noPointer const pointerLeft = this.props.pointerLeft - let ndClasses = 'Dropdown' - - if (pointerShadow) { - ndClasses += ' pointer-shadow' - } - - if (noPointer) { - ndClasses += ' pointer-hide' - } - - if (pointerLeft) { - ndClasses += ' pointer-left' - } - - if (this.state.isHidden) { - ndClasses += ' hide' - } + const ddClasses = classNames('dropdown-wrap', + { + [`${ this.props.theme }`] : true + }) + const ndClasses = classNames('Dropdown', + { + 'pointer-shadow' : pointerShadow, + 'pointer-hide' : noPointer, + 'pointer-left' : pointerLeft, + 'hide' : this.state.isHidden + }) return ( -
    +
    { this.props.children.map((child) => { if(child.props.className === 'dropdown-menu-header') diff --git a/components/Dropdown/Dropdown.scss b/components/Dropdown/Dropdown.scss index 28d8555f5..171f370c5 100644 --- a/components/Dropdown/Dropdown.scss +++ b/components/Dropdown/Dropdown.scss @@ -1,13 +1,18 @@ @import 'tc-styles'; + +.dropdown-wrap { + cursor: pointer; +} + .Dropdown { - margin-top: 30px; background-color: #fff; box-shadow: 0px 2px 7px 1px rgba(0, 0, 0, 0.17); border-radius: 5px; display: inline-block; position: absolute; left: 0; + top: 30px; width: 100%; ul { @@ -32,6 +37,41 @@ } } +.default { + border: 1px solid $tc-gray-20; + display: flex; + align-items: center; + padding: calc(2 * #{$base_unit}); + position: relative; + + .Dropdown { + ul.dropdown-menu-list { + padding: 10px 0px; + li { + padding: 0 20px; + @include ellipsis; + } + + li:hover { + background-color: $tc-gray-neutral-dark; + } + } + } +} + +.default::after { + content: " "; + width: 10px; + height: 10px; + display: block; + right: 10px; + top: 50%; + position: absolute; + transform: rotate(45deg) translateY(-50%); + border-bottom: 2px solid $tc-gray-20; + border-right: 2px solid $tc-gray-20; +} + .Dropdown.hide { display: none; } From 190e31e3797f3cb212ce23cf0fac57db75096fcc Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 21 Jul 2016 17:55:15 +0530 Subject: [PATCH 022/234] AS#148343855905800, Tool bar - All Projects (dashboard) -- Fix lint errors --- components/Dropdown/Dropdown.jsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/components/Dropdown/Dropdown.jsx b/components/Dropdown/Dropdown.jsx index 00942b58a..8b7d2ce41 100644 --- a/components/Dropdown/Dropdown.jsx +++ b/components/Dropdown/Dropdown.jsx @@ -65,16 +65,14 @@ class Dropdown extends Component { const pointerShadow = this.props.pointerShadow const noPointer = this.props.noPointer const pointerLeft = this.props.pointerLeft - const ddClasses = classNames('dropdown-wrap', - { + const ddClasses = classNames('dropdown-wrap', { [`${ this.props.theme }`] : true }) - const ndClasses = classNames('Dropdown', - { + const ndClasses = classNames('Dropdown', { 'pointer-shadow' : pointerShadow, 'pointer-hide' : noPointer, 'pointer-left' : pointerLeft, - 'hide' : this.state.isHidden + hide : this.state.isHidden }) return ( From baf27a9c25d19cc184bccecf966b48c9b357fbba Mon Sep 17 00:00:00 2001 From: Parth Shah Date: Thu, 21 Jul 2016 11:31:45 -0700 Subject: [PATCH 023/234] adding Link menu bar and nav --- components/LinkMenuBar/MenuBar.jsx | 60 +++++++++++++++++++++ components/LinkMenuBar/MenuBar.scss | 59 ++++++++++++++++++++ components/LinkMenuBar/MenuBarExamples.jsx | 21 ++++++++ components/LinkMenuBar/MenuBarExamples.scss | 7 +++ components/LinkMenuBar/nav-community.svg | 14 +++++ components/LinkMenuBar/nav-compete.svg | 12 +++++ components/LinkMenuBar/nav-learn.svg | 18 +++++++ components/MenuBar/MenuBar.jsx | 1 + components/NavLink/NavLink.jsx | 36 +++++++++++++ exports.coffee | 6 ++- package.json | 8 +-- 11 files changed, 237 insertions(+), 5 deletions(-) create mode 100644 components/LinkMenuBar/MenuBar.jsx create mode 100644 components/LinkMenuBar/MenuBar.scss create mode 100644 components/LinkMenuBar/MenuBarExamples.jsx create mode 100644 components/LinkMenuBar/MenuBarExamples.scss create mode 100644 components/LinkMenuBar/nav-community.svg create mode 100644 components/LinkMenuBar/nav-compete.svg create mode 100644 components/LinkMenuBar/nav-learn.svg create mode 100644 components/NavLink/NavLink.jsx diff --git a/components/LinkMenuBar/MenuBar.jsx b/components/LinkMenuBar/MenuBar.jsx new file mode 100644 index 000000000..d8cd6311d --- /dev/null +++ b/components/LinkMenuBar/MenuBar.jsx @@ -0,0 +1,60 @@ +import React, { PropTypes, Component } from 'react' +import NavLink from '../NavLink/NavLink' +import classNames from 'classnames' + +require('./MenuBar.scss') + +export default class MenuBar extends Component { + componentWillMount() { + this.handleResize = this.handleResize.bind(this) + this.handleResize() + window.addEventListener('resize', this.handleResize) + } + + componentWillUnmount() { + window.removeEventListener('resize', this.handleResize) + } + + handleResize() { + this.setState({ mobile: window.innerWidth <= this.props.mobileBreakPoint }) + } + + render() { + const { orientation, items } = this.props + + const mbClasses = classNames({ + MenuBar: true, + [orientation]: true + }) + + const menuItem = item => { + const itemClass = classNames({ + [orientation]: true, + mobile: this.state.mobile + }) + + const linkTarget = item.target || null + const linkContent = this.state.mobile ? : item.text + return ( + + ) + } + + return ( +
      + { items.map(menuItem) } +
    + ) + } +} + +MenuBar.propTypes = { + items: PropTypes.array.isRequired, + mobileBreakPoint: PropTypes.number, + orientation: PropTypes.oneOf(['vertical', 'horizontal']) +} + +MenuBar.defaultProps = { + mobileBreakPoint: 768, + orientation: 'horizontal' +} diff --git a/components/LinkMenuBar/MenuBar.scss b/components/LinkMenuBar/MenuBar.scss new file mode 100644 index 000000000..5afb86faf --- /dev/null +++ b/components/LinkMenuBar/MenuBar.scss @@ -0,0 +1,59 @@ +@import 'tc-styles'; + +.MenuBar { + display: flex; + @include roboto-medium; + + &.horizontal { + flex-direction: row; + justify-content: center; + + li { + display: flex; + justify-content: center; + margin: 0px 15px; + + a { + padding-bottom: 6px; + } + } + } + + &.vertical { + flex-direction: column; + + li { + padding: 10px 15px; + } + } + + li { + display: flex; + + &.selected { + border-bottom: 2px solid $tc-dark-blue-70; + + a { + color: $tc-black; + } + } + + &.mobile { + width: 30px; + } + + a { + text-transform: uppercase; + font-size: 12px; + line-height: 14px; + color: $tc-gray-50; + } + } + + li:hover { + a { + color: white; + } + } + +} diff --git a/components/LinkMenuBar/MenuBarExamples.jsx b/components/LinkMenuBar/MenuBarExamples.jsx new file mode 100644 index 000000000..58700351d --- /dev/null +++ b/components/LinkMenuBar/MenuBarExamples.jsx @@ -0,0 +1,21 @@ +import React from 'react' +import MenuBar from './MenuBar' + +require('./MenuBarExamples.scss') + +const primaryNavigationItems = [ + {img: '../components/MenuBar/nav-community.svg', text: 'Community', link: '/community'}, + {img: '../components/MenuBar/nav-compete.svg', text: 'Compete', link: '/compete', selected: true}, + {img: '../components/MenuBar/nav-learn.svg', text: 'Learn', link: '/MenuBarExamples', regex: '/MenuBar*'} +] + +const MenuBarExample = () => ( + +
    + + + +
    +) + +module.exports = MenuBarExample diff --git a/components/LinkMenuBar/MenuBarExamples.scss b/components/LinkMenuBar/MenuBarExamples.scss new file mode 100644 index 000000000..c9a5b491e --- /dev/null +++ b/components/LinkMenuBar/MenuBarExamples.scss @@ -0,0 +1,7 @@ +@import 'tc-styles'; + +.MenuBar { + &.vertical { + width: 100px; + } +} \ No newline at end of file diff --git a/components/LinkMenuBar/nav-community.svg b/components/LinkMenuBar/nav-community.svg new file mode 100644 index 000000000..d3afe2b80 --- /dev/null +++ b/components/LinkMenuBar/nav-community.svg @@ -0,0 +1,14 @@ + + + + nav-community + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/components/LinkMenuBar/nav-compete.svg b/components/LinkMenuBar/nav-compete.svg new file mode 100644 index 000000000..1e43d1940 --- /dev/null +++ b/components/LinkMenuBar/nav-compete.svg @@ -0,0 +1,12 @@ + + + + nav-compete + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/components/LinkMenuBar/nav-learn.svg b/components/LinkMenuBar/nav-learn.svg new file mode 100644 index 000000000..d45a64145 --- /dev/null +++ b/components/LinkMenuBar/nav-learn.svg @@ -0,0 +1,18 @@ + + + + nav-learn + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/components/MenuBar/MenuBar.jsx b/components/MenuBar/MenuBar.jsx index 919bd2ec9..64cb1a7c7 100644 --- a/components/MenuBar/MenuBar.jsx +++ b/components/MenuBar/MenuBar.jsx @@ -1,4 +1,5 @@ import React, { PropTypes, Component } from 'react' + import classNames from 'classnames' require('./MenuBar.scss') diff --git a/components/NavLink/NavLink.jsx b/components/NavLink/NavLink.jsx new file mode 100644 index 000000000..3a8470ad0 --- /dev/null +++ b/components/NavLink/NavLink.jsx @@ -0,0 +1,36 @@ +import React, { PropTypes, Component } from 'react' +import {withRouter, Link} from "react-router" + +class NavLink extends Component { + constructor(props) { + super(props) + } + + render() { + var { to, content, classes, target } = this.props, + isActive = this.props.router.isActive(this.props.to, true) + if (isActive) { + classes += ' selected' + } + let attrs = { + to: to + } + if (target || target !== '_self') { + attrs.target = target + } + return ( +
  • + {content} +
    • + ) + } +} + +NavLink.propTypes = { + to: PropTypes.string.isRequired, + target: PropTypes.string, + content: PropTypes.string.isRequired, + classes: PropTypes.string.isRequired +} + +export default withRouter(NavLink) diff --git a/exports.coffee b/exports.coffee index dbdfad07a..f891ec7fe 100644 --- a/exports.coffee +++ b/exports.coffee @@ -5,6 +5,8 @@ UserDropdown = require './components/UserDropdownMenu/UserDropdownMenu' TCFooter = require './components/TCFooter/TCFooter' ProgressBar = require './components/ProgressBar/ProgressBar' MenuBar = require './components/MenuBar/MenuBar' +LinkMenuBar = require './components/LinkMenuBar/MenuBar' +NavLink = require './components/NavLink/NavLink' ImageViewer = require './components/ImageViewer/ImageViewer' FileUploader = require './components/FileUploader/FileUploader' Loader = require './components/Loader/Loader' @@ -31,11 +33,13 @@ PlaceholderIcon = require './components/Icons/PlaceholderIcon' module.exports = NavBar : NavBar.default + NavLink : NavLink.default Panel : Panel.default SearchBar : SearchBar.default UserDropdown : UserDropdown.default ProgressBar : ProgressBar.default MenuBar : MenuBar.default + LinkMenuBar : LinkMenuBar.default ImageViewer : ImageViewer.default FileUploader : FileUploader.default Loader : Loader.default @@ -57,4 +61,4 @@ module.exports = RightArrowIcon : RightArrowIcon.default, PlaceholderIcon : PlaceholderIcon.default, HamburgerIcon : HamburgerIcon.default, - ConnectLogo : ConnectLogo.default \ No newline at end of file + ConnectLogo : ConnectLogo.default diff --git a/package.json b/package.json index c8ea2365e..9d8869d4f 100644 --- a/package.json +++ b/package.json @@ -13,8 +13,7 @@ "history": "^1.17.0", "ignore-styles": "^1.2.0", "mocha": "^2.4.5", - "npm-prepublish": "^1.2.1", - "react-router": "^1.0.3" + "npm-prepublish": "^1.2.1" }, "scripts": { "example": "webpack-dev-server -d --progress --inline --colors", @@ -30,6 +29,7 @@ "appirio-tech-api-schemas": "^5.0.69", "appirio-tech-client-app-layer": "^0.1.3", "classnames": "^2.2.3", + "isomorphic-fetch": "^2.2.1", "lodash": "^4.0.0", "moment": "^2.11.2", "react": "^0.14.7", @@ -37,8 +37,8 @@ "react-dom": "^0.14.7", "react-dropzone": "^3.3.2", "react-redux": "^4.2.1", + "react-router": "^2.6.0", "react-select": "^0.9.1", - "tc-ui": "https://github.com/appirio-tech/tc-ui.git#feature/connectv2", - "isomorphic-fetch": "^2.2.1" + "tc-ui": "https://github.com/appirio-tech/tc-ui.git#feature/connectv2" } } From c157348dcb2dd06db696f2924256f1eb4eb54f7b Mon Sep 17 00:00:00 2001 From: Parth Shah Date: Thu, 21 Jul 2016 15:56:50 -0700 Subject: [PATCH 024/234] fixing lint errors --- components/MenuBar/MenuBar.jsx | 3 +-- components/NavLink/NavLink.jsx | 11 +++++------ 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/components/MenuBar/MenuBar.jsx b/components/MenuBar/MenuBar.jsx index 33db13c4e..5329cd2c9 100644 --- a/components/MenuBar/MenuBar.jsx +++ b/components/MenuBar/MenuBar.jsx @@ -1,7 +1,6 @@ import React, { PropTypes, Component } from 'react' import classNames from 'classnames' -import {Link} from 'react-router' import NavLink from '../NavLink/NavLink' require('./MenuBar.scss') @@ -52,7 +51,7 @@ export default class MenuBar extends Component { selected: item.selected || (item.regex && window.location.href.match(item.regex) !== null) }) - var linkTarget = item.target || '_self' + const linkTarget = item.target || '_self' const linkContent = this.state.mobile ? : item.text return forReactRouter ? diff --git a/components/NavLink/NavLink.jsx b/components/NavLink/NavLink.jsx index 3a8470ad0..ca84e546a 100644 --- a/components/NavLink/NavLink.jsx +++ b/components/NavLink/NavLink.jsx @@ -1,5 +1,5 @@ import React, { PropTypes, Component } from 'react' -import {withRouter, Link} from "react-router" +import {withRouter, Link} from 'react-router' class NavLink extends Component { constructor(props) { @@ -7,14 +7,13 @@ class NavLink extends Component { } render() { - var { to, content, classes, target } = this.props, - isActive = this.props.router.isActive(this.props.to, true) + const { to, content, target } = this.props + let classes = this.props.classes + const isActive = this.props.router.isActive(this.props.to, true) if (isActive) { classes += ' selected' } - let attrs = { - to: to - } + const attrs = { to } if (target || target !== '_self') { attrs.target = target } From a9726ab6cf2185629d9221eb9ce2afc578472ac1 Mon Sep 17 00:00:00 2001 From: Parth Shah Date: Thu, 28 Jul 2016 00:54:34 -0700 Subject: [PATCH 025/234] adding input and textarea components --- components/Forms/FormField.scss | 115 ++++++++++++++++++++++++++++++++ components/Forms/Input.jsx | 70 +++++++++++++++++++ components/Forms/Textarea.jsx | 62 +++++++++++++++++ exports.coffee | 6 ++ package.json | 5 +- 5 files changed, 256 insertions(+), 2 deletions(-) create mode 100644 components/Forms/FormField.scss create mode 100644 components/Forms/Input.jsx create mode 100644 components/Forms/Textarea.jsx diff --git a/components/Forms/FormField.scss b/components/Forms/FormField.scss new file mode 100644 index 000000000..173be315f --- /dev/null +++ b/components/Forms/FormField.scss @@ -0,0 +1,115 @@ +@import 'tc-styles'; + +input::-moz-focus-inner, +input::-moz-focus-outer { + border: 0; +} + +* { + &, + &:before, + &:after { + box-sizing: border-box; + } +} + +label{ + display:block; + width:600px; + margin: 10px auto; + text-transform: none; + @include tc-label; + color: $tc-gray-70; + font-size: 13px; +} + +.error-message{ + display:block; + width:600px; + margin: 5px auto; + @include roboto; + + color: $tc-gray-70; + font-size: 13px; + line-height:20px; + font-style:italic; + border: 1px solid $tc-red-30; + background: $tc-red-10; + color: $tc-red-70; + padding:10px; + border-radius: 2px; + strong{ + @include roboto-bold; + } +} + +input{ + display:block; + width:600px; + margin: 0 auto; + color: $tc-black; + background: $tc-gray-neutral-light; + border-color: $tc-gray-20; + @include tc-label; + + &[disabled]{ + color: $tc-gray-20; + background: $tc-white; + } + + &:hover{ + border-color: $tc-gray-40; + background: $tc-gray-neutral-light; + } + + &:focus{ + background: $tc-white!important; + border-color: $tc-dark-blue-90!important; + } + + &.error{ + border-left: 3px solid $tc-red-70!important; + background: $tc-gray-neutral-light!important; + &:focus{ + background: $tc-white!important; + border-color: $tc-dark-blue-90!important; + } + } +} + +textarea{ + display:block; + width:600px; + margin: 0 auto; + height: 100px; + color: $tc-black; + background: $tc-gray-neutral-light; + border-color: $tc-gray-20; + @include tc-label; + font-size:15px; + line-height:20px; + box-shadow: none; + + &[disabled]{ + color: $tc-gray-20; + background: $tc-white; + } + + &:hover{ + border-color: $tc-gray-40; + } + + &:focus{ + background: $tc-white!important; + border-color: $tc-dark-blue-90!important; + } + + &.error{ + border-left: 3px solid $tc-red-70!important; + background: $tc-gray-neutral-light!important; + &:focus{ + background: $tc-white!important; + border-color: $tc-dark-blue-90!important; + } + } +} diff --git a/components/Forms/Input.jsx b/components/Forms/Input.jsx new file mode 100644 index 000000000..d762b9657 --- /dev/null +++ b/components/Forms/Input.jsx @@ -0,0 +1,70 @@ +import React, { Component, PropTypes } from 'react' +import classNames from 'classnames' +import { connect } from 'react-redux' +import { Field, Errors } from 'react-redux-form' +import _ from 'lodash' + +require('./FormField.scss') + +class InputFormFieldClass extends Component { + constructor(props) { + super(props) + } + + render() { + const { + id, label, placeholder, + formModel, formModelName, fieldModelName, + errorMessages, validators, + } = this.props + const inputType = this.props.inputType || 'text' + const hasError = _.has(formModel.fields, id) + && formModel.fields[id].dirty + && !formModel.fields[id].valid + + // const hasError = true + const inputClasses = classNames('tc-file-field__inputs', { + 'error': hasError + }) + + // // const hasError = true + // const inputClasses = classNames('tc-textarea', { + // 'error': hasError + // }) + return ( +
    + + + + +

    {props.children}

    } + /> +
    + ) + } +} + +InputFormFieldClass.propTypes = { + id: PropTypes.string, + formModel: PropTypes.object.isRequired, + formModelName: PropTypes.string.isRequired, + fieldModelName: PropTypes.string.isRequired, + validators: PropTypes.object, + label: PropTypes.string.isRequired, + placeholder: PropTypes.string, + inputType: PropTypes.string.isRequired +} +const mapStateToProps = (state, ownProps) => ({ + formModel: state[ownProps.formModelName] +}) +export default connect(mapStateToProps)(InputFormFieldClass) diff --git a/components/Forms/Textarea.jsx b/components/Forms/Textarea.jsx new file mode 100644 index 000000000..b089c337c --- /dev/null +++ b/components/Forms/Textarea.jsx @@ -0,0 +1,62 @@ + + +import React, { Component, PropTypes } from 'react' +import classNames from 'classnames' +import { connect } from 'react-redux' +import { Field, Errors } from 'react-redux-form' +import _ from 'lodash' + +require('./FormField.scss') + +class TextareaFormFieldClass extends Component { + constructor(props) { + super(props) + } + + render() { + const { + id, label, placeholder, + formModel, formModelName, fieldModelName, + errorMessages, validators, + } = this.props + const hasError = _.has(formModel.fields, id) + && formModel.fields[id].dirty + && !formModel.fields[id].valid + + const inputClasses = classNames('tc-textarea', { + 'error': hasError + }) + return ( +
    + + +