Hi there,

If you're developing mobile apps, you've for sure already noticed and been annoyed by the look of the platform feedback messages... 

And no matter how much you try not to use them, they keep appearing to you in under the form of:


Taking action

Tired of the look and feel of the feedback messages, I've decided to take action and change them. 

So I took the following design option (a bit inspired in iOS):

  • make them slightly transparent
  • slightly round corners
  • obvious a message by appearing from the top and
    not being glued to the top of the app


How to do it?

Very simple... Some magic lines of CSS do the trick:

.feedback-message {
    margin: 15px 15px auto;
    border-radius: 4px;
}

div.feedback-message-error {
    background-color: #e53935d1;
}

div.feedback-message-info {
    background-color: #0083e8d1;
}

div.feedback-message-success {
    background-color: #8BC34Ad1;
}

div.feedback-message-warning {
    background-color: #FFA000d1;
}

.iphonex.portrait .feedback-message {
    padding-top: 12px!important; 
    margin-top: 45px;
}



And the end result is....

Much better in my opinion!


Finally

Remember that even if you don't use Feedback messages in your mobile app, at least when the app gets updated, the end user will see them...


Hope that this helps you to create better looking mobile apps!


Cheers,

RG

Very good!

Ruben Goncalves wrote:

Hi there,

If you're developing mobile apps, you've for sure already noticed and been annoyed by the look of the platform feedback messages... 

And no matter how much you try not to use them, they keep appearing to you in under the form of:


Taking action

Tired of the look and feel of the feedback messages, I've decided to take action and change them. 

So I took the following design option (a bit inspired in iOS):

  • make them slightly transparent
  • slightly round corners
  • obvious a message by appearing from the top and
    not being glued to the top of the app


How to do it?

Very simple... Some magic lines of CSS do the trick:

.feedback-message {
    margin: 15px 15px auto;
    border-radius: 4px;
}

div.feedback-message-error {
    background-color: #e53935d1;
}

div.feedback-message-info {
    background-color: #0083e8d1;
}

div.feedback-message-success {
    background-color: #8BC34Ad1;
}

div.feedback-message-warning {
    background-color: #FFA000d1;
}

.iphonex.portrait .feedback-message {
    padding-top: 12px!important; 
    margin-top: 45px;
}



And the end result is....

Much better in my opinion!


Finally

Remember that even if you don't use Feedback messages in your mobile app, at least when the app gets updated, the end user will see them...


Hope that this helps you to create better looking mobile apps!


Cheers,

RG


Is possible to change icon that appear near to the text in the feedback message?

Thank you!


Clara.

Nice :-)



Thank you very much!

Very nice ,, 

Good job Ruben.

Clara Linio wrote:

Ruben Goncalves wrote:

Hi there,

If you're developing mobile apps, you've for sure already noticed and been annoyed by the look of the platform feedback messages... 

And no matter how much you try not to use them, they keep appearing to you in under the form of:


Taking action

Tired of the look and feel of the feedback messages, I've decided to take action and change them. 

So I took the following design option (a bit inspired in iOS):

  • make them slightly transparent
  • slightly round corners
  • obvious a message by appearing from the top and
    not being glued to the top of the app


How to do it?

Very simple... Some magic lines of CSS do the trick:

.feedback-message {
    margin: 15px 15px auto;
    border-radius: 4px;
}

div.feedback-message-error {
    background-color: #e53935d1;
}

div.feedback-message-info {
    background-color: #0083e8d1;
}

div.feedback-message-success {
    background-color: #8BC34Ad1;
}

div.feedback-message-warning {
    background-color: #FFA000d1;
}

.iphonex.portrait .feedback-message {
    padding-top: 12px!important; 
    margin-top: 45px;
}



And the end result is....

Much better in my opinion!


Finally

Remember that even if you don't use Feedback messages in your mobile app, at least when the app gets updated, the end user will see them...


Hope that this helps you to create better looking mobile apps!


Cheers,

RG


Is possible to change icon that appear near to the text in the feedback message?

Thank you!


Clara.


Weldone!

Thanks Ruben,

Very good implementation and the main thing is we got css classes Outsystems uses for that message and now can be  modified/customized as per need. 

Thanks Rubens for sharing the knowledge. The after feedback has a look much cleaner.