frontend/components: introduce a dashed ghost button to the new entry

Pedro Lucas Porcellis porcellis@eletrotupi.com 1 month ago 9671ed464961e554cd1fcbecdee8ef718000e49c

Parents: b1af73d

3 file(s) changed

frontend/app/(tabs)/new/entry.tsx +11 -1
frontend/components/ui/Button.tsx +26 -4
frontend/constants/theme.ts +2 -0

frontend/app/(tabs)/new/entry.tsx

@@ -27,6 +27,10 @@ const { user } = useAuth();
      // TODO: transform this into a specific mood component
      const { initialMood } = useLocalSearchParams();
    
  +   const editComponents = () => {
  +     console.log("Wants to open the components");
  +   }
  + 
      return (
        <View>
          <ScrollView

@@ -53,7 +57,7 @@ variant="darkGhost"
                  onChangeText={(val) => console.log(val)}
                  minRows={4}
                  maxRows={6}
  -               placeholder="Escreva uma nota rápida sobre o seu dia..."
  +               placeholder="Escreva uma nota rápida sobre o seu dia até o momento..."
                />
              </Card>
    

@@ -63,6 +67,12 @@ <Grid gap={4}>
                  <Card style={{height: 38}} />
                  <Card style={{height: 38}} />
                </Grid>
  + 
  +             <Button title="Adicionar Componentes"
  +                     onPress={editComponents}
  +                     textStyle={{ fontWeight: 500 }}
  +                     variant="dashed"
  +                     />
              </Section>
            </View>
          </ScrollView>

frontend/components/ui/Button.tsx

@@ -12,7 +12,7 @@ import { useThemeColor } from '@/hooks/use-theme-color';
    
    interface ButtonProps extends TouchableOpacityProps {
      title: string;
  -   variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
  +   variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'dashed';
      size?: 'small' | 'medium' | 'large';
      loading?: boolean;
      disabled?: boolean;

@@ -33,8 +33,10 @@ ...props
    }) => {
      const primaryColor = useThemeColor({}, 'tint');
      const textColor = useThemeColor({}, 'text');
  +   const textSecondaryColor = useThemeColor({}, 'textSecondary');
      const backgroundColor = useThemeColor({}, 'background');
      const borderColor = useThemeColor({}, 'border');
  +   const borderDashedColor = useThemeColor({}, 'borderDashed');
    
      const getBackgroundColor = () => {
        if (disabled) return useThemeColor({ light: '#e5e5e5', dark: '#404040' }, 'background');

@@ -45,6 +47,7 @@ case 'secondary':
            return useThemeColor({ light: '#f3f4f6', dark: '#374151' }, 'background');
          case 'outline':
          case 'ghost':
  +       case 'dashed':
            return 'transparent';
          default:
            return primaryColor;

@@ -53,27 +56,45 @@ };
    
      const getTextColor = () => {
        if (disabled) return useThemeColor({}, 'text');
  + 
        switch (variant) {
          case 'primary':
          case 'secondary':
          case 'outline':
          case 'ghost':
            return textColor;
  +       case 'dashed':
  +         return textSecondaryColor;
          default:
            return '#fff';
        }
      };
    
      const getBorderWidth = () => {
  -     return variant === 'outline' ? 1 : 0;
  +     if (variant === 'outline' || variant === 'dashed') {
  +       return 1;
  +     } else {
  +       return 0;
  +     }
      };
    
      const getBorderColor = () => {
  -     if (variant === 'outline') {
  -       return disabled ? borderColor : primaryColor;
  +     if (variant === 'outline' || variant === 'dashed') {
  +       if (disabled) {
  +         return borderColor;
  +       } else if (variant === 'dashed') {
  +         return borderDashedColor;
  +       } else {
  +         return primaryColor;
  +       }
        }
  + 
        return 'transparent';
      };
  + 
  +   const getBorderStyle = () => {
  +     return variant === 'dashed' ? 'dashed' : 'solid';
  +   }
    
      const getHeight = () => {
        switch (size) {

@@ -109,6 +130,7 @@ {
              backgroundColor: getBackgroundColor(),
              borderWidth: getBorderWidth(),
              borderColor: getBorderColor(),
  +           borderStyle: getBorderStyle(),
              height: getHeight(),
              opacity: disabled || loading ? 0.6 : 1,
            },

frontend/constants/theme.ts

@@ -22,6 +22,7 @@
    // Borders & Accents
    const BORDER_SUBTLE = '#f1f5f9';
    const BORDER_SUBTLE_GRAY = '#E5E7EB';
  + const BORDER_SUBTLE_LIGHT_GRAY = '#CBD5E1';
    const STATUS_ACTIVE_BG = 'rgba(19, 236, 91, 0.1)';
    
    // Semantic Color Pills and stuff

@@ -44,6 +45,7 @@ background: BACKGROUND_LIGHT,
        surface: SURFACE_LIGHT,
        tint: NEON_GREEN,
        backgroundDarkGhost: BACKGROUND_DARK_GHOST,
  +     borderDashed: BORDER_SUBTLE_LIGHT_GRAY,
    
        // Interactive States
        icon: TEXT_SECONDARY,