Repository: inovex/scrumlr.io (ts)

Issue:
The visual indication for image links should align with the plus icon within the note input
As a user, I want the visual indication for image links (first icon) to align with the plus icon (second icon) within the note inputs at the top of columns. Both icons should be aligned at the top. 

![Image](https://github.com/inovex/scrumlr.io/assets/36969812/82daa7b0-1f06-4dfe-b7ca-ac71bbec76e8)



Pull request:
fix: align image icon with add icon
<!--
Please make sure the title of your PR starts with a semantic prefix:

feat: A new feature.
fix: A bug fix.
improvement: Implemented enhancements to existing functionality.
dependency: Updates or modifications to project dependencies or external libraries.
localization: Changes related to localization or internationalization of the codebase.
accessibility: Improvements made to enhance the accessibility of the application or website.
docs: Documentation only changes.
style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc).
refactor: A code change that neither fixes a bug nor adds a feature.
perf: A code change that improves performance.
test: Adding missing tests or correcting existing tests.
build: Changes that affect the build system.
chore: Other changes that don't modify src or test files.
revert: Reverts a previous commit.
-->

## Description
<!-- Explain the changes you’ve made. It doesn’t need to be fancy and you don’t have to get too technical. -->
Closes #3847.

## Changelog
<!-- Please provide a detailed list of the changes you have made to the codebase. -->
- Aligned icon
- Cleaned up CSS

## Checklist

- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [x] The light- and dark-theme are both supported and tested
- [x] The design was implemented and is responsive for all devices and screen sizes
- [x] The application was tested in the most commonly used browsers (e.g. Chrome, Firefox, Safari)

## (Optional) Visual Changes
<!-- If available, please provide a before and after screenshot of your UI related changes. -->
![image](https://github.com/inovex/scrumlr.io/assets/44020029/40a773ba-3940-463e-8f0b-aff3046f2d5b)
![image](https://github.com/inovex/scrumlr.io/assets/44020029/51bf1b2b-9f7c-48d4-bea3-af3369476b12)
![image](https://github.com/inovex/scrumlr.io/assets/44020029/089e5ac5-719f-4fe1-8dd6-7f215be83468)


Patch:
diff --git a/src/components/NoteInput/NoteInput.scss b/src/components/NoteInput/NoteInput.scss
index a0715225..d61a7686 100644
--- a/src/components/NoteInput/NoteInput.scss
+++ b/src/components/NoteInput/NoteInput.scss
@@ -46,21 +46,20 @@ $note-input__input-right: 40px;
   }
 }
 
+.note-input__image-indicator,
 .note-input__add-button {
   all: unset;
-  cursor: pointer;
+  position: relative;
   display: flex;
-  flex-direction: column;
+  align-self: flex-start;
   padding: $spacing--xs 0;
+}
 
-  &:hover > .note-input__icon {
-    filter: brightness(1.2);
-    transform: scale(1.2);
-  }
+.note-input__add-button {
+  cursor: pointer;
 
-  &:focus > .note-input__icon {
-    border-radius: 100%;
-    outline: 2px solid rgba(var(--accent-color-rgb), 0.5);
+  &:hover > .note-input__icon--add {
+    filter: $brighten--slightly;
   }
 }
 
@@ -78,15 +77,10 @@ $note-input__input-right: 40px;
 }
 
 .note-input__icon--image {
-  margin: 0 $spacing--xs 4px $spacing--xs;
+  margin: 0 $spacing--xs $spacing--xxs $spacing--xs;
   animation: fade-in 0.2s ease-in-out;
 }
 
-.note-input__isImage {
-  display: flex;
-  position: relative;
-}
-
 .note-input__icon--star {
   position: absolute;
   color: var(--accent-color);
diff --git a/src/components/NoteInput/NoteInput.tsx b/src/components/NoteInput/NoteInput.tsx
index a8499f75..a18c5c40 100644
--- a/src/components/NoteInput/NoteInput.tsx
+++ b/src/components/NoteInput/NoteInput.tsx
@@ -103,7 +103,7 @@ export const NoteInput = ({columnIndex, columnId, columnIsVisible, toggleColumnV
         style={{zIndex: 999}}
       />
       {isImage && (
-        <div className="note-input__isImage" title={t("NoteInput.imageInfo")}>
+        <div className="note-input__image-indicator" title={t("NoteInput.imageInfo")}>
           <ImageIcon className="note-input__icon--image" />
           <StarIcon className="note-input__icon--star star-1" />
           <StarIcon className="note-input__icon--star star-2" />
@@ -115,6 +115,7 @@ export const NoteInput = ({columnIndex, columnId, columnIsVisible, toggleColumnV
         tabIndex={-1} // skip focus
         className="note-input__add-button"
         aria-label={t("NoteInput.create")}
+        title={t("NoteInput.create")}
       >
         <PlusIcon className="note-input__icon--add" />
       </button>


Test patch:
diff --git a/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap b/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap
index 8f6de3c2..a673ba22 100644
--- a/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap
+++ b/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap
@@ -65,6 +65,7 @@ exports[`Column should have correct style show column with correct style 1`] = `
           aria-label="Create note"
           class="note-input__add-button"
           tabindex="-1"
+          title="Create note"
           type="submit"
         >
           <svg
diff --git a/src/components/NoteInput/__tests__/__snapshots__/NoteInput.test.tsx.snap b/src/components/NoteInput/__tests__/__snapshots__/NoteInput.test.tsx.snap
index b268a1f1..b825df00 100644
--- a/src/components/NoteInput/__tests__/__snapshots__/NoteInput.test.tsx.snap
+++ b/src/components/NoteInput/__tests__/__snapshots__/NoteInput.test.tsx.snap
@@ -19,6 +19,7 @@ exports[`Note Input should render correctly 1`] = `
     aria-label="Create note"
     class="note-input__add-button"
     tabindex="-1"
+    title="Create note"
     type="submit"
   >
     <svg