+
+
{{ config.titleKey | translate }}
{{ config.descriptionKey | translate }}
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-items-page.component.scss b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-items-page.component.scss
index 7bf7104609..da70c9f466 100644
--- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-items-page.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-items-page.component.scss
@@ -24,16 +24,13 @@
.tb-iot-hub-items-page {
background: white;
border-radius: 8px;
- padding: 40px 40px 0;
+ padding: 40px 40px 48px;
}
-.tb-iot-hub-back-btn {
- margin-bottom: 16px;
-}
-
-// Hero section
+// Hero section — flex row: left (back + text) and right (image), space-between
.tb-iot-hub-items-hero {
display: flex;
+ justify-content: space-between;
gap: 40px;
margin-bottom: 40px;
}
@@ -43,6 +40,10 @@
min-width: 0;
}
+.tb-iot-hub-back-btn {
+ margin-bottom: 40px;
+}
+
.tb-iot-hub-items-title {
font-size: 40px;
font-weight: 500;
@@ -51,12 +52,15 @@
margin: 0 0 12px;
}
+// Description — Design: 16px Regular, line-height 24, tracking 0.15, rgba(0,0,0,0.76)
.tb-iot-hub-items-desc {
- font-size: 14px;
- line-height: 20px;
- color: rgba(0, 0, 0, 0.54);
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 24px;
+ letter-spacing: 0.15px;
+ color: rgba(0, 0, 0, 0.76);
margin: 0 0 24px;
- max-width: 500px;
+ max-width: 800px;
}
.tb-iot-hub-items-actions {
@@ -72,15 +76,12 @@
}
.tb-iot-hub-items-hero-image {
- width: 400px;
flex-shrink: 0;
display: flex;
- align-items: center;
- justify-content: center;
+ align-items: flex-start;
img {
- max-width: 100%;
- max-height: 200px;
+ max-height: 276px;
object-fit: contain;
}
}
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-items-page.component.ts b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-items-page.component.ts
index 73a843a243..771d8f7ab1 100644
--- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-items-page.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-items-page.component.ts
@@ -32,7 +32,7 @@ const PAGE_CONFIGS: Record
= {
type: ItemType.WIDGET,
titleKey: 'item.type-widget-plural',
descriptionKey: 'iot-hub.items-page-desc-widgets',
- image: 'assets/iot-hub/category-widgets-img.svg',
+ image: 'assets/iot-hub/items-page-widgets-hero.svg',
routeSegment: 'widgets'
},
DASHBOARD: {
@@ -53,14 +53,14 @@ const PAGE_CONFIGS: Record = {
type: ItemType.CALCULATED_FIELD,
titleKey: 'item.type-calculated-field-plural',
descriptionKey: 'iot-hub.items-page-desc-calculated-fields',
- image: 'assets/iot-hub/category-calculated-fields-img.svg',
+ image: 'assets/iot-hub/items-page-calculated-fields-hero.svg',
routeSegment: 'calculated-fields'
},
RULE_CHAIN: {
type: ItemType.RULE_CHAIN,
titleKey: 'item.type-rule-chain-plural',
descriptionKey: 'iot-hub.items-page-desc-rule-chains',
- image: 'assets/iot-hub/category-rule-chains-img.svg',
+ image: 'assets/iot-hub/items-page-rule-chains-hero.svg',
routeSegment: 'rule-chains'
},
DEVICE: {
diff --git a/ui-ngx/src/assets/iot-hub/items-page-calculated-fields-hero.svg b/ui-ngx/src/assets/iot-hub/items-page-calculated-fields-hero.svg
new file mode 100644
index 0000000000..6f3e9fcca7
--- /dev/null
+++ b/ui-ngx/src/assets/iot-hub/items-page-calculated-fields-hero.svg
@@ -0,0 +1,104 @@
+
diff --git a/ui-ngx/src/assets/iot-hub/items-page-rule-chains-hero.svg b/ui-ngx/src/assets/iot-hub/items-page-rule-chains-hero.svg
new file mode 100644
index 0000000000..05cb14b0e2
--- /dev/null
+++ b/ui-ngx/src/assets/iot-hub/items-page-rule-chains-hero.svg
@@ -0,0 +1,151 @@
+
diff --git a/ui-ngx/src/assets/iot-hub/items-page-widgets-hero.svg b/ui-ngx/src/assets/iot-hub/items-page-widgets-hero.svg
new file mode 100644
index 0000000000..4423f6348a
--- /dev/null
+++ b/ui-ngx/src/assets/iot-hub/items-page-widgets-hero.svg
@@ -0,0 +1,124 @@
+