feat(SW-440) implemented changes to buttons according to figma

components/TempDesignSystem/Button/button.module.css

@@ -1,7 +1,6 @@
 .btn {
   background: none;
-  /* No variable yet for radius 50px */
-  border-radius: 50px;
+  border-radius: var(--Corner-radius-Rounded);
   cursor: pointer;
   margin: 0;
   padding: 0;
@@ -10,12 +9,12 @@
     background-color 300ms ease,
     color 300ms ease;
 
-  /* TODO: Waiting for variables for buttons from Design team */
   font-family: var(--typography-Body-Bold-fontFamily);
   font-size: var(--typography-Body-Bold-fontSize);
   font-weight: 500;
-  line-height: 24px;
+  line-height: var(--typography-Body-Bold-lineHeight);
   letter-spacing: 0.6%;
+  text-decoration: none;
 }
 
 .wrapping {
@@ -23,6 +22,10 @@
   padding-right: 0 !important;
 }
 
+.fullWidth {
+  width: 100%;
+}
+
 /* INTENT */
 .primary,
 a.primary {
@@ -70,20 +73,32 @@ a.default {
 
 /* SIZES */
 .btn.small {
+  font-size: var(--typography-Caption-Bold-fontSize);
+  line-height: var(--typography-Caption-Bold-lineHeight);
   gap: var(--Spacing-x-quarter);
-  height: 40px;
+  padding: calc(var(--Spacing-x1) + 2px) var(--Spacing-x2); /* Special case padding to adjust the missing border */
+}
+
+.btn.small.secondary {
   padding: var(--Spacing-x1) var(--Spacing-x2);
 }
 
 .btn.medium {
   gap: var(--Spacing-x-half);
-  height: 48px;
+  padding: calc(var(--Spacing-x-one-and-half) + 2px) var(--Spacing-x2); /* Special case padding to adjust the missing border */
+}
+
+.medium.secondary {
   padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
 }
 
 .btn.large {
   gap: var(--Spacing-x-half);
-  height: 56px;
+  padding: calc(var(--Spacing-x2) + 2px) var(--Spacing-x3); /* Special case padding to adjust the missing border */
+}
+
+.large.secondary {
+  gap: var(--Spacing-x-half);
   padding: var(--Spacing-x2) var(--Spacing-x3);
 }
 

components/TempDesignSystem/Button/index.tsx

@@ -8,14 +8,23 @@ import { buttonVariants } from "./variants"
 import type { ButtonProps } from "./button"
 
 export default function Button(props: ButtonProps) {
-  const { className, intent, size, theme, wrapping, variant, ...restProps } =
-    props
+  const {
+    className,
+    intent,
+    size,
+    theme,
+    fullWidth,
+    wrapping,
+    variant,
+    ...restProps
+  } = props
 
   const classNames = buttonVariants({
     className,
     intent,
     size,
     theme,
+    fullWidth,
     wrapping,
     variant,
   })

components/TempDesignSystem/Button/variants.ts

@@ -33,6 +33,9 @@ export const buttonVariants = cva(styles.btn, {
     wrapping: {
       true: styles.wrapping,
     },
+    fullWidth: {
+      true: styles.fullWidth,
+    },
   },
   defaultVariants: {
     intent: "primary",