configurable borderRadius for Button and Dropdown

src/components/Button.svelte

@@ -3,13 +3,14 @@
   export let border = false;
   export let textAlign = "left";
   export let whiteSpace = "nowrap";
+  export let borderRadius = "8px";
 </script>
 
 <button 
   onclick={onClick} 
   class="btn" 
   class:borderless={!border} 
-  style={`text-align: ${textAlign}; white-space: ${whiteSpace};`}
+  style={`text-align: ${textAlign}; white-space: ${whiteSpace}; border-radius: ${borderRadius};`}
   {...$$restProps}
 >
   <slot />
@@ -19,7 +20,6 @@
   .btn {
     background: var(--white);
     color: var(--black);
-    border-radius: 8px;
     border: 1.5px solid transparent;
     padding: 0.6em 1.2em;
     font-weight: 500;

src/components/Dropdown.svelte

@@ -1,9 +1,9 @@
 <script>
   import Button from "./Button.svelte";
 
-  // Props
   export let name = "";
   export let border = false;
+  export let borderRadius = "8px";
 
   let isOpen = false;
 
@@ -21,7 +21,7 @@
 </script>
 
 <div class="relative inline-block" on:focusout={handleFocusOut}>
-  <Button onClick={toggle} border={border}>
+  <Button borderRadius={borderRadius} onClick={toggle} border={border}>
     {name}
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -42,6 +42,7 @@
 
   <div
     class="absolute mt-2 rounded-md shadow-lg bg-white ring-1 ring-black/5 overflow-hidden flex flex-col"
+    style="border-radius: {borderRadius}"
     style:visibility={isOpen ? "visible" : "hidden"}
   >
     <slot />

src/layout/Navbar.svelte

@@ -21,44 +21,44 @@
 <Section padding="small">
   <Grid>
     <nav class="z-10 flex gap-4 justify-end text-xl">
-        <Dropdown name={$text.nav.about} variant="borderless">
-          <Button onClick={() => navigate("/mis-teeme")}
+        <Dropdown borderRadius="4px" name={$text.nav.about} variant="borderless">
+          <Button borderRadius="4px" onClick={() => navigate("/mis-teeme")}
             >{$text.nav.aboutPages.info}</Button
           >
-          <Button onClick={() => navigate("/liitu-meiega")}
+          <Button borderRadius="4px" onClick={() => navigate("/liitu-meiega")}
             ><Bot />{$text.nav.aboutPages.join}</Button
           >
-          <Button onClick={() => navigate("/mentorid")}
+          <Button borderRadius="4px" onClick={() => navigate("/mentorid")}
             ><HandHeart />{$text.nav.aboutPages.mentors}</Button
           >
-          <Button onClick={() => navigate("/juhatus")}
+          <Button borderRadius="4px" onClick={() => navigate("/juhatus")}
             ><Lectern />{$text.nav.aboutPages.board}</Button
           >
         </Dropdown>
-        <Dropdown name={$text.nav.events} variant="borderless">
-          <Button onClick={() => navigate("/kalender")}
+        <Dropdown borderRadius="4px" name={$text.nav.events} variant="borderless">
+          <Button borderRadius="4px" onClick={() => navigate("/kalender")}
             ><CalendarClock />{$text.nav.eventsPages.calendar}</Button
           >
-          <Button
+          <Button borderRadius="4px"
             onClick={() => navigate("https://asikarikas.ee/", { external: true })}
             ><Trophy />ASI Karikas</Button
           >
-          <Button onClick={() => navigate("/mentorid")}
+          <Button borderRadius="4px" onClick={() => navigate("/mentorid")}
             ><Presentation />{$text.nav.eventsPages.workshops}</Button
           >
-          <Button onClick={() => navigate("/rebased")}
+          <Button borderRadius="4px" onClick={() => navigate("/rebased")}
             ><Swords />{$text.nav.eventsPages.fresh}</Button
           >
-          <Button
+          <Button borderRadius="4px"
             onClick={() =>
               navigate("https://remondikohvik.lapikud.ee/", { external: true })}
             ><Coffee />{$text.nav.eventsPages.repair}</Button
           >
         </Dropdown>
-        <Button onClick={() => navigate("/kontakt")}
+        <Button borderRadius="4px" onClick={() => navigate("/kontakt")}
           >{$text.nav.contact}
         </Button>
-        <Button onClick={() => navigate("/helpdesk")}
+        <Button borderRadius="4px" onClick={() => navigate("/helpdesk")}
           >{$text.nav.helpdesk}
         </Button>
     </nav>