@woosmap/ui 4.34.0-beta.9 → 4.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woosmap/ui",
-  "version": "4.34.0-beta.9",
+  "version": "4.35.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/WebGeoServices/ui.git"

package/src/components/Button/Button.js

@@ -15,7 +15,6 @@ export default class Button extends Component {
             size,
             type,
             icon,
-            isFillIcon,
             iconSize,
             isBtnIcon,
             className,
@@ -41,10 +40,10 @@ export default class Button extends Component {
             isNotification ? 'btn--notification' : null,
             { 'btn--loading': isLoading },
             { 'btn--no-label': !label },
-            { 'btn--custom-icon-size': iconSize && iconSize !== 22 },
+            { 'btn--custom-icon-size': iconSize && iconSize !== 24 },
             className
         );
-        let iconComponent = icon ? <Icon isFill={isFillIcon} size={iconSize} icon={icon} /> : null;
+        let iconComponent = icon ? <Icon size={iconSize} icon={icon} /> : null;
         if (isLoading) {
             iconComponent = <Icon icon="load" />;
         }
@@ -78,13 +77,12 @@ Button.defaultProps = {
     className: '',
     label: '',
     icon: null,
-    iconSize: 22,
+    iconSize: 24,
     isLoading: false,
     active: false,
     onClick: null,
     iconRight: false,
     isNotification: false,
-    isFillIcon: false,
 };
 
 Button.propTypes = {
@@ -121,5 +119,4 @@ Button.propTypes = {
     children: PropTypes.node,
     iconRight: PropTypes.bool,
     isNotification: PropTypes.bool,
-    isFillIcon: PropTypes.bool,
 };

package/src/components/Button/Button.stories.js

@@ -28,7 +28,7 @@ const Template = (args) => {
                 <Button label={label} disabled />
             </div>
             <div className="flex mbi">
-                <Button icon="marker" isNotification label="4" type="secondary" />
+                <Button icon="puzzle" isNotification label="4" type="secondary" />
                 <Button label={label} type="secondary" />
                 <Button label={label} type="secondary" icon="marker" />
                 <Button label={label} type="secondary" isLoading />
@@ -105,7 +105,7 @@ const Template = (args) => {
             <div className="flex-column mbi">
                 <span>
                     There is a no-labeled flexed button link here : &nbsp;
-                    <Button icon="marker" type="link-flex" />
+                    <Button icon="label" type="link-flex" />
                 </span>
                 <span>
                     There is a labeled flexed button link here : &nbsp;
@@ -115,7 +115,7 @@ const Template = (args) => {
             <div className="flex-column mbi">
                 <span>
                     There is a no-labeled flexed-info button link here : &nbsp;
-                    <Button icon="marker" type="link-flex-info" />
+                    <Button icon="label" type="link-flex-info" />
                 </span>
                 <span>
                     There is a labeled flexed-info button link here : &nbsp;

package/src/components/Button/ButtonSwitch.js

@@ -20,7 +20,7 @@ ButtonSwitch.defaultProps = {
     label: '',
     icon: null,
     activeIcon: null,
-    iconSize: 22,
+    iconSize: 24,
     isLoading: false,
     active: false,
     onClick: null,

package/src/components/Card/Card.js

@@ -280,7 +280,7 @@ Card.defaultProps = {
     active: false,
     onClick: null,
     product: null,
-    iconSize: 36,
+    iconSize: 38,
     isClickable: false,
     noBorder: false,
     isNew: false,

package/src/components/Card/Card.styl

@@ -191,7 +191,7 @@
 						font-size $fontSizeSmall - .1
 						margin-top -.5rem
 						.icon
-							stroke $logo5
+							fill $logo5
 		&__footer
 			color $dark40
 		&--small
@@ -272,7 +272,7 @@
 		.card--traffic &
 			background $traffic
 		.icon
-			stroke $light
+			fill $light
 	&__image
 		flex-grow 1
 		flex-shrink 0

package/src/components/Card/SimpleCard.styl

@@ -61,7 +61,7 @@
 		position absolute
 		right 1rem
 		top 1.3rem
-		stroke $favorite
+		fill $favorite
 		.inline &
 			sq(1.8)
 			position unset

package/src/components/Demo/skeletondemo.styl

@@ -155,7 +155,7 @@
             padding-left .5rem !important
             padding-right .5rem !important
             svg
-                stroke $activeColor
+                fill $activeColor
         &__indicator-separator
             background-color $activeColor
         &__multi-value

package/src/components/Dropdown/Dropdown.js

@@ -426,7 +426,7 @@ Dropdown.defaultProps = {
     openOnMouseEnter: false,
     btnFace: 'link-flex',
     btnFaceIcon: 'caret-bottom',
-    btnFaceIconSize: 22,
+    btnFaceIconSize: 24,
     btnTooltipText: null,
     btnTooltipDirection: null,
     testId: 'dropdown',

package/src/components/Flash/Flash.js

@@ -6,7 +6,7 @@ import Icon from '../Icon/Icon';
 export default class Flash extends Component {
     render() {
         const { children, icon, inverse, fill, type, shadowed, testId, ...rest } = this.props;
-        const iconComponent = icon ? <Icon icon={icon} /> : null;
+        const iconComponent = icon ? <Icon size={24} icon={icon} /> : null;
         return (
             <div
                 className={cl(

package/src/components/Flash/Flash.stories.js

@@ -51,7 +51,7 @@ const Template = () => (
         <div className="flex mbib mbi--large">
             <div className="flex mbi">
                 <Flash type="howto">Tip Howto</Flash>
-                <Flash type="howto" icon="marker">
+                <Flash type="howto" icon="tool">
                     Howto flash iconed
                 </Flash>
             </div>
@@ -68,7 +68,7 @@ const Template = () => (
         <div className="flex mbib mbi--large">
             <div className="flex mbi">
                 <Flash type="success">Success flash</Flash>
-                <Flash type="success" icon="marker">
+                <Flash type="success" icon="enter">
                     Success flash iconed
                 </Flash>
             </div>
@@ -76,7 +76,7 @@ const Template = () => (
                 <Flash type="success" inverse>
                     Success flash inverse
                 </Flash>
-                <Flash type="success" inverse icon="marker">
+                <Flash type="success" inverse icon="enter">
                     Success flash inverse iconed
                 </Flash>
             </div>

package/src/components/Flash/Flash.styl

@@ -11,7 +11,7 @@
 		min-height $buttonHeight
 		padding .9rem $padding
 	.icon
-		stroke $secondary
+		fill $secondary
 		flex-shrink 0
 	&--shadowed
 		box-shadow 0 0 1rem $dark8
@@ -30,7 +30,7 @@
 		&.flash--inverse
 			color $flashSuccess
 			.icon
-				stroke $flashSuccess
+				fill $flashSuccess
 
 	&--tip
 		&:not(.flash--inverse)
@@ -39,7 +39,7 @@
 		&.flash--inverse
 			color $flashTipInverse
 			.icon
-				stroke $flashTipInverse
+				fill $flashTipInverse
 	
 	&--howto
 		&:not(.flash--inverse)
@@ -48,7 +48,7 @@
 		&.flash--inverse
 			color $flashHowto
 			.icon
-				stroke $flashHowto
+				fill $flashHowto
 
 	&--warning
 		&:not(.flash--inverse)
@@ -57,7 +57,7 @@
 		&.flash--inverse
 			color $flashWarning
 			.icon
-				stroke $flashWarning
+				fill $flashWarning
 
 	&--error
 		&:not(.flash--inverse)
@@ -66,7 +66,7 @@
 		&.flash--inverse
 			color $flashError
 			.icon
-				stroke $flashError
+				fill $flashError
 
 	&--info
 		&:not(.flash--inverse)
@@ -75,4 +75,4 @@
 		&.flash--inverse
 			color $flashInfo
 			.icon
-				stroke $flashInfo
+				fill $flashInfo

package/src/components/Icon/Icon.js

@@ -113,65 +113,103 @@ import { ReactComponent as WorldTime } from '../../icons/world-time.svg';
 import { ReactComponent as WinPrize } from '../../icons/win-prize.svg';
 import { ReactComponent as Zoom } from '../../icons/zoom.svg';
 
+import { ReactComponent as Access } from '../../icons/access.svg';
 import { ReactComponent as Add } from '../../icons/add.svg';
 import { ReactComponent as AddCircle } from '../../icons/add-circle.svg';
+import { ReactComponent as Administration } from '../../icons/administration.svg';
 import { ReactComponent as AdministrationTool } from '../../icons/administration-tool.svg';
 import { ReactComponent as AdminKey } from '../../icons/admin-key.svg';
 import { ReactComponent as AdminTool } from '../../icons/admin-tool.svg';
 import { ReactComponent as Agenda } from '../../icons/agenda.svg';
 import { ReactComponent as AlphabeticalOrder } from '../../icons/alphabetical-order.svg';
+import { ReactComponent as AlphabeticalOrderReversed } from '../../icons/alphabetical-order-reversed.svg';
+import { ReactComponent as Archive } from '../../icons/archive.svg';
 import { ReactComponent as ArrowBotton } from '../../icons/arrow-bottom.svg';
 import { ReactComponent as ArrowLeft } from '../../icons/arrow-left.svg';
 import { ReactComponent as ArrowRight } from '../../icons/arrow-right.svg';
 import { ReactComponent as ArrowTop } from '../../icons/arrow-top.svg';
+import { ReactComponent as ArrowLink } from '../../icons/arrow-link.svg';
 import { ReactComponent as Asset } from '../../icons/asset.svg';
+import { ReactComponent as AssetAddFile } from '../../icons/asset-add-file.svg';
+import { ReactComponent as AssetAdd } from '../../icons/asset-add.svg';
+import { ReactComponent as Bank } from '../../icons/bank.svg';
+import { ReactComponent as Beaker } from '../../icons/beaker.svg';
+import { ReactComponent as Bell } from '../../icons/bell.svg';
 import { ReactComponent as BigCommerce } from '../../icons/big-commerce.svg';
+import { ReactComponent as Bookmark } from '../../icons/bookmark.svg';
 import { ReactComponent as Bulb } from '../../icons/bulb.svg';
 import { ReactComponent as CaretBotton } from '../../icons/caret-bottom.svg';
 import { ReactComponent as CaretLeft } from '../../icons/caret-left.svg';
 import { ReactComponent as CaretRight } from '../../icons/caret-right.svg';
 import { ReactComponent as CaretTop } from '../../icons/caret-top.svg';
 import { ReactComponent as Charts } from '../../icons/charts.svg';
+import { ReactComponent as Chat } from '../../icons/chat.svg';
 import { ReactComponent as Check } from '../../icons/check.svg';
+import { ReactComponent as Checked } from '../../icons/checked.svg';
+import { ReactComponent as CheckCircle } from '../../icons/check-circle.svg';
+import { ReactComponent as CheckSquare } from '../../icons/check-square.svg';
 import { ReactComponent as Clock } from '../../icons/clock.svg';
+import { ReactComponent as ClockReversed } from '../../icons/clock-reversed.svg';
 import { ReactComponent as Close } from '../../icons/close.svg';
+import { ReactComponent as CloseThick } from '../../icons/close-thick.svg';
 import { ReactComponent as Code } from '../../icons/code.svg';
 import { ReactComponent as Company } from '../../icons/company.svg';
 import { ReactComponent as Copy } from '../../icons/copy.svg';
+import { ReactComponent as CreditCard } from '../../icons/credit-card.svg';
 import { ReactComponent as Cube } from '../../icons/cube.svg';
 import { ReactComponent as Dashboard } from '../../icons/dashboard.svg';
 import { ReactComponent as Delete } from '../../icons/delete.svg';
+import { ReactComponent as Details } from '../../icons/details.svg';
 import { ReactComponent as Documentation } from '../../icons/documentation.svg';
 import { ReactComponent as Dollar } from '../../icons/dollar.svg';
-import { ReactComponent as Dot } from '../../icons/dot.svg';
 import { ReactComponent as DotFill } from '../../icons/dot-fill.svg';
+import { ReactComponent as Dot } from '../../icons/dot.svg';
+import { ReactComponent as Download } from '../../icons/download.svg';
 import { ReactComponent as Edit } from '../../icons/edit.svg';
 import { ReactComponent as Email } from '../../icons/email.svg';
+import { ReactComponent as Enter } from '../../icons/enter.svg';
 import { ReactComponent as Eye } from '../../icons/eye.svg';
 import { ReactComponent as EyeCrossedOut } from '../../icons/eye-crossed-out.svg';
+import { ReactComponent as Exchange } from '../../icons/exchange.svg';
 import { ReactComponent as Expand } from '../../icons/expand.svg';
 import { ReactComponent as Export } from '../../icons/export.svg';
 import { ReactComponent as Flag } from '../../icons/flag.svg';
 import { ReactComponent as Forbidden } from '../../icons/forbidden.svg';
 
 import { ReactComponent as Globe } from '../../icons/globe.svg';
+import { ReactComponent as Home } from '../../icons/home.svg';
 import { ReactComponent as Hourglass } from '../../icons/hourglass.svg';
+import { ReactComponent as HomeUser } from '../../icons/home-user.svg';
 import { ReactComponent as Import } from '../../icons/import.svg';
 import { ReactComponent as Info } from '../../icons/info.svg';
+import { ReactComponent as Label } from '../../icons/label.svg';
 import { ReactComponent as Latitude } from '../../icons/latitude.svg';
 import { ReactComponent as Load } from '../../icons/load.svg';
+import { ReactComponent as Leave } from '../../icons/leave.svg';
+import { ReactComponent as Location } from '../../icons/location.svg';
 import { ReactComponent as Longitude } from '../../icons/longitude.svg';
 import { ReactComponent as Manage } from '../../icons/manage.svg';
 import { ReactComponent as Marker } from '../../icons/marker.svg';
 import { ReactComponent as Members } from '../../icons/members.svg';
 import { ReactComponent as Member } from '../../icons/member.svg';
 import { ReactComponent as MenuVertical } from '../../icons/menu-vertical.svg';
+import { ReactComponent as MenuCircleVertical } from '../../icons/menu-circle-vertical.svg';
+import { ReactComponent as MenuHorizontal } from '../../icons/menu-horizontal.svg';
+import { ReactComponent as MenuCircleHorizontal } from '../../icons/menu-circle-horizontal.svg';
+import { ReactComponent as Metrics } from '../../icons/metrics.svg';
+import { ReactComponent as More } from '../../icons/more.svg';
+import { ReactComponent as Organization } from '../../icons/organization.svg';
+import { ReactComponent as Organizations } from '../../icons/organizations.svg';
 import { ReactComponent as Phone } from '../../icons/phone.svg';
+import { ReactComponent as Platform } from '../../icons/platform.svg';
+import { ReactComponent as Prize } from '../../icons/prize.svg';
 import { ReactComponent as ProductActivated } from '../../icons/product-activated.svg';
 import { ReactComponent as ProductAdd } from '../../icons/product-add.svg';
 import { ReactComponent as Products } from '../../icons/products.svg';
 import { ReactComponent as Projects } from '../../icons/projects.svg';
+import { ReactComponent as Puzzle } from '../../icons/puzzle.svg';
 import { ReactComponent as Question } from '../../icons/question.svg';
+import { ReactComponent as Receipt } from '../../icons/receipt.svg';
 import { ReactComponent as Search } from '../../icons/search.svg';
 import { ReactComponent as SeePage } from '../../icons/see-page.svg';
 import { ReactComponent as Settings } from '../../icons/settings.svg';
@@ -182,7 +220,12 @@ import { ReactComponent as StarFilled } from '../../icons/star-filled.svg';
 import { ReactComponent as Support } from '../../icons/support.svg';
 import { ReactComponent as Switch } from '../../icons/switch.svg';
 import { ReactComponent as Team } from '../../icons/team.svg';
+import { ReactComponent as Time } from '../../icons/time.svg';
+import { ReactComponent as Tool } from '../../icons/tool.svg';
 import { ReactComponent as User } from '../../icons/user.svg';
+import { ReactComponent as ViewCard } from '../../icons/view-card.svg';
+import { ReactComponent as ViewList } from '../../icons/view-list.svg';
+import { ReactComponent as ViewMiniCard } from '../../icons/view-mini-card.svg';
 import { ReactComponent as Warning } from '../../icons/warning.svg';
 import { ReactComponent as Woosmap } from '../../icons/woosmap.svg';
 import { ReactComponent as Address } from '../../icons/address.svg';
@@ -422,40 +465,62 @@ const WebsiteIcons = {
 };
 
 const ConsoleIcons = {
+    access: Access,
     'add-circle': AddCircle,
     add: Add,
     'admin-key': AdminKey,
     'admin-tool': AdminTool,
     'administration-tool': AdministrationTool,
+    administration: Administration,
     agenda: Agenda,
+    'alphabetical-order-reversed': AlphabeticalOrderReversed,
     'alphabetical-order': AlphabeticalOrder,
+    archive: Archive,
     'arrow-bottom': ArrowBotton,
     'arrow-left': ArrowLeft,
+    'arrow-link': ArrowLink,
     'arrow-right': ArrowRight,
     'arrow-top': ArrowTop,
+    'asset-add-file': AssetAddFile,
+    'asset-add': AssetAdd,
     asset: Asset,
+    bank: Bank,
+    beaker: Beaker,
+    bell: Bell,
     'big-commerce': BigCommerce,
+    bookmark: Bookmark,
     bulb: Bulb,
     'caret-bottom': CaretBotton,
     'caret-left': CaretLeft,
     'caret-right': CaretRight,
     'caret-top': CaretTop,
     charts: Charts,
+    chat: Chat,
+    'check-circle': CheckCircle,
+    'check-square': CheckSquare,
     check: Check,
+    checked: Checked,
+    'clock-reversed': ClockReversed,
     clock: Clock,
+    'close-thick': CloseThick,
     close: Close,
     code: Code,
     company: Company,
     copy: Copy,
+    'credit-card': CreditCard,
     cube: Cube,
     dashboard: Dashboard,
     delete: Delete,
+    details: Details,
     documentation: Documentation,
     dollar: Dollar,
-    dot: Dot,
     'dot-fill': DotFill,
+    dot: Dot,
+    download: Download,
     edit: Edit,
     email: Email,
+    enter: Enter,
+    exchange: Exchange,
     expand: Expand,
     export: Export,
     'eye-crossed-out': EyeCrossedOut,
@@ -463,23 +528,39 @@ const ConsoleIcons = {
     flag: Flag,
     forbidden: Forbidden,
     globe: Globe,
+    'home-user': HomeUser,
+    home: Home,
     hourglass: Hourglass,
     import: Import,
     info: Info,
+    label: Label,
     latitude: Latitude,
+    leave: Leave,
     load: Load,
+    location: Location,
     longitude: Longitude,
     manage: Manage,
     marker: Marker,
     member: Member,
     members: Members,
+    'menu-circle-horizontal': MenuCircleHorizontal,
+    'menu-circle-vertical': MenuCircleVertical,
+    'menu-horizontal': MenuHorizontal,
     'menu-vertical': MenuVertical,
+    metrics: Metrics,
+    more: More,
+    organization: Organization,
+    organizations: Organizations,
     phone: Phone,
+    platform: Platform,
+    prize: Prize,
     'product-activated': ProductActivated,
     'product-add': ProductAdd,
     products: Products,
     projects: Projects,
+    puzzle: Puzzle,
     question: Question,
+    receipt: Receipt,
     search: Search,
     'see-page': SeePage,
     settings: Settings,
@@ -495,7 +576,12 @@ const ConsoleIcons = {
     support: Support,
     switch: Switch,
     team: Team,
+    time: Time,
+    tool: Tool,
     user: User,
+    'view-card': ViewCard,
+    'view-list': ViewList,
+    'view-mini-card': ViewMiniCard,
     warning: Warning,
     woosmap: Woosmap,
 
@@ -626,12 +712,12 @@ const Icons = {
 
 class Icon extends Component {
     render() {
-        const { icon, size, className, isFill, title, testId } = this.props;
+        const { icon, size, className, title, testId } = this.props;
         const IconComponent = Object.keys(Icons).includes(icon) ? Icons[icon] : Woosmap;
-        const classes = cl('icon', { 'icon--fill': isFill }, className);
+
         return (
             <IconComponent
-                className={classes}
+                className={cl('icon', className)}
                 data-testid={`${testId}-${icon}`}
                 width={size}
                 height={size}
@@ -642,18 +728,16 @@ class Icon extends Component {
 }
 
 Icon.defaultProps = {
-    size: 22,
+    size: 24,
     className: null,
     title: null,
     testId: 'icon',
-    isFill: false,
 };
 
 Icon.propTypes = {
     size: PropTypes.number,
     className: PropTypes.string,
     icon: PropTypes.string.isRequired,
-    isFill: PropTypes.bool,
     title: PropTypes.string,
     testId: PropTypes.string,
 };

package/src/components/Icon/Icon.stories.js

@@ -10,7 +10,7 @@ export default Story;
 
 const Template = () => (
     <div>
-        <Icon size={64} icon="marker" />
+        <Icon size={64} icon="home" />
     </div>
 );
 
@@ -30,6 +30,6 @@ const drawIcon = (icon) => (
 
 export const All = () => <div className="flex-wrap">{Object.keys(Icons).map(drawIcon)}</div>;
 export const Website = () => <div className="flex-wrap">{Object.keys(WebsiteIcons).map(drawIcon)}</div>;
-export const Console = () => <div className="flex-wrap icon-console">{Object.keys(ConsoleIcons).map(drawIcon)}</div>;
+export const Console = () => <div className="flex-wrap">{Object.keys(ConsoleIcons).map(drawIcon)}</div>;
 export const Products = () => <div className="flex-wrap">{Object.keys(ProductsIcons).map(drawIcon)}</div>;
 export const NotExisting = () => <div className="flex-wrap">{drawIcon('not-existing-icon')}</div>;

package/src/components/Icon/Icon.test.js

@@ -5,13 +5,13 @@ import '@testing-library/jest-dom/extend-expect';
 import Icon from './Icon';
 
 it('renders an icon component', () => {
-    const { getByTestId } = render(<Icon icon="marker" size={64} />);
+    const { getByTestId } = render(<Icon icon="home" size={64} />);
 
-    const result = getByTestId('icon-marker');
+    const result = getByTestId('icon-home');
 
     expect(result).toHaveClass('icon');
     expect(result).toHaveAttribute('width', '64');
-    expect(result).toHaveTextContent('marker');
+    expect(result).toHaveTextContent('home');
 });
 
 const isIconRendered = (icon) => {

package/src/components/Icon/icon-story.styl

@@ -15,16 +15,4 @@
 	&__name
 		margin-top 1rem
 	&:hover
-		background-color $primary10
-	.icon-console
-		.icon
-			trans()
-			stroke $secondary
-			stroke-linecap round
-			stroke-linejoin round
-			&:not(.icon--fill)
-				fill none
-			&--fill
-				stroke-width: 0
-				stroke $secondary
-			
+		background-color $primary10

package/src/components/Input/Input.js

@@ -52,16 +52,16 @@ export default class Input extends Component {
 
         switch (iconSize) {
             case 'normal':
-                iconSize = 22;
+                iconSize = 24;
                 break;
             case 'large':
-                iconSize = 24;
+                iconSize = 26;
                 break;
             case 'small':
-                iconSize = 20;
+                iconSize = 22;
                 break;
             default:
-                iconSize = 22;
+                iconSize = 24;
         }
         return (
             <div className="input__container">

package/src/components/Label/Label.js

@@ -43,9 +43,8 @@ export default class Label extends Component {
                 {closable && (
                     <Button
                         type="link-flex"
-                        className="icon--thicker"
-                        iconSize={10}
-                        icon="close"
+                        iconSize={12}
+                        icon="close-thick"
                         onClick={closeCb}
                         testId={`${testId}-button`}
                     />

package/src/components/Label/Label.styl

@@ -12,7 +12,7 @@
 	margin .2rem 0
 	word-break break-all
 	.icon
-		stroke $light
+		fill $light
 	&--round
 		br(50)
 		sq($buttonHeight)
@@ -134,10 +134,10 @@
 		text-shadow none
 		.btn
 			.icon
-				stroke $secondary70
+				fill $secondary70
 			&:hover
 				.icon
-					stroke $secondary70 !important
+					fill $secondary70 !important
 	&--white
 		background-color $light
 		color $secondary
@@ -145,7 +145,7 @@
 		border .1rem solid $borderColor
 		.btn
 			.icon
-				stroke $secondary40
+				fill $secondary40
 			&:hover
 				.icon
-					stroke $secondary40 !important
+					fill $secondary40 !important

package/src/components/Modal/Modal.styl

@@ -57,7 +57,7 @@
 			right 2rem
 			cursor pointer
 			.icon
-				stroke $light
+				fill $light
 	&__footer
 	&__header
 		padding 1.8rem 2.4rem

package/src/components/ServiceMessage/ServiceMessage.styl

@@ -20,10 +20,10 @@
 		background-color $info
 	.btn
 		.icon
-			stroke $light
+			fill $light
 		&:hover
 			.icon
-				stroke $success2
+				fill $success2
 	&__text
 		textShadow()
 		font-size $fontSize + .1