From 30a88560cc827df053e50135738bc40db7cc59ed Mon Sep 17 00:00:00 2001
From: KiddyTheKid <pcost8300@protonmail.com>
Date: Fri, 25 Dec 2020 21:38:41 -0500
Subject: [PATCH] Modified CSS and Add a function to detect lettered services
 names.

---
 static/scripts.js | 24 ++++++++++++++++--------
 static/styles.css | 24 ++++++++++++++++++++++--
 2 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/static/scripts.js b/static/scripts.js
index 0dfc93f..4ba4ae2 100644
--- a/static/scripts.js
+++ b/static/scripts.js
@@ -309,7 +309,7 @@ async function displayProfile(opts) {
     // Generate feedback
     feedback += `<div class="profileDataItem profileDataItem--separator profileDataItem--noLabel">`;
     feedback += `<div class="profileDataItem__label"></div>`;
-    feedback += `<div class="profileDataItem__value">general information</div>`;
+    feedback += `<div class="profileDataItem__value">General information</div>`;
     feedback += `</div>`;
 
     feedback += `<div class="profileDataItem">`;
@@ -328,15 +328,15 @@ async function displayProfile(opts) {
     feedback += `</div>`;
     feedback += `<div class="profileDataItem profileDataItem--separator profileDataItem--noLabel">`;
     feedback += `<div class="profileDataItem__label"></div>`;
-    feedback += `<div class="profileDataItem__value">actions</div>`;
+    feedback += `<div class="profileDataItem__value">Actions</div>`;
     feedback += `</div>`;
     feedback += `<div class="profileDataItem profileDataItem--noLabel">`;
     feedback += `<div class="profileDataItem__label"></div>`;
-    feedback += `<div class="profileDataItem__value"><a href="/verify/${opts.mode}/${opts.input}">verify signature</a></div>`;
+    feedback += `<div class="profileDataItem__value"><a href="/verify/${opts.mode}/${opts.input}">Verify signature</a></div>`;
     feedback += `</div>`;
     feedback += `<div class="profileDataItem profileDataItem--noLabel">`;
     feedback += `<div class="profileDataItem__label"></div>`;
-    feedback += `<div class="profileDataItem__value"><a href="/encrypt/${opts.mode}/${opts.input}">encrypt message</a></div>`;
+    feedback += `<div class="profileDataItem__value"><a href="/encrypt/${opts.mode}/${opts.input}">Encrypt message</a></div>`;
     feedback += `</div>`;
 
     // Display feedback
@@ -362,7 +362,7 @@ async function displayProfile(opts) {
     feedback = "";
     if (userMail) {
         verifications.forEach((userId, i) => {
-            if (keyData.users[i].userId.email != userMail) {
+            if (keyData.users[i].userId.email !== userMail) {
                 return;
             }
 
@@ -372,7 +372,7 @@ async function displayProfile(opts) {
             feedback += `<div class="profileDataItem__value">${keyData.users[i].userId.email} (primary)</div>`;
             feedback += `</div>`;
 
-            if (userId.length == 0) {
+            if (userId.length === 0) {
                 feedback += `<div class="profileDataItem  profileDataItem--noLabel">`;
                 feedback += `<div class="profileDataItem__label"></div>`;
                 feedback += `<div class="profileDataItem__value">No claims associated</div>`;
@@ -391,7 +391,7 @@ async function displayProfile(opts) {
                     return;
                 }
                 feedback += `<div class="profileDataItem">`;
-                feedback += `<div class="profileDataItem__label">${claimData.serviceprovider.name}</div>`;
+                feedback += `<div class="profileDataItem__label">${capitalizeLetteredServices(claimData.serviceprovider.name)}</div>`;
                 feedback += `<div class="profileDataItem__value">`;
                 feedback += `<a class="proofDisplay" href="${claimData.profile.uri}"  rel="me">${claimData.profile.display}</a>`;
                 if (claim.isVerified) {
@@ -443,7 +443,7 @@ async function displayProfile(opts) {
                 return;
             }
             feedback += `<div class="profileDataItem">`;
-            feedback += `<div class="profileDataItem__label">${claimData.serviceprovider.name}</div>`;
+            feedback += `<div class="profileDataItem__label">${capitalizeLetteredServices(claimData.serviceprovider.name)}</div>`;
             feedback += `<div class="profileDataItem__value">`;
             feedback += `<a class="proofDisplay" href="${claimData.profile.uri}"  rel="me">${claimData.profile.display}</a>`;
             if (claim.isVerified) {
@@ -1334,3 +1334,11 @@ if (elUtilProfileURL) {
 
     elInput.dispatchEvent(new Event("input"));
 }
+
+function capitalizeLetteredServices(serviceName) {
+    var servName = serviceName.toLowerCase();
+    if (servName === 'dns' || servName === 'xmpp') {
+        return servName.toUpperCase();
+    }
+    return serviceName;
+}
\ No newline at end of file
diff --git a/static/styles.css b/static/styles.css
index 45fb0f4..de58c77 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -75,7 +75,8 @@ footer a {
     color: #777;
 }
 .container {
-    max-width: 720px;
+    /*max-width: 720px;*/
+    max-width: 770px;
     width: 100%;
     margin: 0 auto;
 }
@@ -279,6 +280,9 @@ select {
     flex-direction: row;
     align-items: center;
     margin-bottom: 32px;
+    background-color: #c4e3f657;
+    padding: 15px;
+    border-radius: 15px;
 }
 #profileAvatar {
     width: 100%;
@@ -295,6 +299,12 @@ select {
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
+#profileData {
+    background-color: #dceef957;
+    padding: 15px;
+}
+
 .profileDataItem {
     position: relative;
     display: flex;
@@ -319,6 +329,7 @@ select {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    text-transform: capitalize;
 }
 .profileDataItem__value {
     display: inline-block;
@@ -378,9 +389,18 @@ a.proofQR:hover {
     .profileDataItem__value {
         min-height: 28px;
     }
-	.profileDataItem--noLabel .profileDataItem__label {
+    	.profileDataItem--noLabel .profileDataItem__label {
 		display: none;
 	}
+        
+    #profileData .profileDataItem__value a:first-child {
+        max-width: 85%;
+    }
+    
+    #profileData #profileProofs .profileDataItem__value a:first-child {
+        display: block;
+    }
+
 
     input[type="text"] {
         width: 100%;