Fix BoreholeNumbersPreview Font and Remove translation text (#1445)

src/client/index.html

@@ -8,7 +8,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
     <meta name="theme-color" content="#000000" />
     <link rel="shortcut icon" href="/favicon.ico" />
-    <link href="/fonts/fonts.css" rel="stylesheet" />
     <link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet" />
 
     <style>

src/client/src/components/buttons/buttons.tsx

@@ -1,5 +1,4 @@
 import { forwardRef } from "react";
-import TranslationText from "../legacyComponents/translationText";
 import { Button } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import EditIcon from "../../assets/icons/edit.svg?react";
@@ -9,11 +8,14 @@ import SaveIcon from "@mui/icons-material/Save";
 import TrashIcon from "../../assets/icons/trash.svg?react";
 import CheckmarkIcon from "../../assets/icons/checkmark.svg?react";
 import { ButtonProps } from "./buttonsInterface";
+import { capitalizeFirstLetter } from "../../utils.ts";
+import { useTranslation } from "react-i18next";
 
 export const BdmsBaseButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  const { t } = useTranslation();
   return (
     <Button ref={ref} {...props} data-cy={props.label?.toLowerCase() + "-button"} startIcon={props.icon}>
-      <TranslationText firstUpperCase id={props.label} />
+      {props.label && capitalizeFirstLetter(t(props.label))}
     </Button>
   );
 });

src/client/src/components/legacyComponents/domain/dropdown/domainDropdown.jsx

@@ -7,7 +7,6 @@ import _ from "lodash";
 import { loadDomains } from "../../../../api-lib/index.js";
 
 import { Form, Header } from "semantic-ui-react";
-import TranslationText from "../../translationText.jsx";
 
 class DomainDropdown extends React.Component {
   constructor(props) {
@@ -115,7 +114,7 @@ class DomainDropdown extends React.Component {
   }
 
   render() {
-    const { domains, schema, search, multiple, additionalValues, readOnly } = this.props,
+    const { domains, schema, search, multiple, additionalValues, readOnly, t } = this.props,
       { selected } = this.state;
     if (!Object.prototype.hasOwnProperty.call(domains.data, schema)) {
       if (domains.isFetching === true) {
@@ -134,7 +133,7 @@ class DomainDropdown extends React.Component {
             style={{
               color: "red",
             }}>
-            <TranslationText id="reset" />
+            {t("reset")}
           </span>
         ),
       });

src/client/src/components/legacyComponents/domain/tree/domainTree.jsx

@@ -5,7 +5,6 @@ import { withTranslation } from "react-i18next";
 import _ from "lodash";
 import { loadDomains } from "../../../../api-lib/index.js";
 import { Dropdown, Form, Header, Icon, Input, List, Modal } from "semantic-ui-react";
-import TranslationText from "../../translationText.jsx";
 import DomainText from "../domainText.jsx";
 
 class DomainTree extends React.Component {
@@ -157,7 +156,7 @@ class DomainTree extends React.Component {
   }
 
   render() {
-    const { domains, schema, isEditable } = this.props;
+    const { domains, schema, isEditable, t } = this.props;
     if (!Object.prototype.hasOwnProperty.call(domains.data, schema)) {
       if (domains.isFetching === true) {
         return "loading translations";
@@ -173,7 +172,7 @@ class DomainTree extends React.Component {
             style={{
               color: "red",
             }}>
-            <TranslationText id="reset" />
+            {t("reset")}
           </span>
         ),
       },
@@ -215,7 +214,7 @@ class DomainTree extends React.Component {
                     style={{
                       color: "red",
                     }}>
-                    <TranslationText id="reset" />
+                    {t("reset")}
                   </span>
                 ),
               },
@@ -367,9 +366,7 @@ class DomainTree extends React.Component {
                     flex: "1 1 100%",
                   }}>
                   <Form.Field>
-                    <label>
-                      <TranslationText id="filterByHierarchicalUnits" />
-                    </label>
+                    <label>{t("filterByHierarchicalUnits")}</label>
                   </Form.Field>
                 </Form>
                 {this.state.levels.map((lev, idx) => {
@@ -465,9 +462,7 @@ class DomainTree extends React.Component {
                     flex: "1 1 100%",
                   }}>
                   <Form.Field>
-                    <label>
-                      <TranslationText id="filterByName" />
-                    </label>
+                    <label>{t("filterByName")}</label>
                     <Input
                       fluid
                       icon="search"

src/client/src/components/legacyComponents/multiple/multipleForm.jsx

@@ -339,7 +339,7 @@ class MultipleForm extends React.Component {
               <Form.Field key={"workgroup"}>
                 <label>{t("workgroup")}</label>
                 {workgroups.length === 0 ? (
-                  <TranslationText id="disabled" />
+                  t("disabled")
                 ) : workgroups.length === 1 ? (
                   workgroups[0].workgroup
                 ) : (

src/client/src/index.css

@@ -1,8 +1,4 @@
-/* body {
-  margin: 0;
-  padding: 0;
-  font-family: sans-serif;
-} */
+
 .ol-popup {
   position: absolute;
   background-color: white;
@@ -138,7 +134,7 @@
   cursor: default !important;
 }
 
-.selectable:hover { 
+.selectable:hover {
   background-color: rgb(233, 233, 233);
 }
 
@@ -149,4 +145,4 @@
 
 .Mui-checked {
   color: black !important;
-}
+}

src/client/src/pages/detail/attachments/table/filesTableComponent.jsx

@@ -3,10 +3,10 @@ import { withTranslation } from "react-i18next";
 import { Button, Checkbox, Icon, Table, TextArea } from "semantic-ui-react";
 import DateText from "../../../../components/legacyComponents/dateText.js";
 import DownloadLink from "../downloadlink.jsx";
-import TranslationText from "../../../../components/legacyComponents/translationText.jsx";
 import { downloadBoreholeAttachment } from "../../../../api/fetchApiV2.js";
 
 const FilesTableComponent = props => {
+  const { t } = props;
   return (
     <div
       className="flex_col flex_fill"
@@ -16,23 +16,11 @@ const FilesTableComponent = props => {
       <Table singleLine>
         <Table.Header>
           <Table.Row>
-            {props.editor === true && (
-              <Table.HeaderCell>
-                <TranslationText id="public" />
-              </Table.HeaderCell>
-            )}
-            <Table.HeaderCell>
-              <TranslationText id="name" />
-            </Table.HeaderCell>
-            <Table.HeaderCell>
-              <TranslationText id="description" />
-            </Table.HeaderCell>
-            <Table.HeaderCell>
-              <TranslationText id="type" />
-            </Table.HeaderCell>
-            <Table.HeaderCell>
-              <TranslationText id="uploaded" />
-            </Table.HeaderCell>
+            {props.editor === true && <Table.HeaderCell>{t("public")}</Table.HeaderCell>}
+            <Table.HeaderCell>{t("name")}</Table.HeaderCell>
+            <Table.HeaderCell>{t("description")}</Table.HeaderCell>
+            <Table.HeaderCell>{t("type")}</Table.HeaderCell>
+            <Table.HeaderCell>{t("uploaded")}</Table.HeaderCell>
             {props.unlocked === true ? <Table.HeaderCell /> : null}
           </Table.Row>
         </Table.Header>

src/client/src/pages/detail/detailPageContent.jsx

@@ -6,7 +6,6 @@ import _ from "lodash";
 import { Redirect, Route, Switch, withRouter } from "react-router-dom";
 import { loadBorehole, patchBorehole, updateBorehole } from "../../api-lib";
 import EditorBoreholeFilesTable from "./attachments/table/editorBoreholeFilesTable.tsx";
-import TranslationText from "../../components/legacyComponents/translationText.jsx";
 import { Dimmer, Loader } from "semantic-ui-react";
 import Lithology from "./form/stratigraphy/lithology";
 import IdentifierSegment from "./form/location/indentifierSegment.jsx";
@@ -273,9 +272,9 @@ class DetailPageContent extends React.Component {
               <Loader>
                 {(() => {
                   if (borehole.isFetching || this.state.loadingFetch === true) {
-                    return <TranslationText id="layer_loading_fetch" />;
+                    return t("layer_loading_fetch");
                   } else if (this.state.creationFetch === true) {
-                    return <TranslationText id="layer_creation_fetch" />;
+                    return t("layer_creation_fetch");
                   }
                 })()}
               </Loader>