@truedat/core 8.14.3 → 8.14.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "8.14.3",
+  "version": "8.14.5",
   "description": "Truedat Web Core",
   "sideEffects": [
     "**/*.css",
@@ -57,7 +57,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.14.3",
+    "@truedat/test": "8.14.5",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -99,5 +99,5 @@
     "swr": "^2.3.3",
     "turndown": "^7.2.2"
   },
-  "gitHead": "ca5cc79e39ed78a1b5e317d825832e0676b011f6"
+  "gitHead": "a792103a77b3b2392be5777a8dc6675ac3882ffd"
 }

package/src/components/FilterDropdown.js

@@ -1,7 +1,7 @@
 import _ from "lodash/fp";
 import { useState, useEffect } from "react";
 import PropTypes from "prop-types";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import {
   Label,
   Icon,
@@ -25,6 +25,7 @@ export const FilterDropdown = ({
   removeFilter,
   toggleFilterValue,
 }) => {
+  const { formatMessage } = useIntl();
   const [selected, setSelected] = useState();
   const [query, setQuery] = useState();
 
@@ -64,6 +65,10 @@ export const FilterDropdown = ({
   return (
     <Dropdown
       item
+      aria-label={formatMessage({
+        id: `filters.${filter}`,
+        defaultMessage: removePrefix(filter),
+      })}
       floating
       scrolling
       icon={false}
@@ -76,6 +81,21 @@ export const FilterDropdown = ({
           />
           <Icon
             name="delete"
+            role="button"
+            tabIndex={0}
+            onFocus={(event) => event.stopPropagation()}
+            aria-hidden={false}
+            aria-label={formatMessage({
+              id: "actions.delete",
+              defaultMessage: "Delete",
+            })}
+            onKeyDown={(event) => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                event.stopPropagation();
+                removeFilter({ filter });
+              }
+            }}
             onClick={(e) => {
               e.preventDefault();
               e.stopPropagation();

package/src/components/FilterItem.js

@@ -33,6 +33,12 @@ export const FilterItem = ({
   option: { text, value },
 }) => (
   <Dropdown.Item
+    tabIndex={0}
+    onKeyDown={(event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        preventDefault(event, () => toggleFilterValue({ filter, value }));
+      }
+    }}
     onClick={(e) =>
       preventDefault(e, () => toggleFilterValue({ filter, value }))
     }

package/src/components/ScrollToTop.js

@@ -1,19 +1,32 @@
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import { useLocation } from "react-router";
 
-function ScrollToTop({ children }) {
+const NO_PRESERVED_ROUTES = [];
+const withinRoute = (pathname, route) =>
+  pathname === route || pathname.startsWith(`${route}/`);
+
+function ScrollToTop({ children, preserveWithin = NO_PRESERVED_ROUTES }) {
   const location = useLocation();
+  const previousLocation = useRef(null);
 
   useEffect(() => {
-    window.scrollTo(0, 0);
-  }, [location]);
+    const preserveScroll = preserveWithin.some(
+      (route) =>
+        previousLocation.current &&
+        withinRoute(previousLocation.current.pathname, route) &&
+        withinRoute(location.pathname, route),
+    );
+    if (!preserveScroll) window.scrollTo(0, 0);
+    previousLocation.current = location;
+  }, [location, preserveWithin]);
 
   return children;
 }
 
 ScrollToTop.propTypes = {
   children: PropTypes.node,
+  preserveWithin: PropTypes.arrayOf(PropTypes.string),
 };
 
 export default ScrollToTop;

package/src/components/__tests__/FilterDropdown.spec.js

@@ -1,6 +1,6 @@
 import _ from "lodash/fp";
 import { renderWithIntl as render } from "@truedat/test/renderWithIntl";
-import { waitFor, within } from "@testing-library/react";
+import { act, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import { FilterDropdown } from "../FilterDropdown";
@@ -181,3 +181,20 @@ describe("<FilterDropdown/>", () => {
     });
   });
 });
+
+it("removes the filter with the keyboard without opening it", async () => {
+  const removeFilter = jest.fn();
+  const openFilter = jest.fn();
+  const rendered = render(
+    <FilterDropdown
+      {...props}
+      options={null}
+      removeFilter={removeFilter}
+      openFilter={openFilter}
+    />,
+  );
+  act(() => rendered.getByRole("button", { name: "Delete" }).focus());
+  await user.keyboard("{Enter}");
+  expect(removeFilter).toHaveBeenCalledWith({ filter: "foo" });
+  expect(openFilter).not.toHaveBeenCalled();
+});

package/src/components/__tests__/FilterItem.spec.js

@@ -1,5 +1,6 @@
 import { renderWithIntl as render } from "@truedat/test/renderWithIntl";
 import { waitForLoad } from "@truedat/test/waitForLoad";
+import userEvent from "@testing-library/user-event";
 import { FilterItem } from "../FilterItem";
 
 describe("<FilterItem/>", () => {
@@ -25,3 +26,23 @@ describe("<FilterItem/>", () => {
     expect(props.toggleFilterValue).toHaveBeenCalledTimes(1);
   });
 });
+
+it("toggles an option with the keyboard", async () => {
+  const toggleFilterValue = jest.fn();
+  const rendered = render(
+    <FilterItem
+      filter="foo"
+      active={false}
+      option={{ value: "bar", text: "Bar" }}
+      toggleFilterValue={toggleFilterValue}
+    />,
+  );
+  const user = userEvent.setup({ delay: null });
+  rendered.getByRole("option").focus();
+  await user.keyboard("{Enter} ");
+  expect(toggleFilterValue).toHaveBeenCalledTimes(2);
+  expect(toggleFilterValue).toHaveBeenCalledWith({
+    filter: "foo",
+    value: "bar",
+  });
+});

package/src/components/__tests__/ScrollToTop.spec.js

@@ -0,0 +1,54 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { Link, MemoryRouter, useNavigate } from "react-router";
+import ScrollToTop from "../ScrollToTop";
+
+const Navigation = () => {
+  const navigate = useNavigate();
+  return (
+    <>
+      <Link to="/users/1">User</Link>
+      <Link to="/users/1/edit_password">Password</Link>
+      <Link to="/users">Close</Link>
+      <Link to="/groups">Groups</Link>
+      <Link to="/users-other">Other</Link>
+      <button onClick={() => navigate(-1)}>Back</button>
+    </>
+  );
+};
+
+it("preserves scroll between users and their modals, including browser back", () => {
+  const scroll = jest.spyOn(window, "scrollTo").mockImplementation(() => {});
+  render(
+    <MemoryRouter initialEntries={["/users"]}>
+      <ScrollToTop preserveWithin={["/users"]}>
+        <Navigation />
+      </ScrollToTop>
+    </MemoryRouter>,
+  );
+  expect(scroll).toHaveBeenCalledTimes(1);
+  ["User", "Password", "Close", "Back"].forEach((name) =>
+    fireEvent.click(screen.getByText(name)),
+  );
+  expect(scroll).toHaveBeenCalledTimes(1);
+  fireEvent.click(screen.getByText("Groups"));
+  expect(scroll).toHaveBeenCalledTimes(2);
+  fireEvent.click(screen.getByText("Close"));
+  expect(scroll).toHaveBeenCalledTimes(3);
+  fireEvent.click(screen.getByText("Other"));
+  expect(scroll).toHaveBeenCalledTimes(4);
+  scroll.mockRestore();
+});
+
+it("retains the default scroll reset behavior without preserved routes", () => {
+  const scroll = jest.spyOn(window, "scrollTo").mockImplementation(() => {});
+  render(
+    <MemoryRouter initialEntries={["/users"]}>
+      <ScrollToTop>
+        <Navigation />
+      </ScrollToTop>
+    </MemoryRouter>,
+  );
+  fireEvent.click(screen.getByText("User"));
+  expect(scroll).toHaveBeenCalledTimes(2);
+  scroll.mockRestore();
+});

package/src/components/__tests__/__snapshots__/FilterDropdown.spec.js.snap

@@ -4,6 +4,7 @@ exports[`<FilterDropdown/> matches the latest snapshot 1`] = `
 <div>
   <div
     aria-expanded="true"
+    aria-label="foo"
     class="ui active visible floating item scrolling dropdown"
     role="listbox"
     tabindex="0"
@@ -13,8 +14,11 @@ exports[`<FilterDropdown/> matches the latest snapshot 1`] = `
     >
       foo
       <i
-        aria-hidden="true"
+        aria-hidden="false"
+        aria-label="Delete"
         class="delete icon"
+        role="button"
+        tabindex="0"
       />
     </div>
     <div
@@ -24,6 +28,7 @@ exports[`<FilterDropdown/> matches the latest snapshot 1`] = `
         aria-checked="false"
         class="item"
         role="option"
+        tabindex="0"
       >
         <i
           aria-hidden="true"
@@ -35,6 +40,7 @@ exports[`<FilterDropdown/> matches the latest snapshot 1`] = `
         aria-checked="false"
         class="item"
         role="option"
+        tabindex="0"
       >
         <i
           aria-hidden="true"

package/src/components/__tests__/__snapshots__/FilterItem.spec.js.snap

@@ -6,6 +6,7 @@ exports[`<FilterItem/> matches the latest snapshot 1`] = `
     aria-checked="true"
     class="active item"
     role="option"
+    tabindex="0"
   >
     <i
       aria-hidden="true"

package/src/components/__tests__/__snapshots__/SelectedFilters.spec.js.snap

@@ -38,6 +38,7 @@ exports[`<SelectedFilters/> matches the latest snapshot 1`] = `
     </div>
     <div
       aria-expanded="true"
+      aria-label="foo"
       class="ui active visible floating item scrolling dropdown"
       role="listbox"
       tabindex="0"
@@ -47,8 +48,11 @@ exports[`<SelectedFilters/> matches the latest snapshot 1`] = `
       >
         foo
         <i
-          aria-hidden="true"
+          aria-hidden="false"
+          aria-label="Delete"
           class="delete icon"
+          role="button"
+          tabindex="0"
         />
       </div>
       <div
@@ -58,6 +62,7 @@ exports[`<SelectedFilters/> matches the latest snapshot 1`] = `
           aria-checked="false"
           class="item"
           role="option"
+          tabindex="0"
         >
           <i
             aria-hidden="true"
@@ -71,6 +76,7 @@ exports[`<SelectedFilters/> matches the latest snapshot 1`] = `
           aria-checked="false"
           class="item"
           role="option"
+          tabindex="0"
         >
           <i
             aria-hidden="true"
@@ -84,6 +90,7 @@ exports[`<SelectedFilters/> matches the latest snapshot 1`] = `
     </div>
     <div
       aria-expanded="false"
+      aria-label="bar"
       class="ui floating item scrolling dropdown"
       role="listbox"
       tabindex="0"
@@ -93,8 +100,11 @@ exports[`<SelectedFilters/> matches the latest snapshot 1`] = `
       >
         bar
         <i
-          aria-hidden="true"
+          aria-hidden="false"
+          aria-label="Delete"
           class="delete icon"
+          role="button"
+          tabindex="0"
         />
       </div>
       <div
@@ -144,6 +154,7 @@ exports[`<SelectedFilters/> taxonomy screens matches the latest snapshot 1`] = `
     </div>
     <div
       aria-expanded="true"
+      aria-label="foo"
       class="ui active visible floating item scrolling dropdown"
       role="listbox"
       tabindex="0"
@@ -153,8 +164,11 @@ exports[`<SelectedFilters/> taxonomy screens matches the latest snapshot 1`] = `
       >
         foo
         <i
-          aria-hidden="true"
+          aria-hidden="false"
+          aria-label="Delete"
           class="delete icon"
+          role="button"
+          tabindex="0"
         />
       </div>
       <div
@@ -164,6 +178,7 @@ exports[`<SelectedFilters/> taxonomy screens matches the latest snapshot 1`] = `
           aria-checked="false"
           class="item"
           role="option"
+          tabindex="0"
         >
           <i
             aria-hidden="true"
@@ -177,6 +192,7 @@ exports[`<SelectedFilters/> taxonomy screens matches the latest snapshot 1`] = `
           aria-checked="false"
           class="item"
           role="option"
+          tabindex="0"
         >
           <i
             aria-hidden="true"
@@ -190,6 +206,7 @@ exports[`<SelectedFilters/> taxonomy screens matches the latest snapshot 1`] = `
     </div>
     <div
       aria-expanded="false"
+      aria-label="bar"
       class="ui floating item scrolling dropdown"
       role="listbox"
       tabindex="0"
@@ -199,8 +216,11 @@ exports[`<SelectedFilters/> taxonomy screens matches the latest snapshot 1`] = `
       >
         bar
         <i
-          aria-hidden="true"
+          aria-hidden="false"
+          aria-label="Delete"
           class="delete icon"
+          role="button"
+          tabindex="0"
         />
       </div>
       <div

package/src/i18n/components/LangProvider.js

@@ -82,7 +82,7 @@ const LanguageContextProvider = ({ children, defaultMessages }) => {
 
   const getMessagesForLang = (requestedLang) => {
     if (loading || !requestedLang) return null;
-    return messages[requestedLang] || defaultMessages[requestedLang];
+    return { ...defaultMessages[requestedLang], ...messages[requestedLang] };
   };
 
   const context = {

package/src/i18n/components/Languages.js

@@ -162,7 +162,7 @@ const Languages = () => {
           className="lang-manager-dropdown"
           placeholder={formatMessage({
             id: "i18n.messages.locale.lang_select",
-            defaultMessage: "Select languaje",
+            defaultMessage: "Select language",
           })}
           name="add-locales"
           multiple={false}

package/src/i18n/components/__tests__/LangProvider.spec.js

@@ -0,0 +1,44 @@
+import { render, screen } from "@testing-library/react";
+import { FormattedMessage } from "react-intl";
+import { useLocales } from "../../../hooks/useLocales";
+import { LangProvider, useLanguage } from "../LangProvider";
+
+jest.mock("../../../hooks/useLocales", () => ({ useLocales: jest.fn() }));
+
+const defaults = {
+  en: { existing: "Local", added: "New local message" },
+  es: { added: "Mensaje local" },
+};
+const Catalogs = () => {
+  const { getMessagesForLang } = useLanguage();
+  return (
+    <>
+      <FormattedMessage id="existing" />
+      <FormattedMessage id="added" />
+      <output>{JSON.stringify(getMessagesForLang("es"))}</output>
+    </>
+  );
+};
+
+it("fills missing keys locally while preserving remote translations", () => {
+  useLocales.mockReturnValue({
+    locales: [
+      {
+        lang: "en",
+        is_default: true,
+        is_enabled: true,
+        messages: [{ message_id: "existing", definition: "Remote" }],
+      },
+    ],
+    loading: false,
+  });
+  render(
+    <LangProvider defaultMessages={defaults}>
+      <Catalogs />
+    </LangProvider>,
+  );
+  expect(screen.getByText(/Remote/)).toHaveTextContent("New local message");
+  expect(screen.getByRole("status")).toHaveTextContent(
+    '{"added":"Mensaje local"}',
+  );
+});

package/src/i18n/components/__tests__/__snapshots__/Messages.spec.js.snap

@@ -87,7 +87,7 @@ exports[`<Messages /> matches the latest snapshot 1`] = `
             class="divider default text"
             role="alert"
           >
-            Select languaje
+            Select language
           </div>
           <i
             aria-hidden="true"

package/src/messages/en.js

@@ -1,4 +1,5 @@
 export default {
+  "actions.close": "Close",
   actions: "Actions",
   "actions.cancel": "Cancel",
   "actions.confirm": "Are you sure?",

package/src/messages/es.js

@@ -1,4 +1,5 @@
 export default {
+  "actions.close": "Cerrar",
   actions: "Acciones",
   "actions.cancel": "Cancelar",
   "actions.confirm": "¿Estás seguro?",

package/src/styles/Card.less

@@ -0,0 +1,160 @@
+:root {
+  --card-groups-popup-background: var(--td-card-accent, #002057);
+  --card-groups-popup-text-color: #ffffff;
+  --card-groups-popup-muted-text-color: rgba(255, 255, 255, 0.86);
+  --card-groups-popup-border-color: rgba(255, 255, 255, 0.24);
+  --card-groups-popup-header-background: rgba(255, 255, 255, 0.12);
+  --card-groups-popup-item-background: rgba(255, 255, 255, 0.14);
+  --card-groups-popup-item-border-color: rgba(255, 255, 255, 0.18);
+  --card-groups-popup-marker-background: rgba(255, 255, 255, 0.24);
+  --card-groups-popup-marker-color: #ffffff;
+}
+
+.ui.card {
+  --card-accent-color: var(--td-card-accent, #002057);
+  --card-accent-70: var(--td-card-accent-70, rgba(0, 32, 87, 0.7));
+  --card-border-color: #edf2f7;
+  --card-elevation-shadow: 0 12px 28px -10px rgba(15, 23, 42, 0.28);
+  --card-motion-duration: 300ms;
+  --card-motion-easing: cubic-bezier(0.22, 1, 0.36, 1);
+  border: 1px solid var(--card-border-color);
+  border-radius: 1.5rem;
+  transition:
+    transform var(--card-motion-duration) var(--card-motion-easing),
+    box-shadow var(--card-motion-duration) var(--card-motion-easing);
+  overflow: hidden;
+}
+
+.ui.cards > .card {
+  --card-border-color: #edf2f7;
+  --card-elevation-shadow: 0 12px 28px -10px rgba(15, 23, 42, 0.28);
+  --card-motion-duration: 300ms;
+  --card-motion-easing: cubic-bezier(0.22, 1, 0.36, 1);
+  border: 1px solid var(--card-border-color);
+  margin: 0.875em 0.5em;
+}
+
+/*******************************
+    Unified Card Base
+*******************************/
+
+.ui.card.td-card-base {
+  --card-accent-color: var(--td-card-accent, #002057);
+  --card-accent-shadow: var(--td-card-accent-shadow, rgba(0, 32, 87, 0.18));
+  --card-accent-soft: var(--td-card-accent-soft, rgba(0, 32, 87, 0.12));
+  --card-accent-70: var(--td-card-accent-70, rgba(0, 32, 87, 0.7));
+  --card-secondary-color: var(--td-card-secondary, #ed5c17);
+  --card-motion-duration: 300ms;
+  --card-motion-easing: cubic-bezier(0.22, 1, 0.36, 1);
+
+  position: relative;
+  overflow: hidden;
+  background: #ffffff;
+  border: 1px solid var(--card-border-color);
+  border-radius: var(--uc-top-left-radius, 1.5rem)
+    var(--uc-top-right-radius, 1.5rem) var(--uc-bottom-right-radius, 1.5rem)
+    var(--uc-bottom-left-radius, 1.5rem);
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
+  transition:
+    transform var(--card-motion-duration) var(--card-motion-easing),
+    box-shadow var(--card-motion-duration) var(--card-motion-easing),
+    border-color var(--card-motion-duration) var(--card-motion-easing);
+  will-change: transform;
+}
+
+.ui.card.td-card-base:hover,
+.ui.card.td-card-base:focus-within {
+  border: 1px solid var(--card-border-color);
+  box-shadow: var(--card-elevation-shadow);
+  transform: translateY(-4px);
+}
+
+.ui.card.td-card-base:active {
+  transform: translateY(-1px);
+}
+
+.ui.card.td-card-base:focus-within {
+  outline: 2px solid var(--card-accent-soft);
+  outline-offset: 2px;
+}
+
+.ui.card.td-card-base > .hover-indicator {
+  display: none;
+}
+
+.ui.card.td-card-base.td-card--structure,
+.ui.card.td-card-base.td-card--user-role {
+  width: 100%;
+  max-width: 300px;
+  height: auto;
+  min-height: 130px;
+}
+
+.ui.card.td-card-base.td-card--user {
+  width: 100%;
+  max-width: 330px;
+  height: auto;
+  min-height: 128px;
+}
+
+.ui.card.td-card-base.td-card--group {
+  width: 100%;
+  max-width: 300px;
+  height: auto;
+  min-height: 112px;
+}
+
+.ui.card.td-card-base.td-card--taxonomy {
+  width: 100%;
+  max-width: 290px;
+  height: auto;
+  min-height: 310px;
+}
+
+.ui.card.td-card-base.td-card--domain {
+  width: 100%;
+  max-width: 290px;
+  height: auto;
+  min-height: 240px;
+}
+
+@media (min-width: 768px) {
+  .ui.card.td-card-base.td-card--structure,
+  .ui.card.td-card-base.td-card--user-role {
+    width: 300px;
+    height: 130px;
+  }
+
+  .ui.card.td-card-base.td-card--user {
+    width: 330px;
+    height: auto;
+    min-height: 128px;
+  }
+
+  .ui.card.td-card-base.td-card--group {
+    width: 300px;
+    height: auto;
+    min-height: 112px;
+  }
+
+  .ui.card.td-card-base.td-card--taxonomy {
+    width: 290px;
+    height: 310px;
+  }
+
+  .ui.card.td-card-base.td-card--domain {
+    width: 290px;
+    height: 240px;
+  }
+}
+
+.ui.card:hover,
+.ui.card:focus-within,
+.ui.cards > .card:hover,
+.ui.cards > .card:focus-within,
+.ui.cards > .card.create.link:hover,
+.ui.cards > .card.create.link:focus-within {
+  border: 1px solid var(--card-border-color);
+  box-shadow: var(--card-elevation-shadow);
+  transform: translateY(-4px);
+}

package/src/styles/IconTextControls.less

@@ -30,3 +30,9 @@
     line-height: 1.2;
   }
 }
+
+.button:not(.icon):not(.circular) > .icon {
+  height: auto;
+  line-height: 1;
+  flex-shrink: 0;
+}

package/src/styles/Modal.less

@@ -0,0 +1,28 @@
+@import "./ModalAppearance.less";
+
+:root {
+  --td-danger: #e42135;
+}
+
+.ui.small.modal:not(.user-modal):not(.execution-popup-modal):not(.true-modal),
+.ui.mini.modal:not(.user-modal):not(.execution-popup-modal):not(.true-modal) {
+  .modal-appearance();
+
+  > .close.icon {
+    .modal-close-appearance();
+    width: auto;
+    height: auto;
+  }
+
+  > .actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 0.75rem;
+
+    .button {
+      margin: 0;
+    }
+  }
+}

package/src/styles/ModalAppearance.less

@@ -0,0 +1,52 @@
+.modal-appearance() {
+  padding: 0;
+  border: 0;
+  border-radius: 1rem;
+  box-shadow:
+    0 20px 25px -5px rgba(0, 0, 0, 0.2),
+    0 8px 10px -6px rgba(0, 0, 0, 0.15);
+
+  > .header {
+    padding: 1.5rem 3.5rem 1rem 1.5rem;
+    border-radius: 1rem 1rem 0 0;
+    border-bottom: 0;
+    background: @primaryColor;
+    color: #f8fafc;
+  }
+
+  > .content {
+    padding: 1.625rem 1.5rem 2rem;
+  }
+
+  > .actions {
+    padding: 1rem 1.5rem;
+    padding-bottom: 1rem !important;
+    border-radius: 0 0 1rem 1rem;
+    border-top: 1px solid #e2e8f0;
+    background: #f8fafc;
+  }
+}
+
+.modal-close-appearance() {
+  position: absolute;
+  top: 1.25rem;
+  right: 1rem;
+  padding: 6px;
+  border: none;
+  border-radius: 0.5rem;
+  background: none;
+  color: #f8fafc;
+  cursor: pointer;
+  font-size: 1.25rem;
+  line-height: 1;
+  opacity: 0.8;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  &:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+}

package/src/styles/TrueModal.less

@@ -1,28 +1,19 @@
 @import "./ModalEffects.less";
+@import "./ModalAppearance.less";
 
 .ui.modal.true-modal {
+  .modal-appearance();
   display: flex !important;
   flex-direction: column;
   max-width: calc(100vw - 2rem);
   max-height: calc(100vh - 2rem);
   max-height: calc(100dvh - 2rem);
-  padding: 0;
-  border: 0;
-  border-radius: 1rem;
-  box-shadow:
-    0 20px 25px -5px rgba(0, 0, 0, 0.2),
-    0 8px 10px -6px rgba(0, 0, 0, 0.15);
 
   > .header {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     flex-shrink: 0;
-    padding: 1.5rem 3.5rem 1rem 1.5rem;
-    border-radius: 1rem 1rem 0 0;
-    border-bottom: 0;
-    background: @primaryColor;
-    color: #f8fafc;
 
     > .icon {
       margin: 0;
@@ -43,34 +34,13 @@
   }
 
   > .true-modal-close {
-    position: absolute;
-    top: 1.25rem;
-    right: 1rem;
-    padding: 6px;
-    border: none;
-    border-radius: 0.5rem;
-    background: none;
-    color: #f8fafc;
-    cursor: pointer;
-    font-size: 1.25rem;
-    line-height: 1;
-    opacity: 0.8;
-
-    &:hover {
-      opacity: 1;
-    }
-
-    &:focus-visible {
-      outline: 2px solid currentColor;
-      outline-offset: 2px;
-    }
+    .modal-close-appearance();
   }
 
   > .content {
     flex: 1 1 auto;
     min-height: 0;
     overflow-y: auto;
-    padding: 1.625rem 1.5rem 2rem;
   }
 
   > .actions {
@@ -80,11 +50,6 @@
     justify-content: flex-end;
     align-items: center;
     gap: 0.75rem;
-    padding: 1rem 1.5rem;
-    padding-bottom: 1rem !important;
-    border-radius: 0 0 1rem 1rem;
-    border-top: 1px solid #e2e8f0;
-    background: #f8fafc;
 
     .button {
       margin: 0;