From 3afed02aa802feca269bfb026d19d5d4aaaa47fc Mon Sep 17 00:00:00 2001
From: Adrien <me@adrien.run>
Date: Fri, 26 Apr 2024 19:23:34 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20Make=20Button=20usable=20outside?=
 =?UTF-8?q?=20of=20the=20button.rs=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/ui/components/button.rs   |  2 +-
 src/ui/components/button.scss | 12 +++++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/ui/components/button.rs b/src/ui/components/button.rs
index 1c044de..225b29d 100644
--- a/src/ui/components/button.rs
+++ b/src/ui/components/button.rs
@@ -77,7 +77,7 @@ pub struct ButtonProps {
     children: Element,
 }
 
-fn Button(props: ButtonProps) -> Element {
+pub fn Button(props: ButtonProps) -> Element {
     rsx! {
         style { {STYLE_SHEET} },
 
diff --git a/src/ui/components/button.scss b/src/ui/components/button.scss
index 4476bf9..e16ecd6 100644
--- a/src/ui/components/button.scss
+++ b/src/ui/components/button.scss
@@ -5,16 +5,22 @@
     aspect-ratio: 3.5;
 
     border: $border-normal;
-    border-radius: $border-radius;
+    border-radius: 5%;
 
     color: get-color(greyscale, 0);
 
     font-family: "Geist";
     font-weight: bold;
 
+    // To center the inner svg
+    // TODO: Find a more efficient way to center
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
     svg {
-        height: 100%;
-        width: 100%;
+        height: 85%;
+        width: 85%;
 
         text {
             font-size: 50;