@snapdragonsnursery/react-components 1.0.8 → 1.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapdragonsnursery/react-components",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/LandingPage.jsx

@@ -2,6 +2,7 @@
 //
 // A reusable landing page component for Microsoft authentication
 // Designed to work across different applications with customizable branding
+// Uses inline styles and basic CSS for maximum compatibility
 //
 // Example usage:
 // import LandingPage from './LandingPage';
@@ -30,7 +31,7 @@ const LandingPage = ({
   appDescription = "Manage your application efficiently",
   onSignIn,
   companyName = "Your Company",
-  backgroundColor = "bg-gradient-to-br from-blue-50 to-indigo-100",
+  backgroundColor = "linear-gradient(135deg, #EBF4FF 0%, #E6E6FA 100%)",
   cardClassName = ""
 }) => {
   const handleSignInClick = () => {
@@ -41,34 +42,118 @@ const LandingPage = ({
     }
   };
 
+  const styles = {
+    container: {
+      minHeight: '100vh',
+      background: backgroundColor,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '1rem'
+    },
+    card: {
+      maxWidth: '28rem',
+      width: '100%',
+      backgroundColor: 'white',
+      borderRadius: '1rem',
+      boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+      padding: '2rem',
+      border: '1px solid #e5e7eb'
+    },
+    logoSection: {
+      textAlign: 'center',
+      marginBottom: '2rem'
+    },
+    logo: {
+      height: '4rem',
+      margin: '0 auto 1rem auto'
+    },
+    title: {
+      fontSize: '1.5rem',
+      fontWeight: 'bold',
+      color: '#111827',
+      marginBottom: '0.5rem'
+    },
+    description: {
+      color: '#6b7280'
+    },
+    content: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1.5rem'
+    },
+    welcomeSection: {
+      textAlign: 'center'
+    },
+    icon: {
+      height: '3rem',
+      width: '3rem',
+      color: '#2563eb',
+      margin: '0 auto 1rem auto'
+    },
+    welcomeTitle: {
+      fontSize: '1.25rem',
+      fontWeight: '600',
+      color: '#111827',
+      marginBottom: '0.5rem'
+    },
+    welcomeText: {
+      fontSize: '0.875rem',
+      color: '#6b7280'
+    },
+    button: {
+      width: '100%',
+      backgroundColor: '#2563eb',
+      color: 'white',
+      fontWeight: '500',
+      padding: '0.75rem 1rem',
+      borderRadius: '0.5rem',
+      border: 'none',
+      cursor: 'pointer',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '0.5rem',
+      transition: 'background-color 0.2s'
+    },
+    buttonHover: {
+      backgroundColor: '#1d4ed8'
+    },
+    footer: {
+      textAlign: 'center',
+      fontSize: '0.75rem',
+      color: '#6b7280'
+    }
+  };
+
   return (
-    <div className={`min-h-screen ${backgroundColor} flex items-center justify-center p-4`}>
-      <div className={`max-w-md w-full bg-white rounded-2xl shadow-xl p-8 ${cardClassName}`}>
+    <div style={styles.container}>
+      <div style={styles.card} className={cardClassName}>
         {/* Logo Section */}
-        <div className="text-center mb-8">
+        <div style={styles.logoSection}>
           <img 
             src={logoUrl}
             alt={`${companyName} Logo`}
-            className="h-16 mx-auto mb-4"
+            style={styles.logo}
           />
-          <h1 className="text-2xl font-bold text-gray-900 mb-2">
+          <h1 style={styles.title}>
             {appName}
           </h1>
-          <p className="text-gray-600">
+          <p style={styles.description}>
             {appDescription}
           </p>
         </div>
 
         {/* Sign In Section */}
-        <div className="space-y-6">
-          <div className="text-center">
-            <svg className="h-12 w-12 text-blue-600 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <div style={styles.content}>
+          <div style={styles.welcomeSection}>
+            <svg style={styles.icon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
             </svg>
-            <h2 className="text-xl font-semibold text-gray-900 mb-2">
+            <h2 style={styles.welcomeTitle}>
               Welcome Back
             </h2>
-            <p className="text-gray-600 text-sm">
+            <p style={styles.welcomeText}>
               Sign in with your Microsoft account to access the system
             </p>
           </div>
@@ -76,10 +161,16 @@ const LandingPage = ({
           {/* Microsoft Sign In Button */}
           <button
             onClick={handleSignInClick}
-            className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-200 flex items-center justify-center space-x-2"
+            style={styles.button}
+            onMouseEnter={(e) => {
+              e.target.style.backgroundColor = styles.buttonHover.backgroundColor;
+            }}
+            onMouseLeave={(e) => {
+              e.target.style.backgroundColor = styles.button.backgroundColor;
+            }}
           >
             {/* Official Microsoft logo SVG */}
-            <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg style={{width: '1.25rem', height: '1.25rem'}} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
               <rect x="2" y="2" width="9" height="9" fill="#F35325"/>
               <rect x="13" y="2" width="9" height="9" fill="#81BC06"/>
               <rect x="2" y="13" width="9" height="9" fill="#05A6F0"/>
@@ -89,7 +180,7 @@ const LandingPage = ({
           </button>
 
           {/* Additional Info */}
-          <div className="text-center text-xs text-gray-500">
+          <div style={styles.footer}>
             <p>This application is for {companyName} employees only</p>
           </div>
         </div>