More button animations

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>

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>
   );

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>

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}`}

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>

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>
 

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",

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",

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}>