various avatar tweaks and profile above note form

4 files changed, 30 insertions, 58 deletions

diff --git a/static/default-avatar.png b/static/default-avatar.png
new file mode 100644
index 0000000..3d920e5
--- /dev/null
+++ b/static/default-avatar.png
diff --git a/static/default-avatar.svg b/static/default-avatar.svg
deleted file mode 100644
index 5d734a9..0000000
--- a/static/default-avatar.svg
+++ /dev/null
@@ -1,57 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="64"
-   height="64"
-   viewBox="0 0 64 64"
-   version="1.1"
-   id="svg1"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs1" />
-  <g
-     id="layer1">
-    <g
-       id="g7"
-       transform="matrix(0.81915204,-0.61997856,0.57357644,0.88542115,-9.8389023,27.187623)">
-      <ellipse
-         style="opacity:1;fill:#341e55;fill-opacity:0.271113;stroke-width:1.07054"
-         id="path3"
-         cx="-7.422678"
-         cy="25.878199"
-         rx="6.7873225"
-         ry="8.2171621"
-         transform="matrix(0.63285055,-0.77427397,0.72122314,0.69270281,0,0)" />
-      <ellipse
-         style="opacity:1;fill:#341e55;fill-opacity:0.271113;stroke-width:1.07172"
-         id="path4"
-         cx="25.941027"
-         cy="20.172144"
-         rx="5.8635988"
-         ry="8.2372408"
-         transform="matrix(0.97464087,-0.22377484,0.12154217,0.99258627,0,0)" />
-      <ellipse
-         style="opacity:1;fill:#341e55;fill-opacity:0.271113;stroke-width:1.07161"
-         id="path5"
-         cx="43.196301"
-         cy="19.089205"
-         rx="5.8324995"
-         ry="8.2224894"
-         transform="matrix(0.99865107,-0.05192343,-0.05003473,0.99874748,0,0)" />
-      <ellipse
-         style="opacity:1;fill:#341e55;fill-opacity:0.271113;stroke-width:0.994231"
-         id="path6"
-         cx="62.002583"
-         cy="37.127773"
-         rx="6.58569"
-         ry="7.9303436"
-         transform="matrix(0.98583265,-0.16773191,-0.15120581,0.9885023,0,0)" />
-      <path
-         style="opacity:1;fill:#341e55;fill-opacity:0.271113;stroke-width:1.06883"
-         d="M 35.091789,26.612588 C 21.38302,26.75655 21.00167,31.399568 19.422233,37.866324 c -1.378975,5.645992 -1.597634,10.395818 3.631793,11.03401 5.229427,0.638192 5.585526,-3.294926 11.300259,-3.592055 5.714733,-0.29713 5.443755,4.454819 10.279299,4.203403 4.835543,-0.251418 3.554548,-9.06409 2.291899,-13.644155 -1.205836,-4.373989 -5.245485,-9.483724 -11.833694,-9.254939 z"
-         id="path7" />
-    </g>
-  </g>
-</svg>
diff --git a/static/form.css b/static/form.css
index 00a4366..c7a1873 100644
--- a/static/form.css
+++ b/static/form.css
@@ -32,7 +32,7 @@ form {
   textarea {
     resize: vertical;
   }
-  button {
+  button:not(.inline) {
     width: 100%;
   }
   .error {
@@ -60,6 +60,34 @@ form {
 
   &#writeNoteForm {
     max-width: 100%;
+
+    .miniProfile {
+      display: grid;
+      grid-template-columns: max-content 1fr;
+      margin-bottom: var(--spacing-double);
+      gap: var(--spacing-double);
+
+      img.avatar {
+        border-radius: var(--border-radius);
+        width: var(--avatar-size);
+        aspect-ratio: 1;
+        display: block;
+      }
+      .basicInfo {
+        display: grid;
+        grid-auto-flow: row;
+        align-content: start;
+        .displayName {
+          font-size: var(--font-big-size);
+          font-weight: bold;
+          text-decoration: none;
+          color: inherit;
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+    }
   }
 
   &.settings {
diff --git a/static/notifications.css b/static/notifications.css
index 98a8fbb..272e3e6 100644
--- a/static/notifications.css
+++ b/static/notifications.css
@@ -39,6 +39,7 @@
       width: var(--avatar-size);
       border-radius: var(--border-radius);
       aspect-ratio: 1;
+      display: block;
     }
     .notifContent {
       display: grid;