Cleanup shield UI polish

[jonathanKingston]

We need to make sure the current UI matches the following:

Current UI:

[jonathanKingston]

I'm a little lost why we still use tables, they don't appear to do anything but hinder layout and don't really add much semantic meaning either.

Notable changes:

• Delete icon doesn't always hover as the name part isn't full width
• Resizing of icons on edit screen
• Reducing container icon size on current tab panel
• Change color of icons selection
• Change selection shape for icons selection
• Remove icon and color selection indent
• Change color of heading on edit screen
• Sort tabs link isn't indented (has been fixed before, will check)
• Change alignment of current assignments

[fangshih]

After the review process, now we have the final updated screens for shield UI

Screens
Default Container

Remove Default

Confimation dialogue

And here are the specs
https://www.dropbox.com/sh/9pwi7xyknwko7at/AACx1jTgAqy3XtPPrBaeS5SNa?dl=0

Image assets
https://www.dropbox.com/sh/rifke8mef52kvrw/AADKsXH_TUE6jjpeFDL3v1Aba?dl=0

Thanks! Let me know if you need any other assets.

[jonathanKingston]

@fangshih thanks!

I'm not sure what the second panel is for labelled "Edit Current Tab Panel". The edit panel is actually "Remove Default Panel" and the assigning is actually in the first panel.

[fangshih]

@jonathanKingston Yes, you are right. I've removed that panel. It was from the older version spec. Thanks for reminding. : )

[groovecoder]

Just ran the latest code and I can't see the button to create a new container anymore? 😢

[jonathanKingston]

You have to click back. This was half agreed on with the changes to the edit screen. @groovecoder were you expecting save and cancel here as before? In a way that makes edit more confusing.

…

On Tue, 13 Jun 2017, 19:46 luke crouch, ***@***.***> wrote: Just ran the latest code and I can't see the button to create a new container anymore? 😢 [image: image] <https://user-images.githubusercontent.com/71928/27098917-ba5a79b8-503e-11e7-859a-5519dcc3d96e.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#561 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAUsLE5pp_HbKd8cquZPu8edOwpS1VBtks5sDtkSgaJpZM4NrDCF> .

[groovecoder]

Oh yes, I was expecting Save/Cancel buttons. But if the changes take effect on the < click, that seems fine if we somehow indicate that? @ChenMorpheus - what do you think?

[ChenMorpheus]

@groovecoder That was discussed before. There are several reasons we decided to remove Save/Cancel:

1. All changes take effect on the < and won't cause irreversible effect, especially name/color/icon.
2. Deleting assigned sites might confuse users if we keep Save/Cancel buttons.
3. Simplify the panel since it has provided too much information

Besides, I noticed the layout is different from the current measurement, could you update the layout to make it more intense?

Measurements: https://www.dropbox.com/sh/cr4om5vcz7iachs/AACO07uR7FEWVjM7kdADV1nga?dl=0

[jonathanKingston]

@ChenMorpheus yeah agreed that tightening of the layout hasn't been completed. It might have to be post release because of timescales.

I can add a "Back and Save" title on the arrow. I suspect we will get complaints, especially on the new version however we can always refactor.

[groovecoder]

Which PR(s) finish this issue?

[jonathanKingston]

This was done in #602 sorry I missed your comment. However I'm going to file a follow up as @fangshih pointed out that we needed some tweaks to match this design.