strapi-plugin-magic-mail 2.0.2 → 2.0.4

package/admin/src/pages/EmailDesigner/TemplateList.jsx

@@ -99,12 +99,12 @@ const ScrollableDialogBody = styled(Box)`
   }
 
   &::-webkit-scrollbar-thumb {
-    background: ${theme.colors.neutral[200]};
+    background: ${props => props.theme.colors.neutral200};
     border-radius: 3px;
   }
-
+  
   &::-webkit-scrollbar-thumb:hover {
-    background: ${theme.colors.neutral[300]};
+    background: ${props => props.theme.colors.neutral300};
   }
 `;
 
@@ -125,7 +125,7 @@ const CodeHeader = styled(Flex)`
 const CodeLabel = styled(Typography)`
   font-size: 15px;
   font-weight: 600;
-  color: ${theme.colors.neutral[800]};
+  color: ${props => props.theme.colors.neutral800};
   display: flex;
   align-items: center;
   gap: 8px;
@@ -337,7 +337,7 @@ const HeaderContent = styled(Flex)`
 `;
 
 const Title = styled(Typography)`
-  color: ${theme.colors.neutral[0]};
+  color: white;
   font-size: 2rem;
   font-weight: 700;
   letter-spacing: -0.025em;
@@ -392,7 +392,7 @@ const StatsGrid = styled.div`
 `;
 
 const StatCard = styled(Box)`
-  background: ${theme.colors.neutral[0]};
+  background: ${props => props.theme.colors.neutral0};
   border-radius: ${theme.borderRadius.lg};
   padding: 28px ${theme.spacing.lg};
   position: relative;
@@ -401,7 +401,7 @@ const StatCard = styled(Box)`
   ${css`animation: ${fadeIn} ${theme.transitions.slow} backwards;`}
   animation-delay: ${props => props.$delay || '0s'};
   box-shadow: ${theme.shadows.sm};
-  border: 1px solid ${theme.colors.neutral[200]};
+  border: 1px solid ${props => props.theme.colors.neutral200};
   min-width: 200px;
   flex: 1;
   text-align: center;
@@ -468,7 +468,7 @@ const StatIcon = styled(Box)`
 const StatValue = styled(Typography)`
   font-size: 2.75rem;
   font-weight: 700;
-  color: ${theme.colors.neutral[800]};
+  color: ${props => props.theme.colors.neutral800};
   line-height: 1;
   margin-bottom: 10px;
   transition: all ${theme.transitions.normal};
@@ -482,7 +482,7 @@ const StatValue = styled(Typography)`
 
 const StatLabel = styled(Typography)`
   font-size: 0.95rem;
-  color: ${theme.colors.neutral[600]};
+  color: ${props => props.theme.colors.neutral600};
   font-weight: 500;
   letter-spacing: 0.025em;
   text-align: center;
@@ -501,12 +501,12 @@ const SectionHeader = styled(Box)`
 `;
 
 const FilterBar = styled(Flex)`
-  background: ${theme.colors.neutral[0]};
+  background: ${props => props.theme.colors.neutral0};
   padding: ${theme.spacing.md} ${theme.spacing.lg};
   border-radius: ${theme.borderRadius.lg};
   margin-bottom: ${theme.spacing.lg};
   box-shadow: ${theme.shadows.sm};
-  border: 1px solid ${theme.colors.neutral[200]};
+  border: 1px solid ${props => props.theme.colors.neutral200};
   gap: ${theme.spacing.md};
   align-items: center;
 `;
@@ -523,7 +523,7 @@ const SearchIcon = styled(MagnifyingGlassIcon)`
   left: 12px;
   width: 16px;
   height: 16px;
-  color: ${theme.colors.neutral[600]};
+  color: ${props => props.theme.colors.neutral600};
   pointer-events: none;
   z-index: 1;
 `;
@@ -536,12 +536,12 @@ const StyledSearchInput = styled(TextInput)`
 const StyledTable = styled(Table)`
   width: 100%;
   thead {
-    background: ${theme.colors.neutral[50]};
-    border-bottom: 2px solid ${theme.colors.neutral[200]};
+    background: ${props => props.theme.colors.neutral100};
+    border-bottom: 2px solid ${props => props.theme.colors.neutral200};
     
     th {
       font-weight: 600;
-      color: ${theme.colors.neutral[700]};
+      color: ${props => props.theme.colors.neutral800};
       font-size: 0.875rem;
       text-transform: uppercase;
       letter-spacing: 0.025em;
@@ -551,28 +551,28 @@ const StyledTable = styled(Table)`
   
   tbody tr {
     transition: all ${theme.transitions.fast};
-    border-bottom: 1px solid ${theme.colors.neutral[100]};
+    border-bottom: 1px solid ${props => props.theme.colors.neutral150};
     
     &:last-child {
       border-bottom: none;
     }
     
     &:hover {
-      background: ${theme.colors.neutral[50]};
+      background: ${props => props.theme.colors.primary100};
     }
     
     td {
       padding: ${theme.spacing.lg} ${theme.spacing.lg};
-      color: ${theme.colors.neutral[700]};
+      color: ${props => props.theme.colors.neutral800};
       vertical-align: middle;
     }
   }
 `;
 
 const EmptyState = styled(Box)`
-  background: ${theme.colors.neutral[0]};
+  background: ${props => props.theme.colors.neutral0};
   border-radius: ${theme.borderRadius.xl};
-  border: 2px dashed ${theme.colors.neutral[200]};
+  border: 2px dashed ${props => props.theme.colors.neutral300};
   padding: 80px 32px;
   text-align: center;
   position: relative;
@@ -639,7 +639,7 @@ const EmptyFeatureItem = styled.div`
   text-align: center;
   gap: ${theme.spacing.sm};
   padding: ${theme.spacing.lg};
-  background: ${theme.colors.neutral[0]};
+  background: ${props => props.theme.colors.neutral0};
   border-radius: ${theme.borderRadius.md};
   box-shadow: ${theme.shadows.sm};
   transition: ${theme.transitions.fast};
@@ -1121,12 +1121,12 @@ const TemplateList = () => {
           <Flex alignItems="center" gap={3}>
             <SparklesIcon style={{ width: 24, height: 24, color: theme.colors.warning[600] }} />
             <Box>
-              <Typography variant="omega" fontWeight="bold" style={{ color: theme.colors.neutral[800] }}>
+              <Typography variant="omega" fontWeight="bold" textColor="neutral800">
                 {limits.emailTemplates.current >= limits.emailTemplates.max 
                   ? `You've reached your ${getTierInfo().name} limit!`
                   : `You're approaching your ${getTierInfo().name} limit!`}
               </Typography>
-              <Typography variant="pi" style={{ color: theme.colors.neutral[600], marginTop: '4px' }}>
+              <Typography variant="pi" textColor="neutral600" style={{ marginTop: '4px' }}>
                 Using {limits.emailTemplates.current} of {limits.emailTemplates.max} templates. 
                 {getTierInfo().next && ` Upgrade to ${getTierInfo().next} for ${getTierInfo().nextTemplates === -1 ? 'unlimited' : getTierInfo().nextTemplates} templates!`}
               </Typography>
@@ -1159,10 +1159,10 @@ const TemplateList = () => {
             
             <Typography 
               variant="alpha" 
+              textColor="neutral800"
               style={{ 
                 fontSize: '1.75rem',
                 fontWeight: '700',
-                color: theme.colors.neutral[800],
                 textAlign: 'center',
                 display: 'block',
               }}
@@ -1244,7 +1244,7 @@ const TemplateList = () => {
         <TemplatesContainer>
           <SectionHeader>
             <Flex justifyContent="space-between" alignItems="center" marginBottom={4}>
-              <Typography variant="delta" style={{ fontSize: '1.5rem', fontWeight: 600, color: theme.colors.neutral[700] }}>
+              <Typography variant="delta" textColor="neutral700" style={{ fontSize: '1.5rem', fontWeight: 600 }}>
                 Email Templates
               </Typography>
               <Button 
@@ -1420,16 +1420,16 @@ const TemplateList = () => {
         </Box>
       ) : (
         <Box
+          background="neutral100"
           style={{
             padding: '80px 32px',
             textAlign: 'center',
-            background: theme.colors.neutral[50],
             borderRadius: theme.borderRadius.lg,
-            border: `1px dashed ${theme.colors.neutral[200]}`,
+            border: '1px dashed #D1D5DB',
           }}
         >
-          <MagnifyingGlassIcon style={{ width: '64px', height: '64px', margin: '0 auto 16px', color: theme.colors.neutral[400] }} />
-          <Typography variant="beta" style={{ marginBottom: '8px', color: theme.colors.neutral[700] }}>
+          <MagnifyingGlassIcon style={{ width: '64px', height: '64px', margin: '0 auto 16px', color: '#9CA3AF' }} />
+          <Typography variant="beta" textColor="neutral700" style={{ marginBottom: '8px' }}>
             No templates found
           </Typography>
           <Typography variant="omega" textColor="neutral600">
@@ -1455,7 +1455,7 @@ const TemplateList = () => {
         <Tabs.Content value="coreEmails">
           <Box style={{ marginTop: '24px' }}>
             <Flex direction="column" gap={2} style={{ marginBottom: '24px' }}>
-              <Typography variant="delta" style={{ fontSize: '1.5rem', fontWeight: 600, color: theme.colors.neutral[700] }}>
+              <Typography variant="delta" textColor="neutral700" style={{ fontSize: '1.5rem', fontWeight: 600 }}>
                 Core Email Templates
               </Typography>
               <Typography variant="omega" textColor="neutral600">
@@ -1463,7 +1463,7 @@ const TemplateList = () => {
               </Typography>
             </Flex>
 
-            <Box background="neutral0" borderRadius={theme.borderRadius.lg} shadow="md" style={{ border: `1px solid ${theme.colors.neutral[200]}`, overflow: 'hidden' }}>
+            <Box background="neutral0" borderRadius={theme.borderRadius.lg} shadow="md" style={{ border: '1px solid #E5E7EB', overflow: 'hidden' }}>
               <Table colCount={2} rowCount={2}>
                 <Thead>
                   <Tr>
@@ -1523,10 +1523,10 @@ const TemplateList = () => {
             display: 'flex',
             flexDirection: 'column'
           }}>
-            <Modal.Header style={{ borderBottom: `1px solid ${theme.colors.neutral[200]}`, paddingBottom: '16px' }}>
+            <Modal.Header style={{ borderBottom: '1px solid #E5E7EB', paddingBottom: '16px' }}>
               <Flex alignItems="center" gap={2}>
                 <BoltIcon style={{ width: 24, height: 24, color: theme.colors.primary[600] }} />
-                <Typography variant="beta" style={{ color: theme.colors.neutral[800] }}>
+                <Typography variant="beta" textColor="neutral800">
                   Send Template: {selectedTemplate.name}
                 </Typography>
               </Flex>
@@ -1541,7 +1541,7 @@ const TemplateList = () => {
                   </CodeLabel>
                   <RecommendedBadge>Empfohlen</RecommendedBadge>
                 </CodeHeader>
-                <Typography variant="pi" style={{ color: theme.colors.neutral[600], marginBottom: '16px' }}>
+                <Typography variant="pi" textColor="neutral600" style={{ marginBottom: '16px' }}>
                   Nutze die standard Strapi Email-Funktion. MagicMail fängt sie automatisch ab und wendet alle Features an.
                 </Typography>
                 <CodeBlockWrapper>
@@ -1596,7 +1596,7 @@ const TemplateList = () => {
                     MagicMail Plugin Service
                   </CodeLabel>
                 </CodeHeader>
-                <Typography variant="pi" style={{ color: theme.colors.neutral[600], marginBottom: '16px' }}>
+                <Typography variant="pi" textColor="neutral600" style={{ marginBottom: '16px' }}>
                   Direkter Zugriff auf den MagicMail Service für erweiterte Optionen.
                 </Typography>
                 <CodeBlockWrapper>
@@ -1647,7 +1647,7 @@ const TemplateList = () => {
                     REST API
                   </CodeLabel>
                 </CodeHeader>
-                <Typography variant="pi" style={{ color: theme.colors.neutral[600], marginBottom: '16px' }}>
+                <Typography variant="pi" textColor="neutral600" style={{ marginBottom: '16px' }}>
                   Für externe Anwendungen, Frontend-Calls oder Postman Tests.
                 </Typography>
                 <CodeBlockWrapper>

package/admin/src/pages/HomePage.jsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { useFetchClient, useNotification } from '@strapi/strapi/admin';
 import { useAuthRefresh } from '../hooks/useAuthRefresh';
 import styled, { keyframes, css } from 'styled-components';
+import { theme } from '../utils/theme';
 import {
   Box,
   Button,
@@ -29,72 +30,6 @@ import {
 } from '@heroicons/react/24/outline';
 import AddAccountModal from '../components/AddAccountModal';
 
-// ================ THEME (Exact copy from magic-sessionmanager) ================
-const theme = {
-  colors: {
-    primary: {
-      50: '#F0F9FF',
-      100: '#E0F2FE',
-      500: '#0EA5E9',
-      600: '#0284C7',
-      700: '#0369A1',
-    },
-    secondary: {
-      500: '#A855F7',
-      600: '#9333EA',
-    },
-    success: {
-      100: '#DCFCE7',
-      500: '#22C55E',
-      600: '#16A34A',
-      700: '#15803D',
-    },
-    warning: {
-      100: '#FEF3C7',
-      500: '#F59E0B',
-      600: '#D97706',
-    },
-    danger: {
-      100: '#FEE2E2',
-      500: '#EF4444',
-      600: '#DC2626',
-    },
-    neutral: {
-      0: '#FFFFFF',
-      50: '#F9FAFB',
-      100: '#F3F4F6',
-      200: '#E5E7EB',
-      600: '#4B5563',
-      700: '#374151',
-      800: '#1F2937',
-    }
-  },
-  shadows: {
-    sm: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)',
-    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
-    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)',
-    xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)',
-  },
-  transitions: {
-    fast: '150ms cubic-bezier(0.4, 0, 0.2, 1)',
-    normal: '300ms cubic-bezier(0.4, 0, 0.2, 1)',
-    slow: '500ms cubic-bezier(0.4, 0, 0.2, 1)',
-  },
-  spacing: {
-    xs: '4px',
-    sm: '8px',
-    md: '16px',
-    lg: '24px',
-    xl: '32px',
-    '2xl': '48px',
-  },
-  borderRadius: {
-    md: '8px',
-    lg: '12px',
-    xl: '16px',
-  }
-};
-
 // ================ ANIMATIONS ================
 const fadeIn = keyframes`
   from { opacity: 0; transform: translateY(10px); }
@@ -196,7 +131,7 @@ const HeaderContent = styled(Flex)`
 `;
 
 const Title = styled(Typography)`
-  color: ${theme.colors.neutral[0]};
+  color: white;
   font-size: 2rem;
   font-weight: 700;
   letter-spacing: -0.025em;
@@ -251,7 +186,7 @@ const StatsGrid = styled.div`
 `;
 
 const StatCard = styled(Box)`
-  background: ${theme.colors.neutral[0]};
+  background: ${props => props.theme.colors.neutral0};
   border-radius: ${theme.borderRadius.lg};
   padding: 28px ${theme.spacing.lg};
   position: relative;
@@ -260,7 +195,7 @@ const StatCard = styled(Box)`
   ${css`animation: ${fadeIn} ${theme.transitions.slow} backwards;`}
   animation-delay: ${props => props.$delay || '0s'};
   box-shadow: ${theme.shadows.sm};
-  border: 1px solid ${theme.colors.neutral[200]};
+  border: 1px solid ${props => props.theme.colors.neutral200};
   min-width: 200px;
   flex: 1;
   text-align: center;
@@ -327,7 +262,7 @@ const StatIcon = styled(Box)`
 const StatValue = styled(Typography)`
   font-size: 2.75rem;
   font-weight: 700;
-  color: ${theme.colors.neutral[800]};
+  color: ${props => props.theme.colors.neutral800};
   line-height: 1;
   margin-bottom: 10px;
   transition: all ${theme.transitions.normal};
@@ -341,7 +276,7 @@ const StatValue = styled(Typography)`
 
 const StatLabel = styled(Typography)`
   font-size: 0.95rem;
-  color: ${theme.colors.neutral[600]};
+  color: ${props => props.theme.colors.neutral600};
   font-weight: 500;
   letter-spacing: 0.025em;
   text-align: center;
@@ -356,9 +291,9 @@ const AccountsContainer = styled(Box)`
 `;
 
 const EmptyState = styled(Box)`
-  background: ${theme.colors.neutral[0]};
+  background: ${props => props.theme.colors.neutral0};
   border-radius: ${theme.borderRadius.xl};
-  border: 2px dashed ${theme.colors.neutral[200]};
+  border: 2px dashed ${props => props.theme.colors.neutral300};
   padding: 80px 32px;
   text-align: center;
   position: relative;
@@ -386,7 +321,7 @@ const OnlineBadge = styled.div`
   width: 12px;
   height: 12px;
   border-radius: 50%;
-  background: ${props => props.$active ? theme.colors.success[500] : theme.colors.neutral[400]};
+  background: ${props => props.$active ? theme.colors.success[500] : props.theme.colors.neutral400};
   display: inline-block;
   margin-right: 8px;
   ${css`animation: ${props => props.$active ? pulse : 'none'} 2s ease-in-out infinite;`}
@@ -394,12 +329,12 @@ const OnlineBadge = styled.div`
 
 const StyledTable = styled(Table)`
   thead {
-    background: ${theme.colors.neutral[50]};
-    border-bottom: 2px solid ${theme.colors.neutral[200]};
+    background: ${props => props.theme.colors.neutral100};
+    border-bottom: 2px solid ${props => props.theme.colors.neutral200};
     
     th {
       font-weight: 600;
-      color: ${theme.colors.neutral[700]};
+      color: ${props => props.theme.colors.neutral800};
       font-size: 0.875rem;
       text-transform: uppercase;
       letter-spacing: 0.025em;
@@ -409,31 +344,31 @@ const StyledTable = styled(Table)`
   
   tbody tr {
     transition: all ${theme.transitions.fast};
-    border-bottom: 1px solid ${theme.colors.neutral[100]};
+    border-bottom: 1px solid ${props => props.theme.colors.neutral150};
     
     &:last-child {
       border-bottom: none;
     }
     
     &:hover {
-      background: ${theme.colors.neutral[50]};
+      background: ${props => props.theme.colors.primary100};
     }
     
     td {
       padding: ${theme.spacing.lg} ${theme.spacing.lg};
-      color: ${theme.colors.neutral[700]};
+      color: ${props => props.theme.colors.neutral800};
       vertical-align: middle;
     }
   }
 `;
 
 const FilterBar = styled(Flex)`
-  background: ${theme.colors.neutral[0]};
+  background: ${props => props.theme.colors.neutral0};
   padding: ${theme.spacing.md} ${theme.spacing.lg};
   border-radius: ${theme.borderRadius.lg};
   margin-bottom: ${theme.spacing.lg};
   box-shadow: ${theme.shadows.sm};
-  border: 1px solid ${theme.colors.neutral[200]};
+  border: 1px solid ${props => props.theme.colors.neutral200};
   gap: ${theme.spacing.md};
   align-items: center;
 `;
@@ -450,17 +385,19 @@ const SearchIcon = styled(MagnifyingGlassIcon)`
   left: 12px;
   width: 16px;
   height: 16px;
-  color: ${theme.colors.neutral[600]};
+  color: ${props => props.theme.colors.neutral600};
   pointer-events: none;
 `;
 
 const StyledSearchInput = styled.input`
   width: 100%;
   padding: 10px 12px 10px 40px;
-  border: 1px solid ${theme.colors.neutral[200]};
+  border: 1px solid ${props => props.theme.colors.neutral200};
   border-radius: ${theme.borderRadius.md};
   font-size: 0.875rem;
   transition: all ${theme.transitions.fast};
+  background: ${props => props.theme.colors.neutral0};
+  color: ${props => props.theme.colors.neutral800};
   
   &:focus {
     outline: none;
@@ -469,7 +406,7 @@ const StyledSearchInput = styled.input`
   }
   
   &::placeholder {
-    color: ${theme.colors.neutral[600]};
+    color: ${props => props.theme.colors.neutral500};
   }
 `;
 
@@ -654,10 +591,10 @@ const HomePage = () => {
             
             <Typography 
               variant="alpha" 
+              textColor="neutral800"
               style={{ 
                 fontSize: '1.75rem',
                 fontWeight: '700',
-                color: theme.colors.neutral[800],
                 marginBottom: '8px',
               }}
             >
@@ -689,7 +626,7 @@ const HomePage = () => {
         <AccountsContainer>
           <Box style={{ marginBottom: theme.spacing.md }}>
             <Flex justifyContent="space-between" alignItems="center" marginBottom={4}>
-              <Typography variant="delta" style={{ fontSize: '1.5rem', fontWeight: 600, color: theme.colors.neutral[700] }}>
+              <Typography variant="delta" textColor="neutral700" style={{ fontSize: '1.5rem', fontWeight: 600 }}>
                 📧 Email Accounts
               </Typography>
               <Button startIcon={<PlusIcon style={{ width: 16, height: 16 }} />} onClick={() => setShowAddModal(true)}>
@@ -833,10 +770,10 @@ const HomePage = () => {
                             {account.dailyLimit > 0 && (
                               <Box style={{ width: '100%', minWidth: '80px' }}>
                                 <Box
+                                  background="neutral100"
                                   style={{
                                     width: '100%',
                                     height: '6px',
-                                    background: theme.colors.neutral[100],
                                     borderRadius: '999px',
                                     overflow: 'hidden',
                                   }}

package/admin/src/pages/LicensePage.jsx

@@ -43,7 +43,7 @@ const Title = styled(Typography)`
 
 const Subtitle = styled(Typography)`
   font-size: 1.125rem;
-  color: #6B7280;
+  color: ${props => props.theme.colors.neutral600};
   line-height: 1.6;
   display: block;
 `;
@@ -54,24 +54,29 @@ const TierGrid = styled(Flex)`
   max-width: 1080px;
   justify-content: center;
   flex-wrap: wrap;
+  align-items: stretch;
 `;
 
 const TierWrapper = styled(Box)`
   flex: 1;
   min-width: 280px;
   max-width: 340px;
+  display: flex;
 `;
 
 const TierCard = styled(Box)`
-  background: white;
+  background: ${props => props.theme.colors.neutral0};
   border-radius: 16px;
   padding: 32px;
-  border: 2px solid ${props => props.$featured ? '#0EA5E9' : '#E5E7EB'};
+  border: 2px solid ${props => props.$featured ? '#0EA5E9' : props.theme.colors.neutral200};
   position: relative;
   transition: all 0.3s ease;
   box-shadow: ${props => props.$featured
     ? '0 20px 25px -5px rgba(14, 165, 233, 0.25), 0 8px 10px -6px rgba(14, 165, 233, 0.2)'
     : '0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05)'};
+  display: flex;
+  flex-direction: column;
+  width: 100%;
 
   &:hover {
     transform: translateY(-4px);
@@ -120,12 +125,13 @@ const TierPrice = styled(Typography)`
 `;
 
 const TierDescription = styled(Typography)`
-  color: #6B7280;
+  color: ${props => props.theme.colors.neutral600};
   margin-bottom: 24px;
 `;
 
 const FeatureList = styled(Box)`
   margin-bottom: 24px;
+  flex: 1;
 `;
 
 const Feature = styled(Flex)`
@@ -174,8 +180,8 @@ const CurrentPlanBadge = styled(Badge)`
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #F3F4F6;
-  color: #6B7280;
+  background: ${props => props.theme.colors.neutral100};
+  color: ${props => props.theme.colors.neutral600};
   font-weight: 600;
   font-size: 15px;
 `;