fix: scrollbar colors and some UI issues found by QA
This commit is contained in:
parent
f87d902c98
commit
85219d3827
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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`
|
||||
|
|
|
@ -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<SpacerProps>`
|
||||
|
@ -54,19 +55,19 @@ const Spacer = (props: SpacerProps) => {
|
|||
return <SpacerStyled {...props} />;
|
||||
};
|
||||
|
||||
export const SpacerLG = () => {
|
||||
return <Spacer size="lg" />;
|
||||
export const SpacerLG = (props: { style?: CSSProperties }) => {
|
||||
return <Spacer size="lg" style={props.style} />;
|
||||
};
|
||||
|
||||
export const SpacerMD = () => {
|
||||
return <Spacer size="md" />;
|
||||
export const SpacerMD = (props: { style?: CSSProperties }) => {
|
||||
return <Spacer size="md" style={props.style} />;
|
||||
};
|
||||
export const SpacerSM = () => {
|
||||
return <Spacer size="sm" />;
|
||||
export const SpacerSM = (props: { style?: CSSProperties }) => {
|
||||
return <Spacer size="sm" style={props.style} />;
|
||||
};
|
||||
|
||||
export const SpacerXS = () => {
|
||||
return <Spacer size="xs" />;
|
||||
export const SpacerXS = (props: { style?: CSSProperties }) => {
|
||||
return <Spacer size="xs" style={props.style} />;
|
||||
};
|
||||
|
||||
type H3Props = {
|
||||
|
|
|
@ -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 (
|
||||
<StyledYourSessionIDSelectable data-testid="your-session-id">
|
||||
{ourSessionID}
|
||||
{ourSessionID.slice(0, 33)}
|
||||
<br />
|
||||
{ourSessionID.slice(33)}
|
||||
</StyledYourSessionIDSelectable>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -144,7 +144,7 @@ export const OverlayClosedGroup = () => {
|
|||
)}
|
||||
</StyledGroupMemberListContainer>
|
||||
|
||||
<SpacerLG />
|
||||
<SpacerLG style={{ flexShrink: 0 }} />
|
||||
|
||||
<SessionButton
|
||||
buttonColor={SessionButtonColor.Green}
|
||||
|
|
|
@ -118,7 +118,8 @@ export const OverlayMessage = () => {
|
|||
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
|
||||
>
|
||||
<YourSessionIDSelectable />
|
||||
<SessionIconButton iconSize="small" iconType="copy" onClick={copyOurSessionID} />
|
||||
|
|
|
@ -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;
|
||||
`;
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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};
|
||||
|
|
Loading…
Reference in New Issue