Skip to content

Commit ec00548

Browse files
felixeversfelixevers
committed
add icons to buttons
1 parent 1efa28a commit ec00548

43 files changed

Lines changed: 131 additions & 31 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/account/components/AccountPageLayout.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { ThemeSwitcher } from '../../login/components/ThemeSwitcher'
55
import { LanguageSwitcher } from '../../login/components/LanguageSwitcher'
66
import { Footer } from '../../login/components/Footer'
77
import { hideKeycloakStyles } from '../../login/utils/hideKeycloakStyles'
8+
import { LogOut } from 'lucide-react'
89
import { Button } from '@helpwave/hightide'
910
import { useTranslation } from '../../i18n/useTranslation'
1011

@@ -26,10 +27,12 @@ export function AccountPageLayout({ kcContext, children }: AccountPageLayoutProp
2627
<Button
2728
type="button"
2829
color="negative"
30+
coloringStyle="outline"
2931
onClick={() => {
3032
window.location.href = kcContext.url.getLogoutUrl()
3133
}}
3234
>
35+
<LogOut className="w-4 h-4" style={{ color: 'var(--hw-color-negative-600)' }} />
3336
{t('doLogout')}
3437
</Button>
3538
</div>

‎src/account/pages/AccountPassword.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useState } from 'react'
2+
import { ArrowLeft, Save } from 'lucide-react'
23
import { Button, Input, FormFieldLayout } from '@helpwave/hightide'
34
import type { KcContext } from '../KcContext'
45
import { useTranslation } from '../../i18n/useTranslation'
@@ -136,15 +137,18 @@ export default function AccountPassword({ kcContext }: AccountPasswordProps) {
136137

137138
<div className="flex flex-col gap-2">
138139
<Button type="submit" name="submitAction" value="Save" color="primary">
140+
<Save className="w-4 h-4" />
139141
{t('doSave')}
140142
</Button>
141143
<Button
142144
type="button"
143145
color="neutral"
146+
coloringStyle="outline"
144147
onClick={() => {
145148
window.location.href = url.accountUrl
146149
}}
147150
>
151+
<ArrowLeft className="w-4 h-4" />
148152
{t('backToAccount')}
149153
</Button>
150154
</div>

‎src/account/pages/AccountSettings.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useState } from 'react'
2+
import { Key, Save } from 'lucide-react'
23
import { Avatar, Button, Chip, Input, FormFieldLayout } from '@helpwave/hightide'
34
import type { KcContext } from '../KcContext'
45
import { useTranslation } from '../../i18n/useTranslation'
@@ -180,6 +181,7 @@ export default function AccountSettings({ kcContext }: AccountSettingsProps) {
180181
</div>
181182

182183
<Button type="submit" name="submitAction" value="Save" color="primary">
184+
<Save className="w-4 h-4" />
183185
{t('doSave')}
184186
</Button>
185187
</form>
@@ -193,11 +195,13 @@ export default function AccountSettings({ kcContext }: AccountSettingsProps) {
193195
</h2>
194196
<Button
195197
type="button"
196-
color="neutral"
198+
color="warning"
199+
coloringStyle="outline"
197200
onClick={() => {
198201
window.location.href = url.passwordUrl
199202
}}
200203
>
204+
<Key className="w-4 h-4" />
201205
{t('updatePassword')}
202206
</Button>
203207
</section>

‎src/login/components/LanguageSwitcher.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
import { useState } from 'react'
2-
import { Button, LanguageDialog } from '@helpwave/hightide'
2+
import { IconButton, LanguageDialog } from '@helpwave/hightide'
33
import { Languages } from 'lucide-react'
44

55
export function LanguageSwitcher() {
66
const [isOpen, setIsOpen] = useState(false)
77

88
return (
99
<>
10-
<Button
10+
<IconButton
1111
type="button"
12-
color="neutral"
12+
coloringStyle="tonal"
1313
onClick={() => setIsOpen(true)}
14-
style={{ padding: '0.5rem', minWidth: 'auto' }}
15-
aria-label="Change language"
14+
tooltip="Change language"
15+
useTooltipAsLabel
1616
>
1717
<Languages size={20} />
18-
</Button>
18+
</IconButton>
1919
<LanguageDialog
2020
isOpen={isOpen}
2121
onClose={() => setIsOpen(false)}

‎src/login/components/ThemeSwitcher.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
import { useState } from 'react'
2-
import { Button, ThemeDialog } from '@helpwave/hightide'
2+
import { IconButton, ThemeDialog } from '@helpwave/hightide'
33
import { Palette } from 'lucide-react'
44

55
export function ThemeSwitcher() {
66
const [isOpen, setIsOpen] = useState(false)
77

88
return (
99
<>
10-
<Button
10+
<IconButton
1111
type="button"
12-
color="neutral"
12+
coloringStyle="tonal"
1313
onClick={() => setIsOpen(true)}
14-
style={{ padding: '0.5rem', minWidth: 'auto' }}
15-
aria-label="Change theme"
14+
tooltip="Change theme"
15+
useTooltipAsLabel
1616
>
1717
<Palette size={20} />
18-
</Button>
18+
</IconButton>
1919
<ThemeDialog isOpen={isOpen} onClose={() => setIsOpen(false)} />
2020
</>
2121
)

‎src/login/pages/Code.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useState } from 'react'
2+
import { Send } from 'lucide-react'
23
import { Button, Input, FormFieldLayout } from '@helpwave/hightide'
34
import type { KcContext } from '../KcContext'
45
import { useI18n } from '../i18n'
@@ -80,6 +81,7 @@ export default function Code({ kcContext }: CodeProps) {
8081
</div>
8182

8283
<Button type="submit" color="primary">
84+
<Send className="w-4 h-4" />
8385
{t('doSubmit')}
8486
</Button>
8587
</form>

‎src/login/pages/DeleteAccountConfirm.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Trash2, X } from 'lucide-react'
12
import { Button } from '@helpwave/hightide'
23
import type { KcContext } from '../KcContext'
34
import { useI18n } from '../i18n'
@@ -27,9 +28,11 @@ export default function DeleteAccountConfirm({ kcContext }: DeleteAccountConfirm
2728

2829
<form action={kcContext.url.loginAction} method="POST" style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
2930
<Button type="submit" name="submitAction" value="Delete Account" color="primary">
31+
<Trash2 className="w-4 h-4" />
3032
{t('doDeleteAccount')}
3133
</Button>
32-
<Button type="submit" name="submitAction" value="Cancel" color="neutral">
34+
<Button type="submit" name="submitAction" value="Cancel" color="neutral" coloringStyle="outline">
35+
<X className="w-4 h-4" />
3336
{t('doCancel')}
3437
</Button>
3538
</form>

‎src/login/pages/DeleteCredential.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Trash2, X } from 'lucide-react'
12
import { Button } from '@helpwave/hightide'
23
import type { KcContext } from '../KcContext'
34
import { useI18n } from '../i18n'
@@ -27,9 +28,11 @@ export default function DeleteCredential({ kcContext }: DeleteCredentialProps) {
2728

2829
<form action={kcContext.url.loginAction} method="POST" style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
2930
<Button type="submit" name="submitAction" value="Delete" color="primary">
31+
<Trash2 className="w-4 h-4" />
3032
{t('doDelete')}
3133
</Button>
32-
<Button type="submit" name="submitAction" value="Cancel" color="neutral">
34+
<Button type="submit" name="submitAction" value="Cancel" color="neutral" coloringStyle="outline">
35+
<X className="w-4 h-4" />
3336
{t('doCancel')}
3437
</Button>
3538
</form>

‎src/login/pages/Error.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { KcContext } from '../KcContext'
33
import { useI18n } from '../i18n'
44
import Template from 'keycloakify/login/Template'
55
import { PageLayout } from '../components/PageLayout'
6-
import { ArrowLeft } from 'lucide-react'
6+
import { ArrowLeft, RotateCcw } from 'lucide-react'
77
import { useTranslation } from '../../i18n/useTranslation'
88

99
type ErrorProps = {
@@ -46,18 +46,20 @@ export default function Error({ kcContext }: ErrorProps) {
4646
window.location.href = kcContext.url.loginRestartFlowUrl
4747
}}
4848
>
49+
<RotateCcw className="w-4 h-4" />
4950
{t('doRestart') || t('doContinue')}
5051
</Button>
5152

5253
{kcContext.url.loginUrl && (
5354
<Button
5455
type="button"
5556
color="neutral"
57+
coloringStyle="outline"
5658
onClick={() => {
5759
window.location.href = kcContext.url.loginUrl
5860
}}
5961
>
60-
<ArrowLeft size={16} style={{ marginRight: '0.5rem', display: 'inline-block' }} />
62+
<ArrowLeft className="w-4 h-4" />
6163
{t('backToLogin')}
6264
</Button>
6365
)}

‎src/login/pages/ForgotPassword.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { useState } from 'react'
2+
import { ArrowLeft, Send } from 'lucide-react'
23
import { Button, Input, FormFieldLayout } from '@helpwave/hightide'
34
import type { KcContext } from '../KcContext'
45
import { useI18n } from '../i18n'
56
import Template from 'keycloakify/login/Template'
67
import { PageLayout } from '../components/PageLayout'
7-
import { ArrowLeft } from 'lucide-react'
88
import { useTranslation } from '../../i18n/useTranslation'
99
import { useTranslatedFieldError } from '../utils/translateFieldError'
1010

@@ -93,17 +93,19 @@ export default function ForgotPassword({ kcContext }: ForgotPasswordProps) {
9393

9494
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
9595
<Button type="submit" color="primary">
96+
<Send className="w-4 h-4" />
9697
{t('doSubmit')}
9798
</Button>
9899

99100
<Button
100101
type="button"
101102
color="neutral"
103+
coloringStyle="outline"
102104
onClick={() => {
103105
window.location.href = kcContext.url.loginUrl
104106
}}
105107
>
106-
<ArrowLeft size={16} style={{ marginRight: '0.5rem', display: 'inline-block' }} />
108+
<ArrowLeft className="w-4 h-4" />
107109
{t('backToLogin')}
108110
</Button>
109111
</div>

0 commit comments

Comments
 (0)