fix: poll image ui

DimensionDev · Jul 25, 2024 · 093fdc5 · 093fdc5
1 parent 4054451
commit 093fdc5
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 15 deletions.
diff --git a/public/tick-circle.png b/public/tick-circle.png
diff --git 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,17 +36,17 @@ 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}
         </div>
     );
 }
 
-function VoteResult({ choice, theme }: VoteResultProps) {
+function VoteResult({ choice, theme, isMax }: VoteResultProps) {
     return (
         <div
             style={{
@@ -100,17 +100,21 @@ function VoteResult({ choice, theme }: VoteResultProps) {
                         />
                     ) : null}
                 </span>
-                <span style={{ display: 'flex', color: theme.optionTextColor }}>{choice.percent}%</span>
+                <span style={{ display: 'flex', color: isMax ? theme.optionTextColor : theme.percentColor }}>
+                    {choice.percent}%
+                </span>
             </div>
         </div>
     );
 }
 
-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 (
         <div
             style={{
@@ -136,9 +140,14 @@ export function PollCard({ poll, theme, locale, profileId }: PollCardProps) {
             >
                 {choice_detail.map((choice, index) =>
                     (!!profileId && is_end) || choice_detail.some((choice) => choice.is_select) ? (
-                        <VoteResult key={index} choice={choice} theme={themeConfig} />
+                        <VoteResult
+                            key={index}
+                            choice={choice}
+                            theme={themeConfig}
+                            isMax={!!choice.percent && choice.percent === maxPercent}
+                        />
                     ) : (
-                        <VoteButton key={index} theme={themeConfig} text={`${indexToLetter(index)}. ${choice.name}`} />
+                        <VoteButton key={index} theme={themeConfig} text={choice.name} />
                     ),
                 )}
             </div>

diff --git 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
@@ -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: <ErrorHandler text={text} theme={themeConfig} />,

diff --git 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) => (
         <Button key={index} action="post" target={postTarget}>
-            {`${indexToLetter(index)}. ${choice.name}`}
+            {choice.name}
         </Button>
     ));
 };
diff --git 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 {