Commit graph

491 commits

Author SHA1 Message Date
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
Travis Ralston
a7e3d7df28 Make the tabs look like the design 2019-01-21 16:51:43 -07:00
Travis Ralston
15709040e7 Make tabs be their own panels 2019-01-21 16:51:43 -07:00
Travis Ralston
5adfc09237 Bring in TabbedView nearly verbatim from prior work
Sourced from https://github.com/matrix-org/matrix-react-sdk/pull/1644 and related PRs.
2019-01-21 16:51:43 -07:00
J. Ryan Stinnett
31808c23a8 Override Firefox UA style for placeholders 2019-01-21 15:01:26 -06:00
J. Ryan Stinnett
82dee37afe Fix styling regression in member list filter 2019-01-21 13:57:33 -06:00
J. Ryan Stinnett
23b3e74c1c Change to new field focused color 2019-01-21 13:47:16 -06:00
Bruno Windels
5aff76b49d use css scrollbar styles to make native scrollbars prettier 2019-01-21 19:06:49 +01:00
J. Ryan Stinnett
efd5405267 Add a form field component for the redesign
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.
2019-01-19 22:13:53 -06:00
J. Ryan Stinnett
b2387f4cff Define SCSS variable for resource dir
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
2019-01-17 22:06:49 -06:00
J. Ryan Stinnett
7678b9c43b Lift font SCSS partials to theme root
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.
2019-01-17 21:50:45 -06:00
Bruno Windels
8c30d05eb8 Revert "Merge pull request #2348 from matrix-org/bwindels/roomgridview-experimental"
This reverts commit ece5cb1fcc, reversing
changes made to 64a3d2521c.
2019-01-17 10:29:37 +01:00
J. Ryan Stinnett
5b88b64950 Rework custom status context menu
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.
2019-01-15 10:54:29 -06:00
Bruno Windels
ece5cb1fcc
Merge pull request #2348 from matrix-org/bwindels/roomgridview-experimental
Tiled room UI
2019-01-09 17:25:08 +00:00
Bruno Windels
254427461d fix PR feedback 2019-01-09 12:48:13 +01:00
David Baker
54898a6c35 Fix black-on-black GIF icon for stickers
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
2019-01-07 13:49:01 +00:00
Travis Ralston
ff2faf7996 Add missing CSS to dharma theme 2019-01-03 16:32:52 -07:00
Travis Ralston
8017f0a4a1 Merge remote-tracking branch 'origin/experimental' into travis/develop-for-real 2019-01-03 16:00:23 -07:00
David Baker
f928be6f59 Revert "Merge pull request #2395 from matrix-org/dbkr/merge_develop_experimental"
This reverts commit ad47144355.
2019-01-03 15:37:03 -07:00
David Baker
982e037822 Fix merge 2019-01-03 18:05:38 +00:00
David Baker
7d161de35b Partial merge of develop to experimental
Does not include #2336 as the file has been moved out from underneath it:
will do this separately
2019-01-03 15:02:58 +00:00
J. Ryan Stinnett
00405e7f22 Use Nunito font from the server only
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.

Fixes vector-im/riot-web#7959.
2018-12-31 12:26:35 -06:00
Nad Chishtie
5723ae6040 Defined $accent-color-alt in all themes 2018-12-20 16:06:02 +00:00
Nad Chishtie
09bf68b1bd Improved colours. 2018-12-20 12:46:43 +00:00
Nad Chishtie
d7473c4f4d Various colour, contrast and legibility improvements. 2018-12-20 11:35:21 +00:00
Nad Chishtie
b61aa33e99 Tint input icon. 2018-12-20 11:33:53 +00:00
Bruno Windels
1d43712a8f Merge branch 'experimental' into nadonomy/icons 2018-12-18 18:22:24 +01:00
Nad Chishtie
074c96cd3e First pass of normalising icons. 2018-12-18 16:48:20 +00:00
Bruno Windels
c917b4038b scope default input style rules to MatrixChat 2018-12-18 17:02:48 +01:00
J. Ryan Stinnett
a92d2902c4 Add an in-room reminder to set up key recovery
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.

Fixes vector-im/riot-web#7783.

Signed-off-by: J. Ryan Stinnett <jryans@gmail.com>
2018-12-07 14:13:02 -06:00
Bruno Windels
231d8fff6e add new style vars from develop 2018-11-26 13:22:34 +01:00
Bruno Windels
67e0030ccd Merge branch 'develop' into experimental 2018-11-26 13:10:29 +01:00
Travis Ralston
7dd610b41e
Merge pull request #2235 from MaxwellKepler/develop
Added badge to non-autoplay GIFs
2018-11-16 13:25:40 -07:00
Travis Ralston
8916c90fed Make the 'Accept' button for consent a little more friendly
Part of https://github.com/vector-im/riot-web/issues/7700
2018-11-15 20:26:37 -07:00
Bruno Windels
20b8994714 simplify DOM and style to design 2018-11-12 18:19:18 +01:00
Bruno Windels
4e773c2665 Make right panel a dark-panel instead of every descendant.
Also move bg color central.
2018-11-06 14:47:58 +01:00
Bruno Windels
3cd32e2f44 update search icon(s) 2018-11-05 13:07:49 +01:00
Bruno Windels
701dd6d33f restyle search close button 2018-11-05 09:54:14 +01:00
Bruno Windels
064662380f support search icon in mx_textinput, use in memberlist 2018-11-05 09:35:27 +01:00
Bruno Windels
46389457e3 add input styling for light and dark panels (leftpanel vs room header) 2018-11-05 09:32:37 +01:00
Bruno Windels
80afc0982b add generic text input styling
text inputs are now styled at every occurence in the app,
style input by default, and provide a .mx_textinput class
if buttons need to appear inside the input styling.

Before this was partially done in _common.scss, but as it's
highly theme-dependent, makes more sense to do it in the theme.
2018-11-05 09:28:26 +01:00
Bruno Windels
8c62dddb32 one big commit, sorry
changing looks of input & buttons
changing background color of right panels
moving invite button around
change margins and paddings in memberlist
2018-10-24 13:50:58 +02:00
Bruno Windels
466062e872
Merge pull request #2239 from matrix-org/bwindels/topleftmenu1
Redesign: 1st go at top left menu & restyling context menus
2018-10-23 19:37:05 +00:00
Bruno Windels
88df3d2a81
Merge pull request #2238 from matrix-org/bwindels/initialtimelinetweaks
Redesign: Initial timeline tweaks
2018-10-23 19:36:19 +00:00
Bruno Windels
b7ab207778 move sendername colors to theme 2018-10-23 15:48:44 +02:00
Bruno Windels
eba91d3edc initial restyle of context menus with drop shadow 2018-10-23 15:23:59 +02:00
Maxwell Kepler
54f9231582 Added badge to GIFs (https://github.com/vector-im/riot-web/issues/7344) 2018-10-22 20:57:58 +01:00
Bruno Windels
d1bab6cc35 tweak resize handle in room list
only show a 1 px line but with a 9px interaction target
apply darker color from design
2018-10-22 11:19:42 +02:00
Bruno Windels
b728acc798 set accest color to new red 2018-10-22 11:18:53 +02:00
Bruno Windels
6af61ebb09 add plus button for rooms and people 2018-10-19 12:07:36 +02:00
Bruno Windels
73ba837c26 fix style changes after merging in develop 2018-09-21 13:27:00 +02:00
Bruno Windels
91ec96c8d3 Merge branch 'develop' into bwindels/redesign 2018-09-21 12:44:44 +02:00
David Baker
9f19896df0 Support for room upgrades
* Show when a room upgrade is needed
 * Dialog box to perform the upgrade
2018-08-17 14:54:43 +01:00
Matthew Hodgson
79c06016e1 merge 2018-08-12 13:54:44 +02:00
David Baker
6593ee09d1 Warning bar for MAU limit hit
Somewhat untested, sorry
2018-08-07 17:04:37 +01:00
Matthew Hodgson
4fbf34e05b Merge branch 'develop' into matthew/dharma 2018-08-03 17:15:00 -07:00
David Baker
b5d2fa769c Support MAU error on sync
For https://github.com/vector-im/riot-web/issues/7091
2018-08-03 14:54:52 +01:00
Matthew Hodgson
fe73953d9d fix merge; disable sticky headers; tweak chevrons 2018-07-30 09:00:11 -07:00
Matthew Hodgson
9783b6100d Merge branch 'develop' into matthew/dharma 2018-07-29 17:03:23 +01:00
Michael Telatynski
32ab997230
properly style Group Pill
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2018-06-22 14:38:06 +01:00
Matthew Hodgson
3bf28a08ec experiments in dharma 2018-05-25 03:17:29 +01:00
Matthew Hodgson
6d1563449d fix missing NLs 2018-04-17 16:57:08 +01:00
Matthew Hodgson
46f5c0d205 finish merging vector-im/riot-web#5881 into matrix-react-sdk 2018-04-16 01:13:03 +01:00
Matthew Hodgson
5f3e4444d0 fix theme paths 2018-04-13 01:25:34 +01:00
Matthew Hodgson
cdb5d489a4 organise themes (even light & dark) in the SDK layer 2018-04-12 00:24:22 +01:00