fix(ui): minor note fixes

frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx

@@ -32,9 +32,9 @@ function CreateNote({
 }: Props) {
   const [text, setText] = React.useState('');
   const [isPublic, setPublic] = React.useState(false);
-  const [tag, setTag] = React.useState<iTag>();
+  const [tag, setTag] = React.useState<iTag>(TAGS[0]);
   const [useTimestamp, setUseTs] = React.useState(true);
-
+  const inputRef = React.createRef<HTMLTextAreaElement>()
   const { notesStore } = useStore();
 
   React.useEffect(() => {
@@ -48,6 +48,12 @@ function CreateNote({
     }
   }, [isEdit]);
 
+  React.useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus()
+    }
+  }, [isVisible])
+
   const duration = Duration.fromMillis(time).toFormat('mm:ss');
   const stopEvents = (e: any) => {
     e.stopPropagation();
@@ -138,6 +144,7 @@ function CreateNote({
 
       <div className="">
         <textarea
+          ref={inputRef}
           name="message"
           id="message"
           placeholder="Note..."
@@ -162,12 +169,14 @@ function CreateNote({
               background: tagActive(tag) ? tagProps[tag] : 'rgba(0,0,0, 0.38)',
               userSelect: 'none',
               minWidth: 60,
-              textAlign: 'center'
             }}
-            className="cursor-pointer rounded-full px-2 py-1 mr-2 text-white"
+            className="cursor-pointer rounded-full justify-center px-2 py-1 mr-2 text-white flex items-center gap-2"
             onClick={() => addTag(tag)}
           >
-            {tag}
+            {tagActive(tag) ? <Icon name="check-circle-fill" color="white" size={16} /> : null}
+            <span>
+              {tag}
+            </span>
           </div>
         ))}
       </div>

frontend/app/components/Session_/components/NotePopup.tsx

@@ -1,37 +1,52 @@
-import React from 'react'
-import { Icon } from 'UI'
+import React from 'react';
+import { Icon } from 'UI';
 import { connectPlayer, pause } from 'Player';
-import { connect } from 'react-redux'
+import { connect } from 'react-redux';
 import { setCreateNoteTooltip } from 'Duck/sessions';
+import cn from 'classnames'
 
-function NotePopup({ setCreateNoteTooltip, time }: { setCreateNoteTooltip: (args: any) => void,  time: number }) {
+function NotePopup({
+  setCreateNoteTooltip,
+  time,
+  tooltipActive,
+}: {
+  setCreateNoteTooltip: (args: any) => void;
+  time: number;
+  tooltipActive: boolean;
+}) {
   const toggleNotePopup = () => {
+    if (tooltipActive) return;
     pause();
-    setCreateNoteTooltip({ time: time, isVisible: true })
+    setCreateNoteTooltip({ time: time, isVisible: true });
   };
 
   React.useEffect(() => {
-    return () => setCreateNoteTooltip({ time: -1, isVisible: false })
-  })
+    return () => setCreateNoteTooltip({ time: -1, isVisible: false });
+  }, []);
+
   return (
     <div
       onClick={toggleNotePopup}
-      className="cursor-pointer mr-4 hover:bg-gray-light-shade rounded-md p-1 flex items-center"
+      className={cn(
+        'mr-4 hover:bg-gray-light-shade rounded-md p-1 flex items-center', tooltipActive
+          ? 'cursor-not-allowed'
+          : 'cursor-pointer')
+      }
     >
       <Icon name="quotes" size="16" className="mr-2" />
       Add note
     </div>
-  )
+  );
 }
 
-
 const NotePopupPl = connectPlayer(
   // @ts-ignore
   (state) => ({ time: state.time })
 )(React.memo(NotePopup));
 
 const NotePopupComp = connect(
-  null, { setCreateNoteTooltip }
-)(NotePopupPl)
+  (state) => ({ tooltipActive: state.getIn(['sessions', 'createNoteTooltip', 'isVisible']) }),
+  { setCreateNoteTooltip }
+)(NotePopupPl);
 
-export default React.memo(NotePopupComp)
+export default React.memo(NotePopupComp);

frontend/app/services/NotesService.ts

@@ -2,8 +2,8 @@ import APIClient from 'App/api_client';
 
 
 export const tagProps = {
-  'QUERY': '#3EAAAF',
   'ISSUE': '#CC0000',
+  'QUERY': '#3EAAAF',
   'TASK': '#7986CB',
   'OTHER': 'rgba(0, 0, 0, 0.26)',
 }

frontend/app/svg/icons/check-circle-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
+  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
+</svg>