["UX" issue] Graphical representation of unset availability settings

[Olf0]

Issue description:
When a new account is created at a frab instance, this person's availability has the state "unset", but is visually displayed as "always available" (see first screenshot below).
This results in some (e.g. speakers) to skip this setting, which must not be omitted (e.g. to successfully schedule a talk submitted by this person).
Tested with the frab instance at frab.froscon.de on 2019-08-11 and the days before.

IMO this is solely an "user experience (UX)" issue, which can be easily resolved by a slightly different graphical representation of the status "availability unset" (see section "Ideas for resolving this:", below).

Yes, there is a line stating "Availability Test does not currently have any availabilities. You need to submit this form." right above the visual elements for setting the availability, plus an alert right under frab's navigation bar, but still people miss to notice them, as the visual indicators prominently state the opposite.

Consequences:
Having missed to set a speaker's availability overlapping with a scheduled talk's timeslot seems to cause the talks not being displayed in the public schedule generated by frab (which is absolutely reasonable).
Indicators do exist, such a talk is displayed in yellow at frab's internal schedule preview and frab's reports properly point out the reason for this. But when in a hurry, it is easy to miss the reports facility / tab in frab or to click patiently through all specific reports.

Side note:
Furthermore the alert is not properly displayed by a recent Firefox for Android (rsp. Fennec), it looks like the "fade in" parameter does not work properly, see

Ideas for resolving this:

1. Primary solution
   Let a person's state "availability unset" be represented by unchecked "Available"-checkbox(es) by altering their default state (i.e., (pre-)unchecked ones instead of (pre-)checked ones), so that page looks like this:
   
2. Additional suggestion: Maybe a stronger wording in the textual notice also helps a bit.
   You may change the sentence "You need to submit this form." to e.g.:
   You must set your availability and submit this form for an event you participate at to be scheduled, e.g. your own talk.

P.S.: HTML-code of the alert as currently emitted by frab

<div class='alert-message alert fade in' data-alert='alert'>`
<a class='close' href='#'>×</a>
<p>Availability Test does not currently have any availabilities.</p>
</div>

[elad-eyal]

@Olf0 - the alert is now shown more prominently (i.e. in red) (#572)

good enough?

[Olf0]

Not really.

1. The inconsistent default settings (i.e., the check-box "Available" being on by default) still exists.
   Thus still the opposite is displayed (a set availability at all times) than the internal state (unset availability = never available).
2. The span of the availability time slider is still fully set by default, which is the opposite of [see 1].
3. The superfluous attribute "fade in" is still set, causing issues on Firefox / Fennec / Icecat / ToR-Browser for Android.
4. The consequences of not setting ones availability are not expressed. I made a suggestion for enhanced this by simply expanding a string.