Jamie february papercuts 3 extra bits and pieces

packages/client/hmi-client/src/assets/css/theme/_variables.scss

@@ -13,7 +13,7 @@ $colors: (
 );
 
 $emphasis-high: rgba(16, 24, 40, 1) !default;
-$emphasis-medium: rgba(0, 0, 0, .60) !default;
+$emphasis-medium: #6A7682 !default;
 $emphasis-low: var(--surface-border) !default;
 $emphasis-lower: rgba(208, 213, 221, 1) !default;
 $overlayColor: #000000 !default;
@@ -96,7 +96,7 @@ $inputBorder: 1px solid var(--surface-border) !default;
 $inputHoverBorderColor: $emphasis-medium !default;
 $inputFocusBorderColor: $primaryColor !default;
 $inputErrorBorderColor: $errorColor !default;
-$inputPlaceholderTextColor: $emphasis-medium !default;
+$inputPlaceholderTextColor: $emphasis-medium !important;
 $inputFilledBg: #f5f5f5 !default;
 $inputFilledHoverBg: #ececec !default;
 $inputFilledFocusBg: #dcdcdc !default;
@@ -931,6 +931,7 @@ $petri-inputBox: var(--surface-0);
 	--surface-overlay: #ffffff;
 	--surface-ground: var(--gray-100);
 	--surface-ground-transparent: rgba(245, 245, 245, .85);
+	--surface-glass: rgba(255, 255, 255, 0.8);
 	--surface-disabled: #F4F4F4;
 	--surface-highlight: #EBF4F3;
 	--surface-highlight-hover: #bddad6;

packages/client/hmi-client/src/assets/css/theme/extensions/_accordion.scss

@@ -22,13 +22,13 @@
 
 		&:not(.p-accordion-tab-active) {
 			.p-accordion-toggle-icon {
-				transform: rotate(-270deg);
+				transform: translate(0px, 1px);
 			}
 		}
 
 		&.p-accordion-tab-active {
 			.p-accordion-toggle-icon {
-				transform: rotate(-180deg);
+				transform: translate(0px, 1px);
 			}
 		}
 

packages/client/hmi-client/src/components/code/tera-code-dynamic.vue

@@ -1,7 +1,7 @@
 <template>
 	<ul>
 		<li v-for="(codeBlocks, filename) in formattedCodeBlocks" :key="filename">
-			<h3>{{ filename ?? '' }}</h3>
+			<p class="mb-2 text-sm">{{ filename ?? '' }}</p>
 			<ul>
 				<li v-for="(codeBlock, i) in codeBlocks" :key="i">
 					<tera-asset-block
@@ -14,7 +14,7 @@
 						:key="i"
 					>
 						<template #header>
-							<h5>Code Block</h5>
+							<h5>Code block</h5>
 						</template>
 						<div
 							v-if="
@@ -26,20 +26,28 @@
 						</div>
 						<div class="edit-container" v-else>
 							<div class="edit-input-container">
-								<label for="code-dynamic-start">Start</label>
-								<InputNumber v-model="startLine" input-id="code-dynamic-start" />
+								<label class="text-sm" for="code-dynamic-start">Start line</label>
+								<InputNumber
+									class="small-input-number"
+									v-model="startLine"
+									input-id="code-dynamic-start"
+								/>
 							</div>
 
 							<div class="edit-input-container">
-								<label for="code-dynamic-start">End</label>
-								<InputNumber v-model="endLine" input-id="code-dynamic-end" />
+								<label class="text-sm" for="code-dynamic-start">End line</label>
+								<InputNumber
+									class="small-input-number"
+									v-model="endLine"
+									input-id="code-dynamic-end"
+								/>
 							</div>
 						</div>
 
 						<template #footer v-if="editRef?.index === i && editRef?.filename === filename">
 							<div class="footer-container">
-								<Button outlined label="Cancel" @click="editRef = null" />
-								<Button label="OK" @click="saveCodeBlockChanges" />
+								<Button outlined label="Cancel" @click="editRef = null" size="small" />
+								<Button label="Save" @click="saveCodeBlockChanges" size="small" />
 							</div>
 						</template>
 					</tera-asset-block>
@@ -139,6 +147,20 @@ ul {
 }
 
 .edit-input-container:deep(.p-inputnumber-input) {
-	width: 100px;
+	width: 107px;
+	height: 2rem;
+}
+
+.footer-container {
+	display: flex;
+	justify-content: end;
+	gap: var(--gap-small);
+}
+
+:deep(.p-panel .p-panel-content) {
+	padding: 0 0 var(--gap) var(--gap) !important;
+}
+:deep(.p-panel .p-panel-footer) {
+	padding: 0 var(--gap) var(--gap) 0 !important;
 }
 </style>