front/src/components/ClickableLink.tsx

@@ -1,25 +1,11 @@
+function Link ({text}){
+    return(
+        <button className="LinkNavbar">{text}</button>
+    )
+}
+
 export default function ClickableLink({url, text}) {
     return (<div>
-        <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>
+        <a href={url}><Link text={text} /></a>
     </div>)
 }

front/src/components/LogoButton.tsx

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

front/src/components/NavBar.tsx

@@ -1,17 +1,10 @@
 import LogoButton from '../components/LogoButton.tsx'
 import ClickableLink from './ClickableLink.tsx';
-import RoundButton from './RoundButton.tsx';
 
 export default function NavBar(){
     return (
-    <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>);
+    <>
+        <LogoButton url="https://archlinux.org" logo = "https://archlinux.org/static/hetzner_logo.41114a37d25f.png" />
+        <ClickableLink url="https://archlinux.org" text = "Prout" />
+    </>);
 }

front/src/components/RoundButton.tsx

@@ -1,26 +0,0 @@
-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>)
-}