Reserve icons

web/src/components/Navigation.js

@@ -11,6 +11,7 @@ import Divider from "@mui/material/Divider";
 import List from "@mui/material/List";
 import SettingsIcon from "@mui/icons-material/Settings";
 import AddIcon from "@mui/icons-material/Add";
+import VisibilityIcon from '@mui/icons-material/Visibility';
 import SubscribeDialog from "./SubscribeDialog";
 import {Alert, AlertTitle, Badge, CircularProgress, Link, ListSubheader, Tooltip} from "@mui/material";
 import Button from "@mui/material/Button";
@@ -31,6 +32,7 @@ import accountApi from "../app/AccountApi";
 import CelebrationIcon from '@mui/icons-material/Celebration';
 import UpgradeDialog from "./UpgradeDialog";
 import {AccountContext} from "./App";
+import {PermissionDenyAll, PermissionRead, PermissionReadWrite, PermissionWrite} from "./ReserveIcons";
 
 const navWidth = 280;
 
@@ -263,16 +265,16 @@ const SubscriptionItem = (props) => {
             {subscription.reservation?.everyone &&
                 <ListItemIcon edge="end" sx={{ minWidth: "26px" }}>
                     {subscription.reservation?.everyone === "read-write" &&
-                        <Tooltip title={t("prefs_reservations_table_everyone_read_write")}><Public fontSize="small"/></Tooltip>
+                        <Tooltip title={t("prefs_reservations_table_everyone_read_write")}><PermissionReadWrite size="small"/></Tooltip>
                     }
                     {subscription.reservation?.everyone === "read-only" &&
-                        <Tooltip title={t("prefs_reservations_table_everyone_read_only")}><PublicOff fontSize="small"/></Tooltip>
+                        <Tooltip title={t("prefs_reservations_table_everyone_read_only")}><PermissionRead size="small"/></Tooltip>
                     }
                     {subscription.reservation?.everyone === "write-only" &&
-                        <Tooltip title={t("prefs_reservations_table_everyone_write_only")}><PublicOff fontSize="small"/></Tooltip>
+                        <Tooltip title={t("prefs_reservations_table_everyone_write_only")}><PermissionWrite size="small"/></Tooltip>
                     }
                     {subscription.reservation?.everyone === "deny-all" &&
-                        <Tooltip title={t("prefs_reservations_table_everyone_deny_all")}><Lock fontSize="small"/></Tooltip>
+                        <Tooltip title={t("prefs_reservations_table_everyone_deny_all")}><PermissionDenyAll size="small"/></Tooltip>
                     }
                 </ListItemIcon>
             }

web/src/components/ReserveIcons.js

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import {Lock, Public} from "@mui/icons-material";
+import Box from "@mui/material/Box";
+
+
+export const PermissionReadWrite = React.forwardRef((props, ref) => {
+    const size = props.size ?? "medium";
+    return <Public fontSize={size} ref={ref} {...props}/>;
+});
+
+export const PermissionDenyAll = React.forwardRef((props, ref) => {
+    const size = props.size ?? "medium";
+    return <Lock fontSize={size} ref={ref} {...props}/>;
+});
+
+export const PermissionRead = React.forwardRef((props, ref) => {
+    return <PermissionReadOrWrite text="R" ref={ref} {...props}/>;
+});
+
+export const PermissionWrite = React.forwardRef((props, ref) => {
+    return <PermissionReadOrWrite text="W" ref={ref} {...props}/>;
+});
+
+const PermissionReadOrWrite = React.forwardRef((props, ref) => {
+    const size = props.size ?? "medium";
+    return (
+        <div ref={ref} {...props} style={{position: "relative", display: "inline-flex", verticalAlign: "middle", height: "24px"}}>
+            <Public fontSize={size}/>
+            <Box
+                sx={{
+                    position: "absolute",
+                    right: "-6px",
+                    bottom: "5px",
+                    fontSize: 10,
+                    fontWeight: 600,
+                    color: "gray",
+                    width: "8px",
+                    height: "8px",
+                    marginTop: "3px"
+                }}
+            >
+                {props.text}
+            </Box>
+        </div>
+    );
+});

web/src/components/ReserveTopicSelect.js

@@ -19,6 +19,7 @@ import ListItemIcon from "@mui/material/ListItemIcon";
 import LockIcon from "@mui/icons-material/Lock";
 import ListItemText from "@mui/material/ListItemText";
 import {Public, PublicOff} from "@mui/icons-material";
+import {PermissionDenyAll, PermissionRead, PermissionReadWrite, PermissionWrite} from "./ReserveIcons";
 
 const ReserveTopicSelect = (props) => {
     const { t } = useTranslation();
@@ -39,19 +40,19 @@ const ReserveTopicSelect = (props) => {
                 }}
             >
                 <MenuItem value="deny-all">
-                    <ListItemIcon><LockIcon/></ListItemIcon>
+                    <ListItemIcon><PermissionDenyAll/></ListItemIcon>
                     <ListItemText primary={t("prefs_reservations_table_everyone_deny_all")}/>
                 </MenuItem>
                 <MenuItem value="read-only">
-                    <ListItemIcon><PublicOff/></ListItemIcon>
+                    <ListItemIcon><PermissionRead/></ListItemIcon>
                     <ListItemText primary={t("prefs_reservations_table_everyone_read_only")}/>
                 </MenuItem>
                 <MenuItem value="write-only">
-                    <ListItemIcon><PublicOff/></ListItemIcon>
+                    <ListItemIcon><PermissionWrite/></ListItemIcon>
                     <ListItemText primary={t("prefs_reservations_table_everyone_write_only")}/>
                 </MenuItem>
                 <MenuItem value="read-write">
-                    <ListItemIcon><Public/></ListItemIcon>
+                    <ListItemIcon><PermissionReadWrite/></ListItemIcon>
                     <ListItemText primary={t("prefs_reservations_table_everyone_read_write")}/>
                 </MenuItem>
             </Select>