Color status badge

[creo-code]

It would be nice if the status badges for invoices would have colors like the flutter interface..
I am not handy enough to create a good pull request ;) but I thought of something like a case switch in the StatusBadge.tsx

Something like...

  ...
  let className = 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium';

  // colors
  switch(props.code) { 
     case '1': { 
        //draft 
        className += ' bg-gray-100 text-gray-800';
        break; 
     }
     case '2': {
        //send
        className += ' bg-blue-100 text-blue-800';
        break; 
     }
     case '3': { 
        //partial/paid 
        className += ' bg-orange-100 text-orange-800';
        break; 
     }
     case '4': { 
        //paid
        className += ' bg-green-100 text-green-800';
        break; 
     }
     default: { 
        //default 
        className += ' bg-gray-100 text-gray-800';
        break; 
     } 
  } 
  ...

https://github.com/invoiceninja/ui/blob/main/src/components/StatusBadge.tsx

I think there is also missing a status code for invoices due over the date.

[beganovich]

Thanks for suggestion! I will leave it open with feature request label.

[beganovich]

This has been implemented in #192.

Thanks once again for suggestion 👍