configurable borderRadius for Button and Dropdown

package-lock.json

@@ -369,6 +369,7 @@
       "integrity": "sha512-YZs/OSKOQAQCnJvM/P+F1URotNnYNeU3P2s4oIpzm1uFaqUEqRxUB0g5ejMjEb5Gjb9/PiBI5Ktrq4rUUF8UVQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@sveltejs/vite-plugin-svelte-inspector": "^5.0.0",
         "debug": "^4.4.1",
@@ -680,6 +681,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1143,6 +1145,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -1224,6 +1227,7 @@
       "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.43.13.tgz",
       "integrity": "sha512-K1QJbpc71OHs3egN/ZHN+nsH/eE/eJQUbtlTAAXVejOOjsFx9hM96fCX5fwPQIYclJfVS8D96RDFA76nZsrJ3w==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jridgewell/remapping": "^2.3.4",
         "@jridgewell/sourcemap-codec": "^1.5.0",
@@ -1292,6 +1296,7 @@
       "resolved": "https://registry.npmjs.org/rolldown-vite/-/rolldown-vite-7.2.5.tgz",
       "integrity": "sha512-u09tdk/huMiN8xwoiBbig197jKdCamQTtOruSalOzbqGje3jdHiV0njQlAW0YvzoahkirFePNQ4RYlfnRQpXZA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@oxc-project/runtime": "0.97.0",
         "fdir": "^6.5.0",

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">
+        <Dropdown borderRadius="4px" name={$text.nav.about} variant="borderless">
-          <Button onClick={() => navigate("/mis-teeme")}
+          <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">
+        <Dropdown borderRadius="4px" name={$text.nav.events} variant="borderless">
-          <Button onClick={() => navigate("/kalender")}
+          <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>