@titaui/pc 1.9.76 → 1.9.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@titaui/pc",
-  "version": "1.9.76",
+  "version": "1.9.77",
   "nameCN": "",
   "description": "",
   "main": "src/index.js",
@@ -116,6 +116,7 @@
     "react-content-loader": "^6.0.3",
     "react-cropper": "^2.1.8",
     "react-custom-scrollbars": "^4.2.1",
+    "react-dom": "^17.0.2",
     "react-grid-layout": "^1.2.5",
     "react-perfect-scrollbar": "^1.5.8",
     "react-sizeme": "^3.0.1",

package/src/components/mblog/style.ts

@@ -61,19 +61,18 @@ export const Textarea = styled.textarea`
   word-break: break-all;
   word-wrap: break-word;
   height: 160px;
+  font-size: 14px;
+  line-height: 22px;
 
   &.textarea-setheight {
     visibility: hidden;
     position: absolute;
   }
-/* 
-  &.private__bg {
-    background: url(${require("./assets/lock-radius.png")}) no-repeat right top;
-  } */
 `;
 
 export const Tips = styled.div`
-  line-height: 18px;
+  font-size: 14px;
+  line-height: 22px;
   color: ${(p: any) => p.color};
   text-align: right;
 `;

package/src/components/okr-detail/detail-header/confirm.tsx

@@ -18,7 +18,7 @@ function OkrDetailHeaderConfirm({ onConfirm, title = "", content = "" }: Props):
   }, []);
 
   return (
-    <Confirm visible={visible} type="warning">
+    <Confirm visible={visible} type="warning" zIndex={2400}>
       {
         // @ts-ignore
         <span type="title">{title}</span>

package/src/components/okr-detail/detail-header/index.tsx

@@ -71,13 +71,15 @@ function OkrDetailHeader({ detailInfo }: Props): ReactElement {
       visibility: context.generalVisibility.visibility,
       detailInfo,
       openShareModal: async () => {
-        const krs = await getKrs({ okrId: detailInfo.workId });
-        setKrs(krs);
+        const krss = await getKrs({ okrId: detailInfo.workId });
+        setKrs(krss);
         setShareVisible(true);
       },
       changeVisiblilty: (visibility) => {
-        if (visibility == 4) {
-          userSelectRef.current && userSelectRef.current.open();
+        if (visibility === 4) {
+          if (userSelectRef.current) {
+            userSelectRef.current.open();
+          }
           return;
         }
         changVisiblity(detailInfo.workId, visibility);
@@ -100,10 +102,11 @@ function OkrDetailHeader({ detailInfo }: Props): ReactElement {
             : getLocale("OKR_MyO_Err_Progress"),
         );
         if (res) {
-          follow
-            // @ts-ignore
-            ? await addUser(loginUserId, detailInfo.workId, 3)
-            : await deleteUser(loginUserId, detailInfo.workId, 3);
+          if (follow) {
+            await addUser(loginUserId, detailInfo.workId, 3);
+          } else {
+            await deleteUser(loginUserId, detailInfo.workId, 3);
+          }
           context.setGeneralRoleType(follow ? 3 : 0);
           // 关注
           Toast.Success(getLocale("Mod_Successfuloperat"));
@@ -117,9 +120,11 @@ function OkrDetailHeader({ detailInfo }: Props): ReactElement {
           isFinish ? getLocale("OKR_MyO_Areycloseobjective") : getLocale("OKR_MyO_Err_Restart"),
         );
         if (res) {
-          isFinish
-            ? await close(detailInfo.workId)
-            : await start(detailInfo.workId);
+          if (isFinish) {
+            await close(detailInfo.workId);
+          } else {
+            await start(detailInfo.workId);
+          }
           commonContext.refreshAll();
           // 刷新
           Toast.Success(getLocale("Mod_Successfuloperat"));
@@ -172,7 +177,7 @@ function OkrDetailHeader({ detailInfo }: Props): ReactElement {
             <span className="okr-detail-head-parent">
               <i className="tu-icon-liebiao-duiqinubiao" />
               <span
-                onClick={() => (parent.type == "okr"
+                onClick={() => (parent.type === "okr"
                   ? drawerManager.open("okrDetail", {
                     okrId: parent.id,
                   })
@@ -180,7 +185,7 @@ function OkrDetailHeader({ detailInfo }: Props): ReactElement {
                     krId: parent.id,
                   }))}
               >
-                <span>{parent.type == "okr" ? "O " : "KR "}</span>
+                <span>{parent.type === "okr" ? "O " : "KR "}</span>
                 {parent.name}
               </span>
             </span>
@@ -202,6 +207,7 @@ function OkrDetailHeader({ detailInfo }: Props): ReactElement {
             },
           },
         }}
+        zIndex={2400}
       />
       <PopConfirm
         ref={popRef}

package/src/components/okr-progress-modal/helper.js

@@ -1,7 +1,7 @@
 import React, { Fragment } from "react";
 import { getLocale } from "../../utils/getLocale";
 
-export const getO_SETTING = () => ({
+export const getOSetting = () => ({
   settingTitle: getLocale("OKR_MyO_Pop_Upd_Setmatically"),
   switchLabel: getLocale("OKR_MyO_Pop_Upd_Setmatically"),
   options: [
@@ -16,31 +16,35 @@ export const getO_SETTING = () => ({
       tooltip: getLocale("OKR_MyO_Pop_Upd_SubO"),
     },
   ],
-  getRecommandText: (autoUpdate = true, updateWay = 1, recommandProgressObj) => {
+  getRecommandText: (recommandProgressObj, autoUpdate = true, updateWay = 1) => {
     if (autoUpdate) {
-      if (updateWay == 1) return <span className="auto-update__recommand-tip">{getLocale("OKR_MyO_Pop_Upd_Automatic")}</span>;
-      if (updateWay == 2) return <span className="auto-update__recommand-tip">{getLocale("OKR_MyO_calculationSubO")}</span>;
-    } else {
-      const { childOkrProgress, childkrProgress } = recommandProgressObj;
-      const textArr = [];
-      childkrProgress !== -1 && textArr.push(`${getLocale("OKR_MyO_Pop_Upd_KRCom")}${childkrProgress}${getLocale("OKR_MyO_Pop_Upd_Percentage")}`);
-      childOkrProgress !== -1 && textArr.push(`${getLocale("OKR_MyO_Ew_SubobjCom")}${childOkrProgress}${getLocale("OKR_MyO_Pop_Upd_Percentage")}`);
-      if (textArr.length == 0) return "";
-      return (
-        <>
-          <span className="auto-update__recommand-icon">{getLocale("Per_Ass_Pop_title_Recommend")}</span>
-          <span className="auto-update__recommand-tip">
-            （
-            {textArr.join("，")}
-            ）
-          </span>
-        </>
-      );
+      if (updateWay === 1) return <span className="auto-update__recommand-tip">{getLocale("OKR_MyO_Pop_Upd_Automatic")}</span>;
+      if (updateWay === 2) return <span className="auto-update__recommand-tip">{getLocale("OKR_MyO_calculationSubO")}</span>;
+      return <span />;
     }
+    const { childOkrProgress, childkrProgress } = recommandProgressObj;
+    const textArr = [];
+    if (childkrProgress !== -1) {
+      textArr.push(`${getLocale("OKR_MyO_Pop_Upd_KRCom")}${childkrProgress}${getLocale("OKR_MyO_Pop_Upd_Percentage")}`);
+    }
+    if (childOkrProgress !== -1) {
+      textArr.push(`${getLocale("OKR_MyO_Ew_SubobjCom")}${childOkrProgress}${getLocale("OKR_MyO_Pop_Upd_Percentage")}`);
+    }
+    if (textArr.length === 0) return "";
+    return (
+      <>
+        <span className="auto-update__recommand-icon">{getLocale("Per_Ass_Pop_title_Recommend")}</span>
+        <span className="auto-update__recommand-tip">
+          （
+          {textArr.join("，")}
+          ）
+        </span>
+      </>
+    );
   },
 });
 
-export const getKR_SETTING = () => ({
+export const getKrSetting = () => ({
   settingTitle: getLocale("OKR_MyO_KRCompletion"),
   switchLabel: getLocale("OKR_MyO_SetKRcompletion"),
   options: [
@@ -55,31 +59,35 @@ export const getKR_SETTING = () => ({
       tooltip: getLocale("OKR_MyO_KRcompletionde"),
     },
   ],
-  getRecommandText: (autoUpdate = true, updateWay = 1, recommandProgressObj) => {
+  getRecommandText: (recommandProgressObj, autoUpdate = true, updateWay = 1) => {
     if (autoUpdate) {
-      if (updateWay == 1) return <span className="auto-update__recommand-tip">{getLocale("OKR_MyO_Automatic")}</span>;
-      if (updateWay == 2) return <span className="auto-update__recommand-tip">{getLocale("OKR_MyO_calculationSubO")}</span>;
-    } else {
-      const { childOkrProgress, childEProgress } = recommandProgressObj;
-      const textArr = [];
-      childEProgress !== -1 && textArr.push(`${getLocale("OKR_MyO_Ecompletion")}${childEProgress}${getLocale("OKR_MyO_Pop_Upd_Percentage")}`);
-      childOkrProgress !== -1 && textArr.push(`${getLocale("OKR_MyO_Ew_SubobjCom")}${childOkrProgress}${getLocale("OKR_MyO_Pop_Upd_Percentage")}`);
-      if (textArr.length == 0) return "";
-      return (
-        <>
-          <span className="auto-update__recommand-icon">{getLocale("Per_Ass_Pop_title_Recommend")}</span>
-          <span className="auto-update__recommand-tip" style={{ marginLeft: 0 }}>
-            (
-            {textArr.join("，")}
-            )
-          </span>
-        </>
-      );
+      if (updateWay === 1) return <span className="auto-update__recommand-tip">{getLocale("OKR_MyO_Automatic")}</span>;
+      if (updateWay === 2) return <span className="auto-update__recommand-tip">{getLocale("OKR_MyO_calculationSubO")}</span>;
+      return <span />;
+    }
+    const { childOkrProgress, childEProgress } = recommandProgressObj;
+    const textArr = [];
+    if (childEProgress !== -1) {
+      textArr.push(`${getLocale("OKR_MyO_Ecompletion")}${childEProgress}${getLocale("OKR_MyO_Pop_Upd_Percentage")}`);
+    }
+    if (childOkrProgress !== -1) {
+      textArr.push(`${getLocale("OKR_MyO_Ew_SubobjCom")}${childOkrProgress}${getLocale("OKR_MyO_Pop_Upd_Percentage")}`);
     }
+    if (textArr.length === 0) return "";
+    return (
+      <>
+        <span className="auto-update__recommand-icon">{getLocale("Per_Ass_Pop_title_Recommend")}</span>
+        <span className="auto-update__recommand-tip" style={{ marginLeft: 0 }}>
+          (
+          {textArr.join("，")}
+          )
+        </span>
+      </>
+    );
   },
 });
 
-export const transProgress = (progress) => (progress == -1 ? 0 : progress);
+export const transProgress = (progress) => (progress === -1 ? 0 : progress);
 
 export const getKrOptions = () => [
   {

package/src/components/okr-progress-modal/index.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, FC } from "react";
 import { Input, Modal, Tooltip } from "tita-ui";
 import classNames from "classnames";
 import { getKrRecommandProgress, getORecommandProgress } from "./request-apis";
 import Switch from "../switch";
 import Textarea from "./textarea";
 import {
-  getO_SETTING, getKR_SETTING, transProgress, getKrOptions, getOptions,
+  getOSetting, getKrSetting, transProgress, getKrOptions, getOptions,
 } from "./helper";
 import {
   ErrorTip, List, Item, Icon, Options, OptionsWrapper,
@@ -15,12 +15,12 @@ import { getLocale } from "../../utils/getLocale";
 import { inputWordTrans } from "../../utils/i18n-front-translate";
 import "./index.scss";
 
-const ProgressModal: React.FC<IProgressModalProps> = (props) => {
+const ProgressModal: FC<IProgressModalProps> = (props:IProgressModalProps) => {
   const {
     maxLength, okrInfo, onClose, onOk, title = window.getLocale("OKR_MyO_Prog_Butt_Update"), visible, isKr,
   } = props;
 
-  const configure = isKr ? getKR_SETTING() : getO_SETTING();
+  const configure = isKr ? getKrSetting() : getOSetting();
 
   const reg = /^[0-9]*[1-9][0-9]*$/;
   const [errorProgress, setErrorProgress] = useState(false);
@@ -34,10 +34,7 @@ const ProgressModal: React.FC<IProgressModalProps> = (props) => {
   const [selected, setSelected] = useState<number>(
     isKr ? okrInfo.riskLevel : okrInfo.manualRiskLevel,
   );
-  const [ShowKrProgress] = useState(() =>
-    // @ts-ignore
-    window.BSGlobal.OkrAdvancedSetting.KRSetting.ShowKrProgress);
-
+  const [ShowKrProgress] = useState(window?.BSGlobal?.OkrAdvancedSetting?.KRSetting?.ShowKrProgress);
   const [autoUpdate, setUpdate] = useState(true); // 设置自动更新
   const [updateWay, setUpdateWay] = useState(0); // 自动更新方式 0: 关闭， 1: 根据关见成果， 2: 子目标
   const [settingFolded, setSettingFold] = useState(false);
@@ -46,11 +43,11 @@ const ProgressModal: React.FC<IProgressModalProps> = (props) => {
   const getRecommendProgress = async () => {
     const getRecommandHandler = isKr ? getKrRecommandProgress : getORecommandProgress;
     const data = await getRecommandHandler(isKr ? okrInfo.mileStoneId : okrInfo.workId);
-    if (data.Code == 1) {
+    if (data.Code === 1) {
       const { UpdateProgressWay, Progress } = data.Data;
       setRecommandProgressObj(data.Data);
-      setUpdate(UpdateProgressWay != 0);
-      setUpdateWay(UpdateProgressWay == 0 ? 1 : UpdateProgressWay);
+      setUpdate(UpdateProgressWay !== 0);
+      setUpdateWay(UpdateProgressWay === 0 ? 1 : UpdateProgressWay);
       setProgress(Progress);
     }
   };
@@ -66,9 +63,12 @@ const ProgressModal: React.FC<IProgressModalProps> = (props) => {
   useEffect(() => {
     if (!autoUpdate) return;
     const { childOkrProgress, childkrProgress, childEProgress } = recommandProgressObj;
-    updateWay == 1
-      && setProgress(isKr ? transProgress(childEProgress) : transProgress(childkrProgress));
-    updateWay == 2 && setProgress(transProgress(childOkrProgress));
+    if (updateWay === 1) {
+      setProgress(isKr ? transProgress(childEProgress) : transProgress(childkrProgress));
+    }
+    if (updateWay === 2) {
+      setProgress(transProgress(childOkrProgress));
+    }
   }, [updateWay, autoUpdate, recommandProgressObj]);
 
   let descriptionText = (
@@ -131,6 +131,7 @@ const ProgressModal: React.FC<IProgressModalProps> = (props) => {
       title={title}
       visible={visible}
       width={600}
+      zIndex={2400}
     >
       <List>
         <Item>
@@ -165,7 +166,7 @@ const ProgressModal: React.FC<IProgressModalProps> = (props) => {
                 <Icon
                   color={option.color}
                   className={
-                    selected == option.id ? "tu-icon-singlebox-avtive" : "tu-icon-singlebox-have"
+                    selected === option.id ? "tu-icon-singlebox-avtive" : "tu-icon-singlebox-have"
                   }
                 />
                 <p>{option.text}</p>
@@ -195,7 +196,7 @@ const ProgressModal: React.FC<IProgressModalProps> = (props) => {
                       <span
                         className={classNames(
                           "auto-update-setting__radio",
-                          `auto-update-setting__radio${updateWay == option.key ? "--selected" : ""
+                          `auto-update-setting__radio${updateWay === option.key ? "--selected" : ""
                           }`,
                         )}
                       />

package/src/components/okr-share/index.tsx

@@ -11,7 +11,7 @@ interface Props {
   data: any;
 }
 
-const ShareContent = function ({ closeModal, getModalRef, data }: Props) {
+const ShareContent = ({ closeModal, getModalRef, data }: Props) => {
   const [shareImg, setShareImg] = useState<string>();
   const [showPublish, setShowPublish] = useState(false);
   return (
@@ -43,12 +43,14 @@ const ShareContent = function ({ closeModal, getModalRef, data }: Props) {
 };
 
 interface ShareProps {
-  shareComponent
   data: any;
   visible:boolean;
+  zIndex?: number;
   onClose: () => void
 }
-const OkrShare: React.FC<ShareProps> = ({ data, visible, onClose }) => {
+const OkrShare: React.FC<ShareProps> = ({
+  data, visible, onClose, zIndex,
+}) => {
   const modalRef = useRef<any>();
 
   return (
@@ -60,6 +62,7 @@ const OkrShare: React.FC<ShareProps> = ({ data, visible, onClose }) => {
         // maskClosable
       onCancel={() => onClose()}
       ref={modalRef}
+      zIndex={zIndex}
     >
       {visible ? (
         <ShareContent
@@ -71,5 +74,7 @@ const OkrShare: React.FC<ShareProps> = ({ data, visible, onClose }) => {
     </Modal>
   );
 };
-
+OkrShare.defaultProps = {
+  zIndex: 1300,
+};
 export default OkrShare;

package/src/components/period-selector/common.ts

@@ -5,8 +5,8 @@ import { getMonth } from "../../utils/constant";
 
 export const dealSelectedPeriodData = (period: string) => {
   const option: any = {};
-  option.cycleType = period == "-1" ? "-1" : period.substring(0, 1);
-  option.yqmNum = period.substring(2) == "" ? "0" : period.substring(2);
+  option.cycleType = period === "-1" ? "-1" : period.substring(0, 1);
+  option.yqmNum = period.substring(2) === "" ? "0" : period.substring(2);
   return option;
 };
 
@@ -27,7 +27,7 @@ export const dealYearsRange = (
     }
     const startYear = yearsRange[0];
     const endYear = yearsRange[yearsRange.length - 1];
-    for (let i = startYear; i <= endYear; i++) {
+    for (let i = startYear; i <= endYear; i += 1) {
       yearsData.push({
         checked: false,
         order: [`${i}`],
@@ -51,7 +51,7 @@ export const formatPeriod = (selected: SelectedInterface) => {
   if (!selected) return "";
   const quarter = ["", `${getLocale("OKR_MyO_Pop_1stQuarter")}`, `${getLocale("OKR_MyO_Pop_2ndQuarter")}`, `${getLocale("OKR_MyO_Pop_3rdQuarter")}`, `${getLocale("OKR_MyO_Pop_4thQuarter")}`];
   let cycleDate = "";
-  const annualNum = selected.annualNum == "-1" ? `${getLocale("OKR_MyO_Butt_Allyears")}` : `${selected.annualNum}${isEn ? "" : "年"}`;
+  const annualNum = selected.annualNum === "-1" ? `${getLocale("OKR_MyO_Butt_Allyears")}` : `${selected.annualNum}${isEn ? "" : "年"}`;
   const month = getMonth();
   switch (`${selected.cycleType}`) {
     case "-1":
@@ -73,7 +73,7 @@ export const formatPeriod = (selected: SelectedInterface) => {
       }`;
       break;
     case "5":
-      cycleDate = selected.yqmNum == "1" ? `${getLocale("OKR_MyO_Pop_Firsthalf")}` : `${getLocale("OKR_MyO_Pop_Secondhalf")}`;
+      cycleDate = selected.yqmNum === "1" ? `${getLocale("OKR_MyO_Pop_Firsthalf")}` : `${getLocale("OKR_MyO_Pop_Secondhalf")}`;
       break;
     default:
       cycleDate = `${getLocale("Mod_Customization")}`;
@@ -88,9 +88,9 @@ export const computeYearIndex = (
 ) => {
   let newIndex;
   const currentYearIndex = yearsData.findIndex(
-    (item) => Number(item.title) == currentYear,
+    (item) => Number(item.title) === currentYear,
   );
-  if (computeType == "add") {
+  if (computeType === "add") {
     newIndex = currentYearIndex + 1;
   } else {
     newIndex = currentYearIndex - 1;
@@ -112,6 +112,12 @@ export const getDateRangeByCycle = (cycle: ICycle, startMonth: number = 1) => {
     };
   }
   switch (cycle.cycleType) {
+    case "-1": {
+      return {
+        startDate: "",
+        endDate: "",
+      };
+    }
     case "1": {
       const start = moment()
         .year(Number(cycle.annualNum))
@@ -159,7 +165,7 @@ export const getDateRangeByCycle = (cycle: ICycle, startMonth: number = 1) => {
         .year(Number(cycle.annualNum))
         .month(startMonth - 1)
         .date(1);
-      if (cycle.yqmNum == "2") start.add(6, "M");
+      if (cycle.yqmNum === "2") start.add(6, "M");
       return {
         startDate: start.format("YYYY/MM/DD"),
         endDate: start.add(5, "month").endOf("M").format("YYYY/MM/DD"),
@@ -210,8 +216,8 @@ export function getDefalutCycle(setting) {
     };
   } if (setting.isOpenBimonthly) {
     let month = new Date().getMonth() + 1;
-    if (setting.yearStartMonth % 2 == 1) {
-      month -= (month % 2 == 1 ? 0 : 1);
+    if (setting.yearStartMonth % 2 === 1) {
+      month -= (month % 2 === 1 ? 0 : 1);
     } else {
       month = month - (month % 2) || 12;
     }

package/src/pages/okr-map/export-modules/okr-map/header/index.scss

@@ -1,4 +1,5 @@
-$font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+$font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica,
+  sans-serif, PingFang SC, Microsoft YaHei;
 
 .titapage-okr-map {
   &__header {
@@ -6,7 +7,7 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
     background: #ffffff;
     box-shadow: 0px 0px 8px 0px #e9eef3;
     position: relative;
-    border-bottom: 1px solid #E9ECF0;
+    border-bottom: 1px solid #e9ecf0;
     &__folded {
       // top: -114px;
       height: 0;
@@ -65,7 +66,7 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
         vertical-align: middle;
       }
       &:hover {
-        color: #2879FF;
+        color: #2879ff;
         &:before {
           background-image: url('../../../images/trigger-hover.svg');
         }
@@ -103,11 +104,11 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
           }
         }
       }
-      &-showkr,&-level {
-
+      &-showkr,
+      &-level {
         padding: 5px 20px;
         &:hover {
-          background: #F7F8FA;
+          background: #f7f8fa;
         }
       }
       &--show-more {
@@ -119,21 +120,22 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
         height: 30px;
         line-height: 30px;
         cursor: pointer;
-        color: #3F4755;
+        color: #3f4755;
         font-family: $font-family;
         font-size: 12px;
         &:after {
           position: absolute;
           display: inline-block;
-          background: url('../../../images/line-down-arrow.svg') transparent no-repeat 50% 50%;
-          content: "";
+          background: url('../../../images/line-down-arrow.svg') transparent
+            no-repeat 50% 50%;
+          content: '';
           height: 6px;
           width: 10px;
           right: 0;
           top: calc(50% - 3px);
         }
       }
-      
+
       &-btns {
         position: absolute;
         vertical-align: middle;
@@ -145,22 +147,24 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
   }
   &__show-more-popup {
     padding: 11px 0;
-    background: #FFFFFF;
+    background: #ffffff;
     box-shadow: 0px 4px 12px 0px rgba(127, 145, 180, 0.2);
-    border: 1px solid #E9ECF0;
+    border: 1px solid #e9ecf0;
     border-radius: 2px;
   }
 }
 .titapage-okr-map__dark {
   .titapage-okr-map__content-search {
     &:before {
-      background: url(../../../images/line-down-arrow-dark.svg) transparent no-repeat 50% 50%;
+      background: url(../../../images/line-down-arrow-dark.svg) transparent
+        no-repeat 50% 50%;
       background-size: 100%;
     }
   }
   .tui-select-selector {
     &:before {
-      background: url(../../../images/down-arrow-dark.svg) transparent no-repeat 50% 50%;
+      background: url(../../../images/down-arrow-dark.svg) transparent no-repeat
+        50% 50%;
       background-size: 100%;
     }
   }
@@ -212,7 +216,7 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
           border: none;
           color: #fff;
           &:hover {
-            background: #5c8EFF;
+            background: #5c8eff;
           }
         }
         .titaui-period-selector__down-arrow {
@@ -242,7 +246,7 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
           }
         }
         &:hover {
-          background-color: #515A69;
+          background-color: #515a69;
         }
       }
     }
@@ -261,14 +265,14 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
   top: 0;
   bottom: 0;
 }
-.titapage-okr-map--kr-dialog{
+.titapage-okr-map--kr-dialog {
   &--title {
     &:before {
       display: inline-block;
       content: 'i';
       width: 16px;
       height: 16px;
-      background-color: #FFBC00;
+      background-color: #ffbc00;
       color: #fff;
       text-align: center;
       line-height: 16px;
@@ -281,8 +285,9 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
   &--content {
     font-size: 14px;
     font-family: $font-family;
-    color: #6F7886;
+    color: #6f7886;
     line-height: 20px;
     padding: 0 32px;
+    display: block;
   }
 }