Bruno Windels
15b7a5af31
fix contrast issue
...
when badges with and without highlighted state have a very
different brightness (as they might do in dark mode), hardcoding
the fg color of a badge independent of it's highlighted state
to $accent-fg-color doesn't work well, so add an extra SASS
variable we can reassign to something more specific in the custom theme
2019-10-01 16:58:14 +02:00
Bruno Windels
c1edd6d0b5
apply new pallete with 13 colors
2019-10-01 15:31:43 +02:00
Bruno Windels
01909f81c4
also theme values close to custom palette variables
...
these values are not exactly the same as the palette values,
so we're essentially flattening the color palette used in the
theme, but this is needed when assigning custom colors for it
to look good.
2019-09-26 16:16:05 +02:00
Bruno Windels
64b44acf2b
better comment headers
2019-09-26 16:15:45 +02:00
Bruno Windels
b9d0de1b7d
create 0% and 50% opaque vars as #rgba trick doesn't work
2019-09-26 16:14:39 +02:00
Bruno Windels
f9d5d807e3
make active tab icon color always same as text
2019-09-26 16:13:32 +02:00
Bruno Windels
cad3858a3f
initial custom theme
...
using a reduced set of CSS variables to change the colors at runtime
2019-09-26 12:07:45 +02:00
Bruno Windels
df8ce7fb33
Show placeholder for empty slot in breadcrumbs
2019-09-12 14:46:54 +02:00
J. Ryan Stinnett
166fb696c2
Allow connecting to an IS from address picker
...
This allows those who previously disconnected from an IS to either choose the
default IS or a custom one from Settings via the address picker dialog.
Part of https://github.com/vector-im/riot-web/issues/10619
2019-08-29 15:28:34 +01:00
Bruno Windels
eddaece43e
add visual bell color to theme + choose better value for dark mode
2019-08-28 18:00:57 +02:00
Travis Ralston
528b927638
Merge pull request #3196 from matrix-org/travis/fix-hover
...
Change highlight colour on dark theme
2019-07-10 07:52:14 -06:00
Travis Ralston
2142826ffd
Change highlight colour on dark theme
...
Fixes https://github.com/vector-im/riot-web/issues/10248
2019-07-09 11:29:13 -06:00
Travis Ralston
93872e6fa5
Ask for the user's password to rehydrate their soft logged out session
...
Fixes https://github.com/vector-im/riot-web/issues/10236
The changes to the MatrixClientPeg (assign/start) are to permit the SoftLogout page to access the MatrixClientPeg reliably. This is why assign() is called by Lifecycle as an alternative to start().
Minimal design work has been done here. The majority is deferred to https://github.com/vector-im/riot-web/issues/10262
2019-07-04 16:51:16 -06:00
Bruno Windels
cca82635f3
whitespace
2019-07-03 10:32:37 +02:00
Bruno Windels
fc3c4fccc2
set background on highlighted messages
2019-07-02 18:31:11 +02:00
Bruno Windels
2e3a6b3c0b
set 50% transparent accent color as editor focus border
2019-06-26 14:40:33 +02:00
Bruno Windels
d20b765e27
rename $accent-color-50pct to $accent-color-darker
...
we'll use $accent-color-50pct for 50% transparent accent color
2019-06-26 14:34:26 +02:00
J. Ryan Stinnett
3bd247ebaa
Tweak interactive tooltip to match design
...
This tweaks the tooltip to match the color, spacing, etc. seen in the designs.
Part of https://github.com/vector-im/riot-web/issues/9753
Part of https://github.com/vector-im/riot-web/issues/9716
2019-06-21 15:10:08 +01:00
Travis Ralston
aacb942d57
Don't handle identity server failure as fatal, and use the right message
...
Fixes https://github.com/vector-im/riot-web/issues/10002
2019-06-10 19:28:32 -06:00
J. Ryan Stinnett
e01a6ce24c
Add Segoe UI Emoji as native fallback for Windows
2019-05-22 16:27:03 +01:00
Bruno Windels
1bdcb0c35a
remove obsolete comments
2019-05-22 11:19:35 +02:00
Matthew Hodgson
4ae652e5c3
load twemoji dynamically as colr or sbix; fix monospace
2019-05-22 02:31:24 +01:00
Matthew Hodgson
dbc6815abf
make EmojiProvider and stripped-emoji.json work
2019-05-19 20:48:18 +01:00
Matthew Hodgson
e48cc44cba
apply monospace font correctly
2019-05-19 17:41:18 +01:00
Matthew Hodgson
dc72641264
replace emojione with twemoji. completely untested & debugged & unoptimised
2019-05-19 15:23:43 +01:00
J. Ryan Stinnett
059988ff5c
Extract tooltip styling to a shared class
...
We want to use the same styling with edited tooltip as well, so this extracts
the shared bits.
2019-05-17 12:11:01 +01:00
J. Ryan Stinnett
3da1f73ea4
Add a basic tooltip showing who reacted
...
This adds a first attempt at tooltip showing who reacted to a message. It
doesn't limit senders or position the tooltip nicely, but the info is there at
least.
Part of https://github.com/vector-im/riot-web/issues/9722
2019-05-17 12:11:01 +01:00
J. Ryan Stinnett
1421e8e06b
Tweak reply arrow and hover color
2019-05-15 09:12:53 +01:00
J. Ryan Stinnett
87f737b8a3
Increment an existing reaction
...
This allows you to increment an existing reaction below a message by clicking on
it.
At the moment, this is not linked to the action bar, so they each are using
local state. We'll likely want to add some mechanism so that we can local echo
to both of these UI areas at the same time, but that can be done separately.
Fixes https://github.com/vector-im/riot-web/issues/9486
2019-05-02 12:05:17 +01:00
J. Ryan Stinnett
15c5893278
Display existing reactions below the message
...
This displays the existing reactions a message has from all users below the
message.
Since we don't currently have an API to actually get these events yet,
adds a temporary hook that looks for a specific message to inject some sample
data. This helps build out the UI for now and can be removed once it exists.
Fixes https://github.com/vector-im/riot-web/issues/9573
2019-05-02 12:05:17 +01:00
J. Ryan Stinnett
4b50d2a2bf
Update action bar colors for dark theme
...
In addition, this also adjusts the event hover colors to match the palette.
Fixes https://github.com/vector-im/riot-web/issues/9591
2019-04-30 17:42:17 +01:00
J. Ryan Stinnett
8ef9fe951d
Update styling of message action bar for multiple buttons
...
This applies the new design for multiple buttons in the message action bar,
paving the way for more things to appear here.
In addition, this changes the existing options button to use the three vertical
dots icon. Some theme colors are also tweaked to align with what they were meant
to be from the unified palette.
2019-04-29 15:20:51 +01:00
J. Ryan Stinnett
590535c569
Use value from unified palette
...
Co-Authored-By: dbkr <dbkr@users.noreply.github.com>
2019-04-05 10:06:35 +01:00
David Baker
c0867e8e48
Fix dialog title colour on dark theme
2019-04-03 16:48:11 +01:00
David Baker
7925e7169a
Design tweaks to dialogs
...
Little bit of a mix of things in this one:
* Support variable-width dialogs. Default is fixed-width as before,
only UploadConformDialog is variable-width. Controlled by a prop
to BaseDialog.
* Fixes to the cancel 'x' - scale the mask image, tweak size & colour
* Colour & boldness of dialog titles
* Align the dialog title & cancel 'x'
* Remove gap between dialog buttons & right hand side of dialog(!)
* Round corners on dialogs
* Add grey border on image preview in upload confirm dialog
* and, squeezing in slightly randomly, finish the partially renamed
ChatInviteDialog to AddressPickerDialog.
2019-04-03 16:27:45 +01:00
Matthew Hodgson
40f16fa310
adds validation for fields.
...
* renames RoomTooltip to be a generic Tooltip (which it is)
* hooks it into Field to show validation results
* adds onValidate to Field to let Field instances call an arbitrary validation function
Rebased from @ara4n's https://github.com/matrix-org/matrix-react-sdk/pull/2550
by @jryans. Subsequent commits revise and adapt this work.
2019-03-12 14:02:54 +00:00
J. Ryan Stinnett
6441b2ed98
Ensure country dropdown uses light styling on auth
...
If the dark theme is activated, the country dropdown defaults to those colors
where it doesn't fit in with the always-light auth flow. This restyles its
colors to be light.
2019-03-06 16:45:54 +00:00
Aaron Raimist
c16791814e
Set event-sending-color in dark theme
...
Signed-off-by: Aaron Raimist <aaron@raim.ist>
2019-02-19 19:58:11 -06:00
J. Ryan Stinnett
edf10dbdde
Merge pull request #2659 from jryans/dark-theme-more-2
...
Dark theme follow ups round 2
2019-02-19 17:51:29 +00:00
J. Ryan Stinnett
b7cb16242b
Tweak light theme color values
2019-02-19 11:49:49 +00:00
J. Ryan Stinnett
19977b052f
Add new var for dark panel bg color
2019-02-18 13:50:17 +00:00
J. Ryan Stinnett
fdd88b60a6
Lift panel input styling up to common
2019-02-18 13:43:18 +00:00
J. Ryan Stinnett
98a3ecbcb5
Tweak placeholder styles to also affect member search
2019-02-18 13:34:25 +00:00
J. Ryan Stinnett
3475b6faed
Remove light styles that duplicate common
2019-02-18 12:19:46 +00:00
J. Ryan Stinnett
e16f29b1e0
Use darker color of photo lightboxes for dialogs on dark theme
2019-02-18 12:14:55 +00:00
J. Ryan Stinnett
52bd1edd72
Tweak room and group pill color for dark theme
2019-02-18 11:41:23 +00:00
J. Ryan Stinnett
402992cee4
Adjust add room button for dark theme
2019-02-18 11:34:25 +00:00
J. Ryan Stinnett
c490606f15
Revert back to previous base color on dark theme
2019-02-18 11:34:25 +00:00
J. Ryan Stinnett
fa3662257d
Tweak widget bar color for dark theme
2019-02-18 11:34:25 +00:00
Aaron Raimist
9318c4ec78
Update dark theme bg-color to show hover effect on messages
...
Signed-off-by: Aaron Raimist <aaron@raim.ist>
2019-02-16 12:55:35 -06:00
Aaron Raimist
459f9d4fbc
Set h3-color in dark theme
...
This is things like "INVITED" in memberlist
Signed-off-by: Aaron Raimist <aaron@raim.ist>
2019-02-15 21:56:47 -06:00
J. Ryan Stinnett
91c91c5ca9
Restore previous redacted message look in dark theme
2019-02-15 15:15:23 +00:00
J. Ryan Stinnett
422750082d
Tweak pill bg color for dark theme
2019-02-13 15:11:29 +00:00
J. Ryan Stinnett
5f6907c85e
Improve gradients for Safari
2019-02-13 15:06:40 +00:00
J. Ryan Stinnett
f64f39f773
Tweak box shadow on dark theme
2019-02-13 15:06:40 +00:00
J. Ryan Stinnett
93324896f3
Force authpage to act like light theme
2019-02-13 14:24:03 +00:00
J. Ryan Stinnett
feb92957c0
Use notice colors for E2E icons
2019-02-13 14:05:45 +00:00
J. Ryan Stinnett
4409636c0b
Tweak panel button divider color
2019-02-13 13:57:59 +00:00
J. Ryan Stinnett
fb4fd54f6f
Stop gradients at panel bg color
2019-02-13 13:48:56 +00:00
J. Ryan Stinnett
c8edd6b417
Route header panel bg color to left and right panels
2019-02-13 13:17:50 +00:00
J. Ryan Stinnett
e09963cdfb
Tweak dark theme color values
2019-02-13 13:10:55 +00:00
J. Ryan Stinnett
1359ac62cb
Tweak header divider line
2019-02-13 10:52:03 +00:00
J. Ryan Stinnett
7bad8d594d
Move common input styles out of themes
2019-02-13 10:47:04 +00:00
J. Ryan Stinnett
b13baf8926
Tweak start a chat for dark theme
2019-02-13 10:47:04 +00:00
J. Ryan Stinnett
932b377dc5
Restore color inversion from old dark theme
2019-02-13 10:47:04 +00:00
J. Ryan Stinnett
b0d08b9a25
Rename dharma theme to light theme
2019-02-13 10:47:04 +00:00
J. Ryan Stinnett
6c954dadc8
Allow theming message composer buttons
2019-02-13 10:47:04 +00:00
J. Ryan Stinnett
e1edd56643
Allow theming group header buttons
2019-02-13 10:47:04 +00:00
J. Ryan Stinnett
3cba5edd6f
Allow theming right panel header buttons
2019-02-13 10:47:04 +00:00
J. Ryan Stinnett
8652a094f3
Allow theming room header buttons
2019-02-13 10:47:04 +00:00
J. Ryan Stinnett
c00495304f
Explicit color for tagpanel buttons
2019-02-13 10:47:04 +00:00
J. Ryan Stinnett
d7fb39fd08
First pass at dark theme colors
2019-02-13 10:47:04 +00:00
J. Ryan Stinnett
fe364d4140
Update global colors in default theme
2019-02-13 10:47:04 +00:00
J. Ryan Stinnett
f2db509394
Update username variants
2019-02-13 10:47:04 +00:00
J. Ryan Stinnett
6e2cef10d9
Remove incorrect unused comment
2019-02-13 10:47:04 +00:00
J. Ryan Stinnett
dda755dd5a
Fix up syntax in default theme
2019-02-13 10:47:04 +00:00
J. Ryan Stinnett
3b200705ed
Remove light theme
2019-02-13 10:47:04 +00:00
Bruno Windels
ccaa017980
add divider between tabs and regular buttons in room header
2019-02-12 20:05:01 +01:00
Bruno Windels
e2ce12f5c1
wip
2019-02-01 23:15:14 +01:00
Bruno Windels
a09133960c
pr feedback
2019-02-01 19:16:06 +01:00
Bruno Windels
09c3391dd8
replace existing icon in composer with the new one
2019-02-01 13:40:42 +01:00
Matthew Hodgson
2fc6f89953
remove italics CSS skew
2019-01-31 11:51:26 +01:00
Matthew Hodgson
bc83a79ac6
support cyrillic nunito
2019-01-31 11:43:06 +01:00
Travis Ralston
2aee2df6e9
Fix usage of semibold fonts
...
Fixes https://github.com/vector-im/riot-web/issues/8275
2019-01-29 19:11:04 -07:00
Bruno Windels
9f1b4ac4cc
room directory makeover
2019-01-29 15:34:58 +01:00
Bruno Windels
cc2b6f9524
Merge pull request #2470 from matrix-org/bwindels/css-scrollbars
...
Make native scrollbars prettier
2019-01-29 08:20:21 +00:00
Travis Ralston
2a9f6186d7
Merge pull request #2491 from matrix-org/travis/usettings/tab/general
...
Implement the "General" tab of new user settings
2019-01-24 08:51:11 -07:00
Travis Ralston
736aa8297d
Minor CSS adjustments
2019-01-23 18:49:27 -07:00
Travis Ralston
40f6aeba28
Touchups to toggles in settings
2019-01-23 16:03:56 -07:00
Travis Ralston
3f897468a6
Add a ToggleSwitch and use it for SettingsFlag
...
Also bring in the compact timeline option.
Without minor CSS changes, the old user settings are completely unusable with this change. As such, minimal effort has been put in to have it be useful. Similarly, the changes drop the use of radio groups and the old theme selector was the only one that used it. See the comments for more details on how/why this was mitigated the way it was.
2019-01-23 15:50:41 -07:00
J. Ryan Stinnett
e396954a20
Update forgot password link text and style
2019-01-23 15:50:44 -06:00
Travis Ralston
aa7afe819f
Bring over email address management
2019-01-23 09:28:53 -07:00
Travis Ralston
677b3ca7b5
Bring flair into the new settings
...
Makes the flair options in old settings look broken (cosmetic issues), but it's fine because we're ripping that out in due time.
2019-01-23 09:27:04 -07:00
Travis Ralston
f643d7a143
Finish the box for displayname/avatar changes
2019-01-23 09:27:04 -07:00
J. Ryan Stinnett
05254f0e82
Tweak language selector to match design
2019-01-23 10:18:06 -06:00
Travis Ralston
94b1d739fb
Merge pull request #2476 from matrix-org/travis/modal-tab-settings
...
Basic structure for tabbed user settings
2019-01-23 07:52:44 -07:00
J. Ryan Stinnett
575cd1e37b
Add modal look to authentication flows
...
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.
2019-01-22 20:44:49 -06:00
Travis Ralston
15a56fa90b
Improve the profile section a bit and add a highlight to the temp tab
2019-01-21 17:27:43 -07:00
Travis Ralston
c3692aa9ae
Use the right icons, sizing, and font families for things
2019-01-21 16:51:43 -07:00
Travis Ralston
22435bf8d2
Make the dialog look more like a new dialog
2019-01-21 16:51:43 -07:00