From 85219d3827be722223f8c109dd08f38e731cefe0 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Wed, 24 Aug 2022 13:33:02 +1000 Subject: [PATCH] fix: scrollbar colors and some UI issues found by QA --- stylesheets/_global.scss | 8 ++++---- stylesheets/_session_left_pane.scss | 1 + ts/components/MemberListItem.tsx | 4 ++++ ts/components/basic/Text.tsx | 19 ++++++++++--------- ts/components/basic/YourSessionIDPill.tsx | 9 ++++----- .../leftpane/overlay/OverlayClosedGroup.tsx | 2 +- .../leftpane/overlay/OverlayMessage.tsx | 3 ++- .../overlay/choose-action/ContactRow.tsx | 2 +- .../choose-action/ContactsListWithBreaks.tsx | 2 +- ts/state/ducks/SessionTheme.tsx | 9 ++------- 10 files changed, 30 insertions(+), 29 deletions(-) diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss index 6e39e09cc..9cb556664 100644 --- a/stylesheets/_global.scss +++ b/stylesheets/_global.scss @@ -19,20 +19,20 @@ body { // scrollbars ::-webkit-scrollbar { - width: 9px; - height: 9px; + width: 6px; + height: 6px; } ::-webkit-scrollbar-thumb { background: var(--color-scroll-bar-thumb); - border: solid 2px var(--color-text-opposite); + border-radius: 20px; &:hover { background: $color-light-45; } } ::-webkit-scrollbar-track { - background: var(--color-scroll-bar-track); + background: none; } audio { diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss index 652e74d23..8eaa0cb36 100644 --- a/stylesheets/_session_left_pane.scss +++ b/stylesheets/_session_left_pane.scss @@ -89,6 +89,7 @@ $session-compose-margin: 20px; height: $main-view-header-height; padding-inline-end: 7px; transition: $session-transition-duration; + margin-bottom: var(--margins-md); .session-button { margin-inline-start: auto; diff --git a/ts/components/MemberListItem.tsx b/ts/components/MemberListItem.tsx index 46a5bf949..bf54d7eab 100644 --- a/ts/components/MemberListItem.tsx +++ b/ts/components/MemberListItem.tsx @@ -45,12 +45,16 @@ const StyledSessionMemberItem = styled.div<{ const StyledInfo = styled.div` display: flex; align-items: center; + min-width: 0; `; const StyledName = styled.span` font-weight: bold; margin-inline-start: var(--margins-md); margin-inline-end: var(--margins-md); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; `; const StyledCheckContainer = styled.div` diff --git a/ts/components/basic/Text.tsx b/ts/components/basic/Text.tsx index c7a4d9634..3dafd86cf 100644 --- a/ts/components/basic/Text.tsx +++ b/ts/components/basic/Text.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import styled from 'styled-components'; +import styled, { CSSProperties } from 'styled-components'; type TextProps = { text: string; @@ -28,6 +28,7 @@ export const Text = (props: TextProps) => { type SpacerProps = { size: 'lg' | 'md' | 'sm' | 'xs'; + style?: CSSProperties; }; const SpacerStyled = styled.div` @@ -54,19 +55,19 @@ const Spacer = (props: SpacerProps) => { return ; }; -export const SpacerLG = () => { - return ; +export const SpacerLG = (props: { style?: CSSProperties }) => { + return ; }; -export const SpacerMD = () => { - return ; +export const SpacerMD = (props: { style?: CSSProperties }) => { + return ; }; -export const SpacerSM = () => { - return ; +export const SpacerSM = (props: { style?: CSSProperties }) => { + return ; }; -export const SpacerXS = () => { - return ; +export const SpacerXS = (props: { style?: CSSProperties }) => { + return ; }; type H3Props = { diff --git a/ts/components/basic/YourSessionIDPill.tsx b/ts/components/basic/YourSessionIDPill.tsx index e5013a711..e1677f3b5 100644 --- a/ts/components/basic/YourSessionIDPill.tsx +++ b/ts/components/basic/YourSessionIDPill.tsx @@ -35,23 +35,22 @@ export const YourSessionIDPill = () => { }; const StyledYourSessionIDSelectable = styled.p` - user-select: text; + user-select: none; text-align: center; word-break: break-all; - padding: 0px var(--margins-lg); font-weight: 100; color: var(--color-text); - font-size: var(--font-size-sm); - padding: 0px var(--margins-md); `; export const YourSessionIDSelectable = () => { const ourSessionID = UserUtils.getOurPubKeyStrFromCache(); return ( - {ourSessionID} + {ourSessionID.slice(0, 33)} +
+ {ourSessionID.slice(33)} ); }; diff --git a/ts/components/leftpane/overlay/OverlayClosedGroup.tsx b/ts/components/leftpane/overlay/OverlayClosedGroup.tsx index 8936baf30..c07acfd3d 100644 --- a/ts/components/leftpane/overlay/OverlayClosedGroup.tsx +++ b/ts/components/leftpane/overlay/OverlayClosedGroup.tsx @@ -144,7 +144,7 @@ export const OverlayClosedGroup = () => { )} - + { container={true} justifyContent="space-between" alignItems="center" - padding="0 15px 0 0 " // YourSessionIDSelectable already has a left margin of 15px + width="100%" + padding="0 var(--margins-md) " // YourSessionIDSelectable already has a left margin of 15px > diff --git a/ts/components/leftpane/overlay/choose-action/ContactRow.tsx b/ts/components/leftpane/overlay/choose-action/ContactRow.tsx index a1883bc7e..853d235c1 100644 --- a/ts/components/leftpane/overlay/choose-action/ContactRow.tsx +++ b/ts/components/leftpane/overlay/choose-action/ContactRow.tsx @@ -64,7 +64,7 @@ const StyledBreak = styled.div` padding: 0 var(--margins-lg); color: var(--color-text-subtle); font-size: var(--font-size-md); - height: 25px; // should also be changed in rowHeight + height: 30px; // should also be changed in rowHeight border-bottom: 1px var(--color-session-border) solid; `; diff --git a/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx b/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx index ea3aa6eb1..1f8969cd0 100644 --- a/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx +++ b/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx @@ -93,7 +93,7 @@ const ContactListItemSection = () => { rowCount={length} rowHeight={ (params: Index) => - isString(directContactsByNameWithBreaks[params.index]) ? 25 : 64 // should also be changed in `ContactRowBreak` + isString(directContactsByNameWithBreaks[params.index]) ? 30 : 64 // should also be changed in `ContactRowBreak` } directContactsByNameWithBreaks={directContactsByNameWithBreaks} rowRenderer={renderRow} diff --git a/ts/state/ducks/SessionTheme.tsx b/ts/state/ducks/SessionTheme.tsx index 3abe5241c..0de913d81 100644 --- a/ts/state/ducks/SessionTheme.tsx +++ b/ts/state/ducks/SessionTheme.tsx @@ -41,8 +41,7 @@ const darkInputBackground = darkColorCellBackground; const darkFilterSessionText = 'none'; const darkUnreadBorder = `4px solid ${accentDarkTheme}`; -const darkScrollbarThumb = '#474646'; -const darkScrollbarTrack = '#1b1b1b'; +const darkScrollbarThumb = '#767676'; const darkFakeChatBubbleBg = '#212121'; const darkInboxBackground = '#171717'; @@ -116,7 +115,6 @@ export const switchHtmlToDarkTheme = () => { document.documentElement.style.setProperty('--border-unread', darkUnreadBorder); document.documentElement.style.setProperty('--color-scroll-bar-thumb', darkScrollbarThumb); - document.documentElement.style.setProperty('--color-scroll-bar-track', darkScrollbarTrack); document.documentElement.style.setProperty( '--color-fake-chat-bubble-background', darkFakeChatBubbleBg @@ -188,8 +186,7 @@ const lightInputBackground = '#efefef'; const lightFilterSessionText = 'brightness(0) saturate(100%)'; const lightUnreadBorder = `4px solid ${accentLightTheme}`; -const lightScrollbarThumb = '#474646'; -const lightScrollbarTrack = '#fcfcfc'; +const lightScrollbarThumb = '#6D6D6D'; const lightFakeChatBubbleBg = '#f5f5f5'; const lightInboxBackground = white; @@ -269,7 +266,6 @@ export const switchHtmlToLightTheme = () => { document.documentElement.style.setProperty('--border-unread', lightUnreadBorder); document.documentElement.style.setProperty('--color-scroll-bar-thumb', lightScrollbarThumb); - document.documentElement.style.setProperty('--color-scroll-bar-track', lightScrollbarTrack); document.documentElement.style.setProperty( '--color-fake-chat-bubble-background', lightFakeChatBubbleBg @@ -374,7 +370,6 @@ export const SessionGlobalStyles = createGlobalStyle` --color-pill-divider-text: ${lightColorPillDividerText}; --color-input-background: ${lightInputBackground}; --color-scroll-bar-thumb: ${lightScrollbarThumb}; - --color-scroll-bar-track: ${lightScrollbarTrack}; --color-fake-chat-bubble-background: ${lightFakeChatBubbleBg}; --color-inbox-background: ${lightInboxBackground}; --color-left-pane-overlay-background: ${lightLeftPaneOverlayBg};