feat: added glow

RahulARanger · Dec 17, 2023 · 6f30732 · 6f30732
1 parent 9c39593
commit 6f30732
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 10 deletions.
diff --git a/handshake-nodejs-reporters/.changeset/brave-monkeys-run.md 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/...odejs-reporters/packages/handshake-dashboard/src/components/core/TestRun/overview-tab.tsx b/...odejs-reporters/packages/handshake-dashboard/src/components/core/TestRun/overview-tab.tsx
@@ -199,7 +199,10 @@ function PieChart(): ReactNode {
     return (
         <Card
             bordered
-            style={{ minHeight: '220px', maxWidth: '350px' }}
+            style={{
+                minHeight: '220px',
+                maxWidth: '350px',
+            }}
             title={
                 <Space align="center">
                     <Typography>Executed</Typography>

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
@@ -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 {
         <Counter
             end={properties.percent}
             suffix={'%'}
-            style={{ color: getColorCode(properties.percent) }}
+            style={{
+                color: getColorCode(properties.percent),
+            }}
         />
     );
 }

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
@@ -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/...ke-nodejs-reporters/packages/handshake-dashboard/src/components/utils/test-status-dot.tsx b/...ke-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
@@ -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
@@ -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
@@ -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/...ake-nodejs-reporters/packages/handshake-dashboard/src/styles/highChartExternal.module.css b/...ake-nodejs-reporters/packages/handshake-dashboard/src/styles/highChartExternal.module.css