Skip to content

fix: use gap for Snap UI spacing #23369

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Mar 7, 2024
Merged

fix: use gap for Snap UI spacing #23369

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cbc7279
Use gap for Snap UI spacing
FrederikBolding Mar 7, 2024
544a38e
Fix lint and margins on row
FrederikBolding Mar 7, 2024
abdc876
Simplify
FrederikBolding Mar 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions ui/components/app/snaps/snap-ui-button/snap-ui-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,6 @@ export const SnapUIButton: FunctionComponent<
<Button
className="snap-ui-renderer__button"
id={name}
marginTop={1}
marginBottom={1}
type={type}
onClick={handleClick}
block
Expand Down
1 change: 1 addition & 0 deletions ui/components/app/snaps/snap-ui-form/snap-ui-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export const SnapUIForm: FunctionComponent<SnapUIFormProps> = ({
id={name}
display={Display.Flex}
flexDirection={FlexDirection.Column}
gap={2}
>
{children}
</Box>
Expand Down
2 changes: 1 addition & 1 deletion ui/components/app/snaps/snap-ui-image/snap-ui-image.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,5 @@ export type SnapUIImageProps = {
export const SnapUIImage = ({ value }: SnapUIImageProps) => {
const src = `data:image/svg+xml;utf8,${encodeURIComponent(value)}`;

return <img style={{ marginTop: '4px', marginBottom: '4px' }} src={src} />;
return <img src={src} />;
};
2 changes: 0 additions & 2 deletions ui/components/app/snaps/snap-ui-input/snap-ui-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,6 @@ export const SnapUIInput: FunctionComponent<
<FormTextField
className="snap-ui-renderer__input"
id={name}
marginBottom={1}
marginTop={1}
value={value}
onChange={handleChange}
{...props}
Expand Down
2 changes: 0 additions & 2 deletions ui/components/app/snaps/snap-ui-markdown/snap-ui-markdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,6 @@ import SnapLinkWarning from '../snap-link-warning';
const Paragraph = (props) => (
<Text
{...props}
marginTop={1}
marginBottom={1}
variant={TextVariant.bodyMd}
className="snap-ui-markdown__text"
overflowWrap={OverflowWrap.Anywhere}
Expand Down
2 changes: 0 additions & 2 deletions ui/components/app/snaps/snap-ui-renderer/components/copyable.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,5 @@ export const copyable: UIComponentFactory<Copyable> = ({ element }) => ({
props: {
text: element.value,
sensitive: element.sensitive,
marginTop: 1,
marginBottom: 1,
},
});
2 changes: 0 additions & 2 deletions ui/components/app/snaps/snap-ui-renderer/components/divider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,5 @@ export const divider: UIComponentFactory<Divider> = () => ({
props: {
className: 'snap-ui-renderer__divider',
backgroundColor: BorderColor.borderDefault,
marginTop: 1,
marginBottom: 1,
},
});
2 changes: 0 additions & 2 deletions ui/components/app/snaps/snap-ui-renderer/components/heading.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,5 @@ export const heading: UIComponentFactory<Heading> = ({ element }) => ({
props: {
variant: TextVariant.headingSm,
overflowWrap: OverflowWrap.Anywhere,
marginTop: 1,
marginBottom: 1,
},
});
2 changes: 2 additions & 0 deletions ui/components/app/snaps/snap-ui-renderer/components/row.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ export const row: UIComponentFactory<Row> = ({ element, ...params }) => ({
// We do this to cause an overhang with certain confirmation row variants
marginLeft: '-8px',
marginRight: '-8px',
marginTop: '0px',
marginBottom: '0px',
},
},
});
27 changes: 3 additions & 24 deletions ui/components/app/snaps/snap-ui-renderer/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@

&__spinner {
width: 30px;
margin-top: 4px;
margin-bottom: 4px;
}

&__divider {
Expand All @@ -16,29 +14,10 @@

&__panel {
height: 100%;
gap: 8px;
}

&__content > *:first-child {
margin-top: 0;
}

&__content > &__panel > *:first-child {
margin-top: 0;
}

&__content > &__form > *:first-child {
margin-top: 0;
}

&__content > *:last-child {
margin-bottom: 0;
}

&__content > &__panel > *:last-child {
margin-bottom: 0;
}

&__content > &__form > *:last-child {
margin-bottom: 0;
&__content > &__panel:has(.snap-ui-renderer__panel) {
gap: 16px;
}
}