Skip to content

Commit 502d503

Browse files
logonofflogonoff
committed
fix(NotFoundIcon): Fix missing page icon in dark mode
1 parent d22d33e commit 502d503

File tree

1 file changed

+9
-213
lines changed

1 file changed

+9
-213
lines changed

‎packages/module/src/NotFoundIcon/NotFoundIcon.tsx‎

Lines changed: 9 additions & 213 deletions
Original file line numberDiff line numberDiff line change
@@ -1,221 +1,17 @@
11
import React from 'react';
22
import { createUseStyles } from 'react-jss';
3+
import { PathMissingIcon } from '@patternfly/react-icons';
34

45
const useStyles = createUseStyles({
5-
fillPolygon: { fill: '#fff', fillRule: 'evenodd' },
6-
fillPaths: { fillRule: 'evenodd' },
7-
iconOpacity: { opacity: 0.5 },
8-
masking: { mask: 'url(#mask)' }
6+
notFoundIcon: { height: '150px', width: '150px' },
97
});
108

119

12-
export const NotFoundIcon: React.FunctionComponent = (props) => {
13-
const classes = useStyles();
14-
return (
15-
<svg
16-
id="Icon404"
17-
data-name="Layer 1"
18-
xmlns="http://www.w3.org/2000/svg"
19-
xmlnsXlink="http://www.w3.org/1999/xlink"
20-
viewBox="0 0 131 131"
21-
height="150px"
22-
{...props}
23-
>
24-
<defs>
25-
<mask id="mask" x="0" y="0" width="131" height="131" maskUnits="userSpaceOnUse">
26-
<g transform="translate(-2.89 -3.07)">
27-
<g id="mask-2">
28-
<polygon id="path-1" className={classes.fillPolygon} points="2.89 134.07 133.89 134.07 133.89 3.07 2.89 3.07 2.89 134.07" />
29-
</g>
30-
</g>
31-
</mask>
32-
</defs>
33-
<title>404path-not-found</title>
34-
<g className={classes.iconOpacity}>
35-
<g id="Group">
36-
<g id="Page-1">
37-
<path
38-
id="Fill-1"
39-
className={classes.fillPaths}
40-
d="M8,95.56a1.83,1.83,0,0,0-2,1.68c-.21,1.86-.23,3.05-.23,3.1a1.88,1.88,0,0,0,1.79,2h0a1.89,1.89,0,0,0,1.82-1.91s0-1,.2-2.67A1.91,1.91,0,0,0,8,95.56"
41-
transform="translate(-2.89 -3.07)"
42-
/>
43-
<path
44-
id="Fill-3"
45-
className={classes.fillPaths}
46-
d="M104.29,104.42a26.42,26.42,0,0,1-4.72,1.89,1.89,1.89,0,0,0-1.25,2.32,1.82,1.82,0,0,0,1.74,1.36,1.73,1.73,0,0,0,.5-.07,29.3,29.3,0,0,0,5.36-2.16,1.89,1.89,0,0,0,.8-2.52,1.78,1.78,0,0,0-2.43-.82"
47-
transform="translate(-2.89 -3.07)"
48-
/>
49-
<path
50-
id="Fill-5"
51-
className={classes.fillPaths}
52-
d="M74.84,57.4A1.88,1.88,0,0,0,76.2,58a1.9,1.9,0,0,0,1.21-.44,1.68,1.68,0,0,0,.15-2.45,19.81,19.81,0,0,1-2.85-3.9,1.88,1.88,0,0,0-2.47-.71,1.7,1.7,0,0,0-.75,2.34,23.82,23.82,0,0,0,3.35,4.58"
53-
transform="translate(-2.89 -3.07)"
54-
/>
55-
<path
56-
id="Fill-7"
57-
className={classes.fillPaths}
58-
d="M75.44,105.24a1.76,1.76,0,0,0-2.17,1.29,1.84,1.84,0,0,0,1.23,2.26A45.56,45.56,0,0,0,79.84,110a1.23,1.23,0,0,0,.27,0,1.78,1.78,0,0,0,1.74-1.56,1.82,1.82,0,0,0-1.47-2.1,40.81,40.81,0,0,1-4.94-1.09"
59-
transform="translate(-2.89 -3.07)"
60-
/>
61-
<path
62-
id="Fill-9"
63-
className={classes.fillPaths}
64-
d="M92.56,107.11a49.67,49.67,0,0,1-5,0h-.07a1.8,1.8,0,0,0-1.73,1.82,1.82,1.82,0,0,0,1.67,2c1,0,2,.07,3.07.07.78,0,1.54,0,2.29-.08a1.83,1.83,0,0,0,1.63-2,1.77,1.77,0,0,0-1.83-1.77"
65-
transform="translate(-2.89 -3.07)"
66-
/>
67-
<path
68-
id="Fill-11"
69-
className={classes.fillPaths}
70-
d="M65.38,100.76a1.62,1.62,0,0,0-2.41.32,2,2,0,0,0,.3,2.62,28.62,28.62,0,0,0,4.55,3.19,1.6,1.6,0,0,0,.78.21,1.69,1.69,0,0,0,1.52-1,2,2,0,0,0-.73-2.52,26,26,0,0,1-4-2.81"
71-
transform="translate(-2.89 -3.07)"
72-
/>
73-
<path
74-
id="Fill-13"
75-
className={classes.fillPaths}
76-
d="M109.71,70.18a2,2,0,0,0,1.1.32,2,2,0,0,0,1.53-.69,1.57,1.57,0,0,0-.42-2.35,26.14,26.14,0,0,0-5.3-2.61,2,2,0,0,0-2.45.91,1.63,1.63,0,0,0,1,2.19,23.39,23.39,0,0,1,4.51,2.23"
77-
transform="translate(-2.89 -3.07)"
78-
/>
79-
<path
80-
id="Fill-15"
81-
className={classes.fillPaths}
82-
d="M70.28,38.72a1.74,1.74,0,0,0-1.85,1.63c0,.46,0,.93,0,1.39A23,23,0,0,0,68.78,46a1.74,1.74,0,1,0,3.43-.63,18.84,18.84,0,0,1-.32-3.58c0-.39,0-.79,0-1.18a1.73,1.73,0,0,0-1.64-1.84"
83-
transform="translate(-2.89 -3.07)"
84-
/>
85-
<path
86-
id="Fill-17"
87-
className={classes.fillPaths}
88-
d="M76.35,27.53a2.08,2.08,0,0,0-2.68.25,20.42,20.42,0,0,0-3.2,4.71,1.64,1.64,0,0,0,1,2.23,2,2,0,0,0,.75.14,1.93,1.93,0,0,0,1.75-1,16.54,16.54,0,0,1,2.67-3.93,1.57,1.57,0,0,0-.29-2.38"
89-
transform="translate(-2.89 -3.07)"
90-
/>
91-
<path
92-
id="Fill-19"
93-
className={classes.fillPaths}
94-
d="M98.18,66.63l.26,0a1.74,1.74,0,0,0,.24-3.47,40.77,40.77,0,0,0-5.42-.39h0a1.74,1.74,0,0,0,0,3.48,37,37,0,0,1,4.94.36"
95-
transform="translate(-2.89 -3.07)"
96-
/>
97-
<path
98-
id="Fill-21"
99-
className={classes.fillPaths}
100-
d="M79.88,26.19a1.92,1.92,0,0,0,1-.26,25.06,25.06,0,0,1,4.62-2.13,1.71,1.71,0,0,0,1.09-2.24,1.87,1.87,0,0,0-2.37-1A30.71,30.71,0,0,0,78.89,23a1.7,1.7,0,0,0-.59,2.41,1.9,1.9,0,0,0,1.58.82"
101-
transform="translate(-2.89 -3.07)"
102-
/>
103-
<path
104-
id="Fill-23"
105-
className={classes.fillPaths}
106-
d="M86.28,65.61a1.79,1.79,0,0,0,.51.07,1.84,1.84,0,0,0,1.76-1.32,1.83,1.83,0,0,0-1.26-2.26,21.06,21.06,0,0,1-4.6-2,1.83,1.83,0,1,0-1.82,3.17,24.64,24.64,0,0,0,5.41,2.29"
107-
transform="translate(-2.89 -3.07)"
108-
/>
109-
<path
110-
id="Fill-25"
111-
className={classes.fillPaths}
112-
d="M47.85,80.53A1.7,1.7,0,0,0,47.61,83a41.72,41.72,0,0,1,3,4.06,1.84,1.84,0,0,0,2.49.52,1.71,1.71,0,0,0,.55-2.4,44.19,44.19,0,0,0-3.27-4.4,1.85,1.85,0,0,0-2.54-.23"
113-
transform="translate(-2.89 -3.07)"
114-
/>
115-
<path
116-
id="Fill-27"
117-
className={classes.fillPaths}
118-
d="M12.51,84.2A1.84,1.84,0,0,0,10,85a33.19,33.19,0,0,0-2.24,5.32A1.83,1.83,0,0,0,9,92.57a1.77,1.77,0,0,0,.56.08,1.83,1.83,0,0,0,1.74-1.26,29.21,29.21,0,0,1,2-4.72,1.81,1.81,0,0,0-.76-2.47"
119-
transform="translate(-2.89 -3.07)"
120-
/>
121-
<path
122-
id="Fill-29"
123-
className={classes.fillPaths}
124-
d="M54.77,91a1.7,1.7,0,0,0-.54,2.4,50.54,50.54,0,0,0,3.24,4.38,1.85,1.85,0,0,0,1.41.64A1.81,1.81,0,0,0,60,98.05a1.69,1.69,0,0,0,.27-2.45,47.21,47.21,0,0,1-3-4.08A1.84,1.84,0,0,0,54.77,91"
125-
transform="translate(-2.89 -3.07)"
126-
/>
127-
<path
128-
id="Fill-31"
129-
className={classes.fillPaths}
130-
d="M112.48,97.29a22.47,22.47,0,0,1-3.09,3.78,1.89,1.89,0,0,0-.09,2.56,1.64,1.64,0,0,0,1.25.58,1.67,1.67,0,0,0,1.16-.48,25.42,25.42,0,0,0,3.57-4.38,1.87,1.87,0,0,0-.43-2.52,1.64,1.64,0,0,0-2.37.46"
131-
transform="translate(-2.89 -3.07)"
132-
/>
133-
<path
134-
id="Fill-33"
135-
className={classes.fillPaths}
136-
d="M118.61,84a1.84,1.84,0,0,0-2,1.65,18.6,18.6,0,0,1-.93,4.74,1.74,1.74,0,0,0,1.26,2.2,2.15,2.15,0,0,0,.56.07,1.88,1.88,0,0,0,1.82-1.24,21.56,21.56,0,0,0,1.09-5.57A1.81,1.81,0,0,0,118.61,84"
137-
transform="translate(-2.89 -3.07)"
138-
/>
139-
<path
140-
id="Fill-35"
141-
className={classes.fillPaths}
142-
d="M117.66,81.1a1.88,1.88,0,0,0,.52-.08,1.85,1.85,0,0,0,1.18-2.3,21.55,21.55,0,0,0-2.43-5.45,1.73,1.73,0,0,0-2.46-.54,1.88,1.88,0,0,0-.52,2.55,17.79,17.79,0,0,1,2,4.51,1.8,1.8,0,0,0,1.7,1.31"
143-
transform="translate(-2.89 -3.07)"
144-
/>
145-
<path
146-
id="Fill-37"
147-
className={classes.fillPaths}
148-
d="M39,73.46a1.84,1.84,0,0,0-2.27,1.24A1.81,1.81,0,0,0,37.93,77a18,18,0,0,1,4.54,2,1.89,1.89,0,0,0,1,.27A1.85,1.85,0,0,0,45,78.3a1.8,1.8,0,0,0-.61-2.5A22.68,22.68,0,0,0,39,73.46"
149-
transform="translate(-2.89 -3.07)"
150-
/>
151-
<path
152-
id="Fill-39"
153-
className={classes.fillPaths}
154-
d="M18.61,75.53A20.68,20.68,0,0,0,14,79a1.81,1.81,0,0,0,0,2.53,1.7,1.7,0,0,0,1.26.55,1.72,1.72,0,0,0,1.22-.51,17,17,0,0,1,3.81-2.86A1.82,1.82,0,0,0,21,76.26a1.73,1.73,0,0,0-2.37-.73"
155-
transform="translate(-2.89 -3.07)"
156-
/>
157-
<path
158-
id="Fill-41"
159-
className={classes.fillPaths}
160-
d="M26.51,72.76a1.77,1.77,0,0,0,.27,3.52l.28,0A26,26,0,0,1,31.92,76a1.84,1.84,0,0,0,1.79-1.72A1.76,1.76,0,0,0,32,72.44a30.51,30.51,0,0,0-5.51.32"
161-
transform="translate(-2.89 -3.07)"
162-
/>
163-
<path
164-
id="Fill-43"
165-
className={classes.fillPaths}
166-
d="M92.47,22.34l.27,0q1.33-.16,2.76-.27a1.83,1.83,0,0,0,1.78-1.92,1.87,1.87,0,0,0-2.07-1.64c-1,.07-2,.17-3,.29a1.83,1.83,0,0,0-1.65,2,1.89,1.89,0,0,0,1.91,1.54"
167-
transform="translate(-2.89 -3.07)"
168-
/>
169-
<path
170-
id="Fill-45"
171-
className={classes.fillPaths}
172-
d="M133,66.72H118.94V44.44h9.27a.89.89,0,1,0,0-1.78h-9.27V36.71a.9.9,0,0,0-1.8,0v5.95H94.41V37.38a.9.9,0,0,0-1.79,0v5.28H77a.89.89,0,0,0,0,1.78H92.62v13a.9.9,0,1,0,1.79,0v-13h22.73V67.68a.89.89,0,0,0,.9.89.86.86,0,0,0,.36-.07H133a.89.89,0,1,0,0-1.78"
173-
transform="translate(-2.89 -3.07)"
174-
/>
175-
<path id="Fill-47" className="cls-3" d="M128.16,92.65h-4.92a1,1,0,0,0,0,1.93h4.92a1,1,0,0,0,0-1.93" transform="translate(-2.89 -3.07)" />
176-
<path
177-
id="Fill-49"
178-
className={classes.fillPaths}
179-
d="M109.87,116.68H93.2v-1.27a.9.9,0,1,0-1.8,0v1.27H69.05v-5.55a.9.9,0,1,0-1.8,0v5.55H44.82V93.89h4.27a.9.9,0,0,0,0-1.8H44.82V83.92a.9.9,0,1,0-1.79,0v8.17H20.3V84.37a.9.9,0,1,0-1.8,0v7.72H13.42a.9.9,0,1,0,0,1.8H18.5v17.39a.9.9,0,0,0,1.8,0V93.89H43v22.79H26.28a.9.9,0,1,0,0,1.8H43v9.9a.9.9,0,1,0,1.79,0v-9.9H67.25v14.69a.9.9,0,1,0,1.8,0V118.48H91.4v10.2a.9.9,0,1,0,1.8,0v-10.2h16.67a.9.9,0,0,0,0-1.8"
180-
transform="translate(-2.89 -3.07)"
181-
/>
182-
<g className={classes.masking}>
183-
<path
184-
id="Fill-51"
185-
className={classes.fillPaths}
186-
d="M20.55,67.5H43.31V45H20.55Zm-1.79,3a.9.9,0,1,0,1.79,0V69.3H43.31v2.1a.9.9,0,0,0,1.8,0V69.3H67.56V92.38H63.3a.9.9,0,1,0,0,1.79h4.26v3.3a.9.9,0,1,0,1.8,0v-3.3h23v9.14a.9.9,0,0,0,1.8,0V94.17H111.8a.9.9,0,1,0,0-1.79H94.21V71a.9.9,0,0,0-1.8,0V92.38h-23V69.3h12.8a.9.9,0,0,0,0-1.8H69.36v-10a.9.9,0,0,0-1.8,0v10H45.11V45h18a.9.9,0,1,0,0-1.8h-18V20.46H67.56V26a.9.9,0,1,0,1.8,0V20.46h6.06a.9.9,0,1,0,0-1.8H69.36V4a.9.9,0,0,0-1.8,0V18.66H45.11v-10a.9.9,0,1,0-1.8,0v10H26.24a.9.9,0,0,0,0,1.8H43.31V43.23H20.55V26.6a.9.9,0,1,0-1.79,0V43.23H8.88a.9.9,0,0,0,0,1.8h9.88V67.5h-15a.9.9,0,1,0,0,1.8h15Z"
187-
transform="translate(-2.89 -3.07)"
188-
/>
189-
</g>
190-
<g className={classes.masking}>
191-
<path
192-
id="Fill-53"
193-
className={classes.fillPaths}
194-
d="M117.51,104.21a.94.94,0,0,0-1,.92V111a1,1,0,0,0,1.93,0v-5.87a1,1,0,0,0-1-.92"
195-
transform="translate(-2.89 -3.07)"
196-
/>
197-
</g>
198-
<g className={classes.masking}>
199-
<path
200-
id="Fill-54"
201-
className={classes.fillPaths}
202-
d="M106.16,7.75a13.31,13.31,0,0,1,3.35-.41,6.07,6.07,0,0,1,4.09,1.23A4.42,4.42,0,0,1,115,12.09a5.92,5.92,0,0,1-.77,3.12,20.1,20.1,0,0,1-3.72,3.86,11.51,11.51,0,0,0-2.92,3.55,10.22,10.22,0,0,0-.78,4.29v1.21h2.8v-.74a7,7,0,0,1,.71-3.39,13.86,13.86,0,0,1,2.9-3.19,30,30,0,0,0,3.56-3.55,8.29,8.29,0,0,0,1.25-2.34,8.66,8.66,0,0,0,.43-2.87,7.61,7.61,0,0,0-2.3-5.91A9.3,9.3,0,0,0,109.72,4a17.8,17.8,0,0,0-8.58,2.21l1.28,3a17.6,17.6,0,0,1,3.74-1.51"
203-
transform="translate(-2.89 -3.07)"
204-
/>
205-
</g>
206-
<g className={classes.masking}>
207-
<path
208-
id="Fill-55"
209-
className={classes.fillPaths}
210-
d="M108.35,31c-1.59,0-2.39,1-2.39,2.9a3,3,0,0,0,.67,2.2,2.36,2.36,0,0,0,1.72.68,2.21,2.21,0,0,0,1.78-.76,3.16,3.16,0,0,0,.64-2.12,3.27,3.27,0,0,0-.63-2.16,2.22,2.22,0,0,0-1.79-.74"
211-
transform="translate(-2.89 -3.07)"
212-
/>
213-
</g>
214-
</g>
215-
</g>
216-
</g>
217-
</svg>
218-
)
219-
};
10+
export const NotFoundIcon: React.FunctionComponent = (props) => (
11+
<PathMissingIcon
12+
{...props}
13+
className={useStyles().notFoundIcon}
14+
/>
15+
);
22016

221-
export default NotFoundIcon;
17+
export default NotFoundIcon;

0 commit comments

Comments
 (0)