Make the actions control button look like an actual button (#24611)

- Follows #24595

# Before

![image](https://user-images.githubusercontent.com/20454870/236889690-d1dfd74d-ad7d-4571-b712-69f0dc630c6e.png)

![image](https://user-images.githubusercontent.com/20454870/236903320-3b415619-8aff-4e5d-994e-6faa671990db.png)

![image](https://user-images.githubusercontent.com/20454870/236885823-0734216d-b450-4a43-bfe3-e88525a8822a.png)

# After

![image](https://github.com/go-gitea/gitea/assets/20454870/b0745b3f-5f7a-49d9-903a-fd2675baaa1a)

![image](https://github.com/go-gitea/gitea/assets/20454870/88789c78-2764-4be4-9a03-b080f1028c78)

![image](https://github.com/go-gitea/gitea/assets/20454870/a6e23400-4445-40c5-adbe-460c90fae36a)

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: Giteabot <teabot@gitea.io>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

1 files changed, 10 insertions, 20 deletions

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index a58ca1b364..d6a3873751 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -1,19 +1,19 @@
 <template>
   <div class="action-view-container">
     <div class="action-view-header">
-      <div class="action-info-summary gt-ac">
+      <div class="action-info-summary">
         <ActionRunStatus :locale-status="locale.status[run.status]" :status="run.status" :size="20"/>
         <div class="action-title">
           {{ run.title }}
         </div>
-        <button :data-tooltip-content="locale.approve" class="action-control-button text green" @click="approveRun()" v-if="run.canApprove">
-          <SvgIcon name="octicon-play" :size="20"/>
+        <button class="ui basic small compact button primary" @click="approveRun()" v-if="run.canApprove">
+          <SvgIcon class="gt-mr-2" name="octicon-play" :size="20"/> {{ locale.approve }}
         </button>
-        <button :data-tooltip-content="locale.cancel" class="action-control-button text red" @click="cancelRun()" v-else-if="run.canCancel">
-          <SvgIcon name="octicon-x-circle-fill" :size="20"/>
+        <button class="ui basic small compact button red" @click="cancelRun()" v-else-if="run.canCancel">
+          <SvgIcon class="gt-mr-2" name="octicon-x-circle-fill" :size="20"/> {{ locale.cancel }}
         </button>
-        <button :data-tooltip-content="locale.rerun" class="action-control-button text green" @click="rerun()" v-else-if="run.canRerun">
-          <SvgIcon name="octicon-sync" :size="20"/>
+        <button class="ui basic small compact button secondary" @click="rerun()" v-else-if="run.canRerun">
+          <SvgIcon class="gt-mr-2" name="octicon-sync" :size="20"/> {{ locale.rerun }}
         </button>
       </div>
       <div class="action-commit-summary">
@@ -391,27 +391,17 @@ export function ansiLogToHTML(line) {
   margin: 0 20px 20px 20px;
 }
 
-.action-view-header .action-control-button {
-  border: none;
-  background-color: transparent;
-  outline: none;
-  cursor: pointer;
-  transition: transform 0.2s;
-  display: flex;
-}
-
-.action-view-header .action-control-button:hover {
-  transform: scale(130%);
-}
-
 .action-info-summary {
   font-size: 150%;
   height: 20px;
   display: flex;
+  align-items: center;
+  margin-top: 1rem;
 }
 
 .action-info-summary .action-title {
   padding: 0 5px;
+  flex: 1;
 }
 
 .action-commit-summary {