remove final evergreen dropdown / popover usage

- refactor journal and date selectors in FrontMatter to use radix- based dropdown / popover instead of evergreen
- move Dropdown / Popover to base components to reflect wider usage intent
- refactor context menu (in sidebar) to use tailwind, and use same bg / text classes as other menus

These changes will make it easier to move theme / restyle in the future

Also:
- fix (remove) an inline code style that changed line height when typing inline code in the editor

src/views/edit/editor/toolbar/components/DropdownMenu.tsx → src/components/DropdownMenu.tsx

@@ -12,7 +12,7 @@ import {
 } from "@udecode/cn";
 import { cva } from "class-variance-authority";
 
-import { Icons } from "../../../../../components/icons";
+import { Icons } from "./icons";
 
 /**
  * This file contains the wrapping DropdownMenu used to make the insert, toggle ("turn into"),
@@ -61,7 +61,7 @@ export const DropdownMenuSubContent = withCn(
 
 const DropdownMenuContentVariants = withProps(DropdownMenuPrimitive.Content, {
   className: cn(
-    "z-50 min-w-32 overflow-hidden border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+    "z-50 max-h-52 overflow-y-auto overflow-x-hidden min-w-32 border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
   ),
   sideOffset: 4,
 });

src/index.css

@@ -13,10 +13,6 @@
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
 
-    /* NOTE: Separated tooltip from popover, where dropdown, popover, and tooltip all shared before
-     * This was to avoid bikeshedding once I changed the tooltip color to black, but proibably this is 
-     * worth tying back together once I can dedicate more time to just these styles
-     */
     --tooltip: 222.2 84% 4.9%;
     --tooltip-foreground: 0 0% 100%;
 

src/typography.css

@@ -103,14 +103,6 @@ svg:not(:root) {
   overflow: hidden;
 }
 
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-
 figure {
   margin: 1em 40px;
 }
@@ -399,8 +391,8 @@ table {
   padding-right: 0;
   padding-top: 0;
   margin-bottom: 0.8125rem;
-  font-size: 1rem;
-  line-height: 1.625rem;
+  font-size: 0.9rem;
+  line-height: 1.425rem;
   border-collapse: collapse;
   width: 100%;
 }
@@ -539,11 +531,6 @@ li > p {
   margin-bottom: calc(0.8125rem / 2);
 }
 
-code {
-  font-size: 0.85rem;
-  line-height: 1.625rem;
-}
-
 kbd {
   font-size: 0.85rem;
   line-height: 1.625rem;

src/views/documents/sidebar/JournalItem.tsx

@@ -1,4 +1,5 @@
 import * as ContextMenu from "@radix-ui/react-context-menu";
+import { cn } from "@udecode/cn";
 import { Heading, Pane, toaster } from "evergreen-ui";
 import { noop } from "lodash";
 import { observer } from "mobx-react-lite";
@@ -44,6 +45,12 @@ export function JournalCreateForm({ done }: { done: () => any }) {
   );
 }
 
+const menuItemCss = cn(
+  "relative flex h-6 cursor-pointer select-none items-center pr-1 pl-6 text-xs outline-none transition-colors",
+  "data-[disabled]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
+  "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+);
+
 /**
  * Displays a journal by name in the sidebar, with context menu actions
  * for editing, archiving, deleting, and setting as default.
@@ -72,7 +79,7 @@ export const JournalItem = observer(
 
     return (
       <ContextMenu.Root>
-        <ContextMenu.Trigger className="ContextMenuTrigger">
+        <ContextMenu.Trigger>
           <div className="flex items-center">
             <Icons.folder size={19} className="mr-1" />
             {editing ? (
@@ -86,44 +93,47 @@ export const JournalItem = observer(
           </div>
         </ContextMenu.Trigger>
         <ContextMenu.Portal>
-          <ContextMenu.Content className="ContextMenuContent" alignOffset={5}>
-            <ContextMenu.Label className="ContextMenuLabel">
+          <ContextMenu.Content
+            className="z-50 min-w-56 overflow-y-auto overflow-x-hidden border bg-popover p-1 text-popover-foreground shadow-md"
+            alignOffset={5}
+          >
+            <ContextMenu.Label className="py-1 pl-6 text-xs text-accent-foreground">
               Journal management
             </ContextMenu.Label>
 
             <ContextMenu.Item
-              className="ContextMenuItem"
+              className={menuItemCss}
               onClick={onArchive}
               disabled={isDefault}
             >
               {isArchived ? "Restore" : "Archive"}
             </ContextMenu.Item>
 
             <ContextMenu.Item
-              className="ContextMenuItem"
+              className={menuItemCss}
               onClick={() => store.toggleEditing(journal.id)}
               disabled={isArchived}
             >
               Rename
             </ContextMenu.Item>
 
             <ContextMenu.CheckboxItem
-              className="ContextMenuCheckboxItem"
+              className={menuItemCss}
               checked={isDefault}
               onCheckedChange={() => {}}
               onClick={onSetDefault}
               disabled={isArchived}
             >
-              <ContextMenu.ItemIndicator className="ContextMenuItemIndicator">
-                <Icons.check />
+              <ContextMenu.ItemIndicator className="absolute left-0 inline-flex w-6 items-center justify-center">
+                <Icons.check size="14" />
               </ContextMenu.ItemIndicator>
               Default
             </ContextMenu.CheckboxItem>
 
-            <ContextMenu.Separator className="ContextMenuSeparator" />
+            <ContextMenu.Separator className="m-1 h-[1px] bg-accent" />
 
             <ContextMenu.Item
-              className="ContextMenuItem"
+              className={menuItemCss}
               onClick={onDelete}
               disabled={isDefault}
             >
@@ -209,3 +219,25 @@ const JournalEditor = observer(function JournalEditor({
     </>
   );
 });
+
+/*
+ "RightSlot" css - this is the last CSS I did not migrate, when I replaced
+ the previously imported .css file with tailwind classes. Leaving in case its
+ needed:
+
+.RightSlot {
+  margin-left: auto;
+  padding-left: 20px;
+  color: var(--mauve-11);
+}
+
+[data-highlighted] > .RightSlot {
+  color: white;
+}
+
+[data-disabled] .RightSlot {
+  color: var(--mauve-8);
+}
+
+
+ */

src/views/documents/sidebar/Sidebar.tsx

@@ -16,8 +16,6 @@ import { Collapse, JournalCreateForm, JournalItem } from "./JournalItem";
 import { TagsList } from "./TagsList";
 import { SidebarStore, useSidebarStore } from "./store";
 
-import "./sidebar-styles.css";
-
 type SidebarProps = React.PropsWithChildren<{
   isShown: boolean;
   setIsShown: (isShown: boolean) => void;