This was a regression introduced in https://github.com/status-im/status-desktop/pull/2065.
The new wrapping Rectangle would get the color that is possibily passed down
to Separator. Instead it should get properly bound to the actual separator.
We've been implementing such a button in various ways throughout the
application. Sometimes using SVG icons and rectangles, sometimes highjacking
`StyledText` components (which was clever though).
Obviously this resulted in inconsistencies, so this commit introduces
a new dedicated component to render the three-dots button for context menus.
Sometimes, `Separator` is used inside context menus to separate groups
of actions that belong together. The separator in itself doesn't have any
padding or margins in this case because the just gets transcluded as is
in the context menu, between menu items.
There are cases in the design where a padding/margin is desired though.
This change makes that possible by wrapping the separator `Rectangle` with
another `Rectangle` which controls a custom height (if desired). The inner
rectangle is then just always vertically center.
In practice this means, existing usages of `Separator` behave exactly the same,
they don't break. In addtion one can set `Separator { height: x }` while maintaining
a 1px separator line.
In the recent past we've improved our `ModalPopup` to allow for a bit more control
when it comes to rendering a modal footer section with call-to-action items.
The footer section is rendered when there's `footerContent` and when the height
of the footer content is > 0. This means it's possible to also hide the footer content
section from the modal, even when there's footer content children.
However, there's a separator rendered whenver the footer is visible, regardless of its
height. This results in undesired behaviour when rendering footer children of height 0.
To avoid this, this commit adjust the condition so that the separator is only rendered
when the footer visible AND the height of it is > 0.
Allow up to 5 images to be dragged and dropped in to one-on-one chats and in the timeline. Can be combined with the existing upload button. The upload file dialog has been changed to allow multiple selections. Drag and dropped images adhere to the following rules, with corresponding validations messages:
- Max 5 image
- Image size must be 0.5 MB or less
- File extension must be one of [".png", ".jpg", ".jpeg", ".heif", "tif", ".tiff"]
Drag and drop and uploaded images are now also deduplicated.
Prior to this commit, communities without an image would render invisible
in the navigation bar of the application. To avoid this, we're now falling
back to our StatusLetterIdenticon component, which renders the first letter
of the community name with the color of the community.
This commit adds a menu item to the message context menu to
copy links that may exist inside of a message.
There are three possible scenarios:
1. There's no link in the message, which causes the menu to not
render the dedicated menu item at all
2. There's one link in the message, which renders an additional
`Action` with a copy-to-clipboard functionality
3. There are multiple links in a single message. This adds a
nested `PopupMenu` in the existing menu with menu items for each
link extracted from the message
To make this work there were some changes in the `PopupMenu` component
needed, as it wasn't take the sub menu's `enabled` state into account
properly. This makde it always render nested menus even when they
should've been invisible.
Closes: #1733
This commit checks on bootstrap what the currently configured theme
of the user is and loads the system tray icon in its corresponding
variation.
Unfortunately, MacOS doesn't seem to automatically swap out the icons
based on the system's theme, so we have to do it manually with two
different SVG files.
Another gotcha here is that, it doesn't seem to be possible to change
the system tray icon at runtime. When trying to reassign the `icon.source`
based on a newly selected theme, the icon disappears altogether.
The application also doesn't get notified when a user switches the theme
inside the operating system, requiring her to switch to the same theme
manually unless restarted.
Last but not least, using SVG files instead of PNG doesn't seem to solve
the problem that the icon is rendered blurry. I've looked in the docs
but there doesn't seem to be an option to have any influence on that...
Due to how `StatusButton` has evolved, the send button in the Status
timeline no longer looked and behaved the way it was supposed to.
This commit patches that by introducing new properties to `StatusButton`
and making use of them in the Status timline, so that existing buttons
don't break.
It also fixes a bug in the StatusButton where the hovered background
color was wrongly calculated.
There are some inconcistencies in the application when it comes to
button UI elements because we're using `StatusButton` in some places,
in other we use `StyledButton`. The latter is the original
component we've created when we started out building Status
Desktop, but is planned to be removed entirely in favour of
`StatusButton`.
This commit replaces the usages of `StyledButton` with `StatusButton`
StatusButton has a lot of issues when it comes to consistent behaviour
and look & feel. This includes things like calculating incorrect
hover colors as well as not being flexible enough to be used in various
scenarios
This commit changes StatusButton so that it's able to handle outlined
versions of warn buttons, calculates proper colors and more.
Many of these changes introduce heuristics to make things work.
In the long run, we should revisit the different variants that exists
(primary, secondary, outlined, warn etc) to encode them properly
in the API.
The `StatusRoundButton` was missing the `hoverEnabled` flag, causing it
to not turn the cursor into a pointer when the component is hovered.
It's also not rendering the proper hover color.
This commit fixes that to improve usability and look & feel.
redesigns the compact mode to have a nice hover, easier replying and adding reactions and more
Missing parts are aligning chat command, images and unfurlings, redesigning mentions and the channel list and also trying to find a way to re-enable link hovers in the text
With the recent addition of the `muted` property in this component,
the `width` is no longer reliably calculated. Sometimes it can happen
that the muted bell icon jumps out of the component. This is very apparent
inside of a `StatusChatInfoButton`.
This commit ensure that the width of this component always includes all
of its children, fixing the ui bug mentioned above.
This is a new form control component to select colors for wallet
accounts. It will replace the currently used `ColorSelect` in the
Status Desktop application so it aligns with the new designs.
Closes#1497
It was requested to change the tooltip to black an white and white on
black in dark and light themes respectively.
This commit changes the colors accordingly.
The background color of the component was hard coded to grey.
This commit changes it to `backgroundHover` so it looks consistent
in dark and light themes.
This introduces a new component to render Addresses that can be
expanded as well as copied using `CopyToClipBoardButton`.
While there's already an `Address` component that allows for expansion,
it doesn't give us control over it's look and feel and, should rather
be a `Button` anyways.
There's also cases in the application where we render a collapsed address
and don't allow for expanding it. In such cases, we might not want/need
a button at all.
Might make sense to introduce a separate address component that just shows
a collapsed address without any behaviour, which can then be used inside
`StatusExapandableAddress`.
Closes#1633
This is a component that is similar to the `StatusSectionMenuItem` component, just
with the difference that it's not a clickable element, rather "description" element,
inspired by HTML `<dl>`, `<dt>` and `<dd>` elements ("description list", "description term",
"description" respectively).
The component comes with a `CopyToClipBoardButton` by default. We might want to decide
to make it configurable later on, as there could be places where we just want to
render the description item, without a copyble description.
Pascal Precht
Jonathan Rainville
Iuri Matias
Richard Ramos
Eric Mastro
ace-smart
staked-smart-ace