Skip to content

Commit 5e0fca2

Browse files
cannarockscannarocks
authored
Merge pull request #398 from AppQuality/UN-412
fix(bugs): Style info pills, filters and details descriptions
2 parents eb114b9 + f857bbf commit 5e0fca2

File tree

10 files changed

+65
-45
lines changed

10 files changed

+65
-45
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"version": "1.4.0",
44
"private": true,
55
"dependencies": {
6-
"@appquality/unguess-design-system": "2.12.57",
6+
"@appquality/unguess-design-system": "2.12.59",
77
"@headwayapp/react-widget": "^0.0.4",
88
"@reduxjs/toolkit": "^1.8.0",
99
"@rtk-query/codegen-openapi": "^1.0.0-alpha.1",

‎src/common/components/pills/IconPill.tsx‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,54 @@
11
import { Span, Tag } from '@appquality/unguess-design-system';
2-
import { theme as globalTheme } from 'src/app/theme';
32
import { ReactNode } from 'react';
43
import styled from 'styled-components';
54

5+
const StyledAvatar = styled(Tag.Avatar)``;
6+
67
const StyledTag = styled(Tag)`
78
pointer-events: none;
89
padding: 0;
910
margin-right: ${({ theme }) => theme.space.xs};
11+
${StyledAvatar} {
12+
margin-left: 0;
13+
margin-right: ${({ theme }) => theme.space.xxs};
14+
}
1015
`;
1116

1217
const StyledChild = styled(Span)`
1318
color: ${({ theme }) => theme.palette.grey[700]};
1419
`;
1520

16-
const StyledAvatar = styled(StyledTag.Avatar)`
17-
margin-left: 0 !important;
18-
margin-right: ${({ theme }) => theme.space.xxs} !important;
19-
`;
20-
2121
const PillContainer = styled.div`
2222
font-size: ${({ theme }) => theme.fontSizes.sm};
2323
margin-right: ${({ theme }) => theme.space.xs};
2424
display: flex;
2525
align-items: center;
2626
`;
27-
interface PillProps extends React.HTMLAttributes<HTMLDivElement> {
28-
title: string;
27+
28+
interface PillProps {
29+
title: ReactNode;
30+
id?: string;
31+
className?: string;
32+
style?: React.CSSProperties;
2933
background?: string;
3034
color?: string;
3135
icon?: ReactNode;
3236
children?: ReactNode;
37+
size?: Parameters<typeof Tag>[0]['size'];
3338
}
3439

3540
export const IconPill = ({
3641
background,
37-
color,
3842
icon,
3943
title,
4044
children,
45+
size,
4146
...props
4247
}: PillProps) => (
4348
<PillContainer {...props}>
44-
<StyledTag isPill hue={background ?? 'white'} size="large">
49+
<StyledTag isPill hue={background ?? 'white'} size={size || 'large'}>
4550
{icon && <StyledAvatar>{icon}</StyledAvatar>}
46-
<Span isBold style={{ color: color ?? globalTheme.palette.grey[700] }}>
47-
{title}
48-
</Span>
51+
{title}
4952
</StyledTag>
5053
{children && <StyledChild>{children}</StyledChild>}
5154
</PillContainer>

‎src/pages/Bugs/Detail/Description.tsx‎

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { MD } from '@appquality/unguess-design-system';
22
import { Bug } from 'src/features/api';
33
import styled from 'styled-components';
4-
import { theme as globalTheme } from 'src/app/theme';
54
import { useTranslation } from 'react-i18next';
65

76
const Container = styled.div`
@@ -11,6 +10,18 @@ const Container = styled.div`
1110
white-space: pre-wrap;
1211
`;
1312

13+
const Label = styled(({ children, className, style }) => (
14+
<MD className={className} style={style} isBold>
15+
{children}
16+
</MD>
17+
))`
18+
margin: ${({ theme }) => `${theme.space.sm} 0 ${theme.space.xs} 0 `};
19+
`;
20+
21+
const Text = styled(MD)`
22+
color: ${({ theme }) => theme.palette.grey[700]};
23+
`;
24+
1425
export default ({
1526
bug,
1627
}: {
@@ -25,24 +36,18 @@ export default ({
2536

2637
return (
2738
<Container>
28-
<MD isBold style={{ marginBottom: globalTheme.space.sm }}>
39+
<Label style={{ marginTop: 0 }}>
2940
{t('__BUGS_PAGE_BUG_DETAIL_DESCRIPTION_LABEL')}
30-
</MD>
31-
<MD>{bug.step_by_step}</MD>
32-
<MD isBold style={{ margin: `${globalTheme.space.sm} 0` }}>
33-
{t('__BUGS_PAGE_BUG_DETAIL_EXPECTED_RESULT_LABEL')}
34-
</MD>
35-
<MD>{bug.expected_result}</MD>
36-
<MD isBold style={{ margin: `${globalTheme.space.sm} 0` }}>
37-
{t('__BUGS_PAGE_BUG_DETAIL_CURRENT_RESULT_LABEL')}
38-
</MD>
39-
<MD>{bug.current_result}</MD>
41+
</Label>
42+
<Text>{bug.step_by_step}</Text>
43+
<Label>{t('__BUGS_PAGE_BUG_DETAIL_EXPECTED_RESULT_LABEL')}</Label>
44+
<Text>{bug.expected_result}</Text>
45+
<Label>{t('__BUGS_PAGE_BUG_DETAIL_CURRENT_RESULT_LABEL')}</Label>
46+
<Text>{bug.current_result}</Text>
4047
{bug.note && (
4148
<>
42-
<MD isBold style={{ margin: `${globalTheme.space.sm} 0` }}>
43-
{t('__BUGS_PAGE_BUG_DETAIL_ADDITIONAL_NOTES_LABEL')}
44-
</MD>
45-
<MD>{bug.note}</MD>
49+
<Label>{t('__BUGS_PAGE_BUG_DETAIL_ADDITIONAL_NOTES_LABEL')}</Label>
50+
<Text>{bug.note}</Text>
4651
</>
4752
)}
4853
</Container>

‎src/pages/Bugs/Detail/Meta.tsx‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { LG, MD, SM } from '@appquality/unguess-design-system';
1+
import { LG, MD, SM, Span } from '@appquality/unguess-design-system';
22
import { ReactComponent as OSIcon } from 'src/assets/icons/environment-icon.svg';
33
import { ReactComponent as SmartphoneIcon } from 'src/assets/icons/pill-icon-smartphone.svg';
44
import { ReactComponent as TabletIcon } from 'src/assets/icons/pill-icon-tablet.svg';
@@ -21,7 +21,12 @@ const BugInfo = styled.div`
2121
justify-content: flex-start;
2222
align-items: center;
2323
flex-wrap: wrap;
24-
margin-top: ${({ theme }) => theme.space.sm};
24+
margin: ${({ theme }) => theme.space.xxs} 0;
25+
`;
26+
27+
const InfoTitle = styled(Span)`
28+
color: ${({ theme }) => theme.palette.grey[600]};
29+
font-weight: ${({ theme }) => theme.fontWeights.regular};
2530
`;
2631

2732
function getDeviceIcon(device: string) {
@@ -71,22 +76,26 @@ export default ({
7176
style={{
7277
color: globalTheme.palette.grey[600],
7378
textTransform: 'capitalize',
79+
fontWeight: globalTheme.fontWeights.regular,
7480
}}
7581
>
7682
{bug.type.name}
7783
</SM>
78-
<Pipe />
84+
<Pipe style={{ height: '20px' }} />
7985
<IconPill
80-
title={bug.device.type}
86+
size="medium"
87+
title={<InfoTitle>{bug.device.type}</InfoTitle>}
8188
icon={getDeviceIcon(bug.device.type)}
8289
style={{ textTransform: 'capitalize' }}
8390
/>
8491
<IconPill
85-
title={`${
86-
bug.device.type === 'desktop'
87-
? bug.device.desktop_type
88-
: `${bug.device.manufacturer} ${bug.device.model}`
89-
}`}
92+
title={
93+
<InfoTitle>
94+
{bug.device.type === 'desktop'
95+
? bug.device.desktop_type
96+
: `${bug.device.manufacturer} ${bug.device.model}`}
97+
</InfoTitle>
98+
}
9099
icon={<OSIcon />}
91100
style={{ textTransform: 'capitalize' }}
92101
/>

‎src/pages/Bugs/Filters/ReadFilter.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const ReadFilter = () => {
3939
}}
4040
>
4141
<Field>
42-
<Select isPrimary={data.read.selected === 'unread'}>
42+
<Select isCompact isPrimary={data.read.selected === 'unread'}>
4343
{data.read.selected === 'unread'
4444
? t('__BUGS_READ_FILTER_ITEM_UNREAD')
4545
: t('__BUGS_READ_FILTER_ITEM_PLACEHOLDER')}

‎src/pages/Bugs/Filters/SearchFilter.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ export const SearchFilter = () => {
4343
return (
4444
<div style={{ maxWidth: '180px' }}>
4545
<MediaInput
46+
isCompact
4647
end={
4748
data.search ? (
4849
<ClickableXIcon onClick={() => setSearchInput('')} />

‎src/pages/Bugs/Filters/SeverityFilter.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export const SeverityFilter = () => {
2222
return (
2323
<div style={{ maxWidth: '150px' }}>
2424
<CounterMultiselect
25+
isCompact
2526
i18n={{
2627
counterText: (count) => t(`Severity ({{count}})`, { count }),
2728
noItems: t('__BUGS_SEVERITY_FILTER_ITEM_NO_ITEMS'),

‎src/pages/Bugs/Filters/TypeFilter.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export const TypeFilter = () => {
2222
return (
2323
<div style={{ maxWidth: '165px' }}>
2424
<CounterMultiselect
25+
isCompact
2526
i18n={{
2627
counterText: (count) => t(`Typology ({{count}})`, { count }),
2728
noItems: t('__BUGS_TYPES_FILTER_ITEM_NO_ITEMS'),

‎src/pages/Bugs/Filters/UniqueFilter.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const UniqueFilter = () => {
3939
}}
4040
>
4141
<Field>
42-
<Select isPrimary={data.unique.selected === 'unique'}>
42+
<Select isCompact isPrimary={data.unique.selected === 'unique'}>
4343
{data.unique.selected === 'unique'
4444
? t('__BUGS_UNIQUE_FILTER_ITEM_UNIQUE')
4545
: t('__BUGS_UNIQUE_FILTER_ITEM_PLACEHOLDER')}

‎yarn.lock‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,10 +47,10 @@
4747
ajv-draft-04 "^1.0.0"
4848
call-me-maybe "^1.0.1"
4949

50-
"@appquality/unguess-design-system@2.12.57":
51-
version "2.12.57"
52-
resolved "https://registry.yarnpkg.com/@appquality/unguess-design-system/-/unguess-design-system-2.12.57.tgz#260d16c0199888a6e8f5b93bd087d8ae21914fac"
53-
integrity sha512-0xUWLxdYTTdH1gFKndXoOyyR+Mo42KsegaI2fzF0Tvsz6csq6ygsLbb7r5ckqsl3TV+IaiXiTCdEiG1sekLecQ==
50+
"@appquality/unguess-design-system@2.12.59":
51+
version "2.12.59"
52+
resolved "https://registry.yarnpkg.com/@appquality/unguess-design-system/-/unguess-design-system-2.12.59.tgz#d18ac7665d00062d1ee09d2806e62dec37b5a8ca"
53+
integrity sha512-ol4xGf+00yEKihYBtrQE1SKQLTqa5VQSsjD/FX4cP5Dijltzz5cQZYjQzmKJMuYetjPgFEn5GXNZPiVx8F56eA==
5454
dependencies:
5555
"@nivo/bar" "^0.80.0"
5656
"@nivo/bullet" "^0.80.0"

0 commit comments

Comments
 (0)