diff --git a/ui/index.html b/ui/index.html index 6cb8c415..6b12cde5 100644 --- a/ui/index.html +++ b/ui/index.html @@ -1,5 +1,5 @@ - + @@ -15,7 +15,7 @@ Sitrep - +
diff --git a/ui/package.json b/ui/package.json index c0b27820..ef00f683 100644 --- a/ui/package.json +++ b/ui/package.json @@ -14,13 +14,13 @@ "@turf/center": "^6.5.0", "@turf/helpers": "^6.5.0", "@watergis/maplibre-gl-export": "~2.0.1", - "bulma": "^0.9.4", + "bulma": "^1.0.0", "classnames": "^2.5.1", "dayjs": "^1.11.11", "graphql": "^16.8.1", "hat": "^0.0.3", "i18next": "^23.11.4", - "i18next-browser-languagedetector": "^7.2.1", + "i18next-browser-languagedetector": "^8.0.0", "lodash": "^4.17.21", "mapbox-gl-style-switcher": "^1.0.11", "maplibre-gl": "^2.4.0", @@ -30,9 +30,9 @@ "react-dom": "^18.3.1", "react-i18next": "^14.1.1", "react-map-gl": "~7.1.7", - "react-markdown": "^8.0.7", - "react-router-dom": "^6.23.0", - "usehooks-ts": "^2.15.0", + "react-markdown": "^9.0.1", + "react-router-dom": "^6.23.1", + "usehooks-ts": "^3.1.0", "uuid": "^9.0.1", "web-vitals": "^3.5.2" }, @@ -66,9 +66,9 @@ ] }, "devDependencies": { - "@testing-library/dom": "^9.3.4", + "@testing-library/dom": "^10.1.0", "@testing-library/jest-dom": "^6.4.5", - "@testing-library/react": "^14.3.1", + "@testing-library/react": "^15.0.7", "@testing-library/user-event": "^14.5.2", "@types/hat": "^0.0.4", "@types/jest": "^29.5.12", @@ -76,29 +76,29 @@ "@types/mapbox-gl": "^2.7.21", "@types/mapbox__mapbox-gl-draw": "~1.4.6", "@types/node": "^20.12.11", - "@types/react": "^18.3.1", + "@types/react": "^18.3.2", "@types/react-color": "^3.0.12", "@types/react-dom": "^18.3.0", "@types/react-router-dom": "^5.3.3", "@types/semver": "^7.5.8", "@types/uuid": "^9.0.8", - "@typescript-eslint/eslint-plugin": "^6.21.0", - "@typescript-eslint/parser": "^6.21.0", + "@typescript-eslint/eslint-plugin": "^7.9.0", + "@typescript-eslint/parser": "^7.9.0", "@vite-pwa/assets-generator": "^0.2.4", "@vitejs/plugin-react-swc": "^3.6.0", "@vitest/coverage-v8": "^1.6.0", "eslint": "^8.57.0", "eslint-config-react-app": "^7.0.1", - "husky": "^8.0.3", + "husky": "^9.0.11", "jest": "^29.7.0", "jsdom": "^24.0.0", "lint-staged": "^15.2.2", "prettier": "^3.2.5", - "sass": "^1.77.0", + "sass": "^1.77.1", "semver": "^7.6.2", "source-map-explorer": "^2.5.3", "ts-jest": "^29.1.2", - "typescript": "^4.9.5", + "typescript": "^5.4.5", "vite": "^5.2.11", "vite-plugin-checker": "^0.6.4", "vite-plugin-eslint": "^1.8.1", diff --git a/ui/src/App.scss b/ui/src/App.scss index 7fe9605b..c2bf3aaa 100644 --- a/ui/src/App.scss +++ b/ui/src/App.scss @@ -1,260 +1,221 @@ -@charset "utf-8"; - -@import "bulma/sass/utilities/initial-variables.sass"; +$orange: #f5743d; +$yellow: #ecb341; +$red: #d60000; +$blue: #0030cc; +$darkBlue: #48d15a; +$navbar-height: 2.25rem; + +$grey-darker: hsl(221, 14%, 21%); +$grey-dark: hsl(221, 14%, 29%); +$grey: hsl(221, 14%, 48%); +$grey-light: hsl(221, 14%, 71%); +$grey-lighter: hsl(221, 14%, 86%); +$grey-lightest: hsl(221, 14%, 93%); + +// Override global Sass variables from the /utilities folder +@use "bulma/sass/utilities" with ( + $family-primary: '"B612",sans-serif', + $family-monospace: '"B612 Mono", monospace', + $primary: $orange, + $warning: $yellow, + $danger: $red, + $info: $blue, + $link: $orange, + $weight-light: 100, + $weight-normal: 300, + $weight-medium: 500, + $weight-semibold: 600, + $weight-bold: 700, + $control-border-width: 2px, + $grey-darker: $grey-darker, + $grey-dark: $grey-dark, + $grey: $grey, + $grey-light: $grey-light, + $grey-lighter: $grey-lighter, + $grey-lightest: $grey-lightest +); + +// Import the components we need +@forward "bulma/sass/base"; +@forward "bulma/sass/helpers"; +@forward "bulma/sass/grid"; + +@forward "bulma/sass/components/breadcrumb"; +@forward "bulma/sass/components/card"; +@forward "bulma/sass/components/dropdown"; +@use "bulma/sass/components/message" with ( + $message-body-padding: 1em 1.5em 0em 1em +); +@use "bulma/sass/components/modal" with ( + $modal-content-width: 80rem +); +@use "bulma/sass/components/navbar" with ( + $navbar-height: $navbar-height +); +@forward "bulma/sass/components/tabs"; + +@use "bulma/sass/form" with ( + $input-shadow: none +); + +// Import the bulma elements we need +@forward "bulma/sass/elements/box"; +@forward "bulma/sass/elements/button"; +@forward "bulma/sass/elements/content"; +@forward "bulma/sass/elements/delete"; +@forward "bulma/sass/elements/icon"; +@forward "bulma/sass/elements/image"; +@forward "bulma/sass/elements/table"; +@forward "bulma/sass/elements/tag"; +@forward "bulma/sass/elements/title"; + +@use "bulma/sass/layout/footer" with ( + $footer-padding: 2rem 1.5rem 2rem +); +@forward "bulma/sass/layout/hero"; +@forward "bulma/sass/layout/section"; +@forward "bulma/sass/layout/level"; +@forward "bulma/sass/layout/container"; + +// Import the themes so that all CSS variables have a value +@forward "bulma/sass/themes"; // Import the fonts @import url("assets/b612-mono/b612-mono.css"); @import url("assets/b612/b612.css"); -// Update Bulma's global variables -$family-sans-serif: 'B612', sans-serif; -$family-monospace: 'B612 Mono', monospace; -$weight-light: 100; -$weight-normal: 300; -$weight-medium: 500; -$weight-semibold: 600; -$weight-bold: 700; - -$warning: rgb(236, 180, 25%); -$primary: hsl(18, 90%, 60%); -$danger: rgb(214, 0, 0%); -$info: hsl(226, 100%, 40%); -$link: hsl(226, 100%, 25%); -$link-hover: hsl(18, 90%, 60%); - -$section-padding: 0.5rem 0.5rem; -$section-padding-desktop: 0.5rem 3rem; - -$footer-padding: 0.5rem 1rem 0.5rem; -$modal-content-width: 80vw; -$message-body-padding: 1rem 1rem 0rem 1rem; -$tabs-border-bottom-width: 2px; - -// Import only what you neesd from Bulma -@import "../node_modules/bulma/sass/base/_all.sass"; -@import "../node_modules/bulma/sass/helpers/_all.sass"; -@import "../node_modules/bulma/sass/utilities/_all.sass"; -@import "../node_modules/bulma/sass/form/_all.sass"; - -$table-cell-border: 1px solid $grey; -$breadcrumb-item-color: $grey-dark; - -// Bulma Elements -@import "../node_modules/bulma/sass/elements/box.sass"; -@import "../node_modules/bulma/sass/elements/button.sass"; -@import "../node_modules/bulma/sass/elements/container.sass"; -@import "../node_modules/bulma/sass/elements/content.sass"; -@import "../node_modules/bulma/sass/elements/icon.sass"; -@import "../node_modules/bulma/sass/elements/image.sass"; -@import "../node_modules/bulma/sass/elements/notification.sass"; -@import "../node_modules/bulma/sass/elements/other.sass"; -// @import "../node_modules/bulma/sass/elements/progress.sass"; -@import "../node_modules/bulma/sass/elements/table.sass"; -@import "../node_modules/bulma/sass/elements/tag.sass"; -@import "../node_modules/bulma/sass/elements/title.sass"; - -// Bulma Components -@import "../node_modules/bulma/sass/components/breadcrumb.sass"; -@import "../node_modules/bulma/sass/components/card.sass"; -@import "../node_modules/bulma/sass/components/dropdown.sass"; -@import "../node_modules/bulma/sass/components/level.sass"; -// @import "../node_modules/bulma/sass/components/media.sass"; -// @import "../node_modules/bulma/sass/components/menu.sass"; -@import "../node_modules/bulma/sass/components/message.sass"; -@import "../node_modules/bulma/sass/components/modal.sass"; -@import "../node_modules/bulma/sass/components/navbar.sass"; -// @import "../node_modules/bulma/sass/components/pagination.sass"; -// @import "../node_modules/bulma/sass/components/panel.sass"; -@import "../node_modules/bulma/sass/components/tabs.sass"; - - -// Bulma Form -@import "../node_modules/bulma/sass/form/shared.sass"; -@import "../node_modules/bulma/sass/form/input-textarea.sass"; -@import "../node_modules/bulma/sass/form/checkbox-radio.sass"; -@import "../node_modules/bulma/sass/form/select.sass"; -// @import "../node_modules/bulma/sass/form/file.sass"; -@import "../node_modules/bulma/sass/form/tools.sass"; - -// Bulma Grid -@import "../node_modules/bulma/sass/grid/columns.sass"; - - -// Bulma Layout -@import "../node_modules/bulma/sass/layout/hero.sass"; -@import "../node_modules/bulma/sass/layout/section.sass"; -@import "../node_modules/bulma/sass/layout/footer.sass"; - -body { - &.default { - display: flex; - // use this if navbar is NOT fixed (default) - min-height: 100vh; - flex-direction: column; - } - - &.has-navbar-fixed-top { - display: flex; - // use this if navbar is fixed - min-height: calc(100vh - #{$navbar-height}); - flex-direction: column; - } -} +// Other customizations section { - &.is-fullheight-with-navbar { - min-height: calc(100vh - #{$navbar-height}); - } + &.is-fullheight-with-navbar { + min-height: calc(100vh - #{$navbar-height}); + } } -.navbar { - width: 100vw; -} - - .content { - h1 { - font-size: 1.2rem; - } + h1 { + font-size: 1.2rem; + } - h2 { - font-size: 1.1rem; - } + h2 { + font-size: 1.1rem; + } - h3 { - font-size: 1.0rem; - } + h3 { + font-size: 1rem; + } - h4 { - font-size: 0.9rem; - } + h4 { + font-size: 0.9rem; + } } .content.is-normal { - font-size: 0.9rem; + font-size: 0.9rem; } .message a:not(.button):not(.tag):not(.dropdown-item) { - text-decoration: none; + text-decoration: none; } .table { - is-fixed { - table-layout: fixed; - } + is-fixed { + table-layout: fixed; + } - .tbody { - tr {} + .tbody { + tr { } - + } } .message-sheet { - .firstRow { - width: 150px; - } + .firstRow { + width: 150px; + } - .contentBox { - height: 400px; - } + .contentBox { + height: 400px; + } } .input:invalid { - border-color: $danger; + border-color: $red; } .mapboxgl-map { - min-height: 85vh; -} - -button { - &.is-ahref { - appearance: unset; - background-color: transparent; - color: $link; - border: none; - // padding: 0; - font-size: 1em; - cursor: pointer; - - &:hover { - color: $link-hover; - } - } + min-height: 79vh; } @media screen { - .is-print { - display: none !important; - } + .is-print { + display: none !important; + } } @media print { + @page { + // size: A4 landscape; - @page { - // size: A4 landscape; - - @bottom-right { - content: counter(page); - } - - @bottom-center { - content: "SitRep"; - } + @bottom-right { + content: counter(page); } - .is-hidden-print { - // .no-break { - // word-break: normal; - // min-width: 150px; - // } - display: none !important; + @bottom-center { + content: "SitRep"; } + } + .is-hidden-print { + // .no-break { + // word-break: normal; + // min-width: 150px; + // } + display: none !important; + } - .table { - font-size: 11px; - } + .table { + font-size: 11px; + } - .title.is-1 { - font-size: 24px; - } + .title.is-1 { + font-size: 24px; + } - .title.is-2 { - font-size: 20px; - } + .title.is-2 { + font-size: 20px; + } - .title.is-3 { - font-size: 18px; - } + .title.is-3 { + font-size: 18px; + } - .title.is-4 { - font-size: 18px; - } + .title.is-4 { + font-size: 18px; + } - .title.is-4 { - font-size: 18px; - } + .title.is-4 { + font-size: 18px; + } + .content.is-normal { + font-size: 11px; + } - .content.is-normal { - font-size: 11px; + .content { + h1 { + font-size: 14px; } - .content { - h1 { - font-size: 14px; - } - - h2 { - font-size: 12px; - } + h2 { + font-size: 12px; + } - h3 { - font-size: 12px; - } + h3 { + font-size: 12px; + } - h4 { - font-size: 11px; - } + h4 { + font-size: 11px; } -} \ No newline at end of file + } +} diff --git a/ui/src/components/Footer.tsx b/ui/src/components/Footer.tsx index f4d9a3d4..d7d30779 100644 --- a/ui/src/components/Footer.tsx +++ b/ui/src/components/Footer.tsx @@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; function Footer() { return ( -