chore: add border to menus in dark theme

packages/web/package.json

@@ -87,14 +87,14 @@
     "postcss": "^8.4.19",
     "postcss-loader": "^7.0.2",
     "prettier": "*",
-    "prettier-plugin-tailwindcss": "^0.2.1",
+    "prettier-plugin-tailwindcss": "^0.4.0",
     "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-refresh": "^0.14.0",
     "sass-loader": "*",
     "svg-jest": "^1.0.1",
-    "tailwindcss": "^3.2.7",
+    "tailwindcss": "^3.3.2",
     "ts-jest": "^29.0.3",
     "ts-loader": "^9.4.2",
     "typescript": "*",

packages/web/src/components/assets/org.standardnotes.theme-focus/index.css

@@ -47,4 +47,5 @@
   --sn-stylekit-menu-border: 1px solid #424242;
   --navigation-item-selected-background-color: var(--background-color);
   --normal-button-background-color: var(--sn-stylekit-passive-color-5);
+  --menu-border-color: var(--sn-stylekit-border-color);
 }

packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx

@@ -87,7 +87,7 @@ const PositionedPopoverContent = ({
       <div
         className={classNames(
           'absolute top-0 left-0 flex w-full min-w-80 cursor-auto flex-col',
-          'overflow-y-auto rounded bg-default shadow-main md:h-auto md:max-w-xs',
+          'overflow-y-auto rounded border border-[--menu-border-color] bg-default shadow-main md:h-auto md:max-w-xs',
           !disableMobileFullscreenTakeover && 'h-full',
           overrideZIndex ? overrideZIndex : 'z-dropdown-menu',
           !isDesktopScreen && !disableMobileFullscreenTakeover ? 'pt-safe-top pb-safe-bottom' : '',

packages/web/src/stylesheets/_theme.scss

@@ -43,4 +43,6 @@
   --link-element-color: var(--sn-stylekit-info-color);
 
   --normal-button-background-color: var(--sn-stylekit-background-color);
+
+  --menu-border-color: transparent;
 }