General UI/styling issue list

pascuin commented 5 years ago

App Overall

[x] ion-title color should be secondary #311b58, see whiteSecondaryContrast
[x] Floating Action Buttons like "Add Coin" or "+" on Accounts or "Receive"/"Send" on Transaction List are not sticky to the bottom on scrolling
[x] the border is too big for ion-button with outlines, see the current app
[x] font-size to 1.4rem for p
[x] ion-button have no horizontal padding, see the current app
[x] skeleton loading doesn't seem to work, see for cards or content in the portfolio item or content on the page baker-detail - see the ionic 3 app for reference. Please use the ion-skeleton approach new in ionic 4 for the loading states in general
[x] colors make sure to set the contrast for the primary color with the secondary color and for the secondary color the contrast color to the primary one, as mentioned in the comment below and remove the .ion-color-badge as it is not needed
[x] colors move from the Sass variables to the CSS ones, replace all $colors(...) with the var(--ion-color-...) in the css files

Add Coins

[x] space between currency name & symbol is missing
[x] margin between currency symbol and entry should be removed

Add Coin

[x] progress of slider is not visible
[x] part of the next slide is visible on the right

portfolio-item

[x] text color blackLight is not applied for h3 & span
[x] font weight is not applied for h3 & span

card-actionable

[x] text color should be white

empty-state

[x] font-size to 1.4rem for p

Accounts

[x] correct shadow on card is not applied

Exchange

[x] dropdown arrow for the first entry not visible
[x] blackLight color not applied
[x] bottom line between the buy container and "poweredy by changelly" is missing
[x] the error message if you enter for ex. 0.001 for ETH has no red color

Transaction List

[x] "Transaction" label in primary color
[x] loader in "Transaction" label ion-row has no right padding
[x] remove border around ion-icon, seems like this is a custom icon use the ionic ones for now -> still looks like the icon has a border and is not an ion-icon
[x] text color blackLight is not applied for h3 and p
[x] correct shadow on card is not applied
[x] the color is not correct on the delegation card, it should be a gradient from primary to secondaryLight

Add Tokens

[x] "Tokens" font-size to 1.4rem
[x] "Tokens" color to primary

Prepare Transaction

[x] ion-label in ion-input should have the blackLight color, the same as the placeholder color. See "Send To", "Amount", "$0.0", "$0.0344 (fee amount)
[x] remove all paddings on ion-col
[x] fee slider ion-row horizontal padding for consistency
[x] fee slider ion-icon color to black
[x] fee slider color to blackLight
[x] error message color to red (danger)
[x] no margin on error message
[x] horizontal padding for the fee slider
[x] fee advanced toggel aligned to the right
[x] fee advanced input highlighted with primary color for the line
[x] to address input with a font-size: 12px;
[x] remove the margin for the $0.0 in amount

Transaction QR

[x] correct shadow on card is not applied
[x] "Done" button missing

Baker Detail

[x] correct shadow on card is not applied
[x] skeleton loading is not working, see the ionic 3 app for refrence

Introduction

[x] move close icon to the right side

Receive

[x] ion-avatar img to width: 64px & height: 64px

Select Coin (Exchange)

[x] ion-list no-lines

Tabs

[x] the active color should be secondary and the font weight should be bold

devotebest commented 5 years ago

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

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

@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

pascuin commented 5 years ago

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

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

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

devotebest / air-gap-wallet-v4

General UI/styling issue list #4