From a3cc1ba4e1603e447f2c59ca76fed55f6840cb98 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Mon, 25 Feb 2019 08:03:52 -0500
Subject: [PATCH] All svg formatting is fixed and at parity with master

Still need to expose the remaining non-theme svgs
---
 packages/application/style/images.css         |  9 ++--
 packages/notebook/style/not-trusted-icon.svg  |  6 +--
 packages/notebook/style/trusted-icon.svg      |  4 +-
 packages/statusbar/src/components/icon.tsx    | 14 ------
 .../statusbar/src/components/lineForm.tsx     | 49 +++++++++++++++++++
 packages/statusbar/src/defaults/lineCol.tsx   | 19 +++----
 packages/statusbar/src/style/lineForm.ts      | 35 ++++++++++---
 packages/statusbar/style/kernel-icon.svg      |  4 +-
 packages/statusbar/style/terminal-icon.svg    |  2 +-
 9 files changed, 96 insertions(+), 46 deletions(-)
 create mode 100644 packages/statusbar/src/components/lineForm.tsx

diff --git a/packages/application/style/images.css b/packages/application/style/images.css
index a462ba3a6393..23e8e8aa02b6 100644
--- a/packages/application/style/images.css
+++ b/packages/application/style/images.css
@@ -4,9 +4,12 @@
 |----------------------------------------------------------------------------*/
 
 /* CSS for generic svg icons */
-.jp-icon {
-  fill: var(--jp-ui-font-color0);
-  stroke: var(--jp-ui-font-color0);
+.jp-icon-fill {
+  fill: var(--jp-ui-font-color1);
+}
+
+.jp-icon-stroke {
+  stroke: var(--jp-ui-font-color1);
 }
 
 .jp-icon-accent0 {
diff --git a/packages/notebook/style/not-trusted-icon.svg b/packages/notebook/style/not-trusted-icon.svg
index e3de1ed45dd9..a235b32b5495 100644
--- a/packages/notebook/style/not-trusted-icon.svg
+++ b/packages/notebook/style/not-trusted-icon.svg
@@ -1,5 +1,5 @@
 <svg viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path class="jp-icon" d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.33319 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(3 3)" stroke="#333333" stroke-width="2"/>
-    <path class="jp-icon" d="M7.36842 0L0 7.36479" transform="translate(9.31592 9.32031)" stroke="#333333" stroke-width="2"/>
-    <path class="jp-icon" d="M7.36842 0L0 7.36479" transform="translate(9.31592 16.6836) scale(1 -1)" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon-stroke" d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.33319 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(3 3)" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon-stroke" d="M7.36842 0L0 7.36479" transform="translate(9.31592 9.32031)" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon-stroke" d="M7.36842 0L0 7.36479" transform="translate(9.31592 16.6836) scale(1 -1)" stroke="#333333" stroke-width="2"/>
 </svg>
diff --git a/packages/notebook/style/trusted-icon.svg b/packages/notebook/style/trusted-icon.svg
index b7ae40ec21c9..a0624634ddba 100644
--- a/packages/notebook/style/trusted-icon.svg
+++ b/packages/notebook/style/trusted-icon.svg
@@ -1,4 +1,4 @@
 <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path class="jp-icon" d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.3332 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(2 3)" stroke="#333333" stroke-width="2"/>
-    <path class="jp-icon" d="M2.86015 4.86535L0.726549 2.99959L0 3.63045L2.86015 6.13157L8 0.630872L7.27857 0L2.86015 4.86535Z" transform="translate(8 9.86719)" fill="#333333" stroke="#333333"/>
+    <path class="jp-icon-stroke" d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.3332 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(2 3)" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon-fill jp-icon-stroke" d="M2.86015 4.86535L0.726549 2.99959L0 3.63045L2.86015 6.13157L8 0.630872L7.27857 0L2.86015 4.86535Z" transform="translate(8 9.86719)" fill="#333333" stroke="#333333"/>
 </svg>
diff --git a/packages/statusbar/src/components/icon.tsx b/packages/statusbar/src/components/icon.tsx
index 7df97886c34f..01e2bf4d908f 100644
--- a/packages/statusbar/src/components/icon.tsx
+++ b/packages/statusbar/src/components/icon.tsx
@@ -64,17 +64,3 @@ export function SVGIconItem(
   const { SVG, className, offset, ...rest } = props;
   return <SVG className={classes(className, style(icon(offset)))} {...rest} />;
 }
-
-export function SVGInputItem(
-  props: SVGIconItem.IProps &
-    React.HTMLAttributes<SVGElement> &
-    React.HTMLAttributes<HTMLInputElement>
-): React.ReactElement<SVGIconItem.IProps> {
-  const { SVG, className, ...rest } = props;
-  return (
-    <SVG
-      className={classes(className, style(icon({ x: 0, y: 0 })))}
-      {...rest}
-    />
-  );
-}
diff --git a/packages/statusbar/src/components/lineForm.tsx b/packages/statusbar/src/components/lineForm.tsx
new file mode 100644
index 000000000000..956916491f4d
--- /dev/null
+++ b/packages/statusbar/src/components/lineForm.tsx
@@ -0,0 +1,49 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import React, { ComponentType, HTMLAttributes } from 'react';
+
+import {
+  lineFormButtonDiv,
+  lineFormButtonIcon,
+  lineFormButton
+} from '../style/lineForm';
+
+/**
+ * A namespace for LineFormButtonItem statics.
+ */
+export namespace LineFormButtonItem {
+  /**
+   * Props for an LineFormButtonItem
+   */
+  export interface IProps {
+    /**
+     * The inline svg
+     */
+    SVG: ComponentType<HTMLAttributes<SVGElement>>;
+
+    /**
+     * The input type
+     */
+    type: string;
+
+    /**
+     * The input value
+     */
+    value: string;
+  }
+}
+
+export function LineFormButtonItem(
+  props: LineFormButtonItem.IProps &
+    React.HTMLAttributes<SVGElement> &
+    React.HTMLAttributes<HTMLInputElement>
+): React.ReactElement<LineFormButtonItem.IProps> {
+  const { SVG, type, value, ...rest } = props;
+  return (
+    <div className={lineFormButtonDiv}>
+      <SVG className={lineFormButtonIcon} {...rest} />
+      <input type={type} className={lineFormButton} value={value} />
+    </div>
+  );
+}
diff --git a/packages/statusbar/src/defaults/lineCol.tsx b/packages/statusbar/src/defaults/lineCol.tsx
index 68969f043d88..6b881f336c1f 100644
--- a/packages/statusbar/src/defaults/lineCol.tsx
+++ b/packages/statusbar/src/defaults/lineCol.tsx
@@ -7,18 +7,19 @@ import { VDomRenderer, VDomModel, ReactWidget } from '@jupyterlab/apputils';
 
 import { CodeEditor } from '@jupyterlab/codeeditor';
 
-import { interactiveItem, showPopup, Popup, TextItem } from '..';
+import { classes } from 'typestyle/lib';
+
+import { interactiveItem, Popup, showPopup, TextItem } from '..';
 
 import {
   lineFormWrapper,
   lineFormInput,
   lineFormSearch,
   lineFormWrapperFocusWithin,
-  lineFormCaption,
-  lineFormButton
+  lineFormCaption
 } from '../style/lineForm';
 
-import { classes } from 'typestyle/lib';
+import { LineFormButtonItem } from '../components/lineForm';
 
 import LineFormIcon from '../../style/line-form.svg';
 
@@ -113,15 +114,7 @@ class LineFormComponent extends React.Component<
                 this._textInput = input;
               }}
             />
-
-            <div>
-              <LineFormIcon />
-              <input
-                type="submit"
-                className={classes(lineFormButton)}
-                value=""
-              />
-            </div>
+            <LineFormButtonItem SVG={LineFormIcon} type="submit" value="" />
           </div>
           <label className={lineFormCaption}>
             Go to line number between 1 and {this.props.maxLine}
diff --git a/packages/statusbar/src/style/lineForm.ts b/packages/statusbar/src/style/lineForm.ts
index 0279898798f8..37b12d548034 100644
--- a/packages/statusbar/src/style/lineForm.ts
+++ b/packages/statusbar/src/style/lineForm.ts
@@ -2,6 +2,7 @@
 // Distributed under the terms of the Modified BSD License.
 
 import { style } from 'typestyle/lib';
+import { NestedCSSProperties } from 'typestyle/lib/types';
 
 export const hoverItem = style({
   boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)'
@@ -22,21 +23,39 @@ export const lineFormCaption = style({
   color: 'var(--jp-ui-font-color0)'
 });
 
-export const lineFormButton = style({
-  color: 'white',
+export const baseLineForm: NestedCSSProperties = {
   border: 'none',
   borderRadius: '0px',
-  backgroundColor: 'var(--jp-brand-color1)',
   position: 'absolute',
+  backgroundSize: '16px',
+  backgroundRepeat: 'no-repeat',
+  backgroundPosition: 'center',
+  outline: 'none',
+  top: '0px',
+  right: '0px'
+};
+
+export const lineFormButtonDiv = style(baseLineForm, {
   top: '4px',
   right: '8px',
   height: '24px',
-  width: '12px',
   padding: '0px 12px',
-  backgroundSize: '16px',
-  backgroundRepeat: 'no-repeat',
-  backgroundPosition: 'center',
-  outline: 'none'
+  width: '12px'
+});
+
+export const lineFormButtonIcon = style(baseLineForm, {
+  backgroundColor: 'var(--jp-brand-color1)',
+  height: '100%',
+  width: '100%',
+  boxSizing: 'border-box',
+  padding: '4px 6px'
+});
+
+export const lineFormButton = style(baseLineForm, {
+  backgroundColor: 'transparent',
+  height: '100%',
+  width: '100%',
+  boxSizing: 'border-box'
 });
 
 export const lineFormWrapper = style({
diff --git a/packages/statusbar/style/kernel-icon.svg b/packages/statusbar/style/kernel-icon.svg
index 28ca3f4e80d9..2125dad94c08 100644
--- a/packages/statusbar/style/kernel-icon.svg
+++ b/packages/statusbar/style/kernel-icon.svg
@@ -1,6 +1,6 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect width="24" height="24" fill="black" fill-opacity="0"/>
     <rect width="18" height="20" fill="black" fill-opacity="0" transform="translate(3 2)"/>
-    <path class="jp-icon" d="M4.10885 6.74135C4.20452 6.21505 4.39041 5.72544 4.80634 5.09319C5.35203 4.43482 6.35067 3.89653 7.68975 3.52838C9.02471 3.16136 10.5654 3 11.9998 3C13.4341 3 14.9749 3.16136 16.3098 3.52838C17.649 3.89655 18.6477 4.43488 19.1933 5.0933C19.6095 5.72557 19.7955 6.21514 19.8912 6.74139C19.9967 7.32185 20 7.97294 20 9C20 9.35129 19.7844 10.7386 19.2911 12.4034C18.8013 14.0565 18.0953 15.7799 17.2191 16.8753C16.7844 17.4188 16.3844 17.8059 16.0618 18.0944C15.9489 18.1953 15.8534 18.2774 15.7609 18.3569C15.7136 18.3976 15.6672 18.4375 15.6196 18.4789C15.5062 18.5777 15.3431 18.7207 15.2198 18.8745C14.9711 19.1847 14.7469 19.4839 14.5613 19.7317C14.4709 19.8523 14.3897 19.9607 14.3193 20.0523C14.0816 20.3611 13.9259 20.5338 13.777 20.6516C13.5455 20.8348 13.1949 21 11.9998 21C10.8047 21 10.4542 20.8348 10.2229 20.6517C10.074 20.5339 9.91841 20.3612 9.68072 20.0523C9.61032 19.9609 9.52922 19.8526 9.43901 19.7322C9.25332 19.4843 9.02907 19.1849 8.78025 18.8745C8.5646 18.6055 8.27898 18.3643 8.04285 18.1648C7.98552 18.1164 7.93111 18.0704 7.88133 18.0271C7.58713 17.7713 7.22852 17.4348 6.78084 16.8753C5.90445 15.7799 5.19851 14.0565 4.70872 12.4034C4.21548 10.7387 4 9.35134 4 9C4 7.97301 4.00333 7.32185 4.10885 6.74135Z" stroke="#333333" stroke-width="2"/>
-    <path class="jp-icon" d="M15.9999 18C15.9999 19 14 22 12 22C10 22 8 19 8 18C8 14.9624 10.067 11 12 11C13.933 11 15.9999 14.9624 15.9999 18Z" fill="#333333"/>
+    <path class="jp-icon-stroke" d="M4.10885 6.74135C4.20452 6.21505 4.39041 5.72544 4.80634 5.09319C5.35203 4.43482 6.35067 3.89653 7.68975 3.52838C9.02471 3.16136 10.5654 3 11.9998 3C13.4341 3 14.9749 3.16136 16.3098 3.52838C17.649 3.89655 18.6477 4.43488 19.1933 5.0933C19.6095 5.72557 19.7955 6.21514 19.8912 6.74139C19.9967 7.32185 20 7.97294 20 9C20 9.35129 19.7844 10.7386 19.2911 12.4034C18.8013 14.0565 18.0953 15.7799 17.2191 16.8753C16.7844 17.4188 16.3844 17.8059 16.0618 18.0944C15.9489 18.1953 15.8534 18.2774 15.7609 18.3569C15.7136 18.3976 15.6672 18.4375 15.6196 18.4789C15.5062 18.5777 15.3431 18.7207 15.2198 18.8745C14.9711 19.1847 14.7469 19.4839 14.5613 19.7317C14.4709 19.8523 14.3897 19.9607 14.3193 20.0523C14.0816 20.3611 13.9259 20.5338 13.777 20.6516C13.5455 20.8348 13.1949 21 11.9998 21C10.8047 21 10.4542 20.8348 10.2229 20.6517C10.074 20.5339 9.91841 20.3612 9.68072 20.0523C9.61032 19.9609 9.52922 19.8526 9.43901 19.7322C9.25332 19.4843 9.02907 19.1849 8.78025 18.8745C8.5646 18.6055 8.27898 18.3643 8.04285 18.1648C7.98552 18.1164 7.93111 18.0704 7.88133 18.0271C7.58713 17.7713 7.22852 17.4348 6.78084 16.8753C5.90445 15.7799 5.19851 14.0565 4.70872 12.4034C4.21548 10.7387 4 9.35134 4 9C4 7.97301 4.00333 7.32185 4.10885 6.74135Z" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon-fill" d="M15.9999 18C15.9999 19 14 22 12 22C10 22 8 19 8 18C8 14.9624 10.067 11 12 11C13.933 11 15.9999 14.9624 15.9999 18Z" fill="#333333"/>
 </svg>
diff --git a/packages/statusbar/style/terminal-icon.svg b/packages/statusbar/style/terminal-icon.svg
index af4ddb315612..8b0d86556e3c 100644
--- a/packages/statusbar/style/terminal-icon.svg
+++ b/packages/statusbar/style/terminal-icon.svg
@@ -1,4 +1,4 @@
 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect class="jp-icon" width="20" height="20" transform="translate(2 2)" fill="#333333"/>
+    <rect class="jp-icon-fill" width="20" height="20" transform="translate(2 2)" fill="#333333"/>
     <path class="jp-icon-accent1" d="M5.05664 8.76172C5.05664 8.59766 5.03125 8.45312 4.98047 8.32812C4.93359 8.19922 4.85547 8.08203 4.74609 7.97656C4.64062 7.87109 4.5 7.77539 4.32422 7.68945C4.15234 7.59961 3.94336 7.51172 3.69727 7.42578C3.30273 7.28516 2.94336 7.13672 2.61914 6.98047C2.29492 6.82422 2.01758 6.64258 1.78711 6.43555C1.56055 6.22852 1.38477 5.98828 1.25977 5.71484C1.13477 5.4375 1.07227 5.10938 1.07227 4.73047C1.07227 4.39844 1.12891 4.0957 1.24219 3.82227C1.35547 3.54492 1.51562 3.30469 1.72266 3.10156C1.92969 2.89844 2.17969 2.73437 2.47266 2.60938C2.76562 2.48438 3.0918 2.4043 3.45117 2.36914V1.10938H4.38867V2.38086C4.74023 2.42773 5.05664 2.52344 5.33789 2.66797C5.61914 2.8125 5.85742 3.00195 6.05273 3.23633C6.25195 3.4668 6.4043 3.74023 6.50977 4.05664C6.61914 4.36914 6.67383 4.7207 6.67383 5.11133H5.04492C5.04492 4.63867 4.9375 4.28125 4.72266 4.03906C4.50781 3.79297 4.2168 3.66992 3.84961 3.66992C3.65039 3.66992 3.47656 3.69727 3.32812 3.75195C3.18359 3.80273 3.06445 3.87695 2.9707 3.97461C2.87695 4.06836 2.80664 4.17969 2.75977 4.30859C2.7168 4.4375 2.69531 4.57812 2.69531 4.73047C2.69531 4.88281 2.7168 5.01953 2.75977 5.14062C2.80664 5.25781 2.88281 5.36719 2.98828 5.46875C3.09766 5.57031 3.24023 5.66797 3.41602 5.76172C3.5918 5.85156 3.81055 5.94336 4.07227 6.03711C4.4668 6.18555 4.82422 6.33984 5.14453 6.5C5.46484 6.65625 5.73828 6.83984 5.96484 7.05078C6.19531 7.25781 6.37109 7.5 6.49219 7.77734C6.61719 8.05078 6.67969 8.375 6.67969 8.75C6.67969 9.09375 6.62305 9.4043 6.50977 9.68164C6.39648 9.95508 6.23438 10.1914 6.02344 10.3906C5.8125 10.5898 5.55859 10.75 5.26172 10.8711C4.96484 10.9883 4.63281 11.0645 4.26562 11.0996V12.248H3.33398V11.0996C3.00195 11.0684 2.67969 10.9961 2.36719 10.8828C2.05469 10.7656 1.77734 10.5977 1.53516 10.3789C1.29688 10.1602 1.10547 9.88477 0.960938 9.55273C0.816406 9.2168 0.744141 8.81445 0.744141 8.3457H2.37891C2.37891 8.62695 2.41992 8.86328 2.50195 9.05469C2.58398 9.24219 2.68945 9.39258 2.81836 9.50586C2.95117 9.61523 3.10156 9.69336 3.26953 9.74023C3.4375 9.78711 3.60938 9.81055 3.78516 9.81055C4.20312 9.81055 4.51953 9.71289 4.73438 9.51758C4.94922 9.32227 5.05664 9.07031 5.05664 8.76172ZM13.418 12.2715H8.07422V11H13.418V12.2715Z" transform="translate(3.95264 6)" fill="white"/>
 </svg>