From 97fab010dcaa5c595c99c7b89553259429de54a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa=20Valderrama?= <mavalroot@gmail.com>
Date: Mon, 4 Sep 2023 12:43:30 +0200
Subject: [PATCH] fix(story): i#3954 replace pencil button with text button

---
 .../story-detail-description.component.css    | 19 ++++++++++--
 .../story-detail-description.component.html   | 11 ++++---
 .../story-detail-title.component.html         |  9 +++---
 .../taiga/src/app/styles/shared/button.css    | 31 +++++++++++++++++++
 4 files changed, 58 insertions(+), 12 deletions(-)

diff --git a/javascript/apps/taiga/src/app/modules/project/story-detail/components/story-detail-description/story-detail-description.component.css b/javascript/apps/taiga/src/app/modules/project/story-detail/components/story-detail-description/story-detail-description.component.css
index 13e0ad425..5e64f671c 100644
--- a/javascript/apps/taiga/src/app/modules/project/story-detail/components/story-detail-description/story-detail-description.component.css
+++ b/javascript/apps/taiga/src/app/modules/project/story-detail/components/story-detail-description/story-detail-description.component.css
@@ -44,7 +44,7 @@ Copyright (c) 2023-present Kaleidos INC
   &:not(.edit) {
     border-block-end: 1px solid var(--color-gray20);
     border-block-start: 1px solid var(--color-gray10);
-    padding-block-end: var(--spacing-16);
+    padding-block-end: var(--spacing-8);
   }
 }
 
@@ -53,6 +53,17 @@ Copyright (c) 2023-present Kaleidos INC
   position: relative;
 }
 
+.description-empty {
+  margin-block: 0;
+  margin-inline: var(--spacing-8);
+
+  .edit-description {
+    inset-block-start: 0;
+    inset-inline-end: 2px;
+    position: absolute;
+  }
+}
+
 .edit-description {
   inset-block-start: var(--spacing-12);
   inset-inline-end: 2px;
@@ -68,12 +79,14 @@ Copyright (c) 2023-present Kaleidos INC
 }
 
 .empty {
+  background-color: var(--color-gray10);
   color: var(--color-gray70);
   font-size: var(--font-size-medium);
   font-style: italic;
   margin: 0;
-  padding-block-end: var(--spacing-8);
-  padding-block-start: var(--spacing-16);
+  margin-block-start: var(--spacing-8);
+  padding-block: var(--spacing-8);
+  padding-inline: var(--spacing-16);
   text-align: center;
 
   &.can-view {
diff --git a/javascript/apps/taiga/src/app/modules/project/story-detail/components/story-detail-description/story-detail-description.component.html b/javascript/apps/taiga/src/app/modules/project/story-detail/components/story-detail-description/story-detail-description.component.html
index 739b7ac73..6683b65c2 100644
--- a/javascript/apps/taiga/src/app/modules/project/story-detail/components/story-detail-description/story-detail-description.component.html
+++ b/javascript/apps/taiga/src/app/modules/project/story-detail/components/story-detail-description/story-detail-description.component.html
@@ -79,7 +79,7 @@
       <ng-template #emptyTpl>
         <div
           #descriptionContent
-          class="description-wrapper">
+          class="description-wrapper description-empty">
           <p
             class="empty"
             [ngClass]="{
@@ -106,10 +106,11 @@
         class="edit-description"
         [attr.aria-label]="t('story.edit_description')"
         [tgUiTooltip]="t('story.edit_description')"
-        appearance="tertiary"
-        tuiIconButton
-        icon="pen"
-        type="button"></button>
+        appearance="small"
+        tuiButton
+        type="button">
+        Edit
+      </button>
     </ng-template>
 
     <tg-discard-changes-modal
diff --git a/javascript/apps/taiga/src/app/modules/project/story-detail/components/story-detail-title/story-detail-title.component.html b/javascript/apps/taiga/src/app/modules/project/story-detail/components/story-detail-title/story-detail-title.component.html
index 68a5da5d3..4186a380d 100644
--- a/javascript/apps/taiga/src/app/modules/project/story-detail/components/story-detail-title/story-detail-title.component.html
+++ b/javascript/apps/taiga/src/app/modules/project/story-detail/components/story-detail-title/story-detail-title.component.html
@@ -28,10 +28,11 @@
           class="edit-title"
           [attr.aria-label]="t('story.edit_title')"
           [tgUiTooltip]="t('story.edit_title')"
-          appearance="tertiary"
-          tuiIconButton
-          icon="pen"
-          type="button"></button>
+          appearance="small"
+          tuiButton
+          type="button">
+          Edit
+        </button>
       </div>
     </ng-container>
 
diff --git a/javascript/apps/taiga/src/app/styles/shared/button.css b/javascript/apps/taiga/src/app/styles/shared/button.css
index 2b86446d2..97e7fe5c2 100644
--- a/javascript/apps/taiga/src/app/styles/shared/button.css
+++ b/javascript/apps/taiga/src/app/styles/shared/button.css
@@ -164,6 +164,37 @@ Used only in comment list sort button
   }
 }
 
+[data-appearance="small"]:is(button, a) {
+  @mixin button-dropdown-expanded {
+    background: var(--color-gray30);
+    color: var(--color-secondary90);
+  }
+
+  & [tuiWrapper] {
+    background: var(--color-gray10);
+    block-size: auto !important;
+    border-radius: 3px;
+    color: var(--color-secondary);
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-regular);
+    line-height: 0.875rem;
+    padding-block: var(--spacing-4) !important;
+    padding-inline: var(--spacing-8) !important;
+
+    @mixin wrapper-hover {
+      background: var(--color-gray30);
+      color: var(--color-secondary90);
+    }
+
+    @mixin wrapper-focus {
+      &::after {
+        border-color: var(--color-secondary);
+        border-width: 1px;
+      }
+    }
+  }
+}
+
 [data-appearance="main-nav"]:is(button, a) {
   @mixin button-dropdown-expanded {
     background: var(--color-white);