Skip to content

Commit 9fac7b3

Browse files
aracho1aracho1
committed
update palette definition names
1 parent 564a229 commit 9fac7b3

File tree

3 files changed

+33
-41
lines changed

3 files changed

+33
-41
lines changed

‎dotcom-rendering/src/components/ContributorFollowBlock.importable.tsx‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -39,26 +39,26 @@ const followButtonStyles = (isFollowing: boolean) => css`
3939
border-radius: ${space[5]}px;
4040
border: 1px solid
4141
${isFollowing
42-
? palette('--follow-button-border-following')
43-
: palette('--follow-button-border')};
42+
? palette('--contributor-follow-button-border-following')
43+
: palette('--contributor-follow-button-border')};
4444
background: ${isFollowing
4545
? 'transparent'
46-
: palette('--follow-accent-color')};
46+
: palette('--contributor-follow-accent-color')};
4747
color: ${isFollowing
48-
? palette('--follow-button-text')
49-
: palette('--follow-button-text-not-following')};
48+
? palette('--contributor-follow-button-text')
49+
: palette('--contributor-follow-button-text-not-following')};
5050
font-weight: 700;
5151
cursor: pointer;
5252
5353
svg {
5454
width: 24px;
5555
height: 24px;
5656
fill: ${isFollowing
57-
? palette('--follow-button-text')
58-
: palette('--follow-button-text-not-following')};
57+
? palette('--contributor-follow-button-text')
58+
: palette('--contributor-follow-button-text-not-following')};
5959
stroke: ${isFollowing
60-
? palette('--follow-button-text')
61-
: palette('--follow-button-text-not-following')};
60+
? palette('--contributor-follow-button-text')
61+
: palette('--contributor-follow-button-text-not-following')};
6262
}
6363
`;
6464

@@ -81,7 +81,7 @@ const FollowButton = ({ isFollowing, onClickHandler }: FollowButtonProps) => {
8181

8282
// -- notifications --
8383

84-
const notificationsStatusStyles = css`
84+
const notificationAlertStyles = css`
8585
${textSans15}
8686
color: ${palette('--follow-text')};
8787
background: none;
@@ -94,7 +94,7 @@ const notificationsStatusStyles = css`
9494
width: 100%;
9595
`;
9696

97-
const notificationsStatusContainerStyles = css`
97+
const notificationAlertRowStyles = css`
9898
display: flex;
9999
column-gap: ${space[6]}px;
100100
justify-content: space-between;
@@ -110,7 +110,7 @@ const notificationIconStyles = css`
110110
margin-top: -${space[1] - 1}px;
111111
}
112112
`;
113-
const notificationIconTextWrapperStyles = css`
113+
const notificationLabelStyles = css`
114114
display: flex;
115115
align-items: flex-start;
116116
${textSans12}
@@ -127,15 +127,15 @@ const toggleSwitchContainerStyles = css`
127127
}
128128
`;
129129

130-
const NotificationsStatus = ({
130+
const NotificationAlert = ({
131131
isFollowing,
132132
onClickHandler,
133133
displayName,
134134
}: FollowButtonProps & { displayName?: string }) => {
135135
return (
136-
<div css={notificationsStatusStyles}>
137-
<div css={notificationsStatusContainerStyles}>
138-
<div css={notificationIconTextWrapperStyles}>
136+
<div css={notificationAlertStyles}>
137+
<div css={notificationAlertRowStyles}>
138+
<div css={notificationLabelStyles}>
139139
<div css={notificationIconStyles}>
140140
<SvgNotificationsOn size="small" />
141141
</div>
@@ -155,22 +155,22 @@ const NotificationsStatus = ({
155155
);
156156
};
157157

158-
const containerStyles = css`
158+
const followBlockStyles = css`
159159
display: flex;
160160
flex-direction: column;
161161
width: 100%;
162162
align-items: flex-start;
163163
`;
164164

165-
type ContainerProps = {
165+
type FollowBlockProps = {
166166
contributorId: string;
167167
displayName: string;
168168
};
169169

170170
export const ContributorFollowBlock = ({
171171
contributorId,
172172
displayName,
173-
}: ContainerProps) => {
173+
}: FollowBlockProps) => {
174174
const [isFollowingNotifications, setIsFollowingNotifications] = useState<
175175
boolean | undefined
176176
>(undefined);
@@ -317,7 +317,7 @@ export const ContributorFollowBlock = ({
317317
}
318318

319319
return (
320-
<div css={containerStyles}>
320+
<div css={followBlockStyles}>
321321
<FollowButton
322322
isFollowing={isFollowingContributor ?? false}
323323
onClickHandler={
@@ -329,7 +329,7 @@ export const ContributorFollowBlock = ({
329329
{isFollowingContributor && (
330330
<div>
331331
<StraightLines count={1} />
332-
<NotificationsStatus
332+
<NotificationAlert
333333
isFollowing={isFollowingNotifications ?? false}
334334
onClickHandler={
335335
!isUndefined(isFollowingNotifications)

‎dotcom-rendering/src/components/ContributorFollowBlockComponent.importable.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ type Props = {
1919
bio?: string;
2020
};
2121

22-
const containerStyles = css`
22+
const contributorBlockStyles = css`
2323
display: flex;
2424
flex-direction: column;
2525
padding: ${space[2]}px 0;
@@ -43,7 +43,7 @@ const avatarContainerStyles = css`
4343
}
4444
`;
4545

46-
const contentStyles = css`
46+
const nameAndBioStyles = css`
4747
display: flex;
4848
flex-direction: column;
4949
flex: 1;
@@ -52,15 +52,15 @@ const contentStyles = css`
5252

5353
const titleStyles = css`
5454
${headlineBold17};
55-
color: ${palette('--follow-accent-color')};
55+
color: ${palette('--contributor-follow-accent-color')};
5656
margin: 0 0 ${space[2]}px;
5757
`;
5858

5959
const bioStyles = css`
6060
${textEgyptian14};
6161
font-weight: 500;
6262
line-height: 1.3;
63-
color: ${palette('--follow-bio-text')};
63+
color: ${palette('--contributor-follow-bio-text')};
6464
margin: 0;
6565
6666
p {
@@ -104,7 +104,7 @@ export const ContributorFollowBlockComponent = ({
104104
const sanitizedBio = hasBio ? sanitise(bio, {}) : undefined;
105105

106106
return (
107-
<div css={containerStyles}>
107+
<div css={contributorBlockStyles}>
108108
<StraightLines count={4} />
109109
<div css={topRowStyles}>
110110
{!!avatarUrl && (
@@ -117,7 +117,7 @@ export const ContributorFollowBlockComponent = ({
117117
/>
118118
</div>
119119
)}
120-
<div css={contentStyles}>
120+
<div css={nameAndBioStyles}>
121121
<h3 css={titleStyles}>{displayName}</h3>
122122
{!!sanitizedBio && (
123123
<div

‎dotcom-rendering/src/paletteDeclarations.ts‎

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7078,31 +7078,27 @@ const paletteColours = {
70787078
light: () => sourcePalette.neutral[86],
70797079
dark: () => sourcePalette.neutral[20],
70807080
},
7081-
'--follow-accent-color': {
7081+
'--contributor-follow-accent-color': {
70827082
light: followIconFillLight,
70837083
dark: followIconFillLight,
70847084
},
7085-
'--follow-bio-text': {
7085+
'--contributor-follow-bio-text': {
70867086
light: () => sourcePalette.neutral[10],
70877087
dark: () => sourcePalette.neutral[86],
70887088
},
7089-
'--follow-bottom-border': {
7090-
light: () => sourcePalette.neutral[97],
7091-
dark: () => sourcePalette.neutral[97],
7092-
},
7093-
'--follow-button-border': {
7089+
'--contributor-follow-button-border': {
70947090
light: followIconFillLight,
70957091
dark: followIconFillDark,
70967092
},
7097-
'--follow-button-border-following': {
7093+
'--contributor-follow-button-border-following': {
70987094
light: () => sourcePalette.neutral[73],
70997095
dark: () => sourcePalette.neutral[73],
71007096
},
7101-
'--follow-button-text': {
7097+
'--contributor-follow-button-text': {
71027098
light: () => sourcePalette.neutral[7],
71037099
dark: () => sourcePalette.neutral[100],
71047100
},
7105-
'--follow-button-text-not-following': {
7101+
'--contributor-follow-button-text-not-following': {
71067102
light: () => sourcePalette.neutral[100],
71077103
dark: () => sourcePalette.neutral[100],
71087104
},
@@ -7114,10 +7110,6 @@ const paletteColours = {
71147110
light: followIconFillLight,
71157111
dark: followIconFillDark,
71167112
},
7117-
'--follow-icon-variant-fill': {
7118-
light: () => sourcePalette.neutral[10],
7119-
dark: () => sourcePalette.neutral[86],
7120-
},
71217113
'--follow-text': {
71227114
light: followTextLight,
71237115
dark: followTextDark,

0 commit comments

Comments
 (0)