diff --git a/handshake-nodejs-reporters/.changeset/brave-monkeys-run.md b/handshake-nodejs-reporters/.changeset/brave-monkeys-run.md new file mode 100644 index 00000000..6847ffc9 --- /dev/null +++ b/handshake-nodejs-reporters/.changeset/brave-monkeys-run.md @@ -0,0 +1,5 @@ +--- +"wdio-handshake-reporter": patch +--- + +added glow for the status diff --git a/handshake-nodejs-reporters/packages/handshake-dashboard/src/components/core/TestRun/overview-tab.tsx b/handshake-nodejs-reporters/packages/handshake-dashboard/src/components/core/TestRun/overview-tab.tsx index db723ba6..d11f66a0 100644 --- a/handshake-nodejs-reporters/packages/handshake-dashboard/src/components/core/TestRun/overview-tab.tsx +++ b/handshake-nodejs-reporters/packages/handshake-dashboard/src/components/core/TestRun/overview-tab.tsx @@ -199,7 +199,10 @@ function PieChart(): ReactNode { return ( Executed diff --git a/handshake-nodejs-reporters/packages/handshake-dashboard/src/components/utils/counter.tsx b/handshake-nodejs-reporters/packages/handshake-dashboard/src/components/utils/counter.tsx index 639c8543..abafba48 100644 --- a/handshake-nodejs-reporters/packages/handshake-dashboard/src/components/utils/counter.tsx +++ b/handshake-nodejs-reporters/packages/handshake-dashboard/src/components/utils/counter.tsx @@ -11,6 +11,7 @@ export default class Counter extends Component< prefix?: string; decimalPoints?: number; maxDigits?: number; + cssClassName?: string; }, { start: number } > { @@ -36,6 +37,7 @@ export default class Counter extends Component< )}${this.props.suffix ?? ''}` } decimals={this.props.decimalPoints ?? 0} + className={this.props.cssClassName} /> ); } @@ -81,7 +83,9 @@ export function StaticPercent(properties: { percent: number }): ReactNode { ); } diff --git a/handshake-nodejs-reporters/packages/handshake-dashboard/src/components/utils/renderers.tsx b/handshake-nodejs-reporters/packages/handshake-dashboard/src/components/utils/renderers.tsx index 51c19910..f2acc8ca 100644 --- a/handshake-nodejs-reporters/packages/handshake-dashboard/src/components/utils/renderers.tsx +++ b/handshake-nodejs-reporters/packages/handshake-dashboard/src/components/utils/renderers.tsx @@ -49,8 +49,11 @@ export function RenderStatus(properties: { fontSize: '16px', color: 'green', marginTop: properties.marginTop, + backgroundColor: 'transparent', + borderRadius: '10px', }} title="Passed" + className="green-glow" /> ); } @@ -62,8 +65,10 @@ export function RenderStatus(properties: { fontSize: '16px', color: 'red', marginTop: properties.marginTop, + borderRadius: '50px', }} title="Failed" + className="red-glow" /> ); } @@ -73,9 +78,11 @@ export function RenderStatus(properties: { style={{ fontSize: '16px', color: 'yellow', + borderRadius: '50px', marginTop: properties.marginTop, }} title="Skipped" + className="warn-glow" /> ); } @@ -86,8 +93,10 @@ export function RenderStatus(properties: { fontSize: '16px', color: 'yellow', marginTop: properties.marginTop, + borderRadius: '50px', }} title="Pending" + className="warn-glow" /> ); } @@ -98,9 +107,11 @@ export function RenderStatus(properties: { fontSize: '16px', color: 'orangered', marginTop: properties.marginTop, + borderRadius: '50px', }} spin title="Retried Suite" + className="retried-glow" /> ); } diff --git a/handshake-nodejs-reporters/packages/handshake-dashboard/src/components/utils/test-status-dot.tsx b/handshake-nodejs-reporters/packages/handshake-dashboard/src/components/utils/test-status-dot.tsx index c5c4d87d..fd0ba787 100644 --- a/handshake-nodejs-reporters/packages/handshake-dashboard/src/components/utils/test-status-dot.tsx +++ b/handshake-nodejs-reporters/packages/handshake-dashboard/src/components/utils/test-status-dot.tsx @@ -12,7 +12,10 @@ export default function BadgeForSuiteType(properties: { color={properties.color} count={properties.text} size={properties.size} - style={{ fontWeight: 'bold', color: 'white' }} + style={{ + fontWeight: 'bold', + color: 'white', + }} /> ); } diff --git a/handshake-nodejs-reporters/packages/handshake-dashboard/src/styles/GraphCard.module.css b/handshake-nodejs-reporters/packages/handshake-dashboard/src/styles/GraphCard.module.css index 4bcabe3a..4fa75289 100644 --- a/handshake-nodejs-reporters/packages/handshake-dashboard/src/styles/GraphCard.module.css +++ b/handshake-nodejs-reporters/packages/handshake-dashboard/src/styles/GraphCard.module.css @@ -3,7 +3,7 @@ border: 1px solid transparent; width: 100% !important; flex-grow: 1; - background: #1a1a1a !important; + background: rgb(12, 12, 12) !important; border-radius: 10px; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1) !important; } diff --git a/handshake-nodejs-reporters/packages/handshake-dashboard/src/styles/globals.css b/handshake-nodejs-reporters/packages/handshake-dashboard/src/styles/globals.css index 1ce87bd3..a7e2c8aa 100644 --- a/handshake-nodejs-reporters/packages/handshake-dashboard/src/styles/globals.css +++ b/handshake-nodejs-reporters/packages/handshake-dashboard/src/styles/globals.css @@ -39,11 +39,6 @@ body { height: 100%; overflow: hidden; } -/* div.ant-tabs { - background-image: radial-gradient(rgb(236, 236, 236) 1px, transparent 0); - background-size: 20px 20px; - background-position: -19px -19px; -} */ ::-webkit-scrollbar { width: 6px; /* Width of the scrollbar track */ @@ -53,3 +48,33 @@ body { background-color: #888; /* Color of the scrollbar thumb */ border-radius: 6px; /* Rounded corners for the thumb */ } + +.green-glow { + -webkit-box-shadow: 0px 0px 27px 0px rgba(0, 255, 55, 0.9); + -moz-box-shadow: 0px 0px 27px 0px rgba(0, 255, 55, 0.9); + box-shadow: 0px 0px 27px 0px rgba(0, 255, 55, 0.9); +} + +.red-glow { + -webkit-box-shadow: 0px 0px 27px 0px rgba(255, 0, 0, 0.9); + -moz-box-shadow: 0px 0px 27px 0px rgba(255, 0, 0, 0.9); + box-shadow: 0px 0px 27px 0px rgba(255, 0, 0, 0.9); +} + +.warn-glow { + -webkit-box-shadow: 0px 0px 27px 0px rgba(255, 238, 0, 0.9); + -moz-box-shadow: 0px 0px 27px 0px rgba(255, 238, 0, 0.9); + box-shadow: 0px 0px 27px 0px rgba(255, 238, 0, 0.9); +} + +.retried-glow { + -webkit-box-shadow: 0px 0px 27px 0px rgba(255, 47, 0, 0.9); + -moz-box-shadow: 0px 0px 27px 0px rgba(255, 47, 0, 0.9); + box-shadow: 0px 0px 27px 0px rgba(255, 47, 0, 0.9); +} + +.black-glow { + -webkit-box-shadow: 0px 0px 27px 0px rgba(28, 27, 28, 0.9); + -moz-box-shadow: 0px 0px 27px 0px rgba(28, 27, 28, 0.9); + box-shadow: 0px 0px 27px 0px rgba(28, 27, 28, 0.9); +} diff --git a/handshake-nodejs-reporters/packages/handshake-dashboard/src/styles/header.module.css b/handshake-nodejs-reporters/packages/handshake-dashboard/src/styles/header.module.css index edda091c..eafcef8b 100644 --- a/handshake-nodejs-reporters/packages/handshake-dashboard/src/styles/header.module.css +++ b/handshake-nodejs-reporters/packages/handshake-dashboard/src/styles/header.module.css @@ -22,6 +22,7 @@ box-shadow: 1px 1px hsl(0 0% 100% / 0.25) inset; background-color: ((240 4% 46%) / 1); backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); } .header:hover { diff --git a/handshake-nodejs-reporters/packages/handshake-dashboard/src/styles/highChartExternal.module.css b/handshake-nodejs-reporters/packages/handshake-dashboard/src/styles/highChartExternal.module.css deleted file mode 100644 index 9d2b58dd..00000000 --- a/handshake-nodejs-reporters/packages/handshake-dashboard/src/styles/highChartExternal.module.css +++ /dev/null @@ -1 +0,0 @@ -@import url(https://code.highcharts.com/7.0.0/css/themes/dark-unica.css);