AddMessage.Severity.CONFIRM displays red message box in Lightning with the success message

Question

I have a Visualforce page that was initially developed awhile back that was used in the Classic interface. We've moved to the Lightning and the Visualforce page still works, but when uploading a file, the AddMessage.Severity.CONFIRM is now displaying in a red box with the correct success message. I'm not sure why it is not displaying in the correct green message box with the checkmark for success.

Here is the page code:

<apex:page standardController="MyCustomObject__c" extensions="AttachmentController" showHeader="true" sidebar="true" lightningstylesheets="true">
    <apex:sectionHeader title="Attach File to {!MyCustomObject__c.Name}" />
    <apex:form id="attachForm">
        <apex:messages id="msgs" />
        <apex:pageBlock id="idAttachBlock" mode="edit">
                <apex:outputPanel id="upload">
                    <apex:outputText style="font-weight: bold" value="1. Select the File" /><br/>
                    <apex:outputText value="Type the path of the file or click the Browse button to find the file." /> <p/>
                    <apex:inputFile size="80" value="{!fileBody}" fileName="{!fileName}" /><p/>
                    <apex:outputText style="font-weight: bold" value="2. Click the &quot;Attach File&quot; button" escape="false" /> <br/>
                    <apex:outputText value="Click the button below to import the document." /> <p/>
                    <apex:commandButton value="Attach File" action="{!uploadFile}" /><p/>
                </apex:outputPanel> 
                <apex:outputPanel id="finished">
                    <apex:outputText style="font-weight: bold" value="3. Click the Done button to return to the previous page." /><br/>
                    <apex:commandButton value="Done" action="{!redirect}" immediate="true" />            
                </apex:outputPanel>
                <apex:outputPanel rendered="{!isDone}">
                    <p>You have just uploaded the following file(s):</p>
                    <apex:dataList type="square" value="{!items}" var="item" rows="6" >
                        <apex:outputText value="{!item}">File Name:</apex:outputText>
                    </apex:dataList> 
                </apex:outputPanel> 
        </apex:pageBlock>
    </apex:form>
</apex:page>

Here is the code to the controller:

public class AttachmentController {

    private final MyCustomObject__c agreement; 
    
    public ContentVersion cv {
        get {
            if(cv == null) cv = new ContentVersion();
            return cv;
        }
        set;
    }
    
    public transient Blob fileBody {get;set;}
    public String fileName {get;set;}
    public string[] items {get;set;}
    public Boolean isDone {get;set;}
    
    public AttachmentController(ApexPages.StandardController stdController) {
        agreement = (MyCustomObject__c)stdController.getRecord();
        isDone = false;
        items = new string[]{};
    }
    
    public PageReference uploadFile() {
        cv = new ContentVersion();
        cv.ContentLocation = 'S';
        cv.PathOnClient = fileName; 
        cv.Title = fileName; 
        cv.VersionData = fileBody; 
        
        try {
            insert cv;
            Id contentDocumentId = getContentDocumentId(cv.Id);
            insertContentDocumentLink(agreement.Id, contentDocumentId);
            items.add(cv.Title);
            isDone = true;
        }
        catch (DMLException e) {
            ApexPages.addMessage(new ApexPages.message(ApexPages.severity.ERROR,'Error uploading attachment'));
            return null;
        } 
        finally {
            cv.VersionData = null;
            cv = new ContentVersion();
        }
        system.debug('************************************************* we are successfully adding attachment');
        ApexPages.addMessage(new ApexPages.message(ApexPages.severity.CONFIRM,'Attachment uploaded successfully'));
        return null;
    }
    
    public PageReference redirect() {
        PageReference pageRef = new PageReference('/' + agreement.Id);
        pageRef.setRedirect(true);
        return pageRef;
    }
    
    private Id getContentDocumentId(id contentVersionId) {
        return [SELECT ContentDocumentId FROM ContentVersion WHERE Id =: contentVersionId].ContentDocumentId;
    }
    
    private void insertContentDocumentLink(id agreementId, id contentDocumentId) {
        ContentDocumentLink conDocLink = New ContentDocumentLink();
        conDocLink.LinkedEntityId = agreementId;
        conDocLink.ContentDocumentId = contentDocumentId;
        conDocLink.shareType = 'V';
        insert conDocLink;        
    }
}

screenshot:

Answer 1

apex:messages styling should be set in html part. Severity confirm does not effect its state. If you need styling to be decided in Apex you should use apex:pageMessages

This excellent answer goes in detail about the differences between apex:messages vs apex:pageMessages

So you only need to change this line

<apex:messages id="msgs" />

with this

<apex:pageMessages id="msgs" />