strapi-plugin-magic-mail 2.9.2 → 2.10.1

package/dist/_chunks/{App-BZQTPVdT.mjs → App-CAtJIwNW.mjs}

@@ -197,96 +197,147 @@ const StepLabel$1 = styled(Typography)`
   text-align: center;
   transition: all 0.3s ease;
 `;
+const ProviderCategoryHeader = styled(Box)`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 0 0 16px;
+  animation: ${fadeIn$6} 0.4s ease;
+
+  &::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: linear-gradient(90deg, ${colors$1.border}, transparent);
+  }
+`;
+const ProviderCategoryLabel = styled(Typography)`
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: ${colors$1.textLight};
+`;
+const ProviderCategoryHint = styled.span`
+  font-size: 11px;
+  font-weight: 500;
+  padding: 3px 10px;
+  border-radius: 999px;
+  background: ${colors$1.primaryLight};
+  color: ${colors$1.primary};
+  letter-spacing: 0.02em;
+  text-transform: none;
+`;
 const ProvidersGrid = styled(Box)`
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 20px;
-  margin-bottom: 24px;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+  margin: 0 auto 28px;
   animation: ${slideIn} 0.5s ease;
-  max-width: 800px;
-  margin-left: auto;
-  margin-right: auto;
+  max-width: 960px;
+
+  @media (max-width: 960px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  @media (max-width: 600px) {
+    grid-template-columns: 1fr;
+  }
 `;
 const ProviderCard = styled(Box)`
-  background: ${(props) => props.$selected ? colors$1.successLight : props.theme.colors.neutral0};
-  border: 2px solid ${(props) => props.$selected ? colors$1.success : colors$1.border};
-  border-radius: 12px;
-  padding: 24px;
+  background: ${(props) => props.$selected ? `linear-gradient(180deg, ${colors$1.successLight}, rgba(92, 177, 118, 0.04))` : "var(--colors-neutral100, rgba(255,255,255,0.02))"};
+  border: 1.5px solid ${(props) => props.$selected ? colors$1.success : colors$1.border};
+  border-radius: 14px;
+  padding: 22px 20px 20px;
   cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  text-align: center;
-  aspect-ratio: 1;
-  min-height: 180px;
+  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s, border-color 0.2s, background 0.2s;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
+  align-items: flex-start;
+  gap: 14px;
   position: relative;
   overflow: hidden;
-  
+  min-height: 170px;
+
   &::before {
     content: '';
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: linear-gradient(135deg, transparent, rgba(73, 69, 255, 0.05));
+    inset: 0;
+    background: linear-gradient(135deg, transparent 60%, rgba(73, 69, 255, 0.06));
     opacity: 0;
-    transition: opacity 0.3s;
+    transition: opacity 0.25s;
+    pointer-events: none;
   }
-  
+
   &:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 8px 24px rgba(73, 69, 255, 0.12);
+    transform: translateY(-3px);
+    box-shadow: 0 10px 28px rgba(73, 69, 255, 0.18);
     border-color: ${(props) => props.$selected ? colors$1.success : colors$1.primary};
-    
+
     &::before {
       opacity: 1;
     }
   }
-  
-  ${(props) => props.$selected && `
+
+  &:focus-visible {
+    outline: 2px solid ${colors$1.primary};
+    outline-offset: 2px;
+  }
+
+  ${(props) => props.$selected && css`
+    box-shadow: 0 0 0 1px ${colors$1.success}, 0 10px 28px rgba(92, 177, 118, 0.18);
+
     &::after {
       content: '✓';
       position: absolute;
-      top: 8px;
-      right: 8px;
+      top: 12px;
+      right: 12px;
       width: 24px;
       height: 24px;
       background: ${colors$1.success};
-      color: white;
+      color: #fff;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 14px;
-      font-weight: bold;
+      font-size: 13px;
+      font-weight: 700;
+      box-shadow: 0 2px 6px rgba(92, 177, 118, 0.35);
     }
   `}
 `;
 const ProviderIcon = styled.div`
-  width: 56px;
-  height: 56px;
+  width: 48px;
+  height: 48px;
   border-radius: ${(props) => props.$round ? "50%" : "12px"};
-  background: ${(props) => props.$bgColor || colors$1.primaryLight};
+  /* Dark-mode-friendly: mix the accent colour onto an opaque surface
+     instead of using a semi-transparent wash. Semi-transparent colours
+     disappeared against the plugin's dark modal background. */
+  background: ${(props) => props.$bgColor || "rgba(73, 69, 255, 0.2)"};
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: ${(props) => props.$fontSize || "24px"};
-  font-weight: bold;
+  font-size: ${(props) => props.$fontSize || "22px"};
+  font-weight: 700;
   color: ${(props) => props.$color || colors$1.primary};
-  box-shadow: 0 4px 12px ${(props) => props.$shadowColor || "rgba(73, 69, 255, 0.15)"};
+  box-shadow: 0 4px 14px ${(props) => props.$shadowColor || "rgba(73, 69, 255, 0.25)"};
+  flex-shrink: 0;
+`;
+const ProviderTextBlock = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: auto;
 `;
 const ProviderName = styled(Typography)`
   font-weight: 600;
-  font-size: 15px;
+  font-size: 16px;
+  line-height: 1.25;
   color: ${colors$1.text};
   margin: 0;
 `;
-styled(Typography)`
-  font-size: 12px;
+const ProviderTagline = styled(Typography)`
+  font-size: 12.5px;
+  line-height: 1.4;
   color: ${colors$1.textLight};
   margin: 0;
 `;
@@ -852,101 +903,170 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
         },
         step
       )) }),
-      currentStep === 1 && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(ProvidersGrid, { children: [
-        /* @__PURE__ */ jsxs(
-          ProviderCard,
-          {
-            $selected: provider === "gmail-oauth",
-            onClick: () => setProvider("gmail-oauth"),
-            children: [
-              /* @__PURE__ */ jsx(
-                ProviderIcon,
-                {
-                  $round: true,
-                  $bgColor: "#4285F433",
-                  $color: "#4285F4",
-                  $shadowColor: "rgba(66, 133, 244, 0.2)",
-                  children: "G"
-                }
-              ),
-              /* @__PURE__ */ jsx(ProviderName, { children: "Gmail OAuth" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          ProviderCard,
-          {
-            $selected: provider === "microsoft-oauth",
-            onClick: () => setProvider("microsoft-oauth"),
-            children: [
-              /* @__PURE__ */ jsx(
-                ProviderIcon,
-                {
-                  $round: true,
-                  $bgColor: "#00A4EF33",
-                  $color: "#00A4EF",
-                  $shadowColor: "rgba(0, 164, 239, 0.2)",
-                  children: "M"
-                }
-              ),
-              /* @__PURE__ */ jsx(ProviderName, { children: "Microsoft OAuth" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          ProviderCard,
-          {
-            $selected: provider === "yahoo-oauth",
-            onClick: () => setProvider("yahoo-oauth"),
-            children: [
-              /* @__PURE__ */ jsx(
-                ProviderIcon,
-                {
-                  $round: true,
-                  $bgColor: "#6001D233",
-                  $color: "#6001D2",
-                  $shadowColor: "rgba(96, 1, 210, 0.2)",
-                  children: "Y"
-                }
-              ),
-              /* @__PURE__ */ jsx(ProviderName, { children: "Yahoo Mail OAuth" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          ProviderCard,
-          {
-            $selected: provider === "smtp",
-            onClick: () => setProvider("smtp"),
-            children: [
-              /* @__PURE__ */ jsx(ProviderIcon, { children: /* @__PURE__ */ jsx(Server, { style: { width: 28, height: 28 } }) }),
-              /* @__PURE__ */ jsx(ProviderName, { children: "SMTP" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          ProviderCard,
-          {
-            $selected: provider === "sendgrid",
-            onClick: () => setProvider("sendgrid"),
-            children: [
-              /* @__PURE__ */ jsx(ProviderIcon, { $bgColor: "#1E90FF22", $color: "#1E90FF", $shadowColor: "rgba(30, 144, 255, 0.2)", children: /* @__PURE__ */ jsx(Cloud, { style: { width: 28, height: 28 } }) }),
-              /* @__PURE__ */ jsx(ProviderName, { children: "SendGrid" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          ProviderCard,
-          {
-            $selected: provider === "mailgun",
-            onClick: () => setProvider("mailgun"),
-            children: [
-              /* @__PURE__ */ jsx(ProviderIcon, { $bgColor: "#FF6B6B22", $color: "#FF6B6B", $shadowColor: "rgba(255, 107, 107, 0.2)", children: /* @__PURE__ */ jsx(Mail, { style: { width: 28, height: 28 } }) }),
-              /* @__PURE__ */ jsx(ProviderName, { children: "Mailgun" })
-            ]
-          }
-        )
-      ] }) }),
+      currentStep === 1 && /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsxs(ProviderCategoryHeader, { children: [
+          /* @__PURE__ */ jsx(ProviderCategoryLabel, { children: "OAuth Providers" }),
+          /* @__PURE__ */ jsx(ProviderCategoryHint, { children: "Recommended" })
+        ] }),
+        /* @__PURE__ */ jsxs(ProvidersGrid, { children: [
+          /* @__PURE__ */ jsxs(
+            ProviderCard,
+            {
+              $selected: provider === "gmail-oauth",
+              onClick: () => setProvider("gmail-oauth"),
+              role: "button",
+              tabIndex: 0,
+              onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && setProvider("gmail-oauth"),
+              children: [
+                /* @__PURE__ */ jsx(
+                  ProviderIcon,
+                  {
+                    $round: true,
+                    $bgColor: "rgba(66, 133, 244, 0.22)",
+                    $color: "#4285F4",
+                    $shadowColor: "rgba(66, 133, 244, 0.3)",
+                    children: "G"
+                  }
+                ),
+                /* @__PURE__ */ jsxs(ProviderTextBlock, { children: [
+                  /* @__PURE__ */ jsx(ProviderName, { children: "Gmail" }),
+                  /* @__PURE__ */ jsx(ProviderTagline, { children: "Google Workspace & personal accounts · 1-click OAuth" })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            ProviderCard,
+            {
+              $selected: provider === "microsoft-oauth",
+              onClick: () => setProvider("microsoft-oauth"),
+              role: "button",
+              tabIndex: 0,
+              onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && setProvider("microsoft-oauth"),
+              children: [
+                /* @__PURE__ */ jsx(
+                  ProviderIcon,
+                  {
+                    $round: true,
+                    $bgColor: "rgba(0, 164, 239, 0.22)",
+                    $color: "#00A4EF",
+                    $shadowColor: "rgba(0, 164, 239, 0.3)",
+                    children: "M"
+                  }
+                ),
+                /* @__PURE__ */ jsxs(ProviderTextBlock, { children: [
+                  /* @__PURE__ */ jsx(ProviderName, { children: "Microsoft 365" }),
+                  /* @__PURE__ */ jsx(ProviderTagline, { children: "Outlook · Exchange · Azure AD · 1-click OAuth" })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            ProviderCard,
+            {
+              $selected: provider === "yahoo-oauth",
+              onClick: () => setProvider("yahoo-oauth"),
+              role: "button",
+              tabIndex: 0,
+              onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && setProvider("yahoo-oauth"),
+              children: [
+                /* @__PURE__ */ jsx(
+                  ProviderIcon,
+                  {
+                    $round: true,
+                    $bgColor: "rgba(96, 1, 210, 0.22)",
+                    $color: "#9C6BF0",
+                    $shadowColor: "rgba(96, 1, 210, 0.3)",
+                    children: "Y"
+                  }
+                ),
+                /* @__PURE__ */ jsxs(ProviderTextBlock, { children: [
+                  /* @__PURE__ */ jsx(ProviderName, { children: "Yahoo Mail" }),
+                  /* @__PURE__ */ jsx(ProviderTagline, { children: "Yahoo & AOL accounts · 1-click OAuth" })
+                ] })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(ProviderCategoryHeader, { children: /* @__PURE__ */ jsx(ProviderCategoryLabel, { children: "Custom & Transactional APIs" }) }),
+        /* @__PURE__ */ jsxs(ProvidersGrid, { children: [
+          /* @__PURE__ */ jsxs(
+            ProviderCard,
+            {
+              $selected: provider === "smtp",
+              onClick: () => setProvider("smtp"),
+              role: "button",
+              tabIndex: 0,
+              onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && setProvider("smtp"),
+              children: [
+                /* @__PURE__ */ jsx(
+                  ProviderIcon,
+                  {
+                    $bgColor: "rgba(73, 69, 255, 0.22)",
+                    $color: "#7B78FF",
+                    $shadowColor: "rgba(73, 69, 255, 0.3)",
+                    children: /* @__PURE__ */ jsx(Server, { style: { width: 26, height: 26 } })
+                  }
+                ),
+                /* @__PURE__ */ jsxs(ProviderTextBlock, { children: [
+                  /* @__PURE__ */ jsx(ProviderName, { children: "SMTP" }),
+                  /* @__PURE__ */ jsx(ProviderTagline, { children: "Any SMTP server · full control over host, port & auth" })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            ProviderCard,
+            {
+              $selected: provider === "sendgrid",
+              onClick: () => setProvider("sendgrid"),
+              role: "button",
+              tabIndex: 0,
+              onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && setProvider("sendgrid"),
+              children: [
+                /* @__PURE__ */ jsx(
+                  ProviderIcon,
+                  {
+                    $bgColor: "rgba(30, 144, 255, 0.22)",
+                    $color: "#4FA8FF",
+                    $shadowColor: "rgba(30, 144, 255, 0.3)",
+                    children: /* @__PURE__ */ jsx(Cloud, { style: { width: 26, height: 26 } })
+                  }
+                ),
+                /* @__PURE__ */ jsxs(ProviderTextBlock, { children: [
+                  /* @__PURE__ */ jsx(ProviderName, { children: "SendGrid" }),
+                  /* @__PURE__ */ jsx(ProviderTagline, { children: "Transactional API · high deliverability · analytics" })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            ProviderCard,
+            {
+              $selected: provider === "mailgun",
+              onClick: () => setProvider("mailgun"),
+              role: "button",
+              tabIndex: 0,
+              onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && setProvider("mailgun"),
+              children: [
+                /* @__PURE__ */ jsx(
+                  ProviderIcon,
+                  {
+                    $bgColor: "rgba(255, 107, 107, 0.22)",
+                    $color: "#FF8A8A",
+                    $shadowColor: "rgba(255, 107, 107, 0.3)",
+                    children: /* @__PURE__ */ jsx(Mail, { style: { width: 26, height: 26 } })
+                  }
+                ),
+                /* @__PURE__ */ jsxs(ProviderTextBlock, { children: [
+                  /* @__PURE__ */ jsx(ProviderName, { children: "Mailgun" }),
+                  /* @__PURE__ */ jsx(ProviderTagline, { children: "Developer-first API · EU/US regions · routes & webhooks" })
+                ] })
+              ]
+            }
+          )
+        ] })
+      ] }),
       currentStep === 2 && /* @__PURE__ */ jsx(FormSection, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 4, style: { width: "100%" }, children: [
         /* @__PURE__ */ jsx(FullWidthField, { children: /* @__PURE__ */ jsxs(Field.Root, { required: true, children: [
           /* @__PURE__ */ jsx(Field.Label, { children: "Account Name" }),

package/dist/admin/index.js

@@ -68,7 +68,7 @@ const index = {
         id: `${pluginId}.plugin.name`,
         defaultMessage: "MagicMail"
       },
-      Component: () => Promise.resolve().then(() => require("../_chunks/App-BSZzEkaa.js")),
+      Component: () => Promise.resolve().then(() => require("../_chunks/App-2Bg4LxwL.js")),
       permissions: pluginPermissions
     });
     app.createSettingSection(

package/dist/admin/index.mjs

@@ -67,7 +67,7 @@ const index = {
         id: `${pluginId}.plugin.name`,
         defaultMessage: "MagicMail"
       },
-      Component: () => import("../_chunks/App-BZQTPVdT.mjs"),
+      Component: () => import("../_chunks/App-CAtJIwNW.mjs"),
       permissions: pluginPermissions
     });
     app.createSettingSection(