From 825d9487d8eb407fe0d4feb8898bb3a376e684ea Mon Sep 17 00:00:00 2001 From: Basile Spaenlehauer Date: Thu, 28 Nov 2024 11:19:52 +0100 Subject: [PATCH] fix: update color (#275) * fix: update color * fix: type of style for mentions * fix: spacing in buttons * fix: icon is mention dialog * fix: revert vite upgrade * fix: remove commented code --- package.json | 46 +- src/components/Chatbox/Input.tsx | 5 +- src/components/Mentions/MentionButton.tsx | 10 +- src/components/Mentions/MentionsDialog.tsx | 7 +- src/components/Mentions/MentionsTable.tsx | 33 +- yarn.lock | 1093 ++++++++++++-------- 6 files changed, 695 insertions(+), 499 deletions(-) diff --git a/package.json b/package.json index ad9644f9..15d1cc27 100644 --- a/package.json +++ b/package.json @@ -46,45 +46,45 @@ "remark-gfm": "^4.0.0" }, "devDependencies": { - "@emotion/react": "^11.13.3", - "@emotion/styled": "^11.13.0", - "@graasp/query-client": "^4.2.0", - "@graasp/sdk": "^4.32.1", + "@emotion/react": "^11.13.5", + "@emotion/styled": "^11.13.5", + "@graasp/query-client": "^5.6.1", + "@graasp/sdk": "^4.35.0", "@graasp/stylis-plugin-rtl": "^2.2.0", - "@graasp/translations": "^1.40.0", - "@graasp/ui": "^5.4.0", - "@mui/icons-material": "^6.1.5", + "@graasp/translations": "^1.42.0", + "@graasp/ui": "^5.4.2", + "@mui/icons-material": "^6.1.9", "@mui/lab": "6.0.0-beta.13", - "@mui/material": "^6.1.5", - "@tanstack/react-query": "5.59.16", + "@mui/material": "^6.1.9", + "@tanstack/react-query": "5.61.5", "@trivago/prettier-plugin-sort-imports": "^4.3.0", "@types/lodash.groupby": "^4.6.9", "@types/lodash.truncate": "^4.4.9", - "@types/node": "^20.17.0", + "@types/node": "^22.10.0", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", - "@types/react-mentions": "^4.4.0", - "@typescript-eslint/eslint-plugin": "^8.11.0", - "@typescript-eslint/parser": "^8.11.0", - "@vitejs/plugin-react": "^4.3.3", - "cypress": "^13.15.0", + "@types/react-mentions": "^4.4.1", + "@typescript-eslint/eslint-plugin": "^8.16.0", + "@typescript-eslint/parser": "^8.16.0", + "@vitejs/plugin-react": "^4.3.4", + "cypress": "^13.16.0", "date-fns": "^4.1.0", "eslint": "^8.57.1", "eslint-config-prettier": "^9.1.0", "eslint-plugin-react-hooks": "^5.0.0", - "eslint-plugin-react-refresh": "^0.4.13", - "i18next": "23.16.3", - "lucide-react": "^0.453.0", - "prettier": "^3.3.3", + "eslint-plugin-react-refresh": "^0.4.14", + "i18next": "23.16.8", + "lucide-react": "^0.462.0", + "prettier": "^3.4.1", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-i18next": "^15.1.0", - "react-router-dom": "^6.27.0", + "react-i18next": "^15.1.2", + "react-router-dom": "^7.0.1", "rollup-plugin-visualizer": "^5.12.0", "stylis-plugin-rtl": "^2.1.1", "tsc-alias": "^1.8.10", - "typescript": "^5.6.3", - "vite": "^5.4.10", + "typescript": "^5.7.2", + "vite": "5.4.11", "vite-plugin-dts": "^4.3.0" }, "peerDependencies": { diff --git a/src/components/Chatbox/Input.tsx b/src/components/Chatbox/Input.tsx index 36941ad1..529b10f5 100644 --- a/src/components/Chatbox/Input.tsx +++ b/src/components/Chatbox/Input.tsx @@ -105,16 +105,13 @@ const Input: FC = ({ borderRadius: inputRadius, }, item: { - display: { - // change the style of the suggestions - }, padding: theme.spacing(0.5, 2), '&focused': { backgroundColor: '#b9b9ed', }, }, }, - }; + } as const; const { members } = useMessagesContext(); const currentMember = useCurrentMemberContext(); diff --git a/src/components/Mentions/MentionButton.tsx b/src/components/Mentions/MentionButton.tsx index 68a56d96..c1d7d54a 100644 --- a/src/components/Mentions/MentionButton.tsx +++ b/src/components/Mentions/MentionButton.tsx @@ -1,11 +1,11 @@ import { useState } from 'react'; -import { Notifications } from '@mui/icons-material'; -import { Badge, BadgeProps, IconButton, SvgIconProps } from '@mui/material'; +import { Badge, BadgeProps, IconButton } from '@mui/material'; import { ChatMention, MentionStatus } from '@graasp/sdk'; import { UseQueryResult } from '@tanstack/react-query'; +import { BellIcon } from 'lucide-react'; import { mentionButtonCypress } from '@/config/selectors.js'; @@ -13,7 +13,7 @@ import MentionsDialog from './MentionsDialog.js'; import MentionsTable from './MentionsTable.js'; type Props = { - color?: SvgIconProps['color']; + color?: string; badgeColor?: BadgeProps['color']; useMentions: ( options?: { getUpdates?: boolean | undefined } | undefined, @@ -24,7 +24,7 @@ type Props = { }; const MentionButton = ({ - color = 'secondary', + color = 'white', badgeColor = 'primary', useMentions, patchMentionFunction, @@ -50,7 +50,7 @@ const MentionButton = ({ ?.length || 0 } > - + { const { t } = useChatboxTranslation(); + const { color } = useButtonColor('primary'); return ( setOpen(false)} maxWidth="lg"> - + {t(CHATBOX.NOTIFICATIONS_DIALOG_TITLE)} diff --git a/src/components/Mentions/MentionsTable.tsx b/src/components/Mentions/MentionsTable.tsx index b711939a..9365ac79 100644 --- a/src/components/Mentions/MentionsTable.tsx +++ b/src/components/Mentions/MentionsTable.tsx @@ -5,6 +5,7 @@ import { Button, Grid2 as Grid, IconButton, + Stack, Table, TableBody, TableCell, @@ -118,8 +119,8 @@ const MentionsTable = ({ }; return ( - - + +