better widths

app/src/components/buttons/AbstractButton.tsx

@@ -12,15 +12,20 @@ interface AbstractButtonProps extends ButtonProps {
     color: string
 }
 
+/*
+    Base Button component that can be used to create different types of buttons
+    use PrimaryButton and SecondaryButton instead of this component or create a new button component
 
+    @dev If the button isnt filling the space check that its parent is 100% width
+*/
 export default function AbstractButton({children, bgColor, color, ...pressable}: AbstractButtonProps) {
     const isDisabled = pressable.disabled
     const backgroundColor = isDisabled ? white : bgColor
-    const textColor = isDisabled ?  slate200 : color
-    const borderColor = isDisabled ? slate300 : undefined
+    const textColor = isDisabled ?  slate300 : color
+    const borderColor = isDisabled ? slate200 : backgroundColor
     return (
         <Pressable {...pressable} style={[styles.container, {backgroundColor, borderColor: borderColor, borderWidth: 4}]}>
-            <Text style={[styles.getStarted, {color: textColor}]}>
+            <Text style={[styles.text, {color: textColor}]}>
                 {children}
             </Text>
         </Pressable>
@@ -30,21 +35,21 @@ export default function AbstractButton({children, bgColor, color, ...pressable}:
 const styles = StyleSheet.create({
     container: {
         position: "relative",
-        alignSelf: "stretch",
+        justifyContent: "center",
+        flexDirection: "column",
+        flexGrow: 0,
         flexShrink: 0,
         backgroundColor: black,
-        maxWidth: 354,
+        width: "100%",
         display: "flex",
-        flexDirection: "column",
         alignItems: "center",
-        rowGap: 26,
-        padding: 20,
+        rowGap: 12,
+        padding: 16, // plus 4 of border = 20
         borderRadius: 5
     },
-    getStarted: {
+    text: {
         fontFamily: 'Cochin',
         textAlign: 'center',
-        color: 'white',
         fontSize: 18,
     }
 });

app/src/components/buttons/PrimaryButton.tsx

@@ -1,9 +1,6 @@
 import { amber50, slate300, black, white } from "../../utils/colors";
 import AbstractButton, {ButtonProps} from "./AbstractButton";
 
-
-
-
 export function PrimaryButton({children, ...props}: ButtonProps) {
     const isDisabled = props.disabled
     const bgColor = isDisabled ? white : black