Closed pascuin closed 5 years ago
font-size: 1.4rem is too big with ionic4. so that will looks bad.
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;
}
I updated for ion-title, floating action button, add coins, portfolio-item, card-actionable page.
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.
"the border is too big for ion-button with outlines, see the current app" I confirmed border-width: 1px like old app.
I've pushed 843e094 with the fix for the border-width
cool
@pascuin could you help for this whileI am working for others?
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
As a general note, please try to avoid referencing directly..
..and take the custom variables approach whenever possible, as the example I've provided.
Please free to update when you have chance.
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.
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.
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;
}
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.
@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.
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.
@pascuin Please support for ion-skeleton if you have time.
we can implement with original way, that issue happened due to css issue. no need to update code for skeleton.
@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.
:) okay, no problem. I will take a look.
@pascuin I updated with ion-skeleton-text
App Overall
ion-title
color should be secondary #311b58, seewhiteSecondaryContrast
Accounts
or "Receive"/"Send" onTransaction List
are not sticky to the bottom on scrollingion-button
with outlines, see the current app1.4rem
forp
ion-button
have no horizontal padding, see the current appion-skeleton
approach new in ionic 4 for the loading states in general.ion-color-badge
as it is not needed$colors(...)
with thevar(--ion-color-...)
in the css filesAdd Coins
Add Coin
portfolio-item
h3
&span
h3
&span
card-actionable
empty-state
1.4rem
forp
Accounts
Exchange
Transaction List
ion-row
has no right paddingion-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 anion-icon
h3
andp
Add Tokens
1.4rem
Prepare Transaction
ion-label
inion-input
should have the blackLight color, the same as the placeholder color. See "Send To", "Amount", "$0.0", "$0.0344 (fee amount)ion-col
ion-row
horizontal padding for consistencyion-icon
color to blackfont-size: 12px;
Transaction QR
Baker Detail
Introduction
Receive
width: 64px
&height: 64px
Select Coin (Exchange)
ion-list
no-linesTabs