fix: ELECTRON-1365 & ELECTRON-1350 (fix issues with logo) (#711)

* ELECTRON-1365 - Fix logo in the custom title bar

* ELECTRON-1350 - Fix about app text color

* ELECTRON-1365 - Remove png file

* ELECTRON-1365 - Update windows title bar snapshot
This commit is contained in:
Kiran Niranjan 2019-07-09 19:20:44 +05:30 committed by Vishwas Shashidhar
parent a6c531dbe4
commit b0bd60fa6d
5 changed files with 315 additions and 9 deletions

View File

@ -47,9 +47,190 @@ exports[`windows title bar should render correctly 1`] = `
<div
className="title-container"
>
<img
className="symphony-logo"
/>
<svg
viewBox="0 0 19.7 32"
width={20}
>
<title>
Symphony_logo
</title>
<linearGradient
gradientTransform="matrix(7.6157 0 0 -3.458 -295.325 101.04)"
gradientUnits="userSpaceOnUse"
id="prefix__a"
x1={39.819}
x2={39.246}
y1={23.981}
y2={23.726}
>
<stop
offset={0}
stopColor="#197a68"
/>
<stop
offset={1}
stopColor="#329d87"
/>
</linearGradient>
<path
d="M2.4 17.4c0 1.2.3 2.4.8 3.5l6.8-3.5H2.4z"
fill="url(#prefix__a)"
/>
<linearGradient
gradientTransform="matrix(2.7978 0 0 -4.7596 -73.704 128.374)"
gradientUnits="userSpaceOnUse"
id="prefix__b"
x1={28.916}
x2={29.916}
y1={22.811}
y2={22.811}
>
<stop
offset={0}
stopColor="#1d7e7b"
/>
<stop
offset={1}
stopColor="#35b0b7"
/>
</linearGradient>
<path
d="M7.2 21.3c.8.6 1.8.9 2.8.9v-4.8l-2.8 3.9z"
fill="url(#prefix__b)"
/>
<linearGradient
gradientTransform="matrix(6.1591 0 0 -11.4226 -223.952 256.877)"
gradientUnits="userSpaceOnUse"
id="prefix__c"
x1={37.958}
x2={38.178}
y1={21.136}
y2={21.868}
>
<stop
offset={0}
stopColor="#175952"
/>
<stop
offset={1}
stopColor="#3a8f88"
/>
</linearGradient>
<path
d="M14.4 6.9C13 6.3 11.5 6 10 6c-.6 0-1.2 0-1.8.1L10 17.4l4.4-10.5z"
fill="url(#prefix__c)"
/>
<linearGradient
gradientTransform="matrix(9.5186 0 0 -5.5951 -373.339 140.324)"
gradientUnits="userSpaceOnUse"
id="prefix__d"
x1={40.569}
x2={41.029}
y1={22.098}
y2={22.377}
>
<stop
offset={0}
stopColor="#39a8ba"
/>
<stop
offset={1}
stopColor="#3992b4"
/>
</linearGradient>
<path
d="M10 17.4h9.5c0-2-.6-4-1.8-5.6L10 17.4z"
fill="url(#prefix__d)"
/>
<linearGradient
gradientTransform="matrix(9.9955 0 0 -5.2227 -404.796 132.876)"
gradientUnits="userSpaceOnUse"
id="prefix__e"
x1={41.214}
x2={40.706}
y1={22.325}
y2={22.548}
>
<stop
offset={0}
stopColor="#021c3c"
/>
<stop
offset={1}
stopColor="#215180"
/>
</linearGradient>
<path
d="M1.5 12.2C.5 13.8 0 15.6 0 17.4h10l-8.5-5.2z"
fill="url(#prefix__e)"
/>
<linearGradient
gradientTransform="matrix(3.9169 0 0 -6.6631 -125.178 161.684)"
gradientUnits="userSpaceOnUse"
id="prefix__f"
x1={33.511}
x2={34.511}
y1={22.151}
y2={22.151}
>
<stop
offset={0}
stopColor="#23796c"
/>
<stop
offset={1}
stopColor="#41beaf"
/>
</linearGradient>
<path
d="M10 10.8c-1.4 0-2.8.4-3.9 1.3l3.9 5.4v-6.7z"
fill="url(#prefix__f)"
/>
<linearGradient
gradientTransform="matrix(5.0353 0 0 -8.5671 -171.59 208.333)"
gradientUnits="userSpaceOnUse"
id="prefix__g"
x1={36.129}
x2={36.487}
y1={21.958}
y2={21.481}
>
<stop
offset={0}
stopColor="#14466a"
/>
<stop
offset={1}
stopColor="#286395"
/>
</linearGradient>
<path
d="M10 26c1.8 0 3.6-.6 5-1.6l-5-6.9V26z"
fill="url(#prefix__g)"
/>
<linearGradient
gradientTransform="matrix(6.663 0 0 -3.5931 -244.84 102.835)"
gradientUnits="userSpaceOnUse"
id="prefix__h"
x1={38.534}
x2={39.087}
y1={23.656}
y2={23.578}
>
<stop
offset={0}
stopColor="#261d49"
/>
<stop
offset={1}
stopColor="#483a6d"
/>
</linearGradient>
<path
d="M16.6 16.4l-6.6 1 6.2 2.6c.3-.8.5-1.7.5-2.6 0-.3-.1-.7-.1-1z"
fill="url(#prefix__h)"
/>
</svg>
<p
className="title-bar-title"
>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 872 B

View File

@ -89,7 +89,7 @@ export default class WindowsTitleBar extends React.Component<{}, IState> {
</button>
</div>
<div className='title-container'>
<img className='symphony-logo'/>
{this.getSymphonyLogo()}
<p className='title-bar-title'>{document.title || 'Symphony'}</p>
</div>
<div className='title-bar-button-container'>
@ -241,6 +241,136 @@ export default class WindowsTitleBar extends React.Component<{}, IState> {
document.body.classList.add('window-border');
}
/**
* Returns the title bar logo
*/
private getSymphonyLogo(): JSX.Element {
return (
<svg width={20} viewBox='0 0 19.7 32'>
<title>{'Symphony_logo'}</title>
<linearGradient
id='prefix__a'
gradientUnits='userSpaceOnUse'
x1={39.819}
y1={23.981}
x2={39.246}
y2={23.726}
gradientTransform='matrix(7.6157 0 0 -3.458 -295.325 101.04)'
>
<stop offset={0} stopColor='#197a68' />
<stop offset={1} stopColor='#329d87' />
</linearGradient>
<path d='M2.4 17.4c0 1.2.3 2.4.8 3.5l6.8-3.5H2.4z' fill='url(#prefix__a)' />
<linearGradient
id='prefix__b'
gradientUnits='userSpaceOnUse'
x1={28.916}
y1={22.811}
x2={29.916}
y2={22.811}
gradientTransform='matrix(2.7978 0 0 -4.7596 -73.704 128.374)'
>
<stop offset={0} stopColor='#1d7e7b' />
<stop offset={1} stopColor='#35b0b7' />
</linearGradient>
<path
d='M7.2 21.3c.8.6 1.8.9 2.8.9v-4.8l-2.8 3.9z'
fill='url(#prefix__b)'
/>
<linearGradient
id='prefix__c'
gradientUnits='userSpaceOnUse'
x1={37.958}
y1={21.136}
x2={38.178}
y2={21.868}
gradientTransform='matrix(6.1591 0 0 -11.4226 -223.952 256.877)'
>
<stop offset={0} stopColor='#175952' />
<stop offset={1} stopColor='#3a8f88' />
</linearGradient>
<path
d='M14.4 6.9C13 6.3 11.5 6 10 6c-.6 0-1.2 0-1.8.1L10 17.4l4.4-10.5z'
fill='url(#prefix__c)'
/>
<linearGradient
id='prefix__d'
gradientUnits='userSpaceOnUse'
x1={40.569}
y1={22.098}
x2={41.029}
y2={22.377}
gradientTransform='matrix(9.5186 0 0 -5.5951 -373.339 140.324)'
>
<stop offset={0} stopColor='#39a8ba' />
<stop offset={1} stopColor='#3992b4' />
</linearGradient>
<path d='M10 17.4h9.5c0-2-.6-4-1.8-5.6L10 17.4z' fill='url(#prefix__d)' />
<linearGradient
id='prefix__e'
gradientUnits='userSpaceOnUse'
x1={41.214}
y1={22.325}
x2={40.706}
y2={22.548}
gradientTransform='matrix(9.9955 0 0 -5.2227 -404.796 132.876)'
>
<stop offset={0} stopColor='#021c3c' />
<stop offset={1} stopColor='#215180' />
</linearGradient>
<path
d='M1.5 12.2C.5 13.8 0 15.6 0 17.4h10l-8.5-5.2z'
fill='url(#prefix__e)'
/>
<linearGradient
id='prefix__f'
gradientUnits='userSpaceOnUse'
x1={33.511}
y1={22.151}
x2={34.511}
y2={22.151}
gradientTransform='matrix(3.9169 0 0 -6.6631 -125.178 161.684)'
>
<stop offset={0} stopColor='#23796c' />
<stop offset={1} stopColor='#41beaf' />
</linearGradient>
<path
d='M10 10.8c-1.4 0-2.8.4-3.9 1.3l3.9 5.4v-6.7z'
fill='url(#prefix__f)'
/>
<linearGradient
id='prefix__g'
gradientUnits='userSpaceOnUse'
x1={36.129}
y1={21.958}
x2={36.487}
y2={21.481}
gradientTransform='matrix(5.0353 0 0 -8.5671 -171.59 208.333)'
>
<stop offset={0} stopColor='#14466a' />
<stop offset={1} stopColor='#286395' />
</linearGradient>
<path d='M10 26c1.8 0 3.6-.6 5-1.6l-5-6.9V26z' fill='url(#prefix__g)' />
<linearGradient
id='prefix__h'
gradientUnits='userSpaceOnUse'
x1={38.534}
y1={23.656}
x2={39.087}
y2={23.578}
gradientTransform='matrix(6.663 0 0 -3.5931 -244.84 102.835)'
>
<stop offset={0} stopColor='#261d49' />
<stop offset={1} stopColor='#483a6d' />
</linearGradient>
<path
d='M16.6 16.4l-6.6 1 6.2 2.6c.3-.8.5-1.7.5-2.6 0-.3-.1-.7-.1-1z'
fill='url(#prefix__h)'
/>
</svg>
);
}
/**
* Updates the state with the give value
* @param state

View File

@ -23,7 +23,6 @@ body {
font-size: 1.3em;
padding: @text-padding;
font-weight: bold;
color: white;
}
&-versionText {

View File

@ -111,7 +111,3 @@
z-index: 3000;
bottom: 0;
}
.symphony-logo {
background-image: url("../src/renderer/assets/symphony-title-bar-logo.png");
}