statusbar

apps/web/src/app/layout/top-bar/top-bar.component.scss

@@ -8,9 +8,13 @@
   align-items: center;
   min-block-size: 5.6rem;
   padding: var(--ar-space-2) var(--ar-space-5);
-  border-block: 1px solid var(--ar-border-highlight);
-  background: linear-gradient(180deg, rgb(255 255 255 / 0.035), transparent 62%), var(--ar-panel);
+  // border-block: 1px solid var(--ar-border-highlight);
+  //background: linear-gradient(180deg, rgb(255 255 255 / 0.035), transparent 62%), var(--ar-panel);
   box-shadow: var(--ar-shadow-raised);
+  background-image: url('../../../../public/assets/hud-elements/statusbar.png');
+  background-repeat: repeat-x;
+  background-size: 547px;
+  background-position: center;
 }
 
 .top-bar__character {
@@ -18,15 +22,22 @@
   align-items: center;
   gap: var(--ar-space-3);
   min-inline-size: 0;
+  background-image: url("../../../../public/assets/hud-elements/character-statusbar.png");
+  background-size: 458px;
+  background-position: left;
+  background-repeat: no-repeat;
 }
 
 .top-bar__portrait {
   inline-size: 4.25rem;
   block-size: 4.25rem;
   object-fit: cover;
-  border: 1px solid var(--ar-border-highlight);
+  // border: 1px solid var(--ar-border-highlight);
   border-radius: 50%;
-  background: #080909;
+  // background: #080909;
+      left: 7px;
+    position: relative;
+    top: -2px;
 }
 
 .top-bar__identity,