Multiple improvements for comment edit diff (#21990)

- Use explicit avatar size so when JS copies the HTML, the size gets
copied with it
- Replace icon font use with SVG
- Improve styling and diff rendering
- Sort lists in `svg.js`

Fixes: https://github.com/go-gitea/gitea/issues/21924

<img width="933" alt="Screenshot 2022-11-30 at 17 52 17"
src="https://user-images.githubusercontent.com/115237/204859608-f322a8f8-7b91-45e4-87c0-82694e574115.png">

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>

1 files changed, 15 insertions, 13 deletions

diff --git a/web_src/js/svg.js b/web_src/js/svg.js
index dedc126303..60dd49f8bf 100644
--- a/web_src/js/svg.js
+++ b/web_src/js/svg.js
@@ -1,11 +1,12 @@
 import octiconChevronDown from '../../public/img/svg/octicon-chevron-down.svg';
 import octiconChevronRight from '../../public/img/svg/octicon-chevron-right.svg';
-import octiconCopy from '../../public/img/svg/octicon-copy.svg';
 import octiconClock from '../../public/img/svg/octicon-clock.svg';
+import octiconCopy from '../../public/img/svg/octicon-copy.svg';
 import octiconDiffAdded from '../../public/img/svg/octicon-diff-added.svg';
 import octiconDiffModified from '../../public/img/svg/octicon-diff-modified.svg';
 import octiconDiffRemoved from '../../public/img/svg/octicon-diff-removed.svg';
 import octiconDiffRenamed from '../../public/img/svg/octicon-diff-renamed.svg';
+import octiconFile from '../../public/img/svg/octicon-file.svg';
 import octiconFileDirectoryFill from '../../public/img/svg/octicon-file-directory-fill.svg';
 import octiconGitMerge from '../../public/img/svg/octicon-git-merge.svg';
 import octiconGitPullRequest from '../../public/img/svg/octicon-git-pull-request.svg';
@@ -20,17 +21,23 @@ import octiconProject from '../../public/img/svg/octicon-project.svg';
 import octiconRepo from '../../public/img/svg/octicon-repo.svg';
 import octiconRepoForked from '../../public/img/svg/octicon-repo-forked.svg';
 import octiconRepoTemplate from '../../public/img/svg/octicon-repo-template.svg';
-import octiconTriangleDown from '../../public/img/svg/octicon-triangle-down.svg';
-import octiconFile from '../../public/img/svg/octicon-file.svg';
-import octiconSidebarExpand from '../../public/img/svg/octicon-sidebar-expand.svg';
 import octiconSidebarCollapse from '../../public/img/svg/octicon-sidebar-collapse.svg';
+import octiconSidebarExpand from '../../public/img/svg/octicon-sidebar-expand.svg';
+import octiconTriangleDown from '../../public/img/svg/octicon-triangle-down.svg';
+import octiconX from '../../public/img/svg/octicon-x.svg';
 
 
 export const svgs = {
   'octicon-chevron-down': octiconChevronDown,
   'octicon-chevron-right': octiconChevronRight,
-  'octicon-copy': octiconCopy,
   'octicon-clock': octiconClock,
+  'octicon-copy': octiconCopy,
+  'octicon-diff-added': octiconDiffAdded,
+  'octicon-diff-modified': octiconDiffModified,
+  'octicon-diff-removed': octiconDiffRemoved,
+  'octicon-diff-renamed': octiconDiffRenamed,
+  'octicon-file': octiconFile,
+  'octicon-file-directory-fill': octiconFileDirectoryFill,
   'octicon-git-merge': octiconGitMerge,
   'octicon-git-pull-request': octiconGitPullRequest,
   'octicon-issue-closed': octiconIssueClosed,
@@ -44,15 +51,10 @@ export const svgs = {
   'octicon-repo': octiconRepo,
   'octicon-repo-forked': octiconRepoForked,
   'octicon-repo-template': octiconRepoTemplate,
-  'octicon-triangle-down': octiconTriangleDown,
-  'octicon-file': octiconFile,
-  'octicon-file-directory-fill': octiconFileDirectoryFill,
-  'octicon-sidebar-expand': octiconSidebarExpand,
   'octicon-sidebar-collapse': octiconSidebarCollapse,
-  'octicon-diff-added': octiconDiffAdded,
-  'octicon-diff-modified': octiconDiffModified,
-  'octicon-diff-removed': octiconDiffRemoved,
-  'octicon-diff-renamed': octiconDiffRenamed,
+  'octicon-sidebar-expand': octiconSidebarExpand,
+  'octicon-triangle-down': octiconTriangleDown,
+  'octicon-x': octiconX,
 };