Skip to content

Commit

Permalink
fix: better space between logo and title in header
Browse files Browse the repository at this point in the history
  • Loading branch information
@hrenaud
hrenaud committed Aug 11, 2024
1 parent 7212bb4 commit 868514c
Showing 1 changed file with 87 additions and 91 deletions.
178 changes: 87 additions & 91 deletions electron-app/ecoindex-app/src/renderer/components/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,96 +1,92 @@
import logo from '../assets/tete-de-feuille.svg'
import { useTranslation } from 'react-i18next'
import logo from '../assets/tete-de-feuille.svg'

export const Header = () => {
const { t } = useTranslation()
return (
<div className="flex items-center gap-1 py-4">
<h1 className="flex items-center justify-center gap-1 pt-0 text-3xl font-light">
<div className="logo-ecoindex h-fit">
{/* <img width="100" alt="icon" src={icon} className="bg-slate-400" /> */}
<span className="logo-ecoindex logo-ecoindex__eco">
eco
</span>
<span className="logo-ecoindex logo-ecoindex__index">
Index
</span>
</div>
<span>{t('Desktop')}</span>
<span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 0 80 80"
className="ml-6"
>
<defs>
<clipPath id="cbkva">
<path
fill="#fff"
d="M0 33.333C0 14.923 14.924 0 33.333 0h13.334C65.077 0 80 14.924 80 33.333v13.334C80 65.077 65.076 80 46.667 80H33.333C14.923 80 0 65.076 0 46.667z"
/>
</clipPath>
<clipPath id="cbkvb">
<path
fill="#fff"
d="M29.33 53.11c0 .53.43.96.961.96h1.923v4.807a2.403 2.403 0 0 0 4.807 0v-4.806h3.845v4.807a2.403 2.403 0 0 0 4.807 0V54.07h1.923c.531 0 .961-.43.961-.962V46.86a7.21 7.21 0 0 0-7.21-7.21H36.54a7.21 7.21 0 0 0-7.21 7.21z"
/>
</clipPath>
<clipPath id="cbkvc">
<path
fill="#fff"
d="M37.833 37.183a9.614 9.614 0 0 1-4.92-2.062 12.567 12.567 0 0 1-1.457-1.456 9.614 9.614 0 0 1 7.486-15.645h7.212a2.404 2.404 0 0 1 2.403 2.404v7.21a9.614 9.614 0 0 1-10.724 9.55z"
/>
</clipPath>
</defs>
<g>
<g>
<path
fill="#009739"
d="M0 33.333C0 14.923 14.924 0 33.333 0h13.334C65.077 0 80 14.924 80 33.333v13.334C80 65.077 65.076 80 46.667 80H33.333C14.923 80 0 65.076 0 46.667z"
/>
<path
fill="none"
stroke="#fff"
stroke-miterlimit="20"
stroke-width="10.67"
d="M0 33.333C0 14.923 14.924 0 33.333 0h13.334C65.077 0 80 14.924 80 33.333v13.334C80 65.077 65.076 80 46.667 80H33.333C14.923 80 0 65.076 0 46.667z"
clip-path='url("#cbkva")'
/>
</g>
<g>
<path
fill="#fff"
d="M29.33 53.11c0 .53.43.96.961.96h1.923v4.807a2.403 2.403 0 0 0 4.807 0v-4.806h3.845v4.807a2.403 2.403 0 0 0 4.807 0V54.07h1.923c.531 0 .961-.43.961-.962V46.86a7.21 7.21 0 0 0-7.21-7.21H36.54a7.21 7.21 0 0 0-7.21 7.21z"
/>
<path
fill="none"
stroke="#fff"
stroke-miterlimit="20"
stroke-width="10.67"
d="M29.33 53.11c0 .53.43.96.961.96h1.923v4.807a2.403 2.403 0 0 0 4.807 0v-4.806 0h3.845v4.807a2.403 2.403 0 0 0 4.807 0V54.07v0h1.923c.531 0 .961-.43.961-.962V46.86a7.21 7.21 0 0 0-7.21-7.21H36.54a7.21 7.21 0 0 0-7.21 7.21z"
clip-path='url("#cbkvb")'
/>
</g>
<g>
<path
fill="#fff"
d="M37.833 37.183a9.614 9.614 0 0 1-4.92-2.062 12.567 12.567 0 0 1-1.457-1.456 9.614 9.614 0 0 1 7.486-15.645h7.212a2.404 2.404 0 0 1 2.403 2.404v7.21a9.614 9.614 0 0 1-10.724 9.55z"
/>
<path
fill="none"
stroke="#fff"
stroke-miterlimit="20"
stroke-width="10.67"
d="M37.833 37.183a9.614 9.614 0 0 1-4.92-2.062 12.567 12.567 0 0 1-1.457-1.456 9.614 9.614 0 0 1 7.486-15.645h7.212a2.404 2.404 0 0 1 2.403 2.404v7.21a9.614 9.614 0 0 1-10.724 9.55z"
clip-path='url("#cbkvc")'
/>
</g>
</g>
</svg>
</span>
</h1>
const { t } = useTranslation()
return (
<div className="flex items-center gap-1 py-4">
<h1 className="flex items-center justify-center gap-1 pt-0 text-3xl font-light">
<div className="logo-ecoindex h-fit">
{/* <img width="100" alt="icon" src={icon} className="bg-slate-400" /> */}
<span className="logo-ecoindex logo-ecoindex__eco">eco</span>
<span className="logo-ecoindex logo-ecoindex__index">Index</span>
</div>
)
<span className="ml-2">{t('Desktop')}</span>
<span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 0 80 80"
className="ml-6"
>
<defs>
<clipPath id="cbkva">
<path
fill="#fff"
d="M0 33.333C0 14.923 14.924 0 33.333 0h13.334C65.077 0 80 14.924 80 33.333v13.334C80 65.077 65.076 80 46.667 80H33.333C14.923 80 0 65.076 0 46.667z"
/>
</clipPath>
<clipPath id="cbkvb">
<path
fill="#fff"
d="M29.33 53.11c0 .53.43.96.961.96h1.923v4.807a2.403 2.403 0 0 0 4.807 0v-4.806h3.845v4.807a2.403 2.403 0 0 0 4.807 0V54.07h1.923c.531 0 .961-.43.961-.962V46.86a7.21 7.21 0 0 0-7.21-7.21H36.54a7.21 7.21 0 0 0-7.21 7.21z"
/>
</clipPath>
<clipPath id="cbkvc">
<path
fill="#fff"
d="M37.833 37.183a9.614 9.614 0 0 1-4.92-2.062 12.567 12.567 0 0 1-1.457-1.456 9.614 9.614 0 0 1 7.486-15.645h7.212a2.404 2.404 0 0 1 2.403 2.404v7.21a9.614 9.614 0 0 1-10.724 9.55z"
/>
</clipPath>
</defs>
<g>
<g>
<path
fill="#009739"
d="M0 33.333C0 14.923 14.924 0 33.333 0h13.334C65.077 0 80 14.924 80 33.333v13.334C80 65.077 65.076 80 46.667 80H33.333C14.923 80 0 65.076 0 46.667z"
/>
<path
fill="none"
stroke="#fff"
stroke-miterlimit="20"
stroke-width="10.67"
d="M0 33.333C0 14.923 14.924 0 33.333 0h13.334C65.077 0 80 14.924 80 33.333v13.334C80 65.077 65.076 80 46.667 80H33.333C14.923 80 0 65.076 0 46.667z"
clip-path='url("#cbkva")'
/>
</g>
<g>
<path
fill="#fff"
d="M29.33 53.11c0 .53.43.96.961.96h1.923v4.807a2.403 2.403 0 0 0 4.807 0v-4.806h3.845v4.807a2.403 2.403 0 0 0 4.807 0V54.07h1.923c.531 0 .961-.43.961-.962V46.86a7.21 7.21 0 0 0-7.21-7.21H36.54a7.21 7.21 0 0 0-7.21 7.21z"
/>
<path
fill="none"
stroke="#fff"
stroke-miterlimit="20"
stroke-width="10.67"
d="M29.33 53.11c0 .53.43.96.961.96h1.923v4.807a2.403 2.403 0 0 0 4.807 0v-4.806 0h3.845v4.807a2.403 2.403 0 0 0 4.807 0V54.07v0h1.923c.531 0 .961-.43.961-.962V46.86a7.21 7.21 0 0 0-7.21-7.21H36.54a7.21 7.21 0 0 0-7.21 7.21z"
clip-path='url("#cbkvb")'
/>
</g>
<g>
<path
fill="#fff"
d="M37.833 37.183a9.614 9.614 0 0 1-4.92-2.062 12.567 12.567 0 0 1-1.457-1.456 9.614 9.614 0 0 1 7.486-15.645h7.212a2.404 2.404 0 0 1 2.403 2.404v7.21a9.614 9.614 0 0 1-10.724 9.55z"
/>
<path
fill="none"
stroke="#fff"
stroke-miterlimit="20"
stroke-width="10.67"
d="M37.833 37.183a9.614 9.614 0 0 1-4.92-2.062 12.567 12.567 0 0 1-1.457-1.456 9.614 9.614 0 0 1 7.486-15.645h7.212a2.404 2.404 0 0 1 2.403 2.404v7.21a9.614 9.614 0 0 1-10.724 9.55z"
clip-path='url("#cbkvc")'
/>
</g>
</g>
</svg>
</span>
</h1>
</div>
)
}

0 comments on commit 868514c

Please sign in to comment.