tweak: make indicators responsive to mobile
This commit is contained in:
parent
fc84300712
commit
e9796c545d
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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"
|
||||||
}`}
|
}`}
|
||||||
|
|
|
@ -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>;
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue
Block a user