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,13 +11,13 @@ export const BoxedLink: React.FC<Props> = ({
children, children,
}) => ( }) => (
<a <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" : "" size === "small" ? "text-sm" : ""
}`} }`}
href={url} href={url}
target="_blank" target="_blank"
> >
<span>{children}</span> <span>{children}</span>
<FaExternalLinkAlt className="text-gray-400 inline" /> <FaExternalLinkAlt className="text-gray-400 inline " />
</a> </a>
); );

View File

@ -101,7 +101,7 @@ const OptionRow: React.FC<OptionProps> = ({ option, mode, textMode }) => {
<div <div
className={`flex-none rounded-md text-center ${ className={`flex-none rounded-md text-center ${
mode === "primary" 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" : "text-sm w-14 py-0.5"
} ${ } ${
mode === "primary" mode === "primary"
@ -113,7 +113,7 @@ const OptionRow: React.FC<OptionProps> = ({ option, mode, textMode }) => {
</div> </div>
<div <div
className={`leading-snug ${ 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" 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 }) => { 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>;
}; };