Improve appearance

Add logo in header, turn remove buttons into trash icons, and emphasize submit buttons.
ashermorgan · Mar 26, 2024 · 416aa51 · 416aa51
1 parent 7abbc0a
commit 416aa51
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 10 deletions.
diff --git a/songs2slides/static/global.css b/songs2slides/static/global.css
@@ -5,14 +5,18 @@
 }
 
 /* page setup */
-body {
+body, textarea {
     font-family: sans-serif;
 }
 header {
     font-weight: bold;
     text-align: center;
     font-size: 1.5rem;
 }
+header img {
+    vertical-align: bottom;
+    height: 2rem;
+}
 main {
     margin: auto;
     max-width: 500px;
@@ -27,8 +31,25 @@ p {
     margin-bottom: 1rem;
 }
 
+/* button icons */
+.icon {
+  height: 2rem;
+  border: none;
+  padding: 0rem;
+  background-color: #00000000;
+  vertical-align: middle;
+}
+.icon img {
+  height: 2rem;
+  width: 2rem;
+  padding: 0.3rem;
+}
+
 /* padding */
-header, main {
+header {
+    padding: 0.75rem;
+}
+main {
     padding: 1rem;
 }
 button, input {
@@ -43,16 +64,23 @@ button, input, textarea {
     border: 1px solid;
     border-radius: 5px;
 }
+button[type=submit] {
+    font-weight: bold;
+    border-color: var(--foreground);
+}
 
 /* colors */
 body {
     color: var(--foreground);
     background-color: var(--background1);
 }
 header {
-    color: #000000;
     background: var(--theme);
 }
+header a {
+    color: #000000;
+    text-decoration: none;
+}
 input, button, textarea {
     color: var(--foreground);
     border-color: var(--background5);
@@ -111,6 +139,10 @@ a {
     --foreground: #e8e8e8;
     --link: hsl(210, 100%, 65%);
   }
+
+  .icon img {
+      filter: invert(95%);
+  }
 }
 
 /* print media mode */

diff --git a/songs2slides/static/trash.svg b/songs2slides/static/trash.svg
diff --git a/songs2slides/templates/create.html b/songs2slides/templates/create.html
@@ -23,7 +23,10 @@ <h1>Step 1: Select Songs</h1>
                 <input name="artist-" placeholder="Song artist"/>
             </td>
             <td>
-                <input type="button" value="Remove"/>
+                <button class="icon" type="button" title="Remove">
+                        <img src="{{ url_for('static', filename='trash.svg') }}"
+                            alt="Remove icon"/>
+                </button>
             </td>
         </tr>
     </template>
@@ -48,7 +51,11 @@ <h1>Step 1: Select Songs</h1>
                     <input type="text" name="artist-1" placeholder="Song artist"/>
                 </td>
                 <td>
-                    <input type="button" value="Remove" onclick="remove_song(1)"/>
+                    <button class="icon" type="button" onclick="remove_song(1)"
+                       title="Remove">
+                        <img src="{{ url_for('static', filename='trash.svg') }}"
+                            alt="Remove icon"/>
+                    </button>
                 </td>
             </tr>
             {% else %}
@@ -64,8 +71,11 @@ <h1>Step 1: Select Songs</h1>
                             placeholder="Song artist" value="{{ song.artist }}"/>
                     </td>
                     <td>
-                        <input type="button" value="Remove"
-                            onclick="remove_song({{ loop.index }})"/>
+                        <button class="icon" type="button" title="Remove"
+                            onclick="remove_song({{ loop.index }})">
+                            <img src="{{ url_for('static', filename='trash.svg') }}"
+                                 alt="Remove icon"/>
+                        </button>
                     </td>
                 </tr>
                 {% endfor %}
@@ -75,7 +85,7 @@ <h1>Step 1: Select Songs</h1>
 
     <div id="actions">
         <input type="button" value="Add song" onclick="add_song()"/>
-        <button>
+        <button type="submit">
             Next
         </button>
     </div>
@@ -171,7 +181,7 @@ <h1>Step 2: Preview Slides</h1>
 
     <div id="actions">
         <input onclick="back()" type="button" value="Back"/>
-        <button>
+        <button type="submit">
             Create Slide Show
         </button>
     </div>

diff --git a/songs2slides/templates/layout.html b/songs2slides/templates/layout.html
@@ -12,7 +12,10 @@
     </head>
     <body>
         <header>
-            Songs2Slides
+            <a href="{{ url_for('.home') }}">
+                <img src="{{ url_for('static', filename='icon.svg') }}" alt=""/>
+                Songs2Slides
+            </a>
         </header>
 
         <main>