Nate Butler and Max Brunsfeld created
Co-Authored-By: Max Brunsfeld <maxbrunsfeld@gmail.com>assets/icons/ellipsis.svg | 5 ++
crates/collab_ui/src/collab_panel/channel_modal.rs | 21 ++++++++---
crates/theme/src/theme.rs | 4 +-
styles/src/style_tree/collab_modals.ts | 30 ++++-----------
4 files changed, 30 insertions(+), 30 deletions(-)
@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="7" cy="7" r="1" fill="black"/>
+<circle cx="11" cy="7" r="1" fill="black"/>
+<circle cx="3" cy="7" r="1" fill="black"/>
+</svg>
@@ -423,30 +423,39 @@ impl PickerDelegate for ChannelModalDelegate {
.with_children({
let svg = match self.mode {
Mode::ManageMembers => Some(
- Svg::new("icons/ellipsis_14.svg")
+ Svg::new("icons/ellipsis.svg")
.with_color(theme.member_icon.color)
.constrained()
- .with_width(theme.member_icon.width)
+ .with_width(theme.member_icon.icon_width)
.aligned()
+ .constrained()
+ .with_width(theme.member_icon.button_width)
+ .with_height(theme.member_icon.button_width)
.contained()
.with_style(theme.member_icon.container),
),
Mode::InviteMembers => match request_status {
Some(proto::channel_member::Kind::Member) => Some(
- Svg::new("icons/check_8.svg")
+ Svg::new("icons/check.svg")
.with_color(theme.member_icon.color)
.constrained()
- .with_width(theme.member_icon.width)
+ .with_width(theme.member_icon.icon_width)
.aligned()
+ .constrained()
+ .with_width(theme.member_icon.button_width)
+ .with_height(theme.member_icon.button_width)
.contained()
.with_style(theme.member_icon.container),
),
Some(proto::channel_member::Kind::Invitee) => Some(
- Svg::new("icons/check_8.svg")
+ Svg::new("icons/check.svg")
.with_color(theme.invitee_icon.color)
.constrained()
- .with_width(theme.invitee_icon.width)
+ .with_width(theme.invitee_icon.icon_width)
.aligned()
+ .constrained()
+ .with_width(theme.invitee_icon.button_width)
+ .with_height(theme.invitee_icon.button_width)
.contained()
.with_style(theme.invitee_icon.container),
),
@@ -276,8 +276,8 @@ pub struct ChannelModal {
pub contact_username: ContainerStyle,
pub remove_member_button: ContainedText,
pub cancel_invite_button: ContainedText,
- pub member_icon: Icon,
- pub invitee_icon: Icon,
+ pub member_icon: IconButton,
+ pub invitee_icon: IconButton,
pub member_tag: ContainedText,
}
@@ -4,6 +4,7 @@ import picker from "./picker"
import { input } from "../component/input"
import contact_finder from "./contact_finder"
import { tab } from "../component/tab"
+import { icon_button } from "../component/icon_button"
export default function channel_modal(): any {
const theme = useTheme()
@@ -26,6 +27,11 @@ export default function channel_modal(): any {
const picker_input = input()
+ const member_icon_style = icon_button({
+ variant: "ghost",
+ size: "sm",
+ }).default
+
return {
contact_finder: contact_finder(),
tabbed_modal: {
@@ -93,29 +99,9 @@ export default function channel_modal(): any {
},
channel_modal: {
// This is used for the icons that are rendered to the right of channel Members in both UIs
- member_icon: {
- background: background(theme.middle),
- padding: {
- bottom: 4,
- left: 4,
- right: 4,
- top: 4,
- },
- width: 5,
- color: foreground(theme.middle, "accent"),
- },
+ member_icon: member_icon_style,
// This is used for the icons that are rendered to the right of channel invites in both UIs
- invitee_icon: {
- background: background(theme.middle),
- padding: {
- bottom: 4,
- left: 4,
- right: 4,
- top: 4,
- },
- width: 5,
- color: foreground(theme.middle, "accent"),
- },
+ invitee_icon: member_icon_style,
remove_member_button: {
...text(theme.middle, "sans", { size: "xs" }),
background: background(theme.middle),