betagouv
/
mon-entreprise
mirror of https://github.com/betagouv/mon-entreprise
1
0
Fork 0
Code Releases Activity

:fix: search loader icon

pull/2368/head
Félix Legrelle 2022-10-27 13:01:27 +02:00 committed by Johan Girod
parent cc63f45697
commit 2e427647ad
3 changed files with 30 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
site/source/design-system/field/SearchField.tsx
View File

@ -33,17 +33,7 @@ const SearchInputContainer = styled(StyledInputContainer)`
`
const IconContainer = styled.div<{ hasLabel?: boolean }>`
padding: calc(
${({ hasLabel = false }) => (hasLabel ? '1rem' : '0rem')} + 0.5rem
)
0 0.5rem;
${({ theme: { darkMode } }) =>
darkMode &&
css`
& * {
fill: white !important;
}
`}
padding: calc(${({ hasLabel = false }) => (hasLabel ? '1rem' : '0rem')} + 0.5rem) 0 0.5rem;
`
export default function SearchField(

67
site/source/design-system/icons/Loader.tsx
View File

@ -4,51 +4,40 @@ export function Loader() {
aria-label="Chargement en cours"
width={24}
height={24}
viewBox="0 0 38 38"
xmlns="http://www.w3.org/2000/svg"
role="img"
>
<defs>
<linearGradient
x1="8.042%"
y1="0%"
x2="65.682%"
y2="23.865%"
id="prefix__a"
>
<stop stopColor="currentColor" stopOpacity={0} offset="0%" />
<stop stopColor="currentColor" stopOpacity={0.631} offset="63.146%" />
<stop stopColor="currentColor" offset="100%" />
<linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
<stop stopColor="#fff" stopOpacity={0} offset="0%" />
<stop stopColor="#fff" stopOpacity={0.631} offset="63.146%" />
<stop stopColor="#fff" offset="100%" />
</linearGradient>
</defs>
<g
transform="translate(1 1) scale(0.5 0.5)"
fill="none"
fillRule="evenodd"
>
<path
d="M36 18c0-9.94-8.06-18-18-18"
stroke="url(#prefix__a)"
strokeWidth={2}
>
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur="0.9s"
repeatCount="indefinite"
/>
</path>
<circle fill="currentColor" cx={36} cy={18} r={1}>
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur="0.9s"
repeatCount="indefinite"
/>
</circle>
<g fill="none" fillRule="evenodd">
<g transform="translate(1 1)">
<path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" strokeWidth={2}>
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur="0.9s"
repeatCount="indefinite"
/>
</path>
<circle fill="#fff" cx={36} cy={18} r={1}>
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur="0.9s"
repeatCount="indefinite"
/>
</circle>
</g>
</g>
</svg>
)

12
site/source/design-system/icons/SearchIcon.tsx
View File

@ -1,25 +1,15 @@
export function SearchIcon({ ...props }) {
return (
<svg
width={24}
height={24}
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-hidden
{...props}
>
<svg width={24} height={24} fill="white" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden {...props}>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M10.25 6a4.25 4.25 0 100 8.5 4.25 4.25 0 000-8.5zM4 10.25a6.25 6.25 0 1112.5 0 6.25 6.25 0 01-12.5 0z"
fill="#212529"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M18.293 19.707l-5.056-5.056 1.414-1.414 5.056 5.056a1 1 0 01-1.414 1.414z"
fill="#212529"
/>
</svg>
)