@finsemble/finsemble-ui 7.0.1 → 7.1.0

package/react/assets/css/appCatalog.css

@@ -11,8 +11,8 @@ body.app-catalog-body {
 
 body.app-catalog-body {
 	overflow: hidden;
-	margin-left: 0px;
-	margin-right: 0px;
+	margin-left: 0;
+	margin-right: 0;
 }
 
 #AppCatalog-tsx {
@@ -22,6 +22,7 @@ body.app-catalog-body {
 .app-catalog {
 	background-color: var(--catalog-background-color);
 	color: var(--catalog-font-color);
+
 	/* background-image: linear-gradient(to top, rgb(60, 76, 88), rgb(48, 61, 71)); */
 	font-family: var(--font-family);
 	font-style: normal;
@@ -30,6 +31,9 @@ body.app-catalog-body {
 	letter-spacing: normal;
 	height: 100%;
 	overflow: auto;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
 }
 
 .app-catalog .market-content {
@@ -49,6 +53,7 @@ body.app-catalog-body {
 	width: 5px;
 	background-color: transparent;
 	border-radius: 3px;
+
 	/* display: none; */
 }
 
@@ -59,7 +64,7 @@ body.app-catalog-body {
 }
 
 .market_content {
-	padding: 0px 5px 25px 5px;
+	padding: 0 5px 25px;
 	font-family: var(--font-family);
 }
 
@@ -88,7 +93,7 @@ body.app-catalog-body {
 	height: 206px;
 	width: 518px;
 	background-color: var(--catalog-background-color);
-	box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.25);
+	box-shadow: 1px 2px 4px 0 rgb(0 0 0 / 25%);
 }
 
 .hero-content .visible-card .app-details {
@@ -97,7 +102,7 @@ body.app-catalog-body {
 	justify-content: space-evenly;
 	align-items: center;
 	align-content: center;
-	color: #ffffff;
+	color: #fff;
 	user-select: none;
 }
 
@@ -181,8 +186,6 @@ body.app-catalog-body {
 	border-radius: 40px;
 	width: 26px;
 	height: 26px;
-	display: flex;
-	justify-content: center;
 	align-items: center;
 	transition: 0.2s background-color;
 }
@@ -203,7 +206,7 @@ body.app-catalog-body {
 	background-color: transparent;
 }
 
-.ff-adp-chevron-left:before {
+.ff-adp-chevron-left::before {
 	padding-right: 5px;
 }
 
@@ -213,7 +216,7 @@ body.app-catalog-body {
 	justify-content: space-evenly;
 	width: 254px;
 	height: 124px;
-	box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.25);
+	box-shadow: 1px 2px 4px 0 rgb(0 0 0 / 25%);
 	background-color: var(--catalog-card-background-color);
 	user-select: none;
 	cursor: pointer;
@@ -225,9 +228,8 @@ body.app-catalog-body {
 	background-color: var(--core-primary-1);
 	box-shadow: none;
 	cursor: default;
-	border-radius: 0px;
-	-moz-user-select: none;
-	-webkit-user-select: none;
+	border-radius: 0;
+	user-select: none;
 }
 
 .app-card-list {
@@ -246,7 +248,7 @@ body.app-catalog-body {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	margin: 0px 10px;
+	margin: 0 10px;
 }
 
 .app-card .app-image {
@@ -271,7 +273,7 @@ body.app-catalog-body {
 	display: flex;
 	background-color: #07ac8b;
 	align-items: center;
-	color: #000000;
+	color: #000;
 	font-family: var(--font-family);
 	font-size: 14px;
 	font-weight: var(--font-weight);
@@ -289,13 +291,13 @@ body.app-catalog-body {
 
 .app-card .app-title {
 	width: 160px;
-	font-family: "OpenSans";
+	font-family: OpenSans;
 	font-size: 14px;
 	font-weight: var(--font-weight);
 	color: var(--catalog-font-color);
 	overflow: hidden;
 	text-overflow: ellipsis;
-	display: -webkit-box;
+	display: box;
 	-webkit-line-clamp: 2;
 	-webkit-box-orient: vertical;
 	padding-left: 3px;
@@ -310,25 +312,6 @@ body.app-catalog-body {
 	height: 20px;
 }
 
-.app-card .row_description .app-description {
-	width: 170px;
-	height: 34px;
-	color: var(--core-primary-5);
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.app-card .row_description .app-description {
-	height: 34px;
-	width: 170px;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	display: -webkit-box;
-	-webkit-line-clamp: 2;
-	-webkit-box-orient: vertical;
-	margin-left: -8px;
-}
-
 .app-card .row_description {
 	display: flex;
 	flex-direction: row;
@@ -343,6 +326,18 @@ body.app-catalog-body {
 	color: var(--core-primary-5);
 }
 
+.app-card .row_description .app-description {
+	width: 170px;
+	height: 34px;
+	color: var(--core-primary-5);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	margin-left: -8px;
+}
+
 .app-card .app-tags {
 	display: flex;
 	flex-direction: row;
@@ -357,7 +352,7 @@ body.app-catalog-body {
 
 .app-card .app-tag-names {
 	width: 170px;
-	font-family: "OpenSans";
+	font-family: OpenSans;
 	font-weight: 600;
 	color: var(--core-primary-5);
 	font-size: 10px;
@@ -397,13 +392,6 @@ body.app-catalog-body {
 	padding-top: 3px;
 }
 
-.app-catalog {
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	background-color: var(--catalog-background-color);
-}
-
 .carousel-main {
 	display: flex;
 	flex-direction: column;
@@ -421,9 +409,13 @@ body.app-catalog-body {
 }
 
 .carousel-main .carousel-content {
+	/* stylelint-disable-next-line declaration-no-important */
 	display: flex !important;
+	/* stylelint-disable-next-line declaration-no-important */
 	flex-direction: row !important;
+	/* stylelint-disable-next-line declaration-no-important */
 	justify-content: space-between !important;
+	/* stylelint-disable-next-line declaration-no-important */
 	align-items: center !important;
 }
 
@@ -458,7 +450,7 @@ body.app-catalog-body {
 	justify-content: space-between;
 	align-items: center;
 	margin-bottom: 6px;
-	padding: 0px 38px;
+	padding: 0 38px;
 }
 
 .carousel-header .see-more {
@@ -478,18 +470,18 @@ body.app-catalog-body {
 }
 
 .search-main .button-label {
-	padding: 0px 5px;
+	padding: 0 5px;
 }
 
 .app-catalog .ff-search {
-	padding: 8px 10px 0px 5px;
+	padding: 8px 10px 0 5px;
 }
 
 .search-main {
 	padding: 6px 16px;
 	position: sticky;
 	z-index: 2147483647;
-	top: 0px;
+	top: 0;
 	background-color: var(--catalog-background-color);
 }
 
@@ -523,31 +515,39 @@ body.app-catalog-body {
 	100% {opacity: 0; visibility: hidden;}
 } */
 
-@keyframes fadeIn {
+@keyframes fade-in {
 	0% {
 		opacity: 0.2;
 	}
+
 	20% {
 		opacity: 0.4;
 	}
+
 	30% {
 		opacity: 0.6;
 	}
+
 	40% {
 		opacity: 1;
 	}
+
 	60% {
 		opacity: 1;
 	}
+
 	70% {
 		opacity: 0.6;
 	}
+
 	80% {
 		opacity: 0.4;
 	}
+
 	95% {
 		opacity: 0.2;
 	}
+
 	100% {
 		opacity: 0;
 	}
@@ -570,7 +570,7 @@ body.app-catalog-body {
 	right: 0;
 	margin: auto;
 	position: absolute;
-	animation: fadeIn 1.5s linear;
+	animation: fade-in 1.5s linear;
 	cursor: default;
 	pointer-events: none;
 }
@@ -616,7 +616,7 @@ body.app-catalog-body {
 	height: 24px;
 	border-radius: 12px;
 	color: var(--catalog-font-color);
-	padding: 0px 5px 0px 9px;
+	padding: 0 5px 0 9px;
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -702,14 +702,13 @@ body.app-catalog-body {
 
 .label-bar {
 	display: flex;
-	flex-direction: row;
+	flex-flow: row wrap;
 	justify-content: flex-start;
-	flex-wrap: wrap;
 	margin-top: 8px;
 }
 
 .app-results {
-	padding: 0px 32px;
+	padding: 0 32px;
 	display: flex;
 	justify-content: flex-start;
 }
@@ -737,15 +736,15 @@ body.app-catalog-body {
 }
 
 .app-showcase .app-warning .app-warning-text {
-	padding: 0px 5px;
+	padding: 0 5px;
 }
 
 .app-showcase .header {
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
-	padding: 5px 0px;
-	margin: 0px 49px;
+	padding: 5px 0;
+	margin: 0 49px;
 }
 
 .app-showcase .header .icon-title-container {
@@ -778,7 +777,7 @@ body.app-catalog-body {
 
 .app-showcase .header .action-button-container .remove-button {
 	height: 16px;
-	padding: 5px 0px;
+	padding: 5px 0;
 	cursor: pointer;
 }
 
@@ -810,6 +809,7 @@ body.app-catalog-body {
 
 .app-showcase .header .action-button.remove:hover {
 	color: var(--button-negative-background-hover-color);
+	background-color: var(--accent-negative-1);
 }
 
 .remove-button {
@@ -846,12 +846,12 @@ body.app-catalog-body {
 	flex-direction: row;
 	justify-content: space-between;
 	align-items: center;
-	padding: 5px 0px;
+	padding: 5px 0;
 	user-select: none;
 }
 
 .app-showcase .image-carousel-image {
-	padding: 5px 0px;
+	padding: 5px 0;
 	height: 125px;
 	width: 125px;
 }
@@ -861,12 +861,12 @@ body.app-catalog-body {
 	flex-direction: column;
 	justify-content: flex-start;
 	font-size: var(--catalog-font-size-text);
-	padding: 5px 0px;
-	margin: 0px 28px 10px 28px;
+	padding: 5px 0;
+	margin: 0 28px 10px;
 }
 
 .app-notes p {
-	margin: 0px;
+	margin: 0;
 }
 
 .app-showcase a {
@@ -925,7 +925,7 @@ body.app-catalog-body {
 	flex-direction: row;
 	justify-content: space-between;
 	font-size: 12px;
-	padding: 5px 0px;
+	padding: 5px 0;
 	margin-left: 28px;
 }
 
@@ -950,8 +950,7 @@ body.app-catalog-body {
 
 .app-showcase .tags {
 	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
+	flex-flow: row wrap;
 	margin-top: 2px;
 }
 
@@ -960,8 +959,8 @@ body.app-catalog-body {
 	border-radius: 12px;
 	background-color: var(--tag-background-color);
 	user-select: none;
-	margin: 0px 4px 4px 0px;
-	padding: 1px 8px 0px 8px;
+	margin: 0 4px 4px 0;
+	padding: 1px 8px 0;
 	cursor: pointer;
 	transition: 0.2s all;
 }
@@ -982,7 +981,7 @@ body.app-catalog-body {
 	left: 0;
 	width: 100%;
 	height: 100%;
-	background: rgba(0, 0, 0, 0.6);
+	background: rgb(0 0 0 / 60%);
 }
 
 .modal-main {
@@ -1012,10 +1011,6 @@ body.app-catalog-body {
 	background-color: var(--accent-negative);
 }
 
-.app-showcase .header .action-button.remove:hover {
-	background-color: var(--accent-negative-1);
-}
-
 .app-showcase .header .action-button.disabled {
 	background-color: transparent;
 	color: var(--button-disabled-color);

package/react/assets/css/authentication.css

@@ -26,7 +26,7 @@
 
 /* Override defaults from dialogs.css which assumes flex placement */
 .fsbl-button {
-	margin: 20px 0px;
+	margin: 20px 0;
 	display: block;
 	flex-direction: initial;
 }
@@ -34,7 +34,7 @@
 .fsbl-auth-top {
 	display: flex;
 	justify-content: space-between;
-	padding: 10px 10px 5px 0px;
+	padding: 10px 10px 5px 0;
 	width: 95%;
 }
 
@@ -53,7 +53,7 @@
 
 /* Override default body.dialog settings */
 body.authentication .fsbl-auth-input {
-	padding: 6px 0px;
+	padding: 6px 0;
 	margin-top: 3px;
 }
 
@@ -73,6 +73,7 @@ body.authentication {
 	background: var(--dialog-background-color);
 }
 
+/* stylelint-disable-next-line selector-no-vendor-prefix */
 ::-webkit-input-placeholder {
 	text-align: left;
 }

package/react/assets/css/button.css

@@ -70,7 +70,7 @@
 
 .finsemble-dropdown-action__btn {
 	align-items: center;
-	background-color: var(--core-primary-3);
+	background-color: var(--accent-primary);
 	border-radius: 5px;
 	cursor: pointer;
 	display: flex;
@@ -94,21 +94,14 @@
 	white-space: nowrap;
 	width: 100%;
 	padding: 4px;
+	margin: auto;
 	color: var(--font-color);
 }
 
-.finsemble-dropdown-action__btn {
-	background-color: var(--accent-primary);
-}
-
 .finsemble-dropdown-action__btn:hover {
 	background-color: var(--accent-primary-1);
 }
 
-.finsemble-dropdown-action__btn span.btn-label {
-	margin: auto;
-}
-
 .finsemble-dropdown-action__btn-options {
 	background-color: var(--accent-primary-1);
 	border-radius: 4px;
@@ -153,7 +146,7 @@
 	content: "";
 	display: inline-block;
 	height: 19px;
-	margin: 0px 4px;
+	margin: 0 4px;
 	vertical-align: top;
 	width: 1px;
 }

package/react/assets/css/core/formElements.css

@@ -7,7 +7,7 @@
 .form-group {
 	/* display: flex; */
 	flex-direction: row;
-	margin: 16px 0px;
+	margin: 16px 0;
 	padding-right: 5px;
 	justify-content: center;
 }

package/react/assets/css/core/icons.css

@@ -30,9 +30,10 @@
 }
 
 .icon-avatar-wrapper.entity-with-img {
-	padding-right: 0px;
+	padding-right: 0;
+
 	/* Margin is different for images than for the badges because
-	of their padding and other CSS reasons.*/
+	of their padding and other CSS reasons. */
 	margin-right: 6px;
 }
 

package/react/assets/css/core/notifications.css

@@ -20,7 +20,7 @@
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
-	margin: 0px 8px 6px 8px;
+	margin: 0 8px 6px;
 }
 
 .notification-close {
@@ -53,7 +53,7 @@
 }
 
 .notification-description {
-	margin: 0px 10px;
+	margin: 0 10px;
 }
 
 .notification-logo {

package/react/assets/css/core/windowFrame.css

@@ -7,29 +7,29 @@
 html.groupMask body {
 	background-color: var(--groupMask-background-color);
 	border: 1px solid var(--groupMask-border-color);
-	margin: 0px;
+	margin: 0;
 }
 
-html.groupMask html:before {
-	height: 0px;
+html.groupMask html::before {
+	height: 0;
 }
 
-html.groupMask html:after {
-	width: 0px;
+html.groupMask html::after {
+	width: 0;
 	top: 0;
 	right: 0;
 	bottom: 0;
 }
 
-html.groupMask body:before {
-	height: 0px;
+html.groupMask body::before {
+	height: 0;
 	right: 0;
 	bottom: 0;
 	left: 0;
 }
 
-html.groupMask body:after {
-	width: 0px;
+html.groupMask body::after {
+	width: 0;
 	top: 0;
 	bottom: 0;
 	left: 0;

package/react/assets/css/dashbar.css

@@ -69,7 +69,7 @@
 	height: auto;
 	border: 1px solid white;
 	cursor: pointer;
-	margin: 0 10px 0 10px;
+	margin: 0 10px;
 }
 
 .add-dashbar-item-button span {