version 3

src/pages/common/components/ChatComponent/ChatComponent.module.scss

@@ -97,6 +97,7 @@
   margin-bottom: 0.8rem;
   margin-right: 0.5rem;
   height: 1.5rem;
+  color: var(--primary-text);
 }
 
 .sendIcon {

src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.module.scss

@@ -14,7 +14,7 @@
 .dateTitle {
   padding: 0.0625rem 0.1875rem;
   border-radius: 0.25rem;
-  background-color: $c-pink-hover-feed-cards;
+  background-color: var(--secondary-background);
   font-size: $xxsmall;
   text-align: center;
   color: $c-pink-primary;

src/pages/common/components/ChatComponent/components/ChatContent/components/Separator/Separator.module.scss

@@ -9,7 +9,7 @@
 .line {
   width: 100%;
   height: 0.0625rem;
-  background-color: $c-neutrals-200;
+  background-color: var(--gentle-stroke);
 }
 
 .content {

src/pages/common/components/CommonMemberInfo/components/PopoverItem/PopoverItem.tsx

@@ -97,7 +97,7 @@ export const PopoverItem: FC<CommonMemberInfoProps> = (props) => {
     return (
       <Button
         className={styles.actionButton}
-        variant={ButtonVariant.OutlinePink}
+        variant={ButtonVariant.OutlineDarkPink}
         disabled={!canRequestToJoin}
         onClick={() =>
           onJoinCircle(

src/pages/common/components/FeedCard/components/FeedCardTags/FeedCardTags.module.scss

@@ -48,7 +48,7 @@
   width: 1.25rem;
   height: 1.25rem;
   margin-left: 0.75rem;
-  color: $c-gray-800;
+  color: var(--primary-text);
 }
 
 .unseen {

src/pages/common/components/JoinProjectModal/JoinProjectModal.tsx

@@ -3,7 +3,7 @@ import { useSelector } from "react-redux";
 import { selectUser } from "@/pages/Auth/store/selectors";
 import { GovernanceService, ProposalService } from "@/services";
 import { Modal } from "@/shared/components";
-import { Colors, ProposalsTypes } from "@/shared/constants";
+import { ProposalsTypes } from "@/shared/constants";
 import { useIsTabletView } from "@/shared/hooks/viewport";
 import { Common, Governance } from "@/shared/models";
 import { emptyFunction, getUserName } from "@/shared/utils";
@@ -170,8 +170,6 @@ const JoinProjectModal: FC<PropsWithChildren<JoinProjectModalProps>> = (
       onClose={state.isLoading ? emptyFunction : handleClose}
       hideCloseButton={state.isLoading || (isTabletView && !state.errorText)}
       title={state.step === JoinProjectSteps.FORM ? modalTitle : ""}
-      closeColor={Colors.black}
-      closeIconSize={24}
       mobileFullScreen
       styles={{
         headerWrapper: styles.modalHeaderWrapper,

src/pages/commonCreation/components/CommonCreation/CommonCreation.module.scss

@@ -18,11 +18,12 @@
   align-items: center;
   text-decoration: none;
   font-size: $moderate;
+  color: var(--primary-text);
   --btn-pl: 0;
   --btn-pr: 0;
 
   &:hover {
-    --btn-color: black;
+    --btn-color: #{var(hover-fill)};
     text-decoration: underline;
   }
 

src/pages/commonFeed/components/FeedLayout/components/FeedItemPreviewModal/FeedItemPreviewModal.tsx

@@ -3,11 +3,7 @@ import { FeedItem } from "@/pages/common";
 import { useChatContext } from "@/pages/common/components/ChatComponent";
 import { Modal } from "@/shared/components";
 import { useIsTabletView } from "@/shared/hooks/viewport";
-import {
-  ModalType,
-  CloseIconVariant,
-  FeedLayoutItemChangeData,
-} from "@/shared/interfaces";
+import { ModalType, FeedLayoutItemChangeData } from "@/shared/interfaces";
 import { Circles, CommonFeed } from "@/shared/models";
 import styles from "./FeedItemPreviewModal.module.scss";
 
@@ -68,13 +64,11 @@ const FeedItemPreviewModal: FC<FeedItemPreviewModalProps> = (props) => {
         modalOverlay: styles.modalOverlay,
         modalWrapper: styles.modalWrapper,
       }}
-      closeIconSize={16}
       isShowing={
         Boolean(isShowFeedItemDetailsModal) && Boolean(selectedFeedItem)
       }
       onClose={handleCloseModal}
       type={ModalType.MobilePopUp}
-      closeIconVariant={CloseIconVariant.Thin}
     >
       {selectedFeedItem && (
         <>

src/pages/commonFeed/components/FeedLayout/components/ProfileContent/ProfileContent.tsx

@@ -150,7 +150,7 @@ const ProfileContent: FC<ProfileContentProps> = (props) => {
       {country && <p className={styles.country}>{country.name}</p>}
       <Button
         className={styles.dmButton}
-        variant={ButtonVariant.PrimaryBlack}
+        variant={ButtonVariant.OutlineDarkPink}
         leftIcon={<MessageIcon className={styles.dmButtonIcon} />}
         onClick={handleDMButtonClick}
       >

src/pages/commonFeed/components/FeedLayout/components/SplitView/SplitView.module.scss

@@ -15,8 +15,8 @@
   &:global(.vertical) {
     width: 0.6875rem;
     margin: 0 -0.3125rem;
-    border-left: 0.3125rem solid var(--gentle-stroke);
-    border-right: 0.3125rem solid var(--gentle-stroke);
+    border-left: 0.3125rem solid transparent;
+    border-right: 0.3125rem solid transparent;
     cursor: col-resize;
 
     &:hover {

src/pages/commonFeed/components/HeaderContent/components/NewStreamButton/NewStreamButton.module.scss

@@ -5,7 +5,7 @@
   background-color: transparent;
 
   &:hover {
-    background-color: $light-gray-1;
+    background-color: var(--hover-fill);
   }
 }
 

src/shared/components/DeleteModal/DeleteModal.tsx

@@ -8,15 +8,16 @@ import React, {
 import { useDispatch } from "react-redux";
 import { deleteDiscussionMessage } from "@/pages/OldCommon/store/actions";
 import { ChatService } from "@/services";
-import { Loader, Button } from "@/shared/components";
-import { Colors, EntityTypes } from "@/shared/constants";
+import { Loader } from "@/shared/components";
+import { EntityTypes } from "@/shared/constants";
 import { useNotification } from "@/shared/hooks";
 import {
   Common,
   Discussion,
   DiscussionMessage,
   Proposal,
 } from "@/shared/models";
+import { Button, ButtonVariant } from "@/shared/ui-kit";
 import { Modal } from "../Modal";
 import "./index.scss";
 
@@ -128,8 +129,6 @@ const DeleteModal: FC<PropsWithChildren<ReportModalProps>> = (props) => {
       isShowing={isShowing}
       onClose={onClose}
       title="Are you sure?"
-      closeColor={Colors.black}
-      closeIconSize={20}
       styles={{
         header: "delete-modal__header",
         content: "delete-modal__content",
@@ -141,13 +140,15 @@ const DeleteModal: FC<PropsWithChildren<ReportModalProps>> = (props) => {
           disabled={isLoading}
           className="delete-modal__button-container__button delete-modal__button-container__cancel"
           onClick={onClose}
+          variant={ButtonVariant.OutlineDarkPink}
         >
           Cancel
         </Button>
         <Button
           disabled={isLoading}
           className="delete-modal__button-container__button delete-modal__button-container__send"
           onClick={onDelete}
+          variant={ButtonVariant.PrimaryPink}
         >
           {isLoading ? (
             <Loader className="delete-modal__button-container__send__loader" />

src/shared/components/DeleteModal/index.scss

@@ -41,31 +41,8 @@
 
 .delete-modal__button-container__button {
   width: 100%;
-  height: 3rem;
-  border-radius: 0.5rem;
 }
 
 .delete-modal__button-container__cancel {
-  background-color: $light-gray-1;
-  color: $light-gray-2;
   margin-right: 0.75rem;
 }
-
-.delete-modal__button-container__cancel:hover {
-  background-color: $light-gray-3;
-}
-
-.delete-modal__button-container__send {
-  background-color: $error;
-  color: $white;
-  margin-left: 0.75rem;
-}
-
-.delete-modal__button-container__send:hover {
-  background-color: $red;
-}
-
-.delete-modal__button-container__send__loader {
-  height: 1.25rem;
-  width: 1.25rem;
-}

src/shared/components/HideModal/HideModal.tsx

@@ -18,7 +18,7 @@ import {
   selectCurrentProposal,
 } from "@/pages/OldCommon/store/selectors";
 import { Loader, Button } from "@/shared/components";
-import { Colors, EntityTypes } from "@/shared/constants";
+import { EntityTypes } from "@/shared/constants";
 import { useNotification } from "@/shared/hooks";
 import {
   Common,
@@ -120,8 +120,6 @@ const HideModal: FC<PropsWithChildren<HideModalProps>> = (props) => {
       isShowing={isShowing}
       onClose={onClose}
       title="Are you sure?"
-      closeColor={Colors.black}
-      closeIconSize={20}
       styles={{
         header: "hide-modal__header",
         content: "hide-modal__content",

src/shared/components/Modal/Modal.tsx

@@ -14,17 +14,10 @@ import React, {
 import ReactDOM from "react-dom";
 import classNames from "classnames";
 import { v4 as uuidv4 } from "uuid";
-import { Colors } from "../../constants";
 import { useComponentWillUnmount } from "../../hooks";
 import Close2Icon from "../../icons/close2.icon";
-import CloseIcon from "../../icons/close.icon";
 import LeftArrowIcon from "../../icons/leftArrow.icon";
-import {
-  CloseIconVariant,
-  ModalProps,
-  ModalRef,
-  ModalType,
-} from "../../interfaces";
+import { ModalProps, ModalRef, ModalType } from "../../interfaces";
 import { ClosePrompt } from "./components/ClosePrompt";
 import { ModalContext, FooterOptions, ModalContextValue } from "./context";
 import "./index.scss";
@@ -38,21 +31,19 @@ const Modal: ForwardRefRenderFunction<ModalRef, ModalProps> = (
     onGoBack,
     onClose,
     children,
-    closeColor,
     mobileFullScreen,
     title,
     onHeaderScrolledToTop,
     styles,
     type = ModalType.Default,
     hideCloseButton = false,
-    closeIconSize = 24,
+    closeIconSize = 14,
     isHeaderSticky = false,
     shouldShowHeaderShadow = true,
     closePrompt = false,
     withoutHorizontalPadding = false,
     withoutHeader = false,
     fullHeight = false,
-    closeIconVariant = CloseIconVariant.Regular,
   } = props;
   const contentRef = useRef<HTMLDivElement>(null);
   const [footer, setFooter] = useState<ReactNode>(null);
@@ -200,15 +191,7 @@ const Modal: ForwardRefRenderFunction<ModalRef, ModalProps> = (
             )}
             onClick={handleClose}
           >
-            {closeIconVariant === CloseIconVariant.Regular ? (
-              <CloseIcon
-                width={closeIconSize}
-                height={closeIconSize}
-                fill={closeColor ?? Colors.black}
-              />
-            ) : (
-              <Close2Icon width={closeIconSize} height={closeIconSize} />
-            )}
+            <Close2Icon width={closeIconSize} height={closeIconSize} />
           </div>
         )}
       </div>

src/shared/components/ReportModal/ReportModal.tsx

@@ -9,7 +9,7 @@ import { useDispatch } from "react-redux";
 import { createReport } from "@/pages/OldCommon/store/actions";
 import { subscribeToMessageRefresh } from "@/pages/OldCommon/store/saga";
 import { Loader } from "@/shared/components";
-import { Colors, EntityTypes } from "@/shared/constants";
+import { EntityTypes } from "@/shared/constants";
 import { useNotification } from "@/shared/hooks";
 import {
   Discussion,
@@ -133,8 +133,6 @@ const ReportModal: FC<PropsWithChildren<ReportModalProps>> = (props) => {
       onClose={isLoading ? emptyFunction : onClose}
       hideCloseButton={isLoading}
       title="Report"
-      closeColor={Colors.black}
-      closeIconSize={20}
       styles={{
         header: "report-modal__header",
         content: "report-modal__content",

src/shared/components/ReportModal/index.scss

@@ -39,6 +39,7 @@
   border: 0.0625rem var(--gentle-stroke) solid;
   height: 100%;
   background-color: var(--secondary-background);
+  color: var(--primary-text);
 }
 
 .report-modal__button-container {

src/shared/components/ShareModal/ShareModal.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import copyToClipboard from "copy-to-clipboard";
 import { ButtonIcon, SocialLinks, Loader } from "@/shared/components";
-import { Colors, ShareViewType } from "@/shared/constants";
+import { ShareViewType } from "@/shared/constants";
 import { useNotification } from "@/shared/hooks";
 import { useIsTabletView } from "@/shared/hooks/viewport";
 import { CopyLinkChainIcon } from "@/shared/icons";
@@ -48,8 +48,6 @@ const ShareModal: FC<PropsWithChildren<ShareModalProps>> = (props) => {
       isShowing={isShowing}
       onClose={onClose}
       title={isTabletView && title}
-      closeColor={Colors.black}
-      closeIconSize={isTabletView ? 16 : 20}
       styles={{
         header: "share-modal__wrapper-header",
         content: isTabletView ? "share-modal__wrapper-content-mobile" : "",

src/shared/icons/copy.icon.tsx

@@ -5,6 +5,8 @@ interface CopyIconProps {
 }
 
 export default function CopyIcon({ className }: CopyIconProps): ReactElement {
+  const color = "currentColor";
+
   return (
     <svg
       className={className}
@@ -16,14 +18,14 @@ export default function CopyIcon({ className }: CopyIconProps): ReactElement {
     >
       <path
         d="M8 10C8 9.46957 8.21071 8.96086 8.58579 8.58579C8.96086 8.21071 9.46957 8 10 8H18C18.5304 8 19.0391 8.21071 19.4142 8.58579C19.7893 8.96086 20 9.46957 20 10V18C20 18.5304 19.7893 19.0391 19.4142 19.4142C19.0391 19.7893 18.5304 20 18 20H10C9.46957 20 8.96086 19.7893 8.58579 19.4142C8.21071 19.0391 8 18.5304 8 18V10Z"
-        stroke="#131B23"
+        stroke={color}
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M16 8V6C16 5.46957 15.7893 4.96086 15.4142 4.58579C15.0391 4.21071 14.5304 4 14 4H6C5.46957 4 4.96086 4.21071 4.58579 4.58579C4.21071 4.96086 4 5.46957 4 6V14C4 14.5304 4.21071 15.0391 4.58579 15.4142C4.96086 15.7893 5.46957 16 6 16H8"
-        stroke="#131B23"
+        stroke={color}
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"

src/shared/icons/reply.icon.tsx

@@ -5,6 +5,8 @@ interface ReplyIconProps {
 }
 
 export default function ReplyIcon({ className }: ReplyIconProps): ReactElement {
+  const color = "currentColor";
+
   return (
     <svg
       className={className}
@@ -16,7 +18,7 @@ export default function ReplyIcon({ className }: ReplyIconProps): ReactElement {
     >
       <path
         d="M2.87006 11.271L10.4401 5.62095C10.561 5.52754 10.7139 5.48565 10.8656 5.50437C11.0173 5.5231 11.1555 5.60093 11.2501 5.72095C11.3293 5.8241 11.3716 5.95089 11.3701 6.08095V9.08095C19.5701 9.08095 21.1201 14.771 21.3701 17.811C21.3731 17.9661 21.3169 18.1167 21.2129 18.2319C21.1088 18.3471 20.9648 18.4183 20.8101 18.4309C20.7216 18.4365 20.633 18.4213 20.5514 18.3865C20.4698 18.3518 20.3974 18.2985 20.3401 18.231C19.2253 16.9867 17.8205 16.0371 16.2504 15.4667C14.6802 14.8962 12.9935 14.7225 11.3401 14.961V17.961C11.3401 18.1121 11.28 18.2571 11.1731 18.364C11.0662 18.4709 10.9212 18.531 10.7701 18.531C10.6499 18.5281 10.534 18.4859 10.4401 18.411L2.87006 12.7309C2.76667 12.6599 2.67928 12.568 2.61348 12.4612C2.54768 12.3544 2.50494 12.2351 2.48799 12.1108C2.47104 11.9865 2.48026 11.86 2.51506 11.7395C2.54986 11.619 2.60947 11.5071 2.69006 11.411C2.74278 11.3556 2.80344 11.3084 2.87006 11.271Z"
-        stroke="#131B23"
+        stroke={color}
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"