chordia-ui 3.2.3 → 3.2.5

package/src/components/layout/IntegrationCard.jsx

@@ -1,42 +1,54 @@
 "use client";
 
 import React from "react";
-import { CheckCircle2, Circle, Settings } from "lucide-react";
+import { CheckCircle2, Settings2, CloudOff, CloudDownload } from "lucide-react";
 
 /**
  * IntegrationCard Component
  * Displays an integration provider card with status, logo, and configuration options
+ *
+ * Props:
+ *  - providerName   string      Provider display name
+ *  - description    string      Short description / subtitle
+ *  - status         string      "available" | "connected" | "coming-soon"
+ *  - logoUrl        string      Optional logo image URL
+ *  - icon           ReactNode   Optional custom icon/logo element
+ *  - onConnect      function    Connect/Disconnect callback
+ *  - onConfigure    function    Configure (settings) callback — shown for connected
  */
 export default function IntegrationCard({
   providerName,
   description,
   status = "available",
-  railColor,
   logoUrl,
   icon,
+  onConnect,
   onConfigure,
 }) {
+  const isConnected = status === "connected";
+  const isComingSoon = status === "coming-soon";
+
   const statusConfig = {
     connected: {
       label: "Connected",
-      color: "#6B7C93",
-      bgColor: "rgba(107, 124, 147, 0.08)",
-      borderColor: "rgba(107, 124, 147, 0.20)",
-      icon: <CheckCircle2 size={14} strokeWidth={2.5} />,
+      color: "var(--Grey-Strong, #808183)",
+      icon: <CheckCircle2 size={16} strokeWidth={2} />,
+      actionLabel: "Disconnect",
+      actionFilled: false,
     },
     available: {
       label: "Available",
-      color: "#1E2125",
-      bgColor: "rgba(30, 33, 37, 0.04)",
-      borderColor: "rgba(30, 33, 37, 0.12)",
-      icon: <Circle size={14} strokeWidth={2} />,
+      color: "var(--Grey-Strong, #808183)",
+      icon: <CloudDownload size={16} strokeWidth={2} />,
+      actionLabel: "Connect",
+      actionFilled: true,
     },
     "coming-soon": {
       label: "Coming Soon",
-      color: "rgba(30, 33, 37, 0.42)",
-      bgColor: "transparent",
-      borderColor: "rgba(30, 33, 37, 0.12)",
-      icon: <Circle size={14} strokeWidth={2} style={{ opacity: 0.4 }} />,
+      color: "var(--Grey-Muted, #B2AEA8)",
+      icon: <CloudOff size={16} strokeWidth={2} />,
+      actionLabel: "Connect",
+      actionFilled: false,
     },
   };
 
@@ -45,165 +57,163 @@ export default function IntegrationCard({
   return (
     <div
       style={{
-        background: "#FFFFFF",
-        border: `1px solid ${railColor}20`,
-        borderRadius: "8px",
-        position: "relative",
         display: "flex",
+        width: "317px",
+        height: "160px",
+        padding: "16px",
         flexDirection: "column",
-        transition: "all 0.15s ease",
-        cursor: status === "coming-soon" ? "default" : "pointer",
-        opacity: status === "coming-soon" ? 0.6 : 1,
-        overflow: "hidden",
-        height: "100%",
+        alignItems: "flex-start",
+        gap: "10px",
+        borderRadius: "4px",
+        border: "1px solid #D9D9D9",
+        background: "var(--Base-White, #FFF)",
       }}
-      className="hover:shadow-sm"
     >
-      {/* Rail */}
-      <div
-        style={{
-          position: "absolute",
-          left: 0,
-          top: 0,
-          bottom: 0,
-          width: "4px",
-          background: railColor,
-          opacity: status === "coming-soon" ? 0.4 : 1,
-        }}
-      />
+      {/* Top: Name + Description */}
+      <div style={{ flex: 1, width: "100%" }}>
+        {/* Provider Name / Logo */}
+        <div style={{ marginBottom: "4px" }}>
+          {logoUrl ? (
+            <img
+              src={logoUrl}
+              alt={providerName}
+              style={{ height: "24px", objectFit: "contain" }}
+            />
+          ) : icon ? (
+            <div style={{ display: "flex", alignItems: "center" }}>{icon}</div>
+          ) : (
+            <h3
+              style={{
+                fontSize: "16px",
+                fontWeight: 700,
+                color: "var(--Base-Strong, #1E2125)",
+                margin: 0,
+                lineHeight: 1.3,
+              }}
+            >
+              {providerName}
+            </h3>
+          )}
+        </div>
+        {/* Description */}
+        <p
+          style={{
+            fontSize: "13px",
+            lineHeight: 1.4,
+            color: "var(--Grey-Strong, #808183)",
+            margin: 0,
+          }}
+        >
+          {description}
+        </p>
+      </div>
 
-      {/* Content wrapper with padding */}
+      {/* Bottom: Status + Actions */}
       <div
         style={{
-          padding: "20px",
-          paddingLeft: "24px",
           display: "flex",
-          flexDirection: "column",
-          gap: "16px",
-          height: "100%",
+          alignItems: "center",
+          justifyContent: "space-between",
+          width: "100%",
+          gap: "8px",
         }}
       >
-        {/* Header: Logo + Status */}
+        {/* Status label */}
         <div
           style={{
             display: "flex",
-            alignItems: "flex-start",
-            justifyContent: "space-between",
-            gap: "12px",
+            alignItems: "center",
+            gap: "6px",
+            fontSize: "13px",
+            fontWeight: 400,
+            color: config.color,
           }}
         >
-          {/* Logo/Icon */}
-          <div
-            style={{
-              width: "48px",
-              height: "48px",
-              borderRadius: "6px",
-              background: `${railColor}08`,
-              border: `1px solid ${railColor}18`,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              flexShrink: 0,
-            }}
-          >
-            {logoUrl ? (
-              <img
-                src={logoUrl}
-                alt={providerName}
-                style={{ width: "32px", height: "32px", objectFit: "contain" }}
-              />
-            ) : (
-              <div
-                style={{
-                  color: railColor,
-                  fontSize: "20px",
-                  fontWeight: 650,
-                  opacity: 0.8,
-                }}
-              >
-                {icon || (providerName ? providerName.charAt(0) : "")}
-              </div>
-            )}
-          </div>
-
-          {/* Status Badge */}
-          <div
-            style={{
-              display: "inline-flex",
-              alignItems: "center",
-              gap: "6px",
-              padding: "4px 10px",
-              borderRadius: "4px",
-              background: config.bgColor,
-              border: `1px solid ${config.borderColor}`,
-              fontSize: "11px",
-              fontWeight: 600,
-              letterSpacing: "0.01em",
-              color: config.color,
-              flexShrink: 0,
-            }}
-          >
-            {config.icon}
-            {config.label}
-          </div>
+          {config.icon}
+          {config.label}
         </div>
 
-        {/* Content */}
-        <div style={{ flex: 1, minHeight: 0 }}>
-          <h3
-            style={{
-              fontSize: "15px",
-              fontWeight: 650,
-              color: "rgba(30, 33, 37, 0.92)",
-              marginBottom: "6px",
-              letterSpacing: "-0.01em",
-            }}
-          >
-            {providerName}
-          </h3>
-          <p
-            style={{
-              fontSize: "13px",
-              lineHeight: 1.5,
-              color: "rgba(30, 33, 37, 0.65)",
-            }}
-          >
-            {description}
-          </p>
-        </div>
+        {/* Action area */}
+        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+          {/* Settings icon for connected */}
+          {isConnected && onConfigure && (
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                onConfigure();
+              }}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "32px",
+                height: "32px",
+                border: "none",
+                background: "transparent",
+                color: "var(--Grey-Strong, #808183)",
+                cursor: "pointer",
+                borderRadius: "4px",
+                transition: "background 0.15s ease",
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.background = "rgba(0,0,0,0.04)";
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.background = "transparent";
+              }}
+            >
+              <Settings2 size={20} strokeWidth={2} />
+            </button>
+          )}
 
-        {/* Action Button - aligned to bottom */}
-        {status !== "coming-soon" && (
+          {/* Connect / Disconnect button */}
           <button
             onClick={(e) => {
               e.stopPropagation();
-              onConfigure?.();
+              onConnect?.();
             }}
+            disabled={isComingSoon}
             style={{
               display: "flex",
-              alignItems: "center",
+              height: "28px",
+              padding: "10px",
               justifyContent: "center",
-              gap: "8px",
-              padding: "8px 14px",
-              border: "1px solid rgba(30, 33, 37, 0.15)",
-              borderRadius: "5px",
-              background: status === "connected" ? "transparent" : "rgba(30, 33, 37, 0.03)",
+              alignItems: "center",
+              gap: "10px",
+              borderRadius: "10px",
+              border: config.actionFilled
+                ? "1px solid transparent"
+                : "1px solid #D9D9D9",
+              background: isComingSoon
+                ? "var(--Grey-Muted, #B2AEA8)"
+                : config.actionFilled
+                ? "var(--Base-Strong, #1E2125)"
+                : "var(--Base-White, #FFF)",
+              color: config.actionFilled || isComingSoon
+                ? "#FFF"
+                : "var(--Base-Strong, #1E2125)",
               fontSize: "13px",
               fontWeight: 600,
-              color: "rgba(30, 33, 37, 0.92)",
-              cursor: "pointer",
+              cursor: isComingSoon ? "default" : "pointer",
+              opacity: isComingSoon ? 0.6 : 1,
               transition: "all 0.15s ease",
-              width: "100%",
-              marginTop: "auto",
+              lineHeight: 1.4,
+            }}
+            onMouseEnter={(e) => {
+              if (!isComingSoon && !config.actionFilled) {
+                e.currentTarget.style.background = "rgba(0,0,0,0.04)";
+              }
+            }}
+            onMouseLeave={(e) => {
+              if (!isComingSoon && !config.actionFilled) {
+                e.currentTarget.style.background = "var(--Base-White, #FFF)";
+              }
             }}
-            className="hover:bg-[rgba(30,33,37,0.06)] hover:border-[rgba(30,33,37,0.20)]"
           >
-            <Settings size={14} strokeWidth={2.5} />
-            {status === "connected" ? "Configure" : "Connect"}
+            {config.actionLabel}
           </button>
-        )}
+        </div>
       </div>
     </div>
   );
 }
-

package/src/components/login/LoginPage.jsx

@@ -101,7 +101,7 @@ function NavRow({ text, linkText, onClick }) {
 
 function TermsFooter({ onTerms, onPrivacyPolicy, paddingTop }) {
   return (
-    <div style={{ display: 'flex', justifyContent: 'center', width: '100%', ...(paddingTop ? { marginTop: 'auto', paddingTop } : {}) }}>
+    <div style={{ display: 'flex', justifyContent: 'center', width: '100%', position: 'absolute', bottom: 40, left: 0, right: 0 }}>
       <span style={{ fontSize: 15, fontWeight: 400, lineHeight: '22px', color: 'var(--color-text)', fontFamily: FF, textAlign: 'center', whiteSpace: 'nowrap' }}>
         By continuing, you agree to our{' '}
         <a href="https://pages.chordia.ai/terms-of-use/" target="_blank" rel="noopener noreferrer"
@@ -462,7 +462,7 @@ export default function LoginPage({
           </div>
 
           {/* Dots */}
-          <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 8, height: 4, marginTop: 16, alignSelf: 'flex-start', marginLeft: 22 }}>
+          <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 8, height: 4, position: 'absolute', bottom: 40, left: 48 }}>
             {Array.from({ length: SLIDE_COUNT }).map((_, i) => (
               <button key={i} onClick={() => setActiveSlide(i)}
                 style={{

package/src/components/navigation/Sidebar.jsx

@@ -2,7 +2,7 @@
 
 import React, { useState } from "react";
 import {
-  Home, FolderClosed, Users, Settings, ChevronDown, ChevronRight,
+  Home, FolderClosed, Users, Settings, ChevronDown,
   LayoutDashboard, Clock3, Activity, Lightbulb, Bell, Plug, BarChart3,
   FileText, Headphones, Shield, Sliders, Workflow, SquareDot,
   PanelLeftClose, PanelLeft,
@@ -73,7 +73,7 @@ export default function Sidebar({
   onToggleCollapse,
   header,
   footer,
-  width = 240,
+  width = 244,
   collapsedWidth = 56,
 }) {
   const [internalCollapsed, setInternalCollapsed] = useState(false);
@@ -106,8 +106,10 @@ export default function Sidebar({
         height: "100%",
         display: "flex",
         flexDirection: "column",
-        background: "var(--paper-elevated)",
-        borderRight: "1px solid var(--border)",
+        alignItems: "flex-start",
+        padding: collapsed ? "0" : "0 0 24px 24px",
+        gap: 24,
+        background: "var(--Background-Inverse, #0B0B0B)",
         fontFamily: "var(--font-sans)",
         transition: "width 0.2s ease, min-width 0.2s ease",
         overflow: "hidden",
@@ -116,7 +118,7 @@ export default function Sidebar({
     >
       {/* Header slot */}
       {header && !collapsed && (
-        <div style={{ padding: "16px 16px 8px", flexShrink: 0 }}>
+        <div style={{ padding: "16px 16px 8px", flexShrink: 0, width: "100%" }}>
           {header}
         </div>
       )}
@@ -126,8 +128,9 @@ export default function Sidebar({
         style={{
           display: "flex",
           justifyContent: collapsed ? "center" : "flex-end",
-          padding: collapsed ? "12px 0" : "8px 12px",
+          padding: collapsed ? "12px 0" : "8px 0 0",
           flexShrink: 0,
+          width: "100%",
         }}
       >
         <button
@@ -142,17 +145,17 @@ export default function Sidebar({
             borderRadius: "var(--radius-sm)",
             border: "none",
             background: "transparent",
-            color: "var(--text-faint)",
+            color: "rgba(255, 255, 255, 0.5)",
             cursor: "pointer",
             transition: "background 0.15s ease, color 0.15s ease",
           }}
           onMouseEnter={(e) => {
-            e.currentTarget.style.background = "var(--hover-warm)";
-            e.currentTarget.style.color = "var(--text-muted)";
+            e.currentTarget.style.background = "rgba(255, 255, 255, 0.08)";
+            e.currentTarget.style.color = "rgba(255, 255, 255, 0.8)";
           }}
           onMouseLeave={(e) => {
             e.currentTarget.style.background = "transparent";
-            e.currentTarget.style.color = "var(--text-faint)";
+            e.currentTarget.style.color = "rgba(255, 255, 255, 0.5)";
           }}
         >
           {collapsed ? <PanelLeft size={16} /> : <PanelLeftClose size={16} />}
@@ -165,7 +168,8 @@ export default function Sidebar({
           flex: 1,
           overflowY: "auto",
           overflowX: "hidden",
-          padding: collapsed ? "0 8px" : "0 10px",
+          padding: collapsed ? "0 8px" : "0",
+          width: "100%",
         }}
       >
         {menuItems.map((item, idx) => (
@@ -178,7 +182,7 @@ export default function Sidebar({
                   fontWeight: 650,
                   letterSpacing: "0.08em",
                   textTransform: "uppercase",
-                  color: "var(--text-faint)",
+                  color: "rgba(255, 255, 255, 0.35)",
                   padding: "16px 8px 6px",
                   lineHeight: 1,
                 }}
@@ -213,8 +217,9 @@ export default function Sidebar({
         <div
           style={{
             padding: "12px 16px",
-            borderTop: "1px solid var(--border-subtle)",
+            borderTop: "1px solid rgba(255, 255, 255, 0.08)",
             flexShrink: 0,
+            width: "100%",
           }}
         >
           {footer}
@@ -235,30 +240,35 @@ function SidebarItem({ item, active, onNavigate, collapsed }) {
       style={{
         display: "flex",
         alignItems: "center",
-        gap: collapsed ? 0 : 10,
+        gap: collapsed ? 0 : 12,
         justifyContent: collapsed ? "center" : "flex-start",
         width: "100%",
-        padding: collapsed ? "10px 0" : "8px 10px",
-        borderRadius: "var(--radius-sm)",
-        border: "none",
-        background: active ? "var(--hover-warm)" : "transparent",
-        color: active ? "var(--text-ink)" : "var(--text-base)",
+        padding: collapsed ? "10px 0" : "12px 24px 12px 12px",
+        borderRadius: active ? "4px 0 0 4px" : "4px",
+        borderRight: active ? "2px solid #00A66E" : "2px solid transparent",
+        borderTop: "none",
+        borderBottom: "none",
+        borderLeft: "none",
+        background: active ? "var(--Background-MonoPressed, #323232)" : "transparent",
+        color: active ? "#00A66E" : "var(--Content-TertiaryInverse, #B2AEA8)",
         fontWeight: active ? 550 : 400,
         fontSize: "var(--text-sm)",
         fontFamily: "var(--font-sans)",
         cursor: "pointer",
         textAlign: "left",
-        transition: "background 0.15s ease, color 0.1s ease",
+        transition: "background 0.15s ease, color 0.1s ease, border-color 0.15s ease",
         marginBottom: 2,
       }}
       onMouseEnter={(e) => {
         if (!active) {
-          e.currentTarget.style.background = "var(--hover-warm-subtle)";
+          e.currentTarget.style.background = "var(--Background-MonoPressed, #323232)";
+          e.currentTarget.style.color = "#00A66E";
         }
       }}
       onMouseLeave={(e) => {
         if (!active) {
           e.currentTarget.style.background = "transparent";
+          e.currentTarget.style.color = "var(--Content-TertiaryInverse, #B2AEA8)";
         }
       }}
     >
@@ -266,10 +276,10 @@ function SidebarItem({ item, active, onNavigate, collapsed }) {
         <span style={{ flexShrink: 0, display: "flex" }}>{item.icon}</span>
       ) : (
         <Icon
-          size={16}
+          size={18}
           style={{
             flexShrink: 0,
-            color: active ? "var(--text-strong)" : "var(--text-muted)",
+            color: "inherit",
           }}
         />
       )}
@@ -304,24 +314,30 @@ function SidebarGroup({ item, activeId, expanded, onToggle, onNavigate, collapse
           justifyContent: "center",
           width: "100%",
           padding: "10px 0",
-          borderRadius: "var(--radius-sm)",
+          borderRadius: "4px",
           border: "none",
-          background: hasActiveChild ? "var(--hover-warm)" : "transparent",
-          color: hasActiveChild ? "var(--text-ink)" : "var(--text-base)",
+          background: hasActiveChild ? "var(--Background-MonoPressed, #323232)" : "transparent",
+          color: hasActiveChild ? "#00A66E" : "var(--Content-TertiaryInverse, #B2AEA8)",
           cursor: "pointer",
           marginBottom: 2,
           transition: "background 0.15s ease",
         }}
         onMouseEnter={(e) => {
-          if (!hasActiveChild) e.currentTarget.style.background = "var(--hover-warm-subtle)";
+          if (!hasActiveChild) {
+            e.currentTarget.style.background = "var(--Background-MonoPressed, #323232)";
+            e.currentTarget.style.color = "#00A66E";
+          }
         }}
         onMouseLeave={(e) => {
-          if (!hasActiveChild) e.currentTarget.style.background = "transparent";
+          if (!hasActiveChild) {
+            e.currentTarget.style.background = "transparent";
+            e.currentTarget.style.color = "var(--Content-TertiaryInverse, #B2AEA8)";
+          }
         }}
       >
         <Icon
-          size={16}
-          style={{ color: hasActiveChild ? "var(--text-strong)" : "var(--text-muted)" }}
+          size={18}
+          style={{ color: "inherit" }}
         />
       </button>
     );
@@ -335,32 +351,35 @@ function SidebarGroup({ item, activeId, expanded, onToggle, onNavigate, collapse
         style={{
           display: "flex",
           alignItems: "center",
-          gap: 10,
+          gap: 12,
           width: "100%",
-          padding: "8px 10px",
-          borderRadius: "var(--radius-sm)",
+          padding: "12px 24px 12px 12px",
+          borderRadius: "4px",
           border: "none",
           background: "transparent",
-          color: hasActiveChild ? "var(--text-ink)" : "var(--text-base)",
+          color: hasActiveChild ? "#00A66E" : "var(--Content-TertiaryInverse, #B2AEA8)",
           fontWeight: hasActiveChild ? 550 : 400,
           fontSize: "var(--text-sm)",
           fontFamily: "var(--font-sans)",
           cursor: "pointer",
           textAlign: "left",
-          transition: "background 0.15s ease",
+          transition: "background 0.15s ease, color 0.15s ease",
         }}
         onMouseEnter={(e) => {
-          e.currentTarget.style.background = "var(--hover-warm-subtle)";
+          e.currentTarget.style.background = "var(--Background-MonoPressed, #323232)";
+          e.currentTarget.style.color = "#00A66E";
         }}
         onMouseLeave={(e) => {
           e.currentTarget.style.background = "transparent";
+          if (!hasActiveChild) e.currentTarget.style.color = "var(--Content-TertiaryInverse, #B2AEA8)";
+          else e.currentTarget.style.color = "#00A66E";
         }}
       >
         <Icon
-          size={16}
+          size={18}
           style={{
             flexShrink: 0,
-            color: hasActiveChild ? "var(--text-strong)" : "var(--text-muted)",
+            color: "inherit",
           }}
         />
         <span
@@ -377,7 +396,8 @@ function SidebarGroup({ item, activeId, expanded, onToggle, onNavigate, collapse
           size={14}
           style={{
             flexShrink: 0,
-            color: "var(--text-faint)",
+            color: "inherit",
+            opacity: 0.7,
             transform: expanded ? "rotate(0deg)" : "rotate(-90deg)",
             transition: "transform 0.2s ease",
           }}