devotebest / air-gap-wallet-v4

air-gap-wallet-v4
0 stars 0 forks source link

General UI/styling issue list #4

Closed pascuin closed 5 years ago

pascuin commented 5 years ago

App Overall

Add Coins

Add Coin

portfolio-item

card-actionable

empty-state

Accounts

Exchange

Transaction List

Add Tokens

Prepare Transaction

Transaction QR

Baker Detail

Introduction

Receive

Select Coin (Exchange)

Tabs

devotebest commented 5 years ago

font-size: 1.4rem is too big with ionic4. so that will looks bad. image

pascuin commented 5 years ago

In Ionic 3 the default font-size was set to 1.4rem, this seems to have changed in ionic 4 and the default font is bigger.

ion-app.ios {
  font-family: -apple-system, "Helvetica Neue", "Roboto", sans-serif;
  font-size: 1.4rem;
  background-color: #fff;
}

ion-app.md {
  font-family: "Roboto", "Helvetica Neue", sans-serif;
  font-size: 1.4rem;
  background-color: #fff;
}

ion-app.wp {
  font-family: "Segoe UI", "Noto Sans", sans-serif;
  font-size: 1.4rem;
  background-color: #fff;
}
devotebest commented 5 years ago

I updated for ion-title, floating action button, add coins, portfolio-item, card-actionable page.

pascuin commented 5 years ago

Can you please check the boxes for the tasks you were able to already complete so we have an overview what still needs to be done.

devotebest commented 5 years ago

"the border is too big for ion-button with outlines, see the current app" I confirmed border-width: 1px like old app.

pascuin commented 5 years ago

I've pushed 843e094 with the fix for the border-width

devotebest commented 5 years ago

cool

devotebest commented 5 years ago

image @pascuin could you help for this whileI am working for others?

pascuin commented 5 years ago

Have a few other things that I need to take care of, this seems to be a ionic 4 issue maybe the structures has changes from ionic 3 to ionic 4 for ion-slides

pascuin commented 5 years ago

As a general note, please try to avoid referencing directly..

https://github.com/devotebest/air-gap-wallet-v4/blob/843e09413bbb71c233f9ce026c3f42db2c7252b7/src/theme/variables.scss#L128-L131

..and take the custom variables approach whenever possible, as the example I've provided.

https://github.com/devotebest/air-gap-wallet-v4/blob/843e09413bbb71c233f9ce026c3f42db2c7252b7/src/theme/variables.scss#L137-L140

devotebest commented 5 years ago

Please free to update when you have chance.

pascuin commented 5 years ago

Something else I'd like to add.

In ionic 3 we've had

  primary: (
    base: #00e8cc,
    contrast: #311b58
  )

for ionic 4 you've created the following styling.

:root {
 /** primary **/
  --ion-color-primary: #00e8cc;
  --ion-color-primary-rgb: 0, 232, 204;
  --ion-color-primary-contrast: #000000;
  --ion-color-primary-contrast-rgb: 0, 0, 0;
  --ion-color-primary-shade: #00ccb4;
  --ion-color-primary-tint: #1aead1;
}

.ion-color-badge {
  --ion-color-base: #311b58;
  --ion-color-base-rgb: 49, 27, 88;
  --ion-color-contrast: #00e8cc;
  --ion-color-contrast-rgb: 255, 255, 255;
  --ion-color-shade: #5ca56c;
  --ion-color-tint: #78c288;
}

Now you've had to set the color-badge on ion-button to get the contrast color right, but this was not done consistently for every button with the result that most ion-button have the primary #00e8cc background color with #000000 as the text color instead primary #00e8cc and contrast #311b58.


:root {
 /** primary **/
  --ion-color-primary: #00e8cc;
  --ion-color-primary-rgb: 0, 232, 204;
  --ion-color-primary-contrast: #311b58;
  --ion-color-primary-contrast-rgb: 49, 27, 88;
  --ion-color-primary-shade: #00ccb4;
  --ion-color-primary-tint: #1aead1;
}

Please make sure that there is consistency in the styling.

devotebest commented 5 years ago

because of this https://github.com/devotebest/air-gap-wallet-v4/blob/master/src/global.scss#L2 @import '~@ionic/angular/css/core.css';

:root {
 /** primary **/
  --ion-color-primary: #00e8cc;
  --ion-color-primary-rgb: 0, 232, 204;
  --ion-color-primary-contrast: #311b58;
  --ion-color-primary-contrast-rgb: 49, 27, 88;
  --ion-color-primary-shade: #00ccb4;
  --ion-color-primary-tint: #1aead1;
}

if change primary color inside :root , that doesn't apply.

https://ionicframework.com/docs/theming/advanced image

pascuin commented 5 years ago

For the pre-defined color it does, you can change the values there. See the screenshot.

image

this is done with

:root {
 /** primary **/
  --ion-color-primary: #00e8cc;
  --ion-color-primary-rgb: 0, 232, 204;
  --ion-color-primary-contrast: #311b58;
  --ion-color-primary-contrast-rgb: 49, 27, 88;
  --ion-color-primary-shade: #00ccb4;
  --ion-color-primary-tint: #1aead1;
}
devotebest commented 5 years ago

Yes, I thought like that, but I can't see changes with some colors sometimes. I can't remember where I got error, but I will report.

devotebest commented 5 years ago

@pascuin I can't test some screens in detail due to balance is not enough. hard-coded value doesn't work. e.g. mostly exchange.

Please provided enough balance for testing.

AndreasGassmann commented 5 years ago

We will give you a wallet with more funds.

But apart from the "exchange" and "exchange confirmation" page, you should be able to test all pages even with a small balance.

AndreasGassmann commented 5 years ago
Screenshot 2019-04-26 at 17 34 47
devotebest commented 5 years ago

@pascuin Please support for ion-skeleton if you have time.

devotebest commented 5 years ago

we can implement with original way, that issue happened due to css issue. no need to update code for skeleton.

pascuin commented 5 years ago

@devotebest please use the ion-skeleton-text described in the ionic 4 documentation and remove the skeleton loading implementation we've had for ionic 3 as the custom implementation is not needed anymore.

devotebest commented 5 years ago

:) okay, no problem. I will take a look.

devotebest commented 5 years ago

@pascuin I updated with ion-skeleton-text