Added bullet lists to selection checkbox and alerts tooltips.

Author: MadOPcode

src/components/Tooltip/styles.module.scss

@@ -17,6 +17,23 @@
   box-shadow: 0px 5px 25px #c6c6c6;
   background: #fff;
 
+  ul {
+    margin: 0;
+    padding: 0;
+    // list-style: disc inside;
+
+    li {
+      margin: 0;
+      padding: 0;
+
+      &::before {
+        content: "\2022\00A0";
+        display: inline;
+        margin-right: 3px;
+      }
+    }
+  }
+
   .tooltipArrow {
     display: block;
     top: 100%;

src/routes/WorkPeriods/components/PeriodAlerts/index.jsx

@@ -15,11 +15,19 @@ import styles from "./styles.module.scss";
  */
 const PeriodAlerts = ({ alerts, className }) => {
   const alertsTooltipContent = useMemo(() => {
-    return alerts
-      ? alerts.map((alertId) => (
-          <div key={alertId}>{ALERT_MESSAGE_MAP[alertId]}</div>
-        ))
-      : null;
+    if (!alerts) {
+      return null;
+    }
+    if (alerts.length === 1) {
+      return ALERT_MESSAGE_MAP[alerts[0]];
+    }
+    return (
+      <ul>
+        {alerts.map((alertId) => (
+          <li key={alertId}>{ALERT_MESSAGE_MAP[alertId]}</li>
+        ))}
+      </ul>
+    );
   }, [alerts]);
 
   return (

src/routes/WorkPeriods/components/PeriodItem/index.jsx

@@ -235,20 +235,23 @@ const PeriodItem = ({
  * working period is disabled.
  *
  * @param {Array} reasonIds array of REASON_DISABLED values
- * @returns {?Array}
+ * @returns {any}
  */
 function formatReasonsDisabled(reasonIds) {
   if (!reasonIds) {
     return null;
   }
+  if (reasonIds.length === 1) {
+    return REASON_DISABLED_MESSAGE_MAP[reasonIds[0]];
+  }
   const reasons = [];
   for (let i = 0, len = reasonIds.length; i < len; i++) {
     let reasonId = reasonIds[i];
     reasons.push(
-      <div key={reasonId}>{REASON_DISABLED_MESSAGE_MAP[reasonId]}</div>
+      <li key={reasonId}>{REASON_DISABLED_MESSAGE_MAP[reasonId]}</li>
     );
   }
-  return reasons;
+  return <ul>{reasons}</ul>;
 }
 
 PeriodItem.propTypes = {