ui - issue view - fix icon position (#7354)

* issue view - fix icon position

- move style from template to css
- add bullets to: key, circle-slash, comment

Signed-off-by: Michael Gnehr <michael@gnehr.de>

* add border to symbols

Signed-off-by: Michael Gnehr <michael@gnehr.de>

* fix circle slash position

Signed-off-by: Michael Gnehr <michael@gnehr.de>

* fix top margin

Signed-off-by: Michael Gnehr <michael@gnehr.de>

* changed mixed space/tab indent to tabindent only

Signed-off-by: Michael Gnehr <michael@gnehr.de>

4 files changed, 62 insertions, 12 deletions

diff --git a/public/css/index.css b/public/css/index.css
index 8af38e4825..437605e1d3 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -553,12 +553,18 @@ footer .ui.left,footer .ui.right{line-height:40px}
 .repository.view.issue .comment-list .comment .ui.form textarea{height:200px;font-family:'SF Mono',Consolas,Menlo,'Liberation Mono',Monaco,'Lucida Console',monospace}
 .repository.view.issue .comment-list .comment .edit.buttons{margin-top:10px}
 .repository.view.issue .comment-list .event{position:relative;margin:15px 0 15px 79px;padding-left:25px}
+.repository.view.issue .comment-list .event>.octicon:not(.issue-symbol){text-shadow:-2px 0 #fff,0 2px #fff,2px 0 #fff,0 -2px #fff}
+.repository.view.issue .comment-list .event>.octicon.issue-symbol{font-size:20px;margin-left:-35px;margin-right:-1px;margin-top:0!important;height:28px;width:28px;border-radius:50%;text-align:center;line-height:28px;background:#eee}
+.repository.view.issue .comment-list .event>.octicon.issue-symbol::before{width:15px;display:inline-block}
+.repository.view.issue .comment-list .event>.octicon.issue-symbol.octicon-key::before{width:18px}
+.repository.view.issue .comment-list .event>.octicon.issue-symbol.octicon-circle-slash::before{width:17px}
+.repository.view.issue .comment-list .event>.octicon.issue-symbol.octicon-comment{font-size:21px;line-height:33px}
+.repository.view.issue .comment-list .event>.octicon.issue-symbol.octicon-comment::before{width:20px}
 .repository.view.issue .comment-list .event .octicon{width:30px;float:left;text-align:center}
 .repository.view.issue .comment-list .event .octicon.octicon-circle-slash{margin-top:5px;margin-left:-34.5px;font-size:20px;color:#bd2c00}
-.repository.view.issue .comment-list .event .octicon.octicon-primitive-dot{margin-left:-28.5px;margin-right:-1px;font-size:30px;color:#6cc644}
-.repository.view.issue .comment-list .event .octicon.octicon-bookmark{margin-top:3px;margin-left:-31px;margin-right:-1px;font-size:25px}
-.repository.view.issue .comment-list .event .octicon.octicon-comment{margin-top:4px;margin-left:-35px;font-size:24px}
-.repository.view.issue .comment-list .event .octicon.octicon-eye{margin-top:3px;margin-left:-35px;margin-right:0;font-size:22px}
+.repository.view.issue .comment-list .event .octicon.octicon-primitive-dot{margin-top:-1px;margin-left:-28.5px;margin-right:-1px;font-size:30px;color:#6cc644}
+.repository.view.issue .comment-list .event .octicon.octicon-bookmark{margin-top:2px;margin-left:-31px;margin-right:-1px;font-size:25px}
+.repository.view.issue .comment-list .event .octicon.octicon-eye{margin-top:3px;margin-left:-36px;margin-right:0;font-size:22px}
 .repository.view.issue .comment-list .event .octicon.octicon-x{margin-left:-33px;font-size:25px}
 .repository.view.issue .comment-list .event .detail{font-size:.9rem;margin-top:5px;margin-left:35px}
 .repository.view.issue .comment-list .event .detail .octicon.octicon-git-commit{margin-top:2px}
diff --git a/public/css/theme-arc-green.css b/public/css/theme-arc-green.css
index 2a7836efc8..b48e22b41e 100644
--- a/public/css/theme-arc-green.css
+++ b/public/css/theme-arc-green.css
@@ -112,6 +112,8 @@ footer{background:#2e323e;border-top:1px solid #313131}
 .repository.view.issue .comment-list .comment .content>.bottom.segment{background:#353945}
 .repository.view.issue .comment-list .comment .content .header{color:#dbdbdb;background-color:#404552;border-bottom:1px solid #353944}
 .repository.view.issue .comment-list .comment .content .merge-section{background-color:#404552;border-top:1px solid #353944}
+.repository.view.issue .comment-list .event>.octicon.issue-symbol{background:#3b4954}
+.repository.view.issue .comment-list .event>.octicon:not(.issue-symbol){text-shadow:-2px 0 #383c4a,0 2px #383c4a,2px 0 #383c4a,0 -2px #383c4a}
 .ui .text.grey a{color:#dbdbdb!important}
 .ui.comments .comment .actions a{color:#dbdbdb}
 .repository.view.issue .comment-list .comment .content .header:after{border-right-color:#404552}
diff --git a/public/less/_repository.less b/public/less/_repository.less
index dd986c8832..21aeea81e7 100644
--- a/public/less/_repository.less
+++ b/public/less/_repository.less
@@ -920,6 +920,45 @@
                 margin: 15px 0 15px 79px;
                 padding-left: 25px;
 
+                & > .octicon:not(.issue-symbol) {
+                    text-shadow: -2px 0 #fff, 0 2px #fff, 2px 0 #fff, 0 -2px #fff;
+                }
+
+                & > .octicon.issue-symbol {
+                    font-size: 20px;
+                    margin-left: -35px;
+                    margin-right: -1px;
+                    margin-top: 0 !important;
+                    height: 28px;
+                    width: 28px;
+                    border-radius: 50%;
+                    text-align: center;
+                    line-height: 28px;
+                    background: #eee;
+
+                    &::before {
+                        width: 15px;
+                        display: inline-block;
+                    }
+
+                    &.octicon-key::before {
+                        width: 18px;
+                    }
+
+                    &.octicon-circle-slash::before {
+                        width: 17px;
+                    }
+
+                    &.octicon-comment {
+                        font-size: 21px;
+                        line-height: 33px;
+
+                        &::before {
+                            width: 20px;
+                        }
+                    }
+                }
+
                 .octicon {
                     width: 30px;
                     float: left;
@@ -933,6 +972,7 @@
                     }
 
                     &.octicon-primitive-dot {
+                        margin-top: -1px;
                         margin-left: -28.5px;
                         margin-right: -1px;
                         font-size: 30px;
@@ -940,21 +980,15 @@
                     }
 
                     &.octicon-bookmark {
-                        margin-top: 3px;
+                        margin-top: 2px;
                         margin-left: -31px;
                         margin-right: -1px;
                         font-size: 25px;
                     }
 
-                    &.octicon-comment {
-                        margin-top: 4px;
-                        margin-left: -35px;
-                        font-size: 24px;
-                    }
-
                     &.octicon-eye {
                         margin-top: 3px;
-                        margin-left: -35px;
+                        margin-left: -36px;
                         margin-right: 0;
                         font-size: 22px;
                     }
diff --git a/public/less/themes/arc-green.less b/public/less/themes/arc-green.less
index d4200b5162..cde5b5e7f5 100644
--- a/public/less/themes/arc-green.less
+++ b/public/less/themes/arc-green.less
@@ -595,6 +595,14 @@ a.ui.basic.green.label:hover {
     border-top: 1px solid #353944;
 }
 
+.repository.view.issue .comment-list .event > .octicon.issue-symbol {
+    background: #3b4954;
+}
+
+.repository.view.issue .comment-list .event > .octicon:not(.issue-symbol) {
+    text-shadow: -2px 0 #383c4a, 0 2px #383c4a, 2px 0 #383c4a, 0 -2px #383c4a;
+}
+
 .ui .text.grey a {
     color: #dbdbdb !important;
 }