diff --git a/app/client/src/assets/icons/comments/commentCursor.svg b/app/client/src/assets/icons/comments/commentCursor.svg index bf8ff1cbcd..cfc1f9e0dc 100644 --- a/app/client/src/assets/icons/comments/commentCursor.svg +++ b/app/client/src/assets/icons/comments/commentCursor.svg @@ -1 +1,17 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + diff --git a/app/client/src/assets/icons/comments/reaction-2.svg b/app/client/src/assets/icons/comments/reaction-2.svg index 91b9cce1af..502ace8ffb 100644 --- a/app/client/src/assets/icons/comments/reaction-2.svg +++ b/app/client/src/assets/icons/comments/reaction-2.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/app/client/src/comments/AppComments/AppCommentsFilterPopover.tsx b/app/client/src/comments/AppComments/AppCommentsFilterPopover.tsx index 319f2d008c..d66eff5136 100644 --- a/app/client/src/comments/AppComments/AppCommentsFilterPopover.tsx +++ b/app/client/src/comments/AppComments/AppCommentsFilterPopover.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from "react"; +import React, { useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import styled, { withTheme } from "styled-components"; import Icon, { IconSize } from "components/ads/Icon"; @@ -17,7 +17,7 @@ import { } from "actions/commentActions"; import "@blueprintjs/popover2/lib/css/blueprint-popover2.css"; -import log from "loglevel"; +import { Colors } from "constants/Colors"; export const options = [ { label: "Show all comments", value: "show-all" }, @@ -50,7 +50,6 @@ const useSetResolvedFilterFromQuery = () => { useEffect(() => { const url = new URL(window.location.href); const searchParams = url.searchParams; - log.debug(window.location.href, "window.location.href"); if (searchParams.get("isResolved")) { dispatch(setShouldShowResolvedComments(true)); } @@ -87,27 +86,58 @@ const AppCommentsFilter = withTheme(({ theme }: { theme: Theme }) => { ); }); +const FilterIconContainer = styled.div<{ open?: boolean }>` + padding: ${(props) => props.theme.spaces[7]}px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + + &:hover { + background-color: ${Colors.GALLERY_1}; + svg path { + fill: ${Colors.CHARCOAL}; + } + } + + ${(props) => + props.open && + ` + & svg path { + fill: ${Colors.CHARCOAL}; + } + background-color: ${Colors.GALLERY_1}; + `} +`; + function AppCommentsFilterPopover() { useSetResolvedFilterFromQuery(); + const [open, setIsOpen] = useState(false); return ( } + isOpen={open} modifiers={{ offset: { enabled: true, options: { - offset: [7, 10], + offset: [-7, 18], }, }, preventOverflow: { enabled: true, }, }} + onInteraction={(nextState: boolean) => { + setIsOpen(nextState); + }} placement={"bottom-end"} portalClassName="comment-context-menu" > - + + + ); } diff --git a/app/client/src/comments/AppComments/AppCommentsHeader.tsx b/app/client/src/comments/AppComments/AppCommentsHeader.tsx index d6b12c76b6..ca05440e40 100644 --- a/app/client/src/comments/AppComments/AppCommentsHeader.tsx +++ b/app/client/src/comments/AppComments/AppCommentsHeader.tsx @@ -6,18 +6,20 @@ import { COMMENTS, createMessage } from "constants/messages"; import AppCommentsFilterPopover from "./AppCommentsFilterPopover"; const AppCommentHeaderTitle = styled.div` + padding: ${(props) => props.theme.spaces[6]}px; color: ${(props) => props.theme.colors.comments.appCommentsHeaderTitle}; ${(props) => getTypographyByKey(props, "h5")} `; const Header = styled.div` display: flex; - padding: ${(props) => props.theme.spaces[6]}px; width: 100%; justify-content: space-between; align-items: center; border-bottom: 1px solid ${(props) => props.theme.colors.comments.appCommentsHeaderBorder}; + border-right: 1px solid + ${(props) => props.theme.colors.comments.appCommentsHeaderBorder}; `; function AppCommentsHeader() { diff --git a/app/client/src/comments/CommentCard/CommentContextMenu.tsx b/app/client/src/comments/CommentCard/CommentContextMenu.tsx index 8490baaa3a..5b34a3f692 100644 --- a/app/client/src/comments/CommentCard/CommentContextMenu.tsx +++ b/app/client/src/comments/CommentCard/CommentContextMenu.tsx @@ -17,6 +17,7 @@ import "@blueprintjs/popover2/lib/css/blueprint-popover2.css"; import { Popover2 } from "@blueprintjs/popover2"; import Tooltip from "components/ads/Tooltip"; +import { Colors } from "constants/Colors"; // render over popover portals const Container = styled.div``; @@ -32,7 +33,11 @@ const MenuItem = styled.div` `; const StyledIcon = styled(Icon)` - margin-left: ${(props) => props.theme.spaces[2]}px; + padding-left: ${(props) => props.theme.spaces[2]}px; + &:hover svg ellipse, + &:hover svg circle { + fill: ${Colors.CHARCOAL}; + } `; const MenuIcon = styled.div` @@ -151,7 +156,7 @@ function CommentContextMenu({ placement={"bottom-end"} portalClassName="comment-context-menu" > - + diff --git a/app/client/src/comments/CommentCard/ResolveCommentButton.tsx b/app/client/src/comments/CommentCard/ResolveCommentButton.tsx index 8d4971616a..a69e144b41 100644 --- a/app/client/src/comments/CommentCard/ResolveCommentButton.tsx +++ b/app/client/src/comments/CommentCard/ResolveCommentButton.tsx @@ -4,6 +4,7 @@ import Icon, { IconSize } from "components/ads/Icon"; import { Theme } from "constants/DefaultTheme"; import Tooltip from "components/ads/Tooltip"; import { createMessage, RESOLVE_THREAD } from "constants/messages"; +import { Colors } from "constants/Colors"; const Container = styled.div` display: flex; @@ -17,6 +18,7 @@ type Props = { }; const StyledResolveIcon = styled(Icon)<{ + resolved: boolean; strokeColorCircle: string; strokeColorPath: string; fillColor: string; @@ -31,6 +33,14 @@ const StyledResolveIcon = styled(Icon)<{ && svg { fill: ${(props) => props.fillColor}; } + ${(props) => + !props.resolved && + ` + &:hover circle, + &:hover path { + stroke: ${Colors.CHARCOAL}; + } + `} `; const ResolveCommentButton = withTheme( @@ -54,11 +64,12 @@ const ResolveCommentButton = withTheme( return ( - + - - + ` ? props.theme.colors.reactionsComponent.reactionBackgroundActive : props.theme.colors.reactionsComponent.reactionBackground}; + ${(props) => + !props.active && + ` + &:hover { + background-color: ${Colors.GREY_3}; + } + `} + border: 1px solid ${(props) => props.active @@ -59,6 +68,13 @@ const Count = styled.div<{ active?: boolean }>` overflow: hidden; white-space: nowrap; margin-left: 2px; + ${(props) => + !props.active && + ` + ${Bubble}: hover & { + color: ${Colors.GREY_9}; + } +`} `; const ReactionsByContainer = styled.span` @@ -172,7 +188,7 @@ function EmojiReactions({ > {reaction.reactionEmoji} {reaction.count > 1 && ( - {reaction.count} + {12} )} @@ -180,7 +196,7 @@ function EmojiReactions({ {!hideReactions ? ( handleSelectReaction(e, emoji.native)} /> diff --git a/app/client/src/constants/Colors.tsx b/app/client/src/constants/Colors.tsx index 755fe02c32..29eec95a21 100644 --- a/app/client/src/constants/Colors.tsx +++ b/app/client/src/constants/Colors.tsx @@ -19,7 +19,6 @@ export const Colors = { PURE_ORANGE: "#ffb100", WHITE_CLOUD: "#D3DEE3", GOLD: "#FFD300", - BLACK: "#000000", BLACK_PEARL: "#040627", CODE_GRAY: "#090707", @@ -37,6 +36,7 @@ export const Colors = { HIT_GRAY: "#A1ACB3", JUNGLE_MIST: "#BCCCD9", MERCURY: "#E8E8E8", + MERCURY_1: "#E3E3E3", MAKO: "#464D53", ALTO: "#DFDFDF", @@ -81,6 +81,7 @@ export const Colors = { LIGHT_GREY: "#D4D4D4", LIGHT_GREY2: "#C4C4C4", Gallery: "#F0F0F0", + GALLERY_1: "#EBEBEB", Galliano: "#E0B30E", ROYAL_BLUE: "#457AE6", ALTO2: "#E0DEDE", @@ -126,5 +127,10 @@ export const Colors = { SELECT_DISABLED: "#ced9e080", SELECT_PLACEHOLDER: "#bfbfbf", SELECT_COLOR: "#182026", + + GREY_2: "#F0F0F0", + GREY_3: "#EBEBEB", + GREY_8: "#716E6E", + GREY_9: "#4B4848", }; export type Color = typeof Colors[keyof typeof Colors];