Merge pull request #425 from davidebriani/fix-ui-spacing-and-colors

Fix UI spacing and colors

src/AlertManager.tsx

@@ -231,13 +231,19 @@ interface AlertsBannerProps {
   alerts: IAlert[];
 }
 
-const AlertsBanner = ({ alerts }: AlertsBannerProps) => (
-  <Row>
-    {alerts.map((alert) => (
-      <AlertBanner key={alert.id} alert={alert} />
-    ))}
-  </Row>
-);
+const AlertsBanner = ({ alerts }: AlertsBannerProps) => {
+  if (!alerts.length) {
+    return null;
+  }
+
+  return (
+    <Row>
+      {alerts.map((alert) => (
+        <AlertBanner key={alert.id} alert={alert} />
+      ))}
+    </Row>
+  );
+};
 
 const useGlobalAlerts = (): AlertsController => {
   const alertContext = useContext(GlobalAlertsUtilsContext) as React.RefObject<AlertsController>;

src/App.tsx

@@ -79,7 +79,7 @@ const Dashboard = () => {
       <Container fluid className="px-0">
         <Row className="g-0">
           <DashboardSidebar />
-          <Col className="main-content vh-100 overflow-auto">
+          <Col className="main-content bg-light vh-100 overflow-auto d-flex flex-column">
             <PageRouter />
           </Col>
         </Row>
@@ -97,7 +97,7 @@ const StandaloneEditor = () => (
           <Sidebar.Item label="Interface Editor" link="/" icon="interfaces" />
         </Sidebar>
       </Col>
-      <Col className="main-content vh-100 overflow-auto">
+      <Col className="main-content bg-light vh-100 overflow-auto">
         <InterfaceEditorPage />
       </Col>
     </Row>

src/BlockSourcePage.tsx

@@ -107,7 +107,7 @@ export default (): React.ReactElement => {
         </WaitForData>
       </SingleCardPage>
       {blockStatus === 'ok' && blockData instanceof AstarteCustomBlock && (
-        <Row className="justify-content-end m-3">
+        <div className="d-flex flex-column flex-md-row justify-content-end gap-3 m-3">
           <Button
             variant="danger"
             onClick={() => setShowDeleteModal(true)}
@@ -118,7 +118,7 @@ export default (): React.ReactElement => {
             )}
             Delete block
           </Button>
-        </Row>
+        </div>
       )}
       {showDeleteModal && (
         <ConfirmModal

src/BlocksPage.tsx

@@ -95,7 +95,7 @@ export default (): React.ReactElement => {
   return (
     <Container fluid className="p-3">
       <h2>Blocks</h2>
-      <Row xs={1} lg={2} xxl={3} className="mt-4 g-4">
+      <Row xs={1} lg={2} xxl={3} className="g-4">
         <Col>
           <NewBlockCard onCreate={() => navigate('/blocks/new')} />
         </Col>

src/DeviceStatusPage/DeviceInfoCard.tsx

@@ -90,11 +90,10 @@ const DeviceInfoCard = ({
       </p>
       <h6>Credentials inhibited</h6>
       <p>{device.hasCredentialsInhibited ? 'True' : 'False'}</p>
-      <div className="mt-auto">
+      <div className="mt-auto d-flex flex-column flex-md-row flex-wrap gap-2">
         {device.hasCredentialsInhibited ? (
           <Button
             variant="success text-white"
-            className="me-1"
             onClick={onEnableCredentialsClick}
             disabled={device.deletionInProgress}
           >
@@ -103,7 +102,6 @@ const DeviceInfoCard = ({
         ) : (
           <Button
             variant="danger"
-            className="me-1"
             onClick={onInhibitCredentialsClick}
             disabled={device.deletionInProgress}
           >
@@ -117,12 +115,7 @@ const DeviceInfoCard = ({
         >
           Wipe credential secret
         </Button>
-        <Button
-          variant="danger"
-          className="ms-1"
-          onClick={onDeleteDeviceClick}
-          disabled={device.deletionInProgress}
-        >
+        <Button variant="danger" onClick={onDeleteDeviceClick} disabled={device.deletionInProgress}>
           Delete device
         </Button>
       </div>

src/DevicesPage.tsx

@@ -17,7 +17,17 @@
 */
 
 import React, { useCallback, useMemo, useState } from 'react';
-import { Button, Col, Container, Form, Pagination, Row, Spinner, Table } from 'react-bootstrap';
+import {
+  Button,
+  Col,
+  Container,
+  Form,
+  Pagination,
+  Row,
+  Spinner,
+  Stack,
+  Table,
+} from 'react-bootstrap';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import _ from 'lodash';
@@ -304,103 +314,105 @@ const FilterForm = ({ filters, onUpdateFilters }: FilterFormProps): React.ReactE
 
   return (
     <Form className="p-2">
-      <Form.Group controlId="filterId" className="mb-4">
-        <Form.Label>
-          <b>Device ID/name</b>
-        </Form.Label>
-        <Form.Control
-          type="text"
-          value={deviceId}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            onUpdateFilters({ ...filters, deviceId: e.target.value })
-          }
-        />
-      </Form.Group>
-      <Form.Group controlId="filterStatus" className="mb-4">
-        <Form.Label>
-          <b>Device status</b>
-        </Form.Label>
-        <Form.Check
-          type="checkbox"
-          id="checkbox-connected"
-          label="Connected"
-          checked={showConnected}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            onUpdateFilters({ ...filters, showConnected: e.target.checked })
-          }
-        />
-        <Form.Check
-          type="checkbox"
-          id="checkbox-disconnected"
-          label="Disconnected"
-          checked={showDisconnected}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            onUpdateFilters({ ...filters, showDisconnected: e.target.checked })
-          }
-        />
-        <Form.Check
-          type="checkbox"
-          id="checkbox-never-connected"
-          label="Never connected"
-          checked={showNeverConnected}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            onUpdateFilters({ ...filters, showNeverConnected: e.target.checked })
-          }
-        />
-        <Form.Check
-          type="checkbox"
-          id="checkbox-deletion-in-progress"
-          label="Deletion in progress"
-          checked={showDeletionInProgress}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            onUpdateFilters({ ...filters, showDeletionInProgress: e.target.checked })
-          }
-        />
-      </Form.Group>
-      <Form.Group controlId="filterActiveSince" className="mb-4">
-        <Form.Label>
-          <b>Active since</b>
-        </Form.Label>
-        <div className="d-block">
-          <DatePicker
-            maxDate={new Date()}
-            selected={activeSinceDate}
-            onChange={(date: Date) =>
-              onUpdateFilters({
-                ...filters,
-                activeSinceDate: date,
-                showConnected: true,
-                showDisconnected: true,
-                showNeverConnected: true,
-              })
+      <Stack gap={3}>
+        <Form.Group controlId="filterId">
+          <Form.Label>
+            <b>Device ID/name</b>
+          </Form.Label>
+          <Form.Control
+            type="text"
+            value={deviceId}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              onUpdateFilters({ ...filters, deviceId: e.target.value })
+            }
+          />
+        </Form.Group>
+        <Form.Group controlId="filterStatus">
+          <Form.Label>
+            <b>Device status</b>
+          </Form.Label>
+          <Form.Check
+            type="checkbox"
+            id="checkbox-connected"
+            label="Connected"
+            checked={showConnected}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              onUpdateFilters({ ...filters, showConnected: e.target.checked })
+            }
+          />
+          <Form.Check
+            type="checkbox"
+            id="checkbox-disconnected"
+            label="Disconnected"
+            checked={showDisconnected}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              onUpdateFilters({ ...filters, showDisconnected: e.target.checked })
+            }
+          />
+          <Form.Check
+            type="checkbox"
+            id="checkbox-never-connected"
+            label="Never connected"
+            checked={showNeverConnected}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              onUpdateFilters({ ...filters, showNeverConnected: e.target.checked })
+            }
+          />
+          <Form.Check
+            type="checkbox"
+            id="checkbox-deletion-in-progress"
+            label="Deletion in progress"
+            checked={showDeletionInProgress}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              onUpdateFilters({ ...filters, showDeletionInProgress: e.target.checked })
             }
-            customInput={<Form.Control type="search" />}
           />
+        </Form.Group>
+        <Form.Group controlId="filterActiveSince">
+          <Form.Label>
+            <b>Active since</b>
+          </Form.Label>
+          <div className="d-block">
+            <DatePicker
+              maxDate={new Date()}
+              selected={activeSinceDate}
+              onChange={(date: Date) =>
+                onUpdateFilters({
+                  ...filters,
+                  activeSinceDate: date,
+                  showConnected: true,
+                  showDisconnected: true,
+                  showNeverConnected: true,
+                })
+              }
+              customInput={<Form.Control type="search" />}
+            />
+          </div>
+        </Form.Group>
+        <div>
+          <b>Attributes</b>
         </div>
-      </Form.Group>
-      <div className="mb-2">
-        <b>Attributes</b>
-      </div>
-      <Form.Group controlId="filterAttributeKey" className="mb-2">
-        <Form.Label>Key</Form.Label>
-        <Form.Control
-          type="text"
-          value={attributeKey}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            onUpdateFilters({ ...filters, attributeKey: e.target.value })
-          }
-        />
-      </Form.Group>
-      <Form.Group controlId="filterAttributeValue" className="mb-4">
-        <Form.Label>Value</Form.Label>
-        <Form.Control
-          type="text"
-          value={attributeValue}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            onUpdateFilters({ ...filters, attributeValue: e.target.value })
-          }
-        />
-      </Form.Group>
+        <Form.Group controlId="filterAttributeKey">
+          <Form.Label>Key</Form.Label>
+          <Form.Control
+            type="text"
+            value={attributeKey}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              onUpdateFilters({ ...filters, attributeKey: e.target.value })
+            }
+          />
+        </Form.Group>
+        <Form.Group controlId="filterAttributeValue">
+          <Form.Label>Value</Form.Label>
+          <Form.Control
+            type="text"
+            value={attributeValue}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              onUpdateFilters({ ...filters, attributeValue: e.target.value })
+            }
+          />
+        </Form.Group>
+      </Stack>
     </Form>
   );
 };

src/FlowConfigurationPage.tsx

@@ -18,7 +18,7 @@
 
 import React, { useCallback, useMemo, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
-import { Button, Form, Spinner } from 'react-bootstrap';
+import { Button, Form, Spinner, Stack } from 'react-bootstrap';
 
 import { AlertsBanner, useAlerts } from './AlertManager';
 import { useAstarte } from './AstarteManager';
@@ -76,32 +76,38 @@ export default (): React.ReactElement => {
 
   const innerHTML = (
     <Form>
-      <Form.Group controlId="flowNameInput">
-        <Form.Label>Name</Form.Label>
-        <Form.Control
-          type="text"
-          placeholder="Your flow name"
-          value={flow.name}
-          onChange={(e) => setFlow({ ...flow, name: e.target.value })}
-        />
-      </Form.Group>
-      <label>Pipeline ID</label>
-      <p>
-        <i>{pipelineId}</i>
-      </p>
-      <Form.Group controlId="flowConfigInput">
-        <Form.Label>Flow config</Form.Label>
-        <Form.Control
-          as="textarea"
-          rows={12}
-          value={flow.config}
-          onChange={(e) => setFlow({ ...flow, config: e.target.value })}
-        />
-      </Form.Group>
-      <Button variant="primary" disabled={!isValidForm || isCreatingFlow} onClick={createFlow}>
-        {isCreatingFlow && <Spinner className="me-2" size="sm" animation="border" role="status" />}
-        Instantiate Flow
-      </Button>
+      <Stack gap={3}>
+        <Form.Group controlId="flowNameInput">
+          <Form.Label>Name</Form.Label>
+          <Form.Control
+            type="text"
+            placeholder="Your flow name"
+            value={flow.name}
+            onChange={(e) => setFlow({ ...flow, name: e.target.value })}
+          />
+        </Form.Group>
+        <label>Pipeline ID</label>
+        <p>
+          <i>{pipelineId}</i>
+        </p>
+        <Form.Group controlId="flowConfigInput">
+          <Form.Label>Flow config</Form.Label>
+          <Form.Control
+            as="textarea"
+            rows={12}
+            value={flow.config}
+            onChange={(e) => setFlow({ ...flow, config: e.target.value })}
+          />
+        </Form.Group>
+        <div className="d-flex flex-column flex-md-row">
+          <Button variant="primary" disabled={!isValidForm || isCreatingFlow} onClick={createFlow}>
+            {isCreatingFlow && (
+              <Spinner className="me-2" size="sm" animation="border" role="status" />
+            )}
+            Instantiate Flow
+          </Button>
+        </div>
+      </Stack>
     </Form>
   );