Merge pull request #2353 from daostack/cw-2331-dark-mode-updates-round-2

Dark mode updated #2
daostack · Nov 30, 2023 · fc759ed · fc759ed
2 parents 2ba2be0 + 371168b
commit fc759ed
Show file tree

Hide file tree

Showing 10 changed files with 13 additions and 29 deletions.
diff --git a/src/pages/Landing/containers/LandingContainer/LandingContainer.tsx b/src/pages/Landing/containers/LandingContainer/LandingContainer.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { useSelector } from "react-redux";
 import classNames from "classnames";
 import { Language } from "@/shared/constants";
-import { useModal } from "@/shared/hooks";
+import { useLightThemeOnly, useModal } from "@/shared/hooks";
 import { selectLanguage } from "@/shared/store/selectors";
 import { JoinWaitlistModal } from "../../components/JoinWaitlistModal";
 import {
@@ -21,6 +21,7 @@ const LandingContainer = () => {
     onOpen: onWaitlistModalOpen,
     onClose: onWaitlistModalClose,
   } = useModal(false);
+  useLightThemeOnly();
 
   return (
     <div

diff --git a/...s/FeedTab/components/NewProposalCreation/components/AddRecipient/AddRecipient.module.scss b/...s/FeedTab/components/NewProposalCreation/components/AddRecipient/AddRecipient.module.scss
@@ -22,6 +22,7 @@
   padding: 0 1rem;
   background-color: var(--tertiary-fill);
   width: 100%;
+  color: var(--primary-text);
 }
 
 .tableHeader {
@@ -82,8 +83,4 @@
 
 .clickableRow {
   cursor: pointer;
-
-  &:hover {
-    background-color: $c-primary-100;
-  }
 }
diff --git a/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss b/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss
@@ -94,6 +94,10 @@
   background-color: $c-pink-active-feed-cards;
   margin-left: 2.8rem;
   margin-right: unset;
+
+  .mentionText {
+    color: $c-pink-mention-2;
+  }
 }
 
 .systemMessageContainer {
@@ -270,15 +274,13 @@
 
 .fileTitle {
   font-size: $xxsmall;
-  color: $c-gray-100;
   font-weight: 600;
   line-height: 1.25rem;
   margin: 0;
   margin-bottom: 0.125rem;
 }
 
 .fileSize {
-  color: $c-gray-100;
   font-size: $xxsmall-3;
   font-weight: 400;
   margin: 0;

diff --git a/src/shared/components/Chat/ChatMessage/ChatMessage.tsx b/src/shared/components/Chat/ChatMessage/ChatMessage.tsx
@@ -15,7 +15,7 @@ import {
   EntityTypes,
   QueryParamKey,
 } from "@/shared/constants";
-import { Colors } from "@/shared/constants";
+import { useModal } from "@/shared/hooks";
 import { useIsTabletView } from "@/shared/hooks/viewport";
 import { ModerationFlags } from "@/shared/interfaces/Moderation";
 import {
@@ -335,9 +335,6 @@ export default function ChatMessage({
                     name={filePreview.name || filePreview.title}
                     fileSize={filePreview.size}
                     variant={FilePreviewVariant.medium}
-                    iconColor={
-                      isNotCurrentUserMessage ? Colors.black : Colors.lightPink
-                    }
                     isCurrentUser={!isNotCurrentUserMessage}
                   />
                 )}

diff --git a/src/shared/components/Chat/ChatMessage/DMChatMessage.tsx b/src/shared/components/Chat/ChatMessage/DMChatMessage.tsx
@@ -15,7 +15,6 @@ import {
   EntityTypes,
   QueryParamKey,
 } from "@/shared/constants";
-import { Colors } from "@/shared/constants";
 import { useRoutesContext } from "@/shared/contexts";
 import { useIsTabletView } from "@/shared/hooks/viewport";
 import { ModerationFlags } from "@/shared/interfaces/Moderation";
@@ -389,9 +388,6 @@ export default function DMChatMessage({
                     name={filePreview.name || filePreview.title}
                     fileSize={filePreview.size}
                     variant={FilePreviewVariant.medium}
-                    iconColor={
-                      isNotCurrentUserMessage ? Colors.black : Colors.lightPink
-                    }
                     isCurrentUser={!isNotCurrentUserMessage}
                   />
                 )}

diff --git a/src/shared/icons/file.icon.tsx b/src/shared/icons/file.icon.tsx
@@ -1,5 +1,4 @@
 import React, { ReactElement } from "react";
-import { Colors } from "@/shared/constants";
 
 const BASE_WIDTH = 66;
 const BASE_HEIGHT = 78;
@@ -12,7 +11,7 @@ interface GalleryIconProps {
 }
 
 export default function FileIcon({
-  color = Colors.darkBlue,
+  color = "currentColor",
   size = BASE_WIDTH,
   className,
 }: GalleryIconProps): ReactElement {

diff --git a/src/shared/ui-kit/Button/Button.module.scss b/src/shared/ui-kit/Button/Button.module.scss
@@ -236,10 +236,6 @@
   &:active {
     --btn-bg-color: #{$c-pink-active-btn};
   }
-
-  &.buttonDisabled {
-    --btn-bg-color: #{$c-neutrals-100};
-  }
 }
 
 .buttonWarningVariant {

diff --git a/src/shared/ui-kit/FilePreview/FilePreview.module.scss b/src/shared/ui-kit/FilePreview/FilePreview.module.scss
@@ -7,11 +7,13 @@
   width: fit-content;
   cursor: pointer;
   margin-left: 1.5rem;
+  margin-bottom: 0.5rem;
 }
 
 .linkWrapper {
   display: flex;
   width: fit-content;
+  color: var(--primary-text);
 }
 
 .fileExtension {

diff --git a/src/shared/ui-kit/FilePreview/FilePreview.tsx b/src/shared/ui-kit/FilePreview/FilePreview.tsx
@@ -20,7 +20,6 @@ interface FilePreviewProps {
   variant?: FilePreviewVariant;
   iconContainerClassName?: string;
   containerClassName?: string;
-  iconColor?: string;
   isCurrentUser?: boolean;
   isPreview?: boolean;
 }
@@ -32,7 +31,6 @@ export default function FilePreview(props: FilePreviewProps) {
     variant = FilePreviewVariant.small,
     iconContainerClassName,
     containerClassName,
-    iconColor,
     size,
     fileSize,
     isCurrentUser,
@@ -51,11 +49,7 @@ export default function FilePreview(props: FilePreviewProps) {
           target="_blank"
           rel="noopener noreferrer"
         >
-          <FileIcon
-            className={iconContainerClassName}
-            color={iconColor}
-            size={size}
-          />
+          <FileIcon className={iconContainerClassName} size={size} />
           <div
             className={classNames(styles.fileExtension, {
               [styles.fileExtensionExtraSmall]:

diff --git a/src/shared/ui-kit/Sidenav/Sidenav.module.scss b/src/shared/ui-kit/Sidenav/Sidenav.module.scss
@@ -15,7 +15,7 @@ $zIndex: 3;
     left: 0;
     z-index: $zIndex;
     display: block;
-    background-color: $c-gray-5;
+    background-color: var(--drop-shadow);
     opacity: 0.5;
     animation: fade var(--sb-transition-duration);
   }