[MM-1025]: Updated the icon and added svg wrapper

Brightscout · Sep 23, 2024 · 20302a7 · 20302a7
1 parent 2f22e6b
commit 20302a7
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 5 deletions.
diff --git a/webapp/src/components/jira_ticket_tooltip/jira_ticket_tooltip.tsx b/webapp/src/components/jira_ticket_tooltip/jira_ticket_tooltip.tsx
@@ -1,6 +1,8 @@
 import React, {ReactNode} from 'react';
 
 import {Instance} from 'types/model';
+import SVGWrapper from 'components/svgWrapper';
+import {SVGIcons} from 'components/plugin_constants/icons';
 import {TicketData, TicketDetails} from 'types/tooltip';
 import DefaultAvatar from 'components/default_avatar/default_avatar';
 
@@ -177,11 +179,14 @@ export default class TicketPopover extends React.PureComponent<Props, State> {
         if (error) {
             return (
                 <div className='jira-issue-tooltip jira-issue-tooltip-error'>
-                    <span
-                        className='jira-issue-error-icon fa fa-exclamation-triangle'
-                        style={{color: 'red'}}
-                        title={'Hazard Icon'}
-                    />
+                    <SVGWrapper
+                        width={30}
+                        height={30}
+                        fill='red'
+                        className='my-icon-class'
+                    >
+                        {SVGIcons.exclamationTriangle}
+                    </SVGWrapper>
                     <div className='jira-issue-error-message'>{error}</div>
                     <p className='jira-issue-error-footer'>{'Check your connection or try again later'}</p>
                 </div>

diff --git a/webapp/src/components/jira_ticket_tooltip/ticketStyle.scss b/webapp/src/components/jira_ticket_tooltip/ticketStyle.scss
@@ -239,6 +239,7 @@
     flex-direction: column;
     justify-content: center;
     gap: 10px;
+    padding: 12px;
 
     .jira-issue-error-message {
         font-size: 19px;

diff --git a/webapp/src/components/plugin_constants/icons.tsx b/webapp/src/components/plugin_constants/icons.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+type SvgIconNames = 'exclamationTriangle';
+
+export const SVGIcons: Record<SvgIconNames, JSX.Element> = {
+    exclamationTriangle: (
+        <svg
+            xmlns='http://www.w3.org/2000/svg'
+            width='30'
+            height='30'
+            fill='red'
+            className='bi bi-exclamation-triangle'
+            viewBox='0 0 16 16'
+        >
+            <path d='M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.15.15 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.2.2 0 0 1-.054.06.1.1 0 0 1-.066.017H1.146a.1.1 0 0 1-.066-.017.2.2 0 0 1-.054-.06.18.18 0 0 1 .002-.183L7.884 2.073a.15.15 0 0 1 .054-.057m1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767z'/>
+            <path d='M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/>
+        </svg>
+    ),
+};
diff --git a/webapp/src/components/svgWrapper/index.tsx b/webapp/src/components/svgWrapper/index.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+
+type SVGWrapperProps = {
+    viewBox?: string;
+    height?: number;
+    width?: number;
+    fill?: string;
+    onHoverFill?: string;
+    children: React.ReactNode;
+    className?: string;
+}
+
+const SVGWrapper = ({
+    children,
+    viewBox = '0 0 36 36',
+    height = 36,
+    width = 36,
+    fill = 'none',
+    onHoverFill,
+    className = '',
+}: SVGWrapperProps): JSX.Element => {
+    return (
+        <svg
+            width={width}
+            height={height}
+            viewBox={viewBox}
+            fill={onHoverFill || fill}
+            xmlns='http://www.w3.org/2000/svg'
+            className={className}
+        >
+            {children}
+        </svg>
+    );
+};
+
+export default SVGWrapper;