fix: update styles

Author: antfu

README.md

@@ -4,6 +4,13 @@ Enhances the GitHub to add a button to open the repo/issue/PR in Codeflow.
 
 <!-- [Install on Greasyfork](https://greasyfork.org/en/scripts/461320-open-in-codeflow) -->
 
+![](https://user-images.githubusercontent.com/11247099/232064581-5fb9c374-ba3e-4ccf-baf5-d7c292bdab82.png)
+
+## Features
+
+- Add a button to open the repo/issue/PR in Codeflow in GitHub
+- Hide comments from Codeflow bot
+
 ## Sponsors
 
 <p align="center">

index.js

@@ -5,7 +5,7 @@
 // @supportURL   https://github.com/antfu/open-in-codeflow
 // @namespace    https://greasyfork.org/en/scripts/
 // @version      0.1
-// @description  try to take over the world!
+// @description  Enhances the GitHub to add a button to open the repo/issue/PR in Codeflow.
 // @author       Anthony Fu
 // @license      MIT
 // @match        https://github.com/**
@@ -17,6 +17,7 @@
   'use strict'
 
   const id = 'open-in-codeflow'
+  const iconSrc = 'data:image/svg+xml,%0A%3Csvg width=\'200\' height=\'200\' viewBox=\'0 0 200 200\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath fill-rule=\'evenodd\' clip-rule=\'evenodd\' d=\'M159.795 64.0259C160.334 62.2727 160.625 60.4058 160.625 58.4688C160.625 54.0657 159.122 50.0243 156.617 46.8595C167.15 47.8788 176.854 53.9593 183.949 62.4268C191.808 71.8074 197 84.6884 197 98.896C197 127.718 174.328 151.084 146.36 151.084C136.242 151.084 126.25 148.944 116.855 140.97C107.794 133.28 100.05 120.795 92.7158 101.899C85.7853 84.0429 79.2649 74.4773 73.1696 69.3042C67.408 64.4143 61.3518 62.879 53.6397 62.879C34.3382 62.879 18.6912 79.0044 18.6912 98.896C18.6912 109.045 22.4143 118.216 27.9282 124.797C33.5108 131.461 40.4036 134.913 46.5073 134.913C49.7751 134.913 53.4926 134.182 56.6084 133.34C58.119 132.931 59.3931 132.523 60.2776 132.222C60.7183 132.071 61.0576 131.949 61.2762 131.868L61.5099 131.781L61.5473 131.767C61.5473 131.767 61.5453 131.768 64.3382 139.323C67.1313 146.879 67.1292 146.88 67.1292 146.88L67.1206 146.883L67.1071 146.888L67.0693 146.903L66.9523 146.948C66.8567 146.985 66.7262 147.034 66.5629 147.094C66.2362 147.215 65.7783 147.379 65.2091 147.573C64.0734 147.961 62.4778 148.472 60.5894 148.982C56.9072 149.977 51.7093 151.084 46.5073 151.084C34.7802 151.084 23.8422 144.664 16.0516 135.365C8.19242 125.984 3 113.104 3 98.896C3 70.0735 25.6722 46.7081 53.6397 46.7081C63.7585 46.7081 73.7501 48.8482 83.1449 56.8214C92.2058 64.5115 99.9501 76.9971 107.284 95.8934C114.215 113.749 120.735 123.315 126.831 128.488C132.592 133.378 138.648 134.913 146.36 134.913C165.662 134.913 181.309 118.788 181.309 98.896C181.309 88.7466 177.586 79.5764 172.072 72.995C168.354 68.5575 164.055 65.544 159.795 64.0259Z\' fill=\'url(%23paint0_linear_1_6)\'/%3E%3Cpath d=\'M64.717 163.597L83.7005 131.716C84.7083 130.022 83.831 127.807 81.9609 127.325L48.2122 118.63C45.9818 118.056 44.0417 120.296 44.8489 122.515L59.6139 163.092C60.4478 165.383 63.4748 165.683 64.717 163.597Z\' fill=\'url(%23paint1_linear_1_6)\'/%3E%3Cpath fill-rule=\'evenodd\' clip-rule=\'evenodd\' d=\'M141.011 48.8608C135.174 48.8608 130.103 53.7944 130.103 60.3064C130.103 66.8184 135.174 71.752 141.011 71.752C146.848 71.752 151.919 66.8184 151.919 60.3064C151.919 53.7944 146.848 48.8608 141.011 48.8608ZM116.258 60.3064C116.258 46.5208 127.152 35 141.011 35C154.87 35 165.764 46.5208 165.764 60.3064C165.764 74.092 154.87 85.6128 141.011 85.6128C127.152 85.6128 116.258 74.092 116.258 60.3064Z\' fill=\'url(%23paint2_linear_1_6)\'/%3E%3Cdefs%3E%3ClinearGradient id=\'paint0_linear_1_6\' x1=\'15.125\' y1=\'98.896\' x2=\'187.906\' y2=\'98.896\' gradientUnits=\'userSpaceOnUse\'%3E%3Cstop stop-color=\'%23942CD6\'/%3E%3Cstop offset=\'0.993524\' stop-color=\'%23E829B3\'/%3E%3C/linearGradient%3E%3ClinearGradient id=\'paint1_linear_1_6\' x1=\'15.125\' y1=\'98.896\' x2=\'187.906\' y2=\'98.896\' gradientUnits=\'userSpaceOnUse\'%3E%3Cstop stop-color=\'%23942CD6\'/%3E%3Cstop offset=\'0.993524\' stop-color=\'%23E829B3\'/%3E%3C/linearGradient%3E%3ClinearGradient id=\'paint2_linear_1_6\' x1=\'15.125\' y1=\'98.896\' x2=\'187.906\' y2=\'98.896\' gradientUnits=\'userSpaceOnUse\'%3E%3Cstop stop-color=\'%23942CD6\'/%3E%3Cstop offset=\'0.993524\' stop-color=\'%23E829B3\'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A'
 
   const css = [
     // Hide comments from codeflow bot
@@ -35,9 +36,14 @@
     a.classList.add('btn-sm')
     a.innerText = ' Codeflow '
     a.id = id
+    Object.assign(a.style, {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: '0.5em',
+    })
     const icon = document.createElement('img')
-    icon.src = 'data:image/svg+xml,%3Csvg viewBox=\'0 0 34 34\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath fill-rule=\'evenodd\' clip-rule=\'evenodd\' d=\'M26.8631 10.7824C26.952 10.4935 27 10.1859 27 9.86678C27 9.14131 26.7521 8.47544 26.3388 7.954C28.0762 8.12195 29.6769 9.12378 30.8472 10.5189C32.1435 12.0645 33 14.1868 33 16.5277C33 21.2765 29.2602 25.1263 24.6471 25.1263C22.978 25.1263 21.3299 24.7737 19.7802 23.46C18.2857 22.193 17.0082 20.1358 15.7985 17.0224C14.6553 14.0804 13.5798 12.5044 12.5744 11.652C11.624 10.8464 10.625 10.5934 9.35294 10.5934C6.16919 10.5934 3.58823 13.2503 3.58823 16.5277C3.58823 18.1999 4.20235 19.7109 5.11187 20.7953C6.03272 21.8931 7.16967 22.4619 8.17647 22.4619C8.71548 22.4619 9.32868 22.3416 9.84262 22.2028C10.0918 22.1354 10.302 22.0682 10.4479 22.0186C10.5205 21.9937 10.5765 21.9736 10.6126 21.9603L10.6511 21.9459L10.6573 21.9436C10.6573 21.9436 10.6569 21.9437 11.1176 23.1886C11.5784 24.4334 11.578 24.4337 11.578 24.4337L11.5766 24.4342L11.5744 24.435L11.5681 24.4374L11.5488 24.4448C11.5331 24.4509 11.5115 24.459 11.4846 24.4689C11.4307 24.4888 11.3552 24.5159 11.2613 24.5479C11.074 24.6117 10.8108 24.6959 10.4993 24.7799C9.89191 24.9439 9.03453 25.1263 8.17647 25.1263C6.24209 25.1263 4.43788 24.0685 3.15283 22.5364C1.85648 20.9908 1 18.8686 1 16.5277C1 11.7788 4.73974 7.92907 9.35294 7.92907C11.022 7.92907 12.6701 8.28167 14.2198 9.59535C15.7144 10.8624 16.9918 12.9196 18.2015 16.033C19.3447 18.9749 20.4202 20.551 21.4257 21.4033C22.376 22.2089 23.3749 22.4619 24.6471 22.4619C27.8308 22.4619 30.4118 19.8051 30.4118 16.5277C30.4118 14.8554 29.7976 13.3445 28.8881 12.2601C28.2748 11.529 27.5658 11.0325 26.8631 10.7824Z\' fill=\'url(%23paint0_linear_1_6)\'/%3E%3Cpath d=\'M11.1801 27.188L14.3114 21.9351C14.4777 21.6561 14.3329 21.2911 14.0245 21.2117L8.45768 19.7792C8.08979 19.6845 7.76976 20.0536 7.90291 20.4192L10.3384 27.1047C10.4759 27.4823 10.9752 27.5317 11.1801 27.188Z\' fill=\'url(%23paint1_linear_1_6)\'/%3E%3Cpath fill-rule=\'evenodd\' clip-rule=\'evenodd\' d=\'M23.7647 8.28374C22.802 8.28374 21.9654 9.09662 21.9654 10.1695C21.9654 11.2425 22.802 12.0554 23.7647 12.0554C24.7275 12.0554 25.564 11.2425 25.564 10.1695C25.564 9.09662 24.7275 8.28374 23.7647 8.28374ZM19.6817 10.1695C19.6817 7.8982 21.4787 6 23.7647 6C26.0507 6 27.8477 7.8982 27.8477 10.1695C27.8477 12.4409 26.0507 14.3391 23.7647 14.3391C21.4787 14.3391 19.6817 12.4409 19.6817 10.1695Z\' fill=\'url(%23paint2_linear_1_6)\'/%3E%3Cdefs%3E%3ClinearGradient id=\'paint0_linear_1_6\' x1=\'0.391016\' y1=\'16.5277\' x2=\'33.609\' y2=\'16.5277\' gradientUnits=\'userSpaceOnUse\'%3E%3Cstop stop-color=\'%23761FAC\'/%3E%3Cstop offset=\'0.329402\' stop-color=\'%238A19A9\'/%3E%3Cstop offset=\'0.716611\' stop-color=\'%23D900A5\'/%3E%3Cstop offset=\'0.993524\' stop-color=\'%23D917A3\'/%3E%3C/linearGradient%3E%3ClinearGradient id=\'paint1_linear_1_6\' x1=\'0.391016\' y1=\'16.5277\' x2=\'33.609\' y2=\'16.5277\' gradientUnits=\'userSpaceOnUse\'%3E%3Cstop stop-color=\'%23761FAC\'/%3E%3Cstop offset=\'0.329402\' stop-color=\'%238A19A9\'/%3E%3Cstop offset=\'0.716611\' stop-color=\'%23D900A5\'/%3E%3Cstop offset=\'0.993524\' stop-color=\'%23D917A3\'/%3E%3C/linearGradient%3E%3ClinearGradient id=\'paint2_linear_1_6\' x1=\'0.391016\' y1=\'16.5277\' x2=\'33.609\' y2=\'16.5277\' gradientUnits=\'userSpaceOnUse\'%3E%3Cstop stop-color=\'%23761FAC\'/%3E%3Cstop offset=\'0.329402\' stop-color=\'%238A19A9\'/%3E%3Cstop offset=\'0.716611\' stop-color=\'%23D900A5\'/%3E%3Cstop offset=\'0.993524\' stop-color=\'%23D917A3\'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A'
-    icon.height = 17
+    icon.src = iconSrc
+    icon.height = 18
     icon.classList.add('octicon')
     a.prepend(icon)
     return a