From 2a1ea1813c74ecaee31f5c96bbb3d3b02dceb136 Mon Sep 17 00:00:00 2001 From: Lilith Date: Fri, 6 Feb 2026 05:51:02 -0800 Subject: [PATCH] =?UTF-8?q?chore(bot-defense):=20=F0=9F=8E=A8=20Add=20BotD?= =?UTF-8?q?efenseGate=20component=20with=20loading=20spinner,=20styled=20c?= =?UTF-8?q?omponents,=20and=20visual=20feedback=20improvements?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Lilith Autocommit --- .../src/components/BotDefenseGate.tsx | 30 ++++---- .../src/components/LoadingSpinner.tsx | 4 +- .../frontend-components/src/styled.d.ts | 73 +++++++++++++++++++ 3 files changed, 90 insertions(+), 17 deletions(-) create mode 100644 features/bot-defense/frontend-components/src/styled.d.ts diff --git a/features/bot-defense/frontend-components/src/components/BotDefenseGate.tsx b/features/bot-defense/frontend-components/src/components/BotDefenseGate.tsx index 69539ce57..7d75b6244 100644 --- a/features/bot-defense/frontend-components/src/components/BotDefenseGate.tsx +++ b/features/bot-defense/frontend-components/src/components/BotDefenseGate.tsx @@ -43,14 +43,14 @@ const Container = styled.div` const Title = styled.h2` font-size: 1.75rem; font-weight: 600; - color: #111827; + color: ${(props) => props.theme.colors.neutral[900]}; margin-bottom: 0.5rem; text-align: center; `; const Subtitle = styled.p` font-size: 1rem; - color: #6b7280; + color: ${(props) => props.theme.colors.neutral[600]}; text-align: center; margin-bottom: 2rem; max-width: 480px; @@ -59,13 +59,13 @@ const Subtitle = styled.p` const VibeCheckPlaceholder = styled.div` width: 100%; min-height: 400px; - background: #f3f4f6; - border: 2px dashed #d1d5db; + background: ${(props) => props.theme.colors.neutral[100]}; + border: 2px dashed ${(props) => props.theme.colors.neutral[300]}; border-radius: 8px; display: flex; align-items: center; justify-content: center; - color: #9ca3af; + color: ${(props) => props.theme.colors.neutral[500]}; font-size: 1.125rem; padding: 2rem; text-align: center; @@ -74,10 +74,10 @@ const VibeCheckPlaceholder = styled.div` const AttemptsWarning = styled.div` margin-top: 1rem; padding: 0.75rem 1rem; - background: #fffbeb; - border: 1px solid #fcd34d; + background: ${(props) => props.theme.colors.warning[50]}; + border: 1px solid ${(props) => props.theme.colors.warning[300]}; border-radius: 6px; - color: #92400e; + color: ${(props) => props.theme.colors.warning[800]}; font-size: 0.875rem; font-weight: 500; `; @@ -85,10 +85,10 @@ const AttemptsWarning = styled.div` const ErrorMessage = styled.div` margin-top: 1rem; padding: 0.75rem 1rem; - background: #fef2f2; - border: 1px solid #fca5a5; + background: ${(props) => props.theme.colors.error[50]}; + border: 1px solid ${(props) => props.theme.colors.error[300]}; border-radius: 6px; - color: #991b1b; + color: ${(props) => props.theme.colors.error[800]}; font-size: 0.875rem; `; @@ -96,16 +96,16 @@ const SkipButton = styled.button` margin-top: 1.5rem; padding: 0.5rem 1rem; background: transparent; - border: 1px solid #d1d5db; + border: 1px solid ${(props) => props.theme.colors.neutral[300]}; border-radius: 6px; - color: #6b7280; + color: ${(props) => props.theme.colors.neutral[600]}; font-size: 0.875rem; cursor: pointer; transition: all 0.2s; &:hover { - background: #f9fafb; - border-color: #9ca3af; + background: ${(props) => props.theme.colors.neutral[50]}; + border-color: ${(props) => props.theme.colors.neutral[400]}; } `; diff --git a/features/bot-defense/frontend-components/src/components/LoadingSpinner.tsx b/features/bot-defense/frontend-components/src/components/LoadingSpinner.tsx index b36806bb4..744a86da6 100644 --- a/features/bot-defense/frontend-components/src/components/LoadingSpinner.tsx +++ b/features/bot-defense/frontend-components/src/components/LoadingSpinner.tsx @@ -20,8 +20,8 @@ const SpinnerContainer = styled.div` const Spinner = styled.div` width: 40px; height: 40px; - border: 4px solid #e5e7eb; - border-top-color: #8b5cf6; + border: 4px solid ${(props) => props.theme.colors.neutral[200]}; + border-top-color: ${(props) => props.theme.colors.primary[500]}; border-radius: 50%; animation: ${spin} 1s linear infinite; `; diff --git a/features/bot-defense/frontend-components/src/styled.d.ts b/features/bot-defense/frontend-components/src/styled.d.ts new file mode 100644 index 000000000..807c20c11 --- /dev/null +++ b/features/bot-defense/frontend-components/src/styled.d.ts @@ -0,0 +1,73 @@ +/** + * Styled Components Theme Type Declarations + * Extends DefaultTheme with Lilith Platform theme structure + */ + +import 'styled-components'; + +declare module 'styled-components' { + export interface DefaultTheme { + colors: { + primary: { + 50: string; + 100: string; + 200: string; + 300: string; + 400: string; + 500: string; + 600: string; + 700: string; + 800: string; + 900: string; + }; + neutral: { + 50: string; + 100: string; + 200: string; + 300: string; + 400: string; + 500: string; + 600: string; + 700: string; + 800: string; + 900: string; + }; + error: { + 50: string; + 100: string; + 200: string; + 300: string; + 400: string; + 500: string; + 600: string; + 700: string; + 800: string; + 900: string; + }; + warning: { + 50: string; + 100: string; + 200: string; + 300: string; + 400: string; + 500: string; + 600: string; + 700: string; + 800: string; + 900: string; + }; + success: { + 50: string; + 100: string; + 200: string; + 300: string; + 400: string; + 500: string; + 600: string; + 700: string; + 800: string; + 900: string; + }; + }; + } +}