Add tooltip to maximize button and remove grey background

3 files changed, 20 insertions, 5 deletions

diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.html b/client/src/app/shared/shared-forms/markdown-textarea.component.html
index a519f3e0a..513b543cd 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.html
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.html
@@ -24,11 +24,11 @@
     </ng-container>
 
     <my-button
-      *ngIf="!isMaximized" icon="fullscreen" (click)="onMaximizeClick()"
+      *ngIf="!isMaximized" [title]="maximizeInText" className="maximize-button" icon="fullscreen" (click)="onMaximizeClick()"
     ></my-button>
 
     <my-button
-      *ngIf="isMaximized" icon="exit-fullscreen" (click)="onMaximizeClick()"
+      *ngIf="isMaximized" [title]="maximizeOutText" className="maximize-button" icon="exit-fullscreen" (click)="onMaximizeClick()"
     ></my-button>
   </div>
 
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.scss b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
index 39e72b5bc..fcddfea03 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
@@ -42,8 +42,20 @@ $input-border-radius: 3px;
           display: none !important;
         }
 
-        .grey-button {
-          padding: 0 7px 0 12px;
+        .maximize-button {
+          padding: 0 7px;
+          cursor: pointer;
+
+          svg {
+            stroke: var(--mainForegroundColor);
+            opacity: 0.6;
+          }
+
+          &:hover, &:active {
+            svg {
+              opacity: 1;
+            }
+          }
         }
       }
     }
@@ -77,7 +89,7 @@ $input-border-radius: 3px;
       opacity: .7;
     }
 
-    .grey-button {
+    .maximize-button {
       margin-left: 5px;
     }
   }
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.ts b/client/src/app/shared/shared-forms/markdown-textarea.component.ts
index b626071eb..9b3ab9cf3 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.ts
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.ts
@@ -35,6 +35,9 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
   previewHTML = ''
   isMaximized = false
 
+  maximizeInText = $localize`Maximize editor`
+  maximizeOutText = $localize`Exit maximized editor`
+
   private contentChanged = new Subject<string>()
   private scrollPosition: [number, number]