pen tools styling and tooltips

3 files changed, 141 insertions, 141 deletions

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index e77e22c5d..11595aa01 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -94,7 +94,6 @@
     transition: transform 0.2s;
     text-align: center;
     display: flex;
-    vertical-align: middle;
     justify-content: center;
     align-items: center;
 }
diff --git a/src/client/views/InkingCanvas.scss b/src/client/views/InkingCanvas.scss
index d132504fc..d76861be1 100644
--- a/src/client/views/InkingCanvas.scss
+++ b/src/client/views/InkingCanvas.scss
@@ -1,147 +1,148 @@
 @import "global_variables";
 .inking-canvas {
-  position: fixed;
-  top: -50000px;
-  left: -50000px; // z-index: 99; //overlays ink on top of everything
-  svg {
-    width: 100000px;
-    height: 100000px;
-    .highlight {
-      mix-blend-mode: multiply;
+    position: fixed;
+    top: -50000px;
+    left: -50000px; // z-index: 99; //overlays ink on top of everything
+    svg {
+        width: 100000px;
+        height: 100000px;
+        .highlight {
+            mix-blend-mode: multiply;
+        }
     }
-  }
 }
 
 .inking-control {
-  position: absolute;
-  left: 70px;
-  bottom: 70px;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  label,
-  input,
-  option {
-    font-size: 12px;
-  }
-  input[type="range"] {
-    -webkit-appearance: none;
-    background-color: transparent;
-    vertical-align: middle;
-    margin-top: 8px;
-    &:focus {
-      outline: none;
-    }
-    &::-webkit-slider-runnable-track {
-      width: 100%;
-      height: 3px;
-      border-radius: 1.5px;
-      cursor: pointer;
-      background: $intermediate-color;
-    }
-    &::-webkit-slider-thumb {
-      height: 12px;
-      width: 12px;
-      border: 1px solid $intermediate-color;
-      border-radius: 6px;
-      background: $light-color;
-      cursor: pointer;
-      -webkit-appearance: none;
-      margin-top: -4px;
-    }
-    &::-moz-range-track {
-      width: 100%;
-      height: 3px;
-      border-radius: 1.5px;
-      cursor: pointer;
-      background: $light-color;
-    }
-    &::-moz-range-thumb {
-      height: 12px;
-      width: 12px;
-      border: 1px solid $intermediate-color;
-      border-radius: 6px;
-      background: $light-color;
-      cursor: pointer;
-      -webkit-appearance: none;
-      margin-top: -4px;
-    }
-  }
-  input[type="text"] {
-    border: none;
-    padding: 0 3px;
-    background: transparent;
-    color: $light-color;
-  }
-  .ink-panel {
-    margin: 6px 12px 6px 0;
-    height: 30px;
-    vertical-align: middle;
-    line-height: 36px;
-    padding: 0 10px;
-    color: $intermediate-color;
-    &:first {
-      margin-top: 0;
-    }
-  }
-  .ink-tools {
-    display: flex;
-    background-color: transparent;
-    border-radius: 0;
+    position: absolute;
+    left: 70px;
+    bottom: 70px;
+    margin: 0;
     padding: 0;
-    button {
-      height: 36px;
-      padding: 0px;
-      padding-bottom: 3px;
-      margin-left: 10px;
-      background-color: transparent;
-      color: $intermediate-color;
+    display: flex;
+    label,
+    input,
+    option {
+        font-size: 12px;
     }
-    button:hover {
-      transform: scale(1.15);
+    input[type="range"] {
+        -webkit-appearance: none;
+        background-color: transparent;
+        vertical-align: middle;
+        margin-top: 8px;
+        &:focus {
+            outline: none;
+        }
+        &::-webkit-slider-runnable-track {
+            width: 100%;
+            height: 3px;
+            border-radius: 1.5px;
+            cursor: pointer;
+            background: $intermediate-color;
+        }
+        &::-webkit-slider-thumb {
+            height: 12px;
+            width: 12px;
+            border: 1px solid $intermediate-color;
+            border-radius: 6px;
+            background: $light-color;
+            cursor: pointer;
+            -webkit-appearance: none;
+            margin-top: -4px;
+        }
+        &::-moz-range-track {
+            width: 100%;
+            height: 3px;
+            border-radius: 1.5px;
+            cursor: pointer;
+            background: $light-color;
+        }
+        &::-moz-range-thumb {
+            height: 12px;
+            width: 12px;
+            border: 1px solid $intermediate-color;
+            border-radius: 6px;
+            background: $light-color;
+            cursor: pointer;
+            -webkit-appearance: none;
+            margin-top: -4px;
+        }
     }
-  }
-  .ink-size {
-    display: flex;
-    justify-content: space-between;
     input[type="text"] {
-      width: 42px;
+        border: none;
+        padding: 0 0px;
+        background: transparent;
+        color: $dark-color;
+        font-size: 12px;
+        margin-top: 4px;
     }
-    > * {
-      margin-right: 6px;
-      &:last-child {
-        margin-right: 0;
-      }
+    .ink-panel {
+        margin: 6px 12px 6px 0;
+        height: 30px;
+        vertical-align: middle;
+        line-height: 36px;
+        padding: 0 10px;
+        color: $intermediate-color;
+        &:first {
+            margin-top: 0;
+        }
     }
-  }
-  .ink-color {
-    display: flex;
-    position: relative;
-    padding-right: 0;
-    label {
-      margin-right: 6px;
+    .ink-tools {
+        display: flex;
+        background-color: transparent;
+        border-radius: 0;
+        padding: 0;
+        button {
+            height: 36px;
+            padding: 0px;
+            padding-bottom: 3px;
+            margin-left: 10px;
+            background-color: transparent;
+            color: $intermediate-color;
+        }
+        button:hover {
+            transform: scale(1.15);
+        }
     }
-    .ink-color-display {
-      border-radius: 11px;
-      width: 22px;
-      height: 22px;
-      margin-top: 6px;
-      cursor: pointer;
-      text-align: center;
-      //   span {
-      //     color: $light-color;
-      //     font-size: 8px;
-      //     user-select: none;
-      //   }
+    .ink-size {
+        display: flex;
+        justify-content: space-between;
+        input[type="text"] {
+            width: 42px;
+        }
+        >* {
+            margin-right: 6px;
+            &:last-child {
+                margin-right: 0;
+            }
+        }
     }
-    .ink-color-picker {
-      background-color: $light-color;
-      border-radius: 5px;
-      padding: 12px;
-      position: absolute;
-      bottom: 36px;
-      left: -3px;
-      box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw;
+    .ink-color {
+        display: flex;
+        position: relative;
+        padding-right: 0;
+        label {
+            margin-right: 6px;
+        }
+        .ink-color-display {
+            border-radius: 11px;
+            width: 22px;
+            height: 22px;
+            margin-top: 6px;
+            cursor: pointer;
+            text-align: center; //   span {
+            //     color: $light-color;
+            //     font-size: 8px;
+            //     user-select: none;
+            //   }
+        }
+        .ink-color-picker {
+            background-color: $light-color;
+            border-radius: 5px;
+            padding: 12px;
+            position: absolute;
+            bottom: 36px;
+            left: -3px;
+            box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw;
+        }
     }
-  }
-}
+}
\ No newline at end of file
diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx
index bf633b034..fb75ef2a5 100644
--- a/src/client/views/InkingControl.tsx
+++ b/src/client/views/InkingControl.tsx
@@ -78,14 +78,14 @@ export class InkingControl extends React.Component {
             <ul className="inking-control" style={this._open ? { display: "flex" } : { display: "none" }}>
                 <li className="ink-tools ink-panel">
                     <div className="ink-tool-buttons">
-                        <button onClick={() => this.switchTool(InkTool.Pen)} style={this.selected(InkTool.Pen)}><FontAwesomeIcon icon="pen" size="2x" /></button>
-                        <button onClick={() => this.switchTool(InkTool.Highlighter)} style={this.selected(InkTool.Highlighter)}><FontAwesomeIcon icon="highlighter" size="2x" /></button>
-                        <button onClick={() => this.switchTool(InkTool.Eraser)} style={this.selected(InkTool.Eraser)}><FontAwesomeIcon icon="eraser" size="2x" /></button>
-                        <button onClick={() => this.switchTool(InkTool.None)} style={this.selected(InkTool.None)}><FontAwesomeIcon icon="ban" size="2x" /></button>
+                        <button onClick={() => this.switchTool(InkTool.Pen)} style={this.selected(InkTool.Pen)}><FontAwesomeIcon icon="pen" size="lg" title="Pen" /></button>
+                        <button onClick={() => this.switchTool(InkTool.Highlighter)} style={this.selected(InkTool.Highlighter)}><FontAwesomeIcon icon="highlighter" size="lg" title="Highlighter" /></button>
+                        <button onClick={() => this.switchTool(InkTool.Eraser)} style={this.selected(InkTool.Eraser)}><FontAwesomeIcon icon="eraser" size="lg" title="Eraser" /></button>
+                        <button onClick={() => this.switchTool(InkTool.None)} style={this.selected(InkTool.None)}><FontAwesomeIcon icon="ban" size="lg" title="Pointer" /></button>
                     </div>
                 </li>
                 <li className="ink-color ink-panel">
-                    <label>Color: </label>
+                    <label>COLOR: </label>
                     <div className="ink-color-display" style={{ backgroundColor: this._selectedColor }}
                         onClick={() => this.toggleColorPicker()}>
                         {/* {this._colorPickerDisplay ? <span>&#9660;</span> : <span>&#9650;</span>} */}
@@ -95,9 +95,9 @@ export class InkingControl extends React.Component {
                     </div>
                 </li>
                 <li className="ink-size ink-panel">
-                    <label htmlFor="stroke-width">Size: </label>
-                    {/* <input type="text" min="1" max="100" value={this._selectedWidth} name="stroke-width"
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => this.switchWidth(e.target.value)} /> */}
+                    <label htmlFor="stroke-width">SIZE: </label>
+                    <input type="text" min="1" max="100" value={this._selectedWidth} name="stroke-width"
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => this.switchWidth(e.target.value)} />
                     <input type="range" min="1" max="100" value={this._selectedWidth} name="stroke-width"
                         onChange={(e: React.ChangeEvent<HTMLInputElement>) => this.switchWidth(e.target.value)} />
                 </li>