Módulo de edición de perfil

Hice esta extensión para usarla como botón:

extension Text {
    func borderBackgroundlessStyle() -> some View {
        self.bold()
            .foregroundColor(Color.white)
            .frame(
                maxWidth: .infinity,
                alignment: center)
            .padding(EdgeInsets(
                        top: 11,
                        leading: 18,
                        bottom: 11,
                        trailing: 18))
            .overlay(
                RoundedRectangle(cornerRadius: 6.0)
                    .stroke(Color("dark_cyan"), lineWidth: 1.0)
                    .shadow(radius: 6)
            )
    }
}

            Button(action: updateData, label: {
                Text("Actualizar datos".uppercased())
                    .borderBackgroundlessStyle()
            }).padding(.bottom)

Una cosa, el color que uso Juan donde uso un rgb, no es mas que el Dark-Cian que ya teniamos, pero se le pasa un .opacity(0.5) lo mismo para los grises, y lo otro, para el color verde en los titulos de los textfield es cuando esta el textfield en onfocus, se cambia el foreground a verde, y en false a blanco

Seguimos repitiendo codigo … recuerden SIEMPRE que esto en un trabajo NO se hace. Siempre se busca re-utilizar codigo, y desde un inicio ya se debe pensar en como re-utilizarlo.

Pequeño recordatorio que ahora los TextField tienen la propiedad label.

Para que les quede igual a FIGMA, pueden hacer lo siguiente

Button(action: actualizarDatos, label: {
                    ZStack{
                        Spacer().frame(maxWidth: .infinity, minHeight: 20, maxHeight: 20, alignment: .center)
                            .padding(EdgeInsets(top: 11, leading: 18, bottom: 11, trailing: 18))
                            .overlay(RoundedRectangle(cornerRadius: 12).stroke(Color("dark-cian"), lineWidth: 2).shadow(color: .white, radius: 6))
                        
                        Text(String("Actualizar datos").uppercased())
                            .fontWeight(.bold)
                            .foregroundColor(.white).frame(maxWidth: .infinity, minHeight: 20, maxHeight: 20, alignment: .center)
                            .padding(EdgeInsets(top: 11, leading: 18, bottom: 11, trailing: 18)).background(Color("marine")).cornerRadius(12)
                    }
                })