jonny
/
Signal-Desktop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move to new logo and primary blue color

This commit is contained in:
Josh Perez 2020-03-05 13:24:51 -08:00 committed by Scott Nonnenberg
parent a90246cbe5
commit 12457d47a3
16 changed files with 66 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
about.html
View File

@ -18,7 +18,7 @@
<style>
body {
text-align: center;
background-color: #2090EA;
background-color: #3a76f0;
color: white;
font-size: 14px;
}
@ -33,7 +33,7 @@
</style>
</head>
<body>
<img src='images/icon_250.png'>
<div class="module-splash-screen__logo module-img--200"></div>
<div class='version'></div>
<div class='environment'></div>

11
background.html
View File

@ -20,7 +20,6 @@
style-src 'self' 'unsafe-inline';"
>
<title>Signal</title>
<link href='images/icon_128.png' rel='shortcut icon'>
<link href="node_modules/sanitize.css/sanitize.css" rel="stylesheet" type="text/css" />
<link href="stylesheets/manifest.css" rel="stylesheet" type="text/css" />
<link href="node_modules/draft-js/dist/Draft.css" rel="stylesheet" type="text/css" />
@ -31,7 +30,7 @@
<script type='text/x-tmpl-mustache' id='app-loading-screen'>
<div class='content'>
<img src='images/icon_250.png' height='150'>
<div class="module-splash-screen__logo module-img--150"></div>
<div class='container'>
<span class='dot'></span>
<span class='dot'></span>
@ -43,7 +42,7 @@
<script type='text/x-tmpl-mustache' id='conversation-loading-screen'>
<div class='content'>
<img src='images/icon_128.png'>
<div class="module-splash-screen__logo module-img--128"></div>
<div class='container'>
<span class='dot'></span>
<span class='dot'></span>
@ -61,7 +60,7 @@
<div class='conversation-header'></div>
<div class='container'>
<div class='content'>
<img src='images/icon_128.png' />
<div class="module-splash-screen__logo module-img--128 module-logo-blue"></div>
<h3>{{ welcomeToSignal }}</h3>
<p>{{ selectAContact }}</p>
</div>
@ -317,7 +316,7 @@
<div class='step'>
<div class='inner'>
<div class='step-body'>
<img class='banner-image' src='images/icon_128.png' />
<div class="banner-image module-splash-screen__logo module-img--128"></div>
<div class='header'>Create your Signal Account</div>
<div id='phone-number-input'>
<div class='phone-input-form'>
@ -392,7 +391,7 @@
<body class="overflow-hidden">
<div class='app-loading-screen'>
<div class='content'>
<img src='images/icon_250.png' height='150'>
<div class="module-splash-screen__logo module-img--150"></div>
<div class='container'>
<span class='dot'></span>
<span class='dot'></span>

BIN
images/icon_1024.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 57 KiB

After

Width:  |  Height:  |  Size: 82 KiB

BIN
images/icon_128.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.9 KiB

After

Width:  |  Height:  |  Size: 19 KiB

BIN
images/icon_16.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 621 B

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
images/icon_250.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 51 KiB

BIN
images/icon_256.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 45 KiB

BIN
images/icon_32.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
images/icon_48.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 4.8 KiB

1
images/signal-logo.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><title>logo final final</title><path d="M48.64,1.87l1.44,5.82A57.84,57.84,0,0,0,34,14.34L30.92,9.2A63.76,63.76,0,0,1,48.64,1.87Zm30.72,0L77.92,7.69A57.84,57.84,0,0,1,94,14.34l3.1-5.14A63.76,63.76,0,0,0,79.36,1.87ZM9.2,30.92A63.76,63.76,0,0,0,1.87,48.64l5.82,1.44A57.84,57.84,0,0,1,14.34,34ZM6,64a57.9,57.9,0,0,1,.65-8.69l-5.93-.9a64.23,64.23,0,0,0,0,19.18l5.93-.9A57.9,57.9,0,0,1,6,64Zm91.08,54.8L94,113.66a57.84,57.84,0,0,1-16.06,6.65l1.44,5.82A63.76,63.76,0,0,0,97.08,118.8ZM122,64a57.9,57.9,0,0,1-.65,8.69l5.93.9a64.23,64.23,0,0,0,0-19.18l-5.93.9A57.9,57.9,0,0,1,122,64Zm4.13,15.36-5.82-1.44A57.84,57.84,0,0,1,113.66,94l5.14,3.1A63.76,63.76,0,0,0,126.13,79.36Zm-53.44,42a58.41,58.41,0,0,1-17.38,0l-.9,5.93a64.23,64.23,0,0,0,19.18,0Zm38-22.95A58.21,58.21,0,0,1,98.4,110.69l3.56,4.83A64.1,64.1,0,0,0,115.52,102ZM98.4,17.31A58.21,58.21,0,0,1,110.69,29.6L115.52,26A64.1,64.1,0,0,0,102,12.48ZM17.31,29.6A58.21,58.21,0,0,1,29.6,17.31L26,12.48A64.1,64.1,0,0,0,12.48,26ZM118.8,30.92,113.66,34a57.84,57.84,0,0,1,6.65,16.06l5.82-1.44A63.76,63.76,0,0,0,118.8,30.92ZM55.31,6.65a58.41,58.41,0,0,1,17.38,0l.9-5.93a64.23,64.23,0,0,0-19.18,0ZM20.39,117.11,8,120l2.89-12.39-5.84-1.37L2.16,118.63a6,6,0,0,0,7.21,7.21L21.75,123ZM6.3,100.89l5.84,1.36,2-8.59A57.75,57.75,0,0,1,7.69,77.92L1.87,79.36a63.52,63.52,0,0,0,5.9,15.21Zm28,13-8.59,2,1.36,5.84,6.32-1.47a63.52,63.52,0,0,0,15.21,5.9l1.44-5.82A57.75,57.75,0,0,1,34.34,113.85ZM64,12A52,52,0,0,0,20,91.67L15,113l21.33-5A52,52,0,1,0,64,12Z" fill="#3a76f0"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

3
index.html
View File

@ -7,14 +7,13 @@
<title>Signal</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='/images/icon_128.png' rel='shortcut icon'>
<link href="/stylesheets/manifest.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/chromium.js"></script>
</head>
<body id="signal-container" class='signal index'>
<div class='app-loading-screen'>
<div class='content'>
<img src='/images/icon_250.png' height='150'>
<div class="module-splash-screen__logo module-img--150"></div>
<div class='container'>
<span class='dot'></span>
<span class='dot'></span>

12
main.js
View File

@ -249,7 +249,7 @@ function createWindow() {
backgroundColor:
config.environment === 'test' || config.environment === 'test-lib'
? '#ffffff' // Tests should always be rendered on a white background
: '#2090EA',
: '#3a76f0',
vibrancy: 'appearance-based',
webPreferences: {
nodeIntegration: false,
@ -494,7 +494,7 @@ function showAbout() {
resizable: false,
title: locale.messages.aboutSignalDesktop.message,
autoHideMenuBar: true,
backgroundColor: '#2090EA',
backgroundColor: '#3a76f0',
show: false,
vibrancy: 'appearance-based',
webPreferences: {
@ -542,7 +542,7 @@ async function showSettingsWindow() {
resizable: false,
title: locale.messages.signalDesktopPreferences.message,
autoHideMenuBar: true,
backgroundColor: '#2090EA',
backgroundColor: '#3a76f0',
show: false,
modal: true,
vibrancy: 'appearance-based',
@ -612,7 +612,7 @@ async function showStickerCreator() {
height: 650,
title: locale.messages.signalDesktopStickerCreator,
autoHideMenuBar: true,
backgroundColor: '#2090EA',
backgroundColor: '#3a76f0',
show: false,
webPreferences: {
nodeIntegration: false,
@ -662,7 +662,7 @@ async function showDebugLogWindow() {
resizable: false,
title: locale.messages.debugLog.message,
autoHideMenuBar: true,
backgroundColor: '#2090EA',
backgroundColor: '#3a76f0',
show: false,
modal: true,
vibrancy: 'appearance-based',
@ -711,7 +711,7 @@ async function showPermissionsPopupWindow() {
resizable: false,
title: locale.messages.allowAccess.message,
autoHideMenuBar: true,
backgroundColor: '#2090EA',
backgroundColor: '#3a76f0',
show: false,
modal: true,
vibrancy: 'appearance-based',

2
stylesheets/_global.scss
View File

@ -314,7 +314,7 @@ $loading-height: 16px;
right: 0;
top: 0;
bottom: 0;
background-color: $color-signal-blue;
background-color: $color-ultramarine-brand-light;
color: $color-white;
display: flex;
align-items: center;

45
stylesheets/_modules.scss
View File

@ -1,5 +1,34 @@
// Using BEM syntax explained here: https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
.module-splash-screen__logo {
@include color-svg('../images/signal-logo.svg', $color-white);
margin: 24px auto;
&.module-img--256 {
height: 256px;
width: 256px;
}
&.module-img--200 {
height: 200px;
width: 200px;
}
&.module-img--150 {
height: 150px;
width: 150px;
}
&.module-img--128 {
height: 128px;
width: 128px;
}
&.module-logo-blue {
background-color: $color-ultramarine-brand-light;
}
}
// Module: Contact Name
.module-contact-name__profile-name {
@ -342,11 +371,11 @@
background-color: $color-gray-75;
}
@include ios-theme {
background-color: $color-signal-blue;
background-color: $color-ultramarine-ui-light;
color: $color-white;
}
@include ios-dark-theme {
background-color: $color-signal-blue;
background-color: $color-ultramarine-ui-light;
color: $color-gray-05;
}
}
@ -3152,7 +3181,14 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
.module-conversation-list-item--has-unread {
padding-left: 12px;
border-left: 4px solid $color-signal-blue;
@include light-theme {
border-left: 4px solid $color-ultramarine-ui-light;
}
@include dark-theme {
border-left: 4px solid $color-ultramarine-ui-dark;
}
}
.module-conversation-list-item--is-selected {
@ -3188,12 +3224,13 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
border-radius: 10px;
color: $color-white;
background-color: $color-signal-blue;
@include light-theme {
background-color: $color-ultramarine-ui-light;
box-shadow: 0px 0px 0px 1px $color-gray-02;
}
@include dark-theme {
background-color: $color-ultramarine-ui-dark;
box-shadow: 0px 0px 0px 1px $color-gray-90;
}
}

6
stylesheets/_variables.scss
View File

@ -6,7 +6,7 @@ $inter: Inter, 'Helvetica Neue', 'Source Sans Pro', 'Source Han Sans SC',
$color-signal-blue: #2090ea;
$color-accent-blue: #2090ea;
$color-accent-blue: #2c6bed;
$color-accent-green: #4caf50;
$color-accent-red: #f44336;
$color-accent-yellow: #ffd624;
@ -35,6 +35,10 @@ $color-black-alpha-20: rgba($color-black, 0.2);
$color-black-alpha-40: rgba($color-black, 0.4);
$color-black-alpha-60: rgba($color-black, 0.6);
$color-ultramarine-brand-light: #3a76f0;
$color-ultramarine-brand-dark: #1851b4;
$color-ultramarine-ui-light: #2c6bed;
$color-ultramarine-ui-dark: #6191f3;
$color-crimson: #cc163d;
$color-vermilion: #c73800;
$color-burlap: #746c53;

8
test/index.html
View File

@ -12,7 +12,7 @@
<script type='text/x-tmpl-mustache' id='app-loading-screen'>
<div class='content'>
<img src='images/icon_250.png' height='150'>
<div class="module-splash-screen__logo module-img--150"></div>
<div class='container'>
<span class='dot'></span>
<span class='dot'></span>
@ -24,7 +24,7 @@
<script type='text/x-tmpl-mustache' id='conversation-loading-screen'>
<div class='content'>
<img src='images/icon_128.png'>
<div class="module-splash-screen__logo module-img--128"></div>
<div class='container'>
<span class='dot'></span>
<span class='dot'></span>
@ -42,7 +42,7 @@
<div class='conversation-header'></div>
<div class='container'>
<div class='content'>
<img src='images/icon_128.png' />
<div class="module-splash-screen__logo module-img--128"></div>
<h3>{{ welcomeToSignal }}</h3>
<p>{{ selectAContact }}</p>
</div>
@ -327,7 +327,7 @@
<div class='step'>
<div class='inner'>
<div class='step-body'>
<img class='banner-image' src='images/icon_128.png' />
<div class="banner-image module-splash-screen__logo module-img--128"></div>
<div class='header'>Create your Signal Account</div>
<div id='phone-number-input'>
<div class='phone-input-form'>