feat: better friend code validation on add friend modal

src/renderer/src/components/text-field/text-field.scss

@@ -74,6 +74,6 @@
   }
 
   &__error-label {
-    color: globals.$danger-color;
+    color: globals.$error-color;
   }
 }

src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.tsx

@@ -51,6 +51,14 @@ export const UserFriendModalAddFriend = ({
     }
   };
 
+  const validateFriendCode = (callback: () => void) => {
+    if (friendCode.length === 8) {
+      return callback();
+    }
+
+    showErrorToast(t("friend_code_length_error"));
+  };
+
   const handleCancelFriendRequest = (userId: string) => {
     updateFriendRequestState(userId, "CANCEL").catch(() => {
       showErrorToast(t("try_again"));
@@ -91,13 +99,13 @@ export const UserFriendModalAddFriend = ({
           disabled={isAddingFriend}
           className="user-friend-modal-add-friend__button"
           type="button"
-          onClick={handleClickAddFriend}
+          onClick={() => validateFriendCode(handleClickAddFriend)}
         >
           {isAddingFriend ? t("sending") : t("add")}
         </Button>
 
         <Button
-          onClick={handleClickSeeProfile}
+          onClick={() => validateFriendCode(handleClickSeeProfile)}
           disabled={isAddingFriend}
           className="user-friend-modal-add-friend__button"
           type="button"

src/renderer/src/scss/globals.scss

@@ -7,6 +7,7 @@ $body-color: #8e919b;
 $border-color: rgba(255, 255, 255, 0.15);
 $success-color: #1c9749;
 $danger-color: #801d1e;
+$error-color: #e11d48;
 $warning-color: #ffc107;
 
 $brand-teal: #16b195;