Style the upload form

file-service/src/html.rs

@@ -186,6 +186,7 @@ pub struct Button {
     ty: Option<String>,
     name: Option<String>,
     label: String,
+    attributes: Attributes,
 }
 
 impl Button {
@@ -194,6 +195,7 @@ impl Button {
             ty: None,
             name: None,
             label: label.to_owned(),
+            attributes: Attributes::default(),
         }
     }
 
@@ -201,6 +203,19 @@ impl Button {
         self.ty = Some(ty.to_owned());
         self
     }
+
+    pub fn with_attributes<'a>(
+        mut self,
+        values: impl IntoIterator<Item = (&'a str, &'a str)>,
+    ) -> Self {
+        self.attributes = Attributes(
+            values
+                .into_iter()
+                .map(|(a, b)| (a.to_owned(), b.to_owned()))
+                .collect::<Vec<(String, String)>>(),
+        );
+        self
+    }
 }
 
 impl Html for Button {
@@ -214,9 +229,10 @@ impl Html for Button {
             None => "".to_owned(),
         };
         format!(
-            "<button {ty} {name}>{label}</button>",
+            "<button {ty} {name} {attrs}>{label}</button>",
             name = name,
-            label = self.label
+            label = self.label,
+            attrs = self.attributes.to_string()
         )
     }
 }

file-service/src/pages.rs

@@ -75,9 +75,16 @@ pub fn upload_form() -> Form {
         .with_container(
             Container::new(ContainerType::Div)
                 .with_attributes([("class", "card upload-form")])
-                .with_html(Input::new("file", "file").with_id("for-selector-input"))
+                .with_html(Input::new("file", "file").with_attributes([
-                .with_html(Label::new("for-selector-input", "Select a file"))
+                    ("id", "for-selector-input"),
-                .with_html(Button::new("Upload file").with_type("submit")),
+                    ("placeholder", "select file"),
+                    ("class", "upload-form__selector"),
+                ]))
+                .with_html(
+                    Button::new("Upload file")
+                        .with_attributes([("class", "upload-form__button")])
+                        .with_type("submit"),
+                ),
         )
 }
 

file-service/templates/style.css

@@ -53,6 +53,14 @@ body {
     flex-direction: column;
 }
 
+.upload-form__selector {
+    margin: var(--space-small);
+}
+
+.upload-form__button {
+    margin: var(--space-small);
+}
+
 .gallery {
     display: flex;
     flex-wrap: wrap;