Fix photolist action menu styling, move actions to the right

TODO

@@ -5,10 +5,10 @@
 - medium: fix public user list and public photos for authenticated user
 - medium: highlight sidebar menu when children menu page is active
 - medium: remove the use of useMediaquery
-- medium: photolist action menu styling, move actions to the right
 - low: fix photo list dropdown filter click area
 - low: rework mobile top menu for usability (upload, search, etc.)
 - low: fix warnings (in console) related to defaultProps (photo list view, etc.)
+- medium: fix lightbox editor caption
 
 - optional: refactor site search with combobox
 - optional: migrate from Emotion to css modules (performance improvement)

src/components/facedashboard/FaceComponent.tsx

@@ -24,6 +24,13 @@ const useStyle = createStyles(theme => ({
   },
 }));
 
+export const calculateProbabiltyColor = (labelProbability: number) => {
+  if (labelProbability > 0.9) return "green";
+  if (labelProbability > 0.8) return "yellow";
+  if (labelProbability > 0.7) return "orange";
+  return "red";
+};
+
 export function FaceComponent({
   cell,
   isScrollingFast,
@@ -33,14 +40,7 @@ export function FaceComponent({
   handleClick,
   handleShowClick,
 }: Props) {
-
   const { classes } = useStyle();
-  const calculateProbabiltyColor = (labelProbability: number) => {
-    if (labelProbability > 0.9) return "green";
-    if (labelProbability > 0.8) return "yellow";
-    if (labelProbability > 0.7) return "orange";
-    return "red";
-  };
 
   const labelProbabilityColor = calculateProbabiltyColor(cell.person_label_probability);
   const [tooltipOpened, setTooltipOpened] = useState(false);

src/components/facedashboard/HeaderComponent.tsx

@@ -109,7 +109,7 @@ export function HeaderComponent({
         {!(cell.kind === "CLUSTER" || cell.kind === "UNKNOWN") && (
           <Menu position="bottom-end">
             <Menu.Target>
-              <ActionIcon>
+              <ActionIcon variant="subtle" color="gray">
                 <DotsVertical />
               </ActionIcon>
             </Menu.Target>

src/components/lightbox/Description.tsx

@@ -145,7 +145,12 @@ export function Description(props: Props) {
             )}
         </Stack>
         <div
-          style={{ borderStyle: !editMode ? "none" : "solid", border: "0.0625rem #ced4da", borderRadius: "0.25rem" }}
+          style={{
+            position: "relative",
+            borderStyle: !editMode ? "none" : "solid",
+            border: "0.0625rem #ced4da",
+            borderRadius: "0.25rem",
+          }}
         >
           <RichTextEditor editor={editor} style={{ borderColor: "none" }}>
             <RichTextEditor.Content style={{ paddingRight: 10 }} />
@@ -154,6 +159,7 @@ export function Description(props: Props) {
                 style={{ position: "absolute", right: 0, top: 0, margin: "5px" }}
                 loading={generatingCaptionIm2txt}
                 variant="subtle"
+                color="gray"
                 onClick={() => {
                   generateImageToTextCaptions({ id: photoDetail.image_hash });
                 }}
@@ -167,6 +173,7 @@ export function Description(props: Props) {
                 style={{ position: "absolute", right: 0, top: 0, margin: "5px" }}
                 loading={generatingCaptionIm2txt}
                 variant="subtle"
+                color="gray"
                 onClick={() => {
                   setEditMode(true);
                   editor?.setEditable(true);

src/components/lightbox/LightBox.tsx

@@ -7,7 +7,7 @@ import {
   IconZoomOut as ZoomOut,
 } from "@tabler/icons-react";
 import { useGesture } from "@use-gesture/react";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import ReactPlayer from "react-player";
 
 import { serverAddress } from "../../api_client/apiClient";
@@ -179,8 +179,8 @@ export const ContentViewer: React.FC<ContentViewerProps> = ({
   };
 
   return (
-    <Modal.Root opened={true} onClose={onCloseRequest} fullScreen>
-      <Modal.Overlay blur={5} opacity={0.8} />
+    <Modal.Root opened onClose={onCloseRequest} fullScreen>
+      <Modal.Overlay blur={5} backgroundOpacity={0.8} />
       <Modal.Content style={{ background: "transparent" }}>
         <Modal.Body
           style={{
@@ -192,21 +192,23 @@ export const ContentViewer: React.FC<ContentViewerProps> = ({
           }}
         >
           <div style={{ width: `100%`, padding: 16 }}>
-            <Group position="right" style={{ background: "transparent" }}>
+            <Group justify="flex-end" style={{ background: "transparent" }}>
               <Toolbar
                 photosDetail={photoDetails[mainSrc]}
                 lightboxSidebarShow={lightboxSidebarShow}
                 closeSidepanel={() => setLightBoxSidebarShow(!lightboxSidebarShow)}
                 isPublic={isPublic}
               />
               {enableZoom && type === "photo" && (
-                <div style={{ marginBottom: 10 }}>
-                  <ActionIcon onClick={toggleZoom}>{isZoomed ? <ZoomOut /> : <ZoomIn />}</ActionIcon>
+                <div style={{ marginBottom: 5 }}>
+                  <ActionIcon variant="subtle" color="gray" onClick={toggleZoom}>
+                    {isZoomed ? <ZoomOut /> : <ZoomIn />}
+                  </ActionIcon>
                 </div>
               )}
-              <div style={{ marginBottom: 10 }}>
-                <ActionIcon onClick={onCloseRequest}>
-                  <X color="grey" />
+              <div style={{ marginBottom: 5 }}>
+                <ActionIcon variant="subtle" color="gray" onClick={onCloseRequest}>
+                  <X />
                 </ActionIcon>
               </div>
             </Group>
@@ -218,7 +220,14 @@ export const ContentViewer: React.FC<ContentViewerProps> = ({
               }}
             >
               {/* Navigation Button on the Left */}
-              <ActionIcon onClick={onMovePrevRequest} disabled={!prevSrc} size="lg" mr="sm">
+              <ActionIcon
+                variant="subtle"
+                color="gray"
+                onClick={onMovePrevRequest}
+                disabled={!prevSrc}
+                size="lg"
+                mr="sm"
+              >
                 <ArrowLeft size={24} />
               </ActionIcon>
 
@@ -255,7 +264,7 @@ export const ContentViewer: React.FC<ContentViewerProps> = ({
                       src={`${serverAddress}/media/thumbnails_big/${mainSrc}`}
                       alt="Lightbox Main Content"
                       onLoad={event => {
-                        const { naturalWidth, naturalHeight } = event.target;
+                        const { naturalWidth, naturalHeight } = event.target as HTMLImageElement;
                         setImageDimensions({ width: naturalWidth, height: naturalHeight });
                         setScale(1);
                         setOffset({ x: 0, y: 0 });
@@ -278,7 +287,7 @@ export const ContentViewer: React.FC<ContentViewerProps> = ({
                   </div>
                   {faceLocation && (
                     <Box
-                      sx={theme => ({
+                      style={theme => ({
                         position: "absolute",
                         border: `2px solid ${theme.colors.gray[4]}`,
                         borderRadius: theme.radius.lg,
@@ -291,7 +300,14 @@ export const ContentViewer: React.FC<ContentViewerProps> = ({
               )}
 
               {/* Navigation Button on the Right */}
-              <ActionIcon onClick={onMoveNextRequest} disabled={!nextSrc} size="lg" ml="sm">
+              <ActionIcon
+                variant="subtle"
+                color="gray"
+                onClick={onMoveNextRequest}
+                disabled={!nextSrc}
+                size="lg"
+                ml="sm"
+              >
                 <ArrowRight size={24} />
               </ActionIcon>
             </div>

src/components/lightbox/Sidebar.tsx

@@ -1,5 +1,5 @@
-import { createStyles } from "@mantine/emotion";
 import { ActionIcon, Avatar, Box, Button, Group, Indicator, Stack, Text, Title, Tooltip } from "@mantine/core";
+import { createStyles } from "@mantine/emotion";
 import { useViewportSize } from "@mantine/hooks";
 import { IconMap2 as Map2, IconPhoto as Photo, IconX as X } from "@tabler/icons-react";
 import React, { useState } from "react";
@@ -10,8 +10,7 @@ import type { Photo as PhotoType } from "../../actions/photosActions.types";
 import { api } from "../../api_client/api";
 import { photoDetailsApi } from "../../api_client/photos/photoDetail";
 import { notification } from "../../service/notifications";
-import { useAppDispatch } from "../../store/store";
-import { useAppSelector } from "../../store/store";
+import { useAppDispatch, useAppSelector } from "../../store/store";
 import { LocationMap } from "../LocationMap";
 import { Tile } from "../Tile";
 import { ModalPersonEdit } from "../modals/ModalPersonEdit";
@@ -29,14 +28,6 @@ type Props = {
 
 const useStyle = createStyles((theme, _, u) => ({
   container: {
-    right: 0,
-    top: 0,
-    float: "right",
-    whiteSpace: "normal",
-    position: "fixed",
-    overflowY: "scroll",
-    overflowX: "hidden",
-    zIndex: 250,
     padding: theme.spacing.sm,
     [u.light]: {
       backgroundColor: theme.colors.gray[0],
@@ -71,14 +62,18 @@ export function Sidebar(props: Props) {
         height: "100%",
         overflowY: "scroll",
         overflowX: "hidden",
+        float: "right",
+        whiteSpace: "normal",
         zIndex: 250,
       }}
     >
       {photoDetail && (
         <Stack>
-          <Group justify="apart">
+          <Group justify="space-between">
             <Title order={3}>Details</Title>
             <ActionIcon
+              variant="subtle"
+              color="gray"
               onClick={() => {
                 closeSidepanel();
               }}

src/components/menubars/SideMenuNarrow.tsx

@@ -84,7 +84,9 @@ export function SideMenuNarrow(): JSX.Element {
         >
           <item.icon />
         </ActionIcon>
-        <Text style={{ flexGrow: 2 }}>{item.label}</Text>
+        <Text size="sm" c="rgb(73, 80, 87)" style={{ flexGrow: 2 }}>
+          {item.label}
+        </Text>
         {item.submenu && <ChevronRight size={16} />}
       </a>
     );

src/components/menubars/TopMenu.tsx

@@ -10,9 +10,7 @@ import React from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { push } from "redux-first-history";
 
-import { toggleSidebar } from "../../actions/uiActions";
-import { api, useFetchUserSelfDetailsQuery } from "../../api_client/api";
-import { useLogoutMutation } from "../../api_client/api";
+import { api, useFetchUserSelfDetailsQuery, useLogoutMutation } from "../../api_client/api";
 import { serverAddress } from "../../api_client/apiClient";
 import { useAppDispatch, useAppSelector } from "../../store/store";
 import { ChunkedUploadButton } from "../ChunkedUploadButton";
@@ -25,7 +23,6 @@ export function TopMenu({ toggleSidebar }: { toggleSidebar: () => void }): React
   const { t } = useTranslation();
   const auth = useAppSelector(state => state.auth);
   const { data: user } = useFetchUserSelfDetailsQuery(auth.access.user_id);
-  const matches = useMediaQuery("(min-width: 700px)");
   const [logout] = useLogoutMutation();
 
   return (
@@ -76,20 +73,18 @@ export function TopMenu({ toggleSidebar }: { toggleSidebar: () => void }): React
               </Menu.Item>
             )}
 
-                <Menu.Item
-                  icon={<Logout />}
-                  onClick={() => {
-                    logout();
-                    dispatch(api.util.resetApiState());
-                  }}
-                >
-                  {t("topmenu.logout")}
-                </Menu.Item>
-              </Menu.Dropdown>
-            </Menu>
-          </Group>
-        </Grid.Col>
-      </Grid>
-    </Header>
+            <Menu.Item
+              leftSection={<Logout />}
+              onClick={() => {
+                logout();
+                dispatch(api.util.resetApiState());
+              }}
+            >
+              {t("topmenu.logout")}
+            </Menu.Item>
+          </Menu.Dropdown>
+        </Menu>
+      </Group>
+    </Group>
   );
 }

src/components/photolist/PhotoListView.tsx

@@ -134,7 +134,6 @@ function PhotoListViewComponent(props: Props) {
     []
   );
 
-  /* eslint-disable react-hooks/exhaustive-deps */
   const throttledUpdateItems = useCallback(
     throttle(visibleItems => updateItems(visibleItems), 500),
     []
@@ -293,15 +292,15 @@ function PhotoListViewComponent(props: Props) {
               style={{
                 paddingLeft: 10,
               }}
-              align="apart"
+              justify="space-between"
             >
               <SelectionBar
                 selectMode={selectionState.selectMode}
                 selectedItems={selectionState.selectedItems}
                 idx2hash={idx2hash}
                 updateSelectionState={updateSelectionState}
               />
-              <Group align="right">
+              <Group justify="flex-end">
                 {!route.location.pathname.startsWith("/deleted") && (
                   <SelectionActions
                     selectedItems={selectionState.selectedItems}

src/components/photolist/SelectionActions.tsx

@@ -64,7 +64,7 @@ export function SelectionActions(props: Readonly<Props>) {
     <Group>
       <Menu width={200}>
         <Menu.Target>
-          <ActionIcon disabled={selectedItems.length === 0}>
+          <ActionIcon variant="subtle" color="gray" disabled={selectedItems.length === 0}>
             <Plus />
           </ActionIcon>
         </Menu.Target>
@@ -84,7 +84,7 @@ export function SelectionActions(props: Readonly<Props>) {
 
       <Menu width={200}>
         <Menu.Target>
-          <ActionIcon>
+          <ActionIcon variant="subtle" color="gray">
             <DotsVertical />
           </ActionIcon>
         </Menu.Target>

src/components/statistics.tsx

@@ -18,7 +18,7 @@ export function CountStats() {
   const { data: countStats = COUNT_STATS_DEFAULTS } = useFetchCountStatsQuery();
 
   return (
-    <Group grow gap="xs" align="stretch">
+    <Group grow gap="xs" justify="space-between">
       <Card withBorder p="xs">
         <Group justify="left" gap="xs">
           <Photo size={64} strokeWidth={1} />