Merge pull request jupyterlab#54 from ellisonbg/style-updates

Minor styling updates.
teucer · Nov 7, 2019 · 0f91548 · 0f91548
2 parents bb509b9 + 4dd3ca0
commit 0f91548
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 29 deletions.
diff --git a/src/comments/commenting.tsx b/src/comments/commenting.tsx
@@ -248,7 +248,7 @@ export class CommentingWidget extends ReactWidget {
         className="jp-commenting-new-thread-button"
         onClick={() => this.setNewThreadActive(true)}
       >
-        <span className="jp-newThreadIcon jp-Icon" />
+        <span className="jp-comment-new-thread-icon jp-Icon jp-NbCommentIcon" />
         <span className="jp-commenting-new-thread-label">Start New Thread</span>
       </div>
     );

diff --git a/src/comments/components/AppBody.tsx b/src/comments/components/AppBody.tsx
@@ -73,7 +73,7 @@ export class AppBody extends React.Component<IAppBodyProps> {
       overflowX: 'hidden' as 'hidden',
       boxSizing: 'border-box' as 'border-box',
       justifyContent: 'center',
-      padding: '4px'
+      padding: '8px'
     },
     'jp-commenting-body-area-expanded': {
       width: '100%',
@@ -82,7 +82,7 @@ export class AppBody extends React.Component<IAppBodyProps> {
       overflowX: 'hidden' as 'hidden',
       boxSizing: 'border-box' as 'border-box',
       justifyContent: 'center',
-      padding: '4px'
+      padding: '8px'
     }
   };
 }
diff --git a/src/comments/components/AppHeader.tsx b/src/comments/components/AppHeader.tsx
@@ -67,11 +67,11 @@ export class AppHeader extends React.Component<IAppHeaderProps> {
     return (
       <div style={this.styles['jp-commenting-app-header-area']}>
         <div style={this.styles['jp-commenting-header-area']}>
-          <div style={this.styles['jp-commenting-back-arrow-area']}>
-            {this.props.cardExpanded && this.props.target !== undefined
-              ? this.getBackButton()
-              : ''}
-          </div>
+          {this.props.cardExpanded && this.props.target !== undefined && (
+            <div style={this.styles['jp-commenting-back-arrow-area']}>
+              {this.getBackButton()}
+            </div>
+          )}
           {this.getAppHeader(this.props.target)}
         </div>
         {this.shouldRenderOptions()}
@@ -272,7 +272,7 @@ export class AppHeader extends React.Component<IAppHeaderProps> {
       display: 'flex',
       flexShrink: 1,
       flexDirection: 'row' as 'row',
-      padding: '4px',
+      padding: '8px',
       minWidth: '52px'
     },
     'jp-commenting-back-arrow-area': {
@@ -293,7 +293,6 @@ export class AppHeader extends React.Component<IAppHeaderProps> {
       display: 'flex',
       flexDirection: 'row' as 'row',
       minWidth: '52px',
-      paddingLeft: '8px',
       flexShrink: 1
     },
     'jp-commenting-header-target-icon-area': {

diff --git a/src/comments/components/AppHeaderOptions.tsx b/src/comments/components/AppHeaderOptions.tsx
@@ -332,11 +332,13 @@ export class AppHeaderOptions extends React.Component<
       minWidth: '52px',
 
       textAlign: 'right' as 'right',
-      paddingLeft: '4px'
+      paddingLeft: '8px',
+      paddingRight: '8px'
     },
     'jp-commenting-header-options-showResolved-label-enable': {
       fontSize: 'var(--jp-ui-font-size1)',
-      color: 'var(--jp-ui-font-color1)'
+      color: 'var(--jp-ui-font-color1)',
+      fontWeight: '600'
     },
     'jp-commenting-header-options-showResolved-label-disable': {
       fontSize: 'var(--jp-ui-font-size1)',
@@ -350,7 +352,7 @@ export class AppHeaderOptions extends React.Component<
       height: '24px',
       display: 'flex',
       flexDirection: 'row' as 'row',
-      borderLeft: '1px solid var(--jp-border-color1)',
+      borderLeft: '1px solid var(--jp-border-color2)',
       width: '50%',
       minWidth: '50px',
       flexShrink: 1
@@ -365,7 +367,7 @@ export class AppHeaderOptions extends React.Component<
       whiteSpace: 'nowrap' as 'nowrap',
 
       height: '24px',
-      paddingLeft: '4px',
+      paddingLeft: '8px',
       paddingRight: '4px',
       minWidth: '10px',
       width: '100%'

diff --git a/src/comments/components/Comment.tsx b/src/comments/components/Comment.tsx
@@ -423,14 +423,13 @@ export class Comment extends React.Component<ICommentProps, ICommentStates> {
       display: 'flex',
       flexDirection: 'row' as 'row',
       boxSizing: 'border-box' as 'border-box',
-      padding: '4px',
-      background: 'var(--jp-layout-color1)'
+      background: 'var(--jp-layout-color1)',
+      marginBottom: '8px'
     },
     'jp-commenting-annotation-upper-area-resolved': {
       display: 'flex',
       flexDirection: 'row' as 'row',
       boxSizing: 'border-box' as 'border-box',
-      padding: '4px',
       background: 'var(--jp-layout-color2)'
     },
     'jp-commenting-annotation-info-area': {
@@ -439,7 +438,6 @@ export class Comment extends React.Component<ICommentProps, ICommentStates> {
       flexShrink: 1,
       minWidth: '52px',
       width: '100%',
-      paddingLeft: '4px',
       boxSizing: 'border-box' as 'border-box'
     },
     'jp-commenting-annotation-photo-area': {

diff --git a/src/comments/components/NewThreadCard.tsx b/src/comments/components/NewThreadCard.tsx
@@ -191,7 +191,7 @@ export class NewThreadCard extends React.Component<
     },
     'jp-commenting-text-input-area': {
       display: 'flex',
-      padding: '4px',
+      padding: '8px',
       width: '95%',
       height: '80px'
     },

diff --git a/src/comments/notebook.ts b/src/comments/notebook.ts
@@ -203,9 +203,9 @@ export class NotebookIndicators extends Widget implements IndicatorWidget {
 
       button.hidden = panel.activeCellIndex !== index;
 
-      button.style.minWidth = '20px';
-      button.style.minHeight = '20px';
-      button.style.backgroundSize = '20px';
+      button.style.minWidth = '16px';
+      button.style.minHeight = '16px';
+      button.style.backgroundSize = '16px';
       button.style.padding = '4px';
       button.style.cssFloat = 'right';
       button.style.cursor = this._provider.getState('newThreadActive')

diff --git a/style/index.css b/style/index.css
@@ -85,7 +85,7 @@
 .jp-commenting-header-options-area {
 	display: flex;
 	flex-direction: column;
-	border-top: 1px solid var(--jp-border-color1);
+	border-top: 1px solid var(--jp-border-color2);
 	box-sizing: border-box;
 }
 
@@ -180,11 +180,12 @@
 	border: 1px solid var(--jp-border-color2);
 	box-sizing: border-box;
 	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
-	margin-top: 4px;
+	margin-top: 8px;
+	padding: 8px;
 }
 
 .jp-commenting-thread-area:hover {
-	box-shadow: var(--jp-elevation-z4);
+	box-shadow: var(--jp-elevation-z2);
 }
 
 .jp-commenting-thread-area-no-hover {
@@ -194,6 +195,8 @@
 	border: 1px solid var(--jp-border-color2);
 	box-sizing: border-box;
 	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
+	margin-top: 8px;
+	padding: 8px;
 }
 
 /* New Thread */
@@ -208,17 +211,25 @@
 	background-size: contain;
 }
 
+.jp-comment-new-thread-icon {
+	width: 16px;
+	height: 16px;
+	margin-right: 8px;
+	background-size: 16px auto;
+}
+
 .jp-commenting-new-thread-button {
 	display: flex;
 	justify-content: space-between;
 	flex-direction: row;
-	border-radius: var(--jp-border-radius);
+	border-radius: 4px;
 	border: 1px solid var(--jp-border-color2);
 	box-sizing: border-box;
+	padding: 8px;
 }
 
 .jp-commenting-new-thread-button:hover {
-	box-shadow: var(--jp-elevation-z6);
+	box-shadow: var(--jp-elevation-z2);
 }
 
 .jp-commenting-new-thread-label {
@@ -228,9 +239,9 @@
 	overflow: hidden;
 	font-size: 13px;
 	color: var(--jp-ui-font-color1);
-	font-weight: bold;
 	text-overflow: ellipsis;
-	padding: 8px;
+	line-height: 20px;
+	height: 20px;
 }
 
 /* Text Area */