♿ SDA-3322 SDA-3359 Add tabing possibility and changing colors

src/renderer/components/color-picker-pill.tsx

@@ -36,9 +36,10 @@ const ColorPickerPill = (props: IColorPickerPillProps) => {
     };
 
     return (
-      <div
+      <button
+        tabIndex={0}
         key={color.rgbaColor}
-        className='EnclosingCircle'
+        className='enclosing-circle'
         onClick={chooseColor}
         data-testid={'colorDot ' + color.rgbaColor}
       >
@@ -50,14 +51,14 @@ const ColorPickerPill = (props: IColorPickerPillProps) => {
             cursor: 'pointer',
             border: hasOutline ? border : undefined,
           }}
-          className='ColorDot'
+          className='color-dot'
         />
-      </div>
+      </button>
     );
   };
 
   return (
-    <div className='ColorPicker'>
+    <div className='color-picker'>
       {props.availableColors.map((color) => ColorDot(color))}
     </div>
   );

src/renderer/components/snipping-tool.tsx

@@ -44,6 +44,7 @@ const availablePenColors: IColor[] = [
   { rgbaColor: 'rgba(0, 142, 255, 1)' },
   { rgbaColor: 'rgba(38, 196, 58, 1)' },
   { rgbaColor: 'rgba(246, 178, 2, 1)' },
+  { rgbaColor: 'rgba(233, 0, 0, 1)' },
   { rgbaColor: 'rgba(255, 255, 255, 1)', outline: 'rgba(207, 208, 210, 1)' },
 ];
 const availableHighlightColors: IColor[] = [
@@ -236,14 +237,32 @@ const SnippingTool: React.FunctionComponent<ISnippingToolProps> = ({
     ipcRenderer.send('upload-snippet', { screenSnippetPath, mergedImageData });
   };
 
+  // Removes focus styling from buttons when mouse is clicked
+  document.body.addEventListener('mousedown', () => {
+    document.body.classList.add('using-mouse');
+  });
+
+  // Re-enable focus styling when Tab is pressed
+  document.body.addEventListener('keydown', (event) => {
+    if (event.key === 'Tab') {
+      document.body.classList.remove('using-mouse');
+    }
+  });
+
+  const getLoweredAlphaColor = (rgbaColor: string) => {
+    const rgba = rgbaColor.split(',');
+    rgba[3] = '0.3'; // Set alpha to 0.3 since with 0.64 it's hard to see what is highlighted, but we want 0.64 for the buttons
+    return rgba.join(', ');
+  };
+
   return (
-    <div className='SnippingTool' lang={i18n.getLocale()}>
+    <div className='snipping-tool' lang={i18n.getLocale()}>
       <header>
-        <div className='DrawActions'>
+        <div className='draw-actions'>
           <button
             data-testid='pen-button'
             style={getBorderStyle(Tool.pen)}
-            className='ActionButton'
+            className='action-button'
             onClick={usePen}
             title={i18n.t('Pen', SNIPPING_TOOL_NAMESPACE)()}
           >
@@ -252,7 +271,7 @@ const SnippingTool: React.FunctionComponent<ISnippingToolProps> = ({
           <button
             data-testid='highlight-button'
             style={getBorderStyle(Tool.highlight)}
-            className='ActionButton'
+            className='action-button'
             onClick={useHighlight}
             title={i18n.t('Highlight', SNIPPING_TOOL_NAMESPACE)()}
           >
@@ -261,17 +280,17 @@ const SnippingTool: React.FunctionComponent<ISnippingToolProps> = ({
           <button
             data-testid='erase-button'
             style={getBorderStyle(Tool.eraser)}
-            className='ActionButton'
+            className='action-button'
             onClick={useEraser}
             title={i18n.t('Erase', SNIPPING_TOOL_NAMESPACE)()}
           >
             <img src='../renderer/assets/snip-erase.svg' />
           </button>
         </div>
-        <div className='ClearActions'>
+        <div className='clear-actions'>
           <button
             data-testid='clear-button'
-            className='ClearButton'
+            className='clear-button'
             onClick={clear}
           >
             {i18n.t('Clear', SNIPPING_TOOL_NAMESPACE)()}
@@ -315,11 +334,11 @@ const SnippingTool: React.FunctionComponent<ISnippingToolProps> = ({
       )}
 
       <main>
-        <div className='imageContainer'>
+        <div className='image-container'>
           <AnnotateArea
             data-testid='annotate-component'
             paths={paths}
-            highlightColor={highlightColor.rgbaColor}
+            highlightColor={getLoweredAlphaColor(highlightColor.rgbaColor)}
             penColor={penColor.rgbaColor}
             onChange={setPaths}
             imageDimensions={imageDimensions}
@@ -330,7 +349,11 @@ const SnippingTool: React.FunctionComponent<ISnippingToolProps> = ({
         </div>
       </main>
       <footer>
-        <button data-testid='done-button' className='DoneButton' onClick={done}>
+        <button
+          data-testid='done-button'
+          className='done-button'
+          onClick={done}
+        >
           {i18n.t('Done', SNIPPING_TOOL_NAMESPACE)()}
         </button>
       </footer>

src/renderer/styles/snipping-tool.less

@@ -1,9 +1,5 @@
 @import 'theme';
 
-@white: rgb(255, 255, 255, 1);
-@version-text-color: rgb(47, 47, 47, 1);
-@text-padding: 10px;
-
 body {
   overflow: hidden;
   background-color: white;
@@ -15,33 +11,35 @@ body {
 button {
   user-select: none;
   &:focus {
-    user-select: none;
+    outline: 2px solid #008eff;
-    outline: none;
   }
 }
 
-.SnippingTool:lang(ja-JP) {
+body.using-mouse :focus {
+  outline: none;
+}
+
+.snipping-tool:lang(ja-JP) {
   font-family: @font-family-ja;
 
   h4 {
     margin: 3px 0;
   }
 
-  .SnippingTool-symphony-section {
+  .snipping-tool-symphony-section {
     padding-left: 10px;
   }
 }
 
-.SnippingTool:lang(fr-FR) {
+.snipping-tool:lang(fr-FR) {
-  .SnippingTool-symphony-section {
+  .snipping-tool-symphony-section {
     padding-left: 10px;
   }
 }
 
-.SnippingTool {
+.snipping-tool {
   display: flex;
   flex-direction: column;
-  font-family: @font-family;
   height: 100vh;
 
   header {
@@ -52,16 +50,13 @@ button {
     align-items: center;
     padding: 12px;
 
-    .ActionButton {
+    .action-button {
       width: 24px;
       height: 24px;
       margin-left: 15px;
       background: white;
       border-radius: 4px;
       cursor: pointer;
-      padding: 4px 0;
-      border: none;
-      box-sizing: border-box;
       border-radius: 4px;
       display: flex;
       justify-content: center;
@@ -73,29 +68,27 @@ button {
       }
     }
 
-    .ClearButton {
+    .clear-button {
-      display: block;
       border: 2px solid #7c7f86;
       border-radius: 16px;
+      background: white;
       color: #7c7f86;
       font-weight: 600;
       font-size: 12px;
-      line-height: 16px;
       text-transform: uppercase;
       cursor: pointer;
-      background-color: #ffffff;
       height: 24px;
       width: 68px;
     }
 
-    .DrawActions {
+    .draw-actions {
       display: flex;
       flex-direction: row;
       justify-content: center;
       text-align: center;
     }
 
-    .ClearActions {
+    .clear-actions {
       display: flex;
       flex: none;
       flex-direction: row;
@@ -117,14 +110,8 @@ button {
     width: 100%;
     display: flex;
     justify-content: center;
-    background: linear-gradient(
-        0deg,
-        rgba(255, 255, 255, 0.96),
-        rgba(255, 255, 255, 0.96)
-      ),
-      #525760;
 
-    .imageContainer {
+    .image-container {
       display: flex;
       align-items: center;
     }
@@ -137,32 +124,23 @@ button {
     padding-top: 16px;
     padding-bottom: 24px;
 
-    .DoneButton {
+    .done-button {
-      box-shadow: none;
       border: none;
       border-radius: 16px;
       font-size: 0.75rem;
       font-weight: 600;
-      text-align: center;
-      display: inline-block;
-      text-decoration: none;
-      line-height: 16px;
       background-color: #008eff;
-      color: rgba(255, 255, 255, 0.96);
+      color: white;
       cursor: pointer;
       text-transform: uppercase;
       margin-right: 32px;
       height: 32px;
       width: 80px;
-
-      &:focus {
-        box-shadow: 0 0 10px rgba(61, 162, 253, 1);
-      }
     }
   }
 }
 
-.ColorPicker {
+.color-picker {
   display: flex;
   flex-direction: row;
   margin: 4px;
@@ -170,19 +148,17 @@ button {
   justify-content: center;
   width: fit-content;
   height: 40px;
-  background: #FFFFFF;
+  background: #ffffff;
-  box-shadow: 0px 4px 16px rgba(15, 27, 36, 0.14), 0px 4px 8px rgba(15, 27, 36, 0.26);
+  box-shadow: 0px 4px 16px rgba(15, 27, 36, 0.14),
+    0px 4px 8px rgba(15, 27, 36, 0.26);
   border-radius: 24px;
-  }
+}
 
-.EnclosingCircle {
+.enclosing-circle {
   width: 24px;
   height: 24px;
-  background: #FFFFFF;
+  background: #ffffff;
-  border-radius: 50%;
+  border: none;
-  flex: none;
-  order: 0;
-  flex-grow: 0;
   margin: 8px;
   cursor: pointer;
   align-items: center;
@@ -190,12 +166,9 @@ button {
   display: flex;
 }
 
-.ColorDot {
+.color-dot {
   border-radius: 50%;
   flex: none;
-  order: 0;
-  flex-grow: 0;
   width: 8px;
   height: 8px;
-  background: #000028;
 }