Fix quote styles so they are uniform

signalapp · Oct 5, 2021 · 48aaf9e · 48aaf9e
1 parent 8a765da
commit 48aaf9e
Show file tree

Hide file tree

Showing 5 changed files with 3 additions and 43 deletions.
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
@@ -1442,23 +1442,17 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
   margin: {
     left: -6px;
     right: -6px;
-    top: -4px;
+    top: 3px;
     bottom: 5px;
   }
 }
 
-.module-quote-container--with-content-above {
-  margin-top: 3px;
-}
-
 .module-quote {
   @include button-reset;
   width: 100%;
 
   position: relative;
   border-radius: 4px;
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
 
   display: flex;
   flex-direction: row;
@@ -1479,11 +1473,6 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
   cursor: auto;
 }
 
-.module-quote--with-content-above {
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-}
-
 .module-quote--with-reference-warning {
   border-bottom-left-radius: 0px;
   border-bottom-right-radius: 0px;
@@ -1492,6 +1481,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
 .module-quote--outgoing {
   border-left-color: $color-steel;
   background-color: $color-steel;
+  margin-top: -4px;
 
   // To preserve contrast
   @include keyboard-mode {

diff --git a/ts/components/CompositionArea.tsx b/ts/components/CompositionArea.tsx
@@ -578,7 +578,6 @@ export const CompositionArea = ({
                 // and this is for conversation_view.
                 clearQuotedMessage();
               }}
-              withContentAbove
             />
           </div>
         )}

diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx
@@ -1061,7 +1061,6 @@ export class Message extends React.PureComponent<Props, State> {
   public renderQuote(): JSX.Element | null {
     const {
       conversationColor,
-      conversationType,
       customColor,
       direction,
       disableScroll,
@@ -1076,8 +1075,6 @@ export class Message extends React.PureComponent<Props, State> {
       return null;
     }
 
-    const withContentAbove =
-      conversationType === 'group' && direction === 'incoming';
     const { isViewOnce, referencedMessageNotFound } = quote;
 
     const clickHandler = disableScroll
@@ -1103,7 +1100,6 @@ export class Message extends React.PureComponent<Props, State> {
         isViewOnce={isViewOnce}
         referencedMessageNotFound={referencedMessageNotFound}
         isFromMe={quote.isFromMe}
-        withContentAbove={withContentAbove}
         doubleCheckMissingQuoteReference={() =>
           doubleCheckMissingQuoteReference(id)
         }

diff --git a/ts/components/conversation/Quote.stories.tsx b/ts/components/conversation/Quote.stories.tsx
@@ -145,10 +145,6 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
       ? overrideProps.text
       : 'A sample message from a pal'
   ),
-  withContentAbove: boolean(
-    'withContentAbove',
-    overrideProps.withContentAbove || false
-  ),
 });
 
 story.add('Outgoing by Another Author', () => {
@@ -196,19 +192,6 @@ story.add('Incoming/Outgoing Colors', () => {
   );
 });
 
-story.add('Content Above', () => {
-  const props = createProps({
-    withContentAbove: true,
-  });
-
-  return (
-    <>
-      <div>Content Above</div>
-      <Quote {...props} />
-    </>
-  );
-});
-
 story.add('Image Only', () => {
   const props = createProps({
     text: '',

diff --git a/ts/components/conversation/Quote.tsx b/ts/components/conversation/Quote.tsx
@@ -23,7 +23,6 @@ export type Props = {
   i18n: LocalizerType;
   isFromMe: boolean;
   isIncoming?: boolean;
-  withContentAbove: boolean;
   onClick?: () => void;
   onClose?: () => void;
   text: string;
@@ -440,20 +439,14 @@ export class Quote extends React.Component<Props, State> {
       isIncoming,
       onClick,
       referencedMessageNotFound,
-      withContentAbove,
     } = this.props;
 
     if (!validateQuote(this.props)) {
       return null;
     }
 
     return (
-      <div
-        className={classNames(
-          'module-quote-container',
-          withContentAbove ? 'module-quote-container--with-content-above' : null
-        )}
-      >
+      <div className="module-quote-container">
         <button
           type="button"
           onClick={this.handleClick}
@@ -465,7 +458,6 @@ export class Quote extends React.Component<Props, State> {
               ? `module-quote--incoming-${conversationColor}`
               : `module-quote--outgoing-${conversationColor}`,
             !onClick ? 'module-quote--no-click' : null,
-            withContentAbove ? 'module-quote--with-content-above' : null,
             referencedMessageNotFound
               ? 'module-quote--with-reference-warning'
               : null