Move to new logo and primary blue color
This commit is contained in:
Josh Perez
Scott Nonnenberg
parent
a90246cbe5
commit
12457d47a3
16 changed files with 66 additions and 26 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.9 KiB After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 621 B After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 4.8 KiB |
1
images/signal-logo.svg
Normal file
1
images/signal-logo.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -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
12
main.js
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,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;
|
||||
|
|
|
|||
|
|
@ -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'>
|
||||
|
|
|
|||
Loading…
Reference in a new issue