[WIP] Dialog addapiapp & addopdsfeed

package.json

@@ -251,6 +251,7 @@
     }
   },
   "dependencies": {
+    "@radix-ui/react-dialog": "^1.0.5",
     "@xmldom/xmldom": "^0.8.10",
     "classnames": "^2.5.1",
     "commonmark": "^0.30.0",

src/renderer/assets/styles/bookDetailsDialog.css

@@ -303,7 +303,7 @@
       left: 0;
       right: 0;
       background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
-      height: 2rem;
+      height: 5rem;
     }
   }
 

src/renderer/assets/styles/components/breadcrumb.css

@@ -15,7 +15,6 @@
   font-size: 16px;
   display: flex;
   align-items: center;
-
   /* color: rgb(59, 59, 59); */
   color: var(--color-accent);
   position: fixed;

src/renderer/assets/styles/components/buttons.css

@@ -36,13 +36,13 @@
 
 /* button */
 
-button,
+/* button,
 .button_primary,
 .button_primary_small {
   &:not(:last-child) {
     margin-right: 10px;
   }
-}
+} */
 
 button {
   padding: 0;
@@ -51,9 +51,25 @@ button {
   height: 30px;
   fill: var(--color-primary);
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
 
   &:hover {
     opacity: 1;
+    background: transparent;
+  }
+
+  &[type=submit] svg {
+    width: 13px;
+  }
+
+  &.disabled,
+  &[disabled] {
+    opacity: 0.5;
+    cursor: default;
+    pointer-events: none;
   }
 }
 
@@ -86,7 +102,6 @@ button {
     vertical-align: -2px;
     width: auto;
     height: 14px;
-    margin-right: 8px;
     transition: all 0.2s;
     fill: var(--color-primary);
   }
@@ -97,17 +112,6 @@ button {
       margin-left: 8px;
     }
   }
-
-  &.disabled,
-  &[disabled] {
-    opacity: 0.5;
-    cursor: default;
-    pointer-events: none;
-
-    &:hover {
-      background: transparent;
-    }
-  }
 }
 
 .button_primary_small,
@@ -193,7 +197,6 @@ button {
     fill: var(--color-accent-contrast);
     width: auto;
     height: 14px;
-    margin-right: 8px;
     transition: all 0.2s;
   }
 
@@ -240,7 +243,6 @@ button {
 
   & svg {
     width: 18px;
-    margin-right: 8px;
     vertical-align: -3px;
     color: var(--color-disabled);
   }
@@ -283,6 +285,50 @@ button {
   display: inline-block;
 }
 
+.button_primary_blue {
+  border: 1px solid var(--color-button-primary);
+  height: 30px;
+  border-radius: 4px;
+  padding: 5px;
+  min-width: 100px;
+  background-color: var(--color-button-primary);
+  color: white;
+
+  svg {
+    width: 10px;
+    fill: white;
+}
+}
+
+.button_secondary_blue {
+  border: 1px solid var(--color-button-primary);
+  height: 30px;
+  border-radius: 4px;
+  padding: 5px;
+  min-width: 100px;
+  background-color: var(--color-button-secondary);
+  color: var(--color-button-primary);
+
+  svg {
+    width: 15px;
+    fill: var(--color-button-primary);
+  }
+}
+
+.button_catalog_infos {
+  color: var(--color-button-primary);
+  height: 30px;
+  border-radius: 4px;
+  padding: 20px 5px;
+  background-color: var(--color-button-secondary);
+  margin: 30px 0;
+
+  svg {
+    width: 20px;
+    fill: var(--color-button-primary);
+  }
+}
+
 /*
 
   6. .button_keyboard

src/renderer/assets/styles/components/buttons.css.d.ts

@@ -1,16 +1,19 @@
 declare const styles: {
   readonly "___DEBUG___COMPONENTS_BUTTONS_CSS": string;
   readonly "block_line": string;
+  readonly "button_catalog_infos": string;
   readonly "button_icon": string;
   readonly "button_keyboard": string;
   readonly "button_link": string;
   readonly "button_outline_accessibility": string;
   readonly "button_primary": string;
+  readonly "button_primary_blue": string;
   readonly "button_primary_form_default": string;
   readonly "button_primary_icon": string;
   readonly "button_primary_small": string;
   readonly "button_refresh": string;
   readonly "button_secondary": string;
+  readonly "button_secondary_blue": string;
   readonly "button_see_more": string;
   readonly "button_small": string;
   readonly "button_transparency": string;

src/renderer/assets/styles/components/catalog.scss

@@ -0,0 +1,14 @@
+.catalog_infos_text {
+    margin-bottom: 30px;
+    font-size: 14px;
+    max-width: 750px;
+    a {
+        color: var(--color-button-primary);
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        svg {
+        width: 14px;
+        }
+    }
+}