From 36d88ed6f061a6249d0ad42cf0d5a3581f897ca6 Mon Sep 17 00:00:00 2001
From: hippoz <anastasiudavid@gmail.com>
Date: Wed, 7 Oct 2020 17:46:37 +0300
Subject: [PATCH] remove unnecessary console.log, use css variables, and fix
 button overlapping on file server upload page

---
 pages/upload.html |  2 +-
 res/index.js      |  1 -
 res/style.css     | 29 +++++++++++++++++++----------
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/pages/upload.html b/pages/upload.html
index a0f8ae9..6b1c19d 100644
--- a/pages/upload.html
+++ b/pages/upload.html
@@ -4,7 +4,7 @@
 <form action='https://files.hippoz.xyz/api/upload' method="POST" enctype="multipart/form-data">
     <input class="input" placeholder="password" type="password" name="password"> </br>
     <input class="input" placeholder="file name" type="text" name="filename"> </br>
-    <label class="button-default" for="upload-file">browse</label>
+    <label class="button-default" for="upload-file">browse</label> <br>
     <input type="file" name="file" id="upload-file"/> </br>
     <input class="button-default" type='submit' value='upload'/>
 </form>
\ No newline at end of file
diff --git a/res/index.js b/res/index.js
index 66450d3..b187fad 100644
--- a/res/index.js
+++ b/res/index.js
@@ -1,7 +1,6 @@
 let selected = 'button-home';
 
 const changeSelected = (buttonId) => {
-    console.log(buttonId);
     A(`#${selected}`).removeClass('button-selected');
     A(`#${buttonId}`).addClass('button-selected');
     selected = buttonId;
diff --git a/res/style.css b/res/style.css
index 1c8e7ac..4488b6e 100644
--- a/res/style.css
+++ b/res/style.css
@@ -1,14 +1,23 @@
+:root {
+    --body-bg-color: #2E2E2E;
+    --accent-bg-color: #d1d1d1;
+    --button-accent-color: #3d3d3d;
+    --selected-bg-color: #2E2E2E;
+    --hover-bg-color: #555555;
+    --main-font-weight: 400;
+}
+
 body {
-    background: #2E2E2E;
+    background: var(--body-bg-color);
     font-family: 'Roboto', sans-serif;
-    font-weight: 400;
+    font-weight: var(--main-font-weight);
 }
 
 .card {
     margin: 25px auto;
     padding: 20px;
     width: 400px;
-    background: #d1d1d1;
+    background: var(--accent-bg-color);
     border-radius: 3px;
 
 
@@ -33,30 +42,30 @@ body {
 .button-default {
     text-decoration: none;
     border: none;
-    background-color: #d1d1d1;
+    background-color: var(--accent-bg-color);
     border-radius: 5px;
     padding: 5px;
     font-size: 18px;
     white-space: nowrap;
     margin-top: 2px;
     margin-bottom: 2px;
-    color: #606060;
+    color: var(--button-accent-color);
     cursor: pointer;
     outline: none;
 }
 
 .button-default:hover:not(.button-selected) {
-    color: #d1d1d1;
-    background-color:#555555;
+    color: var(--accent-bg-color);
+    background-color: var(--hover-bg-color);
 }
 
 .button-selected {
-    color: #d1d1d1;
-    background-color:#2E2E2E;
+    color: var(--accent-bg-color);
+    background-color: var(--selected-bg-color);
 }
 
 .button-border {
-    border: 2px solid #606060;
+    border: 2px solid var(--button-accent-color);
 }
 
 @media screen and (max-width: 768px) {