tqt/Ghost-Admin
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost-Admin.git synced 2023-12-14 02:33:04 +01:00
Code Issues Releases Wiki Activity

Icon fixes on integrations night shift

Browse source 
refs. https://github.com/TryGhost/Ghost/issues/11342

- replaced Zapier and Amp logos for SVGs with transparent background so that there's no white background in night shift
- inverted Unsplash icon in night shift (similarly to Mailchimp, Typeform etc.)
- replaced ellipsis icon for SVG and handled night shift color change
- removed unnecessary icon container drop shadow in integration detail pages for night shift
This commit is contained in:
Peter Zimon 2020-04-20 17:46:59 +02:00
parent c8444707b9
commit 00b7ec2874
12 changed files with 24 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
app/styles/app-dark.css
View file

@ -438,10 +438,15 @@ input:focus,
.id-mailchimp img,
.id-typeform img,
.id-buffer img,
.id-unsplash,
.id-more img {
filter: invert(100%);
}
.dark-no-shadow {
box-shadow: none;
}
.gh-nav {
border-right: none;
}

4
app/styles/layouts/apps.css
View file

@ -53,6 +53,10 @@
margin-top: 4px;
}
.id-more svg circle {
stroke: var(--midlightgrey);
}
@media (max-width: 1320px) {
.integrations-directory {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

9
app/templates/settings/integrations.hbs
View file

@ -50,7 +50,8 @@
</a>
<a class="id-item" href="https://ghost.org/integrations/" target="_blank" rel="noopener noreferrer">
<div class="id-item-logo id-more">
<img class="w-100 h-100" style="object-fit:contain;padding:0 8px;" src="assets/img/more.png" alt="Three dots" />
{{!-- <img class="w-100 h-100" style="object-fit:contain;padding:0 8px;" src="assets/img/more.png" alt="Three dots" /> --}}
{{svg-jar "circle-ellipsis" class="w5"}}
</div>
<div class="f8 mt1">More</div>
</a>
@ -65,7 +66,7 @@
<LinkTo @route="settings.integrations.zapier" data-test-link="zapier">
<article class="apps-card-app">
<div class="apps-card-left">
<figure class="apps-card-app-icon" style="background-image:url(assets/img/zapiericon.png);background-size:36px;"></figure>
<figure class="apps-card-app-icon" style="background-image:url(assets/img/zapier.svg);background-size:36px;"></figure>
<div class="apps-card-meta">
<h3 class="apps-card-app-title">Zapier</h3>
<p class="apps-card-app-desc">Automation for your favourite apps</p>
@ -109,7 +110,7 @@
<LinkTo @route="settings.integrations.amp" data-test-link="amp">
<article class="apps-card-app">
<div class="apps-card-left">
<figure class="apps-card-app-icon" style="background-image:url(assets/img/ampicon.png); background-size: 36px;"></figure>
<figure class="apps-card-app-icon" style="background-image:url(assets/img/amp.svg); background-size: 36px;"></figure>
<div class="apps-card-meta">
<h3 class="apps-card-app-title">AMP</h3>
<p class="apps-card-app-desc">Google Accelerated Mobile Pages</p>
@ -133,7 +134,7 @@
<LinkTo @route="settings.integrations.unsplash" data-test-link="unsplash">
<article class="apps-card-app">
<div class="apps-card-left">
<figure class="apps-card-app-icon" style="background-image:url(assets/icons/unsplash.svg); background-size:30px;"></figure>
<figure class="apps-card-app-icon id-unsplash" style="background-image:url(assets/icons/unsplash.svg); background-size:30px;"></figure>
<div class="apps-card-meta">
<h3 class="apps-card-app-title">Unsplash</h3>
<p class="apps-card-app-desc">Beautiful, free photos</p>

4
app/templates/settings/integrations/amp.hbs
View file

@ -20,8 +20,8 @@
<section class="view-container bt b--lightgrey-d1 pt5">
<section class="app-grid">
<div class="app-cell">
<div class="bg-white mr3 display flex items-center justify-center br-pill shadow-1 pa3">
<img class="app-icon" src="assets/img/ampicon.png" />
<div class="bg-white mr3 display flex items-center justify-center br-pill shadow-1 pa3 dark-no-shadow">
<img class="app-icon" src="assets/img/amp.svg" />
</div>
</div>
<div class="app-cell">

2
app/templates/settings/integrations/slack.hbs
View file

@ -20,7 +20,7 @@
<section class="view-container bt b--lightgrey-d1 pt5">
<section class="app-grid">
<div class="app-cell">
<div class="bg-white mr3 display flex items-center justify-center br-pill shadow-1 pa3">
<div class="bg-white mr3 display flex items-center justify-center br-pill shadow-1 pa3 dark-no-shadow">
<img class="app-icon" src="assets/img/slackicon.png" />
</div>
</div>

4
app/templates/settings/integrations/unsplash.hbs
View file

@ -20,8 +20,8 @@
<section class="view-container bt b--lightgrey-d1 pt5">
<section class="app-grid">
<div class="app-cell">
<div class="bg-white mr3 display flex items-center justify-center br-pill shadow-1 pa3">
<img class="app-icon pa2" src="assets/icons/unsplash.svg" />
<div class="bg-white mr3 display flex items-center justify-center br-pill shadow-1 pa3 dark-no-shadow">
<img class="app-icon pa2 id-unsplash" src="assets/icons/unsplash.svg" />
</div>
</div>
<div class="app-cell">

4
app/templates/settings/integrations/zapier.hbs
View file

@ -10,8 +10,8 @@
<section class="view-container bt b--lightgrey-d1 pt5">
<section class="app-grid">
<div class="app-cell">
<div class="bg-white mr3 display flex items-center justify-center br-pill shadow-1 pa3">
<img class="app-icon" src="assets/img/zapiericon.png" />
<div class="bg-white mr3 display flex items-center justify-center br-pill shadow-1 pa3 dark-no-shadow">
<img class="app-icon" src="assets/img/zapier.svg" />
</div>
</div>
<div class="app-cell">

1
public/assets/icons/circle-ellipsis.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}</style></defs><title>navigation-menu-horizontal</title><circle class="a" cx="3.375" cy="12.023" r="2.625"/><circle class="a" cx="20.625" cy="12.023" r="2.625"/><circle class="a" cx="12" cy="12.023" r="2.625"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 384 B

1
public/assets/img/amp.svg Normal file
View file

@ -0,0 +1 @@
<svg width="256" height="256" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><title>amp-5</title><path d="M171.887 116.28l-53.696 89.36h-9.728l9.617-58.227-30.2.047c-1.288 0-2.523-.51-3.434-1.421-.91-.91-1.421-2.146-1.421-3.434 0-1.152 1.07-3.102 1.07-3.102l53.52-89.254 9.9.043-9.86 58.317 30.413-.043c1.288 0 2.523.51 3.434 1.421.91.91 1.421 2.146 1.421 3.434 0 1.088-.427 2.044-1.033 2.854l.004.004-.007.001zM128 0C57.306 0 0 57.3 0 128s57.306 128 128 128 128-57.306 128-128S198.7 0 128 0z" fill="#0379C4" fill-rule="evenodd"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 546 B

BIN
public/assets/img/ampicon.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 3 KiB

1
public/assets/img/zapier.svg Normal file
View file

@ -0,0 +1 @@
<svg width="256" height="256" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><title>zapier</title><path d="M159.999 128.056c.004 9.23-1.66 18.386-4.915 27.024-8.641 3.254-17.799 4.922-27.032 4.923h-.108c-9.508-.012-18.618-1.75-27.024-4.919-3.256-8.639-4.923-17.796-4.92-27.028v-.112c-.004-9.229 1.659-18.383 4.91-27.02 8.64-3.26 17.8-4.928 27.035-4.924h.108c9.234-.004 18.392 1.663 27.032 4.923 3.255 8.636 4.92 17.79 4.915 27.02v.112l-.001.001zm94.223-21.389h-74.716l52.829-52.833c-4.147-5.825-8.772-11.293-13.828-16.349v-.004c-5.056-5.05-10.523-9.671-16.345-13.816l-52.833 52.833V1.782C142.302.6 135.189.004 128.064 0h-.132c-7.248.004-14.347.62-21.265 1.782v74.716L53.834 23.665c-5.823 4.144-11.287 8.768-16.337 13.825l-.028.02c-5.047 5.05-9.666 10.51-13.809 16.324l52.837 52.833H1.782S0 120.7 0 127.956v.088c0 7.256.615 14.367 1.782 21.289h74.716l-52.837 52.833c8.312 11.664 18.509 21.861 30.173 30.173l52.833-52.837v74.72c7.019 1.176 14.123 1.77 21.24 1.778h.181c7.117-.006 14.221-.601 21.24-1.778v-74.72l52.838 52.837c5.82-4.146 11.286-8.769 16.341-13.82l.012-.012c5.05-5.056 9.67-10.521 13.816-16.341l-52.837-52.833h74.724c1.163-6.91 1.77-14 1.778-21.24v-.186c-.008-7.24-.615-14.33-1.778-21.24z" fill="#FF4A00" fill-rule="nonzero"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
public/assets/img/zapiericon.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 7.8 KiB