Merge pull request #4466 from FlowFuse/4450-consistent-pictograms

Ensure consistent pictograms are used across devices and instances
FlowFuse · Sep 18, 2024 · e0499ae · e0499ae
2 parents dd04734 + 2bdd4b4
commit e0499ae
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 2 deletions.
diff --git a/frontend/src/images/pictograms/edge_red.png b/frontend/src/images/pictograms/edge_red.png
diff --git a/frontend/src/pages/application/Devices.vue b/frontend/src/pages/application/Devices.vue
@@ -2,7 +2,7 @@
     <div>
         <SectionTopMenu hero="Node-RED Devices" help-header="Node-RED Edge Devices - Registered to FlowFuse" info="Devices belonging to this application.">
             <template #pictogram>
-                <img src="../../images/pictograms/edge_red.png">
+                <img src="../../images/pictograms/devices_red.png">
             </template>
             <template #helptext>
                 <p>FlowFuse can be used to manage instances of Node-RED running on remote devices.</p>

diff --git a/frontend/src/pages/application/Overview.vue b/frontend/src/pages/application/Overview.vue
@@ -2,7 +2,7 @@
     <div>
         <SectionTopMenu hero="Node-RED Instances" help-header="Node-RED Instances - Running in FlowFuse" info="Instances of Node-RED belonging to this application.">
             <template #pictogram>
-                <img src="../../images/pictograms/edge_red.png">
+                <img src="../../images/pictograms/instance_red.png">
             </template>
             <template #helptext>
                 <p>This is a list of Node-RED instances in this Application, hosted on the same domain as FlowFuse.</p>

diff --git a/frontend/src/pages/instance/Devices.vue b/frontend/src/pages/instance/Devices.vue
@@ -1,5 +1,8 @@
 <template>
     <SectionTopMenu hero="Devices" help-header="FlowFuse - Devices" info="A list of all edge devices registered to this instance.">
+        <template #pictogram>
+            <img src="../../images/pictograms/devices_red.png">
+        </template>
         <template #helptext>
             <p>FlowFuse can be used to manage instances of Node-RED running on remote devices.</p>
             <p>Each device must run the <a href="https://flowfuse.com/docs/user/devices/" target="_blank">FlowFuse Device Agent</a>, which connects back to the platform to receive updates.</p>

diff --git a/frontend/src/pages/team/Instances.vue b/frontend/src/pages/team/Instances.vue
@@ -9,6 +9,9 @@
                 <template #help-header>
                     Instances
                 </template>
+                <template #pictogram>
+                    <img src="../../images/pictograms/instance_red.png">
+                </template>
                 <template #helptext>
                     <p>
                         This is a list of <span v-if="!dashboardRoleOnly">all</span> Node-RED instances belonging to this team running