(ui): refactor minor styles

react-ui/src/components/devices/view/device.scss

@@ -6,7 +6,7 @@
     }
 
     & tr:hover > td {
-        background-color: map-get($theme-colors, "primary::hover");
+        background-color: map-get($theme-colors, "primary-hover");
         cursor: pointer;
     }
 

react-ui/src/components/devices/view/device.view.tsx

-import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { faCircleInfo, faPlus, faServer, faSliders } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { GridLayout } from '@layout/grid.layout/grid.layout';
 import { GridBox } from '@shared/components/box/gridBox.view';
@@ -20,7 +20,7 @@ const DeviceView = () => {
         <GridLayout>
             <>
                 <div key="device-list">
-                    <GridBox title={t("device.title")}>
+                    <GridBox title={t("device.box.list.title")} title_icon={faServer}>
                         <Row className="mb-3 align-items-center">
                             <Col xs={12} md={6} lg={8}>
                                 <Form.Group controlId='device.search'>
@@ -28,7 +28,7 @@ const DeviceView = () => {
                                 </Form.Group>
                             </Col>
                             <Col xs={12} md={6} lg={4} className='mt-3 mt-md-0 text-md-end'>
-                                <Button variant='primary'>
+                                <Button variant='primary::button' className='btn-primary-button'>
                                     <FontAwesomeIcon icon={faPlus} className='me-2' />
                                     {t('device.add_device_button')}
                                 </Button>
@@ -43,7 +43,7 @@ const DeviceView = () => {
                 </div>
 
                 <div key="device-metadata">
-                    <GridBox title={t("device.title")}>
+                    <GridBox title={t("device.box.information.title")} title_icon={faCircleInfo}>
                         <Row>
                             <Col xs={12} >
                                 <DeviceListCollapsable search={searchRef.current?.value || ''} />
@@ -53,7 +53,7 @@ const DeviceView = () => {
                 </div>
 
                 <div key="device-details">
-                    <GridBox title={t('device.tabs.yang_model.title')}>
+                    <GridBox title={t('device.box.configuration.title')} title_icon={faSliders}>
                         <Row>
                             <Col xs={12}>
                                 {jsonYang && <JsonViewer json={jsonYang} />}

react-ui/src/i18n/locales/en/translations.json

@@ -11,6 +11,9 @@
             },
             "menu_item": {
                 "logout": "Logout"
+            },
+            "box": {
+                "lastUpdate": "Last updated {{seconds}} seconds ago"
             }
         },
         "json_viewer": {
@@ -29,7 +32,17 @@
             }
         },
         "device": {
-            "title": "Device list",
+            "box": {
+                "list": {
+                    "title": "Devices"
+                },
+                "information": {
+                    "title": "Information"
+                },
+                "configuration": {
+                    "title": "Configuration"
+                }
+            },
             "table": {
                 "header": {
                     "name": "Name",
@@ -45,15 +58,7 @@
             "search": {
                 "placeholder": "Search"
             },
-            "add_device_button": "Add device",
-            "tabs": {
-                "yang_model": {
-                    "title": "YANG Model"
-                }
-            },
-            "box": {
-                "lastUpdate": "Last updated {{seconds}} seconds ago"
-            }
+            "add_device_button": "Add device"
         },
         "protected": {
             "link": {

react-ui/src/shared/components/box/gridBox.view.tsx

-import { faGripVertical } from "@fortawesome/free-solid-svg-icons"
+import { faGripVertical, IconDefinition } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import UpdateIndicator from "@layout/grid.layout/update-inidicator.layout/update-indicator.layout"
 import { Category, CategoryType } from "@shared/types/category.type"
@@ -7,12 +7,13 @@ import './gridBox.view.scss'
 
 interface GridBoxProps {
     title: string,
+    title_icon: IconDefinition,
     children: React.ReactNode,
     className?: string,
 }
 
 
-export const GridBox: React.FC<GridBoxProps> = ({ children, title, className = "" }) => {
+export const GridBox: React.FC<GridBoxProps> = ({ children, title, title_icon, className = "" }) => {
     return (
         <div className="grid-box h-100">
             <Container fluid className={`c-box d-flex flex-column h-100 ${className}`}>
@@ -24,7 +25,8 @@ export const GridBox: React.FC<GridBoxProps> = ({ children, title, className = "
                     <FontAwesomeIcon icon={faGripVertical} className="drag-handle" />
                     <Row className="mb-0">
                         <Col xs={12}>
-                            <h4 className='c-box-title'>{title}</h4>
+
+                            <h4 className='c-box-title'><FontAwesomeIcon icon={title_icon} size="1x" className="me-2 text-primary" />{title}</h4>
                         </Col>
                     </Row>
                 </div>

react-ui/src/shared/components/json_viewer/view/json_viewer.scss

@@ -13,7 +13,7 @@
     }
 
     &:hover > td {
-        background-color: map-get($theme-colors, "primary::hover") !important;
+        background-color: map-get($theme-colors, "primary-hover") !important;
     }
 
     &:hover .icons {

react-ui/src/shared/components/json_viewer/view/json_viewer.view.tsx

@@ -29,7 +29,7 @@ export const JsonViewer = ({ json, options = { searchEnabled: true, editable: tr
         path += parentKey + (parentKey === "" ? "" : "/")
 
         if (Object.entries(innerJson).length === 0) {
-            return <Skeleton count={3}></Skeleton>
+            return <tr><td><Skeleton count={3}></Skeleton></td></tr>
         }
 
         return Object.entries(innerJson).map(([key, child]): JSX.Element => {

react-ui/src/shared/layouts/grid.layout/grid.layout.scss

@@ -20,8 +20,6 @@
 }
 
 .react-grid-item {
-    transition: none !important;
-
     &.resizing {
         z-index: 1;
         will-change: transform;
@@ -29,14 +27,11 @@
 }
 
 .react-grid-item {
-    height: 100px;
-    /* Hide resize handle by default */
     .custom-resize-handle {
         opacity: 0;
         transition: opacity 0.2s ease-in-out;
     }
 
-    /* Show resize handle on container hover */
     &:hover .custom-resize-handle {
         opacity: 1;
     }
@@ -65,14 +60,6 @@
     }
 }
 
-.react-grid-item {
-    &.react-draggable-dragging {
-        .drag-handle {
-            cursor: grabbing;
-        }
-    }
-}
-
 .react-grid-item.react-grid-placeholder {
     background: lighten(map-get($theme-colors, primary), 10%) !important;
     opacity: 0.2;
@@ -86,21 +73,6 @@
     user-select: none;
 }
 
-.react-grid-item {
-    height: 100px;
-    /* Hide resize handle by default */
-    .react-resizable-handle-se {
-        opacity: 0;
-        transition: opacity 0.2s ease-in-out;
-    }
-
-    /* Show resize handle on container hover */
-    &:hover .react-resizable-handle-se {
-        opacity: 1;
-    }
-}
-
-/* Style the resize handle */
 .react-resizable-handle-se {
     position: absolute;
     right: 0;

react-ui/src/shared/layouts/protected.layout/protected.layout.scss

@@ -39,7 +39,7 @@ nav {
 
         &.active {
             color: map-get($theme-colors, "primary");
-            background-color: map-get($theme-colors, "primary::hover");
+            background-color: map-get($theme-colors, "primary-button");
         }
     }
 

react-ui/src/shared/style/colors.scss

 $theme-colors: (
   "primary": #b350e0,
-  "primary::hover": #ddaff3af,
+  "primary-hover": #ddaff3af,
+  "primary-button": #ddaff3af,
   "bg-primary": #ededed,
   "danger": #ff0000,
   "warning": #dbd116,