refactor(orders): update js theme

This commit is contained in:
Sergey Andrievskiy 2019-06-21 22:19:40 +03:00
parent 8e957099f4
commit d055527172
3 changed files with 106 additions and 107 deletions

View file

@ -187,40 +187,40 @@ export const CORPORATE_THEME = {
}, },
orders: { orders: {
tooltipBg: '#ffffff', tooltipBg: theme.bg,
tooltipLineColor: 'rgba(0, 0, 0, 0)', tooltipLineColor: 'rgba(0, 0, 0, 0)',
tooltipLineWidth: '0', tooltipLineWidth: '0',
tooltipBorderColor: '#ebeef2', tooltipBorderColor: theme.border2,
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
tooltipTextColor: '#2a2a2a', tooltipTextColor: theme.fgText,
tooltipFontWeight: 'bolder', tooltipFontWeight: 'normal',
tooltipFontSize: '20', tooltipFontSize: '20',
axisLineColor: 'rgba(161, 161 ,229, 0.3)', axisLineColor: theme.border4,
axisFontSize: '16', axisFontSize: '16',
axisTextColor: '#b2bac2', axisTextColor: theme.fg,
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)', yAxisSplitLine: theme.separator,
itemBorderColor: '#73a1ff', itemBorderColor: theme.primary,
lineStyle: 'solid', lineStyle: 'solid',
lineWidth: '4', lineWidth: '4',
// first line // first line
firstAreaGradFrom: 'rgba(227, 236, 254, 0.7)', firstAreaGradFrom: theme.bg3,
firstAreaGradTo: 'rgba(227, 236, 254, 0.7)', firstAreaGradTo: theme.bg3,
firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)', firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
// second line // second line
secondLineGradFrom: 'rgba(93, 207, 227, 1)', secondLineGradFrom: theme.primary,
secondLineGradTo: 'rgba(93, 207, 227, 1)', secondLineGradTo: theme.primary,
secondAreaGradFrom: 'rgba(0, 0, 0, 0)', secondAreaGradFrom: 'rgba(0, 0, 0, 0)',
secondAreaGradTo: 'rgba(0, 0, 0, 0)', secondAreaGradTo: 'rgba(0, 0, 0, 0)',
secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)', secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
// third line // third line
thirdLineGradFrom: 'rgba(113, 158, 252, 1)', thirdLineGradFrom: theme.success,
thirdLineGradTo: 'rgba(113, 158, 252, 1)', thirdLineGradTo: theme.successLight,
thirdAreaGradFrom: 'rgba(0, 0, 0, 0)', thirdAreaGradFrom: 'rgba(0, 0, 0, 0)',
thirdAreaGradTo: 'rgba(0, 0, 0, 0)', thirdAreaGradTo: 'rgba(0, 0, 0, 0)',
@ -228,35 +228,35 @@ export const CORPORATE_THEME = {
}, },
profit: { profit: {
bg: '#ffffff', bg: theme.bg,
textColor: '#ffffff', textColor: theme.fgText,
axisLineColor: 'rgba(161, 161 ,229, 0.3)', axisLineColor: theme.border4,
splitLineColor: 'rgba(161, 161 ,229, 0.2)', splitLineColor: theme.separator,
areaOpacity: '1', areaOpacity: '1',
axisFontSize: '16', axisFontSize: '16',
axisTextColor: '#b2bac2', axisTextColor: theme.fg,
// first bar // first bar
firstLineGradFrom: '#719efc', firstLineGradFrom: theme.bg3,
firstLineGradTo: '#719efc', firstLineGradTo: theme.bg3,
firstLineShadow: 'rgba(14, 16, 48, 0.4)', firstLineShadow: 'rgba(0, 0, 0, 0)',
// second bar // second bar
secondLineGradFrom: '#5dcfe3', secondLineGradFrom: theme.primary,
secondLineGradTo: '#5dcfe3', secondLineGradTo: theme.primary,
secondLineShadow: 'rgba(14, 16, 48, 0.4)', secondLineShadow: 'rgba(0, 0, 0, 0)',
// third bar // third bar
thirdLineGradFrom: '#e3ecfe', thirdLineGradFrom: theme.success,
thirdLineGradTo: '#e3ecfe', thirdLineGradTo: theme.success,
thirdLineShadow: 'rgba(14, 16, 48, 0.4)', thirdLineShadow: 'rgba(0, 0, 0, 0)',
}, },
orderProfitLegend: { orderProfitLegend: {
firstItem: '#719efc', firstItem: theme.success,
secondItem: '#5dcfe3', secondItem: theme.primary,
thirdItem: '#e3ecfe', thirdItem: theme.bg3,
}, },
visitors: { visitors: {

View file

@ -187,76 +187,76 @@ export const COSMIC_THEME = {
}, },
orders: { orders: {
tooltipBg: 'rgba(0, 255, 170, 0.35)', tooltipBg: theme.bg,
tooltipLineColor: 'rgba(255, 255, 255, 0.1)', tooltipLineColor: 'rgba(0, 0, 0, 0)',
tooltipLineWidth: '1', tooltipLineWidth: '0',
tooltipBorderColor: '#00d977', tooltipBorderColor: theme.border2,
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;', tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
tooltipTextColor: '#ffffff', tooltipTextColor: theme.fgText,
tooltipFontWeight: 'normal', tooltipFontWeight: 'normal',
tooltipFontSize: '20', tooltipFontSize: '20',
axisLineColor: 'rgba(161, 161 ,229, 0.3)', axisLineColor: theme.border4,
axisFontSize: '16', axisFontSize: '16',
axisTextColor: '#a1a1e5', axisTextColor: theme.fg,
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)', yAxisSplitLine: theme.separator,
itemBorderColor: '#ffffff', itemBorderColor: theme.primary,
lineStyle: 'solid', lineStyle: 'solid',
lineWidth: '4', lineWidth: '4',
// first line // first line
firstAreaGradFrom: 'rgba(78, 64, 164, 1)', firstAreaGradFrom: theme.bg2,
firstAreaGradTo: 'rgba(78, 64, 164, 1)', firstAreaGradTo: theme.bg2,
firstShadowLineDarkBg: '#018dff', firstShadowLineDarkBg: theme.bg2,
// second line // second line
secondLineGradFrom: '#00bece', secondLineGradFrom: theme.primary,
secondLineGradTo: '#00da78', secondLineGradTo: theme.primary,
secondAreaGradFrom: 'rgba(38, 139, 145, 0.8)', secondAreaGradFrom: 'rgba(161, 110, 255, 0.8)',
secondAreaGradTo: 'rgba(38, 139, 145, 0.5)', secondAreaGradTo: 'rgba(161, 110, 255, 0.5)',
secondShadowLineDarkBg: '#2c5a85', secondShadowLineDarkBg: theme.primary,
// third line // third line
thirdLineGradFrom: '#8069ff', thirdLineGradFrom: theme.success,
thirdLineGradTo: '#8357ff', thirdLineGradTo: theme.successLight,
thirdAreaGradFrom: 'rgba(118, 73, 208, 0.7)', thirdAreaGradFrom: 'rgba(0, 214, 143, 0.7)',
thirdAreaGradTo: 'rgba(188, 92, 255, 0.4)', thirdAreaGradTo: 'rgba(0, 214, 143, 0.4)',
thirdShadowLineDarkBg: '#a695ff', thirdShadowLineDarkBg: theme.success,
}, },
profit: { profit: {
bg: '#3d3780', bg: theme.bg,
textColor: '#ffffff', textColor: theme.fgText,
axisLineColor: '#a1a1e5', axisLineColor: theme.border4,
splitLineColor: '#342e73', splitLineColor: theme.separator,
areaOpacity: '1', areaOpacity: '1',
axisFontSize: '16', axisFontSize: '16',
axisTextColor: '#a1a1e5', axisTextColor: theme.fg,
// first bar // first bar
firstLineGradFrom: '#00bece', firstLineGradFrom: theme.bg2,
firstLineGradTo: '#00da78', firstLineGradTo: theme.bg2,
firstLineShadow: 'rgba(14, 16, 48, 0.4)', firstLineShadow: 'rgba(0, 0, 0, 0)',
// second bar // second bar
secondLineGradFrom: '#8069ff', secondLineGradFrom: theme.primary,
secondLineGradTo: '#8357ff', secondLineGradTo: theme.primary,
secondLineShadow: 'rgba(14, 16, 48, 0.4)', secondLineShadow: 'rgba(0, 0, 0, 0)',
// third bar // third bar
thirdLineGradFrom: '#4e40a4', thirdLineGradFrom: theme.success,
thirdLineGradTo: '#4e40a4', thirdLineGradTo: theme.successLight,
thirdLineShadow: 'rgba(14, 16, 48, 0.4)', thirdLineShadow: 'rgba(0, 0, 0, 0)',
}, },
orderProfitLegend: { orderProfitLegend: {
firstItem: 'linear-gradient(90deg, #00c7c7 0%, #00d977 100%)', firstItem: theme.success,
secondItem: 'linear-gradient(90deg, #a454ff 0%, #7659ff 100%)', secondItem: theme.primary,
thirdItem: '#4e40a4', thirdItem: theme.bg2,
}, },
visitors: { visitors: {

View file

@ -187,77 +187,76 @@ export const DEFAULT_THEME = {
}, },
orders: { orders: {
tooltipBg: '#ffffff', tooltipBg: theme.bg,
tooltipLineColor: 'rgba(0, 0, 0, 0)', tooltipLineColor: 'rgba(0, 0, 0, 0)',
tooltipLineWidth: '0', tooltipLineWidth: '0',
tooltipBorderColor: '#ebeef2', tooltipBorderColor: theme.border2,
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
tooltipTextColor: '#2a2a2a', tooltipTextColor: theme.fgText,
tooltipFontWeight: 'bolder', tooltipFontWeight: 'normal',
tooltipFontSize: '20', tooltipFontSize: '20',
axisLineColor: 'rgba(161, 161 ,229, 0.3)', axisLineColor: theme.border4,
axisFontSize: '16', axisFontSize: '16',
axisTextColor: '#b2bac2', axisTextColor: theme.fg,
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)', yAxisSplitLine: theme.separator,
itemBorderColor: '#42db7d', itemBorderColor: theme.primary,
lineStyle: 'solid', lineStyle: 'solid',
lineWidth: '4', lineWidth: '4',
// first line // first line
firstAreaGradFrom: 'rgba(236, 242, 245, 0.8)', firstAreaGradFrom: theme.bg3,
firstAreaGradTo: 'rgba(236, 242, 245, 0.8)', firstAreaGradTo: theme.bg3,
firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)', firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
// second line // second line
secondLineGradFrom: 'rgba(164, 123, 255, 1)', secondLineGradFrom: theme.primary,
secondLineGradTo: 'rgba(164, 123, 255, 1)', secondLineGradTo: theme.primary,
secondAreaGradFrom: 'rgba(188, 92, 255, 0.2)', secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)',
secondAreaGradTo: 'rgba(188, 92, 255, 0)', secondAreaGradTo: 'rgba(51, 102, 255, 0)',
secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)', secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
// third line // third line
thirdLineGradFrom: 'rgba(55, 220, 136, 1)', thirdLineGradFrom: theme.success,
thirdLineGradTo: 'rgba(55, 220, 136, 1)', thirdLineGradTo: theme.successLight,
thirdAreaGradFrom: 'rgba(31 ,106, 124, 0.2)', thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)',
thirdAreaGradTo: 'rgba(4, 126, 230, 0)', thirdAreaGradTo: 'rgba(0, 214, 143, 0)',
thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)', thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
}, },
// TODO: need design for default theme
profit: { profit: {
bg: '#ffffff', bg: theme.bg,
textColor: '#ffffff', textColor: theme.fgText,
axisLineColor: 'rgba(161, 161 ,229, 0.3)', axisLineColor: theme.border4,
splitLineColor: 'rgba(161, 161 ,229, 0.2)', splitLineColor: theme.separator,
areaOpacity: '1', areaOpacity: '1',
axisFontSize: '16', axisFontSize: '16',
axisTextColor: '#b2bac2', axisTextColor: theme.fg,
// first bar // first bar
firstLineGradFrom: '#00bece', firstLineGradFrom: theme.bg3,
firstLineGradTo: '#00da78', firstLineGradTo: theme.bg3,
firstLineShadow: 'rgba(14, 16, 48, 0.4)', firstLineShadow: 'rgba(0, 0, 0, 0)',
// second bar // second bar
secondLineGradFrom: '#8069ff', secondLineGradFrom: theme.primary,
secondLineGradTo: '#8357ff', secondLineGradTo: theme.primary,
secondLineShadow: 'rgba(14, 16, 48, 0.4)', secondLineShadow: 'rgba(0, 0, 0, 0)',
// third bar // third bar
thirdLineGradFrom: 'rgba(236, 242, 245, 0.8)', thirdLineGradFrom: theme.success,
thirdLineGradTo: 'rgba(236, 242, 245, 0.8)', thirdLineGradTo: theme.successLight,
thirdLineShadow: 'rgba(14, 16, 48, 0.4)', thirdLineShadow: 'rgba(0, 0, 0, 0)',
}, },
orderProfitLegend: { orderProfitLegend: {
firstItem: 'linear-gradient(90deg, #3edd81 0%, #3bddad 100%)', firstItem: theme.success,
secondItem: 'linear-gradient(90deg, #8d7fff 0%, #b17fff 100%)', secondItem: theme.primary,
thirdItem: 'rgba(236, 242, 245, 0.8)', thirdItem: theme.bg3,
}, },
visitors: { visitors: {