UI improvements

src/lib/components/Button.svelte

@@ -1,19 +1,16 @@
 <style>
     .button {
         padding: 0.5rem;
-        background-color: var(--dark-3);
         border: none;
+        border-bottom: solid var(--dark-3) 3px;
 
         font-family: 'Open Sans';
-        
-        border-radius: 2rem;
-
-        margin: 0.2rem;
     }
 
     .button a {
-        color: var(--light-1);
+        color: var(--dark-1);
         font-weight: bold;
+        font-size: 1rem;
     }
 
 </style>

src/lib/components/Post.svelte

@@ -78,6 +78,11 @@
         font-style: italic;
         font-weight: normal;
     }
+
+    .votes {
+        display: flex;
+        
+    }
 </style>
 
 {#if success}
@@ -108,7 +113,7 @@
         <span slot="main">
             <PostBody content={content} />
         </span>
-        <span slot="footer">
+        <span slot="footer" class='votes'>
             <PostButton
                 clickFunc={() => vote('up')}
                 data={upvotes * 1}
@@ -122,21 +127,21 @@
             {#if isAuthor}
                 <PostButton
                     clickFunc={() => deletePost()}
-                    data={'Delete'}
+                    data={''}
                     icon='/delete.svg'
                 />
             {/if}
             {#if id}
                 <PostButton
                     href='/post/{id}'
-                    data={'View'}
+                    data={''}
                     icon='/view.svg'
                 />
             {/if}
             <PostButton
                 href='/new_post?init=%23{id}'
-                data={'Reply'}
-                icon='/view.svg'
+                data={''}
+                icon='/reply.svg'
             />
         </span>
     </Area>

src/lib/components/PostButton.svelte

@@ -2,9 +2,12 @@
     .votes {
         font-weight: bold;
         font-size: 0.9rem;
+        margin-left: 5px;
     }
     .vote-area {
-        margin-right: 30px;
+        margin-right: 15px;
+        display: flex;
+        align-items: center;
     }
 
     .button {
@@ -25,7 +28,7 @@
     <a on:click={clickFunc} href='{href}'>
         <img src='{icon}' class='button' alt='Vote button'>
     </a>
-    <span class='votes'>
+    <div class='votes'>
         {data}
-    </span>
+    </div>
 </span>

src/lib/components/PostList.svelte

@@ -14,6 +14,14 @@
     {/if}
 </p>
 
+<p>
+    {#if data.id > 0}
+        <a on:click={() => { window.location.search = setLocation(window.location,'page',((data.id)-1)) }} href='#'>← Page {(data.id)-1}</a>
+    {/if}
+    <b>Page {(data.id)}</b>
+    <a on:click={() => { window.location.search = setLocation(window.location,'page',((data.id)+1)) }} href='#'>Page {(data.id)+1} →</a>
+</p>
+
 {#if data && data.postJson && data.postJson.data}
     {#each data.postJson.data as post}
         <Post
@@ -28,11 +36,3 @@
         ></Post>
     {/each}
 {/if}
-
-<p>
-    {#if data.id > 0}
-        <a on:click={() => { window.location.search = setLocation(window.location,'page',((data.id)-1)) }} href='#'>← Page {(data.id)-1}</a>
-    {/if}
-    <b>Page {(data.id)}</b>
-    <a on:click={() => { window.location.search = setLocation(window.location,'page',((data.id)+1)) }} href='#'>Page {(data.id)+1} →</a>
-</p>