feat: UI optimizations for avatar, personal addresses and addNewAddresses modal (#621)

- Created a new `ExternalEmailModal` component for adding external email addresses to the organization
- Updated `AddEmailModal` component to open the `ExternalEmailModal` when selecting 'Add External Email Instead'
- Removed the obsolete external email page and transferred its functionalities to the new `ExternalEmailModal` component
- Added state management for modals in the organization mail addresses page
-Resizing avatar on account creation
-Properly aligned personal addresses

fixes issues: ENG-51 ENG-69 ENG-47

Author: Esther-Lita

apps/web/src/app/[orgShortcode]/settings/org/mail/addresses/_components/add-address-modal.tsx

@@ -6,7 +6,8 @@ import {
   DialogHeader,
   DialogTrigger,
   DialogTitle,
-  DialogDescription
+  DialogDescription,
+  DialogClose
 } from '@/src/components/shadcn-ui/dialog';
 import {
   Select,
@@ -34,7 +35,6 @@ import { At } from '@phosphor-icons/react';
 import { useForm } from 'react-hook-form';
 import { platform } from '@/src/lib/trpc';
 import { useState } from 'react';
-import Link from 'next/link';
 import { z } from 'zod';
 
 const addressFormSchema = z.object({
@@ -54,7 +54,11 @@ const addressFormSchema = z.object({
   })
 });
 
-export function AddEmailModal() {
+export function AddEmailModal({
+  addExternalModalOpen
+}: {
+  addExternalModalOpen: (value: boolean) => void;
+}) {
   const orgShortcode = useGlobalStore((state) => state.currentOrg.shortcode);
   const invalidateEmails =
     platform.useUtils().org.mail.emailIdentities.getOrgEmailIdentities;
@@ -238,8 +242,8 @@ export function AddEmailModal() {
 
             <div className="text-sm font-bold">Deliver Messages To</div>
             <div className="flex w-full flex-col gap-2">
-              <div className="flex gap-2">
-                <div className="flex flex-1 flex-col gap-1">
+              <div className="grid grid-cols-2 gap-2">
+                <div className="flex flex-1 flex-col gap-1 w-full">
                   <div className="flex items-center gap-2">
                     <label className="text-sm">Teams</label>
                   </div>
@@ -369,16 +373,17 @@ export function AddEmailModal() {
                   form.getFieldState('deliversTo').error?.message}
               </div>
 
-              <div className="mt-2 flex flex-wrap gap-2">
-                <Button
-                  variant="secondary"
-                  className="flex-1"
-                  asChild>
-                  <Link
-                    href={`/${orgShortcode}/settings/org/mail/addresses/external`}>
-                    Add External Email Instead
-                  </Link>
-                </Button>
+              <div className="mt-2 grid grid-cols-2 gap-2">
+                <DialogClose asChild>
+                  <Button
+                    variant="secondary"
+                    className="flex-1"
+                    onClick={() => addExternalModalOpen(true)}>
+                    {' '}
+                    Add External Email Instead{' '}
+                  </Button>
+                </DialogClose>
+
                 <Button
                   loading={isCreatingIdentity}
                   className="flex-1"