redesign Breadcrumbs

h16nning · Feb 14, 2024 · d516449 · d516449
1 parent 6625172
commit d516449
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 22 deletions.
diff --git a/src/components/DebugCardModal/DebugCardModal.tsx b/src/components/DebugCardModal/DebugCardModal.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-import { Button, Group, Modal, Stack, Text } from "@mantine/core";
+import { Modal, Text } from "@mantine/core";
 import { Card, CardType } from "../../logic/card";
 import DebugCardTable from "./DebugCardTable";
 
@@ -12,18 +11,8 @@ interface DebugCardModalProps {
 function DebugCardModal({ opened, setOpened, card }: DebugCardModalProps) {
   try {
     return (
-      <Modal
-        opened={opened}
-        onClose={() => setOpened(false)}
-        withCloseButton={false}
-        title="Debug"
-      >
-        <Stack justify="space-between">
-          <DebugCardTable card={card} />
-          <Group justify="right">
-            <Button onClick={() => setOpened(false)}>Close</Button>
-          </Group>
-        </Stack>
+      <Modal opened={opened} onClose={() => setOpened(false)} title="Debug">
+        <DebugCardTable card={card} />
       </Modal>
     );
   } catch (e) {

diff --git a/src/components/SuperDecksBreadcrumbs/SuperDecksBreadcrumbs.tsx b/src/components/SuperDecksBreadcrumbs/SuperDecksBreadcrumbs.tsx
@@ -27,7 +27,6 @@ function SuperDecksBreadcrumbs({ superDecks }: SuperDecksBreadcrumbsProps) {
           key={0}
           component="button"
           type="button"
-          lh="1.5"
           onClick={() => navigate("/home")}
         >
           <Group wrap="nowrap" gap="xs">

diff --git a/src/components/deck/NewDeckModal.tsx b/src/components/deck/NewDeckModal.tsx
@@ -60,7 +60,7 @@ function NewDeckModal({ opened, setOpened, superDeck }: NewDeckModalProps) {
           onKeyDown={getHotkeyHandler([["mod+Enter", () => tryAddDeck()]])}
         />
         {status ? <Text>{status}</Text> : <></>}
-        <Group justify="flex-end">
+        <Group justify="flex-end" gap="sm">
           <Button
             variant="default"
             onClick={() => {
@@ -84,7 +84,7 @@ function NewDeckModal({ opened, setOpened, superDeck }: NewDeckModalProps) {
   );
 
   function isInputValid(): boolean {
-    return nameValue !== "";
+    return nameValue.trim() !== "";
   }
 }
 

diff --git a/src/components/notebook/NotebookView.module.css b/src/components/notebook/NotebookView.module.css
@@ -12,6 +12,12 @@
 
 .cardWrapper {
     margin-bottom: var(--mantine-spacing-xs);
+    background: transparent;
+
+    &:hover {
+        box-shadow: var(--mantine-shadow-xs);
+    }
+
     &.dragging {
         box-shadow: var(--mantine-shadow-md);
     }

diff --git a/src/style/Breadcrumbs.module.css b/src/style/Breadcrumbs.module.css
@@ -1,11 +1,20 @@
 .breadcrumb {
   font-size: var(--mantine-font-size-sm);
+  color: var(--mantine-color-text);
+  padding: 0.25rem 0.5rem 0.25rem 0.35rem;
+  border-radius: var(--mantine-radius-sm);
+  line-height: 1.5;
 
-  @mixin light {
-    color: var(--mantine-color-gray-6);
+  &:hover {
+    background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6));
+    text-decoration: none;
   }
-
-  @mixin dark {
-    color: var(--mantine-color-dark-2);
+  &:active {
+    transform: scale(0.97);
   }
 }
+
+
+.separator {
+  margin: 0rem 0.25rem;
+}