Refactoring

frontend/src/components/basics/Button.tsx

@@ -1,35 +1,38 @@
-import { defaultIconSize } from "./SvgIcon";
-import { ButtonType, type BasicButtonProps } from "./BasicButtonDefinitions";
+import {defaultIconSize} from "./SvgIcon";
+import {type BasicButtonProps, ButtonType} from "./BasicButtonDefinitions";
 
-type ButtonProps = BasicButtonProps & { 
-  onClick: () => void;
+type ButtonProps = BasicButtonProps & {
+    onClick: () => void;
+    disabled?: boolean;
 };
 
 /**
  * Button component. Styles are defined in BasicButtonDefinitions.ts
  */
 export default function Button({
-  onClick,
-  icon: Icon,
-  text,
-  buttonType = ButtonType.DefaultButton,
-  className = "",
-  ...props
-}: ButtonProps) {
-  return (
-    <button
-      className={`basic-button bg-primary-button-bg ${buttonType.backgroundColor} ${buttonType.textColor} ${className}`}
-      onClick={onClick}
-      {...props}
-    >
-      <div className="flex items-center gap-2">
-        {Icon && (
-          <Icon
-            size={defaultIconSize}
-          />
-        )}
-        {text}
-      </div>
-    </button>
-  );
+                                   onClick,
+                                   icon: Icon,
+                                   text,
+                                   buttonType = ButtonType.DefaultButton,
+                                   className = "",
+                                   disabled = false,
+                                   ...props
+                               }: ButtonProps) {
+    return (
+        <button
+            className={`basic-button bg-primary-button-bg ${buttonType.backgroundColor} ${buttonType.textColor} ${className}`}
+            onClick={onClick}
+            disabled={disabled}
+            {...props}
+        >
+            <div className="flex items-center gap-2">
+                {Icon && (
+                    <Icon
+                        size={defaultIconSize}
+                    />
+                )}
+                {text}
+            </div>
+        </button>
+    );
 }

frontend/src/components/basics/NumberedListItem.tsx

@@ -1,6 +1,6 @@
 type NumberedListItemProps = {
-    /** Number to be displayed in front of text */
-    elementNumber: number;
+    /** Index of the element. Index + 1 is displayed in circle */
+    index: number;
     /** List item text */
     text: string;
 }
@@ -10,11 +10,11 @@ type NumberedListItemProps = {
  * @param elementNumber Number to be displayed
  * @param text Text to be displayed
  */
-export function NumberedListItem({elementNumber, text}: NumberedListItemProps) {
+export function NumberedListItem({index, text}: NumberedListItemProps) {
     return <li className="flex items-start gap-4">
         {/* Step number circle */}
         <div className="circular-container">
-            {elementNumber}
+            {index + 1}
         </div>
 
         {/* Step text */}