Skip to content

Commit 7d4471d

Browse files
kojikoji
authored
feat(app): CSS Modules-apply for RobotSettings Dashboard (#18778)
* feat(app): CSS Modules-apply for RobotSettings Dashboard
1 parent 51ee10a commit 7d4471d

File tree

5 files changed

+184
-155
lines changed

5 files changed

+184
-155
lines changed

‎app/src/organisms/ODD/RobotSettingsDashboard/RobotSettingButton.tsx

Lines changed: 0 additions & 104 deletions
This file was deleted.

‎app/src/organisms/ODD/RobotSettingsDashboard/RobotSettingButton/index.tsx

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { Icon, LegacyStyledText } from '@opentrons/components'
2+
3+
import styles from './robotsettingbutton.module.css'
4+
5+
import type { MouseEventHandler, ReactNode } from 'react'
6+
import type { IconName } from '@opentrons/components'
7+
8+
interface RobotSettingButtonProps {
9+
settingName: string
10+
onClick: MouseEventHandler
11+
iconName?: IconName
12+
settingInfo?: string
13+
rightElement?: ReactNode
14+
dataTestId?: string
15+
}
16+
17+
export function RobotSettingButton({
18+
settingName,
19+
iconName,
20+
onClick,
21+
settingInfo,
22+
rightElement,
23+
dataTestId,
24+
}: RobotSettingButtonProps): JSX.Element {
25+
return (
26+
<button
27+
className={styles.setting_button}
28+
onClick={onClick}
29+
data-testid={dataTestId}
30+
>
31+
<div className={styles.content_wrapper}>
32+
{iconName != null ? (
33+
<Icon name={iconName} className={styles.icon_large} color="#171717" />
34+
) : null}
35+
<div className={styles.text_content}>
36+
<LegacyStyledText as="h4" className={styles.setting_name}>
37+
{settingName}
38+
</LegacyStyledText>
39+
{settingInfo != null ? (
40+
<LegacyStyledText as="h4" className={styles.setting_info}>
41+
{settingInfo}
42+
</LegacyStyledText>
43+
) : null}
44+
</div>
45+
</div>
46+
{rightElement != null ? (
47+
rightElement
48+
) : (
49+
<div className={styles.right_element_wrapper}>
50+
<Icon name="more" className={styles.icon_large} color="#171717" />
51+
</div>
52+
)}
53+
</button>
54+
)
55+
}

‎app/src/organisms/ODD/RobotSettingsDashboard/RobotSettingButton/robotsettingbutton.module.css

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
.setting_button {
2+
display: flex;
3+
width: 100%;
4+
flex-direction: row;
5+
align-items: center;
6+
justify-content: space-between;
7+
padding: var(--spacing-20) var(--spacing-24);
8+
border-radius: var(--border-radius-16);
9+
margin-bottom: var(--spacing-8);
10+
background-color: var(--grey-35);
11+
}
12+
13+
.setting_button:active {
14+
background-color: var(--grey-50);
15+
}
16+
17+
.content_wrapper {
18+
display: flex;
19+
width: 100%;
20+
flex-direction: row;
21+
align-items: center;
22+
gap: var(--spacing-24);
23+
white-space: nowrap;
24+
}
25+
26+
.text_content {
27+
display: flex;
28+
flex-direction: column;
29+
align-items: flex-start;
30+
justify-content: center;
31+
gap: var(--spacing-2);
32+
}
33+
34+
.setting_name {
35+
font-weight: 600;
36+
}
37+
38+
.setting_info {
39+
color: var(--grey-60);
40+
font-weight: 400;
41+
text-align: left;
42+
}
43+
44+
.right_element_wrapper {
45+
display: flex;
46+
align-items: center;
47+
gap: var(--spacing-40);
48+
}
49+
50+
.icon_large {
51+
width: 3rem;
52+
height: 3rem;
53+
}

‎app/src/pages/ODD/RobotSettingsDashboard/RobotSettingsList.tsx

Lines changed: 22 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,9 @@ import { useDispatch, useSelector } from 'react-redux'
33
import { Link } from 'react-router-dom'
44

55
import {
6-
ALIGN_CENTER,
7-
ALIGN_FLEX_START,
8-
BORDERS,
9-
Btn,
10-
COLORS,
11-
DIRECTION_COLUMN,
12-
DIRECTION_ROW,
13-
DISPLAY_FLEX,
14-
Flex,
156
Icon,
167
InlineNotification,
17-
JUSTIFY_CENTER,
18-
JUSTIFY_SPACE_BETWEEN,
198
LegacyStyledText,
20-
SPACING,
21-
TYPOGRAPHY,
229
} from '@opentrons/components'
2310

2411
import { LANGUAGES, US_ENGLISH_DISPLAY_NAME } from '/app/i18n'
@@ -43,6 +30,8 @@ import { useErrorRecoverySettingsToggle } from '/app/resources/errorRecovery'
4330
import { useNetworkConnection } from '/app/resources/networking'
4431
import { useLEDLights } from '/app/resources/robot-settings'
4532

33+
import styles from './robotsettingslist.module.css'
34+
4635
import type { SetSettingOption } from '/app/organisms/ODD/RobotSettingsDashboard'
4736
import type { Dispatch, State } from '/app/redux/types'
4837

@@ -88,9 +77,9 @@ export function RobotSettingsList(props: RobotSettingsListProps): JSX.Element {
8877
const currentLanguageOption = LANGUAGES.find(lng => lng.value === appLanguage)
8978

9079
return (
91-
<Flex flexDirection={DIRECTION_COLUMN}>
80+
<div className={styles.main_content}>
9281
<Navigation />
93-
<Flex paddingX={SPACING.spacing40} flexDirection={DIRECTION_COLUMN}>
82+
<div className={styles.settings_content}>
9483
<RobotSettingButton
9584
settingName={t('network_settings')}
9685
dataTestId="RobotSettingButton_network_settings"
@@ -123,7 +112,7 @@ export function RobotSettingsList(props: RobotSettingsListProps): JSX.Element {
123112
}}
124113
iconName="update"
125114
rightElement={
126-
<Flex gridGap={SPACING.spacing40} alignItems={ALIGN_CENTER}>
115+
<div className={styles.right_element_with_icon}>
127116
{isUpdateAvailable ? (
128117
<InlineNotification
129118
type="alert"
@@ -134,8 +123,8 @@ export function RobotSettingsList(props: RobotSettingsListProps): JSX.Element {
134123
hug={true}
135124
/>
136125
) : null}
137-
<Icon name="more" size="3rem" color={COLORS.black90} />
138-
</Flex>
126+
<Icon name="more" className={styles.icon_large} color="#171717" />
127+
</div>
139128
}
140129
/>
141130
<RobotSettingButton
@@ -228,8 +217,8 @@ export function RobotSettingsList(props: RobotSettingsListProps): JSX.Element {
228217
onClick={() => dispatch(toggleDevtools())}
229218
/>
230219
{devToolsOn ? <FeatureFlags /> : null}
231-
</Flex>
232-
</Flex>
220+
</div>
221+
</div>
233222
)
234223
}
235224

@@ -240,45 +229,27 @@ function FeatureFlags(): JSX.Element {
240229
return (
241230
<>
242231
{DEV_INTERNAL_FLAGS.map(flag => (
243-
<Btn
232+
<button
244233
key={flag}
245-
width="100%"
246-
marginBottom={SPACING.spacing8}
247-
backgroundColor={COLORS.grey35}
248-
padding={`${SPACING.spacing20} ${SPACING.spacing24}`}
249-
borderRadius={BORDERS.borderRadius16}
250-
display={DISPLAY_FLEX}
251-
flexDirection={DIRECTION_ROW}
252-
gridGap={SPACING.spacing24}
253-
justifyContent={JUSTIFY_SPACE_BETWEEN}
254-
alignItems={ALIGN_CENTER}
234+
className={styles.feature_flag_button}
255235
onClick={() => {
256236
dispatch(toggleDevInternalFlag(flag))
257237
}}
258238
>
259-
<Flex
260-
flexDirection={DIRECTION_ROW}
261-
gridGap={SPACING.spacing24}
262-
alignItems={ALIGN_CENTER}
263-
>
264-
<Icon name="alert-circle" size="3rem" color={COLORS.black90} />
265-
<Flex
266-
flexDirection={DIRECTION_COLUMN}
267-
gridGap={SPACING.spacing2}
268-
alignItems={ALIGN_FLEX_START}
269-
justifyContent={JUSTIFY_CENTER}
270-
width="46.25rem"
271-
>
272-
<LegacyStyledText
273-
as="h4"
274-
fontWeight={TYPOGRAPHY.fontWeightSemiBold}
275-
>
239+
<div className={styles.feature_flag_content}>
240+
<Icon
241+
name="alert-circle"
242+
className={styles.icon_large}
243+
color="#171717"
244+
/>
245+
<div className={styles.feature_flag_text_content}>
246+
<LegacyStyledText as="h4" className={styles.feature_flag_title}>
276247
{t(`__dev_internal__${flag}`)}
277248
</LegacyStyledText>
278-
</Flex>
279-
</Flex>
249+
</div>
250+
</div>
280251
<OnOffToggle isOn={Boolean(devInternalFlags?.[flag])} />
281-
</Btn>
252+
</button>
282253
))}
283254
</>
284255
)

0 commit comments

Comments
 (0)