Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update modal icon styles

Browse source 
Co-Authored-By: Max Brunsfeld <maxbrunsfeld@gmail.com>
This commit is contained in:
Nate Butler 2023-08-16 13:48:12 -04:00
parent 6c15636ccc
commit 43127384c6
4 changed files with 30 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

5
assets/icons/ellipsis.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 233 B

21
crates/collab_ui/src/collab_panel/channel_modal.rs
View file

@ -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),
),

4
crates/theme/src/theme.rs
View file

@ -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,
}

30
styles/src/style_tree/collab_modals.ts
View file

@ -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),