Добавить opinion-связи и обновить UI связей в профиле

shine-UI/styles/components.css

@@ -644,6 +644,8 @@
 .avatar-image {
   position: relative;
   overflow: hidden;
+  display: grid;
+  place-items: center;
 }
 
 .avatar-image > .avatar-fallback,
@@ -1639,6 +1641,49 @@ textarea.input {
   color: transparent;
 }
 
+.user-rel-opinions-wrap {
+  display: grid;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: 10px;
+  border: 1px dashed rgba(131, 196, 255, 0.45);
+  background: rgba(9, 18, 31, 0.42);
+}
+
+.user-rel-opinions-wrap.is-empty .user-rel-opinions-list {
+  display: none;
+}
+
+.user-rel-opinions-list {
+  display: grid;
+  gap: 6px;
+}
+
+.user-rel-opinion-item {
+  color: #d7e6ff;
+  line-height: 1.35;
+  font-size: 13px;
+}
+
+.user-rel-opinions-hint {
+  color: rgba(173, 199, 236, 0.9);
+  font-size: 12px;
+}
+
+.user-opinion-modal-btn {
+  text-align: left;
+}
+
+.user-opinion-modal-btn.is-add {
+  border-color: rgba(97, 170, 255, 0.7);
+  color: #9fcbff;
+}
+
+.user-opinion-modal-btn.is-remove {
+  border-color: rgba(255, 120, 120, 0.72);
+  color: #ff9b9b;
+}
+
 .tabs {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -2219,6 +2264,11 @@ textarea.input {
   background: radial-gradient(circle at 30% 30%, #8a73ff, #4f4bda 58%, #3b2b89);
 }
 
+.channel-message-avatar.avatar-image {
+  display: grid;
+  place-items: center;
+}
+
 .channel-message-author {
   display: grid;
   gap: 4px;