Menu flyout layout tweaks

responsively-org · Jan 17, 2025 · 00bfd22 · 00bfd22
1 parent b252d74
commit 00bfd22
Show file tree

Hide file tree

Showing 6 changed files with 424 additions and 752 deletions.
diff --git a/desktop-app/src/renderer/components/Notifications/NotificationEmptyStatus.tsx b/desktop-app/src/renderer/components/Notifications/NotificationEmptyStatus.tsx
@@ -1,6 +1,6 @@
 const NotificationEmptyStatus = () => {
   return (
-    <div className="mb-2 text-sm text-white">
+    <div className="mb-2">
       <p>You are all caught up! No new notifications at the moment.</p>
     </div>
   );

diff --git a/desktop-app/src/renderer/components/Notifications/Notifications.tsx b/desktop-app/src/renderer/components/Notifications/Notifications.tsx
@@ -10,7 +10,7 @@ const Notifications = () => {
 
   return (
     <div className="mb-4 max-h-[200px] overflow-y-auto rounded-lg p-1 px-4 shadow-lg dark:bg-slate-900">
-      <span className="text-lg">Notifications</span>
+      <span className="text-md">Notifications</span>
       <div className="mt-2">
         {(!notificationsState ||
           (notificationsState && notificationsState?.length === 0)) && (

diff --git a/desktop-app/src/renderer/components/ToolBar/Menu/Flyout/Bookmark/ViewAllBookmarks/index.tsx b/desktop-app/src/renderer/components/ToolBar/Menu/Flyout/Bookmark/ViewAllBookmarks/index.tsx
@@ -29,7 +29,7 @@ const ViewAllBookmarks = ({ bookmarks, handleBookmarkFlyout }: Props) => {
 
   return (
     <div>
-      <div className="absolute top-[179px] right-[322px] z-50 flex max-h-[60vh] min-h-min flex-col overflow-x-auto overflow-y-auto rounded border bg-white focus:outline-none dark:bg-slate-900 dark:ring-white dark:!ring-opacity-40">
+      <div className="absolute right-[316px] top-0 z-50 flex max-h-[60vh] min-h-min flex-col overflow-x-auto overflow-y-auto rounded border bg-slate-100 focus:outline-none dark:bg-slate-900 dark:ring-white dark:!ring-opacity-40">
         {bookmarks.map((bookmark) => {
           return (
             <div key={bookmark.id}>
@@ -48,7 +48,7 @@ const ViewAllBookmarks = ({ bookmarks, handleBookmarkFlyout }: Props) => {
           </Button>
         )}
       </div>
-      <div className="absolute right-[565px] top-[179px]">
+      <div className="absolute right-[560px]">
         {openFlyout && (
           <BookmarkFlyout
             bookmark={currentBookmark}

diff --git a/desktop-app/src/renderer/components/ToolBar/Menu/Flyout/Bookmark/index.tsx b/desktop-app/src/renderer/components/ToolBar/Menu/Flyout/Bookmark/index.tsx
@@ -23,10 +23,11 @@ const Bookmark = () => {
 
   return (
     <div
+      className="relative"
       onMouseEnter={() => setIsOpen(true)}
       onMouseLeave={() => setIsOpen(false)}
     >
-      <div className="">
+      <div>
         <div className="relative right-2 w-80 dark:border-slate-400">
           <Button
             className="flex w-full items-center justify-between pl-6"

diff --git a/desktop-app/src/renderer/components/ToolBar/Menu/Flyout/index.tsx b/desktop-app/src/renderer/components/ToolBar/Menu/Flyout/index.tsx
@@ -1,4 +1,3 @@
-import MasonryLayout from 'renderer/components/Masonry/MasonryLayout';
 import Notifications from 'renderer/components/Notifications/Notifications';
 import { Divider } from 'renderer/components/Divider';
 import Devtools from './Devtools';
@@ -16,16 +15,18 @@ interface Props {
 
 const MenuFlyout = ({ closeFlyout }: Props) => {
   return (
-    <div className="absolute top-[26px] right-[4px] z-50 flex w-80 flex-col gap-2 rounded bg-white p-2 pb-0 text-sm shadow-lg ring-1 ring-slate-500 !ring-opacity-40 focus:outline-none dark:bg-slate-900 dark:ring-white dark:!ring-opacity-40">
+    <div className="absolute top-[26px] right-[4px] z-50 flex w-80 flex-col gap-2 rounded bg-slate-100 p-2 pb-0 text-sm shadow-lg ring-1 ring-slate-500 !ring-opacity-40 focus:outline-none dark:bg-slate-900 dark:ring-white dark:!ring-opacity-40">
       <Zoom />
-      <PreviewLayout />
-      <MasonryLayout />
       <UITheme />
       <Devtools />
       <AllowInSecureSSL />
       <ClearHistory />
       <Divider />
 
+      <PreviewLayout />
+
+      <Divider />
+
       <div>
         <Bookmark />
         <Settings closeFlyout={closeFlyout} />