Merge pull request #69 from catenax-ng/fix/New_style_corrections

New style corrections

CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.3.1] - [unreleased]
+
+### Fix
+- Fix styles on Save Reports and Upload Ratings
+
 ## [1.3.0] - 2023-12-06
 
 ### Added 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dashboard-app",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "license": "Apache-2.0",
   "private": true,
   "dependencies": {

src/components/dashboard/Reports/Reports.js

@@ -23,12 +23,14 @@ import Dialog from "@mui/material/Dialog";
 import FormLabel from "@mui/material/FormLabel";
 import TextField from "@mui/material/TextField";
 import FormControlLabel from "@mui/material/FormControlLabel";
+import { Alert, DialogContent } from "@catena-x/portal-shared-components";
+
 import {
-  Button,
-  Input,
   DialogActions,
-  DialogContent,
+  Dropzone,
   DialogHeader,
+  Button,
+  Input,
 } from "cx-portal-shared-components";
 import {
   getReportsByCompanyUser,
@@ -46,7 +48,7 @@ import { CountryContext } from "../../../contexts/country";
 import { CompanyUserContext } from "../../../contexts/companyuser";
 import { ReportContext } from "../../../contexts/reports";
 import { Report } from "../../model/Report";
-import Alert from "@mui/material/Alert";
+
 import { ReloadContext } from "../../../contexts/refresh";
 import CloseIcon from "@mui/icons-material/Close";
 import Collapse from "@mui/material/Collapse";
@@ -212,7 +214,7 @@ const Reports = () => {
     setSeverity("");
     setSeverityMessage("");
     setOpen(!open);
-    setErrorTrigger(true);
+    setErrorTrigger(false);
     setValueDialogTextField(null);
 
     const customSelection = prefixIds.find(
@@ -497,11 +499,19 @@ const Reports = () => {
         />
       </Dialog>
 
-      <Dialog open={open} onClose={closeDialogs} className="Dialog-Expand">
-        <DialogHeader
-          title="Save new Report"
-          intro="Create a new report according the select values"
-        />
+      <Dialog
+        maxWidth="sm"
+        open={open}
+        onClose={closeDialogs}
+        className="Dialog-Expand"
+      >
+        <div className="dialog-header">
+          <DialogHeader
+            className="dialog-header"
+            title="Save new Report"
+            intro="Create a new report according the select values"
+          />
+        </div>
         <div className="Dialog-Expand-Div">
           <FormLabel className="FirstLabel" component="legend">
             Select availability
@@ -527,23 +537,26 @@ const Reports = () => {
               />
             </RadioGroup>
           </div>
-
-          <FormLabel className="SecondLabel" component="legend">
-            Please input the name of the Report
-          </FormLabel>
-
-          <Input
-            data-testid="inputReportName"
-            className="input-report"
-            error={errorTrigger}
-            //helperText={"ERROR"}
-            placeholder="Max 32 Characters"
-            size={"small"}
-            onChange={handleInputReportChange}
-          ></Input>
-          <Alert severity={severity}>
-            <span>{severityMessage}</span>
-          </Alert>
+          <div className="input-report">
+            <Input
+              label={
+                <>
+                  {"Report name"}
+                  <span style={{ color: "red" }}> *</span>
+                </>
+              }
+              data-testid="inputReportName"
+              className=""
+              error={errorTrigger}
+              //helperText={"ERROR"}
+              placeholder="Report name"
+              size={"small"}
+              onChange={handleInputReportChange}
+            ></Input>
+            <Alert severity={severity}>
+              <span>{severityMessage}</span>
+            </Alert>
+          </div>
         </div>
 
         <DialogActions>

src/components/dashboard/Reports/styles.scss

@@ -67,24 +67,26 @@
 
 .Dialog-Expand {
   height: 100% !important;
-  width: 30%;
+  //width: fit-content !important;
   text-align: center;
   margin-left: auto;
   margin-right: auto;
-  min-width: 250px;
+  min-width: 100% !important;
 
-  .Dialog-Expand-Div {
-    text-align: center;
-    background-color: #FFFFFF;
+  .dialog-header {
+  }
 
-    .FirstLabel {
-      margin-left: auto;
-      margin-right: auto;
+  .Dialog-Expand-Div {
+    .secondLabel {
+      text-align: left;
+      margin-bottom: 0.5rem;
     }
 
-    .SecondLabel {
-      margin-left: auto;
-      margin-right: auto;
+    .input-report {
+      flex-direction: column;
+      display: flex;
+      text-align: left;
+      border: hidden !important;
     }
 
     .CheckBox-Div {
@@ -96,13 +98,6 @@
       }
     }
 
-    .input-report {
-      margin-top: 1%;
-      margin-left: 10%;
-      margin-right: 10%;
-      border: 1px solid #000;
-    }
-
     .btn-close {
       margin-right: 5%;
       margin-bottom: 5%;
@@ -122,5 +117,3 @@
     min-width: 250px;
   }
 }
-
-

src/components/dashboard/UploadDownloadZone/UploadDownloadZone.js

@@ -18,16 +18,21 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 import React, { useState, useContext, useEffect } from "react";
-import "./styles.scss";
+import "./dialog-upload.scss";
+
 import {
-  Button,
-  Dropzone,
-  Input,
   Alert,
   DialogHeader,
   DialogContent,
+} from "@catena-x/portal-shared-components";
+
+import {
   DialogActions,
+  Dropzone,
+  Button,
+  Input,
 } from "cx-portal-shared-components";
+
 import Dialog from "@mui/material/Dialog";
 import UserService from "../../services/UserService";
 import FormLabel from "@mui/material/FormLabel";
@@ -73,7 +78,7 @@ const UploadDownloadZone = () => {
   const [date, setDate] = useState("");
 
   //Const for triggering error on Dialog Text Field
-  const [errorTrigger, setErrorTrigger] = React.useState(true);
+  const [errorTrigger, setErrorTrigger] = React.useState(false);
 
   //Validates if next button is active
   const [validateSave, setValidateSave] = useState(true);
@@ -106,7 +111,7 @@ const UploadDownloadZone = () => {
   const openDialog = () => {
     setOpen(!open);
     setValidateSave(true);
-    setErrorTrigger(true);
+    setErrorTrigger(false);
   };
 
   const saveRatingName = (event) => {
@@ -133,7 +138,7 @@ const UploadDownloadZone = () => {
     subtitle: "userUpload.subtitle",
     accept: "text/csv,application/vnd.ms-excel",
     getUploadParams: () => ({
-      url: getCountryRiskApi() +process.env.REACT_APP_UPLOAD_FILE,
+      url: getCountryRiskApi() + process.env.REACT_APP_UPLOAD_FILE,
 
       fields: {
         name: companyUser.name,
@@ -206,13 +211,8 @@ const UploadDownloadZone = () => {
         Upload Rating
       </Button>
 
-      <Dialog
-        open={open}
-        onClose={closeDialogs}
-        maxWidth="lg"
-        className="First-Dialog"
-      >
-        <DialogHeader title="Upload an Rating" />
+      <Dialog open={open} onClose={closeDialogs} className="First-Dialog">
+        <DialogHeader title="Upload a Rating" />
         <DialogContent className="content-expand">
           <div className="Dialog-Expand-Div">
             <FormLabel className="FirstLabel" component="legend">
@@ -264,8 +264,13 @@ const UploadDownloadZone = () => {
             </div>
             <div className="inputrating">
               <Input
+                label={
+                  <>
+                    {"Please write your rating name"}
+                    <span style={{ color: "red" }}> *</span>
+                  </>
+                }
                 data-testid="inputelement"
-                label="Please write your rating name"
                 placeholder="Insert the Rating Name"
                 size={"small"}
                 error={errorTrigger}

src/components/dashboard/UploadDownloadZone/styles.scss → src/components/dashboard/UploadDownloadZone/dialog-upload.scss

@@ -17,35 +17,45 @@
 *
 * SPDX-License-Identifier: Apache-2.0
 ********************************************************************************/
+
+@media (max-width: 1000px) {
+  body {
+    overflow-y: scroll;
+  }
+}
 .upload-content {
   display: flex;
   justify-content: space-evenly;
-  width: 100%;
 }
 
 .First-Dialog {
-  height: 100% !important;;
   text-align: center;
   margin-left: auto;
   margin-right: auto;
   min-width: 250px;
+  overflow-y: auto;
+
+  .css-1sep8xo-MuiDialog-container {
+    height: fit-content;
+  }
 
   .Dialog-Expand-Div {
-    text-align: center;
-    background-color: #FFFFFF;
+    text-align: left;
+    background-color: #ffffff;
     border-radius: 39px !important;
 
     .form-year {
       margin-top: 2%;
     }
 
     .inputrating {
-      margin-top: 5%;
+      margin-top: 2%;
     }
 
     .FirstLabel {
       margin-left: auto;
       margin-right: auto;
+      text-align: center;
     }
 
     .SecondLabel {
@@ -56,7 +66,7 @@
     .CheckBox-Div {
       margin-top: 1%;
       width: auto;
-
+      text-align: center;
       .CheckBox-Div-Radio {
         display: inline;
       }
@@ -74,7 +84,7 @@
 
   .Second-Expand-Div {
     text-align: center;
-    background-color: #FFFFFF;
+    background-color: #ffffff;
     border-radius: 39px !important;
 
     .btn-close-upload-second {