ui: add problem_edit tab active color (#314)

packages/ui-default/pages/problem_edit.page.js

@@ -257,6 +257,8 @@ export default new NamedPage(['problem_create', 'problem_edit'], (pagename) => {
   }
   const editor = Editor.getOrConstruct($main, { upload, onChange });
   $('[data-lang]').on('click', (ev) => {
+    $('[data-lang]').removeClass('tab--active');
+    $(ev.currentTarget).addClass('tab--active');
     const lang = $(ev.currentTarget).attr('data-lang');
     activeTab = lang;
     const val = getContent(lang);

packages/ui-default/pages/problem_edit.page.styl

@@ -71,3 +71,16 @@
       margin-left: 0
       margin-right: 0
       margin-top: rem(floor($menu-drop-triangle-size * -1.414))
+
+  .section__tab-header-item
+    border-top: 3px solid transparent;
+    transition: border-color 0.2s, background 0.2s, color 0.2s;
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    margin-right: 0
+
+    &:hover
+      border-color: #5f9fd6;
+      background: #f8f8f8;
+    
+    &.tab--active
+      border-color: #ed5f82;