Skip to content

Commit 00598cf

Browse files
brionmariobrionmario
committed
feat(react): enhance button styles with focus states and add isLoading prop to user profile components
1 parent 0622734 commit 00598cf

File tree

7 files changed

+85
-9
lines changed

7 files changed

+85
-9
lines changed

‎packages/javascript/src/theme/createTheme.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -142,15 +142,15 @@ const lightTheme: ThemeConfig = {
142142
const darkTheme: ThemeConfig = {
143143
colors: {
144144
action: {
145-
active: 'rgba(255, 255, 255, 0.70)',
146-
hover: 'rgba(255, 255, 255, 0.04)',
145+
active: '#1c1c1c',
146+
hover: '#1c1c1c',
147147
hoverOpacity: 0.04,
148-
selected: 'rgba(255, 255, 255, 0.08)',
148+
selected: '#1c1c1c',
149149
selectedOpacity: 0.08,
150150
disabled: 'rgba(255, 255, 255, 0.26)',
151151
disabledBackground: 'rgba(255, 255, 255, 0.12)',
152152
disabledOpacity: 0.38,
153-
focus: 'rgba(255, 255, 255, 0.12)',
153+
focus: '#1c1c1c',
154154
focusOpacity: 0.12,
155155
activatedOpacity: 0.12,
156156
},

‎packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ export interface BaseUserProfileProps {
7575
schemas?: Schema[];
7676
title?: string;
7777
error?: string | null;
78+
isLoading?: boolean;
7879
}
7980

8081
// Fields to skip based on schema.name
@@ -117,6 +118,7 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
117118
onUpdate,
118119
open = false,
119120
error = null,
121+
isLoading = false,
120122
}): ReactElement => {
121123
const {theme, colorScheme} = useTheme();
122124
const [editedUser, setEditedUser] = useState(flattenedProfile || profile);
@@ -524,7 +526,7 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
524526
<Button
525527
size="small"
526528
color="tertiary"
527-
variant="text"
529+
variant="icon"
528530
onClick={() => toggleFieldEdit(schema.name!)}
529531
title="Edit"
530532
className={styles.editButton}
@@ -603,6 +605,7 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
603605
name={getDisplayName()}
604606
size={80}
605607
alt={`${getDisplayName()}'s avatar`}
608+
isLoading={isLoading}
606609
/>
607610
</div>
608611
<div className={styles.infoContainer}>

‎packages/react/src/components/presentation/UserProfile/UserProfile.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export type UserProfileProps = Omit<BaseUserProfileProps, 'user' | 'profile' | '
5454
* ```
5555
*/
5656
const UserProfile: FC<UserProfileProps> = ({...rest}: UserProfileProps): ReactElement => {
57-
const {baseUrl} = useAsgardeo();
57+
const {baseUrl, isLoading} = useAsgardeo();
5858
const {profile, flattenedProfile, schemas, onUpdateProfile} = useUser();
5959
const {t} = useTranslation();
6060

‎packages/react/src/components/presentation/options/MicrosoftButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ const MicrosoftButton: FC<BaseSignInOptionProps & HTMLAttributes<HTMLButtonEleme
3535

3636
return (
3737
<Button
38+
{...rest}
3839
fullWidth
3940
type="button"
4041
color="secondary"
@@ -49,7 +50,6 @@ const MicrosoftButton: FC<BaseSignInOptionProps & HTMLAttributes<HTMLButtonEleme
4950
<path fill="#ffba08" d="M12 12h10v10H12z" />
5051
</svg>
5152
}
52-
{...rest}
5353
>
5454
{children ?? t('elements.buttons.microsoft')}
5555
</Button>

‎packages/react/src/components/presentation/options/SignInWithEthereumButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ const SignInWithEthereumButton: FC<BaseSignInOptionProps & HTMLAttributes<HTMLBu
3535

3636
return (
3737
<Button
38+
{...rest}
3839
fullWidth
3940
type="button"
4041
color="secondary"
@@ -48,7 +49,6 @@ const SignInWithEthereumButton: FC<BaseSignInOptionProps & HTMLAttributes<HTMLBu
4849
/>
4950
</svg>
5051
}
51-
{...rest}
5252
>
5353
{children ?? t('elements.buttons.ethereum')}
5454
</Button>

‎packages/react/src/components/presentation/options/SocialButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ const SocialLogin: FC<BaseSignInOptionProps & HTMLAttributes<HTMLButtonElement>>
3434
const {t} = useTranslation(preferences?.i18n);
3535
return (
3636
<Button
37+
{...rest}
3738
fullWidth
3839
type="button"
3940
color="secondary"
@@ -47,7 +48,6 @@ const SocialLogin: FC<BaseSignInOptionProps & HTMLAttributes<HTMLButtonElement>>
4748
/>
4849
</svg>
4950
}
50-
{...rest}
5151
>
5252
{t('elements.buttons.social', {connection: children as string})}
5353
</Button>

‎packages/react/src/components/primitives/Button/Button.styles.ts‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,10 @@ const useStyles = (
128128
background-color: ${theme.vars.colors.primary.main};
129129
opacity: 0.8;
130130
}
131+
&:focus:not(:disabled) {
132+
background-color: ${theme.vars.colors.primary.main};
133+
opacity: 0.8;
134+
}
131135
`,
132136
'primary-outline': css`
133137
background-color: transparent;
@@ -142,30 +146,50 @@ const useStyles = (
142146
color: ${theme.vars.colors.primary.contrastText};
143147
opacity: 0.9;
144148
}
149+
&:focus:not(:disabled) {
150+
background-color: ${theme.vars.colors.primary.main};
151+
color: ${theme.vars.colors.primary.contrastText};
152+
opacity: 0.9;
153+
}
145154
`,
146155
'primary-text': css`
147156
background-color: transparent;
148157
color: ${theme.vars.colors.primary.main};
149158
border-color: transparent;
150159
&:hover:not(:disabled) {
160+
border-color: transparent;
151161
background-color: ${theme.vars.colors.action.hover};
152162
}
153163
&:active:not(:disabled) {
164+
border-color: transparent;
154165
background-color: ${theme.vars.colors.action.selected};
155166
}
167+
&:focus:not(:disabled) {
168+
border-color: transparent;
169+
background-color: ${theme.vars.colors.action.focus};
170+
outline: none;
171+
}
156172
`,
157173
'primary-icon': css`
158174
background-color: transparent;
159175
color: ${theme.vars.colors.primary.main};
160176
border-color: transparent;
161177
&:hover:not(:disabled) {
178+
border-color: transparent;
162179
background-color: ${theme.vars.colors.action.hover};
163180
color: ${theme.vars.colors.primary.dark};
164181
}
165182
&:active:not(:disabled) {
183+
border-color: transparent;
166184
background-color: ${theme.vars.colors.action.selected};
167185
color: ${theme.vars.colors.primary.dark};
168186
}
187+
&:focus:not(:disabled) {
188+
border-color: transparent;
189+
background-color: ${theme.vars.colors.action.focus};
190+
color: ${theme.vars.colors.primary.dark};
191+
outline: none;
192+
}
169193
`,
170194
'secondary-solid': css`
171195
background-color: ${theme.vars.colors.secondary.main};
@@ -179,6 +203,10 @@ const useStyles = (
179203
background-color: ${theme.vars.colors.secondary.main};
180204
opacity: 0.8;
181205
}
206+
&:focus:not(:disabled) {
207+
background-color: ${theme.vars.colors.secondary.main};
208+
opacity: 0.8;
209+
}
182210
`,
183211
'secondary-outline': css`
184212
background-color: transparent;
@@ -193,30 +221,50 @@ const useStyles = (
193221
color: ${theme.vars.colors.secondary.contrastText};
194222
opacity: 0.9;
195223
}
224+
&:focus:not(:disabled) {
225+
background-color: ${theme.vars.colors.secondary.main};
226+
color: ${theme.vars.colors.secondary.contrastText};
227+
opacity: 0.9;
228+
}
196229
`,
197230
'secondary-text': css`
198231
background-color: transparent;
199232
color: ${theme.vars.colors.secondary.main};
200233
border-color: transparent;
201234
&:hover:not(:disabled) {
235+
border-color: transparent;
202236
background-color: ${theme.vars.colors.action.hover};
203237
}
204238
&:active:not(:disabled) {
239+
border-color: transparent;
205240
background-color: ${theme.vars.colors.action.selected};
206241
}
242+
&:focus:not(:disabled) {
243+
border-color: transparent;
244+
background-color: ${theme.vars.colors.action.focus};
245+
outline: none;
246+
}
207247
`,
208248
'secondary-icon': css`
209249
background-color: transparent;
210250
color: ${theme.vars.colors.secondary.main};
211251
border-color: transparent;
212252
&:hover:not(:disabled) {
253+
border-color: transparent;
213254
background-color: ${theme.vars.colors.action.hover};
214255
color: ${theme.vars.colors.secondary.dark};
215256
}
216257
&:active:not(:disabled) {
258+
border-color: transparent;
217259
background-color: ${theme.vars.colors.action.selected};
218260
color: ${theme.vars.colors.secondary.dark};
219261
}
262+
&:focus:not(:disabled) {
263+
border-color: transparent;
264+
background-color: ${theme.vars.colors.action.focus};
265+
color: ${theme.vars.colors.secondary.dark};
266+
outline: none;
267+
}
220268
`,
221269
'tertiary-solid': css`
222270
background-color: ${theme.vars.colors.text.secondary};
@@ -231,6 +279,11 @@ const useStyles = (
231279
color: ${theme.vars.colors.background.surface};
232280
opacity: 0.9;
233281
}
282+
&:focus:not(:disabled) {
283+
background-color: ${theme.vars.colors.text.primary};
284+
color: ${theme.vars.colors.background.surface};
285+
opacity: 0.9;
286+
}
234287
`,
235288
'tertiary-outline': css`
236289
background-color: transparent;
@@ -244,32 +297,52 @@ const useStyles = (
244297
background-color: ${theme.vars.colors.action.selected};
245298
border-color: ${theme.vars.colors.text.primary};
246299
}
300+
&:focus:not(:disabled) {
301+
background-color: ${theme.vars.colors.action.focus};
302+
border-color: ${theme.vars.colors.text.primary};
303+
}
247304
`,
248305
'tertiary-text': css`
249306
background-color: transparent;
250307
color: ${theme.vars.colors.text.secondary};
251308
border-color: transparent;
252309
&:hover:not(:disabled) {
310+
border-color: transparent;
253311
background-color: ${theme.vars.colors.action.hover};
254312
color: ${theme.vars.colors.text.primary};
255313
}
256314
&:active:not(:disabled) {
315+
border-color: transparent;
257316
background-color: ${theme.vars.colors.action.selected};
258317
color: ${theme.vars.colors.text.primary};
259318
}
319+
&:focus:not(:disabled) {
320+
border-color: transparent;
321+
background-color: ${theme.vars.colors.action.focus};
322+
color: ${theme.vars.colors.text.primary};
323+
outline: none;
324+
}
260325
`,
261326
'tertiary-icon': css`
262327
background-color: transparent;
263328
color: ${theme.vars.colors.text.secondary};
264329
border-color: transparent;
265330
&:hover:not(:disabled) {
331+
border-color: transparent;
266332
background-color: ${theme.vars.colors.action.hover};
267333
color: ${theme.vars.colors.text.primary};
268334
}
269335
&:active:not(:disabled) {
336+
border-color: transparent;
270337
background-color: ${theme.vars.colors.action.selected};
271338
color: ${theme.vars.colors.text.primary};
272339
}
340+
&:focus:not(:disabled) {
341+
border-color: transparent;
342+
background-color: ${theme.vars.colors.action.focus};
343+
color: ${theme.vars.colors.text.primary};
344+
outline: none;
345+
}
273346
`,
274347
};
275348

0 commit comments

Comments
 (0)