@woosmap/ui 4.34.0-beta.0 → 4.34.0-beta.10

package/package.json

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

package/src/components/Button/Button.js

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

package/src/components/Button/ButtonSwitch.js

@@ -20,7 +20,7 @@ ButtonSwitch.defaultProps = {
     label: '',
     icon: null,
     activeIcon: null,
-    iconSize: 24,
+    iconSize: 22,
     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: 38,
+    iconSize: 36,
     isClickable: false,
     noBorder: false,
     isNew: false,

package/src/components/Card/Card.styl

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

package/src/components/Card/SimpleCard.js

@@ -43,6 +43,8 @@ class SimpleCard extends Component {
                         className="simplecard__favorite"
                         title={tr('Favorite Project')}
                         icon="star-filled"
+                        isFill
+                        size={18}
                         data-testid={`${testId}-icon`}
                     />
                 )}

package/src/components/Demo/skeletondemo.styl

@@ -155,7 +155,7 @@
             padding-left .5rem !important
             padding-right .5rem !important
             svg
-                fill $activeColor
+                stroke $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: 24,
+    btnFaceIconSize: 22,
     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 size={24} icon={icon} /> : null;
+        const iconComponent = icon ? <Icon icon={icon} /> : null;
         return (
             <div
                 className={cl(

package/src/components/Flash/Flash.styl

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

package/src/components/Icon/Icon.js

@@ -120,6 +120,7 @@ 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 ArrowBotton } from '../../icons/arrow-bottom.svg';
 import { ReactComponent as ArrowLeft } from '../../icons/arrow-left.svg';
 import { ReactComponent as ArrowRight } from '../../icons/arrow-right.svg';
@@ -134,6 +135,7 @@ import { ReactComponent as CaretTop } from '../../icons/caret-top.svg';
 import { ReactComponent as Charts } from '../../icons/charts.svg';
 import { ReactComponent as Check } from '../../icons/check.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 Code } from '../../icons/code.svg';
 import { ReactComponent as Company } from '../../icons/company.svg';
@@ -143,6 +145,7 @@ import { ReactComponent as Dashboard } from '../../icons/dashboard.svg';
 import { ReactComponent as Delete } from '../../icons/delete.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 Edit } from '../../icons/edit.svg';
 import { ReactComponent as Email } from '../../icons/email.svg';
@@ -152,7 +155,6 @@ 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 Hourglass } from '../../icons/hourglass.svg';
 import { ReactComponent as Import } from '../../icons/import.svg';
@@ -181,7 +183,10 @@ 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 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 Warning } from '../../icons/warning.svg';
 import { ReactComponent as Woosmap } from '../../icons/woosmap.svg';
 import { ReactComponent as Address } from '../../icons/address.svg';
@@ -189,6 +194,7 @@ import { ReactComponent as Distance } from '../../icons/distance.svg';
 import { ReactComponent as Geolocation } from '../../icons/geolocation.svg';
 import { ReactComponent as Localities } from '../../icons/localities.svg';
 import { ReactComponent as Map } from '../../icons/map.svg';
+
 import { ReactComponent as Merchant } from '../../icons/merchant.svg';
 import { ReactComponent as Stores } from '../../icons/stores.svg';
 import { ReactComponent as Traffic } from '../../icons/traffic.svg';
@@ -428,6 +434,7 @@ const ConsoleIcons = {
     'administration-tool': AdministrationTool,
     agenda: Agenda,
     'alphabetical-order': AlphabeticalOrder,
+    'alphabetical-order-reversed': AlphabeticalOrdedReversef,
     'arrow-bottom': ArrowBotton,
     'arrow-left': ArrowLeft,
     'arrow-right': ArrowRight,
@@ -442,6 +449,7 @@ const ConsoleIcons = {
     charts: Charts,
     check: Check,
     clock: Clock,
+    'clock-reversed': ClockReversed,
     close: Close,
     code: Code,
     company: Company,
@@ -451,6 +459,7 @@ const ConsoleIcons = {
     delete: Delete,
     documentation: Documentation,
     dollar: Dollar,
+    dot: Dot,
     'dot-fill': DotFill,
     edit: Edit,
     email: Email,
@@ -493,7 +502,10 @@ const ConsoleIcons = {
     support: Support,
     switch: Switch,
     team: Team,
+    time: Time,
     user: User,
+    'view-card': ViewCard,
+    'view-list': ViewList,
     warning: Warning,
     woosmap: Woosmap,
 
@@ -624,12 +636,12 @@ const Icons = {
 
 class Icon extends Component {
     render() {
-        const { icon, size, className, title, testId } = this.props;
+        const { icon, size, className, isFill, 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={cl('icon', className)}
+                className={classes}
                 data-testid={`${testId}-${icon}`}
                 width={size}
                 height={size}
@@ -640,16 +652,18 @@ class Icon extends Component {
 }
 
 Icon.defaultProps = {
-    size: 24,
+    size: 22,
     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-story.styl

@@ -22,8 +22,9 @@
 			stroke $secondary
 			stroke-linecap round
 			stroke-linejoin round
+			&:not(.icon--fill)
+				fill none
 			&--fill
 				stroke-width: 0
-				fill $secondary
-			&:not(.icon--social-github):not(.icon--social-linkedin):not(.icon--social-facefook):not(.icon--big-commerce):not(.icon--fill)
-				fill: none
+				stroke $secondary
+			

package/src/components/Input/Input.js

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

package/src/components/Label/Label.js

@@ -41,7 +41,14 @@ export default class Label extends Component {
                     </span>
                 )}
                 {closable && (
-                    <Button type="link-flex" iconSize={12} icon="close" onClick={closeCb} testId={`${testId}-button`} />
+                    <Button
+                        type="link-flex"
+                        className="icon--thicker"
+                        iconSize={10}
+                        icon="close"
+                        onClick={closeCb}
+                        testId={`${testId}-button`}
+                    />
                 )}
             </span>
         );

package/src/components/Label/Label.styl

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

package/src/components/Modal/Modal.styl

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

package/src/components/ServiceMessage/ServiceMessage.styl

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

package/src/components/SnackBar/SnackBar.styl

@@ -22,7 +22,7 @@
 	&--info
 		background-color $info
 	.icon
-		fill $light
+		stroke $light
 	&__text
 		textShadow()
 		font-size $fontSize + .1

package/src/components/Stepper/Stepper.styl

@@ -1,5 +1,5 @@
 .stepper
 	flexMiddle()
 	&--current
-		fill $primary
+		stroke $primary
 

package/src/icons/alphabetical-order-reversed.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><line x1="16.744" y1="17.315" x2="16.744" y2="6.54"/><polyline points="20.382 14.949 16.781 18.55 13.17 14.94"/><polyline points="3.62 19.289 6.202 12.924 8.706 19.289"/><line x1="4.267" y1="17.694" x2="8.079" y2="17.694"/><polyline points="3.62 4.711 8.706 4.711 3.618 9.799 8.684 9.799"/></svg>

package/src/icons/clock-reversed.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polyline points="16.137 10.357 12.037 13.103 7.54 8.557"/><polyline points="14.678 17.975 19.248 17.975 19.248 22.431"/><path d="m21.177,13.911c.128-.617.195-1.256.195-1.911,0-5.176-4.196-9.372-9.372-9.372S2.628,6.824,2.628,12s4.196,9.372,9.372,9.372c2.911,0,5.513-1.328,7.232-3.41"/></svg>

package/src/icons/clock.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polyline points="16.137 10.357 12.037 13.103 7.54 8.557"/><circle cx="12" cy="12" r="9.372"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polyline points="9.322 17.975 4.752 17.975 4.752 22.431"/><polyline points="16.137 10.357 12.037 13.103 7.54 8.557"/><path d="m2.823,13.911c-.128-.617-.195-1.256-.195-1.911C2.628,6.824,6.824,2.628,12,2.628s9.372,4.196,9.372,9.372-4.196,9.372-9.372,9.372c-2.911,0-5.513-1.328-7.232-3.41"/></svg>

package/src/icons/dot.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12.174" cy="12" r="3.231"/></svg>

package/src/icons/time.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polyline points="16.137 10.357 12.037 13.103 7.54 8.557"/><circle cx="12" cy="12" r="9.372"/></svg>

package/src/icons/view-card.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="2" y="4.841" width="20" height="14.318" rx="3.771" ry="3.771"/><line x1="5.914" y1="8.57" x2="18.449" y2="8.57"/><line x1="5.914" y1="11.64" x2="14.949" y2="11.64"/><circle cx="6.592" cy="15.049" r=".339"/><circle cx="9.192" cy="15.049" r=".339"/><circle cx="11.793" cy="15.049" r=".339"/></svg>

package/src/icons/view-list.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="2" y="6.047" width="19.389" height="4.527" rx="2.263" ry="2.263"/><rect x="2" y="13.103" width="19.389" height="4.527" rx="2.263" ry="2.263"/><line x1="16.315" y1="8.31" x2="4.573" y2="8.31"/><line x1="4.573" y1="15.366" x2="10.056" y2="15.366"/></svg>

package/src/styles/console/button.styl

@@ -21,7 +21,7 @@
 			&.btn--loading
 				padding 0
 				.icon
-					sq(2.4)
+					sq(2.2)
 			&.btn--small
 				buttonSmall()
 				width $buttonHeightSmall
@@ -36,7 +36,7 @@
 					&:hover
 						background-color $primary
 						.icon
-							fill $light
+							stroke $light
 				&.btn--loading
 					&:hover
 						background-color $primary
@@ -46,13 +46,13 @@
 						background-color transparent
 						border-color $inputBorderColor
 						.icon
-							fill $secondary
+							stroke $secondary
 			&.btn--important
 				&:disabled
 					&:hover
 						background-color $error
 						.icon
-							fill $light
+							stroke $light
 			&.btn--has-icon
 				&:not(.btn--mini):not(.btn--small):not(.btn--large)
 					mbi(.4)
@@ -66,13 +66,13 @@
 		textShadow()
 		color $light
 		.icon
-			fill $light
+			stroke $light
 			trans()
 		&.btn--loading:not(.btn--mini):not(.btn--small):not(.btn--large)
 			disableHoverEffect()
 			.icon
 				margin-right .3rem
-				sq(2.2)
+				sq(2)
 		&.btn--has-icon
 			&:not(.btn--mini):not(.btn--small):not(.btn--large)
 				mbi(.4)
@@ -98,7 +98,7 @@
 		background-color $light
 		border .1rem solid $inputBorderColor
 		.icon
-			fill $secondary
+			stroke $secondary
 			trans()
 		&.btn--has-icon
 			&:not(.btn--mini):not(.btn--small):not(.btn--large)
@@ -117,7 +117,7 @@
 					cursor default
 					border-color $inputBorderColor
 					.icon
-						fill $secondary
+						stroke $secondary
 		&:disabled
 			opacity .4
 			cursor default
@@ -129,7 +129,7 @@
 						color $secondary
 						border-color $inputBorderColor
 						.icon
-							fill $secondary
+							stroke $secondary
 	&--transparent
 		btn()
 		background-color transparent
@@ -148,11 +148,11 @@
 				flex-shrink 0
 			&:hover
 				.icon
-					fill $light
+					stroke $light
 		&:hover
 			color $secondary
 			.icon
-				fill $light
+				stroke $light
 		&:disabled
 			opacity .3
 			&:hover
@@ -160,14 +160,14 @@
 				color $secondary
 				background-color transparent
 				.icon
-					fill $secondary
+					stroke $secondary
 	&--inverse
 		btn()
 		background-color transparent
 		border .1rem solid $light
 		color $light
 		.icon
-			fill $light
+			stroke $light
 		&.btn--has-icon
 			&:not(.btn--mini):not(.btn--small):not(.btn--large)
 				mbi(.4)
@@ -179,7 +179,7 @@
 			border-color $success
 			color $light
 			.icon
-				fill $light
+				stroke $light
 		&:disabled
 			opacity .3
 			&:hover
@@ -187,7 +187,7 @@
 				border-color $success
 				color $light
 				.icon
-					fill $light
+					stroke $light
 	&--dropdown-item
 		flexBtn()
 		ellipsis()
@@ -209,12 +209,12 @@
 		&--important
 			color $error
 			.icon
-				fill $error
+				stroke $error
 		&:disabled
 			color $secondary40
 			cursor default
 			.icon
-				fill $secondary40
+				stroke $secondary40
 			&:hover
 				background-color transparent
 				cursor default
@@ -238,7 +238,7 @@
 			text-decoration underline
 			color $primary
 			.icon
-				fill $primary
+				stroke $primary
 		&:disabled
 			cursor default
 			opacity .3
@@ -247,15 +247,15 @@
 				opacity .3
 				text-decoration underline
 				.icon
-					fill inherit
+					stroke inherit
 		.label &
 			&:hover
 				.icon
-					fill $light
+					stroke $light
 		.label.label--white &
 			&:hover
 				.icon
-					fill $secondary
+					stroke $secondary
 		&.btn--icon
 			padding 0
 			text-decoration none
@@ -312,13 +312,13 @@
 			color $primary
 			text-decoration none
 			.icon
-				fill $primary
+				stroke $primary
 		&:disabled
 			&:hover
 				color $primary
 				text-decoration none
 				.icon
-					fill $primary
+					stroke $primary
 	&--link
 	&--link-flex
 		text-decoration underline
@@ -326,31 +326,31 @@
 			color $secondary-medium40
 			.icon
 				trans()
-				fill $secondary-medium40
+				stroke $secondary-medium40
 			&:hover
 				color $primary
 				.icon
-					fill $primary
+					stroke $primary
 	&--link-primary
 		color $primary
 		.icon
-			fill $primary
+			stroke $primary
 		&:disabled
 			&:hover
 				color $primary
 				text-decoration none
 				.icon
-					fill $primary
+					stroke $primary
 	&--link-info
 	&--link-flex-info
 		color $info
 		.icon
-			fill $info
+			stroke $info
 		&:hover
 			color $primary
 			text-decoration underline
 			.icon
-				fill $primary
+				stroke $primary
 	&--link-info
 	&--link-flex-info
 	&--link-flex
@@ -373,7 +373,7 @@
 				&.btn--important
 					background-color $error
 		.icon
-			sq(2.2)
+			sq(2)
 	&--switch
 		btn()
 		color $secondary-medium
@@ -394,7 +394,7 @@
 			border-color $secondary
 			background-color $secondary
 			.icon
-				fill $light
+				stroke $light
 			&:hover
 				background-color $secondary
 	&--group
@@ -417,7 +417,7 @@
 			border-color $secondary
 			background-color $secondary
 			.icon
-				fill $light
+				stroke $light
 			&:hover
 				background-color $secondary
 			&:disabled
@@ -425,18 +425,18 @@
 				border-color $secondary-medium15
 				color $light70
 				.icon
-					fill $light70
+					stroke $light70
 		&:disabled:not(.active)
 			color $secondary30
 			cursor default
 			.icon
-				fill $secondary30
+				stroke $secondary30
 			&:hover
 				border-color $inputBorderColor
 				color $secondary30
 				background-color transparent
 				.icon
-					fill $secondary30
+					stroke $secondary30
 		&-container
 			flexMiddle()
 			.btn
@@ -482,7 +482,7 @@
 		position relative
 		.icon
 			flex-shrink 0
-			fill $secondary-medium60
+			stroke $secondary-medium60
 			display none
 		.btn__label
 			ellipsis()
@@ -510,7 +510,7 @@
 			font-weight 700
 			color $tabBtnActive
 			.icon
-				fill $secondary
+				stroke $secondary
 			&:after
 				width 100%
 			&:hover
@@ -520,7 +520,7 @@
 			color $error
 			position relative
 			.icon
-				fill $error
+				stroke $error
 			&:before
 				content ''
 				position absolute
@@ -592,18 +592,18 @@
 		flexAxis()
 		sq($sidebarButtonSize)
 		.icon
-			fill $light
+			stroke $light
 		&:hover
 			background-color $dark15
 			.icon
-				fill $light
+				stroke $light
 		&.active
 			cursor default
 			background-color $dark20
 			&:hover
 				background-color $dark20
 				.icon
-					fill $light
+					stroke $light
 	&--notification
 		position relative
 		padding 0 .6rem !important
@@ -665,7 +665,7 @@
 		buttonLarge()
 		&:not(.btn--custom-icon-size)
 			.icon
-				sq(3.2)
+				sq(3)
 		&:not(.btn--icon)
 			.icon
 				margin-right .6rem
@@ -675,7 +675,10 @@
 					padding-left $padding
 					disableHoverEffect()
 					.icon
-						sq(3.2)
+						sq(3)
+	.icon--thicker
+		.icon
+			stroke-width .16rem
 @media screen and (max-width 720px)
 	.btn
 		&--tab

package/src/styles/console/icon.styl

@@ -3,8 +3,10 @@
 	stroke $secondary
 	stroke-linecap round
 	stroke-linejoin round
+	stroke-width .12rem
+	&:not(.icon--fill)
+		fill: none
 	&--fill
 		stroke-width: 0
 		fill $secondary
-	&:not(.icon--social-github):not(.icon--social-linkedin):not(.icon--social-facefook):not(.icon--big-commerce):not(.icon--fill)
-		fill: none
+	

package/src/styles/console/input.styl

@@ -19,7 +19,7 @@ input
 		margin .5rem 0 .5rem 0
 	&--iconed
 		.icon
-			fill $inputBorderColor
+			stroke $inputBorderColor
 			position absolute
 			left 1rem
 			top .7rem

package/src/styles/console/mixins.styl

@@ -51,7 +51,7 @@ hover()
 			background-color $buttonHover
 			color $light
 			.icon
-				fill $light
+				stroke $light
 disableHoverEffect()
 	&:hover
 		background-color $primary

package/.idea/encodings.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="Encoding">
-    <file url="PROJECT" charset="UTF-8" />
-  </component>
-</project>

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,18 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
-    <inspection_tool class="PyPackageRequirementsInspection" enabled="true" level="WARNING" enabled_by_default="true">
-      <option name="ignoredPackages">
-        <value>
-          <list size="4">
-            <item index="0" class="java.lang.String" itemvalue="Fabric" />
-            <item index="1" class="java.lang.String" itemvalue="PyYAML" />
-            <item index="2" class="java.lang.String" itemvalue="Jinja2" />
-            <item index="3" class="java.lang.String" itemvalue="github3.py" />
-          </list>
-        </value>
-      </option>
-    </inspection_tool>
-  </profile>
-</component>

package/.idea/inspectionProfiles/profiles_settings.xml

@@ -1,6 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <settings>
-    <option name="USE_PROJECT_PROFILE" value="false" />
-    <version value="1.0" />
-  </settings>
-</component>

package/.idea/misc.xml

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.9" project-jdk-type="Python SDK" />
-</project>

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/ui.iml" filepath="$PROJECT_DIR$/.idea/ui.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/prettier.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="PrettierConfiguration">
-    <option name="myRunOnReformat" value="true" />
-  </component>
-</project>

package/.idea/ui.iml

@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="PYTHON_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$" />
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-  <component name="TemplatesService">
-    <option name="TEMPLATE_FOLDERS">
-      <list>
-        <option value="$MODULE_DIR$/node_modules/@storybook/core/dist/server/templates" />
-      </list>
-    </option>
-  </component>
-</module>

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>