feat: add new oca branding 1.1 for credential list, proof request and verifier credential card

[fc-santos]

Summary of Changes

This PR is part 1 out of 2 for the new OCA branding (1.1). It covers the credential card displayed in the ListCredentials Screen, in the Proof Request Screen and in the VerifierCredentialCard component.

This introduces a breaking change for anyone using the new Branding:

• The credential card shadow comes now from the theme
• The selected credential them also comes now from the theme

A PR is on progress at the RFC repository related to this new branding: hyperledger/aries-rfcs#864

Screenshots, videos, or gifs

ListCredentials Screen (with/without oca bundle):

ProofRequest Screen:

VerifierCrendentialCard (with/without oca bundle):

Breaking change guide

The following interface has two new properties. These are the values for the two new props:

const CredentialCardShadowTheme = {
  shadowColor: '#000',
  shadowOffset: {
    width: 1,
    height: 1,
  },
  shadowOpacity: 0.3,
} satisfies ViewStyle

const SelectedCredTheme = {
  borderWidth: 5,
  borderRadius: 15,
  borderColor: ColorPallet.semantic.focus,
} satisfies ViewStyle

export interface ITheme {
  /* .... */
  CredentialCardShadowTheme: ViewStyle
  SelectedCredTheme: ViewStyle
}

Related Issues

N/A

Pull Request Checklist

Tick all boxes below to demonstrate that you have completed the respective task. If the item does not apply to your this PR check it anyway to make it apparent that there's nothing to do.

• All commits contain a DCO Signed-off-by line (we use the DCO GitHub app to enforce this)
• If applicable, screenshots, gifs, or video are included for UI changes
• If applicable, breaking changes are described above along with how to address them
• Updated documentation as needed for changed code and new or modified features
• Added sufficient tests so that overall code coverage is not reduced

If you have any questions to any of the points above, just submit and ask! This checklist is here to help you, not to deter you from contributing!

Pro Tip 🤓

• Read our contribution guide at least once; it will save you a few review cycles!
• Your PR will likely not be reviewed until all the above boxes are checked and all automated checks have passed

[al-rosenthal]

Is this going to conflict with this PR: 1320

[al-rosenthal]

Is a credential with a branding type 1.0 always a proof?

[fc-santos]

@al-rosenthal we want the new branding to have the same look as the one from the CredentialList screen. The prop was already true in the beginning since we are inside the if block:

if (proof) {
      return (
        <CredentialCard11
          displayItems={displayItems}
          style={isBranding10 ? { backgroundColor: ColorPallet.brand.secondaryBackground } : undefined}
          credName={credName}
          credDefId={credDefId}
          schemaId={schemaId}
          credential={credential as CredentialExchangeRecord}
          handleAltCredChange={handleAltCredChange}
          hasAltCredentials={hasAltCredentials}
          proof={isBranding10} // before it was just proof
          elevated
          credentialErrors={credentialErrors ?? []}
          brandingOverlayType={bundleResolver.getBrandingOverlayType()}
        />
      )
    }

[al-rosenthal]

should probably pass proof boolean into this

[fc-santos]

@al-rosenthal resolved!

[al-rosenthal]

nit: this feels like it should be in theme file with other style related things

[fc-santos]

@al-rosenthal not really sure how to move this function to the theme.ts file since it takes some params (overlay and proof). I could rename the function though to be more clear its for use in the CredentialCard.

[sonarqubecloud]

Quality Gate passed

Issues
3 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[fc-santos]

Is this going to conflict with this PR: 1320

@al-rosenthal I've just requested that PR to be closed, this PR should be easier to review compared to the other one.