Modified TAP styling and theming
Project: http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/commit/caa718a3 Tree: http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/tree/caa718a3 Diff: http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/diff/caa718a3 Branch: refs/heads/master Commit: caa718a3d04d1602150de9b10dd9d7ea2ce193f2 Parents: b3268d5 Author: Arthi Vezhavendan <arthi...@gmail.com> Authored: Fri Dec 16 11:45:37 2016 -0500 Committer: Arthi Vezhavendan <arthi...@gmail.com> Committed: Fri Dec 16 11:45:37 2016 -0500 ---------------------------------------------------------------------- public/components/AppCard.jsx | 2 +- public/components/AppProfile.jsx | 4 +-- public/components/Home.jsx | 2 +- public/components/OrgProfile.jsx | 2 +- public/components/visualizations/Counts.jsx | 1 + .../components/visualizations/GraphMetrics.jsx | 21 +++++++----- .../components/visualizations/HorizontalBar.jsx | 23 ++++++++----- .../components/visualizations/VerticalBar.jsx | 22 +++++++----- public/containers/Login.jsx | 4 +-- public/containers/Main.jsx | 6 ++-- public/containers/SignUp.jsx | 4 +-- semantic/src/site/globals/site.variables | 31 +++++++++++++++++ semantic/src/theme.config | 2 +- stylesheets/main.scss | 36 +++++++++++++++++--- 14 files changed, 119 insertions(+), 41 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/caa718a3/public/components/AppCard.jsx ---------------------------------------------------------------------- diff --git a/public/components/AppCard.jsx b/public/components/AppCard.jsx index 3a167b8..41d435a 100644 --- a/public/components/AppCard.jsx +++ b/public/components/AppCard.jsx @@ -21,7 +21,7 @@ class AppCard extends Component { const { app } = this.props; return ( - <div className='ui segment'> + <div className='ui segment' id='app-list'> <div className='ui tiny header'> {app.name} </div> http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/caa718a3/public/components/AppProfile.jsx ---------------------------------------------------------------------- diff --git a/public/components/AppProfile.jsx b/public/components/AppProfile.jsx index bbcff77..09ac905 100644 --- a/public/components/AppProfile.jsx +++ b/public/components/AppProfile.jsx @@ -29,12 +29,12 @@ class AppProfile extends Component { {name} </div> <Link to={`/app/${id}/settings`}> - <div className='ui brown button'> + <div className='ui teal button'> Settings </div> </Link> <Link to={`/app/${id}/results`}> - <div className='ui brown button'> + <div className='ui teal button'> Results </div> </Link> http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/caa718a3/public/components/Home.jsx ---------------------------------------------------------------------- diff --git a/public/components/Home.jsx b/public/components/Home.jsx index 08f6a34..c60be36 100644 --- a/public/components/Home.jsx +++ b/public/components/Home.jsx @@ -20,7 +20,7 @@ export default class Home extends Component { return ( <div id='homepage-container'> - <div id='main-masthead' className='ui masthead center aligned brown inverted vertical segment'> + <div id='main-masthead' className='ui masthead center aligned teal inverted vertical segment'> <h1 className='ui header'>Tap</h1> <h2 className='ui header'>Registration and Visualization Portal</h2> </div> http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/caa718a3/public/components/OrgProfile.jsx ---------------------------------------------------------------------- diff --git a/public/components/OrgProfile.jsx b/public/components/OrgProfile.jsx index bd33d56..903603c 100644 --- a/public/components/OrgProfile.jsx +++ b/public/components/OrgProfile.jsx @@ -29,7 +29,7 @@ class OrgProfile extends Component { {name} </div> <Link to={`/org/${id}/settings`}> - <div className='ui brown button'> + <div className='ui teal button'> Settings </div> </Link> http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/caa718a3/public/components/visualizations/Counts.jsx ---------------------------------------------------------------------- diff --git a/public/components/visualizations/Counts.jsx b/public/components/visualizations/Counts.jsx index c187112..f8d1cbc 100644 --- a/public/components/visualizations/Counts.jsx +++ b/public/components/visualizations/Counts.jsx @@ -95,6 +95,7 @@ class Counts extends Component { <div id='counts-details' className='ui segment'> Activity Details <br></br> + <br></br> Name: {activity.name} <br></br> Element: {activity.ele} http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/caa718a3/public/components/visualizations/GraphMetrics.jsx ---------------------------------------------------------------------- diff --git a/public/components/visualizations/GraphMetrics.jsx b/public/components/visualizations/GraphMetrics.jsx index fcb566f..0dca235 100644 --- a/public/components/visualizations/GraphMetrics.jsx +++ b/public/components/visualizations/GraphMetrics.jsx @@ -16,6 +16,8 @@ import React, { Component, PropTypes } from 'react'; import * as d3 from 'd3'; +const colors_old = ['#A7003C', '#00A76B', '#0090A7', '#003DA7', '#6B00A7']; +const colors_new = ['#d45d35', '#DBA915', '#BFD02C', '#38A6D8', '#852EB7']; class GraphMetrics extends Component { constructor(props) { @@ -52,14 +54,17 @@ class GraphMetrics extends Component { this.height = this.fullHeight - this.margin.top - this.margin.bottom; this.mainRadius = 280; + // this.color = d3.scaleOrdinal() + // .range([ + // '#A7003C', // Red + // '#00A76B', // Green + // '#0090A7', // Teal + // '#003DA7', // Blue + // '#6B00A7' // Purple + // ]); + this.color = d3.scaleOrdinal() - .range([ - '#A7003C', // Red - '#00A76B', // Green - '#0090A7', // Teal - '#003DA7', // Blue - '#6B00A7' // Purple - ]); + .range(colors_old); this.arc = d3.arc() // .padAngle(0.002) @@ -133,7 +138,7 @@ class GraphMetrics extends Component { this.chords = this.chords.enter() .append('path') .attr('class', 'chord') - .style('fill', '#A76B00') + .style('fill', '#B0B9BE') .merge(this.chords); this.chords http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/caa718a3/public/components/visualizations/HorizontalBar.jsx ---------------------------------------------------------------------- diff --git a/public/components/visualizations/HorizontalBar.jsx b/public/components/visualizations/HorizontalBar.jsx index f362029..13f836b 100644 --- a/public/components/visualizations/HorizontalBar.jsx +++ b/public/components/visualizations/HorizontalBar.jsx @@ -17,6 +17,10 @@ import React, { Component, PropTypes } from 'react'; import * as d3 from 'd3'; + +const colors_old = ['#A7003C', '#00A76B', '#0090A7', '#003DA7', '#6B00A7']; +const colors_new = ['#d45d35', '#DBA915', '#BFD02C', '#38A6D8', '#852EB7']; + class HorizontalBar extends Component { constructor(props) { super(props); @@ -48,13 +52,16 @@ class HorizontalBar extends Component { .domain(['ot1', 'ot2']); this.color = d3.scaleOrdinal() - .range([ - '#A7003C', // Red - '#00A76B', // Green - '#0090A7', // Teal - '#003DA7', // Blue - '#6B00A7' // Purple - ]); + .range(colors_old); + + // this.color = d3.scaleOrdinal() + // .range([ + // '#A7003C', // Red + // '#00A76B', // Green + // '#0090A7', // Teal + // '#003DA7', // Blue + // '#6B00A7' // Purple + // ]); this.xAxis = d3.axisTop(this.x); this.yAxis = d3.axisLeft(this.y); @@ -170,7 +177,7 @@ class HorizontalBar extends Component { .attr('y', (d) => grouped ? this.y1(d.type) : 0) .attr('height', (d) => grouped ? this.y1.bandwidth() : this.y.bandwidth()) .style('fill', (d) => grouped ? this.color(d.type) : this.color(d.id)) - .style('stroke', (d) => d.selected ? '#A76B00' : '') + .style('stroke', (d) => d.selected ? '#283F4E' : '') .style('stroke-width', (d) => d.selected ? '3px' : '0px'); http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/caa718a3/public/components/visualizations/VerticalBar.jsx ---------------------------------------------------------------------- diff --git a/public/components/visualizations/VerticalBar.jsx b/public/components/visualizations/VerticalBar.jsx index 71613d3..e7af0ed 100644 --- a/public/components/visualizations/VerticalBar.jsx +++ b/public/components/visualizations/VerticalBar.jsx @@ -17,6 +17,9 @@ import React, { Component, PropTypes } from 'react'; import * as d3 from 'd3'; +const colors_old = ['#A7003C', '#00A76B', '#0090A7', '#003DA7', '#6B00A7']; +const colors_new = ['#d45d35', '#DBA915', '#BFD02C', '#38A6D8', '#852EB7']; + class VerticalBar extends Component { constructor(props) { super(props); @@ -48,13 +51,16 @@ class VerticalBar extends Component { .rangeRound([this.height, 0]); this.color = d3.scaleOrdinal() - .range([ - '#A7003C', // Red - '#00A76B', // Green - '#0090A7', // Teal - '#003DA7', // Blue - '#6B00A7' // Purple - ]); + .range(colors_old); + + // this.color = d3.scaleOrdinal() + // .range([ + // '#A7003C', // Red + // '#00A76B', // Green + // '#0090A7', // Teal + // '#003DA7', // Blue + // '#6B00A7' // Purple + // ]); this.xAxis = d3.axisBottom(this.x); this.yAxis = d3.axisLeft(this.y); @@ -170,7 +176,7 @@ class VerticalBar extends Component { .attr('y', (d) => this.y(d.count)) .attr('height', (d) => this.height - this.y(d.count)) .style('fill', (d) => grouped ? this.color(d.type) : this.color(d.id)) - .style('stroke', (d) => d.selected ? '#A76B00' : '') + .style('stroke', (d) => d.selected ? '#283F4E' : '') .style('stroke-width', (d) => d.selected ? '3px' : '0px'); http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/caa718a3/public/containers/Login.jsx ---------------------------------------------------------------------- diff --git a/public/containers/Login.jsx b/public/containers/Login.jsx index 0839b0d..cb577cb 100644 --- a/public/containers/Login.jsx +++ b/public/containers/Login.jsx @@ -41,11 +41,11 @@ class Login extends Component { <div className='field'> <input type='password' name='password' placeholder="Password" /> </div> - <button className='ui brown button' onClick={this.handleLogin}> + <button className='ui teal button' onClick={this.handleLogin}> Log In </button> <Link to='/signup'> - <button className='ui right floated brown button'> + <button className='ui right floated teal button'> Sign Up </button> </Link> http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/caa718a3/public/containers/Main.jsx ---------------------------------------------------------------------- diff --git a/public/containers/Main.jsx b/public/containers/Main.jsx index 22daa70..8740456 100644 --- a/public/containers/Main.jsx +++ b/public/containers/Main.jsx @@ -57,11 +57,11 @@ class Main extends Component { return ( <div id='main-container'> <div className='site-header'> - <div className='ui brown inverted padded top fixed borderless menu'> + <div className='ui teal inverted padded top fixed borderless menu'> <div className='ui container'> <Link to='/'> - <h3 className='ui inverted header item'>Tap</h3> + <h2 className='ui inverted header item'>Tap</h2> </Link> {authHeader} @@ -76,7 +76,7 @@ class Main extends Component { <div className='site-footer'> <div className='ui container'> - <div className='ui footer page brown inverted segment'> + <div className='ui footer page teal inverted segment'> <div className='ui center aligned container'> <div className='footer-text'>Copyright Apache SensSoft 2016</div> </div> http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/caa718a3/public/containers/SignUp.jsx ---------------------------------------------------------------------- diff --git a/public/containers/SignUp.jsx b/public/containers/SignUp.jsx index 6002576..84da347 100644 --- a/public/containers/SignUp.jsx +++ b/public/containers/SignUp.jsx @@ -41,11 +41,11 @@ class Signup extends Component { <div className='field'> <input type='password' name='password' placeholder="Password" /> </div> - <button className='ui brown button' onClick={this.handleSignup}> + <button className='ui teal button' onClick={this.handleSignup}> Sign Up </button> <Link to='/login'> - <button className='ui right floated brown button'> + <button className='ui right floated teal button'> Log In </button> </Link> http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/caa718a3/semantic/src/site/globals/site.variables ---------------------------------------------------------------------- diff --git a/semantic/src/site/globals/site.variables b/semantic/src/site/globals/site.variables index af19ae5..c905a27 100644 --- a/semantic/src/site/globals/site.variables +++ b/semantic/src/site/globals/site.variables @@ -2,6 +2,35 @@ User Global Variables *******************************/ +@primaryColor : @teal; +@secondaryColor : @grey; +@tertiaryColor : @white; + +@teal : #283F4E; +@white : #EBEBEB; +@grey : #54595B; +@black : #262626; + +@pageBackground : @white; + + + + + + +/************************************ + SensSoft Publicity Colors + +@red : #E24614; +@yellow : #DBA915; +@green : #BFD02C; +@blue : #38A6D8; +@purple : #852EB7; +*************************************/ + +/************************************* + Original TAP Global Variables + @primaryColor : @brown; @brown : #A76B00; @red : #A7003C; @@ -14,3 +43,5 @@ @grey : #FFE7BC; @pageBackground : @white; +*************************************/ + http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/caa718a3/semantic/src/theme.config ---------------------------------------------------------------------- diff --git a/semantic/src/theme.config b/semantic/src/theme.config index d2bc3bb..4acdb05 100644 --- a/semantic/src/theme.config +++ b/semantic/src/theme.config @@ -40,7 +40,7 @@ /* Collections */ @breadcrumb : 'default'; -@form : 'default'; +@form : 'github'; @grid : 'default'; @menu : 'default'; @message : 'default'; http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/caa718a3/stylesheets/main.scss ---------------------------------------------------------------------- diff --git a/stylesheets/main.scss b/stylesheets/main.scss index b482ee9..f2f62be 100644 --- a/stylesheets/main.scss +++ b/stylesheets/main.scss @@ -13,9 +13,29 @@ // See the License for the specific language governing permissions and // limitations under the License. -$brown: #A76B00; +/*$brown: #A76B00; $black: #271900; $background: #FFF5E3; +*/ + +/* +$red : #E24614; +$yellow : #DBA915; +$green : #BFD02C; +$blue : #38A6D8; +$purple : #852EB7;*/ + +$teal : #283F4E; +$white : #F9F9F9; +$lightgrey : #EBEBEB; +$grey : #54595B; +$black : #262626; + +$primaryColor : $teal; +$secondaryColor : $grey; +$tertiaryColor : $white; + +$background : $white; #react-container { display: flex; @@ -30,14 +50,14 @@ $background: #FFF5E3; .site-footer { width: 100%; - background-color: $brown; + background-color: $primaryColor; height: 50px; margin-top: 20px; } .site-header { width: 100%; - background-color: $brown; + background-color: $primaryColor; height: 50px; } @@ -66,9 +86,17 @@ $background: #FFF5E3; min-height: 24px; padding: 4px; pointer-events: none; - background-color: #A76B00; + background-color: $lightgrey; + border-style: solid; + border-width: 1px; + border-color: $grey; } #counts-details { word-wrap: break-word; + background-color: $background; +} + +#app-list { + background-color: $background; }