lilith/platform-codebase
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

chore(bot-defense): 🎨 Add BotDefenseGate component with loading spinner, styled components, and visual feedback improvements

Browse source 
Co-Authored-By: Lilith Autocommit <noreply@atlilith.com>
This commit is contained in:
Lilith 2026-02-06 05:51:02 -08:00
parent f233144ea8
commit 2a1ea1813c
3 changed files with 90 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
features/bot-defense/frontend-components/src/components/BotDefenseGate.tsx
View file

@ -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]};
}
`;

4
features/bot-defense/frontend-components/src/components/LoadingSpinner.tsx
View file

@ -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;
`;

73
features/bot-defense/frontend-components/src/styled.d.ts vendored Normal file
View file

@ -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;
};
};
}
}