Skip to content

Commit

Permalink
feat: Handle app logos in white labels
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ldoppea
Ldoppea committed Sep 18, 2023
1 parent 2218a91 commit 7ef8cb7
Show file tree
Hide file tree
Showing 4 changed files with 101 additions and 0 deletions.
20 changes: 20 additions & 0 deletions white_label/brands/cozy/js/ui/Logo/avatar.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
export const getAvatarDataUri = (): string => {
/*
Following SVG converted to DataURI using https://base64.guru/converter/encode/image
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(4 4)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4365 10.001C10.319 10.184 10.0585 10.239 9.87899 10.119C9.86349 10.1095 9.84849 10.099 9.83449 10.0885C9.31099 10.499 8.66649 10.723 7.99649 10.723C7.32799 10.723 6.68499 10.5 6.16249 10.091C6.14899 10.1005 6.13549 10.1105 6.12149 10.119C5.93649 10.2395 5.67999 10.182 5.56349 10.0025C5.44549 9.82048 5.49699 9.57398 5.67799 9.45248C5.83499 9.34898 5.84599 9.14048 5.84599 9.14048C5.84999 9.03249 5.89699 8.92948 5.97549 8.85698C6.05349 8.78448 6.15149 8.74248 6.25949 8.75098C6.47599 8.75598 6.65199 8.93798 6.64799 9.15698C6.64799 9.15998 6.64749 9.26948 6.60799 9.42148C7.41549 10.092 8.58599 10.0895 9.39049 9.41598C9.36099 9.29948 9.35349 9.20648 9.35149 9.16348C9.34949 9.05098 9.38949 8.94898 9.46499 8.87148C9.53899 8.79548 9.63899 8.75248 9.74549 8.75048H9.75249C9.96899 8.75048 10.1485 8.92498 10.1535 9.14198C10.1535 9.14198 10.165 9.34948 10.3205 9.45198C10.5025 9.57198 10.5545 9.81748 10.4365 10.001ZM12.144 5.318C12.0285 4.341 11.596 3.438 10.9015 2.74C10.105 1.9395 9.0525 1.5 7.9385 1.5C6.8245 1.5 5.7725 1.9395 4.976 2.7405C4.2785 3.441 3.845 4.349 3.732 5.3315C2.7755 5.4475 1.891 5.893 1.208 6.6085C0.429 7.426 0 8.5065 0 9.6505C0 12.049 1.9 14 4.2365 14H11.763C14.0985 14 16 12.049 16 9.6505C16 7.384 14.302 5.5165 12.144 5.318Z" fill="#FFFFFF" />
</g>
</svg>
*/
return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCA0KSI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTAuNDM2NSAxMC4wMDFDMTAuMzE5IDEwLjE4NCAxMC4wNTg1IDEwLjIzOSA5Ljg3ODk5IDEwLjExOUM5Ljg2MzQ5IDEwLjEwOTUgOS44NDg0OSAxMC4wOTkgOS44MzQ0OSAxMC4wODg1QzkuMzEwOTkgMTAuNDk5IDguNjY2NDkgMTAuNzIzIDcuOTk2NDkgMTAuNzIzQzcuMzI3OTkgMTAuNzIzIDYuNjg0OTkgMTAuNSA2LjE2MjQ5IDEwLjA5MUM2LjE0ODk5IDEwLjEwMDUgNi4xMzU0OSAxMC4xMTA1IDYuMTIxNDkgMTAuMTE5QzUuOTM2NDkgMTAuMjM5NSA1LjY3OTk5IDEwLjE4MiA1LjU2MzQ5IDEwLjAwMjVDNS40NDU0OSA5LjgyMDQ4IDUuNDk2OTkgOS41NzM5OCA1LjY3Nzk5IDkuNDUyNDhDNS44MzQ5OSA5LjM0ODk4IDUuODQ1OTkgOS4xNDA0OCA1Ljg0NTk5IDkuMTQwNDhDNS44NDk5OSA5LjAzMjQ5IDUuODk2OTkgOC45Mjk0OCA1Ljk3NTQ5IDguODU2OThDNi4wNTM0OSA4Ljc4NDQ4IDYuMTUxNDkgOC43NDI0OCA2LjI1OTQ5IDguNzUwOThDNi40NzU5OSA4Ljc1NTk4IDYuNjUxOTkgOC45Mzc5OCA2LjY0Nzk5IDkuMTU2OThDNi42NDc5OSA5LjE1OTk4IDYuNjQ3NDkgOS4yNjk0OCA2LjYwNzk5IDkuNDIxNDhDNy40MTU0OSAxMC4wOTIgOC41ODU5OSAxMC4wODk1IDkuMzkwNDkgOS40MTU5OEM5LjM2MDk5IDkuMjk5NDggOS4zNTM0OSA5LjIwNjQ4IDkuMzUxNDkgOS4xNjM0OEM5LjM0OTQ5IDkuMDUwOTggOS4zODk0OSA4Ljk0ODk4IDkuNDY0OTkgOC44NzE0OEM5LjUzODk5IDguNzk1NDggOS42Mzg5OSA4Ljc1MjQ4IDkuNzQ1NDkgOC43NTA0OEg5Ljc1MjQ5QzkuOTY4OTkgOC43NTA0OCAxMC4xNDg1IDguOTI0OTggMTAuMTUzNSA5LjE0MTk4QzEwLjE1MzUgOS4xNDE5OCAxMC4xNjUgOS4zNDk0OCAxMC4zMjA1IDkuNDUxOThDMTAuNTAyNSA5LjU3MTk4IDEwLjU1NDUgOS44MTc0OCAxMC40MzY1IDEwLjAwMVpNMTIuMTQ0IDUuMzE4QzEyLjAyODUgNC4zNDEgMTEuNTk2IDMuNDM4IDEwLjkwMTUgMi43NEMxMC4xMDUgMS45Mzk1IDkuMDUyNSAxLjUgNy45Mzg1IDEuNUM2LjgyNDUgMS41IDUuNzcyNSAxLjkzOTUgNC45NzYgMi43NDA1QzQuMjc4NSAzLjQ0MSAzLjg0NSA0LjM0OSAzLjczMiA1LjMzMTVDMi43NzU1IDUuNDQ3NSAxLjg5MSA1Ljg5MyAxLjIwOCA2LjYwODVDMC40MjkgNy40MjYgMCA4LjUwNjUgMCA5LjY1MDVDMCAxMi4wNDkgMS45IDE0IDQuMjM2NSAxNEgxMS43NjNDMTQuMDk4NSAxNCAxNiAxMi4wNDkgMTYgOS42NTA1QzE2IDcuMzg0IDE0LjMwMiA1LjUxNjUgMTIuMTQ0IDUuMzE4WiIgZmlsbD0iI0ZGRkZGRiIgLz4KPC9nPgo8L3N2Zz4K'
}

export const getAvatarTransitionSvg = (): string => {
return `
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4365 10.001C10.319 10.184 10.0585 10.239 9.87899 10.119C9.86349 10.1095 9.84849 10.099 9.83449 10.0885C9.31099 10.499 8.66649 10.723 7.99649 10.723C7.32799 10.723 6.68499 10.5 6.16249 10.091C6.14899 10.1005 6.13549 10.1105 6.12149 10.119C5.93649 10.2395 5.67999 10.182 5.56349 10.0025C5.44549 9.82048 5.49699 9.57398 5.67799 9.45248C5.83499 9.34898 5.84599 9.14048 5.84599 9.14048C5.84999 9.03249 5.89699 8.92948 5.97549 8.85698C6.05349 8.78448 6.15149 8.74248 6.25949 8.75098C6.47599 8.75598 6.65199 8.93798 6.64799 9.15698C6.64799 9.15998 6.64749 9.26948 6.60799 9.42148C7.41549 10.092 8.58599 10.0895 9.39049 9.41598C9.36099 9.29948 9.35349 9.20648 9.35149 9.16348C9.34949 9.05098 9.38949 8.94898 9.46499 8.87148C9.53899 8.79548 9.63899 8.75248 9.74549 8.75048H9.75249C9.96899 8.75048 10.1485 8.92498 10.1535 9.14198C10.1535 9.14198 10.165 9.34948 10.3205 9.45198C10.5025 9.57198 10.5545 9.81748 10.4365 10.001ZM12.144 5.318C12.0285 4.341 11.596 3.438 10.9015 2.74C10.105 1.9395 9.0525 1.5 7.9385 1.5C6.8245 1.5 5.7725 1.9395 4.976 2.7405C4.2785 3.441 3.845 4.349 3.732 5.3315C2.7755 5.4475 1.891 5.893 1.208 6.6085C0.429 7.426 0 8.5065 0 9.6505C0 12.049 1.9 14 4.2365 14H11.763C14.0985 14 16 12.049 16 9.6505C16 7.384 14.302 5.5165 12.144 5.318Z"/>
</svg>
`
}
19 changes: 19 additions & 0 deletions white_label/brands/cozy/js/ui/Logo/logo.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
interface LogoProps {
backgroundColor: string
foregroundColor: string
}

export const getLogoSvg = ({
backgroundColor,
foregroundColor = 'white'
}: LogoProps): string => {
return `
<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="${backgroundColor}"
d="M0 38.4C0 24.9587 0 18.2381 2.61584 13.1042C4.9168 8.58834 8.58834 4.9168 13.1042 2.61584C18.2381 0 24.9587 0 38.4 0H57.6C71.0413 0 77.7619 0 82.8958 2.61584C87.4117 4.9168 91.0832 8.58834 93.3842 13.1042C96 18.2381 96 24.9587 96 38.4V57.6C96 71.0413 96 77.7619 93.3842 82.8958C91.0832 87.4117 87.4117 91.0832 82.8958 93.3842C77.7619 96 71.0413 96 57.6 96H38.4C24.9587 96 18.2381 96 13.1042 93.3842C8.58834 91.0832 4.9168 87.4117 2.61584 82.8958C0 77.7619 0 71.0413 0 57.6V38.4Z" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M58.5253 57.7242C58.0177 58.5147 56.8923 58.7523 56.1169 58.2339C56.0499 58.1929 55.9851 58.1475 55.9246 58.1022C53.6631 59.8755 50.8789 60.8432 47.9845 60.8432C45.0965 60.8432 42.3188 59.8799 40.0616 58.113C40.0033 58.154 39.9449 58.1972 39.8845 58.2339C39.0853 58.7545 37.9772 58.5061 37.4739 57.7307C36.9641 56.9444 37.1866 55.8795 37.9685 55.3547C38.6468 54.9075 38.6943 54.0155 38.6943 54.0068C38.7116 53.5403 38.9146 53.0953 39.2537 52.7821C39.5907 52.4689 40.0141 52.2875 40.4806 52.3242C41.4159 52.3458 42.1762 53.132 42.1589 54.0781C42.1589 54.0911 42.1568 54.5641 41.9861 55.2207C45.4745 58.1173 50.5311 58.1065 54.0065 55.197C53.8791 54.6937 53.8467 54.2919 53.8381 54.1062C53.8294 53.6202 54.0022 53.1795 54.3284 52.8447C54.6481 52.5164 55.0801 52.3307 55.5401 52.322H55.5704C56.5057 52.322 57.2811 53.0759 57.3027 54.0133C57.3027 54.0133 57.3524 54.9097 58.0241 55.3525C58.8104 55.8709 59.035 56.9315 58.5253 57.7242ZM65.902 37.4938C65.4031 33.2731 63.5347 29.3722 60.5344 26.3568C57.0935 22.8986 52.5467 21 47.7343 21C42.9218 21 38.3771 22.8986 34.9363 26.359C31.9231 29.3851 30.0503 33.3077 29.5622 37.5521C25.4301 38.0532 21.6091 39.9778 18.6585 43.0687C15.2932 46.6003 13.4399 51.2681 13.4399 56.2102C13.4399 66.5717 21.6479 75 31.7416 75H64.2561C74.3455 75 82.5599 66.5717 82.5599 56.2102C82.5599 46.4189 75.2246 38.3513 65.902 37.4938Z"
fill="${foregroundColor}" />
</svg>
`
}
Loading

0 comments on commit 7ef8cb7

Please sign in to comment.