- upgrade Extensions page;

includes/admin/assets/css/um-admin-dashboard.css

@@ -1,97 +1,180 @@
-#um-extensions-wrap a.plugin-image, 
-#um-extensions-wrap a.plugin-image img {
-	max-width: 100%;
-	display: block;
+#um-extensions-wrap #the-list {
+	margin: 0;
+	width: 100%;
+	display: grid;
+	grid-template-rows: auto 1fr;
+	grid-template-columns: repeat(3, 1fr);
+	grid-gap: 10px;
+	grid-auto-rows: minmax(max-content, auto);
+	-ms-grid-template-rows: auto 1fr;
+	-ms-grid-template-columns: repeat(3, 1fr);
+	-ms-grid-gap: 10px;
+	-ms-grid-auto-rows: minmax(max-content, auto);
+	align-items: center;
 }
 
 #um-extensions-wrap .plugin-card {
-    width: calc( 33% - 8px );
-	clear: none !important;
-	margin-right: 8px !important;
-	margin-left: 0 !important;
+	padding: 20px;
+	display: flex;
+	flex-direction: column;
+	flex-wrap: nowrap;
+	justify-content: flex-start;
+	align-items: stretch;
+	width: 100%;
+	margin: 0;
 }
 
-
-#um-extensions-wrap .plugin-image img {
-	display: inline-block;
-	width: 70px;
-	margin: auto;
-	/* padding-top: 40px; */
-	border-radius: 500px;
+#um-extensions-wrap .plugin-image-wrapper {
+	color: #fff;
 	height: 70px;
-	padding: 5px;
-	background: #fff;
-	box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
-	margin-top: 20px;
+	width: 70px;
+	margin: 0 auto;
+	border-radius: 60px;
+	box-shadow: 0 2px 9px rgb(50 50 93 / 21%);
+	border: solid 4px #fff;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	overflow: hidden;
+}
+
+#um-extensions-wrap .plugin-image-wrapper a {
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	background-color: #7856ff;
+}
+
+#um-extensions-wrap a.plugin-image.svg-image {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	flex-wrap: nowrap;
+}
+
+#um_bbpress_image {
+	background-color: #fff !important;
+	filter: none !important;
+	width: 70px !important;
+}
+
+#um_mycred_image {
+	background-color: #fff;
+}
+
+#um_groups_image,
+#um_profile-tabs_image,
+#um_user-tags_image,
+#um_friends_image,
+#um_user-reviews_image,
+#um_verified-users_image,
+#um_private-content_image,
+#um_online-users_image {
+	width: 36px !important;
+}
+
+#um_notices_image,
+#um_social-activity_image,
+#um_profile-completeness_image,
+#um_private-messages_image,
+#um_user-photos_image,
+#um_terms-conditions_image {
+	width: 29px !important;
+}
+
+#um_social-login_image {
+	width: 28px !important;
+}
+
+#um_real-time-notifications_image,
+#um_user-notes_image {
+	width: 26px !important;
+}
+
+#um_followers_image,
+#um_user-locations_image {
+	width: 32px !important;
+}
+
+#um_user-bookmarks_image {
+	width: 23px !important;
+}
+
+#um-extensions-wrap a.plugin-image.svg-image img {
+	filter: invert(1);
+	background-color: transparent;
+	width: 38px;
+	height: auto;
+}
+
+#um-extensions-wrap a.plugin-image,
+#um-extensions-wrap a.plugin-image img {
+	display: block;
+}
+
+#um-extensions-wrap .plugin-image:not(.svg-image) img {
+	width: 70px;
+	margin: 0;
+	height: 70px;
+	padding: 0;
+}
+
+#um-extensions-wrap .plugin-card-top {
+	margin: 0;
+	padding: 20px 0 0 0;
+	width: 100%;
+	min-height: 100px;
 }
 
 #um-extensions-wrap .plugin-card-top h3 {
 	text-align: center;
+	margin: 0 0 20px 0;
+	padding: 0;
 }
 
 #um-extensions-wrap .plugin-card-top .desc {
 	text-align: center;
 	margin: 0 !important;
-	padding: 10px 0 0 0 !important;
+	padding: 0 !important;
 }
 
-#um-extensions-wrap .action-links {
-	margin: 0 !important;
-	padding: 20px 0 0 0 !important;
-	position: static;
+#um-extensions-wrap .plugin-action-links {
+	padding: 20px 0 0 0;
 	width: 100%;
-}
-
-#um-extensions-wrap .action-links ul {
-	margin: 0 0 10px 0 !important;
-	width: 100%;
-}
-
-#um-extensions-wrap .action-links ul li {
-	display: inline;
-	float: left;
-	clear: none;
-	line-height: 28px;
-	margin: 0;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: baseline;
+	flex-wrap: nowrap;
 }
 
 
-@media (max-width: 992px) {
-	#um-extensions-wrap .plugin-card {
-		width: calc( 50% - 8px );
-	}
-}
-
-@media (max-width: 782px) {
-	#um-extensions-wrap .plugin-card {
-		width: calc( 100% - 8px );
-	}
-}
-
-
-
-#um-extensions-wrap .action-links ul li:last-child {
-	float: right;
-}
-
-
-#um-extensions-wrap .plugin-card-top {
-    min-height: 140px;
-}
-
-@media screen and (max-width: 782px) {
-	#um-extensions-wrap .plugin-card {
-		width: 100%;
-	}
-
+@media (max-width: 1152px) {
 	#um-extensions-wrap .plugin-card-top {
 		min-height: 120px;
 	}
 }
 
-#um-extensions-wrap .plugin-card .name,
-#um-extensions-wrap .plugin-card .desc {
-	margin-left: 0;
+@media (max-width: 992px) {
+	#um-extensions-wrap #the-list {
+		grid-template-columns: repeat(2, 1fr);
+		-ms-grid-template-columns: repeat(2, 1fr);
+	}
+}
+
+@media (max-width: 782px) {
+	#um-extensions-wrap #the-list {
+		grid-template-columns: repeat(1, 1fr);
+		-ms-grid-template-columns: repeat(1, 1fr);
+	}
+}
+
+@media screen and (max-width: 782px) {
+	#um-extensions-wrap .plugin-card-top {
+		min-height: 80px;
+	}
 }
 
 #um-metaboxes-general h1 sup {
@@ -209,4 +292,4 @@
 	color: #777 !important;
 	font-size: 22px !important;
 }
-.um-admin-dash-share a:hover {color: #0085ba !important}
+.um-admin-dash-share a:hover {color: #0085ba !important}