From 4b016c908dda2019f3bf89e5a3d2eae535e5fbd2 Mon Sep 17 00:00:00 2001
From: polwex <polwex@sortug.com>
Date: Thu, 18 Sep 2025 00:24:39 +0700
Subject: oioi

---
 front/src/styles/Profile.css       | 325 +++++++++++++++++++++++++++++++++++++
 front/src/styles/ProfileEditor.css | 325 -------------------------------------
 front/src/styles/feed.css          |   7 +-
 3 files changed, 326 insertions(+), 331 deletions(-)
 create mode 100644 front/src/styles/Profile.css
 delete mode 100644 front/src/styles/ProfileEditor.css

(limited to 'front/src/styles')

diff --git a/front/src/styles/Profile.css b/front/src/styles/Profile.css
new file mode 100644
index 0000000..624cb12
--- /dev/null
+++ b/front/src/styles/Profile.css
@@ -0,0 +1,325 @@
+.profile {
+  align-items: center;
+  padding: 20px;
+  background: var(--color-surface);
+  border-radius: 8px;
+  margin-bottom: 20px;
+}
+
+.profile-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.profile-header h2 {
+  margin: 0;
+  color: var(--color-text);
+}
+
+.edit-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: var(--color-primary);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.edit-btn:hover {
+  opacity: 0.9;
+}
+
+.profile-form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.form-group label {
+  font-weight: 500;
+  color: var(--color-text);
+}
+
+.form-group input,
+.form-group textarea {
+  padding: 10px;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  background: var(--color-background);
+  color: var(--color-text);
+  font-size: 14px;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: var(--color-primary);
+}
+
+.picture-preview {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 2px solid var(--color-border);
+  margin-top: 10px;
+}
+
+.picture-preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.custom-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.custom-field-row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.field-key-input,
+.field-value-input {
+  flex: 1;
+  padding: 8px;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  background: var(--color-background);
+  color: var(--color-text);
+}
+
+.remove-field-btn {
+  padding: 4px 8px;
+  background: var(--color-error);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.2s;
+  font-size: 16px;
+  font-weight: bold;
+  min-width: 28px;
+  height: 28px;
+}
+
+.remove-field-btn:hover {
+  opacity: 0.8;
+}
+
+.add-field-btn {
+  padding: 10px;
+  background: transparent;
+  color: var(--color-primary);
+  border: 1px dashed var(--color-primary);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.add-field-btn:hover {
+  background: var(--color-surface);
+}
+
+.form-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+.save-btn,
+.cancel-btn {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: opacity 0.2s;
+}
+
+.save-btn {
+  background: var(--color-primary);
+  color: white;
+}
+
+.cancel-btn {
+  background: var(--color-surface-hover);
+  color: var(--color-text);
+}
+
+.save-btn:disabled,
+.cancel-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.save-btn:hover:not(:disabled),
+.cancel-btn:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.profile-view,
+.view-mode {
+  display: flex;
+  gap: 20px;
+}
+
+.profile-picture {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 3px solid var(--color-border);
+  flex-shrink: 0;
+}
+
+.profile-picture img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.profile-info {
+  flex: 1;
+}
+
+.profile-info h3 {
+  margin: 0 0 10px 0;
+  color: var(--color-text);
+}
+
+.profile-about {
+  color: var(--color-text-secondary);
+  line-height: 1.5;
+  margin-bottom: 20px;
+}
+
+.profile-custom-fields {
+  margin-top: 20px;
+}
+
+.profile-custom-fields h4 {
+  margin: 0 0 10px 0;
+  color: var(--color-text);
+}
+
+.custom-field-view {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+
+.field-key {
+  font-weight: 500;
+  color: var(--color-text);
+}
+
+.field-value {
+  color: var(--color-text-secondary);
+}
+
+/* User Actions */
+.user-actions {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 20px;
+  padding: 16px;
+  background: var(--color-surface);
+  border-radius: 8px;
+  border: 1px solid var(--color-border);
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  border: 1px solid;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  background: transparent;
+}
+
+.action-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.action-btn.follow {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+}
+
+.action-btn.follow:hover:not(:disabled) {
+  background: var(--color-primary);
+  color: white;
+}
+
+.action-btn.following {
+  border-color: var(--color-success);
+  color: var(--color-success);
+  background: var(--color-success);
+  color: white;
+}
+
+.action-btn.following:hover:not(:disabled) {
+  background: var(--color-error);
+  border-color: var(--color-error);
+}
+
+.action-btn.access {
+  border-color: var(--color-secondary);
+  color: var(--color-secondary);
+}
+
+.action-btn.access:hover:not(:disabled) {
+  background: var(--color-secondary);
+  color: white;
+}
+
+/* Empty feed message */
+.empty-feed-message {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 60px 20px;
+  background: var(--color-surface);
+  border-radius: 8px;
+  border: 1px solid var(--color-border);
+}
+
+.empty-feed-message h3 {
+  margin: 20px 0 10px 0;
+  color: var(--color-text);
+  font-size: 20px;
+}
+
+.empty-feed-message p {
+  color: var(--color-text-secondary);
+  line-height: 1.5;
+  max-width: 400px;
+}
\ No newline at end of file
diff --git a/front/src/styles/ProfileEditor.css b/front/src/styles/ProfileEditor.css
deleted file mode 100644
index c1b65e5..0000000
--- a/front/src/styles/ProfileEditor.css
+++ /dev/null
@@ -1,325 +0,0 @@
-.profile-editor {
-  align-items: center;
-  padding: 20px;
-  background: var(--color-surface);
-  border-radius: 8px;
-  margin-bottom: 20px;
-}
-
-.profile-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-}
-
-.profile-header h2 {
-  margin: 0;
-  color: var(--color-text);
-}
-
-.edit-btn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  background: var(--color-primary);
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: opacity 0.2s;
-}
-
-.edit-btn:hover {
-  opacity: 0.9;
-}
-
-.profile-form {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.form-group label {
-  font-weight: 500;
-  color: var(--color-text);
-}
-
-.form-group input,
-.form-group textarea {
-  padding: 10px;
-  border: 1px solid var(--color-border);
-  border-radius: 4px;
-  background: var(--color-background);
-  color: var(--color-text);
-  font-size: 14px;
-}
-
-.form-group input:focus,
-.form-group textarea:focus {
-  outline: none;
-  border-color: var(--color-primary);
-}
-
-.picture-preview {
-  width: 100px;
-  height: 100px;
-  border-radius: 50%;
-  overflow: hidden;
-  border: 2px solid var(--color-border);
-  margin-top: 10px;
-}
-
-.picture-preview img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.custom-fields {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.custom-field-row {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-}
-
-.field-key-input,
-.field-value-input {
-  flex: 1;
-  padding: 8px;
-  border: 1px solid var(--color-border);
-  border-radius: 4px;
-  background: var(--color-background);
-  color: var(--color-text);
-}
-
-.remove-field-btn {
-  padding: 4px 8px;
-  background: var(--color-error);
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: opacity 0.2s;
-  font-size: 16px;
-  font-weight: bold;
-  min-width: 28px;
-  height: 28px;
-}
-
-.remove-field-btn:hover {
-  opacity: 0.8;
-}
-
-.add-field-btn {
-  padding: 10px;
-  background: transparent;
-  color: var(--color-primary);
-  border: 1px dashed var(--color-primary);
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background 0.2s;
-}
-
-.add-field-btn:hover {
-  background: var(--color-surface);
-}
-
-.form-actions {
-  display: flex;
-  gap: 10px;
-  margin-top: 20px;
-}
-
-.save-btn,
-.cancel-btn {
-  padding: 10px 20px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  transition: opacity 0.2s;
-}
-
-.save-btn {
-  background: var(--color-primary);
-  color: white;
-}
-
-.cancel-btn {
-  background: var(--color-surface-hover);
-  color: var(--color-text);
-}
-
-.save-btn:disabled,
-.cancel-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.save-btn:hover:not(:disabled),
-.cancel-btn:hover:not(:disabled) {
-  opacity: 0.9;
-}
-
-.profile-view,
-.view-mode {
-  display: flex;
-  gap: 20px;
-}
-
-.profile-picture {
-  width: 120px;
-  height: 120px;
-  border-radius: 50%;
-  overflow: hidden;
-  border: 3px solid var(--color-border);
-  flex-shrink: 0;
-}
-
-.profile-picture img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.profile-info {
-  flex: 1;
-}
-
-.profile-info h3 {
-  margin: 0 0 10px 0;
-  color: var(--color-text);
-}
-
-.profile-about {
-  color: var(--color-text-secondary);
-  line-height: 1.5;
-  margin-bottom: 20px;
-}
-
-.profile-custom-fields {
-  margin-top: 20px;
-}
-
-.profile-custom-fields h4 {
-  margin: 0 0 10px 0;
-  color: var(--color-text);
-}
-
-.custom-field-view {
-  display: flex;
-  gap: 10px;
-  margin-bottom: 8px;
-}
-
-.field-key {
-  font-weight: 500;
-  color: var(--color-text);
-}
-
-.field-value {
-  color: var(--color-text-secondary);
-}
-
-/* User Actions */
-.user-actions {
-  display: flex;
-  gap: 12px;
-  margin-bottom: 20px;
-  padding: 16px;
-  background: var(--color-surface);
-  border-radius: 8px;
-  border: 1px solid var(--color-border);
-}
-
-.action-btn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 16px;
-  border: 1px solid;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
-  transition: all 0.2s ease;
-  background: transparent;
-}
-
-.action-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.action-btn.follow {
-  border-color: var(--color-primary);
-  color: var(--color-primary);
-}
-
-.action-btn.follow:hover:not(:disabled) {
-  background: var(--color-primary);
-  color: white;
-}
-
-.action-btn.following {
-  border-color: var(--color-success);
-  color: var(--color-success);
-  background: var(--color-success);
-  color: white;
-}
-
-.action-btn.following:hover:not(:disabled) {
-  background: var(--color-error);
-  border-color: var(--color-error);
-}
-
-.action-btn.access {
-  border-color: var(--color-secondary);
-  color: var(--color-secondary);
-}
-
-.action-btn.access:hover:not(:disabled) {
-  background: var(--color-secondary);
-  color: white;
-}
-
-/* Empty feed message */
-.empty-feed-message {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  padding: 60px 20px;
-  background: var(--color-surface);
-  border-radius: 8px;
-  border: 1px solid var(--color-border);
-}
-
-.empty-feed-message h3 {
-  margin: 20px 0 10px 0;
-  color: var(--color-text);
-  font-size: 20px;
-}
-
-.empty-feed-message p {
-  color: var(--color-text-secondary);
-  line-height: 1.5;
-  max-width: 400px;
-}
\ No newline at end of file
diff --git a/front/src/styles/feed.css b/front/src/styles/feed.css
index 05f0bb2..02d64db 100644
--- a/front/src/styles/feed.css
+++ b/front/src/styles/feed.css
@@ -2,12 +2,6 @@
   border: 1px solid var(--color-text);
 }
 
-.avatar,
-.avatar img {
-  width: 48px;
-  height: 48px;
-}
-
 /* Nostr Feed Styles */
 .nostr-empty-state {
   display: flex;
@@ -133,6 +127,7 @@
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
-- 
cgit v1.2.3