This changes the auth screens to use the modal-like style of the redesign.
This does not attempt to style the actual body content of each screen. Instead,
it covers the header area with logo, footer links, and overall modal container
only.
This component displays login and register buttons. It's currently used in the
composer when viewing a room as a guest.
The name is confusing because the login flow uses are very similarly named
`mx_Login_box` as a wrapping around forms, which is totally different than these
buttons.
Additionally, the components is moved to `views/auth` since it is very simple
and auth related.
The label moves into the border on focus and after being filled. A valid color
is applied to the label and input border. Other states like invalid can be added
later as needed.
Adapted from @ara4n's experiment into a React component with a CSS only
approach.
This allows Webpack to insert the proper image URL after builds steps like
adding a hash and so on. The path you supply to `require` is relative to the JS
source file, just like any other would be.
Adds a `$res` SCSS variable set to the path from the root SCSS file to the `res`
directory.
This is a different base path than previously used in CSS URLs (it goes up 3
directories instead of 2), because Webpack will now be resolving images relative
to the root SCSS file, so the path corresponds to a source tree location,
instead of a path in the build output tree.
Defining this variable has two main goals:
* URLs are a bit easier to read
* The path can be overridden, which is needed for external (riot-web) themes
This means that themes which include `light/css/_base.scss` (currently Dark and
Status) won't be forced to have Light's font-faces included. This only really
matters for Status, which uses different fonts throughout.
It can take some time to actually set the status message and see it play back as
a committed event. This adds a spinner for immediate feedback so it's clear
that something is happening.
Fixes https://github.com/vector-im/riot-web/issues/8135.
It seems fractional spacing results in different behavior across browsers,
including unbalanced spacing, making the avatar appear uncentered.
Here we avoid this by using integers that seem to closely match the comps.
Fixes https://github.com/vector-im/riot-web/issues/8134.
This returns to the previous behavior of avatar only without a button when the
custom status feature is disabled so that you don't get pointer cursor for
something that does nothing when clicked.
The avatar ring spacing is kept consistent with and without the feature enabled
by using a different class in CSS.
This updates the custom status context menu to match the latest comps. A single
button is used for setting / clearing, depending on what is appropriate.
The state logic is also changed to depend on events and storage from js-sdk for
the committed status message. This makes it easy to distinguish the value being
edited from what's currently committed.
Adjusts the appearance of the avatar ring to match the latest comps.
In addition, we now always render the surrounding button element, which
simplifies styling since the same size is now occupied both with and without the
feature.
This improves alignment between text in the composer and text in the message
history (https://github.com/vector-im/riot-web/issues/8111).
The "New Recovery Method" dialog would show if either the recovery method had
been changed or removed, but the dialog text didn't make much sense for the
removed case.
This adds a separate dialog customized for the removed case.
Fixes https://github.com/vector-im/riot-web/issues/8046.
This padding only one side made it impossible to center things in the dialog.
Since the dialog also has nice spacing without the padding, this change removes
it.
Fixes https://github.com/vector-im/riot-web/issues/7862.
Text colour ended up being the link colour on images because the
whole image is in an `a`, but stickers are not so it got the default
font colour, which might be black. Define an explicit colour.
Also set pointer-events: none so you can hover over the gif icon
too (I managed to make the message panel small which made the icon
cover most the image, so this prevented the gif from animating
at all).
Fixes https://github.com/vector-im/riot-web/issues/8004
Links in HTML messages were missing the usual underline style, making them
look different from links in text messages (which already do this).
Fixesvector-im/riot-web#4655.
There are various versions of Nunito in circulation, and some have errors in
their metrics or smaller supported character sets. To ensure all users get the
expected experience, don't allow local copies of Nunito to be used.
Fixesvector-im/riot-web#7959.
Adds a New Recovery Method dialog which is shown when key backup fails because
of a version mismatch / version not found error.
The set up button in the dialog currently only marks a device as verified (via a
verification prompt) instead of the eventual restore and cross-sign flow, since
those pieces don't exist yet.
Signed-off-by: J. Ryan Stinnett <jryans@gmail.com>
Change the button to a transparent background so that it's less prominent and
you focus on the primary button instead.
Signed-off-by: J. Ryan Stinnett <jryans@gmail.com>
This adds an in-room reminder above the message timeline to set up Secure
Message Recovery so that your keys will be backed up. If you try to ignore it,
an additional dialog is shown to confirm.
Fixesvector-im/riot-web#7783.
Signed-off-by: J. Ryan Stinnett <jryans@gmail.com>
Fixes https://github.com/vector-im/riot-web/issues/3383
This achieves the result by counting up the number of highlights across all rooms and setting that as the badge above the icon. If there are no highlights, nothing is displayed. The red highlight on the bell is done by abusing how the Tinter works: because it has access to the properties of the SVG that we'd need to override it, we give it a collection of colors it should use instead of the theme/tint it is trying to apply. This results in the Tinter using our warning color instead of whatever it was going to apply.
The RightPanel now listens for events to update the count too, otherwise when the user receives a ping they'd have to switch rooms to see the change.
make mx_fadable not do anything anymore, and make room settings
full size.
Room settings haven't been designed yet, so all of this will
have a full pass when we have a go at it.
The button itself is conditionally enabled because the ILAG dialog already has a continue button. It'd be confusing to users to have 2 continue buttons on the same dialog, so this commit adds the structure required to pass along clicks from the dialog's button down to the UI auth component.
The other place the continue button would appear is on the register page (not ILAG). The button's style is different here, however that will be improved in a later commit.
Part of https://github.com/vector-im/riot-web/issues/7700
If you happen to get logged out, it might not be very clear what has happened
visually. This adds a visible warning to the top of the home page to suggest
logging in.
Fixesvector-im/riot-web#7629.
Signed-off-by: J. Ryan Stinnett <jryans@gmail.com>
instead of having to offset the padding of children of the
autohiding scrollbar container, which gets fiddly quickly,
add a new child to the scrollbar container that gets a negative
margin of the scrollbar width when needed
(on hover and overflowing when overlay is not supported).
This needs an extra DOM element, but as it doesn't do anything weird
layout-wise (like set position), it shouldn't affect styling at all.
It also makes the auto hide scrollbar workarounds completely transparent
to the rest of the code.
