diff --git a/CHANGELOG.md b/CHANGELOG.md index 2785d595ff6b3fa05849caebd409ca87552716af..5b559302c9e17d8a9b43d5b0af9440171496479e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -39,5 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 * Styling of the query filters (even columns where all filters are aligned horizontally). * UTF8 operator symbols for the query filters instead of ascii based ones (e.g. `≥` instead of `>=`). +* [IndiScale#8](https://gitlab.indiscale.com/caosdb/src/caosdb-webui-core-components/-/issues/8) + files-ui-react dependency would load fonts from google.com. ### Security diff --git a/package.json b/package.json index 604016ee64a378a2a8c7c233a7ef4ea9d8469212..2958a59c454fd100197ff197f42f66e195725c49 100644 --- a/package.json +++ b/package.json @@ -23,8 +23,8 @@ "i18n": "i18next --config .i18next-parser.config.js \"src/**/*.{js,jsx}\"" }, "dependencies": { - "@files-ui/react": "^1.0.8", "@indiscale/caosdb-webui-info-service": "^0.0.2", + "@indiscale/files-ui-react": "^1.2.4", "i18next": "^23.4.9", "i18next-resources-to-backend": "^1.1.4", "prop-types": "^15.8.1", @@ -63,7 +63,7 @@ "react": "^18.2.0", "react-bootstrap": "^2.7.2", "react-dom": "^18.2.0", - "sass": "^1.58.3", + "sass": "^1.58.3 <1.77.7", "sass-loader": "^13.2.0", "style-loader": "^3.3.1", "webpack": "^5.75.0", diff --git a/src/components/FileUpload.jsx b/src/components/FileUpload.jsx index 0a8cd36c00b9f2fd55db326438aca7746980bcb2..f9d6a8aacc7f32ea6bd9d5efae7baef6baad7057 100644 --- a/src/components/FileUpload.jsx +++ b/src/components/FileUpload.jsx @@ -6,7 +6,7 @@ import React, { useState, useCallback, } from "react"; -import { Dropzone, FileMosaic } from "@files-ui/react"; +import { Dropzone, FileMosaic } from "@indiscale/files-ui-react"; import { Message } from "./Message"; import { Await } from "./Await"; import { LoadingInfo } from "./LoadingInfo"; diff --git a/src/index.scss b/src/index.scss index fa3ce4f0d774c0308117a9ab21b5b7606daef2c2..bd8c45d95542010f4972cc9458f0eb86857b11d8 100644 --- a/src/index.scss +++ b/src/index.scss @@ -3,68 +3,74 @@ $footer-body-color: lightgray; .user-component .alert { - padding-top: 0.375rem; - padding-bottom: 0.375rem; - font-size: 1rem; - margin: 0; + padding-top: 0.375rem; + padding-bottom: 0.375rem; + font-size: 1rem; + margin: 0; } header { - border-bottom: 1px solid rgba(0, 0, 0, 0.15); - border-radius: 0; + border-bottom: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 0; } footer { - color: darken($footer-body-color, 30%); - - .nav { - border-bottom: 1px solid darken($footer-body-color, 20%); - } - .nav-link { - color: darken($footer-body-color, 30%) !important; - } - .nav-link:hover { - color: darken($footer-body-color, 40%) !important; - } - .footer-body { - border-top: 1px solid darken($footer-body-color, 10%); - background-color: $footer-body-color; - min-height: 20rem; - } - .footer-border { - height: 3rem; - box-shadow: 0px -5px 7px -5px rgba(0, 0, 0, 0.4) inset; - -webkit-box-shadow: 0px -5px 7px -5px rgba(0, 0, 0, 0.4) inset; - -moz-box-shadow: 0px -5px 6px -7px rgba(0, 0, 0, 0.4) inset; - } + color: darken($footer-body-color, 30%); + + .nav { + border-bottom: 1px solid darken($footer-body-color, 20%); + } + + .nav-link { + color: darken($footer-body-color, 30%) !important; + } + + .nav-link:hover { + color: darken($footer-body-color, 40%) !important; + } + + .footer-body { + border-top: 1px solid darken($footer-body-color, 10%); + background-color: $footer-body-color; + min-height: 20rem; + } + + .footer-border { + height: 3rem; + box-shadow: 0px -5px 7px -5px rgba(0, 0, 0, 0.4) inset; + -webkit-box-shadow: 0px -5px 7px -5px rgba(0, 0, 0, 0.4) inset; + -moz-box-shadow: 0px -5px 6px -7px rgba(0, 0, 0, 0.4) inset; + } } .caosdb-checkbox { - .caosdb-checkbox-icon { - font-size: 1.3em; - } + .caosdb-checkbox-icon { + font-size: 1.3em; + } - .caosdb-check-box-input { - display: none; - } + .caosdb-check-box-input { + display: none; + } - cursor: pointer; + & { + cursor: pointer; + } - &.read-only { - cursor: auto; - } + &.read-only { + cursor: auto; + } } .color-light-green { - color: #b4e600; + color: #b4e600; } .minicard { - border: 1px solid red; - width: 400px; - display: flex; + border: 1px solid red; + width: 400px; + display: flex; - .minicard-title { - background-color: red; - } + .minicard-title { + background-color: red; + } }