RI-510 Review v2 admin layout

assets/css/admin/altadmintheme-v2/components/card/card.less

@@ -18,10 +18,17 @@
 
 .c-card__header-wrapper-one {
   display: flex;
-  gap: @spacing-2;
+  flex-direction: column;
+  gap: @spacing-1;
   min-width: 0;
 }
 
+.c-card__header-icon-title {
+  align-items: center;
+  display: flex;
+  gap: @spacing-2;
+}
+
 .c-card__header-icon {
   .size(20);
   color: @icon-color-highlight;

assets/css/admin/altadmintheme-v2/components/progress-bar/progress-bar.less

@@ -3,6 +3,36 @@
 
 .c-progress-bar {
   margin-bottom: @spacing-3;
+
+  &--skin-primary {
+    .c-progress-bar__fill {
+      background: @color-primary-100;
+    }
+  }
+
+  &--skin-secondary {
+    .c-progress-bar__fill {
+      background: @color-secondary-100;
+    }
+  }
+
+  &--skin-tertiary {
+    .c-progress-bar__fill {
+      background: @color-tertiary-100;
+    }
+  }
+
+  &--skin-warning {
+    .c-progress-bar__fill {
+      background: @color-warning-100;
+    }
+  }
+
+  &--skin-danger {
+    .c-progress-bar__fill {
+      background: @color-error-100;
+    }
+  }
 }
 
 .c-progress-bar__track {
@@ -18,18 +48,6 @@
   transition: width @transition-normal ease;
 }
 
-.c-progress-bar--skin-primary .c-progress-bar__fill {
-  background: @color-primary-100;
-}
-
-.c-progress-bar--skin-secondary .c-progress-bar__fill {
-  background: @color-secondary-100;
-}
-
-.c-progress-bar--skin-tertiary .c-progress-bar__fill {
-  background: @color-tertiary-100;
-}
-
 .c-progress-bar__footer {
   display: flex;
   justify-content: space-between;

assets/css/admin/altadmintheme-v2/pages/onboarding-checklist/onboarding-checklist.less

@@ -0,0 +1,61 @@
+@import url("../../global/variables.less");
+@import url("../../global/mixins.less");
+
+.p-onboarding-checklist {
+  display: flex;
+  flex-direction: column;
+  gap: @spacing-12;
+  margin: 0 auto;
+  max-width: @screen-md;
+  padding-top: @spacing-12;
+  width: 100%;
+}
+
+.p-onboarding-checklist__header {
+  margin: 0 auto;
+  max-width: @screen-sm;
+  text-align: center;
+}
+
+.p-onboarding-checklist__header-title {
+  color: @color-white !important;
+  font-family: @font-family-primary !important;
+  font-size: @font-size-5xl !important;
+  font-weight: @font-weight-bold !important;
+}
+
+.p-onboarding-checklist__header-description {
+  color: @color-white;
+  font-size: @font-size-lg !important;
+  margin-top: @spacing-6;
+}
+
+.p-onboarding-checklist__list {
+  margin: 0 auto;
+  max-width: @screen-md;
+  width: 100%;
+}
+
+.p-onboarding-checklist__skip {
+  text-align: center;
+}
+
+.p-onboarding-checklist__skip-link {
+  border-bottom: solid 1px @color-neutral-20;
+  color: @text-color !important;
+  display: inline-flex;
+  padding-bottom: @spacing-0-5;
+  transition: @transition-normal;
+
+  &:hover {
+    text-decoration: none !important;
+    border-color: @color-secondary-100 !important;
+  }
+}
+
+.p-onboarding-checklist__notice {
+  color: @text-color-muted;
+  font-size: @font-size-xs;
+  margin-top: @spacing-6;
+  text-align: center;
+}

assets/css/admin/altadmintheme-v2/structure/main.less

@@ -6,6 +6,18 @@
   display: flex !important;
   flex-direction: column;
   flex: 1;
+
+  .dashboard-onboardingChecklist && {
+    background: linear-gradient(
+      to bottom,
+      @color-primary-100 0%,
+      @color-primary-100 50%,
+      @color-white 50%,
+      @color-white 100%
+    ) !important;
+    border-top: solid 1px
+      ~"color-mix(in srgb, var(--body-background-color), white 12.5%)";
+  }
 }
 
 .s-main__header {

config/Config.cfc

@@ -68,7 +68,11 @@ component {
 			, "fa-medkit"               = { path = basePath & "/briefcase-medical.svg" }
 			, "fa-pencil"               = { path = basePath & "/pencil.svg" }
 			, "fa-plus"                 = { path = basePath & "/plus.svg" }
+			, "fa-hdd"                  = { path = basePath & "/hard-drive.svg" }
 			, "fa-google-drive"         = { path = basePath & "/hard-drive.svg" }
+			, "fa-google"               = { path = basePath & "/google.svg" }
+			, "fa-dropbox"              = { path = basePath & "/dropbox.svg" }
+			, "fa-windows"              = { path = basePath & "/microsoft.svg" }
 			, "fa-vimeo"                = { path = basePath & "/video.svg" }
 			, "fa-lock"                 = { path = basePath & "/lock.svg" }
 			, "fa-sign-in"              = { path = basePath & "/log-in.svg" }
@@ -80,9 +84,34 @@ component {
 			, "fa-refresh"              = { path = basePath & "/refresh-cw.svg" }
 			, "fa-refresh-cw"           = { path = basePath & "/refresh-cw.svg" }
 			, "fa-tachometer"           = { path = basePath & "/gauge.svg" }
+			, "fa-dashboard"            = { path = basePath & "/layout-dashboard.svg" }
 			, "fa-trash"                = { path = basePath & "/trash.svg" }
 			, "fa-trash-o"              = { path = basePath & "/trash.svg" }
 			, "fa-trash red"            = { path = basePath & "/trash.svg" }
+			, "fa-ban"                  = { path = basePath & "/ban.svg" }
+			, "fa-ban red"              = { path = basePath & "/ban.svg" }
+			, "fa-database"             = { path = basePath & "/database.svg" }
+			, "fa-file-text"            = { path = basePath & "/file-text.svg" }
+			, "fa-file-text-o"          = { path = basePath & "/file-text.svg" }
+			, "fa-hashtag"              = { path = basePath & "/hash.svg" }
+			, "fa-line-chart"           = { path = basePath & "/chart-line.svg" }
+			, "fa-list-ul"              = { path = basePath & "/list.svg" }
+			, "fa-paperclip"            = { path = basePath & "/paperclip.svg" }
+			, "fa-paragraph"            = { path = basePath & "/pilcrow.svg" }
+			, "fa-server"               = { path = basePath & "/server.svg" }
+			, "fa-tag"                  = { path = basePath & "/tag.svg" }
+			, "fa-tags"                 = { path = basePath & "/tags.svg" }
+			, "fa-tools"                = { path = basePath & "/toolbox.svg" }
+			, "fa-users"                = { path = basePath & "/users.svg" }
+			, "fa-play"                 = { path = basePath & "/play.svg" }
+			, "fa-plug"                 = { path = basePath & "/plug.svg" }
+			, "fa-plus-circle"          = { path = basePath & "/circle-plus.svg" }
+			, "fa-share-alt"            = { path = basePath & "/share-2.svg" }
+			, "fa-share-square-o"       = { path = basePath & "/square-arrow-out-up-right.svg" }
+			, "fa-stop"                 = { path = basePath & "/circle-stop.svg" }
+			, "fa-bookmark"             = { path = basePath & "/bookmark.svg" }
+			, "fa-thumbs-down"          = { path = basePath & "/thumbs-down.svg" }
+			, "fa-thumbs-up"            = { path = basePath & "/thumbs-up.svg" }
 			, "fa-user-tie"             = { path = basePath & "/user.svg" }
 			, "fa-user-times"           = { path = basePath & "/user-x.svg" }
 			, "fa-user"                 = { path = basePath & "/user.svg" }

customtags/adminui_card.cfm

@@ -11,19 +11,21 @@
 			<cfif Len(attributes.title) || Len(attributes.titleIcon) || Len(attributes.description) || ArrayLen(attributes.actions)>
 				<div class="c-card__header">
 					<div class="c-card__header-wrapper-one">
-						<cfif Len(attributes.titleIcon)>
-							<cf_adminui_icon class="c-card__header-icon" name="#attributes.titleIcon#" strokeWidth="2" />
+						<cfif Len(attributes.titleIcon) && Len(attributes.title)>
+							<div class="c-card__header-icon-title">
 						</cfif>
-						<cfif Len(attributes.title) || Len(attributes.description)>
-							<div class="c-card__header-title-description">
+								<cfif Len(attributes.titleIcon)>
+									<cf_adminui_icon class="c-card__header-icon" name="#attributes.titleIcon#" strokeWidth="2" />
+								</cfif>
 								<cfif Len(attributes.title)>
 									<span class="c-card__header-title">#encodeForHTML(attributes.title)#</span>
 								</cfif>
-								<cfif Len(attributes.description)>
-									<span class="c-card__header-description">#encodeForHTML(attributes.description)#</span>
-								</cfif>
-							</div>
-						</cfif>
+							<cfif Len(attributes.titleIcon) && Len(attributes.title)>
+								</div>
+							</cfif>
+							<cfif Len(attributes.description)>
+								<span class="c-card__header-description">#encodeForHTML(attributes.description)#</span>
+							</cfif>
 					</div>
 					<cfif ArrayLen(attributes.actions)>
 						<div class="c-card__header-wrapper-two">

services/AdminThemeIconService.cfc

@@ -152,18 +152,29 @@ component {
 			return _notFoundResult();
 		}
 
-		var mapping  = _getIconMapping( arguments.requestedName );
+		var lookupName = arguments.requestedName;
+		var mapping    = _getIconMapping( lookupName );
+
+		// Icon classes are sometimes declared with trailing colour/modifier
+		// classes (e.g. "fa-trash red", "fa-thumbs-up green"). When the full
+		// string isn't mapped, fall back to the first token so the icon still
+		// resolves rather than rendering blank.
+		if ( !Len( Trim( mapping.path ?: "" ) ) && ListLen( lookupName, " " ) > 1 ) {
+			lookupName = ListFirst( lookupName, " " );
+			mapping    = _getIconMapping( lookupName );
+		}
+
 		var filePath = Trim( mapping.path ?: "" );
 		var iconName = "";
 
 		if ( Len( filePath ) ) {
 			iconName = ListFirst( ListLast( Replace( filePath, "\", "/", "all" ), "/" ), "." );
 		} else {
-			if ( !REFindNoCase( "^[a-zA-Z0-9\-_]+$", arguments.requestedName ) ) {
+			if ( !REFindNoCase( "^[a-zA-Z0-9\-_]+$", lookupName ) ) {
 				return _notFoundResult();
 			}
 
-			iconName = arguments.requestedName;
+			iconName = lookupName;
 			filePath = ( iconBasePath ?: "" ) & "/" & iconName & ".svg";
 		}
 

views/admin/layout/pages/onboardingChecklist.cfm

@@ -1,5 +1,5 @@
 <cfscript>
-	event.include( "/css/admin/altadmintheme/pages/onboarding-checklist/" );
+	event.include( "/css/admin/altadmintheme-v2/pages/onboarding-checklist/" );
 </cfscript>
 
 <cfparam name= "args.title"        default = "" />