1
0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2025-03-15 12:29:16 +01:00

(bug) social networks icons not shown in firefox

This commit is contained in:
Sylvain 2022-07-06 14:19:36 +02:00
parent 3d566782f2
commit 9c72da8e6f
4 changed files with 12 additions and 7 deletions

View File

@ -2,6 +2,7 @@
## next deploy
- Fix a bug: social networks icons not shown in firefox
- Fix a bug: Gender, Address and Birthday are not mapped properly from SSO (#365)
- Fix a bug: OIDC scopes are not shown in the configuration form select
- Fix a bug: OIDC scopes are not saved

View File

@ -59,7 +59,9 @@ export const EditSocials = <TFieldValues extends FieldValues>({ register, setVal
<>
<div className='social-icons'>
{userNetworks.map((network, index) =>
!selectedNetworks.includes(network) && <img key={index} src={`${Icons}#${network.name}`} onClick={() => selectNetwork(network)}></img>
!selectedNetworks.includes(network) && <svg key={index} onClick={() => selectNetwork(network)} viewBox="0 0 24 24" >
<use href={`${Icons}#${network.name}`} />
</svg>
)}
</div>
{selectNetwork.length && <div className='social-inputs'>
@ -79,7 +81,7 @@ export const EditSocials = <TFieldValues extends FieldValues>({ register, setVal
label={network.name}
disabled={disabled}
placeholder={t('app.shared.edit_socials.url_placeholder')}
icon={<img src={`${Icons}#${network.name}`}></img>}
icon={<svg viewBox="0 0 24 24"><use href={`${Icons}#${network.name}`}/></svg>}
addOn={<Trash size={16} />}
addOnAction={() => dispatch({ type: 'delete', payload: { network, field: `profile_attributes.${network.name}` } })} />
)}

View File

@ -85,7 +85,7 @@ export const FabSocials: React.FC<FabSocialsProps> = ({ show = false, onError, o
{fabNetworks.map((network, index) =>
selectedNetworks.includes(network) &&
<a key={index} href={network.url} target='_blank' rel="noreferrer">
<img src={`${Icons}#${network.name}`}></img>
<svg viewBox="0 0 24 24"><use href={`${Icons}#${network.name}`}/></svg>
</a>
)}
</div>
@ -95,7 +95,9 @@ export const FabSocials: React.FC<FabSocialsProps> = ({ show = false, onError, o
<div className='social-icons'>
{fabNetworks.map((network, index) =>
!selectedNetworks.includes(network) &&
<img key={index} src={`${Icons}#${network.name}`} onClick={() => selectNetwork(network)}></img>
<svg viewBox="0 0 24 24" key={index} onClick={() => selectNetwork(network)}>
<use href={`${Icons}#${network.name}`} />
</svg>
)}
</div>
{selectNetwork.length && <div className='social-inputs'>
@ -114,7 +116,7 @@ export const FabSocials: React.FC<FabSocialsProps> = ({ show = false, onError, o
defaultValue={network.url}
label={network.name}
placeholder={t('app.shared.fab_socials.url_placeholder')}
icon={<img src={`${Icons}#${network.name}`}></img>}
icon={<svg viewBox="0 0 24 24"><use href={`${Icons}#${network.name}`}/></svg>}
addOn={<Trash size={16} />}
addOnAction={() => remove(network)} />
)}

View File

@ -581,7 +581,7 @@ body.container {
border-radius: 3px;
overflow: hidden;
}
& > img {
& > svg {
border: 1px solid var(--gray-soft-dark);
background-color: var(--gray-soft-lightest);
&:hover { opacity: 0.65; }
@ -589,7 +589,7 @@ body.container {
& > a {
transition: transform 200ms ease-in-out;
&:hover { transform: translateY(-4px); }
img {
svg {
max-width: 100%;
height: inherit;
}