Feature/sc 27825/add to sheet2

static/css/s2.css

@@ -1055,8 +1055,6 @@ div.interfaceLinks-row a {
   background-color: rgba(1, 1, 1, 0.7);
 }
 .dialogModal {
-  width: 400px;
-  height: 388px;
   top: 129px;
   border: none;
   background: transparent;
@@ -5701,7 +5699,6 @@ body .ui-autocomplete.dictionary-toc-autocomplete .ui-menu-item a.ui-state-focus
   cursor: pointer;
   display: block;
   background-color: inherit;
-  margin-bottom: 14px;
 }
 .continuous .segment {
   display: inline;
@@ -5884,50 +5881,28 @@ body .ui-autocomplete.dictionary-toc-autocomplete .ui-menu-item a.ui-state-focus
   background-color: #444;
 }
 .basetext .segment.highlight,
-.sheetContent .segment.highlight .en,
-.sheetContent .segment.highlight .he,
-.sheetContent .textPreviewSegment.highlight,
 .editTextInfo .textPreviewSegment.highlight,
-.readerPanel.bilingual.heLeft .sheetContent .segment.highlight,
-.readerPanel.bilingual.heRight .sheetContent .segment.highlight,
 .editorContent .sheetItem.highlight,
 .editorContent .sheetItem.highlight .SheetSource .en,
 .editorContent .sheetItem.highlight .SheetSource::after
 {
   background-color: #F0F7FF;
 }
-.sheetContent .segment.highlight .linkCount .en,
-.sheetContent .segment.highlight .linkCount .he,
-.sheetContent .segment.highlight .segmentNumber .en,
-.sheetContent .segment.highlight .segmentNumber .he {
-  background-color: transparent;
-}
-.sheetContent .segment.highlight .en div,
-.sheetContent .segment.highlight .he div {
-  background-color: inherit;
-}
 .sheetContent .segment a {
   color: #4B71B7;
   cursor: pointer;
 }
 .sheetContent .segment .sourceContentText a {
   text-decoration: underline;
 }
-.readerPanel.bilingual.stacked .sheetContent .segment.highlight .he {
-  padding-bottom: 1px;
-}
 .basetext .segment.highlight .segmentNumber,
-.basetext .segment.highlight .linkCount,
-.sheetContent .segment.highlight .linkCount,
-.sheetContent .segment.highlight .segmentNumber {
+.basetext .segment.highlight .linkCount {
   background-color: transparent;
 }
-.sepia .basetext .segment.highlight,
-.sepia .sheetContent .segment.highlight {
+.sepia .basetext .segment.highlight {
   background-color: #E3E3E1;
 }
-.dark .basetext .segment.highlight,
-.dark .sheetContent .segment.highlight {
+.dark .basetext .segment.highlight {
   background-color: #444;
 }
 .textRange {
@@ -10268,6 +10243,38 @@ span.purim-emoji img{
     padding: 130px 0;
   }
 }
+.sheetContent .addToSheetPlus {
+	display: inline-flex;
+	justify-content: center;
+	align-items: flex-end;
+	width: 25px;
+	height: 25px;
+	background-color: green;
+	border-radius: 50%;
+	color: white;
+	font-size: 30px;
+	line-height: 1;
+	cursor: pointer;
+}
+.SheetOutsideBiText .addToSheetButton, .SheetSource .addToSheetButton {
+  margin-inline-start: 15px;
+  padding-block-start: 10px;
+  padding-block-end: 10px;
+}
+.SheetComment .addToSheetButton, .SheetOutsideText .addToSheetButton {
+  margin-block-start: -10px;
+  margin-block-end: 30px;
+}
+.sheetContent .addToSheetText {
+  --english-font: var(--english-sans-serif-font-family);
+  --hebrew-font: var(--hebrew-sans-serif-font-family);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 18.75px;
+  color: var(--dark-grey);
+  margin-inline-start: 10px;
+  cursor: pointer;
+}
 @media screen and (min-width: 900px) {
   .contentInner .table {
     display: flex;
@@ -10908,21 +10915,11 @@ section.SheetOutsideBiText {
 .interface-hebrew section.SheetOutsideBiText .sheetItem > .en {
   padding: 15px 16px 15px 20px;
 }
-.readerPanel.bilingual.stacked .sheetContent section.SheetSource .segment.highlight .he,
-.readerPanel.bilingual.stacked .sheetContent section.SheetOutsideBiText .segment.highlight .he {
-  padding-bottom: 15px;
-}
-section.SheetSource.highlight,
-section.SheetOutsideBiText.highlight {
-  background-color: #E9E9E7;
-}
 section.SheetSource .segmentNumber,
 section.SheetSource .SheetOutsideBiText {
   display: none;
 }
-.sheetContent section.SheetSource.highlight .sheetItem.segment.highlight .sourceContentText,
 .sheetContent section.SheetSource .sheetItem.segment .sourceContentText,
-.sheetContent section.SheetOutsideBiText.highlight .sheetItem.segment.highlight .sourceContentText,
 .sheetContent section.SheetOutsideBiText .sheetItem.segment .sourceContentText {
   margin: 0;
 }

static/js/AddToSourceSheet.jsx

@@ -299,7 +299,7 @@ class AddToSourceSheetBox extends Component {
           <span className="int-en noselect">Add to Sheet</span>
           <span className="int-he noselect">הוספה לדף המקורות</span>
         </div>
-        <GDocAdvertBox/>
+        {!this.props.hideGDocAdvert && <GDocAdvertBox/>}
       </div>);
   }
 }

static/js/ReaderPanel.jsx

@@ -692,6 +692,7 @@ class ReaderPanel extends Component {
           key={"sheet-"+this.state.sheetID}
           multiPanel={this.props.multiPanel}
           highlightedNode={this.state.highlightedNode}
+          highlightedRefs={this.state.highlightedRefs}
           highlightedRefsInSheet={this.state.highlightedRefsInSheet}
           scrollToHighlighted={this.state.scrollToHighlighted}
           onRefClick={this.handleCitationClick}

static/js/sheets/Sheet.jsx

@@ -98,7 +98,8 @@ class Sheet extends Component {
                   onRefClick={this.props.onRefClick}
                   handleClick={this.handleClick}
                   sheetSourceClick={this.props.onSegmentClick}
-                  highlightedNode={this.props.highlightedNode}
+                  highlightedNode={this.props.highlightedNode} // for example, "3" -- the third node in the sheet
+                  highlightedRefs={this.props.highlightedRefs} // for example, ["Genesis 1:1"] or ["Sheet 4:3"] -- the actual source
                   highlightedRefsInSheet={this.props.highlightedRefsInSheet}
                   scrollToHighlighted={this.props.scrollToHighlighted}
                   editable={editable}