From 2343164b291f305a9525aea0b462104f517a7739 Mon Sep 17 00:00:00 2001
From: Valentin Ivanov <valen.ivanov@gmail.com>
Date: Thu, 26 Apr 2018 16:59:26 -0400
Subject: [PATCH] Playing with colors

---
 assets/profile.css      |  49 ++++++++---------
 assets/profile.html.eex | 115 ++++++++++++++++++----------------------
 2 files changed, 78 insertions(+), 86 deletions(-)

diff --git a/assets/profile.css b/assets/profile.css
index 7b6ad6f..3a61517 100644
--- a/assets/profile.css
+++ b/assets/profile.css
@@ -1,15 +1,27 @@
 /* Dark theme color palette */
 .vscode-dark {
+  --color-language: #dbd5b9;  
+  --color-primary: #E3C23D;
+  --color-secondary: #5D5535;
+  --color-bar-background: #303030;
+}
+
+.vscode-dark1 {
   --color-language: #ddca7e;  
   --color-primary: #dcc97e;
-  --color-secondary: #00ca7e;
+  --color-secondary: #318245;
+  --color-bar-background: #303030;
 }
 
 /* Light theme color palette */
 .vscode-light {
   --color-language: blue;
   --color-primary: #00ca7e;
-} 
+}
+
+.profile {
+  color: var(--color-language);
+}
 
 h3 {
   text-align: center;
@@ -18,6 +30,7 @@ h3 {
 sup {
   top: -.5em;
   font-size: 75%;
+  color: var(--color-primary);
 }
 
 .language-progress {
@@ -59,23 +72,23 @@ circle {
   fill:transparent;
 }
 
-circle.backg {
-  stroke: #424242;
+circle.backg {  
+  stroke: var(--color-bar-background);
 }
 
 circle.newxp {
-  stroke: #ddca7e;
+  stroke: var(--color-primary);  
 }
 
 circle.oldxp {
-  stroke: #318245;
+  stroke: var(--color-secondary);
 }
 
 .language {
   padding-top: 2rem;
   margin: auto;
   text-align: center;
-  color: var(--color-language);
+  color: var(--color-language);  
 }
 
 .language span {
@@ -96,7 +109,7 @@ circle.oldxp {
 .progress {
   height: 20px;
   margin-bottom: 20px;
-  background-color: #303030;
+  background-color: var(--color-bar-background);
   border-radius: 4px;
   border: solid 1px; 
   border-color: #424242;
@@ -111,26 +124,14 @@ circle.oldxp {
   font-size: 12px;
   line-height: 20px;  
   text-align: center;
-  background-color: #ddca7e;
+  
+  background-color: var(--color-secondary);
   -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
   box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
-  -webkit-transition: width .6s ease;
-  -o-transition: width .6s ease;
-  transition: width .6s ease;
 }                  
 
-.progress-bar-success {
-  background-color: #318245;
+.progress-bar-new {
+  background-color: var(--color-primary);
 }
 
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0,0,0,0);
-  border: 0;
-}
 
diff --git a/assets/profile.html.eex b/assets/profile.html.eex
index e1f3717..11461bf 100644
--- a/assets/profile.html.eex
+++ b/assets/profile.html.eex
@@ -1,70 +1,61 @@
 <link rel="stylesheet" href="file:///${style}">
-<h3> ${profile.user} Level ${profile.level} (${profile.total_xp} XP)
-  <% if( profile.new_xp > 0 ) { %>
-    <sup>(+
-      <%= profile.new_xp %>)</sup>
+<div class="profile">
+  <h3> ${profile.user} <sup>${profile.level}</sup> ${profile.total_xp} xp
+    <% if( profile.new_xp > 0 ) { %>
+      <sup>+<%= profile.new_xp %></sup>
     <% } %>
-</h3>
+  </h3>
 
-<div class="progress">
-  <div class="progress-bar progress-bar-success" style='width:${profile.progress}%;'>
-    <span class="sr-only">Level progress ${profile.progress - profile.new_progress}%.</span>
-  </div>
-  <div class="progress-bar progress-bar-striped progress-bar-warning" style='width:${profile.new_progress}%;'>
-    <span class="sr-only">Recent level progress ${profile.new_progress}%.</span>
-  </div>
-</div>
-
-<div class="languages">
-  <% for( let l in languages) { %>
-    <div class="language-progress">
-      <div class="language">
-        <%= languages[l].name %>
-          <span>
-            <%= languages[l].level %>
-          </span>
-      </div>
-      <span class="tooltiptext">
-        <strong><%=languages[l].xp %> XP</strong>        
-        <% if( languages[l].new_xp > 0 ) { %>
-          <sup>(+
-            <%= languages[l].new_xp %>)</sup>
-        <% } %>        
-      </span>
-      <svg viewBox="0 0 100 100">
-        <circle class="backg" cx="50" cy="50" r="45" ></circle>
-        <circle class="newxp" cx="50" cy="50" r="45" stroke-dasharray="282.6" stroke-dashoffset='${ ((100-languages[l].progress) * 282.6 / 100) }'></circle>
-        <circle class="oldxp" cx="50" cy="50" r="45" stroke-dasharray="282.6" stroke-dashoffset='${ ((100-languages[l].progress + languages[l].new_progress) * 282.6 / 100) }'></circle>
-      </svg>
+  <div class="progress">
+    <div class="progress-bar" style='width:${profile.progress}%;'>    
     </div>
-    <% } %>
-</div>
-<p/>
-<div class="machines">
-  <% for( let m in machines) { %>
-    <div class="machine">
-      <strong>
-        <%= machines[m].name %>
-      </strong>
-      <span class="level">
-        level <%= machines[m].level %>
-      </span>
-      <span class="xp">
-        (<%= machines[m].xp %> XP)
-       <% if( machines[m].new_xp > 0 ) { %>
-        <sup>(+
-          <%= machines[m].new_xp %>)</sup>
+    <div class="progress-bar progress-bar-new" style='width:${profile.new_progress}%;'>    
+    </div>
+  </div>
+
+  <div class="languages">
+    <% for( let l in languages) { %>
+      <div class="language-progress">
+        <span class="tooltiptext">
+          <strong><%=languages[l].xp %> xp</strong>        
+          <% if( languages[l].new_xp > 0 ) { %>
+            <sup style="color:black">+<%= languages[l].new_xp %></sup>
+          <% } %>        
+        </span>
+        <svg viewBox="0 0 100 100">
+          <circle class="backg" cx="50" cy="50" r="45" ></circle>
+          <circle class="newxp" cx="50" cy="50" r="45" stroke-dasharray="282.6" stroke-dashoffset='${ ((100-languages[l].progress) * 282.6 / 100) }'></circle>
+          <circle class="oldxp" cx="50" cy="50" r="45" stroke-dasharray="282.6" stroke-dashoffset='${ ((100-languages[l].progress + languages[l].new_progress) * 282.6 / 100) }'></circle>
+        </svg>
+        <div class="language">
+          <%= languages[l].name %>
+            <span>
+              <%= languages[l].level %>
+            </span>
+        </div>      
+      </div>
       <% } %>
-      </span>
-      <div class="progress">
-        <div class="progress-bar progress-bar-success" style='width:${machines[m].progress}%;'>
-          <span class="sr-only">Level progress ${machines[m].progress - machines[m].new_progress}%.</span>
-        </div>
-        <div class="progress-bar progress-bar-striped progress-bar-warning" style='width:${machines[m].new_progress}%;'>
-          <span class="sr-only">Recent level progress ${machines[m].new_progress}%.</span>
+  </div>
+  <p/>
+
+  <div class="machines">
+    <% for( let m in machines) { %>
+      <div class="machine">
+          <strong>
+            <%= machines[m].name %>
+          </strong>
+          <sup> <%= machines[m].level %> </sup>
+          <%= machines[m].xp %> xp
+          <% if( machines[m].new_xp > 0 ) { %>
+            <sup>+<%= machines[m].new_xp %></sup>
+          <% } %>      
+        <div class="progress">
+          <div class="progress-bar" style='width:${machines[m].progress}%;'>
+          </div>
+          <div class="progress-bar progress-bar-new" style='width:${machines[m].new_progress}%;'>
+          </div>
         </div>
       </div>
-
-    </div>
     <% } %>
-</div>
+  </div>
+<div>
\ No newline at end of file