From dd6862cd910287068881431859cf97af60c9797f Mon Sep 17 00:00:00 2001
From: Ebin Bellini <bengans.polare@gmail.com>
Date: Thu, 23 Apr 2026 19:39:45 +0200
Subject: [PATCH 1/2] More button animations

We already had the loading prop for <Button>. This change makes every
button that should show a loading state actually use this prop.

Added the animation to:
- Login button
- Save draft button
- Submit application button
- Change password modal primary button
- Delete account modal primary button

Also changed some <a> to <Link>
---
 frontend/apply/src/app/account/page.tsx         |  6 ++++--
 .../src/app/components/ApplicationCard.tsx      |  5 +++--
 .../src/app/components/ApplicationForm.tsx      | 17 ++++++++++-------
 frontend/apply/src/app/components/Button.tsx    |  9 +++++++--
 frontend/apply/src/app/components/Modal.tsx     | 16 +++++++++-------
 .../src/app/components/OpenPositionCard.tsx     |  5 +++--
 frontend/apply/src/app/i18n/locales/en.json     |  4 +---
 frontend/apply/src/app/i18n/locales/sv.json     |  4 +---
 frontend/apply/src/app/login/page.tsx           | 16 ++++++++++------
 9 files changed, 48 insertions(+), 34 deletions(-)

diff --git a/frontend/apply/src/app/account/page.tsx b/frontend/apply/src/app/account/page.tsx
index 2760ac5..b148057 100644
--- a/frontend/apply/src/app/account/page.tsx
+++ b/frontend/apply/src/app/account/page.tsx
@@ -589,7 +589,8 @@ export default function Account() {
         onSubmit={handlePasswordSubmit}
         title={t("accountPage.changePassword")}
         primaryButtonDisabled={passwordLoading}
-        primaryButtonText={passwordLoading ? t("common.saving") : t("accountPage.changePassword")}
+        primaryButtonText={t("accountPage.changePassword")}
+        primaryButtonLoading={passwordLoading}
         secondaryButtonDisabled={passwordLoading}
       >
         {passwordSuccess ? (
@@ -754,7 +755,8 @@ export default function Account() {
         onSubmit={handleDeleteAccount}
         title={t("accountPage.deleteAccount")}
         primaryButtonDisabled={deleteLoading}
-        primaryButtonText={deleteLoading ? t("accountPage.deleting") : t("common.delete")}
+        primaryButtonText={t("common.delete")}
+        primaryButtonLoading={deleteLoading}
         secondaryButtonDisabled={deleteLoading}
       >
         <p>{t("accountPage.deleteAccountConfirmation")}</p>
diff --git a/frontend/apply/src/app/components/ApplicationCard.tsx b/frontend/apply/src/app/components/ApplicationCard.tsx
index 29d4abe..38d2365 100644
--- a/frontend/apply/src/app/components/ApplicationCard.tsx
+++ b/frontend/apply/src/app/components/ApplicationCard.tsx
@@ -7,6 +7,7 @@ import { formatDateRange } from "@/utils/dateFormat";
 import { Application } from "@/utils/types";
 import { getImageUrl } from "@/utils/imageUrl";
 import Image from "next/image";
+import Link from "next/link";
 
 type Props = {
   application: Application;
@@ -58,12 +59,12 @@ const ApplicationCard = ({ application }: Props) => {
       </div>
 
       <div className={styles.cardButton}>
-        <a
+        <Link
           className={"smallButton"}
           href={`/apply/${application.position_details.id}`}
         >
           {t("common.viewApplication")}
-        </a>
+        </Link>
       </div>
     </div>
   );
diff --git a/frontend/apply/src/app/components/ApplicationForm.tsx b/frontend/apply/src/app/components/ApplicationForm.tsx
index f89c8ca..f315e2a 100644
--- a/frontend/apply/src/app/components/ApplicationForm.tsx
+++ b/frontend/apply/src/app/components/ApplicationForm.tsx
@@ -12,6 +12,7 @@ import FormInput from "./FormInput";
 import FormTextarea from "./FormTextarea";
 import { formatDate } from "@/utils/dateFormat";
 import Modal from "./Modal";
+import Button from "./Button";
 
 type ApplicationFormProps = {
   position: Position;
@@ -165,7 +166,6 @@ export default function ApplicationForm({
 
   const handleDeleteDraft = async (event: React.FormEvent) => {
     event.preventDefault();
-    console.log("Deleting draft with ID:", draftId);
     if (!isDraft || draftId === null) return;
     setDeletingDraft(true);
     setError(null);
@@ -422,7 +422,7 @@ export default function ApplicationForm({
           {editable ? (
             <>
               <div className={styles.draftSaveGroup}>
-                <button
+                <Button
                   type="button"
                   onClick={() => handleSubmit("draft")}
                   disabled={
@@ -434,9 +434,10 @@ export default function ApplicationForm({
                     !gdpr
                   }
                   className={`button ${styles.draftButton}`}
+                  loading={savingDraft}
                 >
-                  {savingDraft ? t("common.saving") : t("applicationForm.saveDraft")}
-                </button>
+                  {t("applicationForm.saveDraft")}
+                </Button>
 
                 {showDraftSavedMessage && (
                   <p className={styles.draftSavedMessage}>
@@ -452,7 +453,7 @@ export default function ApplicationForm({
                 )}
               </div>
 
-              <button
+              <Button
                 type="button"
                 onClick={() => {
                   setSubmitSuccess(false);
@@ -467,9 +468,10 @@ export default function ApplicationForm({
                   !gdpr
                 }
                 className={`button ${styles.submitButton}`}
+                loading={submittingApplication}
               >
-                {submittingApplication ? t("applicationForm.submitting") : t("common.apply")}
-              </button>
+                {t("common.apply")}
+              </Button>
 
               {isDraft && (
                 <button
@@ -499,6 +501,7 @@ export default function ApplicationForm({
         onClose={() => setShowDeleteModal(false)}
         title={t("applicationForm.deleteDraft")}
         primaryButtonText={t("common.delete")}
+        primaryButtonLoading={deletingDraft}
         onSubmit={handleDeleteDraft}
       >
         <p>{t("applicationForm.deleteDraftConfirmation")}</p>
diff --git a/frontend/apply/src/app/components/Button.tsx b/frontend/apply/src/app/components/Button.tsx
index d3a28fe..50dd19e 100644
--- a/frontend/apply/src/app/components/Button.tsx
+++ b/frontend/apply/src/app/components/Button.tsx
@@ -11,6 +11,8 @@ interface ButtonProps {
   children: React.ReactNode;
   disabled?: boolean;
   loading?: boolean;
+  type?: "button" | "submit" | "reset";
+  secondaryButton?: boolean;
 }
 
 export default function Button({
@@ -20,6 +22,8 @@ export default function Button({
   disabled = false,
   loading = false,
   children,
+  type = "button",
+  secondaryButton = false,
 }: ButtonProps) {
   const button = React.useRef<HTMLButtonElement>(null);
   if (loading) {
@@ -31,15 +35,16 @@ export default function Button({
 
   return (
     <button
-      className={`button activeButton ${className} ${disabled ? "disabled" : ""} ${
+      className={`button ${secondaryButton ? "" : "activeButton"} ${className} ${disabled ? "disabled" : ""} ${
         loading ? "loading" : ""
       }`}
       onClick={onClick}
       style={style}
       ref={button}
       disabled={disabled}
+      type={type}
     >
-      {buttonWidth && (
+      {buttonWidth !== 0 && (
         <svg
           className="loading-indicator"
           viewBox={`0 0 ${buttonWidth + borderWidth * 2} ${buttonHeight + borderWidth * 2}`}
diff --git a/frontend/apply/src/app/components/Modal.tsx b/frontend/apply/src/app/components/Modal.tsx
index 9a9e3df..6f8cce7 100644
--- a/frontend/apply/src/app/components/Modal.tsx
+++ b/frontend/apply/src/app/components/Modal.tsx
@@ -2,6 +2,7 @@
 
 import { useTranslation } from "react-i18next";
 import styles from "@/styles/modal.module.css";
+import Button from "./Button";
 
 interface ModalProps {
   isOpen: boolean;
@@ -11,6 +12,7 @@ interface ModalProps {
   children: React.ReactNode;
   primaryButtonDisabled?: boolean;
   primaryButtonText: string;
+  primaryButtonLoading?: boolean;
   secondaryButtonDisabled?: boolean;
   secondaryButtonText?: string;
   showSecondaryButton?: boolean;
@@ -24,6 +26,7 @@ export default function Modal({
   children,
   primaryButtonDisabled,
   primaryButtonText,
+  primaryButtonLoading = false,
   secondaryButtonDisabled,
   secondaryButtonText = "",
   showSecondaryButton = true,
@@ -56,22 +59,21 @@ export default function Modal({
           {children}
           <div className={styles.modalActions}>
             {showSecondaryButton && (
-              <button
-                type="button"
-                className="button"
+              <Button
                 onClick={onClose}
                 disabled={secondaryButtonDisabled}
+                secondaryButton
               >
                 {secondaryButtonText}
-              </button>
+              </Button>
             )}
-            <button
+            <Button
               type="submit"
-              className="button activeButton"
               disabled={primaryButtonDisabled}
+              loading={primaryButtonLoading}
             >
               {primaryButtonText}
-            </button>
+            </Button>
           </div>
         </form>
       </div>
diff --git a/frontend/apply/src/app/components/OpenPositionCard.tsx b/frontend/apply/src/app/components/OpenPositionCard.tsx
index f95191d..6668a0b 100644
--- a/frontend/apply/src/app/components/OpenPositionCard.tsx
+++ b/frontend/apply/src/app/components/OpenPositionCard.tsx
@@ -7,6 +7,7 @@ import "@/i18n/config";
 import { formatDate } from "@/utils/dateFormat";
 import Image from "next/image";
 import { getImageUrl } from "@/utils/imageUrl";
+import Link from "next/link";
 
 type Props = {
   position: Position;
@@ -42,7 +43,7 @@ const OpenPositionCard = ({ position }: Props) => {
           <h4>
             {t("openPositionCard.deadline")}: {formatDate(position.recruitment_end)}
           </h4>
-          <a
+          <Link
             className="smallButton"
             onClick={(e) => e.stopPropagation()}
             href={`/apply/${position.id}`}
@@ -52,7 +53,7 @@ const OpenPositionCard = ({ position }: Props) => {
               : position.user_app_status === "In draft"
                 ? t("openPositionCard.openDraft")
                 : t("common.apply")}
-          </a>
+          </Link>
         </div>
       </div>
 
diff --git a/frontend/apply/src/app/i18n/locales/en.json b/frontend/apply/src/app/i18n/locales/en.json
index 357c252..43e45b0 100644
--- a/frontend/apply/src/app/i18n/locales/en.json
+++ b/frontend/apply/src/app/i18n/locales/en.json
@@ -71,7 +71,6 @@
     "password": "Password",
     "emailRequired": "Email is required",
     "passwordRequired": "Password is required",
-    "signingIn": "Signing in...",
     "signIn": "Sign in",
     "noAccount": "Don't have an account? Register here",
     "forgotPassword": "Forgot password?",
@@ -131,8 +130,7 @@
     "deleteAccount": "Delete Account",
     "deleteAccountConfirmation": "Are you sure you want to delete your account? This action cannot be undone.",
     "accountDeletePasswordError": "Failed to delete account. Current password is incorrect.",
-    "accountDeleteError": "Failed to delete account. Please try again.",
-    "deleting": "Deleting..."
+    "accountDeleteError": "Failed to delete account. Please try again."
   },
   "openPositionCard": {
     "deadline": "Deadline",
diff --git a/frontend/apply/src/app/i18n/locales/sv.json b/frontend/apply/src/app/i18n/locales/sv.json
index 46b3090..872da39 100644
--- a/frontend/apply/src/app/i18n/locales/sv.json
+++ b/frontend/apply/src/app/i18n/locales/sv.json
@@ -71,7 +71,6 @@
     "password": "Lösenord",
     "emailRequired": "E-post krävs",
     "passwordRequired": "Lösenord krävs",
-    "signingIn": "Loggar in...",
     "signIn": "Logga in",
     "noAccount": "Har du inget konto? Registrera dig här",
     "forgotPassword": "Glömt lösenord?",
@@ -131,8 +130,7 @@
     "deleteAccount": "Radera konto",
     "deleteAccountConfirmation": "Är du säker på att du vill radera ditt konto? Denna åtgärd kan inte ångras.",
     "accountDeletePasswordError": "Det gick inte att radera kontot. Nuvarande lösenord är felaktigt.",
-    "accountDeleteError": "Det gick inte att radera kontot. Försök igen.",
-    "deleting": "Raderar..."
+    "accountDeleteError": "Det gick inte att radera kontot. Försök igen."
   },
   "openPositionCard": {
     "deadline": "Sista ansökningsdag",
diff --git a/frontend/apply/src/app/login/page.tsx b/frontend/apply/src/app/login/page.tsx
index 7b52e53..ea7d336 100644
--- a/frontend/apply/src/app/login/page.tsx
+++ b/frontend/apply/src/app/login/page.tsx
@@ -3,6 +3,7 @@
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import TextInput from "@/components/TextInput";
+import Button from "@/components/Button";
 import styles from "./login.module.css";
 import { logIn } from "@/utils/auth";
 import { useTranslation } from "react-i18next";
@@ -73,18 +74,21 @@ export default function Login() {
             name="password"
             type="password"
             placeholder={t("loginPage.passwordPlaceholder")}
-            error={error && password === "" ? t("loginPage.passwordRequired") : ""}
+            error={
+              error && password === "" ? t("loginPage.passwordRequired") : ""
+            }
           />
 
           {error && <div className={styles.errorMessage}>{error}</div>}
 
-          <button
-            className="button activeButton"
-            style={{ margin: "12px auto 0" }}
+          <Button
+            style={{ margin: "16px auto 0" }}
             disabled={loading}
+            loading={loading}
+            type={"submit"}
           >
-            {loading ? t("loginPage.signingIn") : t("loginPage.signIn")}
-          </button>
+            {t("loginPage.signIn")}
+          </Button>
         </form>
 
         <div className={styles.links}>

From be0965fe5c400a2b8bf3e90db2ca94f28eab591c Mon Sep 17 00:00:00 2001
From: Ebin Bellini <bengans.polare@gmail.com>
Date: Tue, 12 May 2026 22:20:46 +0200
Subject: [PATCH 2/2] Remove dead code in Button.tsx

---
 frontend/apply/src/app/components/Button.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/apply/src/app/components/Button.tsx b/frontend/apply/src/app/components/Button.tsx
index 50dd19e..67bd433 100644
--- a/frontend/apply/src/app/components/Button.tsx
+++ b/frontend/apply/src/app/components/Button.tsx
@@ -26,8 +26,6 @@ export default function Button({
   secondaryButton = false,
 }: ButtonProps) {
   const button = React.useRef<HTMLButtonElement>(null);
-  if (loading) {
-  }
   const buttonWidth = button.current?.offsetWidth || 0;
   const buttonHeight = button.current?.offsetHeight || 0;
   const cornerRadius = 10;