Continue tidying up styles

reconmap · Nov 4, 2024 · 56465c0 · 56465c0
1 parent 0a6ff6d
commit 56465c0
Show file tree

Hide file tree

Showing 76 changed files with 552 additions and 730 deletions.
diff --git a/environment.local.js b/environment.local.js
@@ -2,22 +2,22 @@ window.env = {
     VITE_SECURE_TRANSPORT_ENABLED: false,
 
     // Reconmap API's URL including protocol and port but not trailing slash
-    VITE_DEFAULT_API_URL: 'http://localhost:5510',
+    VITE_DEFAULT_API_URL: "http://localhost:5510",
 
     // hostname:port for the Reconmap's notifications service
-    VITE_NOTIFICATIONS_SERVICE_HOST_PORT: 'localhost:5520',
+    VITE_NOTIFICATIONS_SERVICE_HOST_PORT: "localhost:5520",
 
     // hostname:port for the Reconmap's agent service
-    VITE_AGENT_SERVICE_HOST_PORT: 'localhost:5520',
+    VITE_AGENT_SERVICE_HOST_PORT: "localhost:5520",
 
-    VITE_LOGO_URL: 'logo-name.png',
+    VITE_LOGO_URL: "/logo-name.png",
 
     // Web application context path e.g. / (for http://localhost:5500) or /reconmap (for http://localhost:5500/reconmap)
     // VITE_CONTEXT_PATH: '/reconmap'
 
     VITE_KEYCLOAK_CONFIG: {
-        url: 'http://localhost:8080',
-        realm: 'reconmap',
-        clientId: 'web-client'
-    }
+        url: "http://localhost:8080",
+        realm: "reconmap",
+        clientId: "web-client",
+    },
 };
diff --git a/index.html b/index.html
@@ -13,7 +13,7 @@
     <script src="/environment.js"></script>
 </head>
 
-<body>
+<body class="has-navbar-fixed-top">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <script type="module" src="/src/index.tsx"></script>

diff --git a/src/Configuration.ts b/src/Configuration.ts
@@ -1,7 +1,6 @@
 import { KeycloakConfig } from "keycloak-js";
 
 const Configuration = {
-
     isSecureTransportEnabled: (): string => window.env.VITE_SECURE_TRANSPORT_ENABLED,
 
     getDefaultApiUrl: (): string => window.env.VITE_DEFAULT_API_URL,
@@ -10,15 +9,16 @@ const Configuration = {
 
     getAgentServiceHostPort: (): number => window.env.VITE_AGENT_SERVICE_HOST_PORT,
 
-    getContextPath: (): string => window.env.VITE_CONTEXT_PATH || '/',
+    getContextPath: (): string => window.env.VITE_CONTEXT_PATH || "/",
 
-    getLogoUrl: (): string => window.env.VITE_LOGO_URL || '/logo-name.png',
+    getLogoUrl: (): string => window.env.VITE_LOGO_URL || "/logo-name.png",
 
-    getKeycloakConfig: (): KeycloakConfig => window.env.VITE_KEYCLOAK_CONFIG || {
-        url: 'http://localhost:8080',
-        realm: 'reconmap',
-        clientId: 'web-client'
-    }
+    getKeycloakConfig: (): KeycloakConfig =>
+        window.env.VITE_KEYCLOAK_CONFIG || {
+            url: "http://localhost:8080",
+            realm: "reconmap",
+            clientId: "web-client",
+        },
 };
 
 export default Configuration;
diff --git a/src/components/attachments/Dropzone.jsx b/src/components/attachments/Dropzone.jsx
@@ -13,25 +13,16 @@ const baseStyle = {
     padding: "20px",
     borderWidth: "var(--borderWidth)",
     borderRadius: "var(--borderRadius)",
-    borderColor: "var(--color-gray)",
     borderStyle: "dashed",
-    backgroundColor: "var(--black)",
-    color: "var(--text-color)",
     outline: "none",
     transition: "border .24s ease-in-out",
 };
 
-const activeStyle = {
-    borderColor: "var(--yellow)",
-};
+const activeStyle = {};
 
-const acceptStyle = {
-    borderColor: "var(--green)",
-};
+const acceptStyle = {};
 
-const rejectStyle = {
-    borderColor: "var(--red)",
-};
+const rejectStyle = {};
 
 const AttachmentsDropzone = ({ parentType, parentId, onUploadFinished = null, attachmentId = null }) => {
     const onFileDrop = (newFiles) => {

diff --git a/src/components/attachments/ImageDropzone.jsx b/src/components/attachments/ImageDropzone.jsx
@@ -1,77 +1,78 @@
-import PrimaryButton from 'components/ui/buttons/Primary';
-import { useMemo, useState } from 'react';
-import { useDropzone } from 'react-dropzone';
-import secureApiFetch from 'services/api';
+import PrimaryButton from "components/ui/buttons/Primary";
+import { useMemo, useState } from "react";
+import { useDropzone } from "react-dropzone";
+import secureApiFetch from "services/api";
 
 const baseStyle = {
     flex: 1,
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    padding: '20px',
-    borderWidth: 'var(--borderWidth)',
-    borderRadius: 'var(--borderRadius)',
-    borderColor: 'var(--color-gray)',
-    borderStyle: 'dashed',
-    backgroundColor: 'var(--black)',
-    color: 'var(--text-color)',
-    outline: 'none',
-    transition: 'border .24s ease-in-out'
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    padding: "20px",
+    borderWidth: "var(--borderWidth)",
+    borderRadius: "var(--borderRadius)",
+    borderStyle: "dashed",
+    outline: "none",
+    transition: "border .24s ease-in-out",
 };
 
 const activeStyle = {
-    borderColor: 'var(--yellow)',
+    borderColor: "var(--yellow)",
 };
 
 const acceptStyle = {
-    borderColor: 'var(--green)'
+    borderColor: "var(--green)",
 };
 
 const rejectStyle = {
-    borderColor: 'var(--red)'
+    borderColor: "var(--red)",
 };
 
-const AttachmentsImageDropzone = ({ parentType, parentId, onUploadFinished = null, uploadFinishedParameter = null, attachmentId = null, maxFileCount = Infinity }) => {
+const AttachmentsImageDropzone = ({
+    parentType,
+    parentId,
+    onUploadFinished = null,
+    uploadFinishedParameter = null,
+    attachmentId = null,
+    maxFileCount = Infinity,
+}) => {
     const onFileDrop = (newFiles) => {
         setAcceptedFiles(newFiles);
     };
 
-    const {
-        getRootProps, getInputProps,
-        isDragActive, isDragAccept, isDragReject
-    } = useDropzone({
+    const { getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject } = useDropzone({
         onDrop: onFileDrop,
-        accept: 'image/jpeg,image/png'
+        accept: "image/jpeg,image/png",
     });
 
     const [acceptedFiles, setAcceptedFiles] = useState([]);
 
-    const files = acceptedFiles.map(file => (
+    const files = acceptedFiles.map((file) => (
         <li key={file.path}>
             {file.path} - {file.size} bytes
         </li>
     ));
 
-    const onUploadButtonClick = ev => {
+    const onUploadButtonClick = (ev) => {
         const formData = new FormData();
-        formData.append('parentType', parentType);
-        formData.append('parentId', parentId);
-        acceptedFiles.forEach(file => {
-            formData.append('attachment[]', file);
-        })
+        formData.append("parentType", parentType);
+        formData.append("parentId", parentId);
+        acceptedFiles.forEach((file) => {
+            formData.append("attachment[]", file);
+        });
 
-        let uri = '/attachments';
+        let uri = "/attachments";
         if (attachmentId) {
-            formData.append('attachmentId', attachmentId);
+            formData.append("attachmentId", attachmentId);
             uri = `/attachments/${attachmentId}`;
         }
 
         secureApiFetch(uri, {
-            method: 'POST',
-            body: formData
+            method: "POST",
+            body: formData,
         })
-            .then(response => response.json())
-            .then(json => {
+            .then((response) => response.json())
+            .then((json) => {
                 setAcceptedFiles([]);
                 if (onUploadFinished) {
                     if (!attachmentId && maxFileCount === 1) {
@@ -82,36 +83,38 @@ const AttachmentsImageDropzone = ({ parentType, parentId, onUploadFinished = nul
                     }
                 }
             })
-            .catch(err => console.error(err));
-    }
+            .catch((err) => console.error(err));
+    };
 
-    const style = useMemo(() => ({
-        ...baseStyle,
-        ...(isDragActive ? activeStyle : {}),
-        ...(isDragAccept ? acceptStyle : {}),
-        ...(isDragReject ? rejectStyle : {}),
-        ...{ maxSize: maxFileCount },
-    }), [
-        isDragActive,
-        isDragAccept,
-        isDragReject,
-        maxFileCount
-    ]);
+    const style = useMemo(
+        () => ({
+            ...baseStyle,
+            ...(isDragActive ? activeStyle : {}),
+            ...(isDragAccept ? acceptStyle : {}),
+            ...(isDragReject ? rejectStyle : {}),
+            ...{ maxSize: maxFileCount },
+        }),
+        [isDragActive, isDragAccept, isDragReject, maxFileCount],
+    );
 
-    return <div className="container">
-        <div {...getRootProps({ style })}>
-            <input {...getInputProps()} />
-            <p>Drag and drop some image(s) here, or click to select images</p>
-            <em>(Only *.jpeg and *.png images will be accepted)</em>
+    return (
+        <div className="container">
+            <div {...getRootProps({ style })}>
+                <input {...getInputProps()} />
+                <p>Drag and drop some image(s) here, or click to select images</p>
+                <em>(Only *.jpeg and *.png images will be accepted)</em>
+            </div>
+            <aside>
+                <h4>Upload list:</h4>
+                {acceptedFiles.length === 0 && <div>(empty)</div>}
+                {acceptedFiles.length > 0 && <ul>{files}</ul>}
+            </aside>
+            <hr />
+            <PrimaryButton onClick={onUploadButtonClick} disabled={acceptedFiles.length === 0}>
+                Upload
+            </PrimaryButton>
         </div>
-        <aside>
-            <h4>Upload list:</h4>
-            {acceptedFiles.length === 0 && <div>(empty)</div>}
-            {acceptedFiles.length > 0 && <ul>{files}</ul>}
-        </aside>
-        <hr />
-        <PrimaryButton onClick={onUploadButtonClick} disabled={acceptedFiles.length === 0}>Upload</PrimaryButton>
-    </div>
-}
+    );
+};
 
 export default AttachmentsImageDropzone;
diff --git a/src/components/badges/UserAvatar.jsx b/src/components/badges/UserAvatar.jsx
@@ -1,25 +1,7 @@
+import VectorImage from "./UserAvatar.svg?react";
+
 const UserAvatar = ({ email, size = "sm", onClick }) => {
-    return (
-        <svg
-            width="24px"
-            height="24px"
-            viewBox="0 0 48 48"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlns:xlink="http://www.w3.org/1999/xlink"
-            fill="#dc8add"
-        >
-            <g stroke-width="0"></g>
-            <g stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.4800000000000001"></g>
-            <g>
-                <g stroke-width="0.00048000000000000007" fill="none" fill-rule="evenodd">
-                    <g fill="#dc8add" fill-rule="nonzero">
-                        <path d="M35.7502,28 C38.0276853,28 39.8876578,29.7909151 39.9950978,32.0427546 L40,32.2487 L40,33 C40,36.7555 38.0583,39.5669 35.0798,41.3802 C32.1509,43.1633 28.2139,44 24,44 C19.7861,44 15.8491,43.1633 12.9202,41.3802 C10.0319285,39.6218485 8.11862909,36.9249713 8.00532378,33.3388068 L8,33 L8,32.2489 C8,29.9703471 9.79294995,28.1122272 12.0440313,28.0048972 L12.2499,28 L35.7502,28 Z M24,4 C29.5228,4 34,8.47715 34,14 C34,19.5228 29.5228,24 24,24 C18.4772,24 14,19.5228 14,14 C14,8.47715 18.4772,4 24,4 Z"></path>
-                    </g>
-                </g>
-            </g>
-        </svg>
-    );
+    return <VectorImage />;
 };
 
 export default UserAvatar;
diff --git a/src/components/badges/UserAvatar.svg b/src/components/badges/UserAvatar.svg
diff --git a/src/components/badges/UserRoleBadge.jsx b/src/components/badges/UserRoleBadge.jsx
@@ -1,25 +1,21 @@
 const UserRoleBadge = ({ role }) => {
-
     const roles = {
-        'administrator': 'red',
-        'superuser': 'blue',
-        'user': 'green',
-        'client': 'yellow',
-    }
+        administrator: "red",
+        superuser: "blue",
+        user: "green",
+        client: "yellow",
+    };
 
-    const color = roles.hasOwnProperty(role) ? roles[role] : 'yellow';
+    const color = roles.hasOwnProperty(role) ? roles[role] : "yellow";
 
     const styles = {
-        color: `var(--${color},white)`,
-        backgroundColor: `var(--${color}Dark)`,
         padding: `var(--paddingBox, .3rem .8rem)`,
-        borderRadius: 'var(--borderRadius, 3px)',
+        borderRadius: "var(--borderRadius, 3px)",
         border: `var(--borderWidth,2px) solid transparent`,
         fontSize: `var(--fontSizeXsmall)`,
-        fontWeight: 'var(--fontBold)',
-    }
+    };
 
-    return <span style={styles}>{role}</span>
-}
+    return <span style={styles}>{role}</span>;
+};
 
 export default UserRoleBadge;