notification colors are incorrect for some ban types

[DeformedSAS]

for global cooldown by overwatch before it was red, now it's yellow with the new update that changed the notification bar entirely with a new buttton temporary competitive ban was before green/lime while now it's yellow connecting to game coordinator before was blue and now it's yellow

for the colors of the icons and background notification hotfix by me

.mainmenu-top-navbar__alerts
{
    width: fit-children;
    height: 100%;
    margin: 0px 0px;
    vertical-align: center;
    flow-children: right;
    visibility: collapse;
}

.mainmenu-top-navbar__alerts.show
{
    visibility: visible;
}

.mainmenu-top-navbar__alerts-icon
{
    height: 32px;
    width: 32px;
    margin: 6px 6px;
    padding: 4px 4px;
    border-radius: 3px;
    horizontal-align:center;
    vertical-align: center;
    opacity: 0;
    visibility: collapse;
    pre-transform-scale2d: .8, .8;
    transition-property: opacity, pre-transform-scale2d, background-color, brightness, wash-color;
    transition-duration: .25s;
    transition-timing-function: ease-in-out;
}

.mainmenu-top-navbar__alerts-icon.red-alert
{
    wash-color: negativeColor;
    animation-name: navbar-red-alert;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.mainmenu-top-navbar__alerts-icon.yellow-alert
{
    wash-color: lightblue;
    animation-name: navbar-yellow-alert;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.mainmenu-top-navbar__alerts-icon.green-alert
{
    wash-color: green;
    animation-name: navbar-green-alert;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.mainmenu-top-navbar__alerts-icon.show
{
    opacity: 1;
    visibility: visible;
    pre-transform-scale2d: 1, 1;
}

.mainmenu-top-navbar__alerts-icon:hover
{
    brightness: 2;
    background-color: rgba(177, 175, 45, 0.25);
    img-shadow: 0px 0px 3px 1.0 lightblue;
    animation-name: none;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.mainmenu-top-navbar__alerts__gc
{
    vertical-align: center;
    opacity: 0;
    margin: 6px 6px;
    border-radius: 3px;
    visibility: collapse;
    pre-transform-scale2d: .8, .8;
    transition-property: opacity, pre-transform-scale2d;
    transition-duration: .25s;
    transition-timing-function: ease-in-out;
}

.mainmenu-top-navbar__alerts__gc Image
{
    padding: 0px 0px;
    wash-color: lightblue;
    visibility: visible;
    opacity: 1;
    height: 32px;
    width: 32px;
}

.mainmenu-top-navbar__alerts__gc .gc-connect-anim
{
    animation-name: navbar-gc-alert;
    animation-duration: 1.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.mainmenu-top-navbar__alerts__gc.show
{
    visibility: visible;
    opacity: 1;
    pre-transform-scale2d: 1, 1;
}

.mainmenu-top-navbar__alerts__gc:hover
{
    background-color: rgba(255, 255, 255, 0.15);
    wash-color: lightblue;
    brightness: 2;
    animation-name: none;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes 'navbar-red-alert'
{
    0%
    {
        brightness: 1;
        wash-color: negativeColor;
        background-color: rgba(155, 6, 6, 0.25);
        border: 0px solid rgba(155, 6, 6, 0.0);
        img-shadow: 0px 0px 3px 1.0 negativeColor;
    }
    
    50%
    {
        brightness: 2;
        wash-color: negativeColor;
        background-color: rgba(155, 6, 6, 0.25);
        border: 3px solid rgba(155, 6, 6, 0.50);
        img-shadow: 0px 0px 3px 1.0 negativeColor;
    }
    
    100%
    {
        brightness: 1;
        wash-color: negativeColor;
        background-color: rgba(155, 6, 6, 0.25);
        border: 0px solid rgba(155, 6, 6, 0.0);
        img-shadow: 0px 0px 3px 1.0 negativeColor;
    }
    
}

@keyframes 'navbar-yellow-alert'
{
    0%
    {
        brightness: 1;
        wash-color: warningColor;
        background-color: rgba(177, 175, 45, 0.25);
        border: 0px solid rgba(177, 175, 45, 0.0);
        img-shadow: 0px 0px 3px 1.0 warningColor;
    }
    
    50%
    {
        brightness: 2;
        wash-color: warningColor;
        background-color: rgba(177, 175, 45, 0.25);
        border: 3px solid rgba(177, 175, 45, .50);
        img-shadow: 0px 0px 3px 1.0 warningColor;
    }
    
    100%
    {
        brightness: 1;
        wash-color: warningColor;
        background-color: rgba(177, 175, 45, 0.25);
        border: 0px solid rgba(177, 175, 45, 0.0);
        img-shadow: 0px 0px 3px 1.0 warningColor;
    }
    
}
@keyframes 'navbar-green-alert'
{
    0%
    {
        brightness: 1;
        wash-color: green;
        background-color: rgba(177, 175, 45, 0.25);
        border: 0px solid rgba(177, 175, 45, 0.0);
        img-shadow: 0px 0px 3px 1.0 green;
    }
    
    50%
    {
        brightness: 2;
        wash-color: green;
        background-color: rgba(177, 175, 45, 0.25);
        border: 3px solid rgba(177, 175, 45, .50);
        img-shadow: 0px 0px 3px 1.0 green;
    }
    
    100%
    {
        brightness: 1;
        wash-color: green;
        background-color: rgba(177, 175, 45, 0.25);
        border: 0px solid rgba(177, 175, 45, 0.0);
        img-shadow: 0px 0px 3px 1.0 green;
    }
    
}

@keyframes 'navbar-gc-alert'
{
    0%
    {
        brightness: 1;
        wash-color: lightblue;
        transform: rotatez( 1deg );
        img-shadow: 0px 0px 3px 1.0 lightblue;
    }
    
    50%
    {
        brightness: 2;
        wash-color: lightblue;
        transform: rotatez( 180deg );
        img-shadow: 0px 0px 3px 1.0 lightblue;
    }
    
    100%
    {
        brightness: 1;
        wash-color: lightblue;
        transform: rotatez( 359deg );
        img-shadow: 0px 0px 3px 1.0 lightblue;
    }
    
}

typescript hotfix by me

       const nBanRemaining = CompetitiveMatchAPI.GetCooldownSecondsRemaining();
        if (nBanRemaining > 0) {
            const notification = { color_class: "", title: "", tooltip: "", link: "", icon: "" };
            notification.tooltip = CompetitiveMatchAPI.GetCooldownReason();
            const strType = CompetitiveMatchAPI.GetCooldownType();

            if (strType == "global") {
                notification.title = $.Localize("#SFUI_MainMenu_Global_Ban_Title");
                notification.color_class = "red-alert";
                notification.icon = "ban_competitive";
            } else if (strType == "green") {
                notification.title = $.Localize("#SFUI_MainMenu_Temporary_Ban_Title");
                notification.color_class = "green-alert";
                notification.icon = "ban_competitive";
            } else if (strType == "competitive") {
                notification.title = $.Localize("#SFUI_MainMenu_Competitive_Ban_Title");
                notification.color_class = "yellow-alert";
                notification.icon = "ban_competitive";
            }

[DeformedSAS]

screenshots of how it should look like now

global ban color

temporary ban color

connecting to gc color