Jamie style updates nov 15

packages/client/hmi-client/src/assets/css/theme/designer/components/input/_terainput.scss

@@ -16,7 +16,7 @@
 		align-items: center;
 		padding: var(--gap-1) var(--gap-2);
 		background-color: var(--surface-section);
-		border: 1px solid var(--surface-border-alt);
+		border: 1px solid var(--surface-border);
 		border-radius: var(--border-radius);
 		cursor: text;
 		transition: border-color 0.3s ease-in-out;

packages/client/hmi-client/src/components/drilldown/tera-drilldown-preview.vue

@@ -44,13 +44,14 @@ header {
 	overflow-y: auto;
 	padding: var(--gap-4);
 	flex-grow: 1;
+	padding-top: 0;
+	padding-left: 0;
 }
 
 main {
 	display: flex;
 	flex-direction: column;
 	flex-grow: 1;
 	overflow-y: auto;
-	gap: var(--gap-2);
 }
 </style>

packages/client/hmi-client/src/components/drilldown/tera-drilldown.vue

@@ -341,7 +341,7 @@ footer {
 }
 
 :deep(.p-chip .p-chip-text) {
-	font-size: var(--font-body-small);
+	font-size: 13px;
 	margin: var(--gap-0-5);
 }
 

packages/client/hmi-client/src/components/mathml/tera-math-editor.vue

@@ -269,7 +269,6 @@ math-field[disabled] {
 	padding: 10px;
 	align-items: center;
 	width: 99%;
-	margin: 5px;
 	padding-left: 20px;
 	flex-grow: 1;
 }

packages/client/hmi-client/src/components/model/petrinet/tera-initial-entry.vue

@@ -1,15 +1,15 @@
 <template>
 	<div class="initial-entry">
-		<header>
+		<header class="gap-1">
 			<div class="flex">
 				<strong>{{ initialId }}</strong>
 				<span v-if="name" class="ml-1">{{ '| ' + name }}</span>
 				<template v-if="unit">
-					<label class="ml-2">Unit</label>
+					<label class="ml-auto">Unit:</label>
 					<span class="ml-1">{{ unit }}</span>
 				</template>
 				<template v-if="concept">
-					<label class="ml-auto">Concept</label>
+					<label class="ml-6">Concept:</label>
 					<span class="ml-1">{{ concept }}</span>
 				</template>
 			</div>

packages/client/hmi-client/src/components/model/petrinet/tera-initial-table.vue

@@ -7,7 +7,7 @@
 			</template>
 
 			<ul>
-				<li v-for="{ baseInitial, childInitials, isVirtual } in initialList" :key="baseInitial">
+				<li v-for="{ baseInitial, childInitials, isVirtual } in initialList" :key="baseInitial" class="element-card">
 					<!-- Stratified -->
 					<section v-if="isVirtual" class="initial-entry-stratified">
 						<Accordion multiple>
@@ -123,13 +123,20 @@ ul {
 	padding-left: var(--gap-1);
 
 	& li {
-		border-bottom: 1px solid var(--gray-300);
+		border-bottom: 1px solid var(--surface-border-light);
 		list-style: none;
 		margin-bottom: var(--gap-1-5);
 		padding-bottom: var(--gap-1-5);
 	}
 }
 
+.element-card {
+	background-color: var(--surface-0);
+}
+.element-card:hover {
+	background-color: var(--surface-50);
+}
+
 .initial-entry-stratified {
 	border-left: 4px solid var(--surface-300);
 	padding-left: var(--gap-1);

packages/client/hmi-client/src/components/model/petrinet/tera-parameter-entry.vue

@@ -1,16 +1,16 @@
 <template>
 	<div class="parameter-entry flex flex-column flex-1">
-		<header>
+		<header class="gap-1 pt-2 pb-2">
 			<div class="flex">
 				<strong>{{ parameterId }}</strong>
 				<span v-if="name" class="ml-1">{{ '| ' + name }}</span>
 				<template v-if="units">
-					<label class="ml-2">Unit</label>
+					<label class="ml-auto">Unit:</label>
 					<span class="ml-1">{{ units }}</span>
 				</template>
 
 				<template v-if="concept">
-					<label class="ml-auto">Concept</label>
+					<label class="ml-6">Concept:</label>
 					<span class="ml-1">{{ concept }}</span>
 				</template>
 			</div>
@@ -40,7 +40,7 @@
 						option-label="name"
 						option-value="value"
 						:options="distributionTypeOptions()"
-						class="mr-3"
+						class="mr-3 parameter-input"
 					/>
 					<!-- Constant -->
 					<tera-input-number
@@ -54,6 +54,7 @@
 								distribution: formatPayloadFromParameterChange({ value: $event })
 							})
 						"
+						class="parameter-input"
 					/>
 					<!-- Uniform Distribution -->
 					<template v-if="getParameterDistribution(modelConfiguration, parameterId).type === DistributionType.Uniform">
@@ -67,7 +68,7 @@
 									distribution: formatPayloadFromParameterChange({ minimum: $event })
 								})
 							"
-							class="mr-2"
+							class="mr-2 parameter-input"
 						/>
 						<tera-input-number
 							label="Max"
@@ -79,6 +80,7 @@
 									distribution: formatPayloadFromParameterChange({ maximum: $event })
 								})
 							"
+							class="parameter-input"
 						/>
 					</template>
 				</span>
@@ -245,4 +247,8 @@ label {
 		width: 20%;
 	}
 }
+
+.parameter-input {
+	height: 2rem;
+}
 </style>

packages/client/hmi-client/src/components/model/petrinet/tera-parameter-table.vue

@@ -19,7 +19,7 @@
 
 			<!-- Adding uncertainty header -->
 			<span v-if="isAddingUncertainty" class="add-uncertainty-toolbar">
-				<Button size="small" text label="Unselect all" @click="selectedParameters = []" />
+				<Button size="small" text label="Unselect all" style="min-width: 4.6rem" @click="selectedParameters = []" />
 				Add
 				<Dropdown
 					v-model="uncertaintyType"
@@ -37,19 +37,32 @@
 				uncertainty with ±
 				<InputNumber class="uncertainty-percentage" v-model="uncertaintyPercentage" suffix="%" :min="0" :max="100" />
 				bounds on the value of the selected constant parameters.
-				<Button text small icon="pi pi-check" @click="onUpdateDistributions" />
-				<Button text small icon="pi pi-times" @click="isAddingUncertainty = false" class="ml-auto" />
+				<Button
+					outlined
+					severity="secondary"
+					small
+					icon="pi pi-check"
+					label="Apply"
+					size="small"
+					@click="onUpdateDistributions"
+					style="min-width: 5.5rem"
+				/>
+				<Button text rounded small icon="pi pi-times" @click="isAddingUncertainty = false" class="ml-auto" />
 			</span>
 
 			<ul class="pl-1">
-				<li v-for="{ baseParameter, childParameters, isVirtual } in parameterList" :key="baseParameter">
+				<li
+					v-for="{ baseParameter, childParameters, isVirtual } in parameterList"
+					:key="baseParameter"
+					class="element-card"
+				>
 					<!-- Stratified -->
 					<section v-if="isVirtual" class="parameter-entry-stratified">
 						<Accordion multiple>
 							<AccordionTab>
 								<template #header>
 									<span>{{ baseParameter }}</span>
-									<Button label="Open Matrix" text size="small" @click.stop="matrixModalId = baseParameter" />
+									<Button label="Open matrix" text size="small" @click.stop="matrixModalId = baseParameter" />
 								</template>
 								<div class="flex">
 									<ul class="ml-1">
@@ -246,7 +259,7 @@ ul {
 	}
 
 	li + li {
-		border-top: 1px solid var(--gray-300);
+		border-top: 1px solid var(--surface-border-light);
 		margin-top: var(--gap-1-5);
 		padding-top: var(--gap-4);
 	}
@@ -256,6 +269,13 @@ ul {
 	}
 }
 
+.element-card {
+	background-color: var(--surface-0);
+}
+.element-card:hover {
+	background-color: var(--surface-50);
+}
+
 .parameter-entry-stratified {
 	border-left: 4px solid var(--surface-300);
 	padding-left: var(--gap-1);
@@ -294,7 +314,9 @@ ul {
 	gap: var(--gap-2);
 	background-color: var(--surface-highlight);
 	padding: var(--gap-2);
+	padding-left: 0;
 	margin-bottom: var(--gap-2);
+	font-size: var(--font-caption);
 }
 
 :deep(.uncertainty-percentage) > input {

packages/client/hmi-client/src/components/model/tera-model.vue

@@ -34,13 +34,7 @@
 			<ContextMenu ref="optionsMenu" :model="optionsMenuItems" popup :pt="optionsMenuPt" />
 			<aside class="btn-group">
 				<tera-asset-enrichment :asset-type="AssetType.Model" :assetId="assetId" @finished-job="fetchModel" />
-				<Button
-					label="Reset"
-					severity="secondary"
-					outlined
-					@click="onReset"
-					:disabled="!(hasChanged && hasEditPermission)"
-				/>
+
 				<Button
 					v-if="isSaveForReuse"
 					label="Save for re-use"
@@ -146,9 +140,6 @@ const hasChanged = computed(() => !isEqual(model.value, temporaryModel.value));
 const hasEditPermission = useProjects().hasEditPermission();
 
 // Edit menu
-function onReset() {
-	temporaryModel.value = cloneDeep(model.value);
-}
 function onSave() {
 	saveModelContent();
 }

packages/client/hmi-client/src/components/widgets/tera-input-number.vue

@@ -18,7 +18,7 @@
 				:placeholder="placeholder"
 			/>
 		</main>
-		<aside v-if="getErrorMessage"><i class="pi pi-exclamation-circle" /> {{ getErrorMessage }}</aside>
+		<aside v-if="getErrorMessage"><i class="ml-2 pi pi-exclamation-circle" /> {{ getErrorMessage }}</aside>
 	</div>
 </template>
 

packages/client/hmi-client/src/components/workflow/ops/intervention-policy/tera-intervention-card.vue

@@ -31,9 +31,9 @@
 					invalidate-negative
 					:model-value="intervention.staticInterventions[0].timestep"
 					@update:model-value="(val) => onUpdateThreshold(val, 0)"
-					placeholder="timestep"
+					placeholder="Timestep"
 				/>
-				,
+				:
 			</div>
 			<div class="card-section">
 				<template v-if="interventionType === 'dynamic'">
@@ -120,7 +120,14 @@
 									@update:model-value="(val) => onUpdateValue(val, index)"
 									placeholder="value"
 								/>
-								<Button class="ml-auto" icon="pi pi-times" text @click="onRemoveStaticIntervention(index)" />
+								<Button
+									class="ml-auto"
+									icon="pi pi-times"
+									size="small"
+									rounded
+									text
+									@click="onRemoveStaticIntervention(index)"
+								/>
 							</div>
 							<Divider />
 						</li>
@@ -346,24 +353,35 @@ const debounceUpdateState = debounce((intervention) => {
 
 .type-menu {
 	border-radius: var(--border-radius) 0 0 var(--border-radius);
-	background: var(--surface-200);
+	background: var(--surface-100);
+	height: 27px;
 }
 
 .applied-to-menu {
 	border-radius: 0 var(--border-radius) var(--border-radius) 0;
+	height: 27px;
 }
 
 .intervention-card {
-	background-color: var(--surface-50);
+	background-color: var(--surface-0);
 	border: 1px solid var(--surface-border-light);
 	border-radius: var(--border-radius-medium);
 	padding: var(--gap-2) var(--gap-4);
 	gap: var(--gap-2);
 	display: flex;
 	flex-direction: column;
+	cursor: pointer;
+}
+.intervention-card:hover {
+	background-color: var(--surface-50);
 }
 
 ul {
 	list-style: none;
 }
+
+/* lighten divider color */
+:deep(.p-divider.p-divider-horizontal:before) {
+	border-top-color: var(--surface-border-light);
+}
 </style>

packages/client/hmi-client/src/components/workflow/ops/intervention-policy/tera-intervention-policy-card.vue

@@ -60,7 +60,7 @@ div {
 
 	&,
 	&.selected {
-		transition: border-left-color 250ms;
+		transition: border-left-color 15ms;
 	}
 
 	&:not(.card-selected):hover {

packages/client/hmi-client/src/components/workflow/ops/intervention-policy/tera-intervention-policy-drilldown.vue

@@ -30,7 +30,7 @@
 					<section>
 						<nav class="inline-flex">
 							<Button
-								class="flex-1 mr-6"
+								class="flex-1 mr-5"
 								outlined
 								severity="secondary"
 								label="Extract from inputs"
@@ -39,7 +39,13 @@
 								:disabled="!props.node.inputs[0]?.value && !props.node.inputs[1]?.value"
 								@click="extractInterventionPolicyFromInputs"
 							/>
-							<Button class="ml-1" label="Create New" :disabled="!model?.id" @click="resetToBlankIntervention" />
+							<Button
+								class="ml-1"
+								icon="pi pi-plus"
+								label="Create new"
+								:disabled="!model?.id"
+								@click="resetToBlankIntervention"
+							/>
 						</nav>
 						<tera-input-text v-model="filterInterventionsText" placeholder="Filter" />
 						<ul v-if="!isFetchingPolicies">
@@ -704,15 +710,15 @@ button.start-edit {
 
 .intervention {
 	background-color: var(--gray-0);
-	border-left: 4px solid var(--surface-300);
+	border-left: 6px solid var(--surface-300);
 
 	&.selected {
 		border-left-color: var(--primary-color);
 	}
 
 	&,
 	&.selected {
-		transition: border-left-color 250ms;
+		transition: border-left-color 15ms;
 	}
 }
 

packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-config-drilldown.vue

@@ -31,6 +31,7 @@
 							<tera-input-text v-model="filterModelConfigurationsText" placeholder="Filter" class="w-full" />
 							<Button
 								label="Extract from inputs"
+								icon="pi pi-sparkles"
 								severity="primary"
 								class="white-space-nowrap min-w-min"
 								size="small"