Various tweaks

Author: devklick

src/common/utils/dateUtils.ts

@@ -33,6 +33,10 @@ export function isToday(
   );
 }
 
+export function isSameDay(date1: Date, date2: Date): boolean {
+  return startOfDayUTC(date1) === startOfDayUTC(date2);
+}
+
 export function startOfDay(date: Date) {
   return new Date(
     date.getFullYear(),

src/components/AppSideBar/AppSideBar.tsx

@@ -21,7 +21,7 @@ function AppSideBar({ items }: AppSideBarProps) {
             onClick={item.onClick}
             key={item.title}
             active={item.isActive ?? false}
-            activeColor={settings.accentColor}
+            activeColor={settings.secondaryColor}
           >
             {item.title}
           </StyledItem>

src/components/MenuItems/MenuItems.tsx

@@ -131,7 +131,7 @@ function MenuItem({
       onClick={handleOnClick}
       onMouseEnter={handleOnMouseEnter}
       onMouseLeave={handleOnMouseLeave}
-      hoverColor={settings.accentColor}
+      hoverColor={settings.secondaryColor}
     >
       <span>{title}</span>
       {items && open && (

src/programs/Calendar/Calendar.tsx

@@ -11,6 +11,7 @@ import CalendarNavigation from "./CalendarNavigation/CalendarNavigation";
 import { useCalendar } from "./hooks/useCalendar";
 import CalendarSidebar from "./CalendarSidebar/CalendarSidebar";
 import CalendarDay from "./CalendarDay/CalendarDay";
+import { isSameDay } from "../../common/utils/dateUtils";
 
 type CalendarHandles = BorderedAppContentHandles<HTMLDivElement>;
 
@@ -20,7 +21,7 @@ const Calendar = forwardRef<CalendarHandles, CalendarProps>((_props, ref) => {
   const sidebarToggle = useToggle();
   const calendarRef = useRef<HTMLDivElement>(null);
   const calendar = useCalendar();
-  const [accentColor] = useSystemSettings((s) => [s.accentColor]);
+  const [accentColor] = useSystemSettings((s) => [s.secondaryColor]);
 
   useImperativeHandle(ref, () => ({
     element: calendarRef.current,
@@ -53,6 +54,7 @@ const Calendar = forwardRef<CalendarHandles, CalendarProps>((_props, ref) => {
               isToday={day.isToday}
               onClick={() => calendar.setCursor(day.date)}
               key={day.date.toISOString()}
+              isSelected={isSameDay(calendar.cursor, day.date)}
             />
           ))}
         </StyledCalendarDays>

src/programs/Calendar/CalendarDay/CalendarDay.tsx

@@ -1,25 +1,25 @@
 import { getDayName } from "../../../common/utils/dateUtils";
 import useSystemSettings from "../../../stores/systemSettingsStore";
-import { StyledCalendarDay } from "./styles";
+import { StyledCalendarDay, StyledCalendarDayNo } from "./styles";
 
 interface CalendarDayProps {
   date: Date;
   isToday: boolean;
   isThisMonth: boolean;
   onClick(): void;
+  isSelected: boolean;
 }
 
 export default function CalendarDay({
   date,
   isToday,
   isThisMonth,
   onClick,
+  isSelected,
 }: CalendarDayProps) {
-  const [mainColor, fontColor] = useSystemSettings((s) => [
-    s.mainColor,
-    s.accentColor,
-    s.fontColor,
-  ]);
+  const [mainColor, accentColor, fontColor, primaryColor] = useSystemSettings(
+    (s) => [s.mainColor, s.secondaryColor, s.fontColor, s.primaryColor],
+  );
   const dayOfWeek = getDayName(date.getDay());
   const dayOfMonth = date.getDate();
 
@@ -29,10 +29,14 @@ export default function CalendarDay({
       color={fontColor}
       currentMonth={isThisMonth}
       onClick={onClick}
+      outlineColor={primaryColor}
+      isSelected={isSelected}
     >
       <span>{dayOfWeek}</span>
-      <span>{dayOfMonth}</span>
-      {isToday && <span>TODAY</span>}
+      <span>
+        <StyledCalendarDayNo>{dayOfMonth}</StyledCalendarDayNo>
+      </span>
+      {/* {isToday && <span>TODAY</span>} */}
     </StyledCalendarDay>
   );
 }

src/programs/Calendar/CalendarDay/styles.ts

@@ -6,12 +6,17 @@ interface StyledCalendarDayProps {
   backgroundColor: string;
   color: string;
   currentMonth: boolean;
+  outlineColor: string;
+  isSelected: boolean;
 }
 
 export const StyledCalendarDay = styled.div<StyledCalendarDayProps>`
   display: flex;
   flex-direction: column;
-  background-color: ${(props) => props.backgroundColor};
+  background-color: ${(props) =>
+    props.isSelected ? props.outlineColor : props.backgroundColor};
+  /* border: ${(p) =>
+    p.isSelected ? `1px solid ${p.outlineColor}` : undefined}; */
   color: ${(props) =>
     props.currentMonth
       ? undefined
@@ -26,3 +31,6 @@ export const StyledCalendarDay = styled.div<StyledCalendarDayProps>`
         : lighten(0.1, props.backgroundColor)};
   }
 `;
+
+interface StyledCalendarDayNoProps {}
+export const StyledCalendarDayNo = styled.div<StyledCalendarDayNoProps>``;

src/programs/FileBrowser/DirectoryOrFile/DirectoryOrFile.tsx

@@ -37,7 +37,7 @@ function DirectoryOrFile({
   const clickPosition = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
   const [contextMenuOpen, setContextMenuOpen] = useState(false);
   const [contextAction, setContextAction] = useState<ContextMenuAction | null>(
-    null
+    null,
   );
   const settings = useSystemSettings();
   const fs = useLocalFS();
@@ -52,7 +52,7 @@ function DirectoryOrFile({
   return (
     <StyledItem
       selected={selected}
-      selectedColor={settings.accentColor}
+      selectedColor={settings.secondaryColor}
       onDoubleClick={() => openFSObject(fsObject)}
       onClick={() => setSelected(fsObject.path)}
       key={fsObject.path}
@@ -65,7 +65,7 @@ function DirectoryOrFile({
             fsObject,
             fs,
             setContextAction,
-            setContextMenuOpen
+            setContextMenuOpen,
           )}
           close={() => setContextMenuOpen(!contextMenuOpen)}
         />

src/programs/FileBrowser/FileBrowser.tsx

@@ -43,7 +43,7 @@ function TopBar({
   navBack,
 }: TopBarProps) {
   const [backgroundColor, fontColor] = useSystemSettings((s) => [
-    s.accentColor,
+    s.secondaryColor,
     s.fontColor,
   ]);
   return (

src/programs/Settings/settingsPageConfig.ts

@@ -6,7 +6,7 @@ function isHexColorCode(value: string) {
 }
 
 export function getPages(
-  systemsSettings: SystemSettingState
+  systemsSettings: SystemSettingState,
 ): Record<string, SettingsPageProps> {
   return {
     appearance: {
@@ -44,12 +44,12 @@ export function getPages(
           title: "Accent Color",
           description:
             "The accent for the desktop UI, for things such as currently-selected items (not yet supported)",
-          currentValue: systemsSettings.accentColor,
+          currentValue: systemsSettings.secondaryColor,
           type: "color",
           valueValidation: (value) =>
             isHexColorCode(value) ? undefined : "Invalid HEX color code",
           onValueChanged(value) {
-            systemsSettings.setAccentColor(value);
+            systemsSettings.setSecondaryColor(value);
           },
         },
         {

src/programs/TextEditor/TextEditor.tsx

@@ -18,7 +18,7 @@ const TextEditor = forwardRef<TextEditorHandles, TextEditorProps>(
     return (
       <StyledTextEditor className="text-editor" ref={elementRef}>
         <StyledTextArea
-          selectedColor={settings.accentColor}
+          selectedColor={settings.secondaryColor}
           className="text-editor__content"
         />
       </StyledTextEditor>