Remove unnecessary arrow elem

services/web/app/views/project/editor/editor.pug

@@ -100,7 +100,6 @@ div.full-size(
 	ng-if="onboarding.autoCompile == 'show'"
 	ng-class="placement"
 )
-	.arrow
 	.popover-inner
 		h3.popover-title #{translate("auto_compile")}
 		.popover-content

services/web/public/stylesheets/app/editor/feature-onboarding.less

@@ -104,28 +104,42 @@ a.feat-onboard-dismiss {
 	display: block;
 	top: 10px;
 
-	.arrow {
-		top: 17px !important;
-	}
-
 	img {
 		margin-bottom: 10px;
 		border: 1px solid @gray-lighter;
 	}
 
-	&.right > .arrow {
-		left: -10px !important;
+	&::before, &::after {
+		content: '';
+		border-width: 11px;
+		border-style: solid;
+		border-color: transparent;
+		top: 7px;
+		display: block;
+		position: absolute;
+	}
 
-		&:after {
-			border-right-color: #f7f7f7 !important;
-		}
+	&.right::before {
+		border-left-width: 0;
+		border-right-color: rgba(0, 0, 0, .3);
+		left: -11px;
 	}
 
-	&.left > .arrow {
-		right: -10px !important;
+	&.right::after {
+		border-left-width: 0;
+		border-right-color: #f7f7f7;
+		left: -9.5px;
+	}
 
-		&:after {
-			border-left-color: #f7f7f7 !important;
-		}
+	&.left::before {
+		border-right-width: 0;
+		border-left-color: rgba(0, 0, 0, .3);
+		right: -11px
+	}
+
+	&.left::after {
+		border-right-width: 0;
+		border-left-color: #f7f7f7;
+		right: -9.5px;
 	}
 }