activemerchant / payment_icons

An easy to use library that allows you to manage and access payment icons
MIT License
144 stars 424 forks source link

Qliro - new Payment App icon #1164

Closed svpa82 closed 5 months ago

svpa82 commented 6 months ago

Why are you adding this icons?

We (Ghostar Agency) are Shopify Partner, and the Shopify Agency that is developing Qliro:s (qliro.com) new Payment App for Shopify. Qliro has been Approved as Shopify Payment Partner.

Help us identify yourself

Link to the brand guidelines: https://developers.qliro.com/docs/branding

Checklist to add new icons

If this pull request is not adding new icons, you can remove this checklist.

Attach a screenshot of the icon along side the example Visa icon

qliro visa

Tips how to create a screenshot

We have found free online SVG editor very useful to create one. Here is a sample code for you to verify that you icon appears properly along side the placeholder.


<!-- Change background color if needed to showcase your icon better -->
<style> body { background: black; } </style>

<!-- DO NOT DELETE EXAMPLE -->
<svg viewBox="0 0 38 24" xmlns="http://www.w3.org/2000/svg" role="img" width="38" height="24" aria-labelledby="pi-visa"><title id="pi-visa">Visa</title><path opacity=".07" d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"/><path fill="#fff" d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32"/><path d="M28.3 10.1H28c-.4 1-.7 1.5-1 3h1.9c-.3-1.5-.3-2.2-.6-3zm2.9 5.9h-1.7c-.1 0-.1 0-.2-.1l-.2-.9-.1-.2h-2.4c-.1 0-.2 0-.2.2l-.3.9c0 .1-.1.1-.1.1h-2.1l.2-.5L27 8.7c0-.5.3-.7.8-.7h1.5c.1 0 .2 0 .2.2l1.4 6.5c.1.4.2.7.2 1.1.1.1.1.1.1.2zm-13.4-.3l.4-1.8c.1 0 .2.1.2.1.7.3 1.4.5 2.1.4.2 0 .5-.1.7-.2.5-.2.5-.7.1-1.1-.2-.2-.5-.3-.8-.5-.4-.2-.8-.4-1.1-.7-1.2-1-.8-2.4-.1-3.1.6-.4.9-.8 1.7-.8 1.2 0 2.5 0 3.1.2h.1c-.1.6-.2 1.1-.4 1.7-.5-.2-1-.4-1.5-.4-.3 0-.6 0-.9.1-.2 0-.3.1-.4.2-.2.2-.2.5 0 .7l.5.4c.4.2.8.4 1.1.6.5.3 1 .8 1.1 1.4.2.9-.1 1.7-.9 2.3-.5.4-.7.6-1.4.6-1.4 0-2.5.1-3.4-.2-.1.2-.1.2-.2.1zm-3.5.3c.1-.7.1-.7.2-1 .5-2.2 1-4.5 1.4-6.7.1-.2.1-.3.3-.3H18c-.2 1.2-.4 2.1-.7 3.2-.3 1.5-.6 3-1 4.5 0 .2-.1.2-.3.2M5 8.2c0-.1.2-.2.3-.2h3.4c.5 0 .9.3 1 .8l.9 4.4c0 .1 0 .1.1.2 0-.1.1-.1.1-.1l2.1-5.1c-.1-.1 0-.2.1-.2h2.1c0 .1 0 .1-.1.2l-3.1 7.3c-.1.2-.1.3-.2.4-.1.1-.3 0-.5 0H9.7c-.1 0-.2 0-.2-.2L7.9 9.5c-.2-.2-.5-.5-.9-.6-.6-.3-1.7-.5-1.9-.5L5 8.2z" fill="#142688"/></svg>

<!-- TODO: insert your icon here -->
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 38 24" width="38" height="24" aria-labelledby="pi-qliro">
<title id="pi-qliro">Qliro</title>
<path d="M0 2C0 0.89543 0.895431 0 2 0H36C37.1046 0 38 0.895431 38 2V22C38 23.1046 37.1046 24 36 24H2C0.89543 24 0 23.1046 0 22V2Z" fill="black"/>
<path d="M10.5239 15.0428H10.4421L11.0804 16.4013H9.46008L8.82586 15.0428H8.43305C7.95841 15.0428 7.59015 14.916 7.33646 14.6623C7.08278 14.4086 6.95593 14.0444 6.95593 13.5657V9.43305C6.95593 8.95841 7.08278 8.59015 7.33646 8.33647C7.59015 8.08278 7.95432 7.95593 8.43305 7.95593H10.5239C10.9986 7.95593 11.3668 8.08278 11.6205 8.33647C11.8742 8.59015 12.001 8.95841 12.001 9.43305V13.5657C12.001 14.0404 11.8742 14.4086 11.6205 14.6623C11.3668 14.916 11.0027 15.0428 10.5239 15.0428ZM8.49443 9.52307V13.4757C8.49443 13.6435 8.57626 13.7253 8.74402 13.7253H10.213C10.3807 13.7253 10.4626 13.6435 10.4626 13.4757V9.52307C10.4626 9.35531 10.3807 9.27347 10.213 9.27347H8.74402C8.57626 9.27347 8.49443 9.35531 8.49443 9.52307Z" fill="#00FFC2"/>
<path d="M12.8767 15.0019V7.99685H14.4152V13.668H17.0912V15.0019H12.8767Z" fill="#00FFC2"/>
<path d="M17.7827 15.0019V7.99685H19.3212V15.0019H17.7827Z" fill="#00FFC2"/>
<path d="M23.593 15.0019L22.7992 12.3668H21.813V15.0019H20.2746V7.99685H23.7444C24.219 7.99685 24.5872 8.12369 24.8409 8.37738C25.0946 8.63107 25.2215 8.99933 25.2215 9.47397V10.8897C25.2215 11.6262 24.931 12.0927 24.3458 12.2891L25.2501 15.0019H23.593ZM23.4334 9.30212H21.813V11.0616H23.4334C23.6011 11.0616 23.683 10.9797 23.683 10.812V9.5558C23.683 9.38395 23.6011 9.30212 23.4334 9.30212Z" fill="#00FFC2"/>
<path d="M29.5669 15.0428H27.476C27.0014 15.0428 26.6331 14.916 26.3794 14.6623C26.1257 14.4086 25.9989 14.0444 25.9989 13.5657V9.43305C25.9989 8.95841 26.1257 8.59015 26.3794 8.33647C26.6331 8.08278 26.9973 7.95593 27.476 7.95593H29.5669C30.0415 7.95593 30.4098 8.08278 30.6635 8.33647C30.9172 8.59015 31.044 8.95841 31.044 9.43305V13.5657C31.044 14.0404 30.9172 14.4086 30.6635 14.6623C30.4057 14.916 30.0415 15.0428 29.5669 15.0428ZM27.5374 9.52307V13.4757C27.5374 13.6435 27.6192 13.7253 27.787 13.7253H29.2559C29.4237 13.7253 29.5055 13.6435 29.5055 13.4757V9.52307C29.5055 9.35531 29.4196 9.27347 29.2559 9.27347H27.787C27.6192 9.27347 27.5374 9.35531 27.5374 9.52307Z" fill="#00FFC2"/>
</svg>

#### If the icons are intended for use by Shopify, please provide the following info:
Who are you working with at Shopify? (avoid adding personal details, provide github handle(preferred) or first name and last name)

What's the expected date of this change to deploy on Shopify?
hellicarusprime commented 6 months ago

Hi @svpa82—could you please add a visible border to the icon? See our contributing guidelines.

svpa82 commented 6 months ago

Hi @hellicarusprime I have now added a new icon with border. Is the icon ok?

qliro

hellicarusprime commented 6 months ago

Hey @svpa82, the border should be (hex color #000) with a 7% opacity (0.07). It also looks like you might need to adjust the border-radius as it doesn't look right when I make the change. See the attached screenshot for reference.

image
svpa82 commented 6 months ago

hi @hellicarusprime new Icon uploaded to the branch, with hopefully right border this time.

qliro

svpa82 commented 6 months ago

Hi @hellicarusprime and thanks for Approval. How long time do it normally take for the the new icon be be able to select as Payment Method for the App under Extentions in Shopify?

Also saw that some tests failed below, do I need to do anything more?

svpa82 commented 6 months ago

@hellicarusprime uploaded new Icon to the branch that I hope solve the Build error:

PaymentIconTest#test_Payment_icon_SVGs_are_a_single_line [test/unit/payment_icon_test.rb:127]: The 'qliro' SVG file should contain a single line of markup, optionally terminated by an empty line

hellicarusprime commented 6 months ago

Hi @hellicarusprime and thanks for Approval. How long time do it normally take for the the new icon be be able to select as Payment Method for the App under Extentions in Shopify?

Also saw that some tests failed below, do I need to do anything more?

@adeniyiao when is the next release?

svpa82 commented 5 months ago

Hi @adeniyiao do you know when next release will be? Need to plan for the go-live of the Payment App. Thanks.

adeniyiao commented 5 months ago

Hi @svpa82 ,

The next release is scheduled for May 1

svpa82 commented 5 months ago

Hi @adeniyiao Is the release completed? Just tested, but I can't select the Qliro icon in Shopify under App Extentions > "Add Payment methodes"?

svpa82 commented 5 months ago

@hellicarusprime @Lovedanihonjin do you know why i can't select the new Qliro icon in Shopify under App Extentions > "Add Payment methodes"?

adeniyiao commented 5 months ago

Hi @svpa82, the deployment was completed today, you should see it now.