refactor: Upload

thaw/src/theme/mod.rs

@@ -5,7 +5,7 @@ use self::common::CommonTheme;
 use crate::{
     mobile::{NavBarTheme, TabbarTheme},
     AlertTheme, AnchorTheme, BackTopTheme, CalendarTheme, MessageTheme, ProgressTheme,
-    ScrollbarTheme, SelectTheme, UploadTheme,
+    ScrollbarTheme, SelectTheme,
 };
 pub use color::ColorTheme;
 use leptos::*;
@@ -23,7 +23,6 @@ pub struct Theme {
     pub alert: AlertTheme,
     pub message: MessageTheme,
     pub select: SelectTheme,
-    pub upload: UploadTheme,
     pub nav_bar: NavBarTheme,
     pub tabbar: TabbarTheme,
     pub progress: ProgressTheme,
@@ -42,7 +41,6 @@ impl Theme {
             alert: AlertTheme::light(),
             message: MessageTheme::light(),
             select: SelectTheme::light(),
-            upload: UploadTheme::light(),
             nav_bar: NavBarTheme::light(),
             tabbar: TabbarTheme::light(),
             progress: ProgressTheme::light(),
@@ -60,7 +58,6 @@ impl Theme {
             alert: AlertTheme::dark(),
             message: MessageTheme::dark(),
             select: SelectTheme::dark(),
-            upload: UploadTheme::dark(),
             nav_bar: NavBarTheme::dark(),
             tabbar: TabbarTheme::dark(),
             progress: ProgressTheme::dark(),

thaw/src/upload/mod.rs

@@ -1,7 +1,5 @@
-mod theme;
 mod upload_dragger;
 
-pub use theme::UploadTheme;
 pub use upload_dragger::UploadDragger;
 pub use web_sys::FileList;
 

thaw/src/upload/theme.rs

@@ -1,23 +0,0 @@
-use crate::theme::ThemeMethod;
-
-#[derive(Clone)]
-pub struct UploadTheme {
-    pub dragger_background_color: String,
-    pub dragger_border_color: String,
-}
-
-impl ThemeMethod for UploadTheme {
-    fn light() -> Self {
-        Self {
-            dragger_background_color: "#fafafc".into(),
-            dragger_border_color: "#e0e0e6".into(),
-        }
-    }
-
-    fn dark() -> Self {
-        Self {
-            dragger_background_color: "#ffffff0f".into(),
-            dragger_border_color: "#ffffff3d".into(),
-        }
-    }
-}

thaw/src/upload/upload-dragger.css

@@ -1,8 +1,8 @@
 .thaw-upload-dragger {
     width: 100%;
     padding: 20px;
-    background-color: var(--thaw-background-color);
+    background-color: var(--colorNeutralBackground1Hover);
-    border: 1px dashed var(--thaw-border-color);
+    border: var(--strokeWidthThin) dashed var(--colorNeutralStroke1);
     border-radius: 3px;
     text-align: center;
     cursor: pointer;
@@ -11,5 +11,5 @@
 }
 .thaw-upload-dragger:hover,
 .thaw-upload--drag-over .thaw-upload-dragger {
-    border: 1px dashed var(--thaw-border-color-hover);
+    border: var(--strokeWidthThin) dashed var(--colorBrandForeground1);
 }

thaw/src/upload/upload_dragger.rs

@@ -1,29 +1,12 @@
-use crate::{use_theme, Theme};
 use leptos::*;
 use thaw_utils::mount_style;
 
 #[component]
 pub fn UploadDragger(children: Children) -> impl IntoView {
     mount_style("upload-dragger", include_str!("./upload-dragger.css"));
-    let theme = use_theme(Theme::light);
+
-    let css_vars = create_memo(move |_| {
-        let mut css_vars = String::new();
-        theme.with(|theme| {
-            css_vars.push_str(&format!(
-                "--thaw-background-color: {};",
-                theme.upload.dragger_background_color
-            ));
-            css_vars.push_str(&format!(
-                "--thaw-border-color: {};",
-                theme.upload.dragger_border_color
-            ));
-            let border_color_hover = theme.common.color_primary.clone();
-            css_vars.push_str(&format!("--thaw-border-color-hover: {border_color_hover};"));
-        });
-        css_vars
-    });
     view! {
-        <div class="thaw-upload-dragger" style=css_vars>
+        <div class="thaw-upload-dragger">
             {children()}
         </div>
     }