Improve UI

frontend/src/components/select.tsx

@@ -26,7 +26,7 @@ export default function Select({
           tabIndex={0}
           role={"button"}
           className={
-            "flex border border-primary rounded-3xl px-4 py-2 items-center cursor-pointer min-w-52 focus:outline-2 focus:outline-primary outline-offset-2"
+            "flex border border-primary/80 bg-base-100-tr82 rounded-3xl px-4 py-2 items-center cursor-pointer min-w-52 focus:outline-2 focus:outline-primary outline-offset-2"
           }
         >
           <span className={"flex-1 text-sm"}>

frontend/src/index.css

@@ -316,3 +316,13 @@ body {
 .bg-base-100-tr82 {
   background-color: rgb(var(--color-base-100-rgb) / 0.82);
 }
+
+.bg-base-200-tr82 {
+  background-color: rgb(var(--color-base-200-rgb) / 0.82);
+}
+
+@media (width >= 1024px) {
+  .lg\:bg-base-100-tr82 {
+    background-color: rgb(var(--color-base-100-rgb) / 0.82);
+  }
+}

frontend/src/pages/comment_page.tsx

@@ -14,6 +14,7 @@ import Pagination from "../components/pagination";
 import { MdOutlineDelete, MdOutlineEdit } from "react-icons/md";
 import { TextArea } from "../components/input";
 import { app } from "../app";
+import { useNavigator } from "../components/navigator";
 
 export default function CommentPage() {
   const params = useParams();
@@ -84,7 +85,18 @@ export default function CommentPage() {
 
   useEffect(() => {
     document.title = t("Comment Details");
-  });
+  }, [t]);
+
+  const navigator = useNavigator();
+
+  useEffect(() => {
+    if (comment?.resource && comment.resource.image) {
+      navigator.setBackground(network.getResampledImageUrl(comment.resource.image.id));
+    } else if (comment?.images?.length) {
+      // comment images are not resampled
+      navigator.setBackground(network.getImageUrl(comment.images[0].id));
+    }
+  }, [comment]);
 
   if (!comment) {
     return <Loading />;
@@ -95,7 +107,8 @@ export default function CommentPage() {
       {comment.resource && <ResourceCard resource={comment.resource} />}
       {comment.reply_to && <CommentTile comment={comment.reply_to} />}
       <div className="h-2"></div>
-      <div className="flex items-center mt-4">
+      <div className="bg-base-100-tr82 rounded-2xl p-4 shadow">
+        <div className="flex items-center">
         <button
           onClick={() => {
             navigate(`/user/${encodeURIComponent(comment.user.username)}`);
@@ -126,6 +139,7 @@ export default function CommentPage() {
           <DeleteCommentDialog commentId={comment.id} onUpdated={onDeleted} />
         </div>
       )}
+      </div>
       <div className="h-4" />
       <div className="border-t border-base-300" />
       <div className="h-4" />
@@ -161,7 +175,7 @@ function ResourceCard({ resource }: { resource: Resource }) {
   return (
     <a
       href="link"
-      className="flex flex-col sm:flex-row w-full card bg-base-200 shadow-xs hover:shadow overflow-clip my-2 transition-shadow"
+      className="flex flex-col sm:flex-row w-full card bg-base-100-tr82 shadow hover:shadow-md overflow-clip my-2 transition-shadow"
       onClick={(e) => {
         e.preventDefault();
         navigate(link);

frontend/src/pages/manage_me_page.tsx

@@ -46,7 +46,7 @@ function ListTile({
 }) {
   return (
     <div
-      className="flex flex-row items-center h-12 px-2 bg-base-100 hover:bg-gray-200 cursor-pointer duration-200"
+      className="flex flex-row items-center h-12 px-2 hover:bg-gray-200 cursor-pointer duration-200"
       onClick={onClick}
     >
       <div className="flex flex-row items-center">

frontend/src/pages/manage_page.tsx

@@ -68,15 +68,12 @@ export default function ManagePage() {
   ];
 
   return (
-    <div className="drawer lg:drawer-open">
+    <div className="drawer lg:drawer-open lg:pl-4">
       <input id="my-drawer-2" type="checkbox" className="drawer-toggle" />
       <div
-        className="drawer-content"
+        className="drawer-content overflow-y-auto bg-base-100-tr82 lg:m-4 rounded-md lg:p-2 h-[calc(100vh-64px)] lg:h-[calc(100vh-96px)]"
-        style={{
-          height: "calc(100vh - 64px)",
-        }}
       >
-        <div className={"flex w-full h-14 items-center gap-2 px-3"}>
+        <div className={"flex w-full h-14 items-center gap-2 px-4"}>
           <label
             className={"btn btn-square btn-ghost lg:hidden"}
             htmlFor="my-drawer-2"
@@ -91,6 +88,7 @@ export default function ManagePage() {
         className="drawer-side"
         style={{
           height: lg ? "calc(100vh - 64px)" : "100vh",
+          zIndex: 10,
         }}
       >
         <label
@@ -98,7 +96,7 @@ export default function ManagePage() {
           aria-label="close sidebar"
           className="drawer-overlay"
         ></label>
-        <ul className="menu bg-base-100 min-h-full lg:min-h-0 w-72 px-4 lg:mt-1">
+        <ul className="menu bg-base-100 lg:bg-base-100-tr82 min-h-full lg:min-h-0 lg:h-[calc(100%-32px)] lg:overflow-y-auto lg:my-4 w-72 px-4 lg:rounded-md">
           <h2 className={"text-lg font-bold p-4"}>{t("Manage")}</h2>
           {buildItem(t("My Info"), <MdOutlineBadge className={"text-xl"} />, 0)}
           {buildItem(