fix: top bar and control center style on mobile

buiduc06 · May 2, 2021 · b2419fa · b2419fa
1 parent 1228f9d
commit b2419fa
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 7 deletions.
diff --git a/src/components/ControlCenterMenu.js b/src/components/ControlCenterMenu.js
@@ -43,7 +43,7 @@ export default class ControlCenterMenu extends Component {
 
  render() {
  return (
- <div className="fixed w-96 top-8 right-2 z-50 p-2 grid grid-cols-4 grid-rows-5 gap-2 bg-white bg-opacity-25 blur rounded-2xl text-black shadow-2xl">
+ <div className="fixed w-96 max-w-full top-8 right-0 sm:right-2 z-50 p-2 grid grid-cols-4 grid-rows-5 gap-2 bg-white bg-opacity-25 blur rounded-2xl text-black shadow-2xl">
  <div className="row-span-2 col-span-2 bg-white bg-opacity-50 rounded-xl p-2 flex flex-col justify-around">
  <div className="flex flex-row items-center space-x-2 pr-6">
  <FaWifi

diff --git a/src/components/Launchpad.js b/src/components/Launchpad.js
@@ -77,7 +77,9 @@ export default class Launchpad extends Component {
  title={app.title}
  />
  </a>
- <span className="mt-2 mx-auto text-white">{app.title}</span>
+ <span className="mt-2 mx-auto text-white text-sm sm:text-base">
+ {app.title}
+ </span>
  </div>
  </div>
  ))}

diff --git a/src/components/MenuBar.js b/src/components/MenuBar.js
@@ -6,9 +6,12 @@ import { BiSearch } from "react-icons/bi";
 import { FaWifi } from "react-icons/fa";
 import { AiFillApple } from "react-icons/ai";
 
-const MenuItem = ({ children }) => {
+const MenuItem = ({ children, hiddeOnMobile = false }) => {
+ const hidde = hiddeOnMobile ? "hidden sm:inline-flex" : "inline-flex";
  return (
- <div className="inline-flex flex-row space-x-1 hover:bg-white hover:bg-opacity-30 rounded p-1">
+ <div
+ className={`${hidde} flex-row space-x-1 hover:bg-white hover:bg-opacity-30 rounded p-1`}
+ >
  {children}
  </div>
  );
@@ -29,14 +32,14 @@ export default function MenuBar({ title, toggleControlCenter }) {
  <span className="font-semibold">{title}</span>
  </div>
  <div className="flex flex-row justify-end items-center space-x-2">
- <MenuItem>
+ <MenuItem hiddeOnMobile={true}>
  <span className="text-xs mt-0.5 mr-1">100%</span>
  <BsBatteryFull size={20} />
  </MenuItem>
- <MenuItem>
+ <MenuItem hiddeOnMobile={true}>
  <FaWifi size={17} />
  </MenuItem>
- <MenuItem>
+ <MenuItem hiddeOnMobile={true}>
  <BiSearch size={17} />
  </MenuItem>
  <MenuItem>