feat: align some styles with Monterey

linhdangquang · Aug 27, 2022 · 9c33894 · 9c33894
1 parent a4373f1
commit 9c33894
Show file tree

Hide file tree

Showing 15 changed files with 110 additions and 146 deletions.
diff --git a/README.md b/README.md
@@ -44,8 +44,9 @@ pnpm build
 
 ## Credits
 
-- [macOS Big Sur](https://www.apple.com/in/macos/big-sur/)
-- [macOS Catalina](https://www.apple.com/bw/macos/catalina/)
+- macOS
+  - [Monterey](https://www.apple.com/macos/monterey/)
+  - [Catalina](https://www.apple.com/bw/macos/catalina/)
 - [macOS Icon Gallery](https://www.macosicongallery.com/)
 - [sindresorhus/file-icon-cli](https://github.com/sindresorhus/file-icon-cli)
 - [vivek9patel.github.io](https://github.com/vivek9patel/vivek9patel.github.io)

diff --git a/src/components/Spotlight.tsx b/src/components/Spotlight.tsx
@@ -49,9 +49,9 @@ export default function Spotlight({
   const [appIdList, setAppIdList] = useState<string[]>([]);
   const [appList, setAppList] = useState<JSX.Element | null>(null);
 
-  const textWhite = "c-text-white";
+  const textWhite = "text-white";
   const textBlack = "c-text-black";
-  const textSelected = "bg-blue-500 dark:bg-blue-400";
+  const textSelected = "bg-blue-500";
 
   useClickOutside(spotlightRef, toggleSpotlight, [btnRef]);
 
@@ -130,7 +130,7 @@ export default function Spotlight({
         <li
           id={`spotlight-${app.id}`}
           key={`spotlight-${app.id}`}
-          className={`pl-4 h-7 w-full pr-1 flex flex-row ${bg} ${text} cursor-default`}
+          className={`pr-1 h-7 w-full flex flex-row rounded ${bg} ${text} cursor-default`}
           data-app-type={type}
           onClick={() => handleClick(app.id)}
           onDoubleClick={() => handleDoubleClick(app.id)}
@@ -143,7 +143,7 @@ export default function Spotlight({
               title={app.title}
             />
           </div>
-          <div className="flex-grow hstack pl-3 overflow-hidden whitespace-nowrap">
+          <div className="flex-grow hstack overflow-hidden whitespace-nowrap">
             {app.title}
           </div>
         </li>
@@ -175,7 +175,9 @@ export default function Spotlight({
         )}
         {portfolio.appList.length !== 0 && (
           <div>
-            <div className="spotlight-type">Portfolio</div>
+            <div className="spotlight-type mt-1.5 before:(content-empty absolute left-0 top-0 ml-2 w-63.5 border-t menu-border)">
+              Portfolio
+            </div>
             <ul className="w-full text-xs">{portfolio.appList}</ul>
           </div>
         )}
@@ -272,30 +274,42 @@ export default function Spotlight({
       onClick={focusOnInput}
       ref={spotlightRef}
     >
-      <div className="w-full grid grid-cols-8 sm:grid-cols-11 h-12 sm:h-14 rounded-md bg-transparent">
+      <div className="w-full grid grid-cols-8 sm:grid-cols-11 h-12 sm:h-14 rounded-lg bg-transparent">
         <div className="col-start-1 col-span-1 flex-center">
           <BiSearch className="ml-1 c-text-600" size={28} />
         </div>
         <input
           id="spotlight-input"
-          className="col-start-2 col-span-7 sm:col-span-10 bg-transparent no-outline px-1"
-          text="xl sm:2xl black dark:white"
+          className={`col-start-2 col-span-7 ${
+            curDetails ? "sm:col-span-9" : "sm:col-span-10"
+          } c-text-black bg-transparent no-outline px-1`}
+          text="xl sm:2xl"
           placeholder="Spotlight Search"
           value={searchText}
           onChange={handleInputChange}
           autoFocus={true}
         />
+        {curDetails && (
+          <div className="hidden sm:flex col-start-11 col-span-1 flex-center">
+            <img
+              className="w-8"
+              src={curDetails.img}
+              alt={curDetails.title}
+              title={curDetails.title}
+            />
+          </div>
+        )}
       </div>
       {searchText !== "" && (
-        <div className="h-85 bg-transparent flex flex-row border-t menu-box-border">
-          <div className="flex-none w-32 sm:w-72 border-r menu-box-border overflow-y-scroll">
+        <div className="h-85 bg-transparent flex flex-row border-t menu-border">
+          <div className="flex-none w-32 sm:w-72 px-2.5 border-r menu-border overflow-y-scroll">
             {appList}
           </div>
           <div className="flex-grow">
             {curDetails && (
               <div className="h-full w-full flex flex-col">
                 <div
-                  className="mx-auto w-4/5 h-56 border-b menu-box-border"
+                  className="mx-auto w-4/5 h-56 border-b menu-border"
                   flex="none center col"
                 >
                   <img
@@ -319,10 +333,7 @@ export default function Spotlight({
                     <div>Modified</div>
                     <div>Last opened</div>
                   </div>
-                  <div
-                    className="flex-grow flex-col vstack pl-2"
-                    text="black dark:white"
-                  >
+                  <div className="flex-grow flex-col vstack pl-2 c-text-black">
                     <div>
                       {curDetails.type === "app" ? "Application" : "Portfolio"}
                     </div>

diff --git a/src/components/Window.tsx b/src/components/Window.tsx
@@ -39,7 +39,7 @@ const ExitFullIcon = ({ size }: { size: number }) => {
   );
 };
 
-const minMarginY = 24;
+const minMarginY = 32;
 const minMarginX = 100;
 
 interface TrafficProps {
@@ -187,7 +187,7 @@ const Window = (props: WindowProps) => {
       enableResizing={!props.max}
       style={{ zIndex: props.z }}
       onMouseDown={() => props.focus(props.id)}
-      className={`absolute ${round} overflow-hidden bg-transparent w-full h-full ${border} shadow-md ${minimized}`}
+      className={`absolute ${round} overflow-hidden bg-transparent w-full h-full ${border} shadow-lg shadow-black/30 ${minimized}`}
       id={`window-${props.id}`}
     >
       <div

diff --git a/src/components/apps/Safari.tsx b/src/components/apps/Safari.tsx
@@ -88,8 +88,7 @@ const NavPage = ({ width, setGoURL }: NavProps) => {
 
   return (
     <div
-      className="w-full safari-content overflow-y-scroll bg-center bg-cover"
-      text="black dark:white"
+      className="w-full safari-content overflow-y-scroll bg-center bg-cover c-text-black"
       style={{
         backgroundImage: `url(${dark ? wallpapers.night : wallpapers.day})`
       }}
@@ -139,8 +138,8 @@ const NoInternetPage = () => {
         backgroundImage: `url(${dark ? wallpapers.night : wallpapers.day})`
       }}
     >
-      <div className="w-full h-full pb-10 backdrop-blur-2xl flex-center text-center c-text-600 c-bg-100/80">
-        <div className="pb-10 text-center">
+      <div className="w-full h-full pb-10 backdrop-blur-2xl flex-center c-text-600 c-bg-100/80">
+        <div className="text-center">
           <div className="text-2xl font-bold">
             You Are Not Connected to the Internet
           </div>

diff --git a/src/components/dock/Dock.tsx b/src/components/dock/Dock.tsx
@@ -37,14 +37,13 @@ export default function Dock({
 
   return (
     <div
-      className={`dock w-full sm:w-max fixed left-0 right-0 mx-auto bottom-0 ${
+      className={`dock w-full sm:w-max fixed left-0 right-0 mx-auto bottom-1 ${
         hide ? "z-0" : "z-50"
       } overflow-x-scroll sm:overflow-x-visible`}
     >
       <ul
-        className="mx-auto w-max px-2 space-x-2 flex backdrop-blur-2xl c-border-400/30"
-        bg="white/20 dark:black/20"
-        border="t l r rounded-none sm:rounded-t-lg"
+        className="mx-auto w-max px-2 space-x-2 flex backdrop-blur-2xl c-border-400/40 c-bg-white/20"
+        border="1 rounded-none sm:rounded-xl"
         onMouseMove={(e) => mouseX.set(e.nativeEvent.x)}
         onMouseLeave={() => mouseX.set(null)}
         style={{

diff --git a/src/components/dock/DockItem.tsx b/src/components/dock/DockItem.tsx
@@ -99,7 +99,7 @@ export default function DockItem({
       onClick={desktop || id === "launchpad" ? () => openApp(id) : () => {}}
       className="hstack flex-col justify-end mb-1 transition duration-150 ease-in origin-bottom"
     >
-      <p className="tooltip absolute px-3 py-1 rounded-md text-sm c-bg-300/80">
+      <p className="tooltip absolute px-3 py-1 rounded-md text-sm c-text-black c-bg-300/80">
         {title}
       </p>
       {link ? (

diff --git a/src/components/menus/AppleMenu.tsx b/src/components/menus/AppleMenu.tsx
@@ -25,11 +25,7 @@ export default function AppleMenu({
   useClickOutside(ref, toggleAppleMenu, [btnRef]);
 
   return (
-    <div
-      className="menu-box top-6 left-4 w-56"
-      border="b l r rounded-b-lg"
-      ref={ref}
-    >
+    <div className="menu-box left-2 w-56" ref={ref}>
       <MenuItemGroup>
         <MenuItem>About This Mac</MenuItem>
       </MenuItemGroup>

diff --git a/src/components/menus/ControlCenterMenu.tsx b/src/components/menus/ControlCenterMenu.tsx
@@ -86,7 +86,7 @@ export default function ControlCenterMenu({
 
   return (
     <div
-      className="fixed grid shadow-base w-80 h-96 max-w-full top-8 right-0 sm:right-2 p-2.5 c-text-black c-bg-100/70 border rounded-2xl menu-box-border"
+      className="fixed grid shadow-menu w-80 h-96 max-w-full top-9.5 right-0 sm:right-1.5 p-2.5 c-text-black c-bg-100/70 border rounded-2xl menu-border"
       grid="cols-4 rows-5 gap-2"
       ref={controlCenterRef}
     >

diff --git a/src/components/menus/TopBar.tsx b/src/components/menus/TopBar.tsx
@@ -21,20 +21,25 @@ import { RiAppleFill } from "react-icons/ri";
 interface TopBarItemProps {
   hideOnMobile?: boolean;
   forceHover?: boolean;
-  onClick?: () => void;
   children: ReactNode;
+  className?: string;
+  onClick?: () => void;
+  onMouseEnter?: () => void;
 }
 
 const TopBarItem = forwardRef((props: TopBarItemProps, ref: any) => {
   const hide = props.hideOnMobile ? "hidden sm:inline-flex" : "inline-flex";
   const hover = props.forceHover
-    ? "c-bg-white/30"
-    : "rounded hover:c-bg-white/30";
+    ? "bg-gray-100/30 dark:bg-gray-400/40"
+    : "hover:(bg-gray-100/30 dark:bg-gray-400/40)";
   return (
     <div
       ref={ref}
-      className={`${hide} h-6 cursor-default flex-row space-x-1 ${hover} p-1`}
+      className={`hstack space-x-1 h-6 px-1 cursor-default rounded ${hide} ${hover} ${
+        props.className || ""
+      }`}
       onClick={props.onClick}
+      onMouseEnter={props.onMouseEnter}
     >
       {props.children}
     </div>
@@ -165,19 +170,27 @@ const TopBar = (props: TopBarProps) => {
 
   return (
     <div
-      className={`w-full h-6 px-4 fixed top-0 hstack justify-between ${
+      className={`w-full h-8 px-2 fixed top-0 hstack justify-between ${
         props.hide ? "z-0" : "z-20"
-      } text-sm text-white bg-gray-500/10 backdrop-blur-2xl shadow transition`}
+      } text-sm text-white bg-gray-700/10 backdrop-blur-2xl shadow transition`}
     >
-      <div className="hstack space-x-4">
+      <div className="hstack space-x-1">
         <TopBarItem
+          className="px-2"
           forceHover={state.showAppleMenu}
-          onClick={() => toggleAppleMenu()}
+          onClick={toggleAppleMenu}
           ref={appleBtnRef}
         >
           <RiAppleFill size={16} />
         </TopBarItem>
-        <span className="cursor-default font-semibold">{props.title}</span>
+        <TopBarItem
+          className="font-semibold px-2"
+          onMouseEnter={() => {
+            if (state.showAppleMenu) toggleAppleMenu();
+          }}
+        >
+          {props.title}
+        </TopBarItem>
       </div>
 
       {/* Open this when clicking on Apple logo */}
@@ -198,6 +211,7 @@ const TopBar = (props: TopBarProps) => {
         </TopBarItem>
         <TopBarItem
           hideOnMobile={true}
+          forceHover={state.showWifiMenu}
           onClick={toggleWifiMenu}
           ref={wifiBtnRef}
         >
@@ -206,7 +220,11 @@ const TopBar = (props: TopBarProps) => {
         <TopBarItem ref={spotlightBtnRef} onClick={props.toggleSpotlight}>
           <BiSearch size={17} />
         </TopBarItem>
-        <TopBarItem onClick={toggleControlCenter} ref={controlCenterBtnRef}>
+        <TopBarItem
+          forceHover={state.showControlCenter}
+          onClick={toggleControlCenter}
+          ref={controlCenterBtnRef}
+        >
           <CCMIcon size={16} />
         </TopBarItem>
 
@@ -227,8 +245,10 @@ const TopBar = (props: TopBarProps) => {
           />
         )}
 
-        <span>{format(state.date, "eee MMM d")}</span>
-        <span>{format(state.date, "h:mm aa")}</span>
+        <TopBarItem>
+          <span>{format(state.date, "eee MMM d")}</span>
+          <span>{format(state.date, "h:mm aa")}</span>
+        </TopBarItem>
       </div>
     </div>
   );

diff --git a/src/components/menus/WifiMenu.tsx b/src/components/menus/WifiMenu.tsx
@@ -19,7 +19,7 @@ export default function WifiMenu({ toggleWifiMenu, btnRef }: WifiMenuProps) {
 
   return (
     <div
-      className="menu-box border h-11 w-80 max-w-full top-8 right-0 sm:right-2 px-2 py-0.5 flex gap-2 rounded-lg"
+      className="menu-box flex gap-2 h-11 w-80 max-w-full right-0 sm:right-2 px-2 py-0.5"
       ref={wifiRef}
     >
       <div className="w-4/5 p-2.5 font-medium">Wi-Fi</div>

diff --git a/src/components/menus/base.tsx b/src/components/menus/base.tsx
@@ -14,9 +14,7 @@ const MenuItem = (props: MenuItemProps) => {
   return (
     <li
       onClick={props.onClick}
-      className="px-5 leading-6 cursor-default"
-      text="black hover:white dark:(white hover:black)"
-      bg="hover:blue-500 dark:hover:blue-400"
+      className="leading-6 cursor-default px-2.5 rounded hover:text-white hover:bg-blue-500"
     >
       {props.children}
     </li>
@@ -26,9 +24,9 @@ const MenuItem = (props: MenuItemProps) => {
 const MenuItemGroup = (props: MenuItemGroupProps) => {
   const border =
     props.border === false
-      ? ""
-      : "border-b-2 border-gray-400 dark:border-gray-500";
-  return <ul className={`py-1 ${border}`}>{props.children}</ul>;
+      ? "pb-1"
+      : "after:(content-empty block pb-0 h-1.5 max-w-full mx-2 border-b c-border-400)";
+  return <ul className={`relative px-1 pt-1 ${border}`}>{props.children}</ul>;
 };
 
 export { MenuItem, MenuItemGroup };
diff --git a/src/pages/Desktop.tsx b/src/pages/Desktop.tsx
@@ -30,7 +30,7 @@ interface DesktopState {
   spotlight: boolean;
 }
 
-const minMarginY = 24;
+const minMarginY = 32;
 
 export default function Desktop(props: MacActions) {
   const [state, setState] = useState({