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