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({ .with_children({
let svg = match self.mode { let svg = match self.mode {
Mode::ManageMembers => Some( Mode::ManageMembers => Some(
Svg::new("icons/ellipsis_14.svg") Svg::new("icons/ellipsis.svg")
.with_color(theme.member_icon.color) .with_color(theme.member_icon.color)
.constrained() .constrained()
.with_width(theme.member_icon.width) .with_width(theme.member_icon.icon_width)
.aligned() .aligned()
.constrained()
.with_width(theme.member_icon.button_width)
.with_height(theme.member_icon.button_width)
.contained() .contained()
.with_style(theme.member_icon.container), .with_style(theme.member_icon.container),
), ),
Mode::InviteMembers => match request_status { Mode::InviteMembers => match request_status {
Some(proto::channel_member::Kind::Member) => Some( Some(proto::channel_member::Kind::Member) => Some(
Svg::new("icons/check_8.svg") Svg::new("icons/check.svg")
.with_color(theme.member_icon.color) .with_color(theme.member_icon.color)
.constrained() .constrained()
.with_width(theme.member_icon.width) .with_width(theme.member_icon.icon_width)
.aligned() .aligned()
.constrained()
.with_width(theme.member_icon.button_width)
.with_height(theme.member_icon.button_width)
.contained() .contained()
.with_style(theme.member_icon.container), .with_style(theme.member_icon.container),
), ),
Some(proto::channel_member::Kind::Invitee) => Some( Some(proto::channel_member::Kind::Invitee) => Some(
Svg::new("icons/check_8.svg") Svg::new("icons/check.svg")
.with_color(theme.invitee_icon.color) .with_color(theme.invitee_icon.color)
.constrained() .constrained()
.with_width(theme.invitee_icon.width) .with_width(theme.invitee_icon.icon_width)
.aligned() .aligned()
.constrained()
.with_width(theme.invitee_icon.button_width)
.with_height(theme.invitee_icon.button_width)
.contained() .contained()
.with_style(theme.invitee_icon.container), .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 contact_username: ContainerStyle,
pub remove_member_button: ContainedText, pub remove_member_button: ContainedText,
pub cancel_invite_button: ContainedText, pub cancel_invite_button: ContainedText,
pub member_icon: Icon, pub member_icon: IconButton,
pub invitee_icon: Icon, pub invitee_icon: IconButton,
pub member_tag: ContainedText, 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 { input } from "../component/input"
import contact_finder from "./contact_finder" import contact_finder from "./contact_finder"
import { tab } from "../component/tab" import { tab } from "../component/tab"
import { icon_button } from "../component/icon_button"
export default function channel_modal(): any { export default function channel_modal(): any {
const theme = useTheme() const theme = useTheme()
@ -26,6 +27,11 @@ export default function channel_modal(): any {
const picker_input = input() const picker_input = input()
const member_icon_style = icon_button({
variant: "ghost",
size: "sm",
}).default
return { return {
contact_finder: contact_finder(), contact_finder: contact_finder(),
tabbed_modal: { tabbed_modal: {
@ -93,29 +99,9 @@ export default function channel_modal(): any {
}, },
channel_modal: { channel_modal: {
// This is used for the icons that are rendered to the right of channel Members in both UIs // This is used for the icons that are rendered to the right of channel Members in both UIs
member_icon: { member_icon: member_icon_style,
background: background(theme.middle),
padding: {
bottom: 4,
left: 4,
right: 4,
top: 4,
},
width: 5,
color: foreground(theme.middle, "accent"),
},
// This is used for the icons that are rendered to the right of channel invites in both UIs // This is used for the icons that are rendered to the right of channel invites in both UIs
invitee_icon: { invitee_icon: member_icon_style,
background: background(theme.middle),
padding: {
bottom: 4,
left: 4,
right: 4,
top: 4,
},
width: 5,
color: foreground(theme.middle, "accent"),
},
remove_member_button: { remove_member_button: {
...text(theme.middle, "sans", { size: "xs" }), ...text(theme.middle, "sans", { size: "xs" }),
background: background(theme.middle), background: background(theme.middle),