implementation Radix Toast

edrlab · Oct 2, 2023 · 94a0df8 · 94a0df8
1 parent 5996624
commit 94a0df8
Show file tree

Hide file tree

Showing 5 changed files with 473 additions and 37 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -251,6 +251,8 @@
     }
   },
   "dependencies": {
+    "@radix-ui/colors": "^3.0.0-rc.5",
+    "@radix-ui/react-toast": "^1.1.5",
     "@xmldom/xmldom": "^0.8.10",
     "classnames": "^2.3.2",
     "commonmark": "^0.30.0",

diff --git a/src/renderer/assets/styles/components/toasts.css b/src/renderer/assets/styles/components/toasts.css
@@ -25,6 +25,7 @@
   align-items: center;
   animation-name: start;
   animation-duration: 0.5s;
+  box-shadow: rgba(14, 18, 22, 0.35) 0px 10px 38px -10px, rgba(14, 18, 22, 0.2) 0px 10px 20px -15px;;
 
   &:focus-within {
     border-width: 4px;
@@ -94,3 +95,21 @@
 .___DEBUG___COMPONENTS_TOASTS_CSS {
   display: none;
 }
+
+.ToastRoot {
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+  padding: 15px;
+  display: grid;
+  grid-template-areas: 'title action' 'description action';
+  grid-template-columns: auto max-content;
+  column-gap: 15px;
+  align-items: center;
+}
+.ToastRoot[data-state='open'] {
+  animation: slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.ToastRoot[data-state='closed'] {
+  animation: hide 100ms ease-in;
+}