Some ui work on Server->Preference screen to make it a little bit prettier

2 files changed, 45 insertions, 7 deletions

diff --git a/assets/index.css b/assets/index.css
index 5dfd86e..07ef7e5 100644
--- a/assets/index.css
+++ b/assets/index.css
@@ -98,6 +98,9 @@ html, body {
   width: 190pt;
   font-size: x-large;
   font-family: SourceSansPro;
+  font-weight: bolder;
+  border-radius: 5pt;
+  background-color: #dd7800;
 }
 
 #play:focus {
@@ -243,7 +246,7 @@ z-index: 2;
 
 }
 
-.infoServerPage > .title {
+.infoServerPage > .title, .preferencesServerPage > h2 {
   /*outline: 1pt red dotted; */
   background: rgba(0, 0, 0, 0.6);
   margin-bottom: 5pt;
@@ -287,6 +290,31 @@ z-index: 2;
   text-decoration: underline;
 }
 
+.preferencesServerPage {
+  padding: 0 12pt;
+}
+
+.preferencesServerPage > .loginSection {
+  padding: 3pt 12pt;
+  background: rgba(0, 0, 0, 0.6);
+  width: fit-content;
+}
+.preferencesServerPage > .loginSection > button {
+  border-radius: 4pt;
+  margin: 6pt 0 6pt 0;
+  width: 100%;
+}
+
+.preferencesServerPage > .loginSection > label {
+  display: block;
+  margin-top: 3pt;
+}
+.preferencesServerPage > .loginSection > label > input {
+  display: block;
+  border-radius: 2pt;
+}
+
+
 .unknownServerPage {
   background: rgba(0, 0, 0, 0.6);
   color:white;
@@ -313,15 +341,19 @@ z-index: 2;
 }
 
 .socialContainer {
-  height:20pt;
+  height:26pt;
   margin-bottom: 4pt;
 }
 
 .socialContainer > button {
-  height:16pt;
+  height: 24pt;
+  width: 24pt;
   margin-left: 3pt;
   cursor: pointer;
   border-radius: 4pt;
+  padding: unset;
+  font-size: large;
+  color:rgb(42, 42, 42);
 }
 
 #activity {
diff --git a/src/renderer/gameserver/server.ts b/src/renderer/gameserver/server.ts
index 30b40e1..19450b7 100644
--- a/src/renderer/gameserver/server.ts
+++ b/src/renderer/gameserver/server.ts
@@ -169,22 +169,28 @@ export default class GameServer {
 
   private getPreferencesPage():HTMLElement{
     const content = document.createElement('div');
-    content.classList.add("PreferencesPage");
+    content.classList.add("preferencesServerPage");
 
     const title = document.createElement('h2');
     title.innerText = `Preferences for ${this.name}`;
     content.appendChild(title);
 
     const loginSection = document.createElement('div');
-    loginSection.classList.add("LoginSection");
+    loginSection.classList.add("loginSection");
     content.appendChild(loginSection);
 
+    const loginUsernameLabel = document.createElement('label');
+    loginUsernameLabel.innerText = "Username";
     const loginUsername = document.createElement('input') as HTMLInputElement;
     loginUsername.value = localStorage.getItem("2_username_"+this.profile.address);
+    loginUsernameLabel.appendChild(loginUsername);
 
+    const loginPinLabel = document.createElement('label');
+    loginPinLabel.innerText = "Password";
     const loginPin = document.createElement('input') as HTMLInputElement;
     loginPin.type = "password";
     loginPin.value = localStorage.getItem("2_pin_"+this.profile.address);
+    loginPinLabel.appendChild(loginPin);
 
     const saveBtn =  document.createElement('button') as HTMLButtonElement;
     saveBtn.innerText = "save";
@@ -196,8 +202,8 @@ export default class GameServer {
     });
 
 
-    loginSection.appendChild(loginUsername);
-    loginSection.appendChild(loginPin);
+    loginSection.appendChild(loginUsernameLabel);
+    loginSection.appendChild(loginPinLabel);
     loginSection.appendChild(saveBtn);
 
     return content;