Wizard dark theme

Wizard dark theme needs work. Currently doesn't matter much, as at first install it's always in light theme, but if we add a theme picker or pull in the user preferences to set the default, which I would like to do, it will matter and be a blocker.

added console label

assigned to @idk

Ack, I went back and ran through it just now when I saw your issue, just to make sure we're on the same page about where I start, the things that stand out to me that could use some work are that the colors used in the images need to be adjusted and the notification area overlaps some of the informational text on smaller screen resolutions, so that's where I'm going to tweak things first.

yeah sorry for the brevity, I actually typed a whole lot more but the submit didn't work and the browser wasn't helpful enough to save it, and I lost the energy to do it again.

• the logo is very dim
• the text contrast throughout is too low, esp. in the header, the lefthand text, and infodiv
• except for the buttons where the text is blazing white
• actually, it's an odd mix of white text and gray text throughout, doesn't seem to be much consistency
• layout problems see attachment

Also please comment on the proposal to add a theme picker page to the wizard, and if you like it, where in the page flow it should go. I just checked in some changes to make adding pages easier.

I'm for it. Since once we get to the middle of the wizard steps we are doing all bandwidth things, it either has to happen right at the beginning or right at the end. It wouldn't hurt to add a single extra step to the slideshow to select the theme. Or, to save a click, it would be possible to add a selector on either slide 6 or slide 7. Slide 6, "Browser and Application Setup" is the apt one, in my opinion. I'd also add a "Set Theme" button to the step in order to change the theme without advancing the wizard.

one problem with all our form handling in the console is that it doesn't happen until the page has partially loaded. that's why, e.g. on /configui, the theme change doesn't happen until the next page. will need to figure out some workaround for the flow to actually work in the wizard, especially for the flow you propose.

Added js to /configui in 282460cb that resolves these problems. Also stubbed out js for getting the system dark theme preference. While this js will need some tweaks for use in the wizard, it's close.

I saw that, thanks, it's working well for me with the theme switcher on /configui so far.

Dark theme in i2p needs fixing regardless of where it is used. It would make sense to me that should happen first in case it informs your decisions on what happens with the Wizard. More on that below.

When should the Dark them be changed?

I would expect that it would be most straight forward to implement, document and use if it happened at the very beginning. I think of it as being set by a meta-Wizard that configures the Wizard before it configures i2p. The meta-Wizard section would setup the Wizard for more than just the theme. Maybe there are other accessibility issues that can be addressed or operating system specific settings.

Should there be a theme picker? Yes definitely. It might be more useful to think of it as a profile picker. The user might require different settings based on where they are (laptop and android users). There might be a profile that does not work well with one program but it might be superior to other profiles with another set of programs. It may well be that the consensus is that the Wizard would benefit from its own profile apart from the rest of i2p. Or i2p may just inherit some or all of the settings from the Wizard profile. Regardless, setting it up as profiles instead of just a theme picker would seem more robust and useful in the long term.

Fixing Dark theme. I was quite dismayed to see this new Dark theme when it came out. Until now I have been holding out hope that it would get fixed but perhaps now is the time to speak out. For the record, I was very happy with the old green Dark theme and would very much like the option of enabling that.

Firstly it seems the new Dark theme was never fully implemented. There are several elements that still appear as they did in the green Dark theme. eg. highlighting for hyperlinks on a mouseover, the dashed line in the 'Advanced Peers' section of the console that is separating the Known peers from the Failing peers, the bounding box and icon in the 'Network Reachibility' box, the borders of checkboxes and probably others. These anomalies are still functional but still seem out of place.

Secondly the icons and the arbitrary use of colours that come with the new Dark theme often make it less useable than the old set. I do not find the new icons to have designs that are intuitive or suggestive of what they are trying to represent. Also the level of detail is not easy to resolve and distinguish. The arbitrary and wide range of colours does more to confuse than to illustrate.

Lastly, it does not matter how well implemented the changes might have been or well thought out they are. If someone comes into your home and rearranges your furniture, the contents of your kitchen, the arrangements and contents of your desk or your i2p user interface it is just plain rude. What your friends or design instructor think of your accomplishments are irrelevant unless it is their lives that you are rearranging.

I hope the feedback is helpful.

Sincerely

Xeyed1

idk maintains the themes. Always better to provide feedback as early a possible rather than simply hoping it will get better. Never too late though. Best would be for you to start a separate issue with specific things to fix (and attached screenshots are very helpful). If we do put a theme picker in the wizard, dark theme will get a lot more users. This issue however is specifically about the new-install wizard only.

The project made the decision to go from 4 themes to 2 because of the substantial maintenance burden required to maintain 4 themes. In short, it was impossible. We didn't make the decision lightly. I get it that it was annoying for green-theme lovers but there was no other option for us.

mentioned in commit f0758ee3

@idk dark theme needs CSS for disabled buttons. Light theme grays-out and removes the icon when a button is disabled. Dark theme doesn't appear to do anything. Buttons are disabled via js in the wizard and a few other places in the console and so this is necessary.

The word "dark" under the moon on /configui is very fuzzy but it clears up once the page is clicked on anywhere. Can't get a screenshot of it because it clears up when I try. Maybe only apparent with my last checkin? not sure.

@zzz so far I've made several changes focused on the look and feel of /welcome, I changed the text color to increase the contrast, changed spacing in several places, lined up the xhr*.notification areas and made them look the same(mostly, so far, one of them has a partially transparent background and I am not sure whether I want to A) make the other two have partially transparent backgrounds or B) remove the partially transparent background from the one that has it. I'm leaning B) now that all three "notifications" in the wizard should appear lined up on the bandwidth results. CSS for :disabled will be checked in in a few minutes.

@Xeyed1 as soon as we're satisfied with /welcome I'll make a point on the specifics you pointed out in Fixing the Dark Theme. As @zzz said, the the more specific you can be about criticisms the quicker and easier I can act on them. If not, then I can only A) guess what you mean and B) work on what bothers me, and right now that's the color of the highlighter on textareas when you select some of the text. File issues and assign them to me, I will work with you on them.

the dark wizard layout still looks a little wacky but it's getting better.

Do you think you can shine it up in time for the next release? if so, I'll start working on adding the theme picker to the wizard. I don't want to do any more until we commit to finishing it.

Yeah I think it can be done by release, I'll keep working on it. I want to make sure that those input:disabled and button:disabled don't look wrong anywhere else in the console too, I've only seen them in the Wizard so far.

Done in b7e710b2

It was super-easy after all the prep.

@idk -

I used the step-1.png image, it was unused, left behind from a page we deleted a couple years ago? I reused the wizlangsettings div id from the first page. You can change it to a new id if you need it. However, both the first and new second page don't seem to place that div in a logical place, either for dark or light. It's down at the bottom, not between the " Please select your preferred language:" and the buttons. I'll leave that to you.

mentioned in commit b7e710b2

changed milestone to %1.6.0

you haven't commented here since your checkins, or closed the ticket, so I held off for a while, but now we're getting close to the release.

while the worst of the wonkiness in the dark theme (alone) is gone, there's still no consistency between dark and light, so when flipping back and forth on the theme picker tab, things fly all around which is jarring.

• logo changes size and (slightly) position
• 'console language saved' box flies between upper right and lower right
• worst of all, the buttons fly from upper left to lower right

to make the theme picker tab rational, things can't be flying around when the user does a trial theme switch by clicking on the choices. see attached.

Sorry for the lack of communication on the thread but we are on the same page about the issue of consistency between the two themes and that is what I've been working on re: this issue. I don't know for sure that I can make it perfect this cycle but I definitely can make it usable and improve the consistency to the point where using the theme switcher is no longer more jarring than necessary. Obviously switching from light-dark/dark-light is a little bit of a visual shock without moving icons around unnecessarily.

The way that works best is to move the buttons to the bottom-right hand corner on the light theme in order to match the dark theme, move the notification(console language saved) to the top-right to match the dark theme, and shrink the Logo to match the dark theme. It's considerably less jarring, where it's still imperfect there is still a small size-consistency issue between the two themes with one of the elements which causes everything on the page to still shift just about half a centimeter on my screen. It's enough to be perceptible, but everything shifts exactly the same small amount in exactly the same direction and if I can find the source of the inconsistency it's likely one line removed to fix. I'll check in what I have shortly so you can see exactly what I mean, it's actually only like 5 lines changed to the CSS.

I fiddled with it a little more before I checked it in and I think it's pretty close now. The background image becomes much more of an issue when the others are dealt with, I'm going to make them the same size next.

Oh shoot I tagged those last two checkins with #338 (closed) instead of #335 (closed) , @zzz I've checked in the consistency changes and I think the transition page looks pretty good now and the changes work on the other slides.

mentioned in commit 685a2f1e

The messages box positioning is still different between dark and light. In dark it overlaps the image; I believe the light layout is better. See dark screenshot above from 3 weeks ago. Test by clicking light and dark on the theme picker panel.

mentioned in commit 3f7f3159

Cache was hiding that one from me. Fix checked in in #3f7f3159

closed with commit 40466bc6