Rename responsive helpers

orcasound · Aug 31, 2023 · 9d8c3b9 · 9d8c3b9
1 parent 6cef670
commit 9d8c3b9
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 13 deletions.
diff --git a/ui/src/components/BottomNav.tsx b/ui/src/components/BottomNav.tsx
@@ -7,11 +7,11 @@ import {
 } from "@mui/material";
 import { styled } from "@mui/material/styles";
 
-import { displayMobile } from "@/styles/responsive";
+import { displayMobileOnly } from "@/styles/responsive";
 
 export default function BottomNav() {
  return (
- <Box sx={displayMobile}>
+ <Box sx={displayMobileOnly}>
  <Paper
  sx={{
  position: "fixed",

diff --git a/ui/src/components/Drawer.tsx b/ui/src/components/Drawer.tsx
@@ -10,7 +10,7 @@ import { ReactNode, useState } from "react";
 
 import { PlayerSpacer } from "@/components/Player";
 import useIsMobile from "@/hooks/useIsMobile";
-import { displayDesktop, displayMobile } from "@/styles/responsive";
+import { displayDesktopOnly, displayMobileOnly } from "@/styles/responsive";
 
 export default function Drawer({
  children,
@@ -63,13 +63,13 @@ function Mobile({ children, open, onOpen, onClose }: DrawerProps) {
  swipeAreaWidth={100}
  disableSwipeToOpen={false}
  SwipeAreaProps={{
- sx: displayMobile,
+ sx: displayMobileOnly,
  }}
  ModalProps={{
  keepMounted: true,
  }}
  sx={{
- ...displayMobile,
+ ...displayMobileOnly,
  "& > .MuiPaper-root": {
  height: 1,
  },
@@ -94,7 +94,7 @@ function Desktop({ children, open, onOpen, onClose }: DrawerProps) {
  if (!open) onOpen();
  }}
  sx={(theme) => ({
- ...displayDesktop,
+ ...displayDesktopOnly,
  width: theme.breakpoints.values.sm,
  maxWidth: 0.5,
  flexShrink: 0,

diff --git a/ui/src/components/Header.tsx b/ui/src/components/Header.tsx
@@ -3,7 +3,7 @@ import { AppBar, Box, IconButton, Toolbar, Typography } from "@mui/material";
 import { useState } from "react";
 
 import Link from "@/components/Link";
-import { displayDesktop, displayMobile } from "@/styles/responsive";
+import { displayDesktopOnly, displayMobileOnly } from "@/styles/responsive";
 
 export default function Header() {
  return (
@@ -30,7 +30,7 @@ function Mobile() {
  };
 
  return (
- <Box sx={displayMobile}>
+ <Box sx={displayMobileOnly}>
  <Box
  sx={{
  flexGrow: 1,
@@ -55,7 +55,7 @@ function Mobile() {
 
 function Desktop() {
  return (
- <Box sx={displayDesktop}>
+ <Box sx={displayDesktopOnly}>
  <Brand />
  </Box>
  );

diff --git a/ui/src/components/MapLayout.tsx b/ui/src/components/MapLayout.tsx
@@ -9,7 +9,7 @@ import Drawer from "@/components/Drawer";
 import Header from "@/components/Header";
 import Player, { PlayerSpacer } from "@/components/Player";
 import { useFeedQuery, useFeedsQuery } from "@/graphql/generated";
-import { displayMobile } from "@/styles/responsive";
+import { displayMobileOnly } from "@/styles/responsive";
 
 const MapWithNoSSR = dynamic(() => import("./Map"), {
  ssr: false,
@@ -92,7 +92,7 @@ function MapLayout({ children }: { children: ReactNode }) {
  feeds={feeds}
  />
  </Box>
- <PlayerSpacer sx={displayMobile} />
+ <PlayerSpacer sx={displayMobileOnly} />
  <Player currentFeed={currentFeed} />
  </Box>
  </Box>

diff --git a/ui/src/styles/responsive.ts b/ui/src/styles/responsive.ts
@@ -1,7 +1,7 @@
 import { Theme } from "@mui/material";
 
-export const displayMobile = { display: { xs: "block", sm: "none" } };
-export const displayDesktop = { display: { xs: "none", sm: "block" } };
+export const displayMobileOnly = { display: { xs: "block", sm: "none" } };
+export const displayDesktopOnly = { display: { xs: "none", sm: "block" } };
 
 export const mobileOnly = (theme: Theme) => theme.breakpoints.down("sm");
 export const desktopOnly = (theme: Theme) => theme.breakpoints.up("sm");