diff --git a/public/tick-circle.png b/public/tick-circle.png index f4c9035..6d67f4b 100644 Binary files a/public/tick-circle.png and b/public/tick-circle.png differ 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 {