diff --git a/src/assets/icons/crossWhite.svg b/src/assets/icons/crossWhite.svg new file mode 100644 index 00000000..c94e4534 --- /dev/null +++ b/src/assets/icons/crossWhite.svg @@ -0,0 +1,10 @@ + diff --git a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx index 0b893a2f..f00b012b 100644 --- a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx +++ b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx @@ -37,6 +37,7 @@ import arrowRight from "assets/icons/arrows/arrowRightCreateTask.svg"; import arrowDown from "assets/icons/arrows/selectArrow.png"; import close from "assets/icons/close.png"; import calendarImg from "assets/icons/createTaskCalendar.svg"; +import crossWhite from "assets/icons/crossWhite.svg"; import avatarMok from "assets/images/avatarMok.png"; import "./trackerModal.scss"; @@ -497,7 +498,7 @@ export const TrackerModal = ({ >
{tag.slug}
diff --git a/src/components/Modal/Tracker/TrackerModal/trackerModal.scss b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss index 19321631..2567ea9d 100644 --- a/src/components/Modal/Tracker/TrackerModal/trackerModal.scss +++ b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss @@ -390,11 +390,17 @@ row-gap: 8px; &__name { + color: #000; + font-size: 15px; + font-weight: 400; + line-height: normal; cursor: pointer; display: flex; + align-items: center; justify-content: space-between; - padding: 5px; + padding: 9.5px 12px; border-radius: 8px; + height: 47px; border: 1px solid #e4e4e4; img { @@ -416,17 +422,18 @@ .selectedTag { display: flex; - padding: 3px 5px 3px 8px; - border-radius: 8px; + padding: 7px 7px 7px 8px; + border-radius: 35px; align-items: center; column-gap: 8px; p { - font-weight: 600; - font-size: 15px; + color: #fff; + font-size: 13px; + font-style: normal; + font-weight: 500; + line-height: 0px; margin: 0; - line-height: 15px; - color: white; } .delete { @@ -447,41 +454,46 @@ border: 1px solid #e4e4e4; top: 90%; z-index: 101; - padding: 20px 10px 10px; - background: white; + padding: 30px 10px 10px; + background: #ebebeb; row-gap: 8px; .close { position: absolute; cursor: pointer; - width: 20px; - height: 20px; - right: 5px; - top: 0; + width: 22px; + height: 22px; + right: 9px; + top: 4px; } .tag__item { display: flex; + align-items: center; + height: 42px; + background: white; width: 100%; cursor: pointer; column-gap: 8px; - padding: 5px; + padding: 9px 14px; border: 1px solid #ececec; border-radius: 8px; justify-content: space-between; p { - font-size: 18px; - font-weight: 500; + color: #000; + font-size: 14px; + font-style: normal; + font-weight: 300; + line-height: 0px; margin: 0; - line-height: 20px; text-decoration: none; } span { - width: 18px; - height: 18px; - border-radius: 50px; + width: 22px; + height: 23px; + border-radius: 8px; } }