Skip to content

Commit 19ee877

Browse files
committed
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>
1 parent 85c356d commit 19ee877

79 files changed

Lines changed: 1028 additions & 779 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

frontend/src/components/ContainerDetails.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
}
2626

2727
.containerSectionCard {
28-
border-radius: 12px;
28+
border-radius: 0.5rem;
2929
background: #ffffff;
3030
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
3131
padding: 10px;

frontend/src/components/ContainersOverview.scss

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
.containerListCard {
2828
background: #ffffff;
2929
border: 1px solid #dee2e6;
30-
border-radius: 12px;
30+
border-radius: 0.5rem;
3131
padding: 10px;
3232
overflow-y: auto;
3333
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
@@ -40,8 +40,6 @@
4040
margin-bottom: 6px;
4141
border: none !important;
4242
background: transparent !important;
43-
color: #212529 !important;
44-
box-shadow: none !important;
4543
transition: all 0.15s ease;
4644

4745
&:hover {
@@ -50,9 +48,9 @@
5048

5149
&.active {
5250
background: #ffffff !important;
53-
border-left: 3px solid #0d6efd !important;
51+
border-left: 3px solid var(--bs-primary) !important;
5452
border-radius: 0%;
55-
color: #0d6efd !important;
53+
color: var(--bs-primary) !important;
5654
font-weight: 500;
5755
}
5856

frontend/src/components/ContainersOverview.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import type {
2929
import Button from "@/components/Button";
3030
import ContainerDetails from "@/components/ContainerDetails";
3131
import "@/components/ContainersOverview.scss";
32+
import { Card } from "react-bootstrap";
3233

3334
const CONTAINERS_TABLE_FRAGMENT = graphql`
3435
fragment ContainersOverview_ContainerEdgeFragment on ContainerConnection {
@@ -70,14 +71,14 @@ const ContainersOverview = ({
7071

7172
if (containers.length === 0) {
7273
return (
73-
<div className={className}>
74+
<Card className="gap-2 border-0 shadow-sm flex-grow-1 p-4">
7475
<p>
7576
<FormattedMessage
7677
id="components.ContainersOverview.noContainers"
7778
defaultMessage="No containers available."
7879
/>
7980
</p>
80-
</div>
81+
</Card>
8182
);
8283
}
8384

frontend/src/components/DeviceTabs/ApplicationsTab.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
import React, { useCallback, useEffect, useState, useMemo } from "react";
2222
import { graphql, useRefetchableFragment } from "react-relay/hooks";
2323
import { FormattedMessage, useIntl } from "react-intl";
24+
import { Card } from "react-bootstrap";
2425

2526
import type { ApplicationsTab_deployedApplications$key } from "@/api/__generated__/ApplicationsTab_deployedApplications.graphql";
2627
import type { ApplicationsTab_deployedApplications_RefetchQuery } from "@/api/__generated__/ApplicationsTab_deployedApplications_RefetchQuery.graphql";
@@ -83,6 +84,7 @@ const DeviceApplicationsTab = ({ deviceRef }: DeviceApplicationsTabProps) => {
8384

8485
return (
8586
<Tab
87+
className="pt-3 d-flex flex-column flex-grow-1"
8688
eventKey="device-applications-tab"
8789
title={intl.formatMessage({
8890
id: "components.DeviceTabs.ApplicationsTab.title",
@@ -98,7 +100,7 @@ const DeviceApplicationsTab = ({ deviceRef }: DeviceApplicationsTabProps) => {
98100
>
99101
{errorFeedback}
100102
</Alert>
101-
<div className="mt-3">
103+
<Card className="h-100 border-0 p-3 shadow-sm mb-3">
102104
<h5>
103105
<FormattedMessage
104106
id="components.DeviceTabs.ApplicationsTab.InstallNewApp"
@@ -112,14 +114,16 @@ const DeviceApplicationsTab = ({ deviceRef }: DeviceApplicationsTabProps) => {
112114
setErrorFeedback={setErrorFeedback}
113115
onDeployComplete={handleRefetch}
114116
/>
117+
</Card>
118+
<Card className="gap-2 border-0 shadow-sm flex-grow-1 p-4">
115119
<h5 className="mt-4">
116120
<FormattedMessage
117121
id="components.DeviceTabs.ApplicationsTab.DeployedApplications"
118122
defaultMessage="Deployed Applications"
119123
/>
120124
</h5>
121125
<DeployedApplicationsTable deviceRef={device} />
122-
</div>
126+
</Card>
123127
</Tab>
124128
);
125129
};

frontend/src/components/DeviceTabs/BaseImageTab.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,9 @@
1616
//
1717
// SPDX-License-Identifier: Apache-2.0
1818

19-
import { graphql, useFragment } from "react-relay/hooks";
19+
import { Card } from "react-bootstrap";
2020
import { FormattedMessage, useIntl } from "react-intl";
21+
import { graphql, useFragment } from "react-relay/hooks";
2122

2223
import type { BaseImageTab_baseImage$key } from "@/api/__generated__/BaseImageTab_baseImage.graphql";
2324

@@ -57,13 +58,14 @@ const DeviceBaseImageTab = ({ deviceRef }: DeviceBaseImageTabProps) => {
5758
}
5859
return (
5960
<Tab
61+
className="pt-3 d-flex flex-column flex-grow-1"
6062
eventKey="device-base-image-tab"
6163
title={intl.formatMessage({
6264
id: "components.DeviceTabs.BaseImageTab.title",
6365
defaultMessage: "Base Image",
6466
})}
6567
>
66-
<div className="mt-3">
68+
<Card className="gap-2 border-0 shadow-sm flex-grow-1 p-4">
6769
<Stack gap={3}>
6870
{baseImage.name !== null && (
6971
<FormRow
@@ -122,7 +124,7 @@ const DeviceBaseImageTab = ({ deviceRef }: DeviceBaseImageTabProps) => {
122124
</FormRow>
123125
)}
124126
</Stack>
125-
</div>
127+
</Card>
126128
</Tab>
127129
);
128130
};

frontend/src/components/DeviceTabs/BatteryTab.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818

1919
import { graphql, useFragment } from "react-relay/hooks";
2020
import { useIntl } from "react-intl";
21+
import { Card } from "react-bootstrap";
2122

2223
import type { BatteryTab_batteryStatus$key } from "@/api/__generated__/BatteryTab_batteryStatus.graphql";
2324

@@ -44,15 +45,16 @@ const DeviceBatteryTab = ({ deviceRef }: DeviceBatteryTabProps) => {
4445

4546
return (
4647
<Tab
48+
className="pt-3 d-flex flex-column flex-grow-1"
4749
eventKey="device-battery-tab"
4850
title={intl.formatMessage({
4951
id: "components.DeviceTabs.BatteryTab.title",
5052
defaultMessage: "Battery",
5153
})}
5254
>
53-
<div className="mt-3">
55+
<Card className="gap-2 border-0 shadow-sm flex-grow-1 p-4">
5456
<BatteryTable deviceRef={device} />
55-
</div>
57+
</Card>
5658
</Tab>
5759
);
5860
};

frontend/src/components/DeviceTabs/CellularConnectionTab.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818

1919
import { graphql, useFragment } from "react-relay/hooks";
2020
import { useIntl } from "react-intl";
21+
import { Card } from "react-bootstrap";
2122

2223
import type { CellularConnectionTab_cellularConnection$key } from "@/api/__generated__/CellularConnectionTab_cellularConnection.graphql";
2324

@@ -47,15 +48,16 @@ const DeviceCellularConnectionTab = ({
4748

4849
return (
4950
<Tab
51+
className="pt-3 d-flex flex-column flex-grow-1"
5052
eventKey="device-cellular-connection-tab"
5153
title={intl.formatMessage({
5254
id: "components.DeviceTabs.CellularConnectionTab.title",
5355
defaultMessage: "Cellular Connection",
5456
})}
5557
>
56-
<div className="mt-3">
58+
<Card className="gap-2 border-0 shadow-sm flex-grow-1 p-4">
5759
<CellularConnectionTabs deviceRef={device} />
58-
</div>
60+
</Card>
5961
</Tab>
6062
);
6163
};

frontend/src/components/DeviceTabs/FileManagementTab.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import { useCallback, useMemo, useState } from "react";
2222
import { FormattedMessage, useIntl } from "react-intl";
2323
import { graphql, useFragment } from "react-relay/hooks";
2424
import Select from "react-select";
25+
import { Card } from "react-bootstrap";
2526

2627
import type { FileManagementTab_fileManagement$key } from "@/api/__generated__/FileManagementTab_fileManagement.graphql";
2728

@@ -214,9 +215,13 @@ const FileManagementTab = ({ deviceRef }: FileManagementTabProps) => {
214215
};
215216

216217
return (
217-
<Tab eventKey="device-file-management-tab" title="File Management">
218+
<Tab
219+
className="pt-3 d-flex flex-column flex-grow-1"
220+
eventKey="device-file-management-tab"
221+
title="File Management"
222+
>
218223
{modeOptions.length > 1 && (
219-
<div className="mt-3">
224+
<Card className="h-100 border-0 p-3 shadow-sm mb-3">
220225
<Form.Group controlId="file-management-mode" className="mb-0">
221226
<h5>
222227
<FormattedMessage
@@ -240,7 +245,7 @@ const FileManagementTab = ({ deviceRef }: FileManagementTabProps) => {
240245
}}
241246
/>
242247
</Form.Group>
243-
</div>
248+
</Card>
244249
)}
245250

246251
{renderTabContent()}

frontend/src/components/DeviceTabs/FilesDeleteTab.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020

2121
import split from "lodash/split";
2222
import React, { useCallback, useMemo, useState } from "react";
23+
import { Card } from "react-bootstrap";
2324
import { FormattedMessage, useIntl } from "react-intl";
2425
import {
2526
ConnectionHandler,
@@ -372,7 +373,7 @@ const FilesDeleteTab = ({
372373

373374
const content = (
374375
<>
375-
<div className="mt-3">
376+
<Card className="h-100 border-0 p-3 shadow-sm mb-3">
376377
<Alert
377378
show={!!errorFeedback}
378379
variant="danger"
@@ -392,11 +393,9 @@ const FilesDeleteTab = ({
392393
onDeleteSuccess={onDeleteSuccess}
393394
/>
394395
</Stack>
395-
</div>
396+
</Card>
396397

397-
<hr />
398-
399-
<div className="mt-4">
398+
<Card className="gap-2 border-0 shadow-sm flex-grow-1 p-4">
400399
<h5>
401400
<FormattedMessage
402401
id="components.DeviceTabs.FilesDeleteTab.requestHistory"
@@ -405,7 +404,7 @@ const FilesDeleteTab = ({
405404
</h5>
406405

407406
<FileDeleteRequestsTable requests={fileDeleteRequests} />
408-
</div>
407+
</Card>
409408
</>
410409
);
411410

@@ -415,6 +414,7 @@ const FilesDeleteTab = ({
415414

416415
return (
417416
<Tab
417+
className="pt-3 d-flex flex-column flex-grow-1"
418418
eventKey="device-files-delete-tab"
419419
title={intl.formatMessage({
420420
id: "components.DeviceTabs.FilesDeleteTab.title",

frontend/src/components/DeviceTabs/FilesDeviceToServerTab.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020

2121
import split from "lodash/split";
2222
import React, { useCallback, useMemo, useState } from "react";
23+
import { Card } from "react-bootstrap";
2324
import { FormattedMessage, useIntl } from "react-intl";
2425
import {
2526
ConnectionHandler,
@@ -447,7 +448,7 @@ const FilesDeviceToServerTab = ({
447448

448449
const content = (
449450
<>
450-
<div className="mt-3">
451+
<Card className="h-100 border-0 p-3 shadow-sm mb-3">
451452
<Alert
452453
show={!!errorFeedback}
453454
variant="danger"
@@ -468,11 +469,11 @@ const FilesDeviceToServerTab = ({
468469
isOnline={isOnline}
469470
/>
470471
</Stack>
471-
</div>
472+
</Card>
472473

473474
<hr />
474475

475-
<div className="mt-4">
476+
<Card className="gap-2 border-0 shadow-sm flex-grow-1 p-4">
476477
<h5>
477478
<FormattedMessage
478479
id="components.DeviceTabs.FilesDeviceToServerTab.requestHistory"
@@ -481,7 +482,7 @@ const FilesDeviceToServerTab = ({
481482
</h5>
482483

483484
<FilesDeviceToServerTable requests={fileUploadRequests} />
484-
</div>
485+
</Card>
485486
</>
486487
);
487488

0 commit comments

Comments
 (0)