mudhorn/meshtastic
1
0
Fork 0
mirror of https://github.com/meshtastic/meshtastic.git synced 2025-01-30 07:10:51 -08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Center buttons and set default breakpoint

Browse source
This commit is contained in:
Sacha Weatherstone 2022-04-09 19:51:46 +10:00
parent 27a200f1b7
commit 60e38defb9
3 changed files with 22 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/Modal.tsx
View file

@ -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>

4
src/components/hardware/Badge.tsx
View file

@ -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>
);
};

34
src/components/hardware/HardwareModal.tsx
View file

@ -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,22 +112,24 @@ 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"
>
{device.features.BLE && (
<Badge
name="Bluetooth"
color="bg-blue-500"
icon={<FiBluetooth />}
/>
)}
{device.features.WiFi && (
<Badge
name="WiFi"
color="bg-orange-500"
icon={<FiWifi />}
/>
)}
<div className="m-auto flex gap-2">
{device.features.BLE && (
<Badge
name="Bluetooth"
color="bg-blue-500"
icon={<FiBluetooth />}
/>
)}
{device.features.WiFi && (
<Badge
name="WiFi"
color="bg-orange-500"
icon={<FiWifi />}
/>
)}
</div>
</motion.div>
</>
)}