update classes and icons

peach-web/static/css/peachcloud.css

@@ -206,6 +206,13 @@
     margin-bottom: 1rem;
 }
 
+.capsule-profile {
+    margin-left: 2rem;
+    margin-right: 2rem;
+    padding-top: 1.5rem;
+    padding-bottom: 1rem;
+}
+
 /*
  * CARDS
  */
@@ -267,6 +274,7 @@
 
 .circle {
     align-items: center;
+    background: var(--light-gray);
     border-radius: 50%;
     box-shadow: var(--box-shadow-3);
     display: flex;
@@ -427,6 +435,20 @@
     justify-content: center;
 }
 
+.profile-grid {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    grid-template-rows: auto;
+    grid-gap: 10px;
+    align-items: center;
+    justify-content: center;
+    justify-items: center;
+    margin-right: 2rem;
+    margin-left: 2rem;
+    padding-top: 1.5rem;
+    padding-bottom: 1rem;
+}
+
 .stack {
     display: grid;
     align-items: flex-end;
@@ -568,7 +590,7 @@
 }
 
 .icon-large {
-    width: 3rem;
+    width: 5rem;
 }
 
 .icon-100 {
@@ -610,6 +632,12 @@
     width: 100%;
 }
 
+.message-input {
+    height: 7rem;
+    overflow: auto;
+    resize: vertical;
+}
+
 .alert-input {
     /* Needed to render inputs & buttons of equal width */
     -moz-box-sizing: border-box;
@@ -645,6 +673,12 @@
     display: block;
 }
 
+.label-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 10rem;
+}
+
 .input-label {
     margin-bottom: 0.4rem;
 }

peach-web/static/icons/pencil.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by IcoMoon.io -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
+<path fill="#000000" d="M19.104 0.896c-0.562-0.562-1.309-0.871-2.104-0.871s-1.542 0.309-2.104 0.871l-12.75 12.75c-0.052 0.052-0.091 0.114-0.116 0.183l-2 5.5c-0.066 0.183-0.021 0.387 0.116 0.524 0.095 0.095 0.223 0.146 0.354 0.146 0.057 0 0.115-0.010 0.171-0.030l5.5-2c0.069-0.025 0.131-0.065 0.183-0.116l12.75-12.75c0.562-0.562 0.871-1.309 0.871-2.104s-0.309-1.542-0.871-2.104zM5.725 17.068l-4.389 1.596 1.596-4.389 11.068-11.068 2.793 2.793-11.068 11.068zM18.396 4.396l-0.896 0.896-2.793-2.793 0.896-0.896c0.373-0.373 0.869-0.578 1.396-0.578s1.023 0.205 1.396 0.578c0.373 0.373 0.578 0.869 0.578 1.396s-0.205 1.023-0.578 1.396z"></path>
+</svg>

peach-web/static/icons/user.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by IcoMoon.io -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
+<path fill="#000000" d="M9.5 11c-3.033 0-5.5-2.467-5.5-5.5s2.467-5.5 5.5-5.5 5.5 2.467 5.5 5.5-2.467 5.5-5.5 5.5zM9.5 1c-2.481 0-4.5 2.019-4.5 4.5s2.019 4.5 4.5 4.5c2.481 0 4.5-2.019 4.5-4.5s-2.019-4.5-4.5-4.5z"></path>
+<path fill="#000000" d="M17.5 20h-16c-0.827 0-1.5-0.673-1.5-1.5 0-0.068 0.014-1.685 1.225-3.3 0.705-0.94 1.67-1.687 2.869-2.219 1.464-0.651 3.283-0.981 5.406-0.981s3.942 0.33 5.406 0.981c1.199 0.533 2.164 1.279 2.869 2.219 1.211 1.615 1.225 3.232 1.225 3.3 0 0.827-0.673 1.5-1.5 1.5zM9.5 13c-3.487 0-6.060 0.953-7.441 2.756-1.035 1.351-1.058 2.732-1.059 2.746 0 0.274 0.224 0.498 0.5 0.498h16c0.276 0 0.5-0.224 0.5-0.5-0-0.012-0.023-1.393-1.059-2.744-1.382-1.803-3.955-2.756-7.441-2.756z"></path>
+</svg>

peach-web/templates/index.html.tera

@@ -13,7 +13,7 @@
         <!-- CURRENT USER LINK AND ICON -->
         <a class="top-middle" href="/profile" title="Profile">
           <div class="circle circle-small">
-            <img class="icon-100" src="icons/glyph.png">
+            <img class="icon-medium" src="icons/user.svg">
           </div>
         </a>
         <!-- top-right -->