From f0fd1cfe1b8c8e2285086cfc994a540c30ad1def Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Thu, 25 Apr 2024 01:19:50 +0100
Subject: [PATCH] css fixes

---
 .../components/layouts/dashboard/aside.tsx    |  6 +-
 .../layouts/dashboard/shell.module.css        |  5 +-
 .../components/layouts/dashboard/shell.tsx    |  2 +-
 .../src/components/navbar/navbar.module.css   |  3 +-
 .../components/slash-menu/command-list.tsx    | 64 ++++++++-----------
 .../slash-menu/slash-menu.module.css          | 32 ++++++----
 .../src/features/editor/styles/core.css       |  4 +-
 7 files changed, 54 insertions(+), 62 deletions(-)

diff --git a/apps/client/src/components/layouts/dashboard/aside.tsx b/apps/client/src/components/layouts/dashboard/aside.tsx
index 8049c3f..3f14321 100644
--- a/apps/client/src/components/layouts/dashboard/aside.tsx
+++ b/apps/client/src/components/layouts/dashboard/aside.tsx
@@ -2,13 +2,13 @@ import { Box, ScrollArea, Text } from "@mantine/core";
 import CommentList from "@/features/comment/components/comment-list.tsx";
 import { useAtom } from "jotai";
 import { asideStateAtom } from "@/components/navbar/atoms/sidebar-atom.ts";
-import React from "react";
+import React, { ReactNode } from "react";
 
 export default function Aside() {
   const [{ tab }] = useAtom(asideStateAtom);
 
-  let title;
-  let component;
+  let title: string;
+  let component: ReactNode;
 
   switch (tab) {
     case "comments":
diff --git a/apps/client/src/components/layouts/dashboard/shell.module.css b/apps/client/src/components/layouts/dashboard/shell.module.css
index 87d6618..e39067f 100644
--- a/apps/client/src/components/layouts/dashboard/shell.module.css
+++ b/apps/client/src/components/layouts/dashboard/shell.module.css
@@ -8,9 +8,9 @@
 }
 
 .aside {
-  @media (min-width: 993px) {
-    background: var(--mantine-color-gray-light);
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-8));
 
+  @media (min-width: 993px) {
     [data-layout="alt"] & {
       --_section-top: var(--_section-top, var(--app-shell-header-offset, 0px));
       --_section-height: var(
@@ -35,3 +35,4 @@
     width: 300px;
   }
 }
+
diff --git a/apps/client/src/components/layouts/dashboard/shell.tsx b/apps/client/src/components/layouts/dashboard/shell.tsx
index fb4c952..a358f1f 100644
--- a/apps/client/src/components/layouts/dashboard/shell.tsx
+++ b/apps/client/src/components/layouts/dashboard/shell.tsx
@@ -79,7 +79,7 @@ export default function Shell({ children }: { children: React.ReactNode }) {
       <AppShell.Main>{children}</AppShell.Main>
 
       {isPageRoute && (
-        <AppShell.Aside className={classes.aside}>
+        <AppShell.Aside className={classes.aside} withBorder={false}>
           <Aside />
         </AppShell.Aside>
       )}
diff --git a/apps/client/src/components/navbar/navbar.module.css b/apps/client/src/components/navbar/navbar.module.css
index a3a0c2a..6878e6c 100644
--- a/apps/client/src/components/navbar/navbar.module.css
+++ b/apps/client/src/components/navbar/navbar.module.css
@@ -1,12 +1,11 @@
 .navbar {
-    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-8));
     height: 100%;
     width: 100%;
     padding: var(--mantine-spacing-md);
     padding-top: 0;
     display: flex;
     flex-direction: column;
-    border-right: rem(1px) solid light-dark('', var(--mantine-color-dark-4));
 }
 
 .section {
diff --git a/apps/client/src/features/editor/components/slash-menu/command-list.tsx b/apps/client/src/features/editor/components/slash-menu/command-list.tsx
index 7e6ef34..9814d87 100644
--- a/apps/client/src/features/editor/components/slash-menu/command-list.tsx
+++ b/apps/client/src/features/editor/components/slash-menu/command-list.tsx
@@ -1,30 +1,18 @@
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   SlashMenuGroupedItemsType,
   SlashMenuItemType,
-} from '@/features/editor/components/slash-menu/types';
-import {
-  Group,
-  Paper,
-  ScrollArea,
-  Text,
-  UnstyledButton,
-} from '@mantine/core';
-import classes from './slash-menu.module.css';
-import clsx from 'clsx';
+} from "@/features/editor/components/slash-menu/types";
+import { Group, Paper, ScrollArea, Text, UnstyledButton } from "@mantine/core";
+import classes from "./slash-menu.module.css";
+import clsx from "clsx";
 
 const CommandList = ({
-                       items,
-                       command,
-                       editor,
-                       range,
-                     }: {
+  items,
+  command,
+  editor,
+  range,
+}: {
   items: SlashMenuGroupedItemsType;
   command: any;
   editor: any;
@@ -48,31 +36,33 @@ const CommandList = ({
   );
 
   useEffect(() => {
-    const navigationKeys = ['ArrowUp', 'ArrowDown', 'Enter'];
+    const navigationKeys = ["ArrowUp", "ArrowDown", "Enter"];
     const onKeyDown = (e: KeyboardEvent) => {
       if (navigationKeys.includes(e.key)) {
         e.preventDefault();
 
-        if (e.key === 'ArrowUp') {
-          setSelectedIndex((selectedIndex + flatItems.length - 1) % flatItems.length);
+        if (e.key === "ArrowUp") {
+          setSelectedIndex(
+            (selectedIndex + flatItems.length - 1) % flatItems.length,
+          );
           return true;
         }
 
-        if (e.key === 'ArrowDown') {
+        if (e.key === "ArrowDown") {
           setSelectedIndex((selectedIndex + 1) % flatItems.length);
           return true;
         }
 
-        if (e.key === 'Enter') {
+        if (e.key === "Enter") {
           selectItem(selectedIndex);
           return true;
         }
         return false;
       }
     };
-    document.addEventListener('keydown', onKeyDown);
+    document.addEventListener("keydown", onKeyDown);
     return () => {
-      document.removeEventListener('keydown', onKeyDown);
+      document.removeEventListener("keydown", onKeyDown);
     };
   }, [flatItems, selectedIndex, setSelectedIndex, selectItem]);
 
@@ -83,11 +73,11 @@ const CommandList = ({
   useEffect(() => {
     viewportRef.current
       ?.querySelector(`[data-item-index="${selectedIndex}"]`)
-      ?.scrollIntoView({ block: 'nearest' });
+      ?.scrollIntoView({ block: "nearest" });
   }, [selectedIndex]);
 
   return flatItems.length > 0 ? (
-    <Paper id="slash-command" shadow="xl" p="sm" withBorder>
+    <Paper id="slash-command" shadow="md" p="xs" withBorder>
       <ScrollArea viewportRef={viewportRef} h={350} w={250} scrollbarSize={5}>
         {Object.entries(items).map(([category, categoryItems]) => (
           <div key={category}>
@@ -99,16 +89,12 @@ const CommandList = ({
                 data-item-index={index}
                 key={index}
                 onClick={() => selectItem(index)}
-                className={clsx(classes.menuBtn, { [classes.selectedItem]: index === selectedIndex })}
-                style={{
-                  width: '100%',
-                  padding: 'var(--mantine-spacing-xs)',
-                  color: 'var(--mantine-color-text)',
-                  borderRadius: 'var(--mantine-radius-sm)',
-                }}
+                className={clsx(classes.menuBtn, {
+                  [classes.selectedItem]: index === selectedIndex,
+                })}
               >
                 <Group>
-                  <item.icon size={18} />
+                  <item.icon size={16} />
 
                   <div style={{ flex: 1 }}>
                     <Text size="sm" fw={500}>
diff --git a/apps/client/src/features/editor/components/slash-menu/slash-menu.module.css b/apps/client/src/features/editor/components/slash-menu/slash-menu.module.css
index 5024073..25f9a11 100644
--- a/apps/client/src/features/editor/components/slash-menu/slash-menu.module.css
+++ b/apps/client/src/features/editor/components/slash-menu/slash-menu.module.css
@@ -1,21 +1,27 @@
 .menuBtn {
-    &:hover {
-        @mixin light {
-            background: var(--mantine-color-gray-2);
-        }
+  width: 100%;
+  padding: 4px;
+  margin-bottom: 2px;
+  color: var(--mantine-color-text);
+  border-radius: var(--mantine-radius-sm);
 
-        @mixin dark {
-            background: var(--mantine-color-gray-light);
-        }
-    }
-}
-
-.selectedItem {
+  &:hover {
     @mixin light {
-        background: var(--mantine-color-gray-2);
+      background: var(--mantine-color-gray-2);
     }
 
     @mixin dark {
-        background: var(--mantine-color-gray-light);
+      background: var(--mantine-color-gray-light);
     }
+  }
+}
+
+.selectedItem {
+  @mixin light {
+    background: var(--mantine-color-gray-2);
+  }
+
+  @mixin dark {
+    background: var(--mantine-color-gray-light);
+  }
 }
diff --git a/apps/client/src/features/editor/styles/core.css b/apps/client/src/features/editor/styles/core.css
index 281d86f..eaa2608 100644
--- a/apps/client/src/features/editor/styles/core.css
+++ b/apps/client/src/features/editor/styles/core.css
@@ -95,6 +95,6 @@
 }
 
 .comment-mark {
-    background: rgba(0,203,15,0.2);
-    border-bottom: 2px solid #0ca678;
+    background: rgba(255, 215, 0, .14);
+    border-bottom: 2px solid rgb(166, 158, 12);
 }