+
{app.title}
@@ -153,7 +148,7 @@ export default function Spotlight({
};
};
- const updateAppList = (): void => {
+ const updateAppList = () => {
const app = getTypeAppList("app", 0);
const portfolio = getTypeAppList("portfolio", app.appIdList.length);
@@ -184,49 +179,45 @@ export default function Spotlight({
setAppList(newAppList);
};
- const setCurrentDetailsWithType = (app: any, type: string): void => {
- const details = app;
- details.type = type;
- setCurDetails(details);
- };
+ const setCurrentDetailsWithType = (app: any, type: string) =>
+ setCurDetails({
+ ...app,
+ type
+ });
- const updateCurrentDetails = (): void => {
+ const updateCurrentDetails = () => {
if (appIdList.length === 0 || searchText === "") {
setCurDetails(null);
return;
}
const appId = appIdList[selectedIndex];
- const elem = document.querySelector(`#spotlight-${appId}`) as HTMLElement;
- const id = appId;
- const type = elem.dataset.appType as string;
- const app = allApps[type].find((item: LaunchpadData | AppsData) => {
- return item.id === id;
- });
+ const element = document.querySelector(`#spotlight-${appId}`) as HTMLElement;
+ const type = element.dataset.appType as string;
+ const app = APPS[type].find((item: LaunchpadData | AppsData) => item.id === appId);
+
setCurrentDetailsWithType(app, type);
};
- const updateHighlight = (prevIndex: number, curIndex: number): void => {
+ const updateHighlight = (prevIndex: number, curIndex: number) => {
if (appIdList.length === 0) return;
// remove highlight
const prevAppId = appIdList[prevIndex];
const prev = document.querySelector(`#spotlight-${prevAppId}`) as HTMLElement;
- let classes = prev.className;
- classes = classes.replace(textWhite, textBlack);
- classes = classes.replace(textSelected, "bg-transparent");
- prev.className = classes;
+ prev.className = prev.className
+ .replace(textWhite, textBlack)
+ .replace(textSelected, "bg-transparent");
// add highlight
const curAppId = appIdList[curIndex];
const cur = document.querySelector(`#spotlight-${curAppId}`) as HTMLElement;
- classes = cur.className;
- classes = classes.replace(textBlack, textWhite);
- classes = classes.replace("bg-transparent", textSelected);
- cur.className = classes;
+ cur.className = cur.className
+ .replace(textBlack, textWhite)
+ .replace("bg-transparent", textSelected);
};
- const handleKeyPress = (e: React.KeyboardEvent
): void => {
+ const handleKeyPress = (e: React.KeyboardEvent) => {
const keyCode = e.key;
const numApps = appIdList.length;
@@ -247,7 +238,7 @@ export default function Spotlight({
}
};
- const handleInputChange = (e: React.ChangeEvent): void => {
+ const handleInputChange = (e: React.ChangeEvent) => {
// update highlighted line
updateHighlight(selectedIndex, 0);
// current selected id go back to 0
@@ -256,16 +247,11 @@ export default function Spotlight({
setSearchText(e.target.value);
};
- const focusOnInput = (): void => {
- const input = document.querySelector("#spotlight-input") as HTMLElement;
- input.focus();
- };
-
return (
inputRef.current?.focus()}
ref={spotlightRef}
>
{searchText !== "" && (
-
-
+
+
{appList}
{curDetails && (
-
-
+
+
-
-
+
+
Kind
Size
Created
Modified
Last opened
-
+
{curDetails.type === "app" ? "Application" : "Portfolio"}
{`${getRandom(0, 999)} G`}
{getRandomDate()}
diff --git a/src/components/apps/Bear.tsx b/src/components/apps/Bear.tsx
index 12bffe2d..46ba4fe9 100644
--- a/src/components/apps/Bear.tsx
+++ b/src/components/apps/Bear.tsx
@@ -95,15 +95,15 @@ const Middlebar = ({ items, cur, setContent }: MiddlebarProps) => {
} hover:(bg-white dark:bg-gray-900)`}
onClick={() => setContent(item.id, item.file, index)}
>
-
-
+
+
-
+
{item.title}
{item.link && (
{
)}
-
+
{item.excerpt}
@@ -217,21 +217,17 @@ const Bear = () => {
return (
-
+
-
+
-
diff --git a/src/components/apps/Terminal.tsx b/src/components/apps/Terminal.tsx
index 9b93e31b..0b514ff1 100644
--- a/src/components/apps/Terminal.tsx
+++ b/src/components/apps/Terminal.tsx
@@ -9,17 +9,13 @@ const getEmoji = () => {
return EMOJIS[Math.floor(Math.random() * EMOJIS.length)];
};
-interface HowDareProps {
- setRMRF: (value: boolean) => void;
-}
-
interface TerminalState {
rmrf: boolean;
content: JSX.Element[];
}
// rain animation is adopted from: https://codepen.io/P3R0/pen/MwgoKv
-const HowDare = (props: HowDareProps) => {
+const HowDare = ({ setRMRF }: { setRMRF: (value: boolean) => void }) => {
const FONT_SIZE = 12;
const [emoji, setEmoji] = useState("");
@@ -76,7 +72,7 @@ const HowDare = (props: HowDareProps) => {
props.setRMRF(false)}
+ onClick={() => setRMRF(false)}
>
diff --git a/src/components/dock/DockItem.tsx b/src/components/dock/DockItem.tsx
index f466a348..bad2578c 100644
--- a/src/components/dock/DockItem.tsx
+++ b/src/components/dock/DockItem.tsx
@@ -97,10 +97,10 @@ export default function DockItem({
openApp(id) : () => {}}
- className="flex flex-col justify-end mb-1 transition duration-150 ease-in origin-bottom"
+ className="relative flex flex-col justify-end mb-1"
>
diff --git a/src/components/menus/Battery.tsx b/src/components/menus/Battery.tsx
index 26d23fe5..e9eb28a1 100644
--- a/src/components/menus/Battery.tsx
+++ b/src/components/menus/Battery.tsx
@@ -1,11 +1,11 @@
export default function Battery() {
const batteryState = useBattery();
- const width = (): number => {
+ const width = () => {
return 0.1 + batteryState.level * 0.96;
};
- const color = (): string => {
+ const color = () => {
if (batteryState.charging) return "bg-green-400";
if (batteryState.level < 0.2) return "bg-red-500";
@@ -20,7 +20,7 @@ export default function Battery() {
{batteryState.charging && (
-
+
)}
diff --git a/src/components/menus/ControlCenterMenu.tsx b/src/components/menus/ControlCenterMenu.tsx
index 5c64543b..eeef0d60 100644
--- a/src/components/menus/ControlCenterMenu.tsx
+++ b/src/components/menus/ControlCenterMenu.tsx
@@ -9,23 +9,21 @@ interface SliderProps {
setValue: (value: number) => void;
}
-const SliderComponent = ({ icon, value, setValue }: SliderProps) => {
- return (
-
-
-
-
-
setValue(v)}
- />
+const SliderComponent = ({ icon, value, setValue }: SliderProps) => (
+
+
+
- );
-};
+
setValue(v)}
+ />
+
+);
interface CCMProps {
toggleControlCenter: () => void;
@@ -80,9 +78,9 @@ export default function ControlCenterMenu({
-
-
Wi-Fi
-
{wifi ? "Home" : "Off"}
+
+
Wi-Fi
+
{wifi ? "Home" : "Off"}
@@ -92,9 +90,9 @@ export default function ControlCenterMenu({
>
-
-
Bluetooth
-
{bluetooth ? "On" : "Off"}
+
+
Bluetooth
+
{bluetooth ? "On" : "Off"}
@@ -104,13 +102,13 @@ export default function ControlCenterMenu({
>
-
-
AirDrop
-
{airdrop ? "Contacts Only" : "Off"}
+
+
AirDrop
+
{airdrop ? "Contacts Only" : "Off"}
-
+
{dark ? (
@@ -118,16 +116,16 @@ export default function ControlCenterMenu({
)}
-
- {dark ? "Dark Mode" : "Light Mode"}
-
+
{dark ? "Dark Mode" : "Light Mode"}
-
+
- Keyboard Brightness
+
+ Keyboard Brightness
+
toggleFullScreen(!fullscreen)}
>
{fullscreen ? (
@@ -135,7 +133,7 @@ export default function ControlCenterMenu({
) : (
)}
-
+
{fullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
@@ -147,11 +145,11 @@ export default function ControlCenterMenu({
Sound
-
-
-
-
{music.title}
-
{music.artist}
+
+
+
+
{music.title}
+
{music.artist}
{playing ? (
toggleAudio(false)} />
diff --git a/src/components/menus/TopBar.tsx b/src/components/menus/TopBar.tsx
index 7e7d483d..be69fd52 100644
--- a/src/components/menus/TopBar.tsx
+++ b/src/components/menus/TopBar.tsx
@@ -4,7 +4,6 @@ import { isFullScreen } from "~/utils";
import { music } from "~/configs";
import type { MacActions } from "~/types";
-// ------- import icons -------
interface TopBarItemProps {
hideOnMobile?: boolean;
forceHover?: boolean;
@@ -14,25 +13,27 @@ interface TopBarItemProps {
onMouseEnter?: () => void;
}
-const TopBarItem = forwardRef((props: TopBarItemProps, ref: any) => {
- const hide = props.hideOnMobile ? "hidden sm:inline-flex" : "inline-flex";
- const hover = props.forceHover
- ? "bg-gray-100/30 dark:bg-gray-400/40"
- : "hover:(bg-gray-100/30 dark:bg-gray-400/40)";
- return (
-
- {props.children}
-
- );
-});
-TopBarItem.displayName = "TopBarItem";
+const TopBarItem = forwardRef(
+ (props: TopBarItemProps, ref: React.ForwardedRef) => {
+ const hide = props.hideOnMobile ? "hidden sm:inline-flex" : "inline-flex";
+ const bg = props.forceHover
+ ? "bg-gray-100/30 dark:bg-gray-400/40"
+ : "hover:(bg-gray-100/30 dark:bg-gray-400/40)";
+
+ return (
+
+ {props.children}
+
+ );
+ }
+);
const CCMIcon = ({ size }: { size: number }) => {
return (
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 3c78de46..6c2c3fef 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -57,7 +57,9 @@ export default function Login(props: MacActions) {
-
{sign}
+
+ {sign}
+
{/* buttons */}
diff --git a/src/styles/component.css b/src/styles/component.css
index ca5715a2..0935829f 100644
--- a/src/styles/component.css
+++ b/src/styles/component.css
@@ -56,7 +56,7 @@
.dock li .tooltip {
@apply hidden;
- top: calc(-100% - 5px);
+ top: calc(-100% - 10px);
}
.dock li:hover .tooltip {