fix: adjust forms

src/components/Extensibility/components-form/AlertRenderer.js

@@ -33,7 +33,7 @@ export function AlertRenderer({
 
   let schemaType = 'Information';
   if (severity === 'warning') {
-    schemaType = 'Warning';
+    schemaType = 'Critical';
   } else if (severity === 'error') {
     schemaType = 'Negative';
   } else if (severity === 'success') {

src/components/Extensibility/components/Alert.js

@@ -6,7 +6,7 @@ export const Alert = ({ value, schema, structure, ...props }) => {
 
   let schemaType = 'Information';
   if (structure.severity === 'warning') {
-    schemaType = 'Warning';
+    schemaType = 'Critical';
   } else if (structure.severity === 'error') {
     schemaType = 'Negative';
   } else if (structure.severity === 'success') {

src/components/KymaModules/KymaModulesAddModule.js

@@ -248,6 +248,7 @@ export default function KymaModulesAddModule({
       initialUnchangedResource={initialUnchangedResource}
       afterCreatedCustomMessage={t('kyma-modules.module-added')}
       formWithoutPanel
+      className="add-modules-form"
     >
       {modulesAddData?.length !== 0 ? (
         <>

src/components/KymaModules/KymaModulesAddModule.scss

@@ -75,6 +75,10 @@
   }
 }
 
+.add-modules-form::part(layout) {
+  background-color: var(--sapBackgroundColor);
+}
+
 @container (max-width: 350px) {
   .gridbox-addModule {
     --card-width: 300px;

src/index.tsx

@@ -19,6 +19,7 @@ import '@ui5/webcomponents-icons-tnt/dist/network.js';
 import '@ui5/webcomponents-icons-tnt/dist/application.js';
 import '@ui5/webcomponents-icons-tnt/dist/application-service.js';
 import '@sap-ui/common-css/dist/sap-margin.css';
+import '@sap-ui/common-css/dist/sap-padding.css';
 
 import './styles/reset.css';
 import './styles/sapIllus-Fills.css';

src/shared/ResourceForm/components/Presets.js

@@ -33,7 +33,7 @@ export function Presets({
   return inlinePresets ? (
     presetDropdown
   ) : (
-    <div className="ui5-content-density-compact preset-separator sap-margin-y-tiny sap-padding-x-small">
+    <div className="ui5-content-density-compact preset-separator sap-margin-y-tiny">
       {presetDropdown}
     </div>
   );

src/shared/ResourceForm/components/Presets.scss

@@ -1,5 +1,6 @@
 .resource-form {
   .preset-separator {
     border-bottom: 1px solid var(--sapList_GroupHeaderBorderColor);
+    padding-bottom: 1rem;
   }
 }

src/shared/ResourceForm/components/ResourceForm.scss

@@ -14,6 +14,11 @@ form .resource-form {
   ui5-form-item::part(layout) {
     grid-template-columns: none;
   }
+
+  &::part(layout) {
+    padding: 0;
+  }
+
   form {
     overflow: hidden;
     flex-grow: 1;

src/shared/ResourceForm/inputs/Text.js

@@ -1,8 +1,8 @@
 import { useValidation } from 'shared/hooks/useValidation';
 import { Input } from '@ui5/webcomponents-react';
 
-export function Text(props) {
-  return <WrappedText {...props} />;
+export function Text({ key, ...props }) {
+  return <WrappedText key={key} {...props} />;
 }
 
 export function WrappedText({ value, setValue, onChange, inputRef, ...props }) {

src/shared/components/ResourcesList/ResourcesList.js

@@ -92,6 +92,19 @@ export function ResourcesList({
     return <></>; // wait for the context update
   }
 
+  const allProps = {
+    customHeaderActions,
+    resourceUrl,
+    resourceType,
+    resourceTitle,
+    isCompact,
+    description,
+    layoutNumber,
+    resources,
+    filterFn,
+    ...props,
+  };
+
   const content = (
     <>
       <BannerCarousel
@@ -106,10 +119,10 @@ export function ResourcesList({
       {resources ? (
         <ResourceListRenderer
           resources={(resources || []).filter(filterFn)}
-          {...props}
+          {...allProps}
         />
       ) : (
-        <Resources {...props} />
+        <Resources {...allProps} />
       )}
     </>
   );
@@ -169,9 +182,9 @@ function Resources(props) {
     <ResourceListRenderer
       loading={loading}
       error={error}
-      resources={filter ? (resources || []).filter(filter) : resources || []}
       silentRefetch={silentRefetch}
       {...props}
+      resources={filter ? (resources || []).filter(filter) : resources || []}
     />
   );
 }

src/shared/components/UnsavedMessageBox/UnsavedMessageBox.tsx

@@ -1,12 +1,5 @@
-import {
-  Button,
-  ButtonDomRef,
-  ButtonPropTypes,
-  MessageBox,
-  WithWebComponentPropTypes,
-} from '@ui5/webcomponents-react';
+import { Button, MessageBox } from '@ui5/webcomponents-react';
 import { useTranslation } from 'react-i18next';
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { useRecoilState } from 'recoil';
 import { isResourceEditedState } from 'state/resourceEditedAtom';
 import { isFormOpenState } from 'state/formOpenAtom';
@@ -22,23 +15,13 @@ export function UnsavedMessageBox({ isOpen }: UnsavedMessageBoxProps) {
   );
   const [isFormOpen, setIsFormOpen] = useRecoilState(isFormOpenState);
 
-  const handleClose = (event: {
-    detail: {
-      action:
-        | string
-        | ForwardRefExoticComponent<
-            ButtonPropTypes &
-              WithWebComponentPropTypes &
-              RefAttributes<ButtonDomRef>
-          >;
-    };
-  }) => {
-    if (event.detail.action === '0: custom action') {
+  const handleClose = (action, escapedPressed) => {
+    if (action === '0: custom action' || escapedPressed) {
       if (isResourceEdited.discardAction) {
         isResourceEdited.discardAction();
       }
       setIsFormOpen({ formOpen: false, leavingForm: false });
-    } else if (event.detail.action === '1: custom action') {
+    } else if (action === '1: custom action') {
       setIsResourceEdited({ isEdited: true });
       setIsFormOpen({ formOpen: true, leavingForm: false });
       return;

src/styles/reset.css

@@ -3,94 +3,16 @@
    License: none (public domain)
 */
 
-/* html,
-body,
-div,
-span,
-applet,
-object,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-b,
-u,
-i,
-center,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-video {
+html,
+ul {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
-} */
+}
+*/
 /* HTML5 display-role reset for older browsers */
 article,
 aside,