@truedat/core 8.14.3 → 8.14.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "8.14.3",
+  "version": "8.14.4",
   "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.4",
     "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": "3f043f28fd445df46a419f7872e23fe73e00e93d"
 }

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/__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/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,303 @@
+:root {
+  --td-danger: #e42135;
+}
+
+.ui.small.modal:not(.user-modal):not(.execution-popup-modal),
+.ui.mini.modal:not(.user-modal):not(.execution-popup-modal) {
+  width: min(560px, calc(100vw - 48px));
+  border-radius: 18px;
+  overflow: visible;
+  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.32);
+}
+
+.ui.small.modal:not(.user-modal):not(.execution-popup-modal) > .close.icon,
+.ui.mini.modal:not(.user-modal):not(.execution-popup-modal) > .close.icon {
+  top: 22px;
+  right: 24px;
+  width: 32px;
+  height: 32px;
+  padding: 8px 0 0 0;
+  border-radius: 8px;
+  color: #8aa0bd;
+  text-shadow: none;
+  opacity: 1;
+  transition:
+    color 0.15s ease,
+    background-color 0.15s ease;
+}
+
+.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
+  > .close.icon:hover,
+.ui.mini.modal:not(.user-modal):not(.execution-popup-modal) > .close.icon:hover,
+.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
+  > .close.icon:focus,
+.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
+  > .close.icon:focus {
+  background: #f1f5f9;
+  color: #334155;
+}
+
+.ui.small.modal:not(.user-modal):not(.execution-popup-modal) > .header,
+.ui.mini.modal:not(.user-modal):not(.execution-popup-modal) > .header {
+  min-height: 80px;
+  padding: 20px 58px 20px 28px;
+  border-bottom: 1px solid #e8edf5;
+  border-radius: 18px 18px 0 0;
+  background: #ffffff;
+  color: #1e293b;
+  font-size: 22px;
+  font-weight: 900;
+  line-height: 1.15;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
+  > .header
+  .subheader,
+.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
+  > .header
+  .subheader {
+  margin-top: 8px;
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1.35;
+  text-transform: none;
+}
+
+.ui.small.modal:not(.user-modal):not(.execution-popup-modal) > .content,
+.ui.mini.modal:not(.user-modal):not(.execution-popup-modal) > .content {
+  padding: 30px;
+  background: #ffffff;
+  color: #50627a;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.5;
+  white-space: pre-line;
+}
+
+.ui.small.modal:not(.user-modal):not(.execution-popup-modal) > .content i,
+.ui.mini.modal:not(.user-modal):not(.execution-popup-modal) > .content i {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  min-height: 28px;
+  margin: 0 4px;
+  padding: 5px 10px;
+  border: 1px solid #dbe4ef;
+  border-radius: 7px;
+  background: #eef3f8;
+  color: #002057;
+  font-style: normal;
+  font-weight: 900;
+  line-height: 1.2;
+  overflow-wrap: anywhere;
+  vertical-align: middle;
+}
+
+.ui.small.modal:not(.user-modal):not(.execution-popup-modal) > .actions,
+.ui.mini.modal:not(.user-modal):not(.execution-popup-modal) > .actions {
+  min-height: 0;
+  padding: 0;
+  border-top: 1px solid #e8edf5;
+  border-radius: 0 0 18px 18px;
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.ui.small.modal:not(.user-modal):not(.execution-popup-modal) > .actions::after,
+.ui.mini.modal:not(.user-modal):not(.execution-popup-modal) > .actions::after {
+  display: none;
+}
+
+.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.button,
+.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.button {
+  min-width: 132px;
+  min-height: 48px;
+  margin: 10px 0 0;
+  border-radius: 4px;
+  box-shadow: none;
+  font-size: 12px;
+  font-weight: 900;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.secondary.button,
+.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.secondary.button,
+.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.button:not(.primary):not(.positive):not(.negative),
+.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.button:not(.primary):not(.positive):not(.negative) {
+  border: 1px solid #d8e1ed;
+  background: #ffffff;
+  color: #64748b;
+}
+
+.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.secondary.button:hover,
+.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.secondary.button:hover,
+.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.secondary.button:focus,
+.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.secondary.button:focus,
+.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.button:not(.primary):not(.positive):not(.negative):hover,
+.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.button:not(.primary):not(.positive):not(.negative):hover,
+.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.button:not(.primary):not(.positive):not(.negative):focus,
+.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.button:not(.primary):not(.positive):not(.negative):focus {
+  border-color: #bdc9d8;
+  background: #f8fafc;
+  color: #475569;
+}
+
+.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.primary.button,
+.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.primary.button,
+.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.positive.button,
+.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.positive.button {
+  background: #002057;
+  color: #ffffff;
+}
+
+.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.primary.button:hover,
+.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.primary.button:hover,
+.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.primary.button:focus,
+.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.primary.button:focus,
+.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.positive.button:hover,
+.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.positive.button:hover,
+.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.positive.button:focus,
+.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.positive.button:focus {
+  background: #001840;
+}
+
+.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.negative.button,
+.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.negative.button {
+  background: #ed5c17;
+  color: #ffffff;
+}
+
+.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.negative.button:hover,
+.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.negative.button:hover,
+.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.negative.button:focus,
+.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.negative.button:focus {
+  background: #d94f12;
+}
+
+.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.disabled.button,
+.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.disabled.button,
+.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.button:disabled,
+.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
+  > .actions
+  .ui.button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+@media only screen and (max-width: 767px) {
+  .ui.small.modal:not(.user-modal):not(.execution-popup-modal),
+  .ui.mini.modal:not(.user-modal):not(.execution-popup-modal) {
+    width: calc(100vw - 24px);
+  }
+
+  .ui.small.modal:not(.user-modal):not(.execution-popup-modal) > .header,
+  .ui.mini.modal:not(.user-modal):not(.execution-popup-modal) > .header {
+    min-height: 72px;
+    padding: 18px 54px 18px 20px !important;
+    font-size: 18px;
+  }
+
+  .ui.small.modal:not(.user-modal):not(.execution-popup-modal) > .content,
+  .ui.mini.modal:not(.user-modal):not(.execution-popup-modal) > .content {
+    padding: 22px 20px !important;
+  }
+
+  .ui.small.modal:not(.user-modal):not(.execution-popup-modal) > .actions,
+  .ui.mini.modal:not(.user-modal):not(.execution-popup-modal) > .actions {
+    min-height: auto;
+    padding: 0 !important;
+    flex-direction: column-reverse;
+    align-items: stretch;
+  }
+
+  .ui.small.modal:not(.user-modal):not(.execution-popup-modal)
+    > .actions
+    .ui.button,
+  .ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
+    > .actions
+    .ui.button {
+    width: 100%;
+    margin: 0 !important;
+  }
+}