From 3f1316b3ddf7fa40e62f059ba7b658afb1612b57 Mon Sep 17 00:00:00 2001
From: Savanni D'Gerinel <savanni@luminescent-dreams.com>
Date: Fri, 6 Oct 2023 19:04:15 -0400
Subject: [PATCH 1/7] Serve the CSS file

---
 file-service/src/handlers.rs | 9 +++++++++
 file-service/src/main.rs     | 7 +++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/file-service/src/handlers.rs b/file-service/src/handlers.rs
index 699451a..96478df 100644
--- a/file-service/src/handlers.rs
+++ b/file-service/src/handlers.rs
@@ -9,6 +9,8 @@ use warp::{filters::multipart::FormData, http::Response, multipart::Part};
 
 use crate::{pages, App, AuthToken, FileId, FileInfo, ReadFileError, SessionToken};
 
+const CSS: &str = include_str!("../templates/style.css");
+
 pub async fn handle_index(
     app: App,
     token: Option<SessionToken>,
@@ -22,6 +24,13 @@ pub async fn handle_index(
     }
 }
 
+pub async fn handle_css() -> Result<Response<String>, Error> {
+    Response::builder()
+        .header("content-type", "text/css")
+        .status(StatusCode::OK)
+        .body(CSS.to_owned())
+}
+
 pub fn render_auth_page(message: Option<String>) -> Result<Response<String>, Error> {
     Response::builder()
         .status(StatusCode::OK)
diff --git a/file-service/src/main.rs b/file-service/src/main.rs
index c70f7ff..88b69cc 100644
--- a/file-service/src/main.rs
+++ b/file-service/src/main.rs
@@ -1,7 +1,7 @@
 extern crate log;
 
 use cookie::Cookie;
-use handlers::{file, handle_auth, handle_upload, thumbnail};
+use handlers::{file, handle_auth, handle_css, handle_upload, thumbnail};
 use std::{
     collections::{HashMap, HashSet},
     convert::Infallible,
@@ -119,6 +119,8 @@ pub async fn main() {
         .and(maybe_with_session())
         .then(handle_index);
 
+    let styles = warp::path!("css").and(warp::get()).then(handle_css);
+
     let auth = warp::path!("auth")
         .and(warp::post())
         .and(with_app(app.clone()))
@@ -145,7 +147,8 @@ pub async fn main() {
         .then(move |id, old_etags, app: App| file(app, id, old_etags));
 
     let server = warp::serve(
-        root.or(auth)
+        root.or(styles)
+            .or(auth)
             .or(upload_via_form)
             .or(thumbnail)
             .or(file)
-- 
2.44.1


From b3f88a49aae43a6add7be552d5eeb86111eaf99e Mon Sep 17 00:00:00 2001
From: Savanni D'Gerinel <savanni@luminescent-dreams.com>
Date: Fri, 6 Oct 2023 19:04:31 -0400
Subject: [PATCH 2/7] Clean up the authentication page CSS

Center the authentication field in the authentication page. Provide some padding within the card, and arrange the form itself.
---
 file-service/src/html.rs         | 37 ++++++++++++++++++++--------
 file-service/src/pages.rs        | 31 +++++++++++++++++++-----
 file-service/templates/style.css | 41 ++++++++++++++++++++++++++++----
 3 files changed, 89 insertions(+), 20 deletions(-)

diff --git a/file-service/src/html.rs b/file-service/src/html.rs
index 1d2199a..c545e6a 100644
--- a/file-service/src/html.rs
+++ b/file-service/src/html.rs
@@ -2,6 +2,7 @@ use build_html::{self, Html, HtmlContainer};
 
 #[derive(Clone, Debug)]
 pub struct Form {
+    classes: Option<String>,
     path: String,
     method: String,
     encoding: Option<String>,
@@ -11,6 +12,7 @@ pub struct Form {
 impl Form {
     pub fn new() -> Self {
         Self {
+            classes: None,
             path: "/".to_owned(),
             method: "get".to_owned(),
             encoding: None,
@@ -36,16 +38,21 @@ impl Form {
 
 impl Html for Form {
     fn to_html_string(&self) -> String {
+        let classes = match self.classes {
+            Some(ref classes) => format!("class=\"{}\"", classes),
+            None => "".to_owned(),
+        };
         let encoding = match self.encoding {
             Some(ref encoding) => format!("enctype=\"{encoding}\"", encoding = encoding),
             None => "".to_owned(),
         };
         format!(
-            "<form action=\"{path}\" method=\"{method}\" {encoding}>\n{elements}\n</form>\n",
+            "<form action=\"{path}\" method=\"{method}\" {encoding} {classes}>\n{elements}\n</form>\n",
             path = self.path,
             method = self.method,
             encoding = encoding,
-            elements = self.elements.to_html_string()
+            elements = self.elements.to_html_string(),
+            classes = classes,
         )
     }
 }
@@ -62,7 +69,7 @@ pub struct Input {
     name: String,
     id: Option<String>,
     value: Option<String>,
-    content: Option<String>,
+    attributes: Vec<(String, String)>,
 }
 
 impl Html for Input {
@@ -75,14 +82,20 @@ impl Html for Input {
             Some(ref value) => format!("value=\"{}\"", value),
             None => "".to_owned(),
         };
+        let attrs = self
+            .attributes
+            .iter()
+            .map(|(key, value)| format!("{}=\"{}\"", key, value))
+            .collect::<Vec<String>>()
+            .join(" ");
 
         format!(
-            "<input type=\"{ty}\" name=\"{name}\" {id} {value}>{content}</input>\n",
+            "<input type=\"{ty}\" name=\"{name}\" {id} {value} {attrs} />\n",
             ty = self.ty,
             name = self.name,
             id = id,
             value = value,
-            content = self.content.clone().unwrap_or("".to_owned()),
+            attrs = attrs,
         )
     }
 }
@@ -94,7 +107,7 @@ impl Input {
             name: name.to_owned(),
             id: None,
             value: None,
-            content: None,
+            attributes: vec![],
         }
     }
 
@@ -108,12 +121,16 @@ impl Input {
         self
     }
 
-    /*
-    pub fn with_content(mut self, val: &str) -> Self {
-        self.content = Some(val.to_owned());
+    pub fn with_attributes<'a>(
+        mut self,
+        values: impl IntoIterator<Item = (&'a str, &'a str)>,
+    ) -> Self {
+        self.attributes = values
+            .into_iter()
+            .map(|(a, b)| (a.to_owned(), b.to_owned()))
+            .collect::<Vec<(String, String)>>();
         self
     }
-    */
 }
 
 #[derive(Clone, Debug)]
diff --git a/file-service/src/pages.rs b/file-service/src/pages.rs
index ba1b586..a5cceb5 100644
--- a/file-service/src/pages.rs
+++ b/file-service/src/pages.rs
@@ -5,14 +5,32 @@ use file_service::{FileHandle, FileId, ReadFileError};
 pub fn auth(_message: Option<String>) -> build_html::HtmlPage {
     build_html::HtmlPage::new()
         .with_title("Authentication")
-        .with_html(
-            Form::new()
-                .with_path("/auth")
-                .with_method("post")
+        .with_stylesheet("/css")
+        .with_container(
+            Container::new(ContainerType::Div)
+                .with_attributes([("class", "authentication-page")])
                 .with_container(
                     Container::new(ContainerType::Div)
-                        .with_html(Input::new("token", "token").with_id("for-token-input"))
-                        .with_html(Label::new("for-token-input", "Authentication Token")),
+                        .with_attributes([("class", "authentication-form")])
+                        .with_html(
+                            Form::new()
+                                .with_path("/auth")
+                                .with_method("post")
+                                .with_container(
+                                    Container::new(ContainerType::Div)
+                                        .with_attributes([("class", "authentication-form__label")])
+                                        .with_html(Label::new("for-token-input", "Authentication")),
+                                )
+                                .with_container(
+                                    Container::new(ContainerType::Div)
+                                        .with_attributes([("class", "authentication-form__input")])
+                                        .with_html(
+                                            Input::new("token", "token")
+                                                .with_id("for-token-input")
+                                                .with_attributes([("size", "50")]),
+                                        ),
+                                ),
+                        ),
                 ),
         )
 }
@@ -20,6 +38,7 @@ pub fn auth(_message: Option<String>) -> build_html::HtmlPage {
 pub fn gallery(handles: Vec<Result<FileHandle, ReadFileError>>) -> build_html::HtmlPage {
     let mut page = build_html::HtmlPage::new()
         .with_title("Admin list of files")
+        .with_stylesheet("/css")
         .with_header(1, "Admin list of files")
         .with_html(
             Form::new()
diff --git a/file-service/templates/style.css b/file-service/templates/style.css
index eeb6f8b..5e7265b 100644
--- a/file-service/templates/style.css
+++ b/file-service/templates/style.css
@@ -1,5 +1,39 @@
+:root {
+    --main-bg-color: #e5f0fc;
+    --fg-color: #449dfc;
+
+    --px-4: 4px;
+    --px-8: 8px;
+    --px-12: 12px;
+
+    --hover-low: 4px 4px 4px gray;
+}
+
 body {
     font-family: 'Ariel', sans-serif;
+    background-color: var(--main-bg-color);
+}
+
+.authentication-page {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 200px;
+}
+
+.authentication-form {
+    border: 1px solid black;
+    border-radius: 5px;
+    border-shadow: var(--hover-low);
+    padding: var(--px-12);
+}
+
+.authentication-form__label {
+    margin: var(--px-4);
+}
+
+.authentication-form__input {
+    margin: var(--px-4);
 }
 
 .files {
@@ -33,9 +67,6 @@ img {
 .uploadform {
     display: flex;
     margin: 1em;
-    background-color: #e5f0fc;
-    border: 1px solid #449dfc;
-    border-radius: 5px;
     padding: 1em;
 }
 
@@ -72,7 +103,8 @@ img {
     outline: -webkit-focus-ring-color auto 5px;
 }
 
-@media screen and (max-width: 980px) { /* This is the screen width of a OnePlus 5t */
+/*
+@media screen and (max-width: 980px) { /* This is the screen width of a OnePlus 5t
     body {
         font-size: xx-large;
     }
@@ -101,3 +133,4 @@ img {
         width: 100%;
     }
 }
+*/
-- 
2.44.1


From 07b4cb31ce54e8cc8648e3ca9878c3c999ca89ee Mon Sep 17 00:00:00 2001
From: Savanni D'Gerinel <savanni@luminescent-dreams.com>
Date: Fri, 6 Oct 2023 20:36:27 -0400
Subject: [PATCH 3/7] Add reasonable desktop styling for the gallery

---
 file-service/src/html.rs         | 84 ++++++++++++++++++++++++--------
 file-service/src/pages.rs        | 49 +++++++++++--------
 file-service/templates/style.css | 39 ++++++++++-----
 3 files changed, 118 insertions(+), 54 deletions(-)

diff --git a/file-service/src/html.rs b/file-service/src/html.rs
index c545e6a..9d293f4 100644
--- a/file-service/src/html.rs
+++ b/file-service/src/html.rs
@@ -1,8 +1,40 @@
 use build_html::{self, Html, HtmlContainer};
 
+#[derive(Clone, Debug, Default)]
+pub struct Attributes(Vec<(String, String)>);
+
+/*
+impl FromIterator<(String, String)> for Attributes {
+    fn from_iter<T>(iter: T) -> Self
+    where
+        T: IntoIterator<Item = (String, String)>,
+    {
+        Attributes(iter.collect::<Vec<(String, String)>>())
+    }
+}
+
+impl FromIterator<(&str, &str)> for Attributes {
+    fn from_iter<T>(iter: T) -> Self
+    where
+        T: IntoIterator<Item = (&str, &str)>,
+    {
+        unimplemented!()
+    }
+}
+*/
+
+impl ToString for Attributes {
+    fn to_string(&self) -> String {
+        self.0
+            .iter()
+            .map(|(key, value)| format!("{}=\"{}\"", key, value))
+            .collect::<Vec<String>>()
+            .join(" ")
+    }
+}
+
 #[derive(Clone, Debug)]
 pub struct Form {
-    classes: Option<String>,
     path: String,
     method: String,
     encoding: Option<String>,
@@ -12,7 +44,6 @@ pub struct Form {
 impl Form {
     pub fn new() -> Self {
         Self {
-            classes: None,
             path: "/".to_owned(),
             method: "get".to_owned(),
             encoding: None,
@@ -38,21 +69,16 @@ impl Form {
 
 impl Html for Form {
     fn to_html_string(&self) -> String {
-        let classes = match self.classes {
-            Some(ref classes) => format!("class=\"{}\"", classes),
-            None => "".to_owned(),
-        };
         let encoding = match self.encoding {
             Some(ref encoding) => format!("enctype=\"{encoding}\"", encoding = encoding),
             None => "".to_owned(),
         };
         format!(
-            "<form action=\"{path}\" method=\"{method}\" {encoding} {classes}>\n{elements}\n</form>\n",
+            "<form action=\"{path}\" method=\"{method}\" {encoding}\n{elements}\n</form>\n",
             path = self.path,
             method = self.method,
             encoding = encoding,
             elements = self.elements.to_html_string(),
-            classes = classes,
         )
     }
 }
@@ -69,7 +95,7 @@ pub struct Input {
     name: String,
     id: Option<String>,
     value: Option<String>,
-    attributes: Vec<(String, String)>,
+    attributes: Attributes,
 }
 
 impl Html for Input {
@@ -82,12 +108,7 @@ impl Html for Input {
             Some(ref value) => format!("value=\"{}\"", value),
             None => "".to_owned(),
         };
-        let attrs = self
-            .attributes
-            .iter()
-            .map(|(key, value)| format!("{}=\"{}\"", key, value))
-            .collect::<Vec<String>>()
-            .join(" ");
+        let attrs = self.attributes.to_string();
 
         format!(
             "<input type=\"{ty}\" name=\"{name}\" {id} {value} {attrs} />\n",
@@ -107,7 +128,7 @@ impl Input {
             name: name.to_owned(),
             id: None,
             value: None,
-            attributes: vec![],
+            attributes: Attributes::default(),
         }
     }
 
@@ -125,10 +146,12 @@ impl Input {
         mut self,
         values: impl IntoIterator<Item = (&'a str, &'a str)>,
     ) -> Self {
-        self.attributes = values
-            .into_iter()
-            .map(|(a, b)| (a.to_owned(), b.to_owned()))
-            .collect::<Vec<(String, String)>>();
+        self.attributes = Attributes(
+            values
+                .into_iter()
+                .map(|(a, b)| (a.to_owned(), b.to_owned()))
+                .collect::<Vec<(String, String)>>(),
+        );
         self
     }
 }
@@ -201,18 +224,37 @@ impl Html for Button {
 #[derive(Clone, Debug)]
 pub struct Image {
     path: String,
+    attributes: Attributes,
 }
 
 impl Image {
     pub fn new(path: &str) -> Self {
         Self {
             path: path.to_owned(),
+            attributes: Attributes::default(),
         }
     }
+
+    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 Image {
     fn to_html_string(&self) -> String {
-        format!("<img src={path} />", path = self.path,)
+        format!(
+            "<img src={path} {attrs} />",
+            path = self.path,
+            attrs = self.attributes.to_string()
+        )
     }
 }
diff --git a/file-service/src/pages.rs b/file-service/src/pages.rs
index a5cceb5..45a6fc5 100644
--- a/file-service/src/pages.rs
+++ b/file-service/src/pages.rs
@@ -37,22 +37,27 @@ pub fn auth(_message: Option<String>) -> build_html::HtmlPage {
 
 pub fn gallery(handles: Vec<Result<FileHandle, ReadFileError>>) -> build_html::HtmlPage {
     let mut page = build_html::HtmlPage::new()
-        .with_title("Admin list of files")
+        .with_title("Gallery")
         .with_stylesheet("/css")
-        .with_header(1, "Admin list of files")
-        .with_html(
-            Form::new()
-                .with_path("/upload")
-                .with_method("post")
-                .with_encoding("multipart/form-data")
-                .with_container(
-                    Container::new(ContainerType::Div)
-                        .with_html(Input::new("file", "file").with_id("for-selector-input"))
-                        .with_html(Label::new("for-selector-input", "Select a file")),
-                )
-                .with_html(Button::new("Upload file").with_type("submit")),
+        .with_container(
+            Container::new(ContainerType::Div)
+                .with_attributes([("class", "gallery-page")])
+                .with_header(1, "Gallery")
+                .with_html(
+                    Form::new()
+                        .with_path("/upload")
+                        .with_method("post")
+                        .with_encoding("multipart/form-data")
+                        .with_container(
+                            Container::new(ContainerType::Div)
+                                .with_html(Input::new("file", "file").with_id("for-selector-input"))
+                                .with_html(Label::new("for-selector-input", "Select a file")),
+                        )
+                        .with_html(Button::new("Upload file").with_type("submit")),
+                ),
         );
 
+    let mut gallery = Container::new(ContainerType::Div).with_attributes([("class", "gallery")]);
     for handle in handles {
         let container = match handle {
             Ok(ref handle) => thumbnail(&handle.id).with_html(
@@ -67,19 +72,21 @@ pub fn gallery(handles: Vec<Result<FileHandle, ReadFileError>>) -> build_html::H
                 .with_attributes(vec![("class", "file")])
                 .with_paragraph(format!("{:?}", err)),
         };
-        page.add_container(container)
+        gallery.add_container(container);
     }
+    page.add_container(gallery);
     page
 }
 
 pub fn thumbnail(id: &FileId) -> Container {
-    let mut container = Container::new(ContainerType::Div).with_attributes(vec![("class", "file")]);
-    let tn = Container::new(ContainerType::Div)
-        .with_attributes(vec![("class", "thumbnail")])
-        .with_link(
-            format!("/{}", **id),
-            Image::new(&format!("{}/tn", **id)).to_html_string(),
-        );
+    let mut container =
+        Container::new(ContainerType::Div).with_attributes(vec![("class", "thumbnail")]);
+    let tn = Container::new(ContainerType::Div).with_link(
+        format!("/{}", **id),
+        Image::new(&format!("{}/tn", **id))
+            .with_attributes([("class", "thumbnail__image")])
+            .to_html_string(),
+    );
     container.add_html(tn);
     container
 }
diff --git a/file-service/templates/style.css b/file-service/templates/style.css
index 5e7265b..a7345c5 100644
--- a/file-service/templates/style.css
+++ b/file-service/templates/style.css
@@ -2,9 +2,9 @@
     --main-bg-color: #e5f0fc;
     --fg-color: #449dfc;
 
-    --px-4: 4px;
-    --px-8: 8px;
-    --px-12: 12px;
+    --space-small: 4px;
+    --space-medium: 8px;
+    --space-large: 12px;
 
     --hover-low: 4px 4px 4px gray;
 }
@@ -16,6 +16,7 @@ body {
 
 .authentication-page {
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 200px;
@@ -29,35 +30,46 @@ body {
 }
 
 .authentication-form__label {
-    margin: var(--px-4);
+    margin: var(--space-small);
 }
 
 .authentication-form__input {
-    margin: var(--px-4);
+    margin: var(--space-small);
 }
 
-.files {
+.gallery-page {
     display: flex;
     flex-wrap: wrap;
 }
 
-.file {
+.gallery {
     display: flex;
-    margin: 1em;
-    border: 1px solid #449dfc;
-    border-radius: 5px;
-    padding: 1em;
 }
 
+.thumbnail {
+    border: 1px solid black;
+    box-shadow: var(--hover-low);
+    max-width: 300px;
+    margin: var(--space-large);
+    padding: var(--space-medium);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+/*
 .thumbnail {
     max-width: 320px;
     margin: 1em;
 }
+*/
 
-img {
+.thumbnail__image {
     max-width: 100%;
+    border: none;
 }
 
+/*
 [type="submit"] {
     border-radius: 1em;
     margin: 1em;
@@ -69,8 +81,10 @@ img {
     margin: 1em;
     padding: 1em;
 }
+*/
 
 /* https://benmarshall.me/styling-file-inputs/ */
+    /*
 [type="file"] {
     border: 0;
     clip: rect(0, 0, 0, 0);
@@ -102,6 +116,7 @@ img {
     outline: 1px dotted #000;
     outline: -webkit-focus-ring-color auto 5px;
 }
+*/
 
 /*
 @media screen and (max-width: 980px) { /* This is the screen width of a OnePlus 5t
-- 
2.44.1


From cfdceff0551793f77a46232b8674439a091fe08b Mon Sep 17 00:00:00 2001
From: Savanni D'Gerinel <savanni@luminescent-dreams.com>
Date: Fri, 6 Oct 2023 21:04:27 -0400
Subject: [PATCH 4/7] Refactor out the common card styling

---
 file-service/src/pages.rs        | 51 +++++++++++++++++---------------
 file-service/templates/style.css | 37 +++++++++++------------
 2 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/file-service/src/pages.rs b/file-service/src/pages.rs
index 45a6fc5..0c6fcf8 100644
--- a/file-service/src/pages.rs
+++ b/file-service/src/pages.rs
@@ -11,7 +11,7 @@ pub fn auth(_message: Option<String>) -> build_html::HtmlPage {
                 .with_attributes([("class", "authentication-page")])
                 .with_container(
                     Container::new(ContainerType::Div)
-                        .with_attributes([("class", "authentication-form")])
+                        .with_attributes([("class", "card authentication-form")])
                         .with_html(
                             Form::new()
                                 .with_path("/auth")
@@ -43,18 +43,7 @@ pub fn gallery(handles: Vec<Result<FileHandle, ReadFileError>>) -> build_html::H
             Container::new(ContainerType::Div)
                 .with_attributes([("class", "gallery-page")])
                 .with_header(1, "Gallery")
-                .with_html(
-                    Form::new()
-                        .with_path("/upload")
-                        .with_method("post")
-                        .with_encoding("multipart/form-data")
-                        .with_container(
-                            Container::new(ContainerType::Div)
-                                .with_html(Input::new("file", "file").with_id("for-selector-input"))
-                                .with_html(Label::new("for-selector-input", "Select a file")),
-                        )
-                        .with_html(Button::new("Upload file").with_type("submit")),
-                ),
+                .with_html(upload_form()),
         );
 
     let mut gallery = Container::new(ContainerType::Div).with_attributes([("class", "gallery")]);
@@ -78,15 +67,29 @@ pub fn gallery(handles: Vec<Result<FileHandle, ReadFileError>>) -> build_html::H
     page
 }
 
-pub fn thumbnail(id: &FileId) -> Container {
-    let mut container =
-        Container::new(ContainerType::Div).with_attributes(vec![("class", "thumbnail")]);
-    let tn = Container::new(ContainerType::Div).with_link(
-        format!("/{}", **id),
-        Image::new(&format!("{}/tn", **id))
-            .with_attributes([("class", "thumbnail__image")])
-            .to_html_string(),
-    );
-    container.add_html(tn);
-    container
+pub fn upload_form() -> Form {
+    Form::new()
+        .with_path("/upload")
+        .with_method("post")
+        .with_encoding("multipart/form-data")
+        .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(Label::new("for-selector-input", "Select a file"))
+                .with_html(Button::new("Upload file").with_type("submit")),
+        )
+}
+
+pub fn thumbnail(id: &FileId) -> Container {
+    Container::new(ContainerType::Div)
+        .with_attributes(vec![("class", "card thumbnail")])
+        .with_html(
+            Container::new(ContainerType::Div).with_link(
+                format!("/{}", **id),
+                Image::new(&format!("{}/tn", **id))
+                    .with_attributes([("class", "thumbnail__image")])
+                    .to_html_string(),
+            ),
+        )
 }
diff --git a/file-service/templates/style.css b/file-service/templates/style.css
index a7345c5..58447f5 100644
--- a/file-service/templates/style.css
+++ b/file-service/templates/style.css
@@ -14,6 +14,16 @@ body {
     background-color: var(--main-bg-color);
 }
 
+.card {
+    border: 1px solid black;
+    border-radius: 5px;
+    border-shadow: var(--hover-low);
+    padding: var(--px-12);
+    margin: var(--space-large);
+    padding: var(--space-medium);
+
+}
+
 .authentication-page {
     display: flex;
     flex-direction: column;
@@ -23,10 +33,6 @@ body {
 }
 
 .authentication-form {
-    border: 1px solid black;
-    border-radius: 5px;
-    border-shadow: var(--hover-low);
-    padding: var(--px-12);
 }
 
 .authentication-form__label {
@@ -39,31 +45,26 @@ body {
 
 .gallery-page {
     display: flex;
-    flex-wrap: wrap;
+    flex-direction: column;
+}
+
+.upload-form {
+    display: flex;
+    flex-direction: column;
 }
 
 .gallery {
     display: flex;
+    flex-wrap: wrap;
 }
 
 .thumbnail {
-    border: 1px solid black;
-    box-shadow: var(--hover-low);
     max-width: 300px;
-    margin: var(--space-large);
-    padding: var(--space-medium);
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 }
 
-/*
-.thumbnail {
-    max-width: 320px;
-    margin: 1em;
-}
-*/
-
 .thumbnail__image {
     max-width: 100%;
     border: none;
@@ -77,13 +78,9 @@ body {
 }
 
 .uploadform {
-    display: flex;
-    margin: 1em;
-    padding: 1em;
 }
 */
 
-/* https://benmarshall.me/styling-file-inputs/ */
     /*
 [type="file"] {
     border: 0;
-- 
2.44.1


From 78c017ede783f78dc553b8f0bd212b40e842f8d5 Mon Sep 17 00:00:00 2001
From: Savanni D'Gerinel <savanni@luminescent-dreams.com>
Date: Fri, 6 Oct 2023 23:51:41 -0400
Subject: [PATCH 5/7] Style the upload form

---
 file-service/src/html.rs         | 20 ++++++++++++++++++--
 file-service/src/pages.rs        | 13 ++++++++++---
 file-service/templates/style.css |  8 ++++++++
 3 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/file-service/src/html.rs b/file-service/src/html.rs
index 9d293f4..d38fb21 100644
--- a/file-service/src/html.rs
+++ b/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()
         )
     }
 }
diff --git a/file-service/src/pages.rs b/file-service/src/pages.rs
index 0c6fcf8..18dd832 100644
--- a/file-service/src/pages.rs
+++ b/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(Label::new("for-selector-input", "Select a file"))
-                .with_html(Button::new("Upload file").with_type("submit")),
+                .with_html(Input::new("file", "file").with_attributes([
+                    ("id", "for-selector-input"),
+                    ("placeholder", "select file"),
+                    ("class", "upload-form__selector"),
+                ]))
+                .with_html(
+                    Button::new("Upload file")
+                        .with_attributes([("class", "upload-form__button")])
+                        .with_type("submit"),
+                ),
         )
 }
 
diff --git a/file-service/templates/style.css b/file-service/templates/style.css
index 58447f5..e5e009f 100644
--- a/file-service/templates/style.css
+++ b/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;
-- 
2.44.1


From 2d2e82f41a594f1ffca3196d19c22dfdef36fb07 Mon Sep 17 00:00:00 2001
From: Savanni D'Gerinel <savanni@luminescent-dreams.com>
Date: Fri, 6 Oct 2023 23:59:02 -0400
Subject: [PATCH 6/7] Work out some basic styling for a phone screen

---
 file-service/templates/style.css | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/file-service/templates/style.css b/file-service/templates/style.css
index e5e009f..acea56a 100644
--- a/file-service/templates/style.css
+++ b/file-service/templates/style.css
@@ -17,8 +17,7 @@ body {
 .card {
     border: 1px solid black;
     border-radius: 5px;
-    border-shadow: var(--hover-low);
-    padding: var(--px-12);
+    box-shadow: var(--hover-low);
     margin: var(--space-large);
     padding: var(--space-medium);
 
@@ -67,7 +66,7 @@ body {
 }
 
 .thumbnail {
-    max-width: 300px;
+    width: 300px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -123,12 +122,28 @@ body {
 }
 */
 
-/*
-@media screen and (max-width: 980px) { /* This is the screen width of a OnePlus 5t
+@media screen and (max-width: 980px) { /* This is the screen width of a OnePlus 5t */
     body {
         font-size: xx-large;
     }
 
+    .authentication-form {
+        width: 100%;
+    }
+
+    .upload-form__selector {
+        font-size: larger;
+    }
+
+    .upload-form__button {
+        font-size: larger;
+    }
+
+    .thumbnail {
+        width: 100%;
+    }
+
+    /*
     [type="submit"] {
         font-size: xx-large;
         width: 100%;
@@ -152,5 +167,5 @@ body {
         flex-direction: column;
         width: 100%;
     }
+    */
 }
-*/
-- 
2.44.1


From 27e1691854e807cbdc6ec63e86c1a06ec7514dd4 Mon Sep 17 00:00:00 2001
From: Savanni D'Gerinel <savanni@luminescent-dreams.com>
Date: Sat, 7 Oct 2023 15:24:12 -0400
Subject: [PATCH 7/7] Set up a stylesheet for the OnePlus 8

---
 Cargo.lock                       | 2 +-
 file-service/Cargo.toml          | 2 +-
 file-service/templates/style.css | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index d9ffcc7..312bb25 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -816,7 +816,7 @@ dependencies = [
 
 [[package]]
 name = "file-service"
-version = "0.1.0"
+version = "0.1.1"
 dependencies = [
  "base64ct",
  "build_html",
diff --git a/file-service/Cargo.toml b/file-service/Cargo.toml
index 3be7912..0a841e3 100644
--- a/file-service/Cargo.toml
+++ b/file-service/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "file-service"
-version = "0.1.0"
+version = "0.1.1"
 authors = ["savanni@luminescent-dreams.com"]
 edition = "2018"
 
diff --git a/file-service/templates/style.css b/file-service/templates/style.css
index acea56a..ae81cdf 100644
--- a/file-service/templates/style.css
+++ b/file-service/templates/style.css
@@ -122,7 +122,7 @@ body {
 }
 */
 
-@media screen and (max-width: 980px) { /* This is the screen width of a OnePlus 5t */
+@media screen and (max-width: 1080px) { /* This is the screen width of a OnePlus 8 */
     body {
         font-size: xx-large;
     }
-- 
2.44.1