easy-email-pro-theme 1.57.12 → 1.57.13

package/lib/index.js

@@ -8393,6 +8393,29 @@ const Controller = () => {
     ))), /* @__PURE__ */ React__default.createElement("span", { className: "controller-item", "data-enable": zoom > 50 }, /* @__PURE__ */ React__default.createElement(Tooltip, { position: "top", content: t("Zoom out") }, /* @__PURE__ */ React__default.createElement(IconMinus, { onClick: onReduce })))))
   ));
 };
+const VIEWPORT_SWITCH_HALF_WIDTH = 140;
+const viewportGroupStyle = {
+  display: "inline-flex",
+  gap: 2,
+  padding: 2,
+  border: "1px solid var(--color-border-2)",
+  borderRadius: 8,
+  background: "var(--color-bg-2)",
+  boxShadow: "none"
+};
+const getViewportButtonStyle = (active) => ({
+  minWidth: 132,
+  height: 32,
+  padding: "0 18px",
+  border: 0,
+  borderRadius: 6,
+  background: active ? "var(--color-primary-light-1)" : "transparent",
+  color: active ? "rgb(var(--primary-6))" : "var(--color-text-2)",
+  fontSize: 13,
+  fontWeight: active ? 600 : 500,
+  lineHeight: "32px",
+  boxShadow: "none"
+});
 const TabHeader = (props) => {
   const activeTab = useActiveTab();
   const { setActiveTab } = useEditorActions();
@@ -8403,7 +8426,8 @@ const TabHeader = (props) => {
     [setActiveTab]
   );
   const isMobileActive = activeTab === ActiveTabKeys.MOBILE;
-  const grid = "2vw";
+  const desktopViewportButtonClassName = `easy-email-pro-editor-tabs-viewport-button${!isMobileActive ? " easy-email-pro-editor-tabs-viewport-button-active" : ""}`;
+  const mobileViewportButtonClassName = `easy-email-pro-editor-tabs-viewport-button${isMobileActive ? " easy-email-pro-editor-tabs-viewport-button-active" : ""}`;
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
     "div",
     {
@@ -8420,46 +8444,55 @@ const TabHeader = (props) => {
     /* @__PURE__ */ React__default.createElement(
       "div",
       {
-        style: { position: "absolute", left: 0, width: `calc(50% - 125px)` }
+        style: {
+          position: "absolute",
+          left: 0,
+          width: `calc(50% - ${VIEWPORT_SWITCH_HALF_WIDTH}px)`
+        }
       },
       props.left
     ),
-    /* @__PURE__ */ React__default.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ React__default.createElement(Button$2.Group, null, /* @__PURE__ */ React__default.createElement(
-      Button$2,
+    /* @__PURE__ */ React__default.createElement(
+      "div",
       {
-        style: {
-          paddingLeft: grid,
-          paddingRight: grid,
-          borderColor: !isMobileActive ? void 0 : "#000",
-          color: !isMobileActive ? void 0 : "#000",
-          borderRightColor: !isMobileActive ? void 0 : "transparent"
-        },
-        type: "outline",
-        onClick: () => onChangeTab(ActiveTabKeys.DESKTOP)
+        className: "easy-email-pro-editor-tabs-viewport-switch",
+        style: { textAlign: "center" }
       },
-      /* @__PURE__ */ React__default.createElement(Space, null, /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-desktop" }), " ", t("desktop"))
-    ), /* @__PURE__ */ React__default.createElement(
-      Button$2,
-      {
-        style: {
-          paddingLeft: grid,
-          paddingRight: grid,
-          borderColor: isMobileActive ? void 0 : "#000",
-          color: isMobileActive ? void 0 : "#000",
-          borderLeftColor: isMobileActive ? void 0 : "transparent"
+      /* @__PURE__ */ React__default.createElement(
+        Button$2.Group,
+        {
+          className: "easy-email-pro-editor-tabs-viewport-group",
+          style: viewportGroupStyle
         },
-        type: "outline",
-        onClick: () => onChangeTab(ActiveTabKeys.MOBILE)
-      },
-      /* @__PURE__ */ React__default.createElement(Space, null, /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-mobile" }), " ", t("mobile"))
-    ))),
+        /* @__PURE__ */ React__default.createElement(
+          Button$2,
+          {
+            className: desktopViewportButtonClassName,
+            style: getViewportButtonStyle(!isMobileActive),
+            type: "outline",
+            onClick: () => onChangeTab(ActiveTabKeys.DESKTOP)
+          },
+          /* @__PURE__ */ React__default.createElement(Space, { size: 8 }, /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-desktop" }), " ", t("desktop"))
+        ),
+        /* @__PURE__ */ React__default.createElement(
+          Button$2,
+          {
+            className: mobileViewportButtonClassName,
+            style: getViewportButtonStyle(isMobileActive),
+            type: "outline",
+            onClick: () => onChangeTab(ActiveTabKeys.MOBILE)
+          },
+          /* @__PURE__ */ React__default.createElement(Space, { size: 8 }, /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-mobile" }), " ", t("mobile"))
+        )
+      )
+    ),
     /* @__PURE__ */ React__default.createElement(
       "div",
       {
         style: {
           position: "absolute",
           right: 0,
-          width: `calc(50% - 125px)`,
+          width: `calc(50% - ${VIEWPORT_SWITCH_HALF_WIDTH}px)`,
           textAlign: "right"
         }
       },
@@ -30858,7 +30891,7 @@ function TextAndHeadingStyle(props) {
       Form.Item,
       {
         label: /* @__PURE__ */ React__default.createElement("div", null),
-        style: { marginBottom: 0 },
+        style: { marginBottom: 12 },
         labelCol: {
           span: 8,
           offset: 0,

package/lib/style.css

@@ -370,15 +370,72 @@
   border-left: 0 !important;
 }
 
-.arco-radio-group-type-button .arco-radio-button::after {
-  content: " ";
-  display: block;
-  position: absolute;
-  top: -4px;
-  left: -4px;
-  right: -4px;
-  bottom: -4px;
-  background-color: var(--color-fill-2);
+.AttributesPanelWrapper .arco-radio-group-type-button {
+  display: flex;
+  gap: 2px;
+  width: 100%;
+  padding: 3px;
+  border: 0;
+  border-radius: 8px;
+  background: var(--color-fill-3);
+  box-sizing: border-box;
+}
+.AttributesPanelWrapper .arco-radio-group-type-button .arco-radio-button {
+  flex: 1 1 0;
+  min-width: 0;
+  height: 32px;
+  margin: 0;
+  padding: 0 10px;
+  border: 0 !important;
+  border-radius: 6px;
+  background: transparent !important;
+  color: var(--color-text-2);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 32px;
+  box-shadow: none !important;
+  box-sizing: border-box;
+}
+.AttributesPanelWrapper .arco-radio-group-type-button .arco-radio-button::before,
+.AttributesPanelWrapper .arco-radio-group-type-button .arco-radio-button::after {
+  display: none !important;
+}
+.AttributesPanelWrapper .arco-radio-group-type-button .arco-radio-button-inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 0 !important;
+  overflow: hidden;
+  line-height: 1;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.AttributesPanelWrapper .arco-radio-group-type-button .arco-radio-button-inner > div,
+.AttributesPanelWrapper .arco-radio-group-type-button .arco-radio-button-inner .arco-space {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.AttributesPanelWrapper .arco-radio-group-type-button .arco-radio-button:hover {
+  background: var(--color-fill-2) !important;
+  color: var(--color-text-1);
+}
+.AttributesPanelWrapper .arco-radio-group-type-button .arco-radio-checked,
+.AttributesPanelWrapper .arco-radio-group-type-button .arco-radio-button-checked {
+  background: var(--color-bg-2) !important;
+  color: rgb(var(--primary-6)) !important;
+  font-weight: 600;
+  box-shadow: 0 1px 4px rgba(29, 33, 41, 0.12) !important;
 }.easy-email-pro-editor-controller {
   font-size: 14px;
   background: #fff;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy-email-pro-theme",
-  "version": "1.57.12",
+  "version": "1.57.13",
   "description": "",
   "files": [
     "lib"