tweak: make indicators responsive to mobile

This commit is contained in:
NunoSempere 2022-11-17 21:58:15 +00:00
parent fc84300712
commit e9796c545d
3 changed files with 5 additions and 5 deletions

View File

@ -11,7 +11,7 @@ export const BoxedLink: React.FC<Props> = ({
children,
}) => (
<a
className={`px-2 py-1 border-2 border-gray-400 rounded-lg text-black no-underline text-normal hover:bg-gray-100 inline-flex flex-nowrap space-x-1 items-center ${
className={`px-2 py-1 border-2 border-gray-400 rounded-lg text-black no-underline hover:bg-gray-100 inline-flex flex-nowrap space-x-1 items-center text-xs md:text-lg ${
size === "small" ? "text-sm" : ""
}`}
href={url}

View File

@ -101,7 +101,7 @@ const OptionRow: React.FC<OptionProps> = ({ option, mode, textMode }) => {
<div
className={`flex-none rounded-md text-center ${
mode === "primary"
? "text-normal text-white px-2 py-0.5 font-bold"
? "text-sm md:text-lg text-normal text-white px-2 py-0.5 font-bold"
: "text-sm w-14 py-0.5"
} ${
mode === "primary"
@ -113,7 +113,7 @@ const OptionRow: React.FC<OptionProps> = ({ option, mode, textMode }) => {
</div>
<div
className={`leading-snug ${
mode === "primary" ? "text-normal" : "text-sm"
mode === "primary" ? "text-sm md:text-lg text-normal" : "text-sm"
} ${
mode === "primary" ? textColor(option.probability) : "text-gray-700"
}`}

View File

@ -54,5 +54,5 @@ function getStarsColor(numstars: number) {
}
export const Stars: React.FC<{ num: number }> = ({ num }) => {
return <div className={getStarsColor(num)}>{getstars(num)}</div>;
return <div className={getStarsColor(num) + " text-xs md:text-lg"}>{getstars(num)}</div>;
};