mirror of
https://github.com/meshtastic/meshtastic.git
synced 2025-01-30 07:10:51 -08:00
Center buttons and set default breakpoint
This commit is contained in:
parent
27a200f1b7
commit
60e38defb9
|
@ -19,7 +19,7 @@ export const Modal = ({ open, onClose, children }: ModalProps): JSX.Element => {
|
|||
open={open}
|
||||
onClose={onClose}
|
||||
>
|
||||
<div className="min-h-screen px-4 text-center">
|
||||
<div className="min-h-screen px-0.5 text-center md:px-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
|
@ -37,7 +37,7 @@ export const Modal = ({ open, onClose, children }: ModalProps): JSX.Element => {
|
|||
<div className="inline-block w-full transform text-left align-middle transition-all 2xl:max-w-7xl">
|
||||
<div className="group relative">
|
||||
<div className="animate-tilt absolute -inset-0.5 rotate-2 rounded-lg bg-accent shadow-md transition duration-1000 group-hover:opacity-100 group-hover:duration-200"></div>
|
||||
<div className="relative flex aspect-[3/2] flex-col overflow-hidden rounded-2xl bg-base shadow-md md:aspect-[2/1] md:flex-row md:bg-primary">
|
||||
<div className="relative flex flex-col overflow-hidden rounded-2xl bg-base shadow-md md:aspect-[2/1] md:flex-row md:bg-primary">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -11,8 +11,8 @@ export const Badge = ({ name, color, icon }: BadgeProps): JSX.Element => {
|
|||
<div
|
||||
className={`flex h-min cursor-pointer gap-1 rounded-md px-1 text-white shadow-md hover:opacity-80 ${color}`}
|
||||
>
|
||||
<div className="m-auto">{icon}</div>
|
||||
<span>{name}</span>
|
||||
<div className="my-1">{icon}</div>
|
||||
<span className="hidden truncate md:flex">{name}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -29,7 +29,7 @@ export const HardwareModal = ({
|
|||
close,
|
||||
}: HardwareModal): JSX.Element => {
|
||||
const [hideDetails, setHideDetails] = useState(false);
|
||||
const { breakpoint } = useBreakpoint(BREAKPOINTS);
|
||||
const { breakpoint } = useBreakpoint(BREAKPOINTS, 'sm');
|
||||
|
||||
return (
|
||||
<Modal open={open} onClose={close}>
|
||||
|
@ -112,8 +112,9 @@ export const HardwareModal = ({
|
|||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="absolute -bottom-3 right-0 m-auto mr-2 ml-auto flex gap-2 md:bottom-2 md:mr-14 md:mt-2"
|
||||
className="absolute -bottom-3 right-0 m-auto mr-2 ml-auto flex md:inset-x-1 md:bottom-4 md:mt-2"
|
||||
>
|
||||
<div className="m-auto flex gap-2">
|
||||
{device.features.BLE && (
|
||||
<Badge
|
||||
name="Bluetooth"
|
||||
|
@ -128,6 +129,7 @@ export const HardwareModal = ({
|
|||
icon={<FiWifi />}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
)}
|
||||
|
|
Loading…
Reference in a new issue