Skip to content
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

refactor(app): Update protocol page colors to helix designs #14534

Merged
merged 10 commits into from
Feb 21, 2024
Merged

refactor(app): Update protocol page colors to helix designs #14534

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
f847576
update run summary colors
mjhuff Feb 21, 2024
d19e43c
update ProtocolList hover state
mjhuff Feb 21, 2024
743c24b
update protocol setup colors
mjhuff Feb 21, 2024
595a04b
update protocoldetail page colors
mjhuff Feb 21, 2024
7592191
update protocols page colors
mjhuff Feb 21, 2024
fcb5847
update drop tip unselected border states
mjhuff Feb 21, 2024
e6645f9
mel feedback
mjhuff Feb 21, 2024
46243ba
update toggle states
mjhuff Feb 21, 2024
3acc39c
update liquid card item border to grey30 on hover
mjhuff Feb 21, 2024
f5e7c36
test fix
mjhuff Feb 21, 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: 1 addition & 1 deletion app/src/organisms/ProtocolDetails/ProtocolLiquidsDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ export const ProtocolLiquidsDetails = (
flexDirection={DIRECTION_COLUMN}
>
<Icon
color={COLORS.grey30}
color={COLORS.grey50}
alignSelf={ALIGN_CENTER}
size="1.25rem"
name="ot-alert"
Expand Down
4 changes: 2 additions & 2 deletions app/src/organisms/ProtocolDetails/RobotConfigurationDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ export const RobotConfigurationDetails = (
moduleType={getModuleType(module.params.model)}
marginRight={SPACING.spacing4}
alignSelf={ALIGN_CENTER}
color={COLORS.grey60}
color={COLORS.grey50}
height={SIZE_1}
minWidth={SIZE_1}
minHeight={SIZE_1}
Expand Down Expand Up @@ -208,7 +208,7 @@ export const RobotConfigurationDetailsItem = (
flex="0 0 auto"
fontWeight={TYPOGRAPHY.fontWeightSemiBold}
marginRight={SPACING.spacing16}
color={COLORS.grey50}
color={COLORS.grey60}
textTransform={TYPOGRAPHY.textTransformCapitalize}
width="4.625rem"
>
Expand Down
12 changes: 6 additions & 6 deletions app/src/organisms/ProtocolDetails/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -425,7 +425,7 @@ export function ProtocolDetails(
flexDirection={DIRECTION_COLUMN}
data-testid="ProtocolDetails_creationMethod"
>
<StyledText as="h6" color={COLORS.grey50}>
<StyledText as="h6" color={COLORS.grey60}>
{t('creation_method')}
</StyledText>
<StyledText as="p">
Expand All @@ -438,7 +438,7 @@ export function ProtocolDetails(
flexDirection={DIRECTION_COLUMN}
data-testid="ProtocolDetails_lastUpdated"
>
<StyledText as="h6" color={COLORS.grey50}>
<StyledText as="h6" color={COLORS.grey60}>
{t('last_updated')}
</StyledText>
<StyledText as="p">
Expand All @@ -451,7 +451,7 @@ export function ProtocolDetails(
flexDirection={DIRECTION_COLUMN}
data-testid="ProtocolDetails_lastAnalyzed"
>
<StyledText as="h6" color={COLORS.grey50}>
<StyledText as="h6" color={COLORS.grey60}>
{t('last_analyzed')}
</StyledText>
<StyledText as="p">
Expand Down Expand Up @@ -481,7 +481,7 @@ export function ProtocolDetails(
flexDirection={DIRECTION_COLUMN}
data-testid="ProtocolDetails_author"
>
<StyledText as="h6" color={COLORS.grey50}>
<StyledText as="h6" color={COLORS.grey60}>
{t('org_or_author')}
</StyledText>
<StyledText
Expand All @@ -498,7 +498,7 @@ export function ProtocolDetails(
flexDirection={DIRECTION_COLUMN}
data-testid="ProtocolDetails_description"
>
<StyledText as="h6" color={COLORS.grey50}>
<StyledText as="h6" color={COLORS.grey60}>
{t('description')}
</StyledText>
{analysisStatus === 'loading' ? (
Expand Down Expand Up @@ -567,7 +567,7 @@ export function ProtocolDetails(
color={
analysisStatus !== 'complete'
? COLORS.grey40
: COLORS.grey50
: COLORS.grey60
}
/>
</Btn>
Expand Down
22 changes: 18 additions & 4 deletions app/src/organisms/ProtocolsLanding/ProtocolCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,8 +168,22 @@ function AnalysisInfo(props: AnalysisInfoProps): JSX.Element {
>
{
{
missing: <Icon name="ot-spinner" spin size={SIZE_3} />,
loading: <Icon name="ot-spinner" spin size={SIZE_3} />,
missing: (
<Icon
name="ot-spinner"
color={COLORS.grey60}
spin
size={SIZE_3}
/>
),
loading: (
<Icon
name="ot-spinner"
color={COLORS.grey60}
spin
size={SIZE_3}
/>
),
error: <Box size="6rem" backgroundColor={COLORS.grey30} />,
stale: <Box size="6rem" backgroundColor={COLORS.grey30} />,
complete:
Expand Down Expand Up @@ -208,7 +222,7 @@ function AnalysisInfo(props: AnalysisInfoProps): JSX.Element {
</Flex>
{/* data section */}
{analysisStatus === 'loading' ? (
<StyledText as="p" flex="1" color={COLORS.grey50}>
<StyledText as="p" flex="1" color={COLORS.grey60}>
{t('loading_data')}
</StyledText>
) : (
Expand Down Expand Up @@ -303,7 +317,7 @@ function AnalysisInfo(props: AnalysisInfoProps): JSX.Element {
justifyContent={JUSTIFY_FLEX_END}
data-testid={`ProtocolCard_date_${protocolDisplayName}`}
>
<StyledText as="label" color={COLORS.grey50}>
<StyledText as="label" color={COLORS.grey60}>
{`${t('updated')} ${format(
new Date(modified),
'M/d/yy HH:mm'
Expand Down
4 changes: 2 additions & 2 deletions app/src/organisms/ProtocolsLanding/ProtocolList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const SORT_BY_BUTTON_STYLE = css`
background-color: ${COLORS.transparent};
cursor: pointer;
&:hover {
background-color: ${COLORS.grey60};
background-color: ${COLORS.grey30};
}
&:active,
&:focus {
Expand Down Expand Up @@ -161,7 +161,7 @@ export function ProtocolList(props: ProtocolListProps): JSX.Element | null {
<StyledText
as="p"
fontWeight={TYPOGRAPHY.fontWeightSemiBold}
color={COLORS.grey50}
color={COLORS.grey60}
>
{t('shared:sort_by')}
</StyledText>
Expand Down
12 changes: 4 additions & 8 deletions app/src/organisms/RunPreview/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,9 +95,8 @@ export const RunPreviewComponent = (
>
{(command, index) => {
const isCurrent = index === currentRunCommandIndex
const borderColor = isCurrent ? COLORS.blue50 : COLORS.transparent
const backgroundColor = isCurrent ? COLORS.blue30 : COLORS.grey10
const contentColor = isCurrent ? COLORS.blue60 : COLORS.grey50
const backgroundColor = isCurrent ? COLORS.blue30 : COLORS.grey20
const iconColor = isCurrent ? COLORS.blue60 : COLORS.grey50
return (
<Flex
key={command.id}
Expand All @@ -114,9 +113,6 @@ export const RunPreviewComponent = (
flexDirection={DIRECTION_COLUMN}
gridGap={SPACING.spacing4}
width="100%"
border={`solid 1px ${
index === jumpedIndex ? COLORS.purple40 : borderColor
}`}
backgroundColor={
index === jumpedIndex ? '#F5E3FF' : backgroundColor
}
Expand All @@ -129,12 +125,12 @@ export const RunPreviewComponent = (
`}
>
<Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing8}>
<CommandIcon command={command} color={contentColor} />
<CommandIcon command={command} color={iconColor} />
<CommandText
command={command}
robotSideAnalysis={robotSideAnalysis}
robotType={robotType}
color={contentColor}
color={COLORS.black90}
/>
</Flex>
</Flex>
Expand Down
8 changes: 6 additions & 2 deletions app/src/organisms/RunProgressMeter/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,11 @@ export function RunProgressMeter(props: RunProgressMeterProps): JSX.Element {
textTransform={TYPOGRAPHY.textTransformCapitalize}
onClick={onDownloadClick}
>
<Flex gridGap={SPACING.spacing2} alignItems={ALIGN_CENTER}>
<Flex
gridGap={SPACING.spacing2}
alignItems={ALIGN_CENTER}
color={COLORS.grey60}
>
<Icon name="download" size={SIZE_1} />
{t('download_run_log')}
</Flex>
Expand Down Expand Up @@ -259,7 +263,7 @@ export function RunProgressMeter(props: RunProgressMeterProps): JSX.Element {
`}
innerStyles={css`
height: 0.375rem;
background-color: ${COLORS.grey50};
background-color: ${COLORS.grey60};
border-radius: ${BORDERS.radiusSoftCorners};
`}
>
Expand Down
6 changes: 3 additions & 3 deletions components/src/atoms/buttons/SecondaryButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export const SecondaryButton = styled.button.withConfig<SecondaryButtonProps>({
})<SecondaryButtonProps>`
appearance: none;
cursor: pointer;
color: ${props => (props.isDangerous ? COLORS.red60 : COLORS.blue50)};
color: ${props => (props.isDangerous ? COLORS.red50 : COLORS.blue50)};
border: ${BORDERS.lineBorder};
border-color: ${props => (props.isDangerous ? COLORS.red50 : 'initial')};
border-radius: ${BORDERS.radiusSoftCorners};
Expand All @@ -28,7 +28,7 @@ export const SecondaryButton = styled.button.withConfig<SecondaryButtonProps>({
}

&:hover {
color: ${props => (props.isDangerous ? COLORS.red60 : COLORS.blue60)};
color: ${props => (props.isDangerous ? COLORS.red50 : COLORS.blue60)};
border-color: ${props =>
props.isDangerous ? COLORS.red50 : COLORS.blue55};
box-shadow: 0 0 0;
Expand All @@ -45,7 +45,7 @@ export const SecondaryButton = styled.button.withConfig<SecondaryButtonProps>({
box-shadow: none;
color: ${props => (props.isDangerous ? COLORS.red60 : COLORS.blue55)};
border-color: ${props =>
props.isDangerous ? COLORS.red50 : COLORS.blue55};
props.isDangerous ? COLORS.red60 : COLORS.blue55};
}

&:disabled,
Expand Down
Loading