versionMessage.scss

TLDR

The versionMessage.scss file is a stylesheet file that contains styling rules for the version message UI component.

Classes

VersionMessage

The VersionMessage class defines the styling rules for the version message UI component. The component has the following styles:

• background-color: rgb(var(--sidebar-text-active-border-rgb));
• display: flex;
• flex-direction: row;
• align-items: center;
• text-align: center;
• font-weight: 600;

It also includes nested style rules for the following elements:

• div: width is set to 100%
• .banner: defined as a flex container with row direction, centered alignment, and padding of 10px. The text color is set to #fff.
  • .CompassIcon: font size is set to 18px and right margin is set to 2px
  • .Button: margin left is set to 8px and background color is set to rgba(255, 255, 255, 0.16)

Finally, there is a style rule for the .IconButton class, which is floated to the right and has a text color of #fff.

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
.VersionMessage {
    background-color: rgb(var(--sidebar-text-active-border-rgb));
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    font-weight: 600;

    div {
        width: 100%;
    }

    > .banner {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 10px;
        color: #fff;

        .CompassIcon {
            font-size: 18px;
            margin-right: 2px;
        }

        .Button {
            margin-left: 8px;
            background-color: rgba(255, 255, 255, 0.16);
        }
    }

    .IconButton {
        float: right;
        color: #fff;
    }
}