Skip to content

Commit 173c5a4

Browse files
sanjaykhondal-awsanjaykhondal-aw
authored
Merge pull request #1024 from credebl/fix/favicon-breadcrumb
Resolved fav icon issue and support multiple fav icon
2 parents 055a0e1 + 23a6666 commit 173c5a4

File tree

10 files changed

+84
-16
lines changed

10 files changed

+84
-16
lines changed

nextjs/public/favicon.ico renamed to nextjs/public/favicon-credebl.ico

File renamed without changes.

‎nextjs/public/favicon-sovio.ico‎

263 KB
Binary file not shown.

‎nextjs/public/images/favicon-credebl.ico‎

1.12 KB
Binary file not shown.

‎nextjs/public/images/favicon-sovio.ico‎

263 KB
Binary file not shown.

‎nextjs/src/app/layout.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import './theme.css'
33

44
import type { Metadata, Viewport } from 'next'
55

6+
import { FaviconUpdater } from '@/components/FaviconUpdater'
67
import { Session as NextAuthSession } from 'next-auth'
78
import NextTopLoader from 'nextjs-toploader'
89
import { NuqsAdapter } from 'nuqs/adapters/next/app'
@@ -62,6 +63,8 @@ export default async function RootLayout({
6263
return (
6364
<html lang="en" suppressHydrationWarning>
6465
<head>
66+
{/* Default favicon */}
67+
<link rel="icon" href="/favicon-credebl.ico" />
6568
<script
6669
dangerouslySetInnerHTML={{
6770
__html: `
@@ -92,6 +95,7 @@ export default async function RootLayout({
9295
<SessionSyncer>
9396
<SessionCheck>
9497
<Toaster />
98+
<FaviconUpdater />
9599
<PageLayout>{children}</PageLayout>
96100
</SessionCheck>
97101
</SessionSyncer>

‎nextjs/src/components/FaviconUpdater.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
'use client'
2+
3+
import { JSX, useEffect } from 'react'
4+
5+
export function FaviconUpdater(): JSX.Element | null {
6+
useEffect(() => {
7+
const getCookieValue = (name: string): string | undefined => {
8+
const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]+)`))
9+
return match?.[2]
10+
}
11+
12+
const updateFaviconAndTitle = (): void => {
13+
const theme = getCookieValue('active_theme') || 'credebl'
14+
15+
document
16+
.querySelectorAll("link[rel~='icon']")
17+
.forEach((el) => el.remove())
18+
19+
const link = document.createElement('link')
20+
link.rel = 'icon'
21+
link.type = 'image/x-icon'
22+
link.href =
23+
theme === 'sovio' ? '/favicon-sovio.ico' : '/favicon-credebl.ico'
24+
document.head.appendChild(link)
25+
26+
document.title =
27+
theme === 'sovio'
28+
? 'SOVIO - Self-Sovereign Identity platform-V2.0.0'
29+
: 'CREDEBL - Studio'
30+
}
31+
32+
updateFaviconAndTitle()
33+
34+
const handleThemeChange = (): void => {
35+
updateFaviconAndTitle()
36+
}
37+
38+
window.addEventListener('themeChanged', handleThemeChange)
39+
40+
return () => {
41+
window.removeEventListener('themeChanged', handleThemeChange)
42+
}
43+
}, [])
44+
45+
return null
46+
}

‎nextjs/src/components/iconsSvg.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@ export const ContinueIcon = (): JSX.Element => (
88
viewBox="0 0 24 24"
99
>
1010
<path
11-
fill="#000"
11+
fill="currentColor"
1212
d="M12.516 6.444a.556.556 0 1 0-.787.787l4.214 4.214H4.746a.558.558 0 0 0 0 1.117h11.191l-4.214 4.214a.556.556 0 0 0 .396.95.582.582 0 0 0 .397-.163l5.163-5.163a.553.553 0 0 0 .162-.396.576.576 0 0 0-.162-.396l-5.163-5.164Z"
1313
/>
1414
<path
15-
fill="#000"
15+
fill="currentColor"
1616
d="M12.001 0a12 12 0 0 0-8.484 20.485c4.686 4.687 12.283 4.687 16.969 0 4.686-4.685 4.686-12.282 0-16.968A11.925 11.925 0 0 0 12.001 0Zm0 22.886c-6 0-10.884-4.884-10.884-10.885C1.117 6.001 6 1.116 12 1.116s10.885 4.885 10.885 10.885S18.001 22.886 12 22.886Z"
1717
/>
1818
</svg>
@@ -26,11 +26,11 @@ export const BackIcon = (): JSX.Element => (
2626
viewBox="0 0 24 24"
2727
>
2828
<path
29-
fill="#000"
29+
fill="currentColor"
3030
d="M11.484 6.444a.556.556 0 1 1 .787.787l-4.214 4.214h11.191a.558.558 0 0 1 0 1.117H8.057l4.214 4.214a.556.556 0 0 1-.396.95.582.582 0 0 1-.397-.163l-5.163-5.163a.553.553 0 0 1-.162-.396.576.576 0 0 1 .162-.396l5.163-5.164Z"
3131
/>
3232
<path
33-
fill="#000"
33+
fill="currentColor"
3434
d="M12.001 24c6 0 10.884-4.884 10.884-10.885C22.885 7.116 18 .232 12 .232S1.116 7.116 1.116 13C1.116 19.116 6 .232 12 .232Zm0-2C6 .232 1.116 5 .232C5 .232C10 .232C15 .232C20 .232C20 .232C20 .232C20 .232C20 .232Z"
3535
/>
3636
</svg>
@@ -44,7 +44,7 @@ export const RequestProofIcon = (): JSX.Element => (
4444
viewBox="0 0 25 25"
4545
>
4646
<path
47-
fill="#000"
47+
fill="currentColor"
4848
d="M21.094 0H3.906A3.906 3.906 0 0 0 0 3.906v12.5a3.906 3.906 0 0 0 3.906 3.907h.781v3.906a.781.781 0 0 0 1.335.553l4.458-4.46h10.614A3.906 3.906 0 0 0 25 16.407v-12.5A3.907 3.907 0 0 0 21.094 0Zm2.343 16.406a2.343 2.343 0 0 1-2.343 2.344H10.156a.782.782 0 0 0-.553.228L6.25 22.333V19.53a.781.781 0 0 0-.781-.781H3.906a2.344 2.344 0 0 1-2.344-2.344v-12.5a2.344 2.344 0 0 1 2.344-2.344h17.188a2.343 2.343 0 0 1 2.343 2.344v12.5Zm-3.184-5.951a.81.81 0 0 1-.17.254l-3.125 3.125a.781.781 0 0 1-1.105-1.106l1.792-1.79h-7.489a2.343 2.343 0 0 0-2.344 2.343.781.781 0 1 1-1.562 0 3.906 3.906 0 0 1 3.906-3.906h7.49l-1.793-1.79a.78.78 0 0 1 .254-1.277.781.781 0 0 1 .852.17l3.125 3.125a.79.79 0 0 1 .169.852Z"
4949
/>
5050
</svg>

‎nextjs/src/components/layout/app-sidebar.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
'use client'
22

3-
// React and Next.js
4-
53
import {
64
Collapsible,
75
CollapsibleContent,
@@ -57,8 +55,8 @@ export default function AppSidebar(): React.JSX.Element {
5755

5856
const collapsedLogoImageSrc =
5957
activeTheme === 'credebl'
60-
? '/images/CREDEBL_favicon.ico'
61-
: '/images/SOVIO_favicon.ico'
58+
? '/images/favicon-credebl.ico'
59+
: '/images/favicon-sovio.ico'
6260

6361
const dispatch = useAppDispatch()
6462

‎nextjs/src/components/theme-selector.tsx‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
'use client'
22

3+
import React, { useEffect } from 'react'
4+
35
import { CheckIcon } from 'lucide-react'
46
import { DropdownMenuItem } from '@/components/ui/dropdown-menu'
5-
import React from 'react'
67
import { useThemeConfig } from '@/components/active-theme'
78

89
const themes = [
@@ -13,6 +14,28 @@ const themes = [
1314
export function ThemeSelector(): React.JSX.Element {
1415
const { activeTheme, setActiveTheme } = useThemeConfig()
1516

17+
useEffect(() => {
18+
const updateFaviconAndTitle = (): void => {
19+
document
20+
.querySelectorAll("link[rel~='icon']")
21+
.forEach((el) => el.remove())
22+
23+
const link = document.createElement('link')
24+
link.rel = 'icon'
25+
link.type = 'image/x-icon'
26+
link.href =
27+
activeTheme === 'sovio' ? '/favicon-sovio.ico' : '/favicon-credebl.ico'
28+
document.head.appendChild(link)
29+
30+
document.title =
31+
activeTheme === 'sovio'
32+
? 'SOVIO - Self-Sovereign Identity platform-V2.0.0'
33+
: 'CREDEBL - Studio'
34+
}
35+
36+
updateFaviconAndTitle()
37+
}, [activeTheme])
38+
1639
return (
1740
<>
1841
{themes.map((theme) => (

‎nextjs/src/features/organization/connectionIssuance/components/Credentials.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -266,13 +266,10 @@ const Credentials = (): JSX.Element => {
266266
/>
267267
)}
268268
</div>
269-
270269
<AlertComponent
271-
message={error}
272-
type={'failure'}
273-
onAlertClose={() => {
274-
setError(null)
275-
}}
270+
message={error && String(error)}
271+
type="failure"
272+
onAlertClose={() => setError(null)}
276273
/>
277274

278275
{!walletCreated && !loading ? (

0 commit comments

Comments
 (0)