Button primary secondary fix : Fix des boutons et unification 3 couleurs (violet/blanc/rouge)

frontend/static/css/account.css

@@ -2,15 +2,6 @@
     max-width: 25rem;
 }
 
-.account-card .btn.btn-secondary {
-    color: var(--primary);
-}
-
-.account-card .btn.btn-secondary:hover {
-    background: color-mix(in srgb, var(--primary) 8%, transparent);
-    border-color: var(--primary);
-}
-
 .account-footer {
     margin-top: var(--spacing-lg);
     text-align: center;

frontend/static/css/article.css

@@ -788,7 +788,9 @@ a.comment-author:hover {
 }
 
 .comment-edit-toggle:hover {
-    text-decoration: underline;
+    background: color-mix(in srgb, var(--primary) 10%, transparent);
+    border-radius: var(--radius-xs);
+    filter: brightness(1.1);
 }
 
 .comment-delete-btn {

frontend/static/css/base.css

@@ -509,13 +509,18 @@ button:hover,
     z-index: var(--z-base);
 }
 
+.btn:hover:not(.btn-secondary):not(.btn-danger) {
+    color: var(--on-primary);
+}
+
 .btn-secondary {
     background: transparent;
     border: 1px solid var(--outline);
     color: var(--on-background);
 }
 
 .btn-secondary:hover {
+    background: color-mix(in srgb, var(--primary) 8%, transparent);
     border-color: var(--primary);
     filter: brightness(1.15);
 }
@@ -654,13 +659,6 @@ a:focus-visible {
     font-size: var(--font-body-base);
     box-shadow: none;
 }
-.btn-dialog.btn-secondary {
-    color: var(--primary);
-}
-.btn-dialog.btn-secondary:hover {
-    background: color-mix(in srgb, var(--primary) 8%, transparent);
-    border-color: var(--primary);
-}
 .btn-dialog.btn-primary {
     border-color: var(--primary);
 }

frontend/static/css/profile.css

@@ -30,18 +30,15 @@
     border-radius: var(--radius-full);
 }
 
-#upload-avatar-btn {
-    margin-bottom: var(--spacing-sm);
-}
-
-.remove-avatar-form {
-    display: inline-block;
+.avatar-actions {
+    display: flex;
+    justify-content: center;
+    gap: var(--spacing-sm);
     margin-bottom: var(--spacing-sm);
 }
-
 #upload-avatar-btn,
 .remove-avatar-form .btn-sm {
-    min-width: 8rem;
+    min-width: 12rem;
 }
 
 .role-badge {
@@ -95,6 +92,7 @@
     margin-top: var(--spacing-lg);
 }
 
+.profile-actions .btn,
 .profile-actions .btn-secondary,
 .profile-actions .btn-danger {
     padding: var(--spacing-xs) var(--spacing-md);
@@ -119,6 +117,9 @@
     font-family: var(--font-mono);
     text-transform: uppercase;
     padding: 0;
+    display: inline-flex;
+    align-items: center;
+    transform: translateY(1px);
 }
 
 .email-edit-btn:hover {
@@ -127,7 +128,7 @@
     filter: brightness(1.1);
 }
 
-@media (max-width: 22.5em) {
+@media (max-width: 37em) {
     .profile-card {
         padding: var(--spacing-md);
     }
@@ -153,15 +154,18 @@
         flex-shrink: 0;
     }
 
-    .profile-actions {
+    .avatar-actions {
         flex-direction: column;
         align-items: stretch;
         width: fit-content;
-        margin-left: auto;
-        margin-right: auto;
+        margin: 0 auto var(--spacing-sm);
     }
-    .profile-actions .btn {
-        width: 100%;
+
+    .profile-actions {
+        flex-direction: column;
+        align-items: stretch;
+        width: fit-content;
+        margin: 0 auto;
     }
 }
 

frontend/static/scripts/comment-reply.js

@@ -72,7 +72,7 @@
         document.getElementById('comment-form-title').textContent = _t('Editing comment');
 
         restoreButtonText();
-        editToggle.textContent = _t('Cancel');
+        editToggle.textContent = _t('[Cancel]');
         activeMode.type = 'edit';
         activeMode.commentId = commentId;
         activeMode.button = editToggle;

frontend/templates/article_detail.html

@@ -75,8 +75,8 @@ <h1 class="item-title detail-title">{{ article.article_title }}</h1>
 
         <div class="detail-actions">
             {% if current_user and (current_user.account_id == article.article_author_id or current_user.account_role == 'admin') %}
-                <a href="{{ url_for('article.render_edit_page', article_id=article.article_id) }}" class="btn btn-sm btn-secondary">{{ _('Edit') }}</a>
-                <a href="#" class="btn btn-sm btn-secondary btn-danger confirm-trigger" data-confirm-message="{{ _('Delete this article permanently ?') }}" data-form-id="delete-article-{{ article.article_id }}">{{ _('Delete') }}</a>
+                <a href="{{ url_for('article.render_edit_page', article_id=article.article_id) }}" class="btn btn-sm">{{ _('Edit') }}</a>
+                <a href="#" class="btn btn-sm btn-danger confirm-trigger" data-confirm-message="{{ _('Delete this article permanently ?') }}" data-form-id="delete-article-{{ article.article_id }}">{{ _('Delete') }}</a>
                 <form id="delete-article-{{ article.article_id }}" action="{{ url_for('article.delete_article_html', article_id=article.article_id) }}" method="POST" hidden>
                     <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                     <button type="submit" hidden></button>
@@ -237,6 +237,8 @@ <h4 class="comment-join-title" id="comment-form-title">{{ _('Join the discussion
   'Reply to': _('Reply to'),
   'Editing comment': _('Editing comment'),
   'Cancel': _('Cancel'),
+  '[Cancel]': _('[Cancel]'),
+  '[Edit]': _('[Edit]'),
   'Post Comment': _('Post Comment'),
   'Join the discussion': _('Join the discussion')
 } | tojson | safe }}

frontend/templates/login.html

@@ -27,7 +27,7 @@ <h1 class="account-title">{{ _('Welcome Back') }}</h1>
                 <button type="button" class="password-toggle" aria-label="{{ _('Toggle password visibility') }}" aria-pressed="false">{{ icon('visibility') }}</button>
             </div>
         </div>
-        <button type="submit" class="full-width">{{ _('Sign In') }}</button>
+        <button type="submit" class="btn full-width">{{ _('Sign In') }}</button>
     </form>
 
     <hr>

frontend/templates/profile.html

@@ -18,14 +18,16 @@
             {% endif %}
         </div>
         {% if is_own_profile %}
-        <button type="button" id="upload-avatar-btn" class="btn btn-sm">{{ _('Upload Photo') }}</button>
-        <input type="file" id="avatar-file-input" accept="image/*" hidden>
-        {% if user.avatar_file_id %}
-        <form action="{{ url_for('auth.remove_profile_photo') }}" method="POST" class="remove-avatar-form">
-            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-            <button type="submit" class="btn btn-sm btn-secondary">{{ _('Remove Photo') }}</button>
-        </form>
-        {% endif %}
+        <div class="avatar-actions">
+            <button type="button" id="upload-avatar-btn" class="btn btn-sm">{{ _('Upload Photo') }}</button>
+            <input type="file" id="avatar-file-input" accept="image/*" hidden>
+            {% if user.avatar_file_id %}
+            <form action="{{ url_for('auth.remove_profile_photo') }}" method="POST" class="remove-avatar-form">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+                <button type="submit" class="btn btn-sm btn-secondary">{{ _('Remove Photo') }}</button>
+            </form>
+            {% endif %}
+        </div>
         {% endif %}
         <h1>{{ user.account_username }}</h1>
         <div class="role-row">
@@ -121,7 +123,7 @@ <h2 class="modal-title">{{ _('Update Password') }}</h2>
     {% if is_own_profile %}
     <div class="profile-actions">
         {% if current_user.account_role == 'admin' %}
-        <a href="{{ url_for('auth.list_all_users') }}" class="btn btn-secondary">{{ _('Manage Users') }}</a>
+        <a href="{{ url_for('auth.list_all_users') }}" class="btn">{{ _('Manage Users') }}</a>
         {% endif %}
         <button type="button" id="open-password-modal" class="btn btn-secondary">{{ _('Change Password') }}</button>
         <form action="{{ url_for('auth.logout') }}" method="POST" class="logout-form">

frontend/templates/registration.html

@@ -38,7 +38,7 @@ <h1 class="account-title">{{ _('Join DevJournal') }}</h1>
                 <button type="button" class="password-toggle" aria-label="{{ _('Toggle password visibility') }}" aria-pressed="false">{{ icon('visibility') }}</button>
             </div>
         </div>
-        <button type="submit" class="full-width">{{ _('Create Account') }}</button>
+        <button type="submit" class="btn full-width">{{ _('Create Account') }}</button>
     </form>
 
     <hr>

translations/fr/LC_MESSAGES/messages.po

@@ -307,6 +307,10 @@ msgstr "Publier le commentaire"
 msgid "Cancel"
 msgstr "Annuler"
 
+#: frontend/templates/article_detail.html:239
+msgid "[Cancel]"
+msgstr "[Annuler]"
+
 #: frontend/templates/article_detail.html:209
 #, python-format
 msgid ""