Add app current configuration label + missing iPad icons

[Kharchevskyi]

agree - let's make a separate issue for the future

Originally posted by @tomholub in https://github.com/FlowCrypt/flowcrypt-ios/issues/272#issuecomment-920075675

[tomholub]

This issue is about different builds: we have the following:

1) debug (label "DEBUG" should be added below the logo) 2) testflight (label "TESTFLIGHT" should be added below the logo) 3) consumer release (this should use the original icon without change) 4) enterprise release (label "ENTERPRISE" should be added below the logo)

But they all use the same icon. I would like to change the app icon to indicate which build it is.

For example, here's an icon we used for Android enterprise (this one is only 512x512 for android, unsure what iOS requirements are). Please use similar font / font weight / look for the labels.

And here's iOS original icon in 1024x1024:

[ivan-ushakov]

@tomholub do you use vector source for this icon or something else? I found that not all app icons (like 3x) are present in Assets and this leads to blank icon on some devices. Do you want to fix this?

[tomholub]

@ivan-ushakov if I give you a vector, can you then produce all of the needed icons? Also with the "enterprise" or "testflight" or "debug" labels on them? I've un-assigned you for now as I didn't know if you can work with vectors like that. I can involve our UX guy who can.

[tomholub]

Here is the svg, but it has a circle around it that also has to be removed.

<?xml version="1.0" encoding="UTF-8"?>
<svg width="192px" height="192px" viewBox="0 0 192 192" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
    <title>logos/android-2</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <circle id="path-1" cx="96" cy="96" r="96"></circle>
        <circle id="path-3" cx="96" cy="96" r="96"></circle>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-5">
            <stop stop-color="#5FCF33" offset="0%"></stop>
            <stop stop-color="#31A217" offset="100%"></stop>
        </linearGradient>
    </defs>
    <g id="Logo-Variations" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="logos/android-2">
            <g id="Group">
                <g id="logo/block--v2">
                    <mask id="mask-2" fill="white">
                        <use xlink:href="#path-1"></use>
                    </mask>
                    <g id="Mask">
                        <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
                        <circle stroke="#CCCCCC" stroke-width="2" cx="96" cy="96" r="95"></circle>
                    </g>
                    <mask id="mask-4" fill="white">
                        <use xlink:href="#path-3"></use>
                    </mask>
                    <g id="Mask-Copy">
                        <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-3"></use>
                        <circle stroke="#CCCCCC" stroke-width="2" cx="96" cy="96" r="95"></circle>
                    </g>
                    <g mask="url(#mask-4)" id="Group-13">
                        <g transform="translate(97.005645, 119.108313) rotate(42.500000) translate(-97.005645, -119.108313) translate(37.005645, 61.608313)">
                            <g transform="translate(60.223817, 57.520327) rotate(-359.000000) translate(-60.223817, -57.520327) translate(1.723817, 1.520327)">
                                <path d="M0.211122972,78.4721173 L33.5313433,78.4721173 L33.5313433,103.792338 C33.5313433,108.210616 29.9496213,111.792338 25.5313433,111.792338 L4.21112297,111.792338 C2.00198397,111.792338 0.211122972,110.001477 0.211122972,107.792338 L0.211122972,78.4721173 Z" id="Rectangle-15" fill="#4F4F4F"></path>
                                <path d="M0.211122972,39.4398593 L76.3716265,39.4398593 L76.3716265,64.7600796 C76.3716265,69.1783576 72.7899045,72.7600796 68.3716265,72.7600796 L0.211122972,72.7600796 L0.211122972,39.4398593 Z" id="Rectangle-15" fill="#31A217" opacity="0.900000036"></path>
                                <path d="M4.21112297,0.407601216 L112.420623,0.407601216 C114.629762,0.407601216 116.420623,2.19846222 116.420623,4.40760122 L116.420623,25.7278215 C116.420623,30.1460995 112.838901,33.7278215 108.420623,33.7278215 L0.211122972,33.7278215 L0.211122972,4.40760122 C0.211122972,2.19846222 2.00198397,0.407601216 4.21112297,0.407601216 Z" id="Rectangle-15" fill="#31A217"></path>
                            </g>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

[tomholub]

this was closed wrongly

[ivan-ushakov]

@tomholub I'm afraid that text could be hard to read on small screens. Maybe some kind of logo modifications like color or something bigger than text?

[tomholub]

It worked well on our Android app. Sure, you won't tell the difference in a notification bar but that doesn't matter. I think it will be ok. But if you try and it's not ok, we'll discuss.

[tomholub]

[tomholub]

[ivan-ushakov]

@tomholub My bad, I was thinking that you support only iPhone. Will fix this shortly.