Regression: Apps and Marketplace UI issues

app/apps/assets/stylesheets/apps.css

@@ -146,6 +146,29 @@
 				font-weight: 500;
 			}
 		}
+
+		&__alert {
+			width: 660px;
+			height: 36px;
+
+			margin-bottom: 4px;
+			padding: 8px 16px;
+
+			border-radius: 4px;
+
+			font-size: 14px;
+			line-height: 20px;
+		}
+
+		&__alert-error {
+			color: #f5455c;
+			background: #ffe9ec;
+		}
+
+		&__alert-warning {
+			color: #b68d00;
+			background: #fff6d6;
+		}
 	}
 
 	.rc-apps-container {
@@ -382,6 +405,42 @@
 			}
 		}
 	}
+
+	&__app-menu-trigger {
+
+		position: relative;
+
+		display: flex;
+		flex: 0 0 auto;
+
+		padding: 0;
+
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+		align-items: center;
+		appearance: none;
+
+		&:active {
+			transform: translateY(2px);
+
+			opacity: 0.9;
+		}
+
+		&:active::before {
+			top: -2px;
+		}
+
+		&::before {
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+
+			content: "";
+			cursor: pointer;
+		}
+	}
 }
 
 @keyframes play90 {

app/apps/client/admin/appManage.html

@@ -1,27 +1,31 @@
-<!-- This page allows for settings to be changed but not all of them are implemented yet -->
 <template name="appManage">
 	{{#with app}}
-		<section class="page-container page-home page-static page-settings rc-apps-marketplace">
+		<section class="page-container page-home page-static page-settings rc-apps-section">
 			{{# header sectionName='App_Details' fixedHeight=true hideHelp=true fullpage=true}}
 				<div class="rc-header__section-button">
-					{{#unless disabled}}
-						<button class="rc-button rc-button--cancel js-cancel-editing">{{_ "Cancel" }}</button>
+					{{#unless isSettingsPristine}}
+						<button class="rc-button rc-button--cancel js-cancel-editing-settings">{{_ "Cancel" }}</button>
 					{{/unless}}
-					<button class="rc-button rc-button--primary js-save {{#if saving}} loading{{/if}}" disabled='{{disabled}}'>{{_ "Save_changes" }}</button>
+					<button class="rc-button rc-button--primary js-save-settings {{#if isSaving}} loading{{/if}}" disabled='{{isSettingsPristine}}'>{{_ "Save_changes" }}</button>
 				</div>
 
 				<div class="rc-header__block rc-header__block-action">
-					<button class="rc-button rc-button--nude js-cancel">{{> icon icon="cross"}}</button>
+					<button class="rc-button rc-button--nude js-close">
+						{{> icon icon="cross"}}
+					</button>
 				</div>
 			{{/header}}
+
 			<div class="content">
 				{{#requiresPermission 'manage-apps'}}
 					{{#if error}}
 						<div class="apps-error error-color">
 							<i class="icon-attention"></i>
 							<p>{{error}}</p>
 						</div>
-					{{else if isReady}}
+					{{else if isLoading}}
+						{{> loading}}
+					{{else}}
 						<div class="rc-apps-details">
 							<div class="rc-apps-container rc-apps-container__header">
 								{{#if iconFileData}}
@@ -92,6 +96,14 @@ <h2 class="rc-apps-details__app-name">{{name}}</h2>
 						</div>
 						<div class="rc-apps-container">
 							<div class="rc-apps-details__content">
+
+								<!-- <div class="rc-apps-details__alert rc-apps-details__alert-warning">
+									Warning message. CTA to see more
+								</div>
+								<div class="rc-apps-details__alert rc-apps-details__alert-error">
+									Failed description message. CTA to see more
+								</div> -->
+
 								{{#if categories}}
 									<div class="rc-apps-details__row rc-apps-details__block">
 										<h2> {{_ "Categories"}} </h2>
@@ -500,8 +512,6 @@ <h2> {{_ "Settings"}} </h2>
 								{{/if}}
 							</div>
 						</div>
-					{{else}}
-						{{> loading}}
 					{{/if}}
 				{{/requiresPermission}}
 			</div>