mirror of https://github.com/BTCPrivate/copay.git
Fix overrides. Defaults color to primary class. Adds global css class
This commit is contained in:
Gustavo Maximiliano Cortez
parent
4a3e47cb83
commit
dda1d51edc
|
|
@ -11,9 +11,8 @@
|
|||
// The "primary" color is the only required color in the map.
|
||||
|
||||
$colors: (
|
||||
primary: #1e3186,
|
||||
primary: #647ce8,
|
||||
secondary: #111b49,
|
||||
accent: #647ce8,
|
||||
warning: #EBA133,
|
||||
danger: #bb331a,
|
||||
success: #7BC94D,
|
||||
|
|
@ -21,4 +20,3 @@ $colors: (
|
|||
dark: #222,
|
||||
);
|
||||
|
||||
$text-color: #1e3186;
|
||||
|
|
@ -11,9 +11,8 @@
|
|||
// The "primary" color is the only required color in the map.
|
||||
|
||||
$colors: (
|
||||
primary: #192c3a,
|
||||
primary: #1abb9b,
|
||||
secondary: #31465b,
|
||||
accent: #1abb9b,
|
||||
warning: #EBA133,
|
||||
danger: #bb331a,
|
||||
success: #7BC94D,
|
||||
|
|
@ -21,5 +20,3 @@ $colors: (
|
|||
dark: #222,
|
||||
);
|
||||
|
||||
$text-color: #192c3a;
|
||||
|
||||
|
|
@ -51,9 +51,14 @@ export class CopayApp {
|
|||
// Check Profile
|
||||
this.profile.loadAndBindProfile().then((profile: any) => {
|
||||
this.openLockModal();
|
||||
if (profile) this.rootPage = TabsPage;
|
||||
if (profile) {
|
||||
this.logger.info('Profile exists.');
|
||||
this.rootPage = TabsPage;
|
||||
}
|
||||
else {
|
||||
this.profile.createProfile();
|
||||
this.logger.info('No profile exists.');
|
||||
// TODO: testing onboarding
|
||||
//this.profile.createProfile();
|
||||
this.rootPage = OnboardingPage;
|
||||
}
|
||||
}).catch((err: any) => {
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 220 KiB |
|
|
@ -5,7 +5,7 @@
|
|||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<ion-segment [(ngModel)]="selectedTab" color="accent" (ionChange)="selectTab(selectedTab)">
|
||||
<ion-segment [(ngModel)]="selectedTab" color="primary" (ionChange)="selectTab(selectedTab)">
|
||||
<ion-segment-button value="words" translate>
|
||||
Words
|
||||
</ion-segment-button>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
File
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
|
||||
<form [formGroup]="importForm" (ngSubmit)="import()">
|
||||
<ion-item *ngIf="selectedTab == 'words'">
|
||||
<ion-label stacked>Type the recovery phrase (usually 12 words)</ion-label>
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
|
||||
<ion-item>
|
||||
<ion-label stacked>Testnet</ion-label>
|
||||
<ion-toggle [(ngModel)]="formData.testnet" color="accent" formControlName="testnet" (ionChange)="setDerivationPath()"></ion-toggle>
|
||||
<ion-toggle [(ngModel)]="formData.testnet" color="primary" formControlName="testnet" (ionChange)="setDerivationPath()"></ion-toggle>
|
||||
</ion-item>
|
||||
</div>
|
||||
|
||||
|
|
@ -64,4 +64,4 @@
|
|||
</div>
|
||||
<button ion-button block type="submit" [disabled]="!importForm.valid">Import wallet</button>
|
||||
</form>
|
||||
</ion-content>
|
||||
</ion-content>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,11 @@
|
|||
page-home {
|
||||
img {
|
||||
|
||||
&.icon-wallet {
|
||||
width: 35px !important;
|
||||
background-color: color($colors, accent);
|
||||
background-color: color($colors, primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Android fix */
|
||||
.item-md [item-start] {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
font-size: 1.7rem !important;
|
||||
color: silver;
|
||||
|
|
@ -22,4 +16,4 @@ page-home {
|
|||
.error {
|
||||
color: color($colors, danger) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<ion-content>
|
||||
<ion-content background="onboarding">
|
||||
|
||||
<div class="logo-tagline">
|
||||
<img src='assets/img/app/logo.svg' id="logo" />
|
||||
<p class="onboarding-description" translate>Take control of your money,<br />get started with bitcoin.</p>
|
||||
</div>
|
||||
<button ion-button block clear (click)="skipOnboarding()">Skip Onboarding</button>
|
||||
<div class="buttons">
|
||||
<div class="bottom-absolute">
|
||||
<button ion-button block (click)="getStarted()" translate>Get started</button>
|
||||
<button ion-button block outline (click)="restoreFromBackup()" translate>Restore from backup</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
page-onboarding {
|
||||
ion-content {
|
||||
background: url(../assets/img/onboarding-welcome-bg.png);
|
||||
}
|
||||
.logo-tagline {
|
||||
text-align: center;
|
||||
img {
|
||||
|
|
@ -10,11 +13,4 @@ page-onboarding {
|
|||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
padding: 15px 15px 4vw 15px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<ion-header>
|
||||
<ion-header no-border>
|
||||
|
||||
<ion-navbar>
|
||||
<ion-buttons end>
|
||||
|
|
@ -13,26 +13,22 @@
|
|||
<ion-content>
|
||||
<ion-slides pager="true" (ionSlideDidChange)="slideChanged()">
|
||||
<ion-slide>
|
||||
<div>
|
||||
<p translate>Bitcoin is secure,<br/>digital money.</p>
|
||||
<p translate>You can spend bitcoin at millions of websites and stores worldwide.</p>
|
||||
</div>
|
||||
<h1 translate>Bitcoin is secure,<br/>digital money.</h1>
|
||||
<p translate>You can spend bitcoin at millions of websites and stores worldwide.</p>
|
||||
<img src='assets/img/app/onboarding/tour-phone.svg' />
|
||||
<div class="buttons">
|
||||
<div translate>Just scan the code to pay.</div>
|
||||
<div class="bottom-absolute">
|
||||
<div class="text" translate>Just scan the code to pay.</div>
|
||||
<button ion-button block (click)="slideNext()" translate>Got it</button>
|
||||
</div>
|
||||
</ion-slide>
|
||||
|
||||
<ion-slide>
|
||||
<div>
|
||||
<p translate>Bitcoin is a currency.</p>
|
||||
<p translate>You can trade it for other currencies like US Dollars, Euros, or Pounds.</p>
|
||||
</div>
|
||||
<h1 translate>Bitcoin is a currency.</h1>
|
||||
<p translate>You can trade it for other currencies like US Dollars, Euros, or Pounds.</p>
|
||||
<img src='assets/img/app/onboarding/tour-currency.svg' />
|
||||
<p>1 BTC = 6000 USD</p>
|
||||
<div class="buttons">
|
||||
<div translate>The exchange rate changes with the market.</div>
|
||||
<div class="bottom-absolute">
|
||||
<div class="text" translate>The exchange rate changes with the market.</div>
|
||||
<button ion-button block (click)="slideNext()" translate>
|
||||
Makes sense
|
||||
</button>
|
||||
|
|
@ -40,13 +36,11 @@
|
|||
</ion-slide>
|
||||
|
||||
<ion-slide>
|
||||
<div>
|
||||
<p translate>You control your bitcoin.</p>
|
||||
<p translate>This app stores your bitcoin with cutting-edge security.</p>
|
||||
</div>
|
||||
<h1 translate>You control your bitcoin.</h1>
|
||||
<p translate>This app stores your bitcoin with cutting-edge security.</p>
|
||||
<img src='assets/img/app/onboarding/tour-control.svg' />
|
||||
<div class="buttons">
|
||||
<div translate>Not even BitPay can access it.</div>
|
||||
<div class="bottom-absolute">
|
||||
<div class="text" translate>Not even BitPay can access it.</div>
|
||||
<button ion-button block (click)="createDefaultWallet()" translate>
|
||||
Create bitcoin wallet
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,15 @@
|
|||
page-tour {
|
||||
.buttons {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
padding: 15px 15px 9vh 15px;
|
||||
.toolbar-background{
|
||||
background-color: transparent;
|
||||
}
|
||||
.bottom-absolute {
|
||||
padding: 15px 15px 5vh 15px;
|
||||
}
|
||||
.slide-zoom {
|
||||
height: inherit;
|
||||
}
|
||||
/* pagination bullets */
|
||||
.swiper-pagination-bullet-active {
|
||||
background: color($colors, primary);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
page-receive {
|
||||
$v-text-accent-color: #1abb9b;
|
||||
.incomplete-wallet-container {
|
||||
.title {
|
||||
padding-top: 10%;
|
||||
|
|
@ -30,7 +29,7 @@ page-receive {
|
|||
background: transparent;
|
||||
border: none;
|
||||
font-size: 12px;
|
||||
color: $v-text-accent-color;
|
||||
color: color($colors, primary);
|
||||
ion-icon {
|
||||
vertical-align: middle;
|
||||
padding-left: 5px;
|
||||
|
|
@ -41,13 +40,13 @@ page-receive {
|
|||
background: transparent;
|
||||
border: none;
|
||||
font-size: 12px;
|
||||
color: $v-text-accent-color;
|
||||
color: color($colors, primary);
|
||||
}
|
||||
}
|
||||
.wallets-container {
|
||||
position: absolute;
|
||||
bottom: 0rem;
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
border-top: solid 1px rgb(242, 242, 242);
|
||||
min-height: 78px;
|
||||
display: flex;
|
||||
|
|
@ -62,7 +61,7 @@ page-receive {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin wallets-list {
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
|
|
@ -71,12 +70,12 @@ page-receive {
|
|||
border-radius: 3px;
|
||||
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
|
||||
.wallets::before {
|
||||
@include wallets-list;
|
||||
background: #647ce8 url('../assets/img/icon-wallet.svg') no-repeat 0px 0px;
|
||||
}
|
||||
|
||||
|
||||
.action-sheet-container {
|
||||
.action-sheet-button {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,4 @@
|
|||
page-amount {
|
||||
.item-md ion-icon[item-left] + .item-inner {
|
||||
margin: 0px;
|
||||
}
|
||||
.keypad {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,4 @@
|
|||
page-send {
|
||||
.item-md ion-icon[item-left] + .item-inner {
|
||||
margin: 0px;
|
||||
}
|
||||
.scanner-icon {
|
||||
z-index: 99;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
|
||||
// Position
|
||||
// --------------------------------------------------
|
||||
|
||||
.bottom-absolute {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
padding: 15px 15px 1vw 15px;
|
||||
.button {
|
||||
margin: 1.2rem 0.2rem;
|
||||
}
|
||||
.text {
|
||||
font-size: 70%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
/*
|
||||
* Copay Distribution SCSS overrides
|
||||
*/
|
||||
|
||||
// Named Color Variables
|
||||
// --------------------------------------------------
|
||||
// Named colors makes it easy to reuse colors on various components.
|
||||
// It's highly recommended to change the default colors
|
||||
// to match your app's branding. Ionic uses a Sass map of
|
||||
// colors so you can add, rename and remove colors as needed.
|
||||
// The "primary" color is the only required color in the map.
|
||||
|
||||
$colors: (
|
||||
primary: #1abb9b,
|
||||
secondary: #31465b,
|
||||
warning: #EBA133,
|
||||
danger: #bb331a,
|
||||
success: #7BC94D,
|
||||
light: #f4f4f4,
|
||||
dark: #222,
|
||||
);
|
||||
|
||||
|
|
@ -20,61 +20,10 @@ $app-direction: ltr;
|
|||
// http://ionicframework.com/docs/theming/overriding-ionic-variables/
|
||||
|
||||
|
||||
|
||||
// Override - Homogenized ionic component styles
|
||||
@import 'overrides';
|
||||
|
||||
/* filled button */
|
||||
$button-ios-background-color: color($colors, accent);
|
||||
$button-md-background-color: color($colors, accent);
|
||||
$button-wp-background-color: color($colors, accent);
|
||||
|
||||
/* outline button */
|
||||
$button-ios-outline-text-color: color($colors, accent) !important;
|
||||
$button-md-outline-text-color: color($colors, accent) !important;
|
||||
$button-wp-outline-text-color: color($colors, accent) !important;
|
||||
|
||||
/* pagination bullets */
|
||||
.swiper-pagination-bullet-active {
|
||||
background: color($colors, accent) !important;
|
||||
}
|
||||
|
||||
/* checkbox */
|
||||
$checkbox-ios-icon-border-color-off: color($colors, accent);
|
||||
$checkbox-md-icon-border-color-off: color($colors, accent);
|
||||
$checkbox-wp-icon-border-color-off: color($colors, accent);
|
||||
|
||||
$checkbox-ios-icon-border-color-on: color($colors, accent);
|
||||
$checkbox-md-icon-border-color-on: color($colors, accent);
|
||||
$checkbox-wp-icon-border-color-on: color($colors, accent);
|
||||
|
||||
$checkbox-ios-background-color-on: color($colors, accent);
|
||||
$checkbox-md-icon-background-color-on: color($colors, accent);
|
||||
$checkbox-wp-icon-background-color-on: color($colors, accent);
|
||||
|
||||
$checkbox-md-icon-border-radius: 50%;
|
||||
$checkbox-wp-icon-border-radius: 50%;
|
||||
|
||||
$checkbox-md-icon-size: 21px;
|
||||
$checkbox-wp-icon-size: 21px;
|
||||
|
||||
$checkbox-md-item-start-margin-end: 20px;
|
||||
|
||||
.checkbox-md, .checkbox-wp {
|
||||
.checkbox-checked .checkbox-inner {
|
||||
margin-top: 2px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
/* alert buttons */
|
||||
$alert-ios-button-text-color: color($colors, accent);
|
||||
$alert-md-button-text-color: color($colors, accent);
|
||||
|
||||
/* tabs */
|
||||
$tabs-ios-tab-color-active: color($colors, accent);
|
||||
$tabs-md-tab-color-active: color($colors, accent);
|
||||
$tabs-wp-tab-color-active: color($colors, accent);
|
||||
|
||||
|
||||
// App iOS Variables
|
||||
// --------------------------------------------------
|
||||
|
|
@ -104,6 +53,7 @@ $item-wp-detail-push-show: true;
|
|||
// default are overridden.
|
||||
|
||||
@import "ionic.theme.default";
|
||||
@import "global";
|
||||
|
||||
|
||||
// Ionicons
|
||||
|
|
|
|||
Loading…
Reference in New Issue