From 093fdc5fb639aab664569c6e08aafbbc5e6a0a9b Mon Sep 17 00:00:00 2001 From: dudu0506 Date: Thu, 25 Jul 2024 22:36:43 +0800 Subject: [PATCH] fix: poll image ui --- public/tick-circle.png | Bin 498 -> 646 bytes src/components/PollCard.tsx | 25 +++++++++++++++-------- src/constants/theme.ts | 8 +++++--- src/helpers/createFrameErrorResponse.tsx | 4 ++-- src/helpers/getPollFrameButtons.tsx | 3 +-- src/types/index.ts | 1 + 6 files changed, 26 insertions(+), 15 deletions(-) diff --git a/public/tick-circle.png b/public/tick-circle.png index f4c9035030b7d93e50408ced4cd94da6908287f2..6d67f4badc5821c95410ca8e76d842ed34421545 100644 GIT binary patch delta 572 zcmV-C0>l0C1BL~VReu5-NkldO; z-xIVw0sFSp$+nQDoFKhHas$i>@B%QC!4lFBHW`8wqnS*;zojRAeMtsrAd`f<`fH+# zbuY%pSA9kk0kbb^4=~OEagI!*-k>vV1UyOd9YdTjfG3ZsXn&j`%fI3fJX!DRJ26a) zq7@z-w&%6LzrPm|@!e3Bi7?*(?EZfy2sr(9y@!ZL3O3m4fB4uQtpO)LuKdC=GufFt z=mueo8ElYAa@j4oJ(aM1CJajFrc@xuOf<44FqJTVlR3Bu)W#T2%6$v87hrRS-4h$Hh<|1dY<5?b^r#9&z-(J&sJ2qS zHp1lwXr+56Kl7b+sQZ2s>@>OFv#rQzyQS)s@$t>M^&o&IwWy+(K$OpP-5b1qS4F5& z7U&)4(2&7ntbzRGMNcN7)THV*BmBT>)e9lI5AXYS=Od) z+l~x&3Hu0hUlhfw5g~{|s22u?Awlv^Jp>EF`(bUpUO(h{et#4*QAHRnMy7}-#q+$K z!Vnuxf_&fK5a7CQYLYKvh*hNFFmGwmWz@E9-$^M;VIU-}sw$<8oZbqJELJ4u?p9$?1e^?soHW$gDo-y|N?b4SV9U;S4btW~(00}=(Pmv*C z@vprkImmT26@LjXrbM#2BU7=3j%LVy$ci`04iJ5@_S^Nhyj90Z4afp=(67rO+evl6 zN#HC=iurOWGWx2P>_sb^aJ2P8k*lsbmCeNqd!?;E5>wZ8V%mDd(&QsC3DS<9@hIoW zRCi=k-8Fi?*a1z`9K`qY^#=W^mT!>!-LS?};iw<8gdlpf;vWyJk^JQo@CD46%ep3y ROzHpt002ovPDHLkV1g{2#CHGy diff --git a/src/components/PollCard.tsx b/src/components/PollCard.tsx index 0bb025b..fde7820 100644 --- a/src/components/PollCard.tsx +++ b/src/components/PollCard.tsx @@ -4,7 +4,6 @@ import { env } from '@/constants/env'; import { IMAGE_THEME, THEME_CONFIG } from '@/constants/theme'; import { createFrameTranslator } from '@/helpers/createFrameTranslator'; import { getPollTimeLeft } from '@/helpers/getPollTimeLeft'; -import { indexToLetter } from '@/helpers/indexToLetter'; import { PollTheme } from '@/types'; import { ChoiceDetail, Poll } from '@/types/api'; @@ -23,6 +22,7 @@ interface VoteButtonProps { interface VoteResultProps { choice: ChoiceDetail; theme: PollTheme; + isMax: boolean; } function VoteButton({ text, theme }: VoteButtonProps) { @@ -36,9 +36,9 @@ function VoteButton({ text, theme }: VoteButtonProps) { height: 40 * IMAGE_ZOOM_SCALE, width: '100%', borderRadius: 10 * IMAGE_ZOOM_SCALE, - border: `${1 * IMAGE_ZOOM_SCALE}px solid ${theme.optionTextColor}`, fontSize: 16 * IMAGE_ZOOM_SCALE, fontWeight: 'bold', + backgroundColor: theme.optionBgColor, }} > {text} @@ -46,7 +46,7 @@ function VoteButton({ text, theme }: VoteButtonProps) { ); } -function VoteResult({ choice, theme }: VoteResultProps) { +function VoteResult({ choice, theme, isMax }: VoteResultProps) { return (
) : null} - {choice.percent}% + + {choice.percent}% +
); } -export function PollCard({ poll, theme, locale, profileId }: PollCardProps) { +export function PollCard({ poll, locale, profileId }: PollCardProps) { const { is_end, choice_detail, vote_count } = poll; - const themeConfig = THEME_CONFIG[theme]; + const themeConfig = THEME_CONFIG[IMAGE_THEME.Dark]; const t = createFrameTranslator(locale); + const maxPercent = Math.max(...choice_detail.map((choice) => choice.percent || 0)); + return (
{choice_detail.map((choice, index) => (!!profileId && is_end) || choice_detail.some((choice) => choice.is_select) ? ( - + ) : ( - + ), )}
diff --git a/src/constants/theme.ts b/src/constants/theme.ts index eede77b..594500f 100644 --- a/src/constants/theme.ts +++ b/src/constants/theme.ts @@ -9,10 +9,11 @@ export const DARK_THEME: PollTheme = { titleColor: '#f5f5f5', optionBgColor: '#ffffff21', optionTextColor: '#f5f5f5', - optionSelectedTextColor: '#181818', - optionSelectedBgColor: '#8e96ff', - cardBgColor: '#030303', + optionSelectedTextColor: '#8e96ff', + optionSelectedBgColor: '#ffffff21', + cardBgColor: '#181818', secondTextColor: '#ffffff', + percentColor: '#FFFFFF70', }; export const LIGHT_THEME: PollTheme = { @@ -23,6 +24,7 @@ export const LIGHT_THEME: PollTheme = { optionSelectedBgColor: '#8e96ff', cardBgColor: '#ffffff', secondTextColor: '#767676', + percentColor: '#181818', }; export const THEME_CONFIG = { diff --git a/src/helpers/createFrameErrorResponse.tsx b/src/helpers/createFrameErrorResponse.tsx index c221637..d0542c3 100644 --- a/src/helpers/createFrameErrorResponse.tsx +++ b/src/helpers/createFrameErrorResponse.tsx @@ -15,8 +15,8 @@ type CreateErrorOptions = { }; export const createFrameErrorResponse = ({ text, noBack = false, queryData, buttonLabel }: CreateErrorOptions) => { - const { theme = IMAGE_THEME.Light, locale = LOCALE.en } = queryData ?? {}; - const themeConfig = THEME_CONFIG[theme]; + const { locale = LOCALE.en } = queryData ?? {}; + const themeConfig = THEME_CONFIG[IMAGE_THEME.Dark]; return { image: , diff --git a/src/helpers/getPollFrameButtons.tsx b/src/helpers/getPollFrameButtons.tsx index 8f2dd85..3043b9d 100644 --- a/src/helpers/getPollFrameButtons.tsx +++ b/src/helpers/getPollFrameButtons.tsx @@ -6,7 +6,6 @@ import { POLL_CHOICE_TYPE } from '@/constants/enum'; import { ImageQuery } from '@/constants/zod'; import { createFrameTranslator } from '@/helpers/createFrameTranslator'; import { getPollFramePostUrl } from '@/helpers/getPollFramePostUrl'; -import { indexToLetter } from '@/helpers/indexToLetter'; import { Poll } from '@/types/api'; interface Parameters { @@ -59,7 +58,7 @@ export const getPollFrameButtons = ({ poll, queryData }: Parameters) => { return poll.choice_detail.map((choice, index) => ( )); }; diff --git a/src/types/index.ts b/src/types/index.ts index c66a97d..48d19d7 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -37,6 +37,7 @@ export type PollTheme = { optionSelectedBgColor: string; cardBgColor: string; secondTextColor: string; + percentColor: string; }; export interface FrameButton {