nouveau fichier : front/src/components/RoundButton.tsx

modifié :         front/src/components/LogoButton.tsx
	modifié :         front/src/components/NavBar.tsx
	front/src/components/RoundButton.tsx

front/src/components/ClickableLink.tsx

@@ -1,11 +1,25 @@
-function Link ({text}){
-    return(
-        <button className="LinkNavbar">{text}</button>
-    )
-}
-
 export default function ClickableLink({url, text}) {
     return (<div>
-        <a href={url}><Link text={text} /></a>
+        <a href={url}><button style={{
+            backgroundColor: "transparent",
+            borderRadius: '8px',
+            borderWidth: '0',
+            cursor: 'pointer',
+            display: 'inline-block',
+            fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif',
+            fontSize: '18px',
+            fontWeight: '0',
+            lineHeight: '20px',
+            listStyle: 'none',
+            margin: '0',
+            padding: '10px 12px',
+            textAlign: 'center',
+            transition: 'all 200ms',
+            verticalAlign: 'baseline',
+            whiteSpace: 'nowrap',
+            userSelect: 'none',
+            WebkitUserSelect: 'none',
+            touchAction: 'manipulation',
+        }} className="LinkNavbar">{text}</button></a>
     </div>)
 }

front/src/components/LogoButton.tsx

@@ -1,11 +1,5 @@
-function Logo({logo}){
-    return (
-        <img src={logo} />
-    )
- }
-
 export default function LogoButton ({url, logo}) {
     return (
-    <a href={url}><Logo logo={logo}/></a>
+    <a href={url}><img src={logo}/></a>
     )
 }

front/src/components/NavBar.tsx

@@ -1,10 +1,17 @@
 import LogoButton from '../components/LogoButton.tsx'
 import ClickableLink from './ClickableLink.tsx';
+import RoundButton from './RoundButton.tsx';
 
 export default function NavBar(){
     return (
-    <>
-        <LogoButton url="https://archlinux.org" logo = "https://archlinux.org/static/hetzner_logo.41114a37d25f.png" />
-        <ClickableLink url="https://archlinux.org" text = "Prout" />
-    </>);
+    <nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+        <div style={{ display : "flex",  alignItems: "center", flexDirection: "row"}}>
+            <LogoButton url="https://archlinux.org" logo = "https://archlinux.org/static/hetzner_logo.41114a37d25f.png" />
+            <ClickableLink url="https://archlinux.org" text = "Prout" />
+            <ClickableLink url="https://archlinux.org" text = "Prout2" />
+        </div>
+        <div style={{ display : "flex",  alignItems: "center", flexDirection: "row"}}>
+            <RoundButton url="https://archlinux.org" bgcolor="transparent" text="?"/>
+        </div>
+    </nav>);
 }

front/src/components/RoundButton.tsx

@@ -0,0 +1,26 @@
+export default function RoundButton({url, bgcolor, text}) {
+    return (<div>
+        <a href={url}><button style={{
+            backgroundColor: bgcolor,
+            borderColor:"blue",
+            borderRadius: '50%',
+            borderWidth: '1',
+            cursor: 'pointer',
+            display: 'inline-block',
+            fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif',
+            fontSize: '18px',
+            fontWeight: '750',
+            lineHeight: '20px',
+            listStyle: 'none',
+            margin: '0',
+            padding: '10px 12px',
+            textAlign: 'center',
+            transition: 'all 200ms',
+            verticalAlign: 'baseline',
+            whiteSpace: 'nowrap',
+            userSelect: 'none',
+            WebkitUserSelect: 'none',
+            touchAction: 'manipulation',
+        }} className="RoundButtonNavBar">{text}</button></a>
+    </div>)
+}