refactor: Update UI components and styles for improved user experience

- Wrapped content in Cards for better visual separation and organization.
- Updated SearchBox to look consistent with the new design.
- Updated Table styles to match the new design and improve readability.
- Updated FormRow styles to align with the new design and enhance
form layout.

Signed-off-by: Arnela Lisic <arnela.lisic@secomind.com>

Author: ArnelaL

frontend/src/components/ContainerDetails.scss

@@ -25,7 +25,7 @@
 }
 
 .containerSectionCard {
-  border-radius: 12px;
+  border-radius: 0.5rem;
   background: #ffffff;
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
   padding: 10px;

frontend/src/components/ContainersOverview.scss

@@ -27,7 +27,7 @@
 .containerListCard {
   background: #ffffff;
   border: 1px solid #dee2e6;
-  border-radius: 12px;
+  border-radius: 0.5rem;
   padding: 10px;
   overflow-y: auto;
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
@@ -40,8 +40,6 @@
   margin-bottom: 6px;
   border: none !important;
   background: transparent !important;
-  color: #212529 !important;
-  box-shadow: none !important;
   transition: all 0.15s ease;
 
   &:hover {
@@ -50,9 +48,9 @@
 
   &.active {
     background: #ffffff !important;
-    border-left: 3px solid #0d6efd !important;
+    border-left: 3px solid var(--bs-primary) !important;
     border-radius: 0%;
-    color: #0d6efd !important;
+    color: var(--bs-primary) !important;
     font-weight: 500;
   }
 

frontend/src/components/ContainersOverview.tsx

@@ -29,6 +29,7 @@ import type {
 import Button from "@/components/Button";
 import ContainerDetails from "@/components/ContainerDetails";
 import "@/components/ContainersOverview.scss";
+import { Card } from "react-bootstrap";
 
 const CONTAINERS_TABLE_FRAGMENT = graphql`
   fragment ContainersOverview_ContainerEdgeFragment on ContainerConnection {
@@ -70,14 +71,14 @@ const ContainersOverview = ({
 
   if (containers.length === 0) {
     return (
-      <div className={className}>
+      <Card className="gap-2 border-0 shadow-sm flex-grow-1 p-4">
         <p>
           <FormattedMessage
             id="components.ContainersOverview.noContainers"
             defaultMessage="No containers available."
           />
         </p>
-      </div>
+      </Card>
     );
   }
 

frontend/src/components/DeviceTabs/ApplicationsTab.tsx

@@ -21,6 +21,7 @@
 import React, { useCallback, useEffect, useState, useMemo } from "react";
 import { graphql, useRefetchableFragment } from "react-relay/hooks";
 import { FormattedMessage, useIntl } from "react-intl";
+import { Card } from "react-bootstrap";
 
 import type { ApplicationsTab_deployedApplications$key } from "@/api/__generated__/ApplicationsTab_deployedApplications.graphql";
 import type { ApplicationsTab_deployedApplications_RefetchQuery } from "@/api/__generated__/ApplicationsTab_deployedApplications_RefetchQuery.graphql";
@@ -83,6 +84,7 @@ const DeviceApplicationsTab = ({ deviceRef }: DeviceApplicationsTabProps) => {
 
   return (
     <Tab
+      className="pt-3 d-flex flex-column flex-grow-1"
       eventKey="device-applications-tab"
       title={intl.formatMessage({
         id: "components.DeviceTabs.ApplicationsTab.title",
@@ -98,7 +100,7 @@ const DeviceApplicationsTab = ({ deviceRef }: DeviceApplicationsTabProps) => {
       >
         {errorFeedback}
       </Alert>
-      <div className="mt-3">
+      <Card className="h-100 border-0 p-3 shadow-sm mb-3">
         <h5>
           <FormattedMessage
             id="components.DeviceTabs.ApplicationsTab.InstallNewApp"
@@ -112,14 +114,16 @@ const DeviceApplicationsTab = ({ deviceRef }: DeviceApplicationsTabProps) => {
           setErrorFeedback={setErrorFeedback}
           onDeployComplete={handleRefetch}
         />
+      </Card>
+      <Card className="gap-2 border-0 shadow-sm flex-grow-1 p-4">
         <h5 className="mt-4">
           <FormattedMessage
             id="components.DeviceTabs.ApplicationsTab.DeployedApplications"
             defaultMessage="Deployed Applications"
           />
         </h5>
         <DeployedApplicationsTable deviceRef={device} />
-      </div>
+      </Card>
     </Tab>
   );
 };

frontend/src/components/DeviceTabs/BaseImageTab.tsx

@@ -16,8 +16,9 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import { graphql, useFragment } from "react-relay/hooks";
+import { Card } from "react-bootstrap";
 import { FormattedMessage, useIntl } from "react-intl";
+import { graphql, useFragment } from "react-relay/hooks";
 
 import type { BaseImageTab_baseImage$key } from "@/api/__generated__/BaseImageTab_baseImage.graphql";
 
@@ -57,13 +58,14 @@ const DeviceBaseImageTab = ({ deviceRef }: DeviceBaseImageTabProps) => {
   }
   return (
     <Tab
+      className="pt-3 d-flex flex-column flex-grow-1"
       eventKey="device-base-image-tab"
       title={intl.formatMessage({
         id: "components.DeviceTabs.BaseImageTab.title",
         defaultMessage: "Base Image",
       })}
     >
-      <div className="mt-3">
+      <Card className="gap-2 border-0 shadow-sm flex-grow-1 p-4">
         <Stack gap={3}>
           {baseImage.name !== null && (
             <FormRow
@@ -122,7 +124,7 @@ const DeviceBaseImageTab = ({ deviceRef }: DeviceBaseImageTabProps) => {
             </FormRow>
           )}
         </Stack>
-      </div>
+      </Card>
     </Tab>
   );
 };

frontend/src/components/DeviceTabs/BatteryTab.tsx

@@ -18,6 +18,7 @@
 
 import { graphql, useFragment } from "react-relay/hooks";
 import { useIntl } from "react-intl";
+import { Card } from "react-bootstrap";
 
 import type { BatteryTab_batteryStatus$key } from "@/api/__generated__/BatteryTab_batteryStatus.graphql";
 
@@ -44,15 +45,16 @@ const DeviceBatteryTab = ({ deviceRef }: DeviceBatteryTabProps) => {
 
   return (
     <Tab
+      className="pt-3 d-flex flex-column flex-grow-1"
       eventKey="device-battery-tab"
       title={intl.formatMessage({
         id: "components.DeviceTabs.BatteryTab.title",
         defaultMessage: "Battery",
       })}
     >
-      <div className="mt-3">
+      <Card className="gap-2 border-0 shadow-sm flex-grow-1 p-4">
         <BatteryTable deviceRef={device} />
-      </div>
+      </Card>
     </Tab>
   );
 };

frontend/src/components/DeviceTabs/CellularConnectionTab.tsx

@@ -18,6 +18,7 @@
 
 import { graphql, useFragment } from "react-relay/hooks";
 import { useIntl } from "react-intl";
+import { Card } from "react-bootstrap";
 
 import type { CellularConnectionTab_cellularConnection$key } from "@/api/__generated__/CellularConnectionTab_cellularConnection.graphql";
 
@@ -47,15 +48,16 @@ const DeviceCellularConnectionTab = ({
 
   return (
     <Tab
+      className="pt-3 d-flex flex-column flex-grow-1"
       eventKey="device-cellular-connection-tab"
       title={intl.formatMessage({
         id: "components.DeviceTabs.CellularConnectionTab.title",
         defaultMessage: "Cellular Connection",
       })}
     >
-      <div className="mt-3">
+      <Card className="gap-2 border-0 shadow-sm flex-grow-1 p-4">
         <CellularConnectionTabs deviceRef={device} />
-      </div>
+      </Card>
     </Tab>
   );
 };

frontend/src/components/DeviceTabs/FileManagementTab.tsx

@@ -22,6 +22,7 @@ import { useCallback, useMemo, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { graphql, useFragment } from "react-relay/hooks";
 import Select from "react-select";
+import { Card } from "react-bootstrap";
 
 import type { FileManagementTab_fileManagement$key } from "@/api/__generated__/FileManagementTab_fileManagement.graphql";
 
@@ -214,9 +215,13 @@ const FileManagementTab = ({ deviceRef }: FileManagementTabProps) => {
   };
 
   return (
-    <Tab eventKey="device-file-management-tab" title="File Management">
+    <Tab
+      className="pt-3 d-flex flex-column flex-grow-1"
+      eventKey="device-file-management-tab"
+      title="File Management"
+    >
       {modeOptions.length > 1 && (
-        <div className="mt-3">
+        <Card className="h-100 border-0 p-3 shadow-sm mb-3">
           <Form.Group controlId="file-management-mode" className="mb-0">
             <h5>
               <FormattedMessage
@@ -240,7 +245,7 @@ const FileManagementTab = ({ deviceRef }: FileManagementTabProps) => {
               }}
             />
           </Form.Group>
-        </div>
+        </Card>
       )}
 
       {renderTabContent()}

frontend/src/components/DeviceTabs/FilesDeleteTab.tsx

@@ -20,6 +20,7 @@
 
 import split from "lodash/split";
 import React, { useCallback, useMemo, useState } from "react";
+import { Card } from "react-bootstrap";
 import { FormattedMessage, useIntl } from "react-intl";
 import {
   ConnectionHandler,
@@ -372,7 +373,7 @@ const FilesDeleteTab = ({
 
   const content = (
     <>
-      <div className="mt-3">
+      <Card className="h-100 border-0 p-3 shadow-sm mb-3">
         <Alert
           show={!!errorFeedback}
           variant="danger"
@@ -392,11 +393,9 @@ const FilesDeleteTab = ({
             onDeleteSuccess={onDeleteSuccess}
           />
         </Stack>
-      </div>
+      </Card>
 
-      <hr />
-
-      <div className="mt-4">
+      <Card className="gap-2 border-0 shadow-sm flex-grow-1 p-4">
         <h5>
           <FormattedMessage
             id="components.DeviceTabs.FilesDeleteTab.requestHistory"
@@ -405,7 +404,7 @@ const FilesDeleteTab = ({
         </h5>
 
         <FileDeleteRequestsTable requests={fileDeleteRequests} />
-      </div>
+      </Card>
     </>
   );
 
@@ -415,6 +414,7 @@ const FilesDeleteTab = ({
 
   return (
     <Tab
+      className="pt-3 d-flex flex-column flex-grow-1"
       eventKey="device-files-delete-tab"
       title={intl.formatMessage({
         id: "components.DeviceTabs.FilesDeleteTab.title",

frontend/src/components/DeviceTabs/FilesDeviceToServerTab.tsx

@@ -20,6 +20,7 @@
 
 import split from "lodash/split";
 import React, { useCallback, useMemo, useState } from "react";
+import { Card } from "react-bootstrap";
 import { FormattedMessage, useIntl } from "react-intl";
 import {
   ConnectionHandler,
@@ -447,7 +448,7 @@ const FilesDeviceToServerTab = ({
 
   const content = (
     <>
-      <div className="mt-3">
+      <Card className="h-100 border-0 p-3 shadow-sm mb-3">
         <Alert
           show={!!errorFeedback}
           variant="danger"
@@ -468,11 +469,11 @@ const FilesDeviceToServerTab = ({
             isOnline={isOnline}
           />
         </Stack>
-      </div>
+      </Card>
 
       <hr />
 
-      <div className="mt-4">
+      <Card className="gap-2 border-0 shadow-sm flex-grow-1 p-4">
         <h5>
           <FormattedMessage
             id="components.DeviceTabs.FilesDeviceToServerTab.requestHistory"
@@ -481,7 +482,7 @@ const FilesDeviceToServerTab = ({
         </h5>
 
         <FilesDeviceToServerTable requests={fileUploadRequests} />
-      </div>
+      </Card>
     </>
   );