diff --git a/app/client/src/comments/CommentCard/CommentContextMenu.tsx b/app/client/src/comments/CommentCard/CommentContextMenu.tsx index 17cd05dc5d76..8490baaa3a46 100644 --- a/app/client/src/comments/CommentCard/CommentContextMenu.tsx +++ b/app/client/src/comments/CommentCard/CommentContextMenu.tsx @@ -9,12 +9,14 @@ import { UNPIN_COMMENT, createMessage, EDIT_COMMENT, + MORE_OPTIONS, } from "constants/messages"; import { noop } from "lodash"; import "@blueprintjs/popover2/lib/css/blueprint-popover2.css"; import { Popover2 } from "@blueprintjs/popover2"; +import Tooltip from "components/ads/Tooltip"; // render over popover portals const Container = styled.div``; @@ -149,7 +151,9 @@ 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 2c3062ba0e40..8d4971616a5a 100644 --- a/app/client/src/comments/CommentCard/ResolveCommentButton.tsx +++ b/app/client/src/comments/CommentCard/ResolveCommentButton.tsx @@ -2,6 +2,8 @@ import React from "react"; import styled, { withTheme } from "styled-components"; 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"; const Container = styled.div` display: flex; @@ -52,14 +54,16 @@ const ResolveCommentButton = withTheme( return ( - + + + ); }, diff --git a/app/client/src/components/ads/Button.tsx b/app/client/src/components/ads/Button.tsx index fa996e18b919..b25f39b52d51 100644 --- a/app/client/src/components/ads/Button.tsx +++ b/app/client/src/components/ads/Button.tsx @@ -79,21 +79,38 @@ const getDisabledStyles = (props: ThemeProp & ButtonProps) => { const variant = props.variant || defaultProps.variant; const category = props.category || defaultProps.category; + if (props.tag === "a") { + return { + bgColorPrimary: "transparent", + borderColorPrimary: "transparent", + txtColorPrimary: props.theme.colors.button.link.disabled, + bgColorSecondary: "transparent", + borderColorSecondary: "transparent", + txtColorSecondary: props.theme.colors.button.link.disabled, + bgColorTertiary: "transparent", + borderColorTertiary: "transparent", + txtColorTertiary: props.theme.colors.button.link.disabled, + }; + } const stylesByCategory = { [Category.primary]: { txtColorPrimary: props.theme.colors.button.disabledText, - bgColorPrimary: props.theme.colors[variant].darkest, - borderColorPrimary: props.theme.colors[variant].darkest, + bgColorPrimary: props.theme.colors[variant].darker, + borderColorPrimary: props.theme.colors[variant].darker, }, [Category.secondary]: { txtColorSecondary: props.theme.colors.button.disabledText, - bgColorSecondary: props.theme.colors[variant].darkest, - borderColorSecondary: props.theme.colors[variant].darker, + bgColorSecondary: props.theme.colors[variant].darker, + borderColorSecondary: props.isLoading + ? props.theme.colors[variant].darkest + : props.theme.colors.tertiary.darker, }, [Category.tertiary]: { txtColorTertiary: props.theme.colors.button.disabledText, - bgColorTertiary: props.theme.colors.tertiary.darker, - borderColorTertiary: props.theme.colors.tertiary.dark, + bgColorTertiary: props.theme.colors.tertiary.dark, + borderColorTertiary: props.isLoading + ? props.theme.colors.tertiary.darkest + : props.theme.colors.tertiary.darker, }, }; @@ -104,6 +121,19 @@ const getMainStateStyles = (props: ThemeProp & ButtonProps) => { const variant = props.variant || defaultProps.variant; const category = props.category || defaultProps.category; + if (props.tag === "a") { + return { + bgColorPrimary: "transparent", + borderColorPrimary: "transparent", + txtColorPrimary: props.theme.colors.button.link.main, + bgColorSecondary: "transparent", + borderColorSecondary: "transparent", + txtColorSecondary: props.theme.colors.button.link.main, + bgColorTertiary: "transparent", + borderColorTertiary: "transparent", + txtColorTertiary: props.theme.colors.button.link.main, + }; + } const stylesByCategory = { [Category.primary]: { bgColorPrimary: props.theme.colors[variant].main, @@ -129,6 +159,20 @@ const getHoverStateStyles = (props: ThemeProp & ButtonProps) => { const variant = props.variant || defaultProps.variant; const category = props.category || defaultProps.category; + if (props.tag === "a") { + return { + bgColorPrimary: "transparent", + borderColorPrimary: "transparent", + txtColorPrimary: props.theme.colors.button.link.hover, + bgColorSecondary: "transparent", + borderColorSecondary: "transparent", + txtColorSecondary: props.theme.colors.button.link.hover, + bgColorTertiary: "transparent", + borderColorTertiary: "transparent", + txtColorTertiary: props.theme.colors.button.link.hover, + }; + } + const stylesByCategory = { [Category.primary]: { bgColorPrimary: props.theme.colors[variant].dark, @@ -154,6 +198,19 @@ const getActiveStateStyles = (props: ThemeProp & ButtonProps) => { const variant = props.variant || defaultProps.variant; const category = props.category || defaultProps.category; + if (props.tag === "a") { + return { + bgColorPrimary: "transparent", + borderColorPrimary: "transparent", + txtColorPrimary: props.theme.colors.button.link.active, + bgColorSecondary: "transparent", + borderColorSecondary: "transparent", + txtColorSecondary: props.theme.colors.button.link.active, + bgColorTertiary: "transparent", + borderColorTertiary: "transparent", + txtColorTertiary: props.theme.colors.button.link.active, + }; + } const stylesByCategory = { [Category.primary]: { bgColorPrimary: props.theme.colors[variant].dark, @@ -307,11 +364,25 @@ const ButtonStyles = css` border-radius: 0; ${(props) => btnFontStyles(props).buttonFont}; padding: ${(props) => btnFontStyles(props).padding}; - .${Classes.ICON} { + .${Classes.ICON}:not([name="no-response"]) { margin-right: ${(props) => props.text && props.icon ? `${props.theme.spaces[2] - 1}px` : `0`}; path { fill: ${(props) => btnColorStyles(props, "main").txtColor}; + &[stroke-width], + &[stroke] { + stroke: ${(props) => btnColorStyles(props, "main").txtColor}; + fill: transparent; + } + } + rect[stroke] { + stroke: ${(props) => btnColorStyles(props, "main").txtColor}; + } + &[name="search"] { + circle { + fill: transparent; + stroke: ${(props) => btnColorStyles(props, "main").txtColor}; + } } } &:hover { @@ -326,6 +397,20 @@ const ButtonStyles = css` props.text && props.icon ? `${props.theme.spaces[2] - 1}px` : `0`}; path { fill: ${(props) => btnColorStyles(props, "hover").txtColor}; + &[stroke-width], + &[stroke] { + fill: transparent; + stroke: ${(props) => btnColorStyles(props, "hover").txtColor}; + } + } + rect[stroke] { + stroke: ${(props) => btnColorStyles(props, "hover").txtColor}; + } + &[name="search"] { + circle { + fill: transparent; + stroke: ${(props) => btnColorStyles(props, "hover").txtColor}; + } } } } @@ -339,6 +424,20 @@ const ButtonStyles = css` .${Classes.ICON} { path { fill: ${(props) => btnColorStyles(props, "active").txtColor}; + &[stroke-width], + &[stroke] { + fill: transparent; + stroke: ${(props) => btnColorStyles(props, "active").txtColor}; + } + } + rect[stroke] { + stroke: ${(props) => btnColorStyles(props, "active").txtColor}; + } + &[name="search"] { + circle { + fill: transparent; + stroke: ${(props) => btnColorStyles(props, "active").txtColor}; + } } } } @@ -352,6 +451,9 @@ const ButtonStyles = css` right: 0; margin-left: auto; margin-right: auto; + circle { + stroke: ${(props) => props.theme.colors.button.disabledText}; + } } `; @@ -361,6 +463,8 @@ const StyledButton = styled("button")` const StyledLinkButton = styled("a")` ${ButtonStyles} + background: transparent; + border-color: transparent; `; export const VisibilityWrapper = styled.div` @@ -407,8 +511,11 @@ const getTextContent = (props: ButtonProps) => const getButtonContent = (props: ButtonProps) => ( <> - {getIconContent(props)} - {getTextContent(props)} + {props.tag === "button" && getIconContent(props)} + + {getTextContent(props)} + + {props.tag === "a" && getIconContent(props)} {props.isLoading ? : null} ); diff --git a/app/client/src/components/ads/EmojiPicker.tsx b/app/client/src/components/ads/EmojiPicker.tsx index 09f1937f8698..de2d7341272f 100644 --- a/app/client/src/components/ads/EmojiPicker.tsx +++ b/app/client/src/components/ads/EmojiPicker.tsx @@ -7,6 +7,8 @@ import { withTheme } from "styled-components"; import { Theme } from "constants/DefaultTheme"; import "@blueprintjs/popover2/lib/css/blueprint-popover2.css"; import "emoji-mart/css/emoji-mart.css"; +import Tooltip from "components/ads/Tooltip"; +import { ADD_REACTION, createMessage, EMOJI } from "constants/messages"; const EmojiPicker = withTheme( ({ @@ -50,12 +52,14 @@ const EmojiPicker = withTheme( }} portalClassName="emoji-picker-portal" > - + + + ); }, diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/TableUtilities.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/TableUtilities.tsx index 7ed540b182cc..a919fedf07de 100644 --- a/app/client/src/components/designSystems/appsmith/TableComponent/TableUtilities.tsx +++ b/app/client/src/components/designSystems/appsmith/TableComponent/TableUtilities.tsx @@ -329,9 +329,12 @@ export const renderEmptyRows = (
{multiRowSelection && renderCheckBoxCell(false)} {row.cells.map((cell: any, cellIndex: number) => { - return ( -
- ); + const cellProps = cell.getCellProps(); + if (columns[0]?.columnProperties?.cellBackground) { + cellProps.style.background = + columns[0].columnProperties.cellBackground; + } + return
; })}
); diff --git a/app/client/src/constants/DefaultTheme.tsx b/app/client/src/constants/DefaultTheme.tsx index 2a28878f8c82..614e7419a56f 100644 --- a/app/client/src/constants/DefaultTheme.tsx +++ b/app/client/src/constants/DefaultTheme.tsx @@ -639,6 +639,15 @@ type ColorType = { }; }; }; + /** + * LINK button style + */ + link: { + main: Color; + hover: Color; + active: Color; + disabled: Color; + }; }; tertiary: buttonVariant; info: buttonVariant; @@ -1533,6 +1542,12 @@ export const dark: ColorType = { }, }, }, + link: { + main: "#D4D4D4", + hover: "#FFFFFF", + active: "#2B2B2B", + disabled: "#202021", + }, }, tertiary: { main: "#D4D4D4", @@ -2025,7 +2040,7 @@ export const light: ColorType = { activeTabText: "#000", }, button: { - disabledText: lightShades[6], + disabledText: lightShades[15], boxShadow: { default: { variant1: Colors.BOX_SHADOW_DEFAULT_VARIANT1, @@ -2124,13 +2139,19 @@ export const light: ColorType = { }, }, }, + link: { + main: "#716E6E", + hover: "#090707", + active: "#4B4848", + disabled: "#858282", + }, }, tertiary: { main: "#716E6E", light: "#090707", - dark: "#F7F7F7", + dark: "#FAFAFA", darker: "#E8E8E8", - darkest: "#939090", + darkest: "#A9A7A7", }, info: { main: "#F86A2B", @@ -2143,22 +2164,22 @@ export const light: ColorType = { main: "#03B365", light: "#007340", dark: "#00693B", - darker: "#DEFFF0", - darkest: "#CBF4E2", + darker: "#CBF4E2", + darkest: "#D9FDED", }, warning: { - main: "#FECB11", - light: "#D1A606", - dark: "#D9AC07", - darker: "#FFFBEF", - darkest: "#FECB11", + main: "#FEB811", + light: "#EFA903", + dark: "#EFA903", + darker: "#FBEED0", + darkest: "#FFFAE9", }, danger: { main: "#F22B2B", - light: "#C60707", - dark: "#B90707", - darker: "#FFF0F0", - darkest: "#FDE4E4", + light: "#B90707", + dark: "#C60707", + darker: "#FDE4E4", + darkest: "#FFE9E9", }, homepageBackground: "#fafafa", card: { diff --git a/app/client/src/constants/messages.ts b/app/client/src/constants/messages.ts index cffd4b2281b0..7cfbb98231eb 100644 --- a/app/client/src/constants/messages.ts +++ b/app/client/src/constants/messages.ts @@ -469,3 +469,9 @@ export const MERGE_CHANGES = () => "Merge Changes"; export const SELECT_BRANCH_TO_MERGE = () => "Select branch to merge"; export const DOWNLOAD_FILE_NAME_ERROR = () => "File name was not provided"; + +// Comment card tooltips +export const MORE_OPTIONS = () => "More Options"; +export const ADD_REACTION = () => "Add Reaction"; +export const RESOLVE_THREAD = () => "Resolve Thread"; +export const EMOJI = () => "Emoji";