The invite dialog box needs styling

[jech]

The invite dialog box is ugly as sin. Somebody with taste should restyle it.

It's here: https://github.com/jech/galene/blob/master/static/galene.html#L290

[jjsarton]

I have seen this, styling may be done later. I have the intention to rework on the colors and some elements which are not styled as wanted.
Regarding disability some persons have an hight light sensibility and a dark theme will be for such people nice.

[jech]

some persons have an hight light sensibility

Perhaps you could look at #92?

[jjsarton]

I had already a look at this and the @media prefers-scheme is the way which is to adopt. however I would define

:root {
   /* colors and background colors, as well as colors for hover and effects */
  ...
}
@media (prefers-color-scheme: dark) { 
   :root {
       ....
  }
}

With this the colors will be set automatically according to the OS or Browser settings.

[jjsarton]

If you insert:

#invite-dialog {
    border: solid 2px #610a86;
}

#invite-dialog button {
    background-color: #3355ff;
    color: white;
    border-radius: .5em;
    padding: .5em;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-right: 2em;
    display: inline-block;
    width: 7em;
}

#invite-dialog button:hover {
   background-color: #0022ff;
    
}

#invite-dialog input {
    margin-top: 1em;
    width: 12em;
    padding: .2em
}

#invite-dialog label {
    margin-top: 1em;
    display: inline-block;
    width:12em;
}

at the end of galene.css the invite dialog will look better. You can put this for for a first impression within the debugger into the file.

[jech]

Nice. Perhaps the color of the buttons is a little bit too bright?

[jjsarton]

The buttons color is a little bit darker as the blue from the login. The color I chooses fulfil WCAG level AA. For the login this requirement is not fulfiled. Setting the background color to #1c37bf give a better color contrast.

[jech]

I'm sorry, but to my eyes the button colour is clearly too saturated.

[jjsarton]

Color choose is not easy. The background for the input submit element has the value of #007bff or hsl(211,100%,50%) and in the hover state #0069d9 or hsl(210,100%,42%), These values don't comply to WCAG lever AA which is the minimum. The contrast is only 4.11:1or 5.22:1. The minimum required is 4.5:1 for small text and level AA or 7:1 for level AAA.
S we can use #0069d9 for the normal state and possibly #1661B1, hsl(211,100%,36%) for the hover state.

You may go to https://coolors.co and had a look to the sub pages contrast checker and https://coolors.co/colors

[jech]

Thanks, applied as 90f2892. I still think that the colour of the buttons is badly chosen, which is why I'm not closing this issue.

[jjsarton]

Thanks, applied as 90f2892. I still think that the colour of the buttons is badly chosen, which is why I'm not closing this issue.

I was away for a week. Color is difficult, the original colors (.btn-blue white over an light blue) is not good. A black text will solve the problem but this will not correspond to the style for the top bar.

[jech]

Closing since the current dialog is ok, feel free to send further patches to improve it.