Merge branch 'main' into feat/prevent-not-signer

index.html

@@ -236,34 +236,14 @@
     };
 
     init("/{base_path}/assets/dioxus/{app_name}_bg.wasm").then(
-      async (wasm) => {   
+      async (wasm) => {
         if (wasm.__wbindgen_start == undefined) {
           wasm.main();
         }
       }
     );
   </script>
   <script src="https://unpkg.com/tiny-markdown-editor/dist/tiny-mde.min.js"></script>
-  <script type="text/javascript">
-    function initMarkdownEditor() {
-      let tinyMDE = new TinyMDE.Editor({ element: document.getElementById("editor") });
-      let commandBar = new TinyMDE.CommandBar({
-        element: document.getElementById("toolbar"),
-        editor: tinyMDE,
-      });
-
-      window.initMarkdownEditor = function (callback) {
-        tinyMDE.addEventListener('change', function () {
-          let content = tinyMDE.getContent();
-          callback(content);
-        });
-      };
-
-      window.setContentMarkdownEditor = function (content) {
-        tinyMDE.setContent(content);
-      };
-    }
-  </script>
   {script_include}
 </body>
 

public/styles/main.scss

@@ -237,6 +237,7 @@ $fw-bold: 700;
 
 .bg--state-primary-active {
     background: var(--state-primary-active) !important;
+
     &:hover {
         background-color: var(--fill-400) !important;
     }
@@ -580,6 +581,7 @@ $fw-bold: 700;
     background: var(--fill-50);
 }
 
+.form__inputs--initiative .TinyMDE,
 .form__inputs--initiative .input-wrapper {
     background: var(--fill-00);
 }
@@ -771,6 +773,7 @@ $fw-bold: 700;
     border: none;
     color: var(--fill-00);
     background: var(--state-primary-active);
+
     &:hover {
         background-color: var(--fill-400);
     }
@@ -780,6 +783,7 @@ $fw-bold: 700;
     border: none;
     color: var(--text-loud);
     background: var(--fill-100);
+
     &:hover {
         background-color: var(--fill-200);
     }
@@ -1266,13 +1270,13 @@ $fw-bold: 700;
     background: var(--fill-00);
     border: none;
     box-shadow: 0px 0.5px 0px 0px rgba(26, 26, 26, .08), 0px 1px 3px 0px rgba(26, 26, 26, .08);
+
     &:focus-within {
         outline: 3px solid var(--state-primary-active);
     }
 }
 
 .markdown__wrapper--editor .TinyMDE {
-    background: transparent;
     color: var(--text-primary);
 }
 
@@ -1470,6 +1474,7 @@ $fw-bold: 700;
 .dropdown__item {
     text-align: left;
     border-bottom: 2px solid #4BAA54;
+
     &:hover {
         background: var(--fill-200);
     }
@@ -1530,6 +1535,10 @@ $fw-bold: 700;
     height: var(--element-size-small);
 }
 
+.TinyMDE {
+    min-height: var(--element-size-medium);
+}
+
 .tab--small {
     padding: 0 16px;
 }
@@ -1582,21 +1591,25 @@ textarea::placeholder {
     color: var(--text-secondary);
 }
 
+.TinyMDE,
 .input-wrapper {
     width: 100%;
     min-width: 220px;
     padding: 0 20px;
     border-radius: 12px;
-    display: flex;
-    gap: 12px;
-    align-items: center;
     background: var(--fill-00);
     border: none;
     box-shadow: 0px 0.5px var(--Blur-blur-0, 0px) 0px var(--Colors-alpha-dark-50, rgba(26, 26, 26, 0.08)), 0px 1px var(--Blur-blur-2, 3px) 0px rgba(26, 26, 26, 0.08);
+
     &:focus-within {
         border: 3px solid var(--state-primary-active);
     }
 }
+.input-wrapper {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+}
 
 .button--primary,
 .button--secondary,
@@ -1749,6 +1762,7 @@ textarea::placeholder {
     gap: 4px;
     width: 100%;
     border-radius: 12px;
+
     &:focus-within {
         outline: 3px solid var(--state-primary-active);
     }
@@ -1921,7 +1935,7 @@ textarea::placeholder {
     height: fit-content;
 }
 
-.checkbox-card > .checkbox-card__header {
+.checkbox-card>.checkbox-card__header {
     display: flex;
     width: 100%;
     gap: 8px;
@@ -2662,7 +2676,8 @@ textarea::placeholder {
     right: 16px;
 }
 
-.wallet, .transfers {
+.wallet,
+.transfers {
     max-height: 100vh;
     width: 100%;
     display: flex;
@@ -3032,7 +3047,7 @@ small.summary__item__value {
     width: 100%;
 }
 
-.widthdraw__data > * {
+.widthdraw__data>* {
     width: 100%;
 }
 
@@ -3570,7 +3585,7 @@ small.summary__item__value {
     width: auto;
     min-width: 150px;
     height: 1.62em;
-    vertical-align:bottom;
+    vertical-align: bottom;
     overflow: hidden;
     text-align: start;
 }
@@ -3590,19 +3605,25 @@ small.summary__item__value {
 .animated-text span:nth-child(1) {
     animation-delay: 0s;
 }
+
 .animated-text span:nth-child(2) {
     animation-delay: 2s;
 }
+
 .animated-text span:nth-child(3) {
     animation-delay: 4s;
 }
 
 @keyframes roll {
-    0%, 33.33% {
+
+    0%,
+    33.33% {
         opacity: 0;
         transform: translateY(100%);
     }
-    5%, 28.33% {
+
+    5%,
+    28.33% {
         opacity: 1;
         transform: translateY(0);
     }
@@ -3616,9 +3637,11 @@ small.summary__item__value {
     0% {
         background-color: var(--fill-100);
     }
+
     50% {
         background-color: var(--fill-50);
     }
+
     100% {
         background-color: var(--fill-100);
     }

src/components/atoms/attach.rs

@@ -142,10 +142,14 @@ pub fn Attach(props: AttachProps) -> Element {
                                 variant: IconButtonVariant::Round,
                                 size: ElementSize::Big,
                                 class: "button--avatar bg--transparent",
-                                body: rsx!(
-                                    Icon { icon : Close, height : 28, width : 28, fill :
-                                    "var(--state-destructive-active)" }
-                                ),
+                                body: rsx! {
+                                    Icon {
+                                        icon: Close,
+                                        height: 28,
+                                        width: 28,
+                                        fill: "var(--state-destructive-active)"
+                                    }
+                                },
                                 on_click: move |_| { error.set(None) }
                             }
                         }

src/components/atoms/bar.rs

@@ -26,13 +26,20 @@ pub fn Bar(props: BarProps) -> Element {
     rsx!(
         section {
             div { class: "bar {variant}",
-                span { class: "bar__content bar__content--left", style: format!("width: {}%", props.left_value),
+                span {
+                    class: "bar__content bar__content--left",
+                    style: format!("width: {}%", props.left_value),
                     p { class: "votes-counter__title", {props.left_helper} }
                 }
                 if let Some(value) = props.center_value {
-                    span { class: "bar__content__threshold", style: format!("left: {}%", value) }
+                    span {
+                        class: "bar__content__threshold",
+                        style: format!("left: {}%", value)
+                    }
                 }
-                span { class: "bar__content bar__content--right", style: format!("width: {}%", props.right_value),
+                span {
+                    class: "bar__content bar__content--right",
+                    style: format!("width: {}%", props.right_value),
                     p { class: "votes-counter__title", {props.right_helper} }
                 }
             }

src/components/atoms/card.rs

@@ -15,10 +15,14 @@ pub fn Card(props: CardProps) -> Element {
             div { class: "card__container",
                 div { class: "card__head",
                     IconButton {
-                        body: rsx!(
-                            Avatar { name : "{props.community.name}", size : 48, uri : props.community.icon,
-                            variant : Variant::SemiRound }
-                        ),
+                        body: rsx! {
+                            Avatar {
+                                name: "{props.community.name}",
+                                size: 48,
+                                uri: props.community.icon,
+                                variant: Variant::SemiRound
+                            }
+                        },
                         on_click: move |_| {}
                     }
                     h3 { class: "card__title", "{props.community.name}" }
@@ -38,10 +42,15 @@ pub fn Card(props: CardProps) -> Element {
             div { class: "card__cta",
                 IconButton {
                     class: "button--avatar",
-                    body: rsx!(
-                        Icon { icon : ArrowRight, height : 16, width : 16, stroke_width : 2, stroke :
-                        "var(--text-primary)" }
-                    ),
+                    body: rsx! {
+                        Icon {
+                            icon: ArrowRight,
+                            height: 16,
+                            width: 16,
+                            stroke_width: 2,
+                            stroke: "var(--text-primary)"
+                        }
+                    },
                     on_click: move |_| {}
                 }
             }

src/components/atoms/card_skeleton.rs

@@ -4,8 +4,7 @@ use dioxus::prelude::*;
 pub fn CardSkeleton() -> Element {
     rsx!(
         section { class: "card card--skeleton",
-            div { class: "card__container",
-            }
+            div { class: "card__container" }
         }
     )
 }

src/components/atoms/combo_input.rs

@@ -1,9 +1,7 @@
+use super::dropdown::ElementSize;
+use crate::components::atoms::{dropdown::DropdownItem, input::InputType, Dropdown, Input};
 use dioxus::prelude::*;
 use dioxus_std::{i18n::use_i18, translate};
-use crate::components::atoms::{
-    dropdown::DropdownItem, input::InputType, Dropdown, Input,
-};
-use super::dropdown::ElementSize;
 #[derive(PartialEq, Clone, Debug)]
 pub enum ComboInputOption {
     Dropdown(DropdownItem),
@@ -34,16 +32,12 @@ pub fn ComboInput(props: ComboInputProps) -> Element {
     let mut option_value = use_signal(|| props.value.option.clone());
     let mut input_value = use_signal::<String>(|| props.value.input.clone());
     let mut items = vec![];
-    let dropdown_options = use_signal::<
-        Vec<DropdownItem>,
-    >(|| {
+    let dropdown_options = use_signal::<Vec<DropdownItem>>(|| {
         let Some(options) = props.options else {
-            return vec![
-                DropdownItem {
-                    key: "Wallet".to_string(),
-                    value: translate!(i18, "onboard.invite.form.wallet.label"),
-                },
-            ];
+            return vec![DropdownItem {
+                key: "Wallet".to_string(),
+                value: translate!(i18, "onboard.invite.form.wallet.label"),
+            }];
         };
         options
     });
@@ -61,7 +55,7 @@ pub fn ComboInput(props: ComboInputProps) -> Element {
                         size: props.size.clone(),
                         itype: InputType::Date,
                         placeholder: props.placeholder.clone(),
-                        error: None,
+                        error: props.error.clone(),
                         on_input: move |event: Event<FormData>| {
                             option_value.set(ComboInputOption::Date(event.value().clone()));
                             props.on_change.call(ComboInputValue { option: ComboInputOption::Date(event.value().clone()), input: input_value().clone() })
@@ -93,7 +87,7 @@ pub fn ComboInput(props: ComboInputProps) -> Element {
                 message: props.value.input.clone(),
                 size: props.size,
                 placeholder: props.placeholder,
-                error: None,
+                error: props.error,
                 right_text: props.right_text,
                 on_input: move |event: Event<FormData>| {
                     input_value.set(event.value().clone());

src/components/atoms/input.rs

@@ -108,10 +108,15 @@ pub fn Input(props: InputProps) -> Element {
                     IconButton {
                         class: "button--avatar bg--transparent",
                         size: props.size,
-                        body: rsx!(
-                            Icon { icon : Search, height : 26, width : 26, stroke_width : 1.5, fill :
-                            "var(--text-secondary)" }
-                        ),
+                        body: rsx! {
+                            Icon {
+                                icon: Search,
+                                height: 26,
+                                width: 26,
+                                stroke_width: 1.5,
+                                fill: "var(--text-secondary)"
+                            }
+                        },
                         on_click: move |_| {
                             is_active.toggle();
                         }