styling! also rename editComment to something more generic

alaoy0225 · May 9, 2019 · 0931285 · 0931285
1 parent 54b4815
commit 0931285
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 52 deletions.
diff --git a/lib/views/actionable-review-view.js b/lib/views/actionable-review-view.js
@@ -32,7 +32,7 @@ export default class ActionableReviewView extends React.Component {
     buffer.setText(this.props.originalContent.body);
 
     return (
-      <div className={cx('github-Review-editComment', {'github-Review-editComment--disabled': this.props.isPosting})}>
+      <div className={cx('github-Review-editable', {'github-Review-editable--disabled': this.props.isPosting})}>
         <AtomTextEditor
           buffer={buffer}
           lineNumberGutterVisible={false}
@@ -41,9 +41,9 @@ export default class ActionableReviewView extends React.Component {
           readOnly={this.props.isPosting}
           refModel={this.refEditor}
         />
-        <footer className="github-Review-editComment-footer">
+        <footer className="github-Review-editable-footer">
           <button
-            className="github-Review-editCommentCancelButton btn btn-sm"
+            className="github-Review-editableCancelButton btn btn-sm"
             title="Cancel editing comment"
             disabled={this.props.isPosting}
             onClick={() => this.onCancel(buffer.getText() || '')}>

diff --git a/lib/views/reviews-view.js b/lib/views/reviews-view.js
@@ -268,48 +268,49 @@ export default class ReviewsView extends React.Component {
     const author = review.author || GHOST_USER;
 
     return (
-      <ActionableReviewView
-        key={review.id}
-        originalContent={review}
-        confirm={this.props.confirm}
-        contentUpdater={() => {}}
-        render={showActionsMenu => {
-          return (
-            <div className="github-ReviewSummary">
-              <header className="github-Review-header">
-                <div className="github-Review-header-authorData">
-                  <span className={`github-ReviewSummary-icon icon ${icon}`} />
-                  <img className="github-ReviewSummary-avatar"
-                    src={author.avatarUrl} alt={author.login}
+      <div className="github-ReviewSummary" key={review.id}>
+        <ActionableReviewView
+          originalContent={review}
+          confirm={this.props.confirm}
+          contentUpdater={() => {}}
+          render={showActionsMenu => {
+            return (
+              <Fragment>
+                <header className="github-Review-header">
+                  <div className="github-Review-header-authorData">
+                    <span className={`github-ReviewSummary-icon icon ${icon}`} />
+                    <img className="github-ReviewSummary-avatar"
+                      src={author.avatarUrl} alt={author.login}
+                    />
+                    <a className="github-ReviewSummary-username" href={author.url}>{author.login}</a>
+                    <span className="github-ReviewSummary-type">{copy}</span>
+                    {this.renderEditedLink(review)}
+                    {this.renderAuthorAssociation(review)}
+                  </div>
+                  <Timeago className="github-ReviewSummary-timeAgo" time={review.submittedAt} displayStyle="short" />
+                  <Octicon
+                    icon="ellipses"
+                    className="github-Review-actionsMenu"
+                    onClick={event => showActionsMenu(event, review, author)}
+                  />
+                </header>
+                <main className="github-ReviewSummary-comment">
+                  <GithubDotcomMarkdown
+                    html={review.bodyHTML}
+                    switchToIssueish={this.props.openIssueish}
+                    openIssueishLinkInNewTab={this.openIssueishLinkInNewTab}
+                  />
+                  <EmojiReactionsController
+                    reactable={review}
+                    tooltips={this.props.tooltips}
+                    reportMutationErrors={this.props.reportMutationErrors}
                   />
-                  <a className="github-ReviewSummary-username" href={author.url}>{author.login}</a>
-                  <span className="github-ReviewSummary-type">{copy}</span>
-                  {this.renderEditedLink(review)}
-                  {this.renderAuthorAssociation(review)}
-                </div>
-                <Timeago className="github-ReviewSummary-timeAgo" time={review.submittedAt} displayStyle="short" />
-                <Octicon
-                  icon="ellipses"
-                  className="github-Review-actionsMenu"
-                  onClick={event => showActionsMenu(event, review, author)}
-                />
-              </header>
-              <main className="github-ReviewSummary-comment">
-                <GithubDotcomMarkdown
-                  html={review.bodyHTML}
-                  switchToIssueish={this.props.openIssueish}
-                  openIssueishLinkInNewTab={this.openIssueishLinkInNewTab}
-                />
-                <EmojiReactionsController
-                  reactable={review}
-                  tooltips={this.props.tooltips}
-                  reportMutationErrors={this.props.reportMutationErrors}
-                />
-              </main>
-            </div>
-          );
-        }}
-      />
+                </main>
+              </Fragment>
+            );
+          }}
+        />
+      </div>
     );
   }
 

diff --git a/styles/review.less b/styles/review.less
@@ -15,6 +15,13 @@
   overflow-y: hidden;
   height: 100%;
 
+  atom-text-editor {
+    padding: @component-padding/2;
+    border-top: 1px solid @base-border-color;
+    border-bottom: 1px solid @base-border-color;
+    border-radius: @component-border-radius;
+  }
+
   // Top Header ------------------------------------------
 
   &-topHeader {
@@ -333,12 +340,6 @@
 
   // Diff ------------------
 
-  atom-text-editor {
-    padding: @component-padding/2;
-    border-top: 1px solid @base-border-color;
-    border-bottom: 1px solid @base-border-color;
-  }
-
   &-diffLine {
     padding: 0 @component-padding/2;
     line-height: 1.75;
@@ -418,6 +419,7 @@
 
   &-actionsMenu::before {
     margin-right: 0;
+    margin-left: @component-padding/2;
   }
 
   &-pendingBadge {
@@ -436,7 +438,7 @@
     }
   }
 
-  &-reply, &-editComment {
+  &-reply, &-editable {
     margin-top: @component-padding;
 
     atom-text-editor {
@@ -462,7 +464,7 @@
     padding: 0 2*@component-padding;
   }
 
-  &-editComment-footer {
+  &-editable-footer {
     margin: @component-padding/2 0 @component-padding 0;
     display: flex;
     justify-content: flex-end;