From d0555271721b327705e12a6243e11faa6d7d00ab Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Fri, 21 Jun 2019 22:19:40 +0300 Subject: [PATCH] refactor(orders): update js theme --- src/app/@theme/styles/theme.corporate.ts | 62 +++++++++--------- src/app/@theme/styles/theme.cosmic.ts | 80 ++++++++++++------------ src/app/@theme/styles/theme.default.ts | 71 +++++++++++---------- 3 files changed, 106 insertions(+), 107 deletions(-) diff --git a/src/app/@theme/styles/theme.corporate.ts b/src/app/@theme/styles/theme.corporate.ts index ad2e589c..0d61836b 100644 --- a/src/app/@theme/styles/theme.corporate.ts +++ b/src/app/@theme/styles/theme.corporate.ts @@ -187,40 +187,40 @@ export const CORPORATE_THEME = { }, orders: { - tooltipBg: '#ffffff', + tooltipBg: theme.bg, tooltipLineColor: 'rgba(0, 0, 0, 0)', tooltipLineWidth: '0', - tooltipBorderColor: '#ebeef2', + tooltipBorderColor: theme.border2, tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', - tooltipTextColor: '#2a2a2a', - tooltipFontWeight: 'bolder', + tooltipTextColor: theme.fgText, + tooltipFontWeight: 'normal', tooltipFontSize: '20', - axisLineColor: 'rgba(161, 161 ,229, 0.3)', + axisLineColor: theme.border4, axisFontSize: '16', - axisTextColor: '#b2bac2', - yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)', + axisTextColor: theme.fg, + yAxisSplitLine: theme.separator, - itemBorderColor: '#73a1ff', + itemBorderColor: theme.primary, lineStyle: 'solid', lineWidth: '4', // first line - firstAreaGradFrom: 'rgba(227, 236, 254, 0.7)', - firstAreaGradTo: 'rgba(227, 236, 254, 0.7)', + firstAreaGradFrom: theme.bg3, + firstAreaGradTo: theme.bg3, firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)', // second line - secondLineGradFrom: 'rgba(93, 207, 227, 1)', - secondLineGradTo: 'rgba(93, 207, 227, 1)', + secondLineGradFrom: theme.primary, + secondLineGradTo: theme.primary, secondAreaGradFrom: 'rgba(0, 0, 0, 0)', secondAreaGradTo: 'rgba(0, 0, 0, 0)', secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)', // third line - thirdLineGradFrom: 'rgba(113, 158, 252, 1)', - thirdLineGradTo: 'rgba(113, 158, 252, 1)', + thirdLineGradFrom: theme.success, + thirdLineGradTo: theme.successLight, thirdAreaGradFrom: 'rgba(0, 0, 0, 0)', thirdAreaGradTo: 'rgba(0, 0, 0, 0)', @@ -228,35 +228,35 @@ export const CORPORATE_THEME = { }, profit: { - bg: '#ffffff', - textColor: '#ffffff', - axisLineColor: 'rgba(161, 161 ,229, 0.3)', - splitLineColor: 'rgba(161, 161 ,229, 0.2)', + bg: theme.bg, + textColor: theme.fgText, + axisLineColor: theme.border4, + splitLineColor: theme.separator, areaOpacity: '1', axisFontSize: '16', - axisTextColor: '#b2bac2', + axisTextColor: theme.fg, // first bar - firstLineGradFrom: '#719efc', - firstLineGradTo: '#719efc', - firstLineShadow: 'rgba(14, 16, 48, 0.4)', + firstLineGradFrom: theme.bg3, + firstLineGradTo: theme.bg3, + firstLineShadow: 'rgba(0, 0, 0, 0)', // second bar - secondLineGradFrom: '#5dcfe3', - secondLineGradTo: '#5dcfe3', - secondLineShadow: 'rgba(14, 16, 48, 0.4)', + secondLineGradFrom: theme.primary, + secondLineGradTo: theme.primary, + secondLineShadow: 'rgba(0, 0, 0, 0)', // third bar - thirdLineGradFrom: '#e3ecfe', - thirdLineGradTo: '#e3ecfe', - thirdLineShadow: 'rgba(14, 16, 48, 0.4)', + thirdLineGradFrom: theme.success, + thirdLineGradTo: theme.success, + thirdLineShadow: 'rgba(0, 0, 0, 0)', }, orderProfitLegend: { - firstItem: '#719efc', - secondItem: '#5dcfe3', - thirdItem: '#e3ecfe', + firstItem: theme.success, + secondItem: theme.primary, + thirdItem: theme.bg3, }, visitors: { diff --git a/src/app/@theme/styles/theme.cosmic.ts b/src/app/@theme/styles/theme.cosmic.ts index d4d418b6..966049d7 100644 --- a/src/app/@theme/styles/theme.cosmic.ts +++ b/src/app/@theme/styles/theme.cosmic.ts @@ -187,76 +187,76 @@ export const COSMIC_THEME = { }, orders: { - tooltipBg: 'rgba(0, 255, 170, 0.35)', - tooltipLineColor: 'rgba(255, 255, 255, 0.1)', - tooltipLineWidth: '1', - tooltipBorderColor: '#00d977', - tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;', - tooltipTextColor: '#ffffff', + tooltipBg: theme.bg, + tooltipLineColor: 'rgba(0, 0, 0, 0)', + tooltipLineWidth: '0', + tooltipBorderColor: theme.border2, + tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', + tooltipTextColor: theme.fgText, tooltipFontWeight: 'normal', tooltipFontSize: '20', - axisLineColor: 'rgba(161, 161 ,229, 0.3)', + axisLineColor: theme.border4, axisFontSize: '16', - axisTextColor: '#a1a1e5', - yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)', + axisTextColor: theme.fg, + yAxisSplitLine: theme.separator, - itemBorderColor: '#ffffff', + itemBorderColor: theme.primary, lineStyle: 'solid', lineWidth: '4', // first line - firstAreaGradFrom: 'rgba(78, 64, 164, 1)', - firstAreaGradTo: 'rgba(78, 64, 164, 1)', - firstShadowLineDarkBg: '#018dff', + firstAreaGradFrom: theme.bg2, + firstAreaGradTo: theme.bg2, + firstShadowLineDarkBg: theme.bg2, // second line - secondLineGradFrom: '#00bece', - secondLineGradTo: '#00da78', + secondLineGradFrom: theme.primary, + secondLineGradTo: theme.primary, - secondAreaGradFrom: 'rgba(38, 139, 145, 0.8)', - secondAreaGradTo: 'rgba(38, 139, 145, 0.5)', - secondShadowLineDarkBg: '#2c5a85', + secondAreaGradFrom: 'rgba(161, 110, 255, 0.8)', + secondAreaGradTo: 'rgba(161, 110, 255, 0.5)', + secondShadowLineDarkBg: theme.primary, // third line - thirdLineGradFrom: '#8069ff', - thirdLineGradTo: '#8357ff', + thirdLineGradFrom: theme.success, + thirdLineGradTo: theme.successLight, - thirdAreaGradFrom: 'rgba(118, 73, 208, 0.7)', - thirdAreaGradTo: 'rgba(188, 92, 255, 0.4)', - thirdShadowLineDarkBg: '#a695ff', + thirdAreaGradFrom: 'rgba(0, 214, 143, 0.7)', + thirdAreaGradTo: 'rgba(0, 214, 143, 0.4)', + thirdShadowLineDarkBg: theme.success, }, profit: { - bg: '#3d3780', - textColor: '#ffffff', - axisLineColor: '#a1a1e5', - splitLineColor: '#342e73', + bg: theme.bg, + textColor: theme.fgText, + axisLineColor: theme.border4, + splitLineColor: theme.separator, areaOpacity: '1', axisFontSize: '16', - axisTextColor: '#a1a1e5', + axisTextColor: theme.fg, // first bar - firstLineGradFrom: '#00bece', - firstLineGradTo: '#00da78', - firstLineShadow: 'rgba(14, 16, 48, 0.4)', + firstLineGradFrom: theme.bg2, + firstLineGradTo: theme.bg2, + firstLineShadow: 'rgba(0, 0, 0, 0)', // second bar - secondLineGradFrom: '#8069ff', - secondLineGradTo: '#8357ff', - secondLineShadow: 'rgba(14, 16, 48, 0.4)', + secondLineGradFrom: theme.primary, + secondLineGradTo: theme.primary, + secondLineShadow: 'rgba(0, 0, 0, 0)', // third bar - thirdLineGradFrom: '#4e40a4', - thirdLineGradTo: '#4e40a4', - thirdLineShadow: 'rgba(14, 16, 48, 0.4)', + thirdLineGradFrom: theme.success, + thirdLineGradTo: theme.successLight, + thirdLineShadow: 'rgba(0, 0, 0, 0)', }, orderProfitLegend: { - firstItem: 'linear-gradient(90deg, #00c7c7 0%, #00d977 100%)', - secondItem: 'linear-gradient(90deg, #a454ff 0%, #7659ff 100%)', - thirdItem: '#4e40a4', + firstItem: theme.success, + secondItem: theme.primary, + thirdItem: theme.bg2, }, visitors: { diff --git a/src/app/@theme/styles/theme.default.ts b/src/app/@theme/styles/theme.default.ts index e2e0f1cf..b5dcc50e 100644 --- a/src/app/@theme/styles/theme.default.ts +++ b/src/app/@theme/styles/theme.default.ts @@ -187,77 +187,76 @@ export const DEFAULT_THEME = { }, orders: { - tooltipBg: '#ffffff', + tooltipBg: theme.bg, tooltipLineColor: 'rgba(0, 0, 0, 0)', tooltipLineWidth: '0', - tooltipBorderColor: '#ebeef2', + tooltipBorderColor: theme.border2, tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', - tooltipTextColor: '#2a2a2a', - tooltipFontWeight: 'bolder', + tooltipTextColor: theme.fgText, + tooltipFontWeight: 'normal', tooltipFontSize: '20', - axisLineColor: 'rgba(161, 161 ,229, 0.3)', + axisLineColor: theme.border4, axisFontSize: '16', - axisTextColor: '#b2bac2', - yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)', + axisTextColor: theme.fg, + yAxisSplitLine: theme.separator, - itemBorderColor: '#42db7d', + itemBorderColor: theme.primary, lineStyle: 'solid', lineWidth: '4', // first line - firstAreaGradFrom: 'rgba(236, 242, 245, 0.8)', - firstAreaGradTo: 'rgba(236, 242, 245, 0.8)', + firstAreaGradFrom: theme.bg3, + firstAreaGradTo: theme.bg3, firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)', // second line - secondLineGradFrom: 'rgba(164, 123, 255, 1)', - secondLineGradTo: 'rgba(164, 123, 255, 1)', + secondLineGradFrom: theme.primary, + secondLineGradTo: theme.primary, - secondAreaGradFrom: 'rgba(188, 92, 255, 0.2)', - secondAreaGradTo: 'rgba(188, 92, 255, 0)', + secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)', + secondAreaGradTo: 'rgba(51, 102, 255, 0)', secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)', // third line - thirdLineGradFrom: 'rgba(55, 220, 136, 1)', - thirdLineGradTo: 'rgba(55, 220, 136, 1)', + thirdLineGradFrom: theme.success, + thirdLineGradTo: theme.successLight, - thirdAreaGradFrom: 'rgba(31 ,106, 124, 0.2)', - thirdAreaGradTo: 'rgba(4, 126, 230, 0)', + thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)', + thirdAreaGradTo: 'rgba(0, 214, 143, 0)', thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)', }, - // TODO: need design for default theme profit: { - bg: '#ffffff', - textColor: '#ffffff', - axisLineColor: 'rgba(161, 161 ,229, 0.3)', - splitLineColor: 'rgba(161, 161 ,229, 0.2)', + bg: theme.bg, + textColor: theme.fgText, + axisLineColor: theme.border4, + splitLineColor: theme.separator, areaOpacity: '1', axisFontSize: '16', - axisTextColor: '#b2bac2', + axisTextColor: theme.fg, // first bar - firstLineGradFrom: '#00bece', - firstLineGradTo: '#00da78', - firstLineShadow: 'rgba(14, 16, 48, 0.4)', + firstLineGradFrom: theme.bg3, + firstLineGradTo: theme.bg3, + firstLineShadow: 'rgba(0, 0, 0, 0)', // second bar - secondLineGradFrom: '#8069ff', - secondLineGradTo: '#8357ff', - secondLineShadow: 'rgba(14, 16, 48, 0.4)', + secondLineGradFrom: theme.primary, + secondLineGradTo: theme.primary, + secondLineShadow: 'rgba(0, 0, 0, 0)', // third bar - thirdLineGradFrom: 'rgba(236, 242, 245, 0.8)', - thirdLineGradTo: 'rgba(236, 242, 245, 0.8)', - thirdLineShadow: 'rgba(14, 16, 48, 0.4)', + thirdLineGradFrom: theme.success, + thirdLineGradTo: theme.successLight, + thirdLineShadow: 'rgba(0, 0, 0, 0)', }, orderProfitLegend: { - firstItem: 'linear-gradient(90deg, #3edd81 0%, #3bddad 100%)', - secondItem: 'linear-gradient(90deg, #8d7fff 0%, #b17fff 100%)', - thirdItem: 'rgba(236, 242, 245, 0.8)', + firstItem: theme.success, + secondItem: theme.primary, + thirdItem: theme.bg3, }, visitors: {