diff --git a/.gitignore b/.gitignore index 5ef719efd..d6ef6fa6c 100644 --- a/.gitignore +++ b/.gitignore @@ -85,6 +85,7 @@ Session.vim # SASS src/sass/*.css .sass-cache +src/sass/app # copay www www/css/* diff --git a/app-template/apply.js b/app-template/apply.js index b5de33729..5f95484bb 100755 --- a/app-template/apply.js +++ b/app-template/apply.js @@ -105,7 +105,9 @@ try { fs.writeFileSync('../externalServices.json', externalServices, 'utf8'); function copyDir(from, to, cb) { - console.log('Copying dir ' + from + ' to'); + console.log('Copying dir ' + from + ' to ' + to); + if (fs.existsSync(to)) fs.removeSync(to); // remove previous app directory + if (!fs.existsSync(from)) return; // nothing to do var files = []; fs.walk(from) .on('data', function(item) { @@ -115,16 +117,12 @@ function copyDir(from, to, cb) { var l = tmp.length - from.length; if (tmp.indexOf(from) == l) return; // #same dir - console.log('[apply.js.81]', l); //TODO - - console.log('[apply.js.78]', from); //TODO - // console.log('[apply.js.78]', to); //TODO - console.log('[apply.js.78]', item.path); //TODO - console.log('[apply.js.78]', tmp.indexOf(from)); //TODO } if (item.path.indexOf('DS_Store') >= 0) return; - files.push(item.path) + if (!files.includes(path.dirname(item.path))) { + files.push(item.path); + } }) .on('end', function() { files.forEach(function(i) { @@ -139,5 +137,7 @@ function copyDir(from, to, cb) { copyDir(configDir + '/img/', '../www/img/app/', function() { - console.log("apply.js finished. \n\n"); + copyDir(configDir + '/sass/', '../src/sass/app/', function() { + console.log("apply.js finished. \n\n"); + }); }); diff --git a/app-template/bitpay/sass/overrides.scss b/app-template/bitpay/sass/overrides.scss new file mode 100644 index 000000000..e69de29bb diff --git a/app-template/copay/img/backup-warning.svg b/app-template/copay/img/backup-warning.svg new file mode 100644 index 000000000..a44e1e82a --- /dev/null +++ b/app-template/copay/img/backup-warning.svg @@ -0,0 +1,29 @@ + + + + backup-warning + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app-template/copay/img/icon-bitcoin.svg b/app-template/copay/img/icon-bitcoin.svg new file mode 100644 index 000000000..3733702c6 --- /dev/null +++ b/app-template/copay/img/icon-bitcoin.svg @@ -0,0 +1,13 @@ + + + + icon-bitcoin + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/app-template/copay/img/onboarding/push-notifications.svg b/app-template/copay/img/onboarding/push-notifications.svg new file mode 100644 index 000000000..829ee9427 --- /dev/null +++ b/app-template/copay/img/onboarding/push-notifications.svg @@ -0,0 +1,46 @@ + + + + push-notifications + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app-template/copay/img/onboarding/tour-control.svg b/app-template/copay/img/onboarding/tour-control.svg new file mode 100644 index 000000000..7a49991b1 --- /dev/null +++ b/app-template/copay/img/onboarding/tour-control.svg @@ -0,0 +1,47 @@ + + + + tour-control + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app-template/copay/img/onboarding/tour-currency.svg b/app-template/copay/img/onboarding/tour-currency.svg new file mode 100644 index 000000000..85854559f --- /dev/null +++ b/app-template/copay/img/onboarding/tour-currency.svg @@ -0,0 +1,33 @@ + + + + tour-currency + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app-template/copay/img/onboarding/tour-phone.svg b/app-template/copay/img/onboarding/tour-phone.svg new file mode 100644 index 000000000..9386356db --- /dev/null +++ b/app-template/copay/img/onboarding/tour-phone.svg @@ -0,0 +1,39 @@ + + + + onboarding-tour-phone + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app-template/copay/img/tab-icons/ico-home-selected.svg b/app-template/copay/img/tab-icons/ico-home-selected.svg new file mode 100644 index 000000000..0b8d5bace --- /dev/null +++ b/app-template/copay/img/tab-icons/ico-home-selected.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/app-template/copay/img/tab-icons/ico-home.svg b/app-template/copay/img/tab-icons/ico-home.svg new file mode 100644 index 000000000..4297cf20c --- /dev/null +++ b/app-template/copay/img/tab-icons/ico-home.svg @@ -0,0 +1,8 @@ + + + + + diff --git a/app-template/copay/img/tab-icons/ico-receive-selected.svg b/app-template/copay/img/tab-icons/ico-receive-selected.svg new file mode 100644 index 000000000..55fdd5ea0 --- /dev/null +++ b/app-template/copay/img/tab-icons/ico-receive-selected.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app-template/copay/img/tab-icons/ico-receive.svg b/app-template/copay/img/tab-icons/ico-receive.svg new file mode 100644 index 000000000..aab9aec69 --- /dev/null +++ b/app-template/copay/img/tab-icons/ico-receive.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + diff --git a/app-template/copay/img/tab-icons/ico-scan-selected.svg b/app-template/copay/img/tab-icons/ico-scan-selected.svg new file mode 100644 index 000000000..9081e465b --- /dev/null +++ b/app-template/copay/img/tab-icons/ico-scan-selected.svg @@ -0,0 +1,17 @@ + + + + + + + + + \ No newline at end of file diff --git a/app-template/copay/img/tab-icons/ico-scan.svg b/app-template/copay/img/tab-icons/ico-scan.svg new file mode 100644 index 000000000..ea08ae0f0 --- /dev/null +++ b/app-template/copay/img/tab-icons/ico-scan.svg @@ -0,0 +1,17 @@ + + + + + + + + + diff --git a/app-template/copay/img/tab-icons/ico-send-selected.svg b/app-template/copay/img/tab-icons/ico-send-selected.svg new file mode 100644 index 000000000..7e00cd371 --- /dev/null +++ b/app-template/copay/img/tab-icons/ico-send-selected.svg @@ -0,0 +1,12 @@ + + + + + + + + \ No newline at end of file diff --git a/app-template/copay/img/tab-icons/ico-send.svg b/app-template/copay/img/tab-icons/ico-send.svg new file mode 100644 index 000000000..a5020691d --- /dev/null +++ b/app-template/copay/img/tab-icons/ico-send.svg @@ -0,0 +1,11 @@ + + + + + + + + diff --git a/app-template/copay/img/tab-icons/ico-settings-selected.svg b/app-template/copay/img/tab-icons/ico-settings-selected.svg new file mode 100644 index 000000000..140efd5f9 --- /dev/null +++ b/app-template/copay/img/tab-icons/ico-settings-selected.svg @@ -0,0 +1,40 @@ + + + + + + + \ No newline at end of file diff --git a/app-template/copay/img/tab-icons/ico-settings.svg b/app-template/copay/img/tab-icons/ico-settings.svg new file mode 100644 index 000000000..605bdb2fc --- /dev/null +++ b/app-template/copay/img/tab-icons/ico-settings.svg @@ -0,0 +1,31 @@ + + + + + + diff --git a/app-template/copay/sass/overrides.scss b/app-template/copay/sass/overrides.scss new file mode 100644 index 000000000..16d2f2bbc --- /dev/null +++ b/app-template/copay/sass/overrides.scss @@ -0,0 +1,70 @@ +/* + * Copay Distribution SCSS overrides + */ + +/* Colors */ +$v-primary-color: #192c3a; +$v-secondary-color: #31465b; +$v-accent-color: #1abb9b; + +$v-text-primary-color: #192c3a; +$v-text-secondary-color: #c2c9d1; +$v-text-accent-color: #1abb9b; + +$v-success-color: #1abb9b; +$v-warning-color: #bb331a; + +/* Theme */ +$v-default-wallet-color-index: 6; +$v-top-tabs-color: $v-accent-color; +$v-wallet-backup-phrase-color: $v-text-primary-color; +$v-wallet-backup-select-phrase-color: $v-secondary-color; +$v-wallet-backup-select-word-bg: $v-accent-color; +$v-wallet-backup-select-word-color: $v-text-primary-color; +$v-wallet-backup-select-word-disabled-color: $v-accent-color; +$v-tou-bg: $v-secondary-color; +$v-tou-color: $v-text-secondary-color; +$v-icon-border-radius: 3px; +$v-bitcoin-icon: url('../img/app/icon-bitcoin.svg'); + +$v-button-primary-color: $v-text-primary-color; +$v-button-primary-outline-active-color: $v-text-primary-color; + +$v-button-secondary-bg: $v-secondary-color; +$v-button-secondary-color: $v-accent-color; +$v-button-secondary-active-bg: darken($v-secondary-color, 10%); +$v-button-secondary-clear-color: $v-accent-color; +$v-button-secondary-outline-border: $v-accent-color; +$v-button-secondary-outline-color: $v-accent-color; +$v-button-secondary-outline-active-bg: darken($v-accent-color, 10%); +$v-button-secondary-outline-active-color: $v-accent-color; + +/* Onboarding */ +$v-onboarding-welcome-bg: none; +$v-onboarding-color: $v-text-secondary-color; +$v-onboarding-bar-header-color: $v-text-primary-color; +$v-onboarding-bar-header-button-color: $v-accent-color; + +$v-onboarding-tour-phone-bg: url(../img/app/onboarding/tour-phone.svg); +$v-onboarding-tour-currency-bg: url(../img/app/onboarding/tour-currency.svg); +$v-onboarding-tour-control-bg: url(../img/app/onboarding/tour-control.svg); +$v-onboarding-push-notification-bg: url(../img/app/onboarding/push-notifications.svg); +$v-onboarding-backup-warning-bg: url(../img/app/backup-warning.svg); + +$v-onboarding-button-back-color: $v-accent-color; + +$v-onboarding-button-secondary-bg: $v-secondary-color; +$v-onboarding-button-secondary-color: $v-accent-color; +$v-onboarding-button-secondary-active-bg: darken($v-secondary-color, 10%); +$v-onboarding-button-secondary-clear-color: $v-accent-color; +$v-onboarding-button-secondary-outline-border: $v-accent-color; +$v-onboarding-button-secondary-outline-color: $v-accent-color; +$v-onboarding-button-secondary-outline-active-bg: darken($v-accent-color, 10%); +$v-onboarding-button-secondary-outline-active-color: $v-accent-color; + +/* Main tabs */ +$v-tab-home-selected-icon: url('../img/app/tab-icons/ico-home-selected.svg'); +$v-tab-receive-selected-icon: url('../img/app/tab-icons/ico-receive-selected.svg'); +$v-tab-settings-selected-icon: url('../img/app/tab-icons/ico-settings-selected.svg'); +$v-tab-scan-selected-icon: url('../img/app/tab-icons/ico-scan-selected.svg'); +$v-tab-send-selected-icon: url('../img/app/tab-icons/ico-send-selected.svg'); diff --git a/app-template/package-template.json b/app-template/package-template.json index 89211c379..7373a94aa 100644 --- a/app-template/package-template.json +++ b/app-template/package-template.json @@ -58,7 +58,6 @@ "bitauth": "^0.3.2", "bitcore-wallet-client": "4.4.2", "bower": "^1.7.9", - "chai": "^3.5.0", "cordova-android": "5.1.1", "cordova-custom-config": "^3.0.5", "cordova-plugin-qrscanner": "^2.3.1", @@ -78,8 +77,6 @@ "grunt-nw-builder": "^2.0.3", "grunt-sass": "^1.2.0", "load-grunt-tasks": "^3.5.0", - "mocha": "^2.4.5", - "phantomjs-prebuilt": "^2.1.7", "shelljs": "^0.3.0" }, "scripts": { diff --git a/src/js/controllers/preferencesColor.js b/src/js/controllers/preferencesColor.js index cf1518e2d..5bb68797c 100644 --- a/src/js/controllers/preferencesColor.js +++ b/src/js/controllers/preferencesColor.js @@ -5,15 +5,16 @@ angular.module('copayApp.controllers').controller('preferencesColorController', $scope.wallet = wallet; var walletId = wallet.credentials.walletId; var config = configService.getSync(); - $scope.colorList = configService.getColorList(); config.colorFor = config.colorFor || {}; - $scope.currentColor = config.colorFor[walletId] || '#4A90E2'; - $timeout(function() { - $scope.$apply(); - }); + var retries = 3; + $scope.colorCount = getColorCount(); + setCurrentColorIndex(); + + $scope.save = function(i) { + var color = indexToColor(i); + if (!color) return; - $scope.save = function(color) { var opts = { colorFor: {} }; @@ -24,4 +25,50 @@ angular.module('copayApp.controllers').controller('preferencesColorController', $ionicHistory.goBack(); }); }; + + function getColorDefault() { + return rgb2hex(window.getComputedStyle(document.getElementsByClassName('wallet-color-default')[0]).color); + }; + + function getColorCount() { + var count = window.getComputedStyle(document.getElementsByClassName('wallet-color-count')[0]).content; + return parseInt(count.replace(/[^0-9]/g, '')); + }; + + function setCurrentColorIndex() { + try { + $scope.currentColorIndex = colorToIndex(config.colorFor[walletId] || getColorDefault()); + } catch(e) { + // Wait for DOM to render and try again. + $timeout(function() { + if (retries > 0) { + retries -= 1; + setCurrentColorIndex(); + } + }, 100); + } + }; + + function colorToIndex(color) { + for (var i = 0; i < $scope.colorCount; i++) { + if (indexToColor(i) == color.toLowerCase()) { + return i; + } + } + return undefined; + }; + + function indexToColor(i) { + // Expect an exception to be thrown if can't getComputedStyle(). + return rgb2hex(window.getComputedStyle(document.getElementsByClassName('wallet-color-' + i)[0]).backgroundColor); + }; + + function rgb2hex(rgb) { + rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i); + return (rgb && rgb.length === 4) ? "#" + + ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) + + ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) + + ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : ''; + }; + }); diff --git a/src/js/directives/svg.js b/src/js/directives/svg.js new file mode 100644 index 000000000..077b155a3 --- /dev/null +++ b/src/js/directives/svg.js @@ -0,0 +1,44 @@ +'use strict'; + +angular.module('copayApp.directives') + /** + * Replaces img tag with its svg content to allow for CSS styling of the svg. + */ + .directive('svg', function($http) { + return { + restrict: 'C', + link: function(scope, element, attrs) { + var imgId = attrs.id; + var imgClass = attrs.class; + var imgUrl = attrs.src; + var svg; + + // Load svg content + $http.get(imgUrl).success(function(data, status) { + svg = angular.element(data); + for (var i = svg.length - 1; i >= 0; i--) { + if (svg[i].constructor == SVGSVGElement) { + svg = angular.element(svg[i]); + break; + } + } + + if (typeof imgId !== 'undefined') { + svg.attr('id', imgId); + } + + if (typeof imgClass !== 'undefined') { + svg.attr('class', imgClass); + } + // Remove invalid attributes + svg = svg.removeAttr('xmlns:a'); + element.replaceWith(svg); + }); + + scope.$on('$destroy', function() { + if (svg) svg.remove(); + }); + } + }; + }); + \ No newline at end of file diff --git a/src/js/filters/filters.js b/src/js/filters/filters.js index 716ce4102..8d9a56d10 100644 --- a/src/js/filters/filters.js +++ b/src/js/filters/filters.js @@ -71,4 +71,12 @@ angular.module('copayApp.filters', []) if (reverse) filtered.reverse(); return filtered; }; + }) + .filter('range', function() { + return function(input, total) { + total = parseInt(total); + for (var i = 0; i < total; i++) + input.push(i); + return input; + }; }); diff --git a/src/js/services/configService.js b/src/js/services/configService.js index 1797eab9f..9e447f7b9 100644 --- a/src/js/services/configService.js +++ b/src/js/services/configService.js @@ -83,69 +83,6 @@ angular.module('copayApp.services').factory('configService', function(storageSer var configCache = null; - var colorList = [ - { - color: "#DD4B39", - name: "Cinnabar" - }, - { - color: "#F38F12", - name: "Carrot Orange" - }, - { - color: "#FAA77F", - name: "Light Salmon" - }, - { - color: "#D0B136", - name: "Metallic Gold" - }, - { - color: "#9EDD72", - name: "Feijoa" - }, - { - color: "#29BB9C", - name: "Shamrock" - }, - { - color: "#019477", - name: "Observatory" - }, - { - color: "#77DADA", - name: "Turquoise Blue" - }, - { - color: "#4A90E2", - name: "Cornflower Blue" - }, - { - color: "#484ED3", - name: "Free Speech Blue" - }, - { - color: "#9B59B6", - name: "Deep Lilac" - }, - { - color: "#E856EF", - name: "Free Speech Magenta" - }, - { - color: "#FF599E", - name: "Brilliant Rose" - }, - { - color: "#7A8C9E", - name: "Light Slate Grey" - } - ]; - - root.getColorList = function() { - return colorList; - }; - root.getSync = function() { if (!configCache) throw new Error('configService#getSync called when cache is not initialized'); diff --git a/src/js/services/profileService.js b/src/js/services/profileService.js index 964b48eac..d6ddc45c3 100644 --- a/src/js/services/profileService.js +++ b/src/js/services/profileService.js @@ -33,7 +33,7 @@ angular.module('copayApp.services') configService.whenAvailable(function(config) { wallet.usingCustomBWS = config.bwsFor && config.bwsFor[wallet.id] && (config.bwsFor[wallet.id] != defaults.bws.url); wallet.name = (config.aliasFor && config.aliasFor[wallet.id]) || wallet.credentials.walletName; - wallet.color = (config.colorFor && config.colorFor[wallet.id]) || '#4A90E2'; + wallet.color = (config.colorFor && config.colorFor[wallet.id]); wallet.email = config.emailFor && config.emailFor[wallet.id]; }); } diff --git a/src/sass/buttons.scss b/src/sass/buttons.scss index dd750d28f..43aaf2bc2 100644 --- a/src/sass/buttons.scss +++ b/src/sass/buttons.scss @@ -1,24 +1,3 @@ -// white on $positive -$button-primary-bg: $positive; -$button-primary-text: #fff; -$button-primary-border: transparent; -$button-primary-active-bg: darken($positive, 5%); -$button-primary-active-border: transparent; - -//white on translucent-white -$button-secondary-onboarding-bg: rgba($light-gray, 0.1); // rgba(215, 215, 215, 0.1); -$button-secondary-onboarding-text: #fff; -$button-secondary-onboarding-border: transparent; -$button-secondary-onboarding-active-bg: rgba($light-gray, 0.2); // rgba(215, 215, 215, 0.2); -$button-secondary-onboarding-active-border: transparent; - -//dark-gray on translucent-gray -$button-secondary-bg: $subtle-gray; -$button-secondary-text: $dark-gray; -$button-secondary-border: transparent; -$button-secondary-active-bg: darken($subtle-gray, 5%); -$button-secondary-active-border: transparent; - %button-standard { width: 85%; max-width: 300px; @@ -30,9 +9,9 @@ $button-secondary-active-border: transparent; .button, .onboarding .button { &.button-primary { - @include button-style($button-primary-bg, $button-primary-border, $button-primary-active-bg, $button-primary-active-border, $button-primary-text); - @include button-clear($button-primary-bg); - @include button-outline($button-primary-bg); + @include button-style($v-button-primary-bg, $v-button-primary-border, $v-button-primary-active-bg, $v-button-primary-active-border, $v-button-primary-color); + @include button-clear($v-button-primary-bg); + @include button-outline($v-button-primary-bg); } &.button-primary, &.button-secondary, @@ -48,16 +27,16 @@ $button-secondary-active-border: transparent; } .onboarding .button { &.button-secondary { - @include button-style($button-secondary-onboarding-bg, $button-secondary-onboarding-border, $button-secondary-onboarding-active-bg, $button-secondary-onboarding-active-border, $button-secondary-onboarding-text); - @include button-clear($button-secondary-onboarding-text); - @include button-outline($button-secondary-onboarding-text); + @include button-style($v-onboarding-button-secondary-bg, $v-onboarding-button-secondary-border, $v-onboarding-button-secondary-active-bg, $v-onboarding-button-secondary-active-border, $v-onboarding-button-secondary-color); + @include button-clear($v-onboarding-button-secondary-color); + @include button-outline($v-onboarding-button-secondary-color); } } .button { &.button-secondary { - @include button-style($button-secondary-bg, $button-secondary-border, $button-secondary-active-bg, $button-secondary-active-border, $button-secondary-text); - @include button-clear($button-secondary-text); - @include button-outline($button-secondary-text); + @include button-style($v-button-secondary-bg, $v-button-secondary-border, $v-button-secondary-active-bg, $v-button-secondary-active-border, $v-button-secondary-color); + @include button-clear($v-button-secondary-color); + @include button-outline($v-button-secondary-color); } } diff --git a/src/sass/directives/gravatar.scss b/src/sass/directives/gravatar.scss index 6a6307ef4..9832201c8 100644 --- a/src/sass/directives/gravatar.scss +++ b/src/sass/directives/gravatar.scss @@ -1,4 +1,4 @@ .gravatar { - border-radius: 50%; + border-radius: $v-icon-border-radius; display: inline-block; } diff --git a/src/sass/icons.scss b/src/sass/icons.scss index b72b0daad..9204718d5 100644 --- a/src/sass/icons.scss +++ b/src/sass/icons.scss @@ -37,10 +37,10 @@ .big-icon-svg { padding: 0 7px; > .bg { - border-radius: 50%; + border-radius: $v-icon-border-radius; width: 40px; height: 40px; - box-shadow: $hovering-box-shadow; + box-shadow: $v-hovering-box-shadow; background-repeat:no-repeat; background-clip: padding-box; background-size: 103%; @@ -61,12 +61,12 @@ &.circle{ left:8px; .bg { - border-radius: 50%; + border-radius: $v-icon-border-radius; width: 70px; height: 70px; padding:.1rem; margin: 0.2rem; - box-shadow: 0px 1px 5px rgba($mid-gray, .1); + box-shadow: 0px 1px 5px rgba($v-mid-gray, .1); display:flex; margin:auto; } diff --git a/src/sass/ionic.scss b/src/sass/ionic.scss index b637730f8..19877aa6e 100644 --- a/src/sass/ionic.scss +++ b/src/sass/ionic.scss @@ -32,7 +32,7 @@ $placeholder-icon-padding: 10px; // the default .item p color of #666 cannot be modified by a variable .item p { - color: $mid-gray; + color: $v-mid-gray; } // we'd like to diverge from the standard ionic formula for left-right card margins diff --git a/src/sass/main.scss b/src/sass/main.scss index 7485d07e0..cb5e7118f 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -1,3 +1,4 @@ +@import "app/overrides"; @import "fonts"; @import "variables"; @import "ionic"; diff --git a/src/sass/shame.scss b/src/sass/shame.scss index da822a2e3..07ac2dedf 100644 --- a/src/sass/shame.scss +++ b/src/sass/shame.scss @@ -27,7 +27,7 @@ color: #fff; &.warning-red{ border-color: #EB475A; - background-color: $warning-red; + background-color: $v-warning-color; } } &.error { @@ -151,8 +151,8 @@ input[type=number] { position: absolute; font-size: 20px; right: 10px; - background-color: $subtle-gray; - color: $dark-gray; + background-color: $v-subtle-gray; + color: $v-dark-gray; border-radius: 4px; padding: 2px 10px; cursor: pointer; diff --git a/src/sass/variables.scss b/src/sass/variables.scss index db0b86431..2b1710f97 100644 --- a/src/sass/variables.scss +++ b/src/sass/variables.scss @@ -1,57 +1,188 @@ -/* constants */ -$royal: #1e3186; -$soft-blue: #647ce8; -$fill-blue: #D5DFFF; -$subtle-gray: darken(#fff, 5%); -$roboto: "Roboto", sans-serif; -$roboto-light: "Roboto-Light", sans-serif-light; -$light-green: rgb(19, 229, 182); -$success-green: #17ae8c; -$warning-orange: #ffa500; -$warning-red: #E15061; -$dark-gray: #445; -$mid-gray: #667; -$light-gray: #9b9bab; -$subtle-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); -$hovering-box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3); -$subtle-radius: 3px; -$visible-radius: 6px; -$unmistakable-radius: 12px; +/* + * App variables + */ -/* Set ionic variables */ +/* Fonts */ +$v-font-family: "Roboto", sans-serif !default; +$v-font-family-light: "Roboto-Light", sans-serif-light !default; -$positive: $soft-blue; +/* Colors */ +$v-bitcoin-orange: #ff9900 !default; -$font-size-base: 16px; -$font-size-small: 12px; -$font-family-sans-serif: $roboto; -$font-family-light-sans-serif: $roboto-light; +$v-dark-gray: #445 !default; +$v-mid-gray: #667 !default; +$v-light-gray: #9b9bab !default; +$v-subtle-gray: darken(#ffffff, 5%) !default; -$button-border-radius: $subtle-radius; -$button-height: 52px; -$button-padding: 16px; +$v-primary-color: #1e3186 !default; +$v-secondary-color: #111b49 !default; +$v-accent-color: #647ce8 !default; -$base-background-color: $subtle-gray; +$v-text-primary-color: #1e3186 !default; +$v-text-secondary-color: #ffffff !default; +$v-text-accent-color: #647ce8 !default; -$item-default-active-bg: $subtle-gray; -$item-icon-font-size: 24px; +$v-success-color: #13e5b6 !default; +$v-warning-color: #ffa500 !default; -$input-color: $dark-gray; -$input-border: $light-gray; -$input-label-color: $mid-gray; -$input-color-placeholder: lighten($dark-gray, 40%); +$v-wallet-color-map: ( + 0: (color: #dd4b39, name: 'Cinnabar'), + 1: (color: #f38f12, name: 'Carrot Orange'), + 2: (color: #faa77f, name: 'Light Salmon'), + 3: (color: #d0b136, name: 'Metallic Gold'), + 4: (color: #9edd72, name: 'Feijoa'), + 5: (color: #29bb9c, name: 'Shamrock'), + 6: (color: #019477, name: 'Observatory'), + 7: (color: #77dada, name: 'Turquoise Blue'), + 8: (color: #4a90e2, name: 'Cornflower Blue'), + 9: (color: #484ed3, name: 'Free Speech Blue'), + 10: (color: #9b59b6, name: 'Deep Lilac'), + 11: (color: #e856ef, name: 'Free Speech Magenta'), + 12: (color: #ff599e, name: 'Brilliant Rose'), + 13: (color: #7a8c9e, name: 'Light Slate Grey') +) !default; -$item-default-bg: #ffffff; -$item-default-border: $subtle-gray; -$item-default-text: $dark-gray; -$item-default-active-bg: darken(#ffffff, 7%); -$item-default-active-border: darken($subtle-gray, 7%); -$item-divider-bg: $subtle-gray; +/* Theme */ +$v-default-wallet-color-index: 6 !default; // See $v-wallet-color-map +$v-subtle-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !default; +$v-hovering-box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3) !default; +$v-subtle-radius: 3px !default; +$v-visible-radius: 6px !default; +$v-unmistakable-radius: 12px !default; +$v-scanner-background-color: $v-primary-color !default; +$v-scanner-guide-color: $v-accent-color !default; +$v-top-tabs-color: $v-primary-color !default; -$bar-default-border: $subtle-gray; +$v-wallet-backup-bg: #ffffff !default; +$v-wallet-backup-phrase-bg: $v-subtle-gray !default; +$v-wallet-backup-phrase-color: $v-dark-gray !default; +$v-wallet-backup-select-phrase-color: $v-subtle-gray; +$v-wallet-backup-select-word-bg: #ffffff !default; +$v-wallet-backup-select-word-color: $v-dark-gray !default; +$v-wallet-backup-select-word-disabled-color: $v-light-gray !default; +$v-tou-bg: #ffffff !default; +$v-tou-color: $v-dark-gray !default; +$v-icon-color: $v-accent-color !default; +$v-icon-negative-color: $v-accent-color !default; +$v-icon-border-radius: 50% !default; +$v-bitcoin-icon: url('../img/icon-bitcoin.svg') !default; -$tabs-icon-size: 22px; +$v-button-primary-bg: $v-accent-color !default; +$v-button-primary-color: #ffffff !default; +$v-button-primary-border: transparent !default; +$v-button-primary-active-bg: darken($v-accent-color, 10%) !default; +$v-button-primary-active-border: transparent !default; +$v-button-primary-clear-bg: none !default; +$v-button-primary-clear-color: $v-accent-color !default; +$v-button-primary-outline-bg: transparent !default; +$v-button-primary-outline-border: $v-accent-color !default; +$v-button-primary-outline-color: $v-accent-color !default; +$v-button-primary-outline-active-bg: $v-accent-color !default; +$v-button-primary-outline-active-color: #ffffff !default; -$ios-transition-duration: 200ms; +$v-button-secondary-bg: $v-subtle-gray !default; +$v-button-secondary-color: $v-dark-gray !default; +$v-button-secondary-border: transparent !default; +$v-button-secondary-active-bg: $v-subtle-gray !default; +$v-button-secondary-active-border: transparent !default; +$v-button-secondary-clear-bg: none !default; +$v-button-secondary-clear-color: $v-dark-gray !default; +$v-button-secondary-outline-border: $v-dark-gray !default; +$v-button-secondary-outline-bg: transparent !default; +$v-button-secondary-outline-color: $v-dark-gray !default; +$v-button-secondary-outline-active-bg: $v-dark-gray !default; +$v-button-secondary-outline-active-color: #ffffff !default; -$card-box-shadow: $subtle-box-shadow; +/* Onboarding */ +$v-onboarding-pane-bg: $v-primary-color !default; +$v-onboarding-gradient-top-color: $v-primary-color !default; +$v-onboarding-gradient-bottom-color: $v-secondary-color !default; +$v-onboarding-welcome-bg: url(../img/onboarding-welcome-bg.png) !default; +$v-onboarding-color: #ffffff !default; +$v-onboarding-bar-header-color: #ffffff !default; +$v-onboarding-bar-header-button-color: #ffffff !default; +$v-onboarding-tour-swiper-pagination-bg: $v-accent-color !default; +$v-onboarding-backup-alert-icon-color: $v-accent-color !default; +$v-onboarding-checkbox-off-border: $v-accent-color !default; +$v-onboarding-checkbox-on-border: $v-success-color !default; + +$v-onboarding-tour-phone-bg: url(../img/onboarding-tour-phone.svg) !default; +$v-onboarding-tour-currency-bg: url(../img/onboarding-tour-currency-bg.svg) !default; +$v-onboarding-tour-control-bg: url(../img/onboarding-tour-control.svg) !default; +$v-onboarding-push-notification-bg: url(../img/onboarding-push-notifications.svg) !default; +$v-onboarding-backup-warning-bg: url(../img/backup-warning.svg) !default; + +$v-onboarding-button-back-color: #ffffff !default; + +$v-onboarding-button-secondary-bg: rgba($v-light-gray, 0.1) !default; +$v-onboarding-button-secondary-color: #ffffff !default; +$v-onboarding-button-secondary-border: transparent !default; +$v-onboarding-button-secondary-active-bg: rgba($v-light-gray, 0.2) !default; +$v-onboarding-button-secondary-active-border: transparent !default; +$v-onboarding-button-secondary-clear-bg: transparent !default; +$v-onboarding-button-secondary-clear-color: #ffffff !default; +$v-onboarding-button-secondary-outline-border: #ffffff !default; +$v-onboarding-button-secondary-outline-bg: transparent !default; +$v-onboarding-button-secondary-outline-color: #ffffff !default; +$v-onboarding-button-secondary-outline-active-bg: #ffffff !default; +$v-onboarding-button-secondary-outline-active-color: #ffffff !default; + +/* Main tabs */ +$v-tab-home-icon: url('../img/tab-icons/ico-home.svg') !default; +$v-tab-home-selected-icon: url('../img/tab-icons/ico-home-selected.svg') !default; +$v-tab-receive-icon: url('../img/tab-icons/ico-receive.svg') !default; +$v-tab-receive-selected-icon: url('../img/tab-icons/ico-receive-selected.svg') !default; +$v-tab-settings-icon: url('../img/tab-icons/ico-settings.svg') !default; +$v-tab-settings-selected-icon: url('../img/tab-icons/ico-settings-selected.svg') !default; +$v-tab-scan-icon: url('../img/tab-icons/ico-scan.svg') !default; +$v-tab-scan-selected-icon: url('../img/tab-icons/ico-scan-selected.svg') !default; +$v-tab-send-icon: url('../img/tab-icons/ico-send.svg') !default; +$v-tab-send-selected-icon: url('../img/tab-icons/ico-send-selected.svg') !default; + +/* + * Ionic variables + */ +$royal: $v-primary-color !default; +$positive: $v-accent-color !default; + +$font-size-base: 16px !default; +$font-size-small: 12px !default; +$font-family-sans-serif: $v-font-family !default; +$font-family-light-sans-serif: $v-font-family-light !default; + +$link-color: $v-accent-color !default; + +$button-border-radius: $v-subtle-radius !default; +$button-height: 52px !default; +$button-padding: 16px !default; + +$base-background-color: $v-subtle-gray !default; + +$item-default-active-bg: $v-subtle-gray !default; +$item-icon-font-size: 24px !default; + +$input-color: $v-dark-gray !default; +$input-border: $v-light-gray !default; +$input-label-color: $v-mid-gray !default; +$input-color-placeholder: lighten($v-dark-gray, 40%) !default; + +$item-default-bg: #ffffff !default; +$item-default-border: $v-subtle-gray !default; +$item-default-text: $v-dark-gray !default; +$item-default-active-bg: darken(#ffffff, 7%) !default; +$item-default-active-border: darken($v-subtle-gray, 7%) !default; +$item-divider-bg: $v-subtle-gray !default; + +$bar-default-border: $v-subtle-gray !default; +$bar-royal-bg: $v-primary-color !default; +$bar-royal-border: $v-primary-color !default; +$bar-royal-text: #ffffff !default; + +$tabs-icon-size: 22px !default; + +$ios-transition-duration: 200ms !default; + +$card-box-shadow: $v-subtle-box-shadow !default; + +$toggle-on-positive-border: $v-accent-color !default; +$toggle-on-positive-bg: $v-accent-color !default; diff --git a/src/sass/views/add.scss b/src/sass/views/add.scss index fbe99d457..2cb96994d 100644 --- a/src/sass/views/add.scss +++ b/src/sass/views/add.scss @@ -13,10 +13,10 @@ } } .add-type { - color: $dark-gray; + color: $v-dark-gray; } .bg{ - background-color:rgb(100,124,232); + background-color: $v-icon-color; height: 50px; width: 50px; padding:4px; diff --git a/src/sass/views/address-book.scss b/src/sass/views/address-book.scss index b570002cd..73722149e 100644 --- a/src/sass/views/address-book.scss +++ b/src/sass/views/address-book.scss @@ -19,7 +19,7 @@ .icon { &.valid { padding-top: 3px; - color: #13E5B6; + color: $v-success-color; } &.invalid { padding-top: 3px; @@ -39,17 +39,17 @@ } .add-address-list { .item { - color: $dark-gray; + color: $v-dark-gray; padding-top: 1.3rem; padding-bottom: 1.3rem; &.item-divider { - color: $mid-gray; + color: $v-mid-gray; padding-bottom: .5rem; font-size: .9rem; } } .item-note { - color: $light-gray; + color: $v-light-gray; } } } @@ -58,6 +58,9 @@ .scroll { height:100%; } + i.icon>svg#Add_Contact path.st0 { + stroke: $v-icon-negative-color; + } .list { .item { color: #444; @@ -94,7 +97,7 @@ .big-icon-svg { padding: 0 7px; > .bg { - border-radius: 50%; + border-radius: $v-icon-border-radius; width: 40px; height: 40px; box-shadow: none; @@ -128,16 +131,16 @@ font-weight: bold; font-size: 12px; display: block; - color: $mid-gray; + color: $v-mid-gray; } .big-icon-svg { padding: 0 7px; > .bg { background-color: #f2f2f2; - border-radius: 50%; + border-radius: $v-icon-border-radius; width: 70px; height: 70px; - box-shadow: 0px 1px 5px rgba($mid-gray, .1); + box-shadow: 0px 1px 5px rgba($v-mid-gray, .1); background-repeat: no-repeat; background-clip: padding-box; background-size: 103%; diff --git a/src/sass/views/addresses.scss b/src/sass/views/addresses.scss index 5daa7595b..8e3513da9 100644 --- a/src/sass/views/addresses.scss +++ b/src/sass/views/addresses.scss @@ -7,7 +7,7 @@ &-description { text-align: center; font-size: 0.9em; - color: $mid-gray; + color: $v-mid-gray; margin: 1rem 0; a { font-weight: bold; @@ -28,13 +28,16 @@ .banner-icon { margin-top: 25px; i { - box-shadow: $hovering-box-shadow; + box-shadow: $v-hovering-box-shadow; + img { + content: $v-tab-receive-selected-icon; + } } } .addr-list { .item { - color: $dark-gray; + color: $v-dark-gray; padding-top: 1.3rem; padding-bottom: 1.3rem; &.has-addr-value { @@ -42,7 +45,7 @@ padding-bottom: .65rem; } &.item-divider { - color: $mid-gray; + color: $v-mid-gray; padding-bottom: .5rem; font-size: .9rem; } @@ -52,10 +55,10 @@ i { font-size: 35px; margin-right: 5px; - color: #647ce8; + color: $link-color; } span { - color: #647ce8; + color: $link-color; font-weight: bold; } } @@ -82,7 +85,7 @@ } } .item-note { - color: $light-gray; + color: $v-light-gray; } } } diff --git a/src/sass/views/advancedSettings.scss b/src/sass/views/advancedSettings.scss index d4d409494..c48d50f80 100644 --- a/src/sass/views/advancedSettings.scss +++ b/src/sass/views/advancedSettings.scss @@ -12,10 +12,10 @@ content: ''; } &.item-divider { - color: $dark-gray; + color: $v-dark-gray; } .item-note { - color: $dark-gray; + color: $v-dark-gray; } } .has-comment { @@ -24,7 +24,7 @@ .comment { padding: 15px; background-color: #fff; - color: $mid-gray; + color: $v-mid-gray; font-size:0.9em; } } diff --git a/src/sass/views/amount.scss b/src/sass/views/amount.scss index 5c2a6b14c..7e5396f7f 100644 --- a/src/sass/views/amount.scss +++ b/src/sass/views/amount.scss @@ -3,7 +3,7 @@ .recipient-label { font-size: 14px; padding-bottom: 0; - color: $mid-gray; + color: $v-mid-gray; } .item-no-bottom-border + .item { border-top: 0; @@ -54,7 +54,7 @@ .title { float: left; padding-top: 10px; - color: $dark-gray; + color: $v-dark-gray; font-weight: bold; @media(max-height: 480px) { padding: 0px; @@ -73,7 +73,7 @@ bottom: 254px; top: 66px; .light { - color: $light-gray; + color: $v-light-gray; } @media(max-height: 480px) { top: 45px; @@ -93,11 +93,11 @@ font-size: 18px; .title { padding-top: 10px; - color: $dark-gray; + color: $v-dark-gray; font-weight: bold; .limits { margin-top: 10px; - color: $light-gray; + color: $v-light-gray; font-size: 12px; } .select { @@ -114,7 +114,7 @@ bottom: 254px; top: 66px; .light { - color: $light-gray; + color: $v-light-gray; } } } @@ -131,15 +131,15 @@ } } &--placeholder { - color: $light-gray; + color: $v-light-gray; } } &__number { - color: $dark-gray; + color: $v-dark-gray; } &__currency-toggle { - border: 1px solid $subtle-gray; - color: $dark-gray; + border: 1px solid $v-subtle-gray; + color: $v-dark-gray; border-radius: 3px; padding: 0 10px; cursor: pointer; @@ -157,11 +157,11 @@ padding: 10px 0; } &--placeholder { - color: $light-gray; + color: $v-light-gray; } } &__result { - color: $light-gray; + color: $v-light-gray; font-size: .9em; margin-bottom: -.9em; line-height: 1; @@ -170,7 +170,7 @@ } } &__result-equiv { - color: $mid-gray; + color: $v-mid-gray; font-size: 1.2em; margin-top: 2rem; @media(max-height: 480px) { @@ -186,7 +186,7 @@ position: absolute; bottom: 0; width: 100%; - color: $mid-gray; + color: $v-mid-gray; .row { padding: 0 !important; @@ -198,12 +198,12 @@ } .operator { - background-color: $subtle-gray; + background-color: $v-subtle-gray; font-weight: normal; cursor: pointer; &:active { - background-color: $light-gray; + background-color: $v-light-gray; } } @@ -221,10 +221,10 @@ .digit{ cursor: pointer; - border-top: 1px solid $subtle-gray; - border-left: 1px solid $subtle-gray; + border-top: 1px solid $v-subtle-gray; + border-left: 1px solid $v-subtle-gray; &:active { - background-color: $subtle-gray; + background-color: $v-subtle-gray; } } diff --git a/src/sass/views/bitpayCard.scss b/src/sass/views/bitpayCard.scss index 0003e9505..81414d66f 100644 --- a/src/sass/views/bitpayCard.scss +++ b/src/sass/views/bitpayCard.scss @@ -134,7 +134,7 @@ } } .disclosure { - color: $light-gray; + color: $v-light-gray; font-size: 12px; text-align: left; margin: 1rem; @@ -200,7 +200,7 @@ width: 100%; } .item-select select { - color: #667; + color: $v-mid-gray; } .get-started { diff --git a/src/sass/views/bitpayCardIntro.scss b/src/sass/views/bitpayCardIntro.scss index bbb7d769e..5a048bc4e 100644 --- a/src/sass/views/bitpayCardIntro.scss +++ b/src/sass/views/bitpayCardIntro.scss @@ -49,7 +49,7 @@ color: rgba(255, 255, 255, .7); } .slider-pager .slider-pager-page { - color: $soft-blue; + color: $v-accent-color; font-size: 8px; margin: 0; } diff --git a/src/sass/views/bitpayServicesPreferences.scss b/src/sass/views/bitpayServicesPreferences.scss index 11f0c43f3..5ef6652f6 100644 --- a/src/sass/views/bitpayServicesPreferences.scss +++ b/src/sass/views/bitpayServicesPreferences.scss @@ -8,7 +8,7 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - color: $light-gray; + color: $v-light-gray; font-size: 14px; } &.item-icon-right { diff --git a/src/sass/views/buyandsell.scss b/src/sass/views/buyandsell.scss index 06f7f23f9..2de0adc76 100644 --- a/src/sass/views/buyandsell.scss +++ b/src/sass/views/buyandsell.scss @@ -7,12 +7,15 @@ display: inline-block; width: 50px; height: 50px; - border-radius: 50%; - box-shadow: $subtle-box-shadow; + border-radius: $v-icon-border-radius; + box-shadow: $v-subtle-box-shadow; background-color: #fa912b; img { height: 100%; width: 100%; + content: $v-bitcoin-icon; + background-color: $v-bitcoin-orange; + border-radius: $v-icon-border-radius; } } .explain { @@ -30,6 +33,6 @@ } } .item-note { - color: $light-gray; + color: $v-light-gray; } } diff --git a/src/sass/views/export.scss b/src/sass/views/export.scss index 264d54753..f0298d0d4 100644 --- a/src/sass/views/export.scss +++ b/src/sass/views/export.scss @@ -10,7 +10,7 @@ cursor: pointer; padding: 10px 5px; border-bottom-width: 2px; - border-bottom-color: #172565; + border-bottom-color: $v-top-tabs-color; } input[type="password"] { border: none; diff --git a/src/sass/views/feedback/complete.scss b/src/sass/views/feedback/complete.scss index 670c36fd4..71b384cda 100644 --- a/src/sass/views/feedback/complete.scss +++ b/src/sass/views/feedback/complete.scss @@ -29,14 +29,14 @@ .feedback-title { font-size: 20px; font-weight: bold; - color: $dark-gray; + color: $v-dark-gray; margin: 20px 10px; text-align: center; } .subtitle { padding: 10px 30px 20px; text-align: center; - color: $mid-gray; + color: $v-mid-gray; } .icon-svg > img { height: 16rem; @@ -54,7 +54,7 @@ } .share-buttons { padding: 50px 10px 30px; - background-color: $subtle-gray; + background-color: $v-subtle-gray; text-align: center; transform: translateY(100%); opacity: 0; @@ -66,7 +66,7 @@ } .share-buttons__action { display: inline-block; - color: #667; + color: $v-mid-gray; font-size: .9rem; width: 90px; height: 90px; diff --git a/src/sass/views/feedback/rateApp.scss b/src/sass/views/feedback/rateApp.scss index c484ccc19..8a4cd2b8e 100644 --- a/src/sass/views/feedback/rateApp.scss +++ b/src/sass/views/feedback/rateApp.scss @@ -2,7 +2,7 @@ background-color: #ffffff; text-align: center; .skip-rating { - color: $dark-gray; + color: $v-dark-gray; position: absolute; top: 5px; right: 10px; @@ -16,7 +16,7 @@ .feedback-title { font-size: 20px; font-weight: bold; - color: $dark-gray; + color: $v-dark-gray; margin: 80px 50px 10px; text-align: center; } @@ -26,13 +26,13 @@ } .subtitle { padding: 10px 30px 20px 40px; - color: #667; + color: $v-mid-gray; } .rate-buttons { bottom: 0; width: 100%; position: absolute; - background-color: $subtle-gray; + background-color: $v-subtle-gray; padding: 30px 0 15px; } } diff --git a/src/sass/views/feedback/send.scss b/src/sass/views/feedback/send.scss index b9fafa8b1..807c4f8c5 100644 --- a/src/sass/views/feedback/send.scss +++ b/src/sass/views/feedback/send.scss @@ -14,7 +14,7 @@ padding-left: 10px; font-size: 20px; font-weight: bold; - color: $dark-gray; + color: $v-dark-gray; } .rating { text-align: right; @@ -25,11 +25,11 @@ font-size: 1rem; line-height: 1.5em; font-weight: 300; - color: $dark-gray; + color: $v-dark-gray; } .user-feedback { - border-top: 1px solid $subtle-gray; - border-bottom: 1px solid $subtle-gray; + border-top: 1px solid $v-subtle-gray; + border-bottom: 1px solid $v-subtle-gray; padding: 20px; width: 100%; margin-bottom: 20px; diff --git a/src/sass/views/import.scss b/src/sass/views/import.scss index fe6567282..d114bb575 100644 --- a/src/sass/views/import.scss +++ b/src/sass/views/import.scss @@ -7,7 +7,7 @@ cursor: pointer; padding: 10px 5px; border-bottom-width: 2px; - border-bottom-color: #172565; + border-bottom-color: $v-top-tabs-color; } .qr-scan-icon a { z-index: 10; diff --git a/src/sass/views/includes/accountSelector.scss b/src/sass/views/includes/accountSelector.scss index 220361051..4bf34eca5 100644 --- a/src/sass/views/includes/accountSelector.scss +++ b/src/sass/views/includes/accountSelector.scss @@ -29,7 +29,7 @@ account-selector { background-color: $royal; &.icon-add { - background-color: $light-gray; + background-color: $v-light-gray; } } diff --git a/src/sass/views/includes/itemSelector.scss b/src/sass/views/includes/itemSelector.scss index e059907a4..ad44217d5 100644 --- a/src/sass/views/includes/itemSelector.scss +++ b/src/sass/views/includes/itemSelector.scss @@ -17,7 +17,7 @@ item-selector { overflow: visible; > i { - color: #647ce8; + color: $v-accent-color; padding: 0 0 5px 0; margin-left: -5px; diff --git a/src/sass/views/includes/modals/modals.scss b/src/sass/views/includes/modals/modals.scss index 3510425dc..730624e7e 100644 --- a/src/sass/views/includes/modals/modals.scss +++ b/src/sass/views/includes/modals/modals.scss @@ -8,17 +8,17 @@ max-width: 350px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); - border-radius: $unmistakable-radius; + border-radius: $v-unmistakable-radius; text-align: center; &-header { &-success { - background: $success-green; + background: $v-success-color; } &-warning { - background: $warning-orange; + background: $v-warning-color; } padding: 1rem; - border-radius: $unmistakable-radius $unmistakable-radius 0 0; + border-radius: $v-unmistakable-radius $v-unmistakable-radius 0 0; min-height: 120px; &-img{ height: 6rem; @@ -45,14 +45,14 @@ } &-heading { margin:0 0 1rem; - color: $dark-gray; + color: $v-dark-gray; font-weight: bold; font-size: 1.3rem; margin-top: 1rem; line-height: 1.3; } &-message { - color: $mid-gray; + color: $v-mid-gray; font-weight: 200; } .button { @@ -60,12 +60,12 @@ } &-content-success { .button { - color: $success-green !important; + color: $v-success-color !important; } } &-content-warning { .button { - color: $warning-orange !important; + color: $v-warning-color !important; } } } diff --git a/src/sass/views/includes/txp-details.scss b/src/sass/views/includes/txp-details.scss index 7759b7f94..ab77ddcad 100644 --- a/src/sass/views/includes/txp-details.scss +++ b/src/sass/views/includes/txp-details.scss @@ -202,8 +202,8 @@ } > div { - border: 3px solid #13e5b6; - border-radius: 50%; + border: 3px solid $v-success-color; + border-radius: $v-icon-border-radius; display: flex; height: 26px; width: 26px; @@ -212,7 +212,7 @@ justify-content: center; font-weight: 600; vertical-align: middle; - color: #13e5b6; + color: $v-success-color; &.rejected { background: #E15061; @@ -263,6 +263,6 @@ .glidera-description { text-align: center; font-size: 12px; - color: $mid-gray; + color: $v-mid-gray; } } diff --git a/src/sass/views/includes/wallets.scss b/src/sass/views/includes/wallets.scss index 5c73d70c7..a1baaafaf 100644 --- a/src/sass/views/includes/wallets.scss +++ b/src/sass/views/includes/wallets.scss @@ -6,7 +6,7 @@ } .card { max-width: 350px; - box-shadow:$subtle-box-shadow; + box-shadow:$v-subtle-box-shadow; padding:0; border-radius: 6px; margin: 0 auto; diff --git a/src/sass/views/integrations/glidera.scss b/src/sass/views/integrations/glidera.scss index 0dd003c3a..d73c8fc62 100644 --- a/src/sass/views/integrations/glidera.scss +++ b/src/sass/views/integrations/glidera.scss @@ -133,20 +133,20 @@ } .glidera-lead { margin: 2rem 1rem; - color: $dark-gray; + color: $v-dark-gray; font-size: 20px; line-height: 1.4; text-align: center; } .glidera-text { margin: 2rem 1rem; - color: $mid-gray; + color: $v-mid-gray; font-size: 16px; line-height: 1.4; text-align: center; } .disclosure { - color: $light-gray; + color: $v-light-gray; font-size: 12px; text-align: left; margin: 1rem; diff --git a/src/sass/views/integrations/integrations.scss b/src/sass/views/integrations/integrations.scss index 338d7f6f1..22f9cbc0e 100644 --- a/src/sass/views/integrations/integrations.scss +++ b/src/sass/views/integrations/integrations.scss @@ -45,7 +45,7 @@ margin-right: 2em; } input { - border-bottom: 2px solid $light-gray; + border-bottom: 2px solid $v-light-gray; } } } diff --git a/src/sass/views/join.scss b/src/sass/views/join.scss index 15d368f9d..1b7ccbd0f 100644 --- a/src/sass/views/join.scss +++ b/src/sass/views/join.scss @@ -17,7 +17,7 @@ .icon { &.valid { padding-top: 3px; - color: #13E5B6; + color: $v-success-color; } &.invalid { padding-top: 3px; diff --git a/src/sass/views/onboarding/onboard-backup-request.scss b/src/sass/views/onboarding/onboard-backup-request.scss index b0abf340d..82a64df7a 100644 --- a/src/sass/views/onboarding/onboard-backup-request.scss +++ b/src/sass/views/onboarding/onboard-backup-request.scss @@ -13,7 +13,7 @@ } #arrow-down { font-size: 4.2rem; - color: $soft-blue; + color: $v-accent-color; } #backup-tldr { font-size: 16px; diff --git a/src/sass/views/onboarding/onboard-collect-email.scss b/src/sass/views/onboarding/onboard-collect-email.scss index 6e1241264..9e78dab20 100644 --- a/src/sass/views/onboarding/onboard-collect-email.scss +++ b/src/sass/views/onboarding/onboard-collect-email.scss @@ -41,20 +41,20 @@ $relish-success: 1.3s; } } .heading { - color: $dark-gray; + color: $v-dark-gray; font-size: 1.2rem; font-weight: bold; margin: 3rem 0 1rem; } .prompt { margin: 1rem 1.5rem; - color: $mid-gray; + color: $v-mid-gray; } #email-form { margin: 0 1.5rem 1rem; } #email-label { - border-radius: $visible-radius; + border-radius: $v-visible-radius; background: rgba(200, 200, 200, 0.20); height: 3rem; margin-top:0; @@ -102,12 +102,12 @@ $relish-success: 1.3s; } .checkbox input:checked:after, input:checked + .checkbox-icon:after { - border-color: rgb(19, 229, 182); + border-color: $v-onboarding-checkbox-on-border; top: 4px; left: 6px; } .item-content { - color: $mid-gray; + color: $v-mid-gray; text-align: left; margin-left: 75px; white-space: initial; @@ -122,11 +122,11 @@ $relish-success: 1.3s; } .checkbox input:before, .checkbox .checkbox-icon:before{ - border-color: $soft-blue; + border-color: $v-onboarding-checkbox-on-border; } .checkbox input:checked:before, .checkbox input:checked + .checkbox-icon:before { - border-color: rgb(19, 229, 182); + border-color: $v-onboarding-checkbox-on-border; } } diff --git a/src/sass/views/onboarding/onboard-disclaimer.scss b/src/sass/views/onboarding/onboard-disclaimer.scss index f5f84330a..c0441e304 100644 --- a/src/sass/views/onboarding/onboard-disclaimer.scss +++ b/src/sass/views/onboarding/onboard-disclaimer.scss @@ -1,15 +1,15 @@ #onboarding-disclaimer { .checkbox input, .checkbox-icon { position: relative; - width: 50px; - height: 50px; + width: 28px; + height: 28px; display: block; border: 0; background: transparent; cursor: pointer; -webkit-appearance: none; } - color: #fff; + color: $v-text-secondary-color; height: 100%; transition: transform 2.5s ease; &.shrink{ @@ -70,23 +70,17 @@ color: #fff; text-align: left; .checkbox input:before, - .checkbox .checkbox-icon:before, - .checkbox input:after, - .checkbox-icon:after, - .checkbox input:checked:after, - input:checked + .checkbox-icon:after{ - border:none; + .checkbox .checkbox-icon:before{ + border-color: $v-onboarding-checkbox-off-border; + background: transparent; } - .checkbox input:before, - .checkbox .checkbox-icon:before { - padding: 1.2rem; - position: relative; - background:url("../img/onboarding-checkbox-unchecked.svg") top center no-repeat; + .checkbox input:after, + .checkbox .checkbox-icon:after{ + border-color: $v-onboarding-checkbox-on-border; } .checkbox input:checked:before, .checkbox input:checked + .checkbox-icon:before { - border:none; - background:url("../img/onboarding-checkbox-checked.svg") top center no-repeat; + border-color: $v-onboarding-checkbox-on-border; } .item-content { width: 90%; @@ -136,7 +130,7 @@ } } #agree-to-terms { - background: #fff; + background: $v-tou-bg; padding:1rem; position: absolute; bottom: 0; @@ -148,7 +142,7 @@ @include center-block(); } .item{ - color:rgb(58,58,58); + background-color: transparent; padding-bottom: 2.5rem; float: left; border:none; @@ -157,7 +151,7 @@ } } p{ - color:rgb(58,58,58); + color: $v-tou-color; text-align: left; } @media (min-width:450px){ @@ -168,16 +162,16 @@ } .checkbox input:before, .checkbox .checkbox-icon:before{ - border-color:$soft-blue; - background:#fff; + border-color: $v-onboarding-checkbox-off-border; + background: transparent; } .checkbox input:after, .checkbox .checkbox-icon:after{ - border-color:#13e5b6; + border-color: $v-onboarding-checkbox-on-border; } .checkbox input:checked:before, .checkbox input:checked + .checkbox-icon:before { - border-color: rgb(19, 229, 182); + border-color: $v-onboarding-checkbox-on-border; } button { margin-top: 1.5rem; diff --git a/src/sass/views/onboarding/onboard-tour.scss b/src/sass/views/onboarding/onboard-tour.scss index f50d0fc16..bbf0aa508 100644 --- a/src/sass/views/onboarding/onboard-tour.scss +++ b/src/sass/views/onboarding/onboard-tour.scss @@ -20,9 +20,9 @@ } .swiper-pagination { &-bullet { - background: $soft-blue; + background: $v-onboarding-tour-swiper-pagination-bg; &-active { - background: $soft-blue; + background: $v-onboarding-tour-swiper-pagination-bg; } } } diff --git a/src/sass/views/onboarding/onboard-welcome.scss b/src/sass/views/onboarding/onboard-welcome.scss index e5b56f6aa..35d044a2e 100644 --- a/src/sass/views/onboarding/onboard-welcome.scss +++ b/src/sass/views/onboarding/onboard-welcome.scss @@ -1,6 +1,6 @@ #onboard-welcome { & > ion-content { - background: url(../img/onboarding-welcome-bg.png); + background: $v-onboarding-welcome-bg; background-position: top center; background-size: contain; background-repeat: no-repeat; diff --git a/src/sass/views/onboarding/onboarding.scss b/src/sass/views/onboarding/onboarding.scss index 9878e6043..c7129a68a 100644 --- a/src/sass/views/onboarding/onboarding.scss +++ b/src/sass/views/onboarding/onboarding.scss @@ -1,15 +1,15 @@ .onboarding { - background: #1e3186; - color: #fff; - background-image: linear-gradient(to bottom, #1e3186 0%, #111b49 100%); + background: $v-onboarding-gradient-top-color; + color: $v-onboarding-color; + background-image: linear-gradient(to bottom, $v-onboarding-gradient-top-color 0%, $v-onboarding-gradient-bottom-color 100%); height: 100%; text-align: center; .bar.bar-header { background: none; border: 0 none transparent; - color: #fff; + color: $v-onboarding-bar-header-color; button { - color: #fff; + color: $v-onboarding-bar-header-button-color; } } .onboarding-topic, @@ -50,6 +50,18 @@ font-size: 14px; } } + + svg#alert-icon g { + stroke: $v-onboarding-backup-alert-icon-color; + } + + #arrow-down { + color: $v-onboarding-backup-alert-icon-color !important; + } + + .back-button .icon:before { + color: $v-onboarding-button-back-color; + } } %cta-buttons { @@ -60,7 +72,7 @@ } .pane-onboarding{ - background: #0B1E4F; + background: $v-onboarding-pane-bg; } @import "terms-of-use"; @@ -101,23 +113,23 @@ .onboarding-illustration { &-secure { - @extend %onboarding-illustration; - background-image: url(../img/onboarding-tour-phone.svg); + @extend %onboarding-illustration; + background-image: $v-onboarding-tour-phone-bg; } &-currency { @extend %onboarding-illustration; - background-image: url(../img/onboarding-tour-currency-bg.svg); + background-image: $v-onboarding-tour-currency-bg; } &-control { @extend %onboarding-illustration; - background-image: url(../img/onboarding-tour-control.svg); + background-image: $v-onboarding-tour-control-bg; } &-notifications { @extend %onboarding-illustration; - background-image: url(../img/onboarding-push-notifications.svg); + background-image: $v-onboarding-push-notification-bg; } &-backup-warning { @extend %onboarding-illustration; - background-image: url(../img/backup-warning.svg); + background-image: $v-onboarding-backup-warning-bg; } } diff --git a/src/sass/views/onboarding/terms-of-use.scss b/src/sass/views/onboarding/terms-of-use.scss index ef2db12dd..c2650fb12 100644 --- a/src/sass/views/onboarding/terms-of-use.scss +++ b/src/sass/views/onboarding/terms-of-use.scss @@ -2,24 +2,26 @@ .terms { &__heading { font-weight: bold; - color: $dark-gray; + color: $v-dark-gray; } } } #terms-of-use { ion-header-bar { - background: #fff; - box-shadow: $subtle-box-shadow; + background: $bar-royal-bg; + box-shadow: $v-subtle-box-shadow; + color: $bar-royal-text; .primary-buttons{ .button{ + color: $bar-royal-text; font-size: 2rem; } } } ion-content{ padding-top: 1.5rem; - color: $dark-gray; + color: $v-dark-gray; margin-bottom: 210px; p { padding: 0 2.5%; @@ -29,63 +31,4 @@ } } } - #agree-to-terms { - background: #fff; - padding: 1rem; - position: absolute; - bottom: 0; - width: 100%; - .text-center { - text-align: center; - } - .checkbox input:before, - .checkbox .checkbox-icon:before { - border-radius: 50% !important; - background: none; - border-width: 2px; - padding: .9rem; - position: relative; - left: -7px; - top: -8px; - } - .checkbox input:checked:before, - .checkbox input:checked + .checkbox-icon:before { - border-color: $light-green; - } - .checkbox input:checked:after, - input:checked + .checkbox-icon:after { - border-color: $light-green; - top: 20%; - left: 11%; - } - .item { - color: $dark-gray; - padding-bottom: 1.2rem; - padding-bottom: 2.5rem; - float: left; - border: none; - width: 10%; - position: relative; - padding-right: 0; - padding-left: 50px; - .item-content { - white-space: normal; - } - } - p { - color: $dark-gray; - } - .checkbox input:before, - .checkbox .checkbox-icon:before { - border-color: $soft-blue; - } - .checkbox input:checked:before, - .checkbox input:checked + .checkbox-icon:before { - border-color: $light-green; - } - button { - margin-top: 1.5rem; - position: relative; - } - } } diff --git a/src/sass/views/starting.scss b/src/sass/views/starting.scss index 8ea228e79..a410a8575 100644 --- a/src/sass/views/starting.scss +++ b/src/sass/views/starting.scss @@ -1,11 +1,11 @@ #starting { - background: rgba(30, 49, 134, 1); - background: -moz-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%); - background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(30, 49, 134, 1)), color-stop(100%, rgba(17, 27, 73, 1))); - background: -webkit-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%); - background: -o-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%); - background: -ms-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%); - background: linear-gradient(to bottom, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%); + background: $v-primary-color; + background: -moz-linear-gradient(top, $v-primary-color 0%, $v-secondary-color 100%); + background: -webkit-gradient(left top, left bottom, color-stop(0%, $v-primary-color), color-stop(100%, $v-secondary-color)); + background: -webkit-linear-gradient(top, $v-primary-color 0%, $v-secondary-color 100%); + background: -o-linear-gradient(top, $v-primary-color 0%, $v-secondary-color 100%); + background: -ms-linear-gradient(top, $v-primary-color 0%, $v-secondary-color 100%); + background: linear-gradient(to bottom, $v-primary-color 0%, $v-secondary-color 100%); color: #fff; height: 100%; .scroll-content { diff --git a/src/sass/views/tab-home.scss b/src/sass/views/tab-home.scss index 6ebeddedd..3886ba7ee 100644 --- a/src/sass/views/tab-home.scss +++ b/src/sass/views/tab-home.scss @@ -4,7 +4,8 @@ background-color: #4A90E2; // default wallet color } .icon-buy-bitcoin { - background-image: url("../img/icon-bitcoin.svg"); + background-image: $v-bitcoin-icon; + background-color: $v-bitcoin-orange; } .icon-bitpay-card { background-image: url("../img/icon-card.svg"); @@ -78,14 +79,14 @@ & > .title { font-size: 20px; font-weight: bold; - color: $dark-gray; + color: $v-dark-gray; margin: 20px 10px; } & > .subtitle { font-size: 1rem; line-height: 1.5em; font-weight: 300; - color: $dark-gray; + color: $v-dark-gray; margin: 20px 3em 2.5em; } .big-icon-svg{ @@ -109,14 +110,14 @@ &__multisig-number { font-size: .8rem; font-weight: 300; - color: $light-gray; + color: $v-light-gray; } &__status-icon { font-size: 18px; margin-left: 5px; position: relative; top: 1px; - color: $light-gray; + color: $v-light-gray; } } } diff --git a/src/sass/views/tab-receive.scss b/src/sass/views/tab-receive.scss index 14be6295e..2228ed07a 100644 --- a/src/sass/views/tab-receive.scss +++ b/src/sass/views/tab-receive.scss @@ -49,7 +49,7 @@ position: relative; min-height: 40px; #next-address { - color:$light-gray; + color:$v-light-gray; } } .incomplete { @@ -127,7 +127,7 @@ @media(min-width:450px) { font-size:1rem; } - color:$light-gray; + color:$v-light-gray; } } .qr { diff --git a/src/sass/views/tab-scan.scss b/src/sass/views/tab-scan.scss index ab8df4961..37487f2e2 100644 --- a/src/sass/views/tab-scan.scss +++ b/src/sass/views/tab-scan.scss @@ -1,5 +1,3 @@ -$scannerBackgroundColor: #060d2d; - #tab-scan { color: #fff; text-align: center; @@ -7,12 +5,15 @@ $scannerBackgroundColor: #060d2d; .bar-header { opacity: .9; } + svg#QR-scanner-guides path.st1 { + stroke: $v-scanner-guide-color; + } .zero-state-cta { padding-bottom: 6vh; } &-has-problems, &-loading-camera { - background-color: $scannerBackgroundColor; + background-color: $v-scanner-background-color; } &-loading-camera { height: 100%; @@ -72,5 +73,5 @@ $scannerBackgroundColor: #060d2d; } #cordova-plugin-qrscanner-still, #cordova-plugin-qrscanner-video-preview { - background-color: $scannerBackgroundColor !important; + background-color: $v-scanner-background-color !important; } diff --git a/src/sass/views/tab-send.scss b/src/sass/views/tab-send.scss index 9b9c6d25f..dbda43f2e 100644 --- a/src/sass/views/tab-send.scss +++ b/src/sass/views/tab-send.scss @@ -64,20 +64,23 @@ margin-top: 10px; background: 0 none; } + img { + content: $v-tab-send-selected-icon; + } .item { border-style: none; } & > .title { font-size: 20px; font-weight: bold; - color: $dark-gray; + color: $v-dark-gray; margin: 20px 10px; } & > .subtitle { font-size: 1rem; line-height: 1.5em; font-weight: 300; - color: $dark-gray; + color: $v-dark-gray; margin: 20px 1em 2.5em; } .big-icon-svg{ diff --git a/src/sass/views/tab-settings.scss b/src/sass/views/tab-settings.scss index e11aee240..c77c2f679 100644 --- a/src/sass/views/tab-settings.scss +++ b/src/sass/views/tab-settings.scss @@ -4,7 +4,7 @@ background-image: url("../img/icon-bitpay.svg"); } .item { - color: $dark-gray; + color: $v-dark-gray; border-color: rgba(221, 221, 221, 0.3); } .has-comment { @@ -13,8 +13,8 @@ .comment { padding: 15px; background-color: #fff; - color: $mid-gray; font-size:0.9em; + color: $v-mid-gray; } &-explanation, &-button-group { padding: 0 1rem; @@ -22,11 +22,11 @@ } &-heading { font-size: 17px; - color: $dark-gray; + color: $v-dark-gray; margin: 1rem 0; } &-description { - color: $mid-gray; + color: $v-mid-gray; margin: 1rem 0; font-size: 0.9em; } @@ -42,7 +42,7 @@ white-space: nowrap; } .setting-value { - color: $light-gray; + color: $v-light-gray; font-size: 14px; } .settings-input-group { @@ -58,7 +58,7 @@ } .settings-list { .item { - color: $dark-gray; + color: $v-dark-gray; padding-top: 1.3rem; padding-bottom: 1.3rem; &.has-setting-value { @@ -66,16 +66,16 @@ padding-bottom: .65rem; } &.item-divider { - color: $mid-gray; + color: $v-mid-gray; padding-bottom: .5rem; font-size: .9rem; } .icon { - color: $light-gray; + color: $v-light-gray; } } .item-note { - color: $light-gray; + color: $v-light-gray; } .item-toggle .toggle, .item-button-right > .button { @@ -100,11 +100,11 @@ &.circle{ left:8px; .bg { - border-radius: 50%; + border-radius: $v-icon-border-radius; width: 25px; height: 25px; padding:.1rem; - box-shadow: 0px 1px 5px rgba($mid-gray, .1); + box-shadow: 0px 1px 5px rgba($v-mid-gray, .1); } } } @@ -138,7 +138,7 @@ #settings-fee { .estimates { font-size: 15px; - color: $dark-gray; + color: $v-dark-gray; margin-bottom: .5rem; } .fee-minutes, .fee-rate { diff --git a/src/sass/views/tabs.scss b/src/sass/views/tabs.scss index 4a1fd8507..3283e156e 100644 --- a/src/sass/views/tabs.scss +++ b/src/sass/views/tabs.scss @@ -4,34 +4,34 @@ background-position: center; margin: 6px 0 2px; &.ico-home { - background-image: url('../img/tab-icons/ico-home.svg'); + background-image: $v-tab-home-icon; } &.ico-home-selected { - background-image: url('../img/tab-icons/ico-home-selected.svg'); + background-image: $v-tab-home-selected-icon; } &.ico-receive { - background-image: url('../img/tab-icons/ico-receive.svg'); + background-image: $v-tab-receive-icon; } &.ico-receive-selected { - background-image: url('../img/tab-icons/ico-receive-selected.svg'); + background-image: $v-tab-receive-selected-icon; } &.ico-settings { - background-image: url('../img/tab-icons/ico-settings.svg'); + background-image: $v-tab-settings-icon; } &.ico-settings-selected { - background-image: url('../img/tab-icons/ico-settings-selected.svg'); + background-image: $v-tab-settings-selected-icon; } &.ico-scan { - background-image: url('../img/tab-icons/ico-scan.svg'); + background-image: $v-tab-scan-icon; } &.ico-scan-selected { - background-image: url('../img/tab-icons/ico-scan-selected.svg'); + background-image: $v-tab-scan-selected-icon; } &.ico-send { - background-image: url('../img/tab-icons/ico-send.svg'); + background-image: $v-tab-send-icon; } &.ico-send-selected { - background-image: url('../img/tab-icons/ico-send-selected.svg'); + background-image: $v-tab-send-selected-icon; } } } @@ -39,12 +39,12 @@ #tab-home, #tab-send { .card, .list { .icon { - color: $light-gray; + color: $v-light-gray; } & > .item-heading { font-weight: 700; .icon { - color: $mid-gray; + color: $v-mid-gray; } } } diff --git a/src/sass/views/views.scss b/src/sass/views/views.scss index eaace7e9c..a4648928f 100644 --- a/src/sass/views/views.scss +++ b/src/sass/views/views.scss @@ -9,6 +9,7 @@ @import "tab-scan"; @import "tab-send"; @import "tab-settings"; +@import "wallet-colors"; @import "walletBalance"; @import "walletDetails"; @import "advancedSettings"; diff --git a/src/sass/views/wallet-backup-phrase.scss b/src/sass/views/wallet-backup-phrase.scss index 61da30eca..de3879b0d 100644 --- a/src/sass/views/wallet-backup-phrase.scss +++ b/src/sass/views/wallet-backup-phrase.scss @@ -9,7 +9,7 @@ padding: 1rem; } .password-prompt { - background-color: $subtle-gray; + background-color: $v-subtle-gray; padding: 2rem; .explanation { padding: 0 1rem; @@ -29,14 +29,14 @@ .bar.bar-royal .title { font-size: 1rem; } - background: #fff; + background: $v-wallet-backup-bg; text-align: center; .backup-phrase { - background-color: $subtle-gray; + background: $v-wallet-backup-phrase-bg; margin: auto; - border: 2px dashed darken($subtle-gray, 10%); - border-radius: $subtle-radius; - color: #2b2b2b; + border: 2px dashed darken($v-subtle-gray, 10%); + border-radius: $v-subtle-radius; + color: $v-wallet-backup-phrase-color; text-align: center; max-width: 500px; min-height: 9rem; @@ -62,7 +62,7 @@ } &-step-1 { height: 70%; - color: $dark-gray; + color: $v-dark-gray; .initial-prompt { padding: 2.3rem; @media(max-height: 480px) { @@ -94,13 +94,13 @@ } } #select-phrase { - background: $subtle-gray; + background: $v-wallet-backup-select-phrase-color; .select-word { &.button[disabled] { background: transparent !important; box-shadow: none !important; color: transparent; - border: 1px solid rgb(211, 211, 211); + border: 1px solid $v-wallet-backup-select-word-disabled-color; } } &-content { @@ -121,8 +121,9 @@ } } .select-word { - background: #fff; - box-shadow: $subtle-box-shadow; + background: $v-wallet-backup-select-word-bg; + color: $v-wallet-backup-select-word-color; + box-shadow: $v-subtle-box-shadow; display: inline-block; margin: 3px 0; min-height: 35px; diff --git a/src/sass/views/wallet-colors.scss b/src/sass/views/wallet-colors.scss new file mode 100644 index 000000000..a55948589 --- /dev/null +++ b/src/sass/views/wallet-colors.scss @@ -0,0 +1,29 @@ +/* + * Generate wallet colors from color map + */ + +.wallet-color-count { + content: '' + length($v-wallet-color-map); +} + +/* background-color and color defaults should be the same */ +$default-wallet-color: map-get( map-get($v-wallet-color-map, $v-default-wallet-color-index) , color); + +.wallet-background-color-default { + background-color: $default-wallet-color; +} + +.wallet-color-default { + color: $default-wallet-color; +} + +/* generate classes for all colors */ +@each $id, $map in $v-wallet-color-map { + .wallet-color-#{$id} { + background: map-get($map, color); + } + .wallet-color-#{$id}:before { + content: map-get($map, name); + margin-left: 2.4rem; + } +} diff --git a/src/sass/views/walletBalance.scss b/src/sass/views/walletBalance.scss index 84ec41109..102cb9a16 100644 --- a/src/sass/views/walletBalance.scss +++ b/src/sass/views/walletBalance.scss @@ -5,7 +5,7 @@ font-size: 16px; &--total { - color: $mid-gray; + color: $v-mid-gray; } &--available { @@ -21,7 +21,7 @@ } &--alternative { - color: $light-gray; + color: $v-light-gray; font-size: 14px; } @@ -29,14 +29,14 @@ &__title { flex-grow: 1; - color: $dark-gray; + color: $v-dark-gray; overflow: hidden; } &__icon { float: left; margin-right: 1rem; - color: $light-gray; + color: $v-light-gray; font-size: 24px; } @@ -81,13 +81,13 @@ &__heading { font-size: 17px; - color: #445; + color: $v-dark-gray; margin: 1rem 1rem 1rem 1rem; } &__description { font-size: 12.5px; - color: #667; + color: $v-mid-gray; margin: 0.7rem; line-height: 16px; } diff --git a/src/sass/views/walletDetails.scss b/src/sass/views/walletDetails.scss index 7928b3bfb..4b99238d5 100644 --- a/src/sass/views/walletDetails.scss +++ b/src/sass/views/walletDetails.scss @@ -2,23 +2,23 @@ &__tx-amount { font-size: 16px; &--recent { - color: $mid-gray; + color: $v-mid-gray; font-weight: bold; } &--received { color: #09C286; } &--sent { - color: $dark-gray; + color: $v-dark-gray; } } &__tx-time { - color: $light-gray; + color: $v-light-gray; font-size: 12.5px; } &__tx-title { flex-grow: 1; - color: $dark-gray; + color: $v-dark-gray; overflow: hidden; } &__tx-icon { @@ -207,7 +207,7 @@ background-color: #f2f2f2; text-align: center; font-size: 13px; - color: $mid-gray; + color: $v-mid-gray; } } @@ -244,6 +244,6 @@ a.item { } .updatingHistory { - color: #445; + color: $v-dark-gray; font-size:0.9em; } diff --git a/src/sass/views/zero-state.scss b/src/sass/views/zero-state.scss index 53319dcd0..d16684ecc 100644 --- a/src/sass/views/zero-state.scss +++ b/src/sass/views/zero-state.scss @@ -9,9 +9,9 @@ display: inline-block; width: 50px; height: 50px; - border-radius: 50%; + border-radius: $v-icon-border-radius; padding: 13px; - box-shadow: $subtle-box-shadow; + box-shadow: $v-subtle-box-shadow; background-color: #fff; img { height: 100%; diff --git a/www/img/item-ico-import.svg b/www/img/item-ico-import.svg index 60d78deba..037e52be3 100644 --- a/www/img/item-ico-import.svg +++ b/www/img/item-ico-import.svg @@ -8,7 +8,7 @@ - + diff --git a/www/views/addressbook.html b/www/views/addressbook.html index e4e571411..2dc0f88ae 100644 --- a/www/views/addressbook.html +++ b/www/views/addressbook.html @@ -14,7 +14,7 @@
- +
No contacts yet
Get started by adding your first one.
diff --git a/www/views/amount.html b/www/views/amount.html index a8633099e..83321fe3e 100644 --- a/www/views/amount.html +++ b/www/views/amount.html @@ -19,7 +19,7 @@
- + diff --git a/www/views/buyAmazon.html b/www/views/buyAmazon.html index 07529c23c..03e2e4063 100644 --- a/www/views/buyAmazon.html +++ b/www/views/buyAmazon.html @@ -29,7 +29,7 @@
From
- + {{wallet ? wallet.name : '...'}}
diff --git a/www/views/buyCoinbase.html b/www/views/buyCoinbase.html index 3521c825a..d551017ff 100644 --- a/www/views/buyCoinbase.html +++ b/www/views/buyCoinbase.html @@ -38,7 +38,7 @@
Receive in
- + {{wallet ? wallet.name : '...'}}
diff --git a/www/views/confirm.html b/www/views/confirm.html index 02d652f65..b5b746d1b 100644 --- a/www/views/confirm.html +++ b/www/views/confirm.html @@ -65,7 +65,7 @@ From
- +
{{wallet.name}}
diff --git a/www/views/includes/confirm-tx.html b/www/views/includes/confirm-tx.html index b7901c4c2..1743e399c 100644 --- a/www/views/includes/confirm-tx.html +++ b/www/views/includes/confirm-tx.html @@ -31,7 +31,7 @@
-
diff --git a/www/views/includes/walletActivity.html b/www/views/includes/walletActivity.html index 0e9fceb76..3a2b78ab1 100644 --- a/www/views/includes/walletActivity.html +++ b/www/views/includes/walletActivity.html @@ -57,7 +57,7 @@

- + {{ notification.creatorName}}@ {{notification.wallet.name}} diff --git a/www/views/includes/walletItem.html b/www/views/includes/walletItem.html index a1fcd8177..e087e1410 100644 --- a/www/views/includes/walletItem.html +++ b/www/views/includes/walletItem.html @@ -1,6 +1,6 @@

- +
{{wallet.name || wallet.id}} diff --git a/www/views/includes/walletSelector.html b/www/views/includes/walletSelector.html index 5227c0b15..28b77830f 100644 --- a/www/views/includes/walletSelector.html +++ b/www/views/includes/walletSelector.html @@ -7,7 +7,7 @@ ng-click="selectWallet(w)" > - +
diff --git a/www/views/includes/wallets.html b/www/views/includes/wallets.html index 23f043afc..4fa2cc894 100644 --- a/www/views/includes/wallets.html +++ b/www/views/includes/wallets.html @@ -4,7 +4,7 @@
- + {{wallet.name || wallet.id}} diff --git a/www/views/modals/terms.html b/www/views/modals/terms.html index e1b216308..50e2483e7 100644 --- a/www/views/modals/terms.html +++ b/www/views/modals/terms.html @@ -1,5 +1,5 @@ - + {{'Terms of Use' | translate}} diff --git a/www/views/modals/wallets.html b/www/views/modals/wallets.html index 618835246..e11c30489 100644 --- a/www/views/modals/wallets.html +++ b/www/views/modals/wallets.html @@ -35,7 +35,7 @@
  • + ng-class="{'wallet-background-color-default': !w.color}" ng-style="{'background-color':w.color}">
    diff --git a/www/views/onboarding/backupRequest.html b/www/views/onboarding/backupRequest.html index a5da8f414..5fb1e7884 100644 --- a/www/views/onboarding/backupRequest.html +++ b/www/views/onboarding/backupRequest.html @@ -1,7 +1,7 @@
    - +
    No backup, no bitcoin.
    Since only you control your money, you’ll need to save your backup phrase in case this app is deleted.
    diff --git a/www/views/onboarding/disclaimer.html b/www/views/onboarding/disclaimer.html index 8e29232a4..70215675f 100644 --- a/www/views/onboarding/disclaimer.html +++ b/www/views/onboarding/disclaimer.html @@ -25,7 +25,7 @@
    - + {{'Terms of Use' | translate}}
    -

    • I have read, understood, and agree to the Terms of Use.

    - +
    diff --git a/www/views/onboarding/welcome.html b/www/views/onboarding/welcome.html index 98364bdac..669efdbfb 100644 --- a/www/views/onboarding/welcome.html +++ b/www/views/onboarding/welcome.html @@ -1,7 +1,7 @@
    - +

    Take control of your money,
    get started with bitcoin.

    diff --git a/www/views/paymentUri.html b/www/views/paymentUri.html index 204a58441..2e3d9ade8 100644 --- a/www/views/paymentUri.html +++ b/www/views/paymentUri.html @@ -32,7 +32,7 @@
  • + ng-class="{'wallet-background-color-default': !w.color}" ng-style="{'background-color':w.color}">
    {{w.name || w.id}}
    diff --git a/www/views/preferences.html b/www/views/preferences.html index b5d9d4a8c..e34c6c946 100644 --- a/www/views/preferences.html +++ b/www/views/preferences.html @@ -27,7 +27,9 @@     Color - + diff --git a/www/views/preferencesColor.html b/www/views/preferencesColor.html index 8de711160..2cb8ad1ea 100644 --- a/www/views/preferencesColor.html +++ b/www/views/preferencesColor.html @@ -6,10 +6,9 @@ - - - - {{c.name}} + + + diff --git a/www/views/sellCoinbase.html b/www/views/sellCoinbase.html index cc4befec3..dffd935fe 100644 --- a/www/views/sellCoinbase.html +++ b/www/views/sellCoinbase.html @@ -29,7 +29,7 @@
    From
    - + {{wallet ? wallet.name : '...'}}
    diff --git a/www/views/tab-export-file.html b/www/views/tab-export-file.html index 2d9d9a4dc..22f56c53e 100644 --- a/www/views/tab-export-file.html +++ b/www/views/tab-export-file.html @@ -25,7 +25,7 @@ Hide advanced options - + Do not include private key
    • @@ -53,7 +53,7 @@ ng-click="downloadWalletBackup()" class="button button-standard button-primary" ng-disabled="(!formData.password || formData.password != formData.repeatpassword)" - ng-style="{'background-color':wallet.color}" + ng-class="{'wallet-background-color-default': !wallet.color}" ng-style="{'background-color':wallet.color}" ng-show="!isSafari && !isCordova"> Download @@ -63,7 +63,7 @@ ng-click="viewWalletBackup()" class="button button-standard button-primary" ng-disabled="(!formData.password || formData.password != formData.repeatpassword)" - ng-style="{'background-color':wallet.color}" + ng-class="{'wallet-background-color-default': !wallet.color}" ng-style="{'background-color':wallet.color}" ng-show="isSafari && !isCordova"> View @@ -72,12 +72,12 @@
    diff --git a/www/views/tab-home.html b/www/views/tab-home.html index c750802b1..5e1b1a99c 100644 --- a/www/views/tab-home.html +++ b/www/views/tab-home.html @@ -80,7 +80,7 @@ class="item item-sub item-icon-left item-big-icon-left item-icon-right wallet" ng-click="openWallet(wallet)"> - + {{wallet.name || wallet.id}} diff --git a/www/views/tab-receive.html b/www/views/tab-receive.html index a31ebe2c6..5fee6dec6 100644 --- a/www/views/tab-receive.html +++ b/www/views/tab-receive.html @@ -81,7 +81,7 @@
    - + {{wallet.name || wallet.id}} diff --git a/www/views/tab-scan.html b/www/views/tab-scan.html index a50e3ff09..25598664c 100644 --- a/www/views/tab-scan.html +++ b/www/views/tab-scan.html @@ -26,7 +26,7 @@