update periodic table

.config/ags/modules/cheatsheet/periodictable.js

@@ -1,5 +1,5 @@
 import Widget from 'resource:///com/github/Aylur/ags/widget.js';
-import { periodicTable, series } from "./data_periodictable.js";
+import { niceTypes, periodicTable, series } from "./data_periodictable.js";
 const { Box, Button, Icon, Label, Revealer } = Widget;
 
 export default () => {
@@ -9,11 +9,11 @@ export default () => {
             className: `cheatsheet-periodictable-${element.type}`,
             children: element.name == '' ? null : [
                 Box({
-                    className: 'padding-8',
+                    className: 'padding-left-8 padding-right-8 padding-top-8',
                     children: [
                         Label({
                             label: `${element.number}`,
-                            className: "txt-tiny",
+                            className: "cheatsheet-periodictable-elementnum txt-tiny txt-bold",
                         }),
                         Box({ hexpand: true }),
                         Label({
@@ -36,6 +36,22 @@ export default () => {
             ]
         })
     }
+    const BoardColor = (type) => Box({
+        className: 'spacing-h-5',
+        children: [
+            Box({
+                homogeneous: true,
+                className: `cheatsheet-periodictable-legend-color-wrapper`,
+                children: [Box({
+                    className: `cheatsheet-periodictable-legend-color-${type}`,
+                })]
+            }),
+            Label({
+                label: `${niceTypes[type]}`,
+                className: "txt-small",
+            })
+        ]
+    })
     const mainBoard = Box({
         hpack: 'center',
         vertical: true,
@@ -54,12 +70,24 @@ export default () => {
             children: row.map((element, _) => ElementTile(element))
         })),
     });
+    const legend = Box({
+        hpack: 'center',
+        className: 'spacing-h-10',
+        children: [
+            BoardColor('metal'),
+            BoardColor('nonmetal'),
+            BoardColor('noblegas'),
+            BoardColor('lanthanum'),
+            BoardColor('actinium'),
+        ]
+    })
     return Box({
         vertical: true,
         className: 'spacing-v-20',
         children: [
             mainBoard,
-            seriesBoard
+            seriesBoard,
+            legend
         ]
     })
 }