Tweaks to conversation details
This commit is contained in:
		
					parent
					
						
							
								dc5a17e962
							
						
					
				
			
			
				commit
				
					
						9ecf47594b
					
				
			
		
					 6 changed files with 23 additions and 9 deletions
				
			
		| 
						 | 
					@ -5,15 +5,15 @@
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@mixin font-title-1 {
 | 
					@mixin font-title-1 {
 | 
				
			||||||
  font-family: $inter;
 | 
					  font-family: $inter;
 | 
				
			||||||
  font-weight: 700;
 | 
					  font-weight: 600;
 | 
				
			||||||
  font-size: 28px;
 | 
					  font-size: 26px;
 | 
				
			||||||
  line-height: 34px;
 | 
					  line-height: 32px;
 | 
				
			||||||
  letter-spacing: -0.56px;
 | 
					  letter-spacing: -0.56px;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@mixin font-title-2 {
 | 
					@mixin font-title-2 {
 | 
				
			||||||
  font-family: $inter;
 | 
					  font-family: $inter;
 | 
				
			||||||
  font-weight: 700;
 | 
					  font-weight: 600;
 | 
				
			||||||
  font-size: 20px;
 | 
					  font-size: 20px;
 | 
				
			||||||
  line-height: 26px;
 | 
					  line-height: 26px;
 | 
				
			||||||
  letter-spacing: -0.34px;
 | 
					  letter-spacing: -0.34px;
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -220,9 +220,11 @@
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    &:focus {
 | 
					    &:focus {
 | 
				
			||||||
 | 
					      @include keyboard-mode {
 | 
				
			||||||
        box-shadow: 0 0 0 2px $color-ultramarine;
 | 
					        box-shadow: 0 0 0 2px $color-ultramarine;
 | 
				
			||||||
      }
 | 
					      }
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  &__icon {
 | 
					  &__icon {
 | 
				
			||||||
    @mixin button-icon($icon) {
 | 
					    @mixin button-icon($icon) {
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -7,7 +7,8 @@
 | 
				
			||||||
      align-items: center;
 | 
					      align-items: center;
 | 
				
			||||||
      display: flex;
 | 
					      display: flex;
 | 
				
			||||||
      flex-direction: column;
 | 
					      flex-direction: column;
 | 
				
			||||||
      margin: 0 0 24px 0;
 | 
					      margin: 0 0 20px 0;
 | 
				
			||||||
 | 
					      padding: 0 24px;
 | 
				
			||||||
      text-align: center;
 | 
					      text-align: center;
 | 
				
			||||||
      width: 100%;
 | 
					      width: 100%;
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -7,6 +7,15 @@
 | 
				
			||||||
    -webkit-line-clamp: 2;
 | 
					    -webkit-line-clamp: 2;
 | 
				
			||||||
    display: -webkit-box;
 | 
					    display: -webkit-box;
 | 
				
			||||||
    overflow: hidden;
 | 
					    overflow: hidden;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    a {
 | 
				
			||||||
 | 
					      @include light-theme {
 | 
				
			||||||
 | 
					        color: $color-gray-90;
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
 | 
					      @include dark-theme {
 | 
				
			||||||
 | 
					        color: $color-gray-02;
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  &__read-more {
 | 
					  &__read-more {
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -27,7 +27,10 @@ const createConversation = (): ConversationType =>
 | 
				
			||||||
    type: 'group',
 | 
					    type: 'group',
 | 
				
			||||||
    lastUpdated: 0,
 | 
					    lastUpdated: 0,
 | 
				
			||||||
    title: text('conversation title', 'Some Conversation'),
 | 
					    title: text('conversation title', 'Some Conversation'),
 | 
				
			||||||
    groupDescription: text('description', 'This is a group description'),
 | 
					    groupDescription: text(
 | 
				
			||||||
 | 
					      'description',
 | 
				
			||||||
 | 
					      'This is a group description. https://www.signal.org'
 | 
				
			||||||
 | 
					    ),
 | 
				
			||||||
  });
 | 
					  });
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
 | 
					const createProps = (overrideProps: Partial<Props> = {}): Props => ({
 | 
				
			||||||
| 
						 | 
					@ -36,7 +39,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
 | 
				
			||||||
  canEdit: false,
 | 
					  canEdit: false,
 | 
				
			||||||
  startEditing: action('startEditing'),
 | 
					  startEditing: action('startEditing'),
 | 
				
			||||||
  memberships: new Array(number('conversation members length', 0)),
 | 
					  memberships: new Array(number('conversation members length', 0)),
 | 
				
			||||||
  isGroup: false,
 | 
					  isGroup: true,
 | 
				
			||||||
  isMe: false,
 | 
					  isMe: false,
 | 
				
			||||||
  ...overrideProps,
 | 
					  ...overrideProps,
 | 
				
			||||||
});
 | 
					});
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -57,7 +57,6 @@ export const ConversationDetailsMediaList: React.ComponentType<Props> = ({
 | 
				
			||||||
          {i18n('ConversationDetailsMediaList--show-all')}
 | 
					          {i18n('ConversationDetailsMediaList--show-all')}
 | 
				
			||||||
        </button>
 | 
					        </button>
 | 
				
			||||||
      }
 | 
					      }
 | 
				
			||||||
      borderless
 | 
					 | 
				
			||||||
      title={i18n('ConversationDetailsMediaList--shared-media')}
 | 
					      title={i18n('ConversationDetailsMediaList--shared-media')}
 | 
				
			||||||
    >
 | 
					    >
 | 
				
			||||||
      <div className={bem('root')}>
 | 
					      <div className={bem('root')}>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue