update link styles

- fix links being bold
- reduce whitespace around link editing popover
- remove some unused styles / more evergreen components

src/electron/index.js

@@ -195,7 +195,6 @@ function createWindow() {
     height: 600,
 
     // Hides the default (empty) window title
-    //
     titleBarStyle: "hidden",
 
     trafficLightPosition: { x: 10, y: 16 },

src/index.css

@@ -26,7 +26,6 @@
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
 
-    /* --accent: 255, 89%, 62%; */
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
 
@@ -101,10 +100,6 @@ div {
   color: rgb(41, 58, 242);
 }
 
-.hover-underline:hover {
-  text-decoration: underline;
-}
-
 /**
  * When first elements of each note have margin-top,
  * like heading elements, it acts like extra padding in the

src/typography.css

@@ -787,29 +787,31 @@ li > ul {
   margin-left: 2.03125rem;
 }
 
-a {
+/* Commented the links out when I re-styled editor links, but keeping them here for reference */
+
+/* a {
   color: #3e3e3e;
   text-decoration: none;
   border-bottom: 1px solid #3e3e3e;
-}
+} */
 
-a:hover,
+/* a:hover,
 a:active {
   text-decoration: underline;
-}
+} */
 
 a.gatsby-resp-image-link {
   box-shadow: none;
 }
 
-a:hover {
+/* a:hover {
   text-decoration: none;
 }
 
 header a {
   text-decoration: none;
   border-bottom: none;
-}
+} */
 
 blockQuote {
   margin-top: 25px;

src/views/documents/DocumentItem.tsx

@@ -10,12 +10,10 @@ export function DocumentItem(props: {
   const { doc, edit, getName } = props;
 
   return (
-    <Pane
+    <div
       key={doc.id}
-      style={{ display: "flex" }}
       onClick={() => edit(doc.id)}
-      cursor="default"
-      className="hover-underline"
+      className="cursor-pointer flex hover:underline hover:underline-offset"
     >
       {/* Without mono font, dates won't be a uniform width */}
       <div className="mono" style={{ flexShrink: 0, marginRight: "24px" }}>
@@ -34,6 +32,6 @@ export function DocumentItem(props: {
           </Badge>
         </small>
       </div>
-    </Pane>
+    </div>
   );
 }

src/views/edit/PlateContainer.tsx

@@ -107,10 +107,7 @@ import { createFilesPlugin } from "./editor/plugins/createFilesPlugin";
 import { IClient } from "../../preload/client/types";
 const client: IClient = (window as any).chronicles.createClient();
 
-import { EditorToolbar } from "./editor/toolbar/EditorToolbar";
 import { EditorMode } from "./EditorMode";
-import FrontMatter from "./FrontMatter";
-import { Pane } from "evergreen-ui";
 import { EditableDocument } from "./EditableDocument";
 import { JournalResponse } from "../../hooks/useClient";
 
@@ -125,17 +122,7 @@ export interface Props {
 }
 
 export default observer(
-  ({
-    children,
-    document,
-    journals,
-    saving,
-    value,
-    setValue,
-    selectedEditorMode,
-    setSelectedEditorMode,
-  }: React.PropsWithChildren<Props>) => {
-    // todo: Commented out stuff is post-copy paste edit from plate-ui (as recommended), and should used to guide next steps.
+  ({ children, saving, value, setValue }: React.PropsWithChildren<Props>) => {
     const plugins = createPlugins(
       [
         createCodeBlockNormalizationPlugin(),

src/views/edit/editor/components/Button.tsx

@@ -4,7 +4,7 @@ import { cn, withRef } from "@udecode/cn";
 import { cva, VariantProps } from "class-variance-authority";
 
 export const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
@@ -21,10 +21,10 @@ export const buttonVariants = cva(
       },
       size: {
         default: "h-10 px-4 py-2",
-        xs: "h-8 rounded-md px-3",
-        sm: "h-9 rounded-md px-3",
-        sms: "h-9 w-9 rounded-md px-0",
-        lg: "h-11 rounded-md px-8",
+        xs: "h-6 px-0",
+        sm: "h-7 px-2",
+        sms: "h-7 w-9 px-0",
+        lg: "h-11 px-8",
         icon: "h-10 w-10",
         none: "",
       },

src/views/edit/editor/components/Input.tsx

@@ -2,7 +2,7 @@ import { withVariants } from "@udecode/cn";
 import { cva } from "class-variance-authority";
 
 export const inputVariants = cva(
-  "flex w-full rounded-md bg-transparent text-sm file:border-0 file:bg-background file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+  "flex w-full bg-transparent text-sm file:border-0 file:bg-background file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
       variant: {
@@ -11,7 +11,7 @@ export const inputVariants = cva(
         ghost: "border-none focus-visible:ring-transparent",
       },
       h: {
-        sm: "h-9 px-3 py-2",
+        sm: "h-9 px-2 py-1",
         md: "h-10 px-3 py-2",
       },
     },

src/views/edit/editor/components/Popover.tsx

@@ -8,7 +8,7 @@ export const PopoverTrigger = PopoverPrimitive.Trigger;
 export const PopoverAnchor = PopoverPrimitive.Anchor;
 
 export const popoverVariants = cva(
-  "w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 print:hidden",
+  "w-72 border bg-popover text-popover-foreground shadow-md outline-none 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 print:hidden",
 );
 
 export const PopoverContent = withRef<typeof PopoverPrimitive.Content>(

src/views/edit/editor/elements/Link.tsx

@@ -13,7 +13,7 @@ export const LinkElement = withRef<typeof PlateElement>(
         ref={ref}
         asChild
         className={cn(
-          "font-medium text-primary underline decoration-primary underline-offset-4",
+          "text-primary cursor-pointer underline underline-offset-1 decoration-1",
           className,
         )}
         {...(linkProps as any)}

src/views/edit/editor/elements/LinkFloatingToolbar.tsx

@@ -105,7 +105,7 @@ export function LinkFloatingToolbar({ state }: LinkFloatingToolbarProps) {
   const editContent = editState.isEditing ? (
     input
   ) : (
-    <div className="box-content flex h-9 items-center gap-1">
+    <div className="box-content flex h-7 items-center">
       <button
         type="button"
         className={buttonVariants({ variant: "ghost", size: "sm" })}
@@ -144,15 +144,15 @@ export function LinkFloatingToolbar({ state }: LinkFloatingToolbarProps) {
     <>
       <div
         ref={insertRef}
-        className={cn(popoverVariants(), "w-auto p-1")}
+        className={cn(popoverVariants(), "w-auto")}
         {...insertProps}
       >
         {input}
       </div>
 
       <div
         ref={editRef}
-        className={cn(popoverVariants(), "w-auto p-1")}
+        className={cn(popoverVariants(), "w-auto")}
         {...editProps}
       >
         {editContent}