From fc8e4381980018e4e8778e5f996683fed785c772 Mon Sep 17 00:00:00 2001 From: nflnkr Date: Thu, 15 Feb 2024 11:43:02 +0300 Subject: [PATCH 1/3] use small scrollbars on variant items --- .../ViewPublicationPage/questions/Emoji.tsx | 13 +++++++++++-- .../ViewPublicationPage/questions/Images.tsx | 6 ++++++ .../ViewPublicationPage/questions/Variant.tsx | 6 ++++++ .../ViewPublicationPage/questions/Varimg.tsx | 6 ++++++ 4 files changed, 29 insertions(+), 2 deletions(-) diff --git a/lib/components/ViewPublicationPage/questions/Emoji.tsx b/lib/components/ViewPublicationPage/questions/Emoji.tsx index 6a69ff8..8bded35 100644 --- a/lib/components/ViewPublicationPage/questions/Emoji.tsx +++ b/lib/components/ViewPublicationPage/questions/Emoji.tsx @@ -34,7 +34,11 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => { return ( - {currentQuestion.title} + {currentQuestion.title} { height: variant.answer.length <= 60 ? undefined : "60px", overflow: "auto", paddingLeft: "45px", + "&::-webkit-scrollbar": { + width: "4px", + }, + "&::-webkit-scrollbar-thumb": { + backgroundColor: "#b8babf", + } }, }} value={index} @@ -166,5 +176,4 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => { ); - }; diff --git a/lib/components/ViewPublicationPage/questions/Images.tsx b/lib/components/ViewPublicationPage/questions/Images.tsx index 6eac749..c6ffa8d 100644 --- a/lib/components/ViewPublicationPage/questions/Images.tsx +++ b/lib/components/ViewPublicationPage/questions/Images.tsx @@ -138,6 +138,12 @@ export const Images = ({ currentQuestion }: ImagesProps) => { height: variant.answer.length <= 60 ? undefined : "60px", overflow: "auto", paddingLeft: "45px", + "&::-webkit-scrollbar": { + width: "4px", + }, + "&::-webkit-scrollbar-thumb": { + backgroundColor: "#b8babf", + } }, }} value={index} diff --git a/lib/components/ViewPublicationPage/questions/Variant.tsx b/lib/components/ViewPublicationPage/questions/Variant.tsx index cee7f36..2c5736c 100644 --- a/lib/components/ViewPublicationPage/questions/Variant.tsx +++ b/lib/components/ViewPublicationPage/questions/Variant.tsx @@ -168,6 +168,12 @@ const VariantItem = ({ wordBreak: "break-word", height: variant.answer.length <= 60 ? undefined : "60px", overflow: "auto", + "&::-webkit-scrollbar": { + width: "4px", + }, + "&::-webkit-scrollbar-thumb": { + backgroundColor: "#b8babf", + } } }} value={index} diff --git a/lib/components/ViewPublicationPage/questions/Varimg.tsx b/lib/components/ViewPublicationPage/questions/Varimg.tsx index fb05f19..3ea133d 100644 --- a/lib/components/ViewPublicationPage/questions/Varimg.tsx +++ b/lib/components/ViewPublicationPage/questions/Varimg.tsx @@ -80,6 +80,12 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => { height: variant.answer.length <= 60 ? undefined : "60px", overflow: "auto", paddingLeft: "45px", + "&::-webkit-scrollbar": { + width: "4px", + }, + "&::-webkit-scrollbar-thumb": { + backgroundColor: "#b8babf", + } } }} value={index} From e059a801daaa0b988d54c2b81636a4814e4e2029 Mon Sep 17 00:00:00 2001 From: nflnkr Date: Thu, 15 Feb 2024 12:01:52 +0300 Subject: [PATCH 2/3] use polyfill for country flag emoji --- .../ViewPublicationPage/questions/Emoji.tsx | 4 ++++ lib/utils/themes/generic.ts | 3 ++- package.json | 13 ++++++++----- yarn.lock | 5 +++++ 4 files changed, 19 insertions(+), 6 deletions(-) diff --git a/lib/components/ViewPublicationPage/questions/Emoji.tsx b/lib/components/ViewPublicationPage/questions/Emoji.tsx index 8bded35..70599ea 100644 --- a/lib/components/ViewPublicationPage/questions/Emoji.tsx +++ b/lib/components/ViewPublicationPage/questions/Emoji.tsx @@ -18,6 +18,10 @@ import { sendAnswer } from "@api/quizRelase"; import { enqueueSnackbar } from "notistack"; import type { QuizQuestionEmoji } from "../../../model/questionTypes/emoji"; import { useQuizData } from "@contexts/QuizDataContext"; +import { polyfillCountryFlagEmojis } from "country-flag-emoji-polyfill"; + + +polyfillCountryFlagEmojis(); type EmojiProps = { currentQuestion: QuizQuestionEmoji; diff --git a/lib/utils/themes/generic.ts b/lib/utils/themes/generic.ts index a50e66f..e658b98 100644 --- a/lib/utils/themes/generic.ts +++ b/lib/utils/themes/generic.ts @@ -89,6 +89,7 @@ const theme = createTheme({ fontWeight: 500, }, fontFamily: [ + "Twemoji Country Flags", "Rubik", "-apple-system", "BlinkMacSystemFont", @@ -134,4 +135,4 @@ theme.typography.infographic = { } }; -export default theme; \ No newline at end of file +export default theme; diff --git a/package.json b/package.json index abab542..567f75c 100755 --- a/package.json +++ b/package.json @@ -36,30 +36,30 @@ "@mui/material": "^5.10.14", "@mui/x-date-pickers": "^6.16.1", "@types/node": "^16.7.13", - "@types/react-dom": "^18.2.17", "@types/react": "^18.2.43", + "@types/react-dom": "^18.2.17", "@typescript-eslint/eslint-plugin": "^6.14.0", "@typescript-eslint/parser": "^6.14.0", "@vitejs/plugin-react": "^4.2.1", "axios": "^1.5.1", "cypress": "^13.6.1", "emoji-mart": "^5.5.2", + "eslint": "^8.55.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.5", - "eslint": "^8.55.0", "immer": "^10.0.3", "moment": "^2.30.1", "nanoid": "^5.0.3", "notistack": "^3.0.1", + "react": "^18.2.0", "react-dom": "^18.2.0", "react-error-boundary": "^4.0.12", "react-router-dom": "^6.21.3", - "react": "^18.2.0", "swr": "^2.2.4", "typescript": "^5.2.2", "use-debounce": "^9.0.4", - "vite-plugin-dts": "^3.7.2", "vite": "^5.0.8", + "vite-plugin-dts": "^3.7.2", "zustand": "^4.3.8" }, "peerDependencies": { @@ -76,12 +76,15 @@ "moment": "^2.30.1", "nanoid": "^5.0.3", "notistack": "^3.0.1", + "react": "^18.2.0", "react-dom": "^18.2.0", "react-error-boundary": "^4.0.12", "react-router-dom": "^6.21.3", - "react": "^18.2.0", "swr": "^2.2.4", "use-debounce": "^9.0.4", "zustand": "^4.3.8" + }, + "dependencies": { + "country-flag-emoji-polyfill": "^0.1.8" } } diff --git a/yarn.lock b/yarn.lock index fbe71e5..841478e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1574,6 +1574,11 @@ cosmiconfig@^7.0.0: path-type "^4.0.0" yaml "^1.10.0" +country-flag-emoji-polyfill@^0.1.8: + version "0.1.8" + resolved "https://registry.yarnpkg.com/country-flag-emoji-polyfill/-/country-flag-emoji-polyfill-0.1.8.tgz#d2cfb23dd2f949b80d83eb9822b613bf62957173" + integrity sha512-Mbah52sADS3gshUYhK5142gtUuJpHYOXlXtLFI3Ly4RqgkmPMvhX9kMZSTqDM8P7UqtSW99eHKFphhQSGXA3Cg== + cross-spawn@^7.0.0, cross-spawn@^7.0.2: version "7.0.3" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6" From bd61e580e617c7c9fb37ca0370a223e2478f938c Mon Sep 17 00:00:00 2001 From: nflnkr Date: Thu, 15 Feb 2024 12:08:05 +0300 Subject: [PATCH 3/3] fix quizId type --- lib/components/ViewPublicationPage/questions/Emoji.tsx | 2 +- lib/components/ViewPublicationPage/questions/File.tsx | 4 ++-- lib/components/ViewPublicationPage/questions/Images.tsx | 4 ++-- lib/components/ViewPublicationPage/questions/Rating.tsx | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/lib/components/ViewPublicationPage/questions/Emoji.tsx b/lib/components/ViewPublicationPage/questions/Emoji.tsx index 70599ea..2a223a5 100644 --- a/lib/components/ViewPublicationPage/questions/Emoji.tsx +++ b/lib/components/ViewPublicationPage/questions/Emoji.tsx @@ -29,7 +29,7 @@ type EmojiProps = { export const Emoji = ({ currentQuestion }: EmojiProps) => { const theme = useTheme(); - const quizId = useQuizData(); + const { quizId } = useQuizData(); const { answers } = useQuizViewStore(); const { answer } = answers.find( diff --git a/lib/components/ViewPublicationPage/questions/File.tsx b/lib/components/ViewPublicationPage/questions/File.tsx index da859a0..878492c 100644 --- a/lib/components/ViewPublicationPage/questions/File.tsx +++ b/lib/components/ViewPublicationPage/questions/File.tsx @@ -118,7 +118,7 @@ const UPLOAD_FILE_DESCRIPTIONS_MAP: Record< export const File = ({ currentQuestion }: FileProps) => { const theme = useTheme(); const { answers } = useQuizViewStore(); - const quizId = useQuizData(); + const { quizId } = useQuizData(); const [statusModal, setStatusModal] = useState<"errorType" | "errorSize" | "picture" | "video" | "audio" | "document" | "">(""); const answer = answers.find( @@ -184,7 +184,7 @@ export const File = ({ currentQuestion }: FileProps) => { return ( <> - {currentQuestion.title} + {currentQuestion.title} { - const quizId =useQuizData(); + const { quizId } = useQuizData(); const { answers } = useQuizViewStore(); const theme = useTheme(); const answer = answers.find(({ questionId }) => questionId === currentQuestion.id)?.answer; @@ -31,7 +31,7 @@ export const Images = ({ currentQuestion }: ImagesProps) => { return ( - {currentQuestion.title} + {currentQuestion.title} { - const quizId = useQuizData(); + const { quizId } = useQuizData(); const { answers } = useQuizViewStore(); const theme = useTheme(); const isMobile = useRootContainerSize() < 650; @@ -71,7 +71,7 @@ export const Rating = ({ currentQuestion }: RatingProps) => { return ( - {currentQuestion.title} + {currentQuestion.title}