Repository: louislam/uptime-kuma
File: src/components/PublicGroupList.vue (Vue)

Code before:

        /**
         * Returns formatted certificate expiry or Bad cert message
         * @param {Object} monitor Monitor to show expiry for
         * @returns {string}
         */
        formattedCertExpiryMessage(monitor) {
            if (monitor?.element?.validCert && monitor?.element?.certExpiryDaysRemaining) {
                return monitor.element.certExpiryDaysRemaining + " " + this.$tc("day", monitor.element.certExpiryDaysRemaining);
            } else if (monitor?.element?.validCert === false) {
                return this.$t("noOrBadCertificate");
            } else {
                return "";
            }
        },

        /**
         * Returns certificate expiry based on days remaining
         * @param {Object} monitor Monitor to show expiry for
         * @returns {string}
         */
        certExpiryColor(monitor) {
            if (monitor?.element?.validCert) {
                return monitor.element.certExpiryDaysRemaining > 7 ? "primary" : "danger";
            }
            return "danger";
        },
    }
};
</script>

<style lang="scss" scoped>
@import "../assets/vars";

.no-monitor-msg {
    position: absolute;
    width: 100%;
    top: 20px;
    left: 0;
}

.monitor-list {
    min-height: 46px;
}

.item-name {
    padding-left: 5px;
    padding-right: 5px;
    margin: 0;
    display: inline-block;
}

Review comment (suggestion):
I think the following is more readable (unshure if nullisch coalessing is needed as well).
```suggestion
            if (monitor?.element?.validCert && monitor.element.certExpiryDaysRemaining > 7) {
                return "primary";
            }
            return "danger";
```

Code after:
                return this.$root.monitorList[monitor.element.id].type === "http" || this.$root.monitorList[monitor.element.id].type === "keyword" || this.$root.monitorList[monitor.element.id].type === "json-query";
            }
            return monitor.element.sendUrl && monitor.element.url && monitor.element.url !== "https://" && !this.editMode;
        },

        /**
         * Returns formatted certificate expiry or Bad cert message
         * @param {Object} monitor Monitor to show expiry for
         * @returns {string}
         */
        formattedCertExpiryMessage(monitor) {
            if (monitor?.element?.validCert && monitor?.element?.certExpiryDaysRemaining) {
                return monitor.element.certExpiryDaysRemaining + " " + this.$tc("day", monitor.element.certExpiryDaysRemaining);
            } else if (monitor?.element?.validCert === false) {
                return this.$t("noOrBadCertificate");
            } else {
                return this.$t("Unknown") + " " + this.$tc("day", 2);
            }
        },

        /**
         * Returns certificate expiry based on days remaining
         * @param {Object} monitor Monitor to show expiry for
         * @returns {string}
         */
        certExpiryColor(monitor) {
            if (monitor?.element?.validCert && monitor.element.certExpiryDaysRemaining > 7) {
                return "#059669";
            }
            return "#DC2626";
        },
    }
};
</script>

<style lang="scss" scoped>
@import "../assets/vars";

.extra-info {
    display: flex;
    margin-bottom: 0.5rem;
}

.extra-info > div > div:first-child {
    margin-left: 0 !important;
}

.no-monitor-msg {
    position: absolute;
    width: 100%;
    top: 20px;