From 2d292a35825f3ca745619b1917a3f9d615065e7c Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 12 Sep 2022 17:03:32 +1000 Subject: [PATCH] feat: made more progress with left pane and left more comments resolved any issues post merge of ui-redesigns --- preload.js | 2 +- stylesheets/_session.scss | 2 +- ts/components/MemberListItem.tsx | 7 +- ts/components/basic/SessionRadio.tsx | 19 ++---- ts/components/basic/SessionToggle.tsx | 5 +- ts/components/basic/Text.tsx | 2 +- ts/components/basic/YourSessionIDPill.tsx | 8 +-- ts/components/button/MenuButton.tsx | 8 +-- .../leftpane/LeftPaneMessageSection.tsx | 7 -- .../leftpane/overlay/OverlayClosedGroup.tsx | 4 +- .../leftpane/overlay/OverlayHeader.tsx | 14 ++-- .../overlay/OverlayMessageRequest.tsx | 66 +++++++++---------- ts/themes/SessionTheme.tsx | 20 +++--- 13 files changed, 77 insertions(+), 87 deletions(-) diff --git a/preload.js b/preload.js index eb964c2c3..43829eec0 100644 --- a/preload.js +++ b/preload.js @@ -29,7 +29,7 @@ window.sessionFeatureFlags = { useTestNet: Boolean( process.env.NODE_APP_INSTANCE && process.env.NODE_APP_INSTANCE.includes('testnet') ), - useSettingsThemeSwitcher: false, + useSettingsThemeSwitcher: true, debug: { debugFileServerRequests: false, debugNonSnodeRequests: false, diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 29688fad1..2095b5fbc 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -874,7 +874,7 @@ input { } &-disabled { - border: 1px solid var(--color-darker-gray-color) !important; + border: 1px solid var(--border-color) !important; } } } diff --git a/ts/components/MemberListItem.tsx b/ts/components/MemberListItem.tsx index 3b06be785..2ac831d7b 100644 --- a/ts/components/MemberListItem.tsx +++ b/ts/components/MemberListItem.tsx @@ -39,8 +39,11 @@ const StyledSessionMemberItem = styled.button<{ props.selected && 'var(--color-conversation-item-selected) !important'}; :not(:last-child) { - border-bottom: var(--border-session); + border-bottom: var(--border-color); } + + background-color: ${props => + props.selected ? 'var(--conversation-tab-background-selected-color) !important' : null}; `; const StyledInfo = styled.div` @@ -98,7 +101,7 @@ export const MemberListItem = (props: { style={ !inMentions && !disableBg ? { - backgroundColor: 'var(--color-cell-background)', + backgroundColor: 'var(--background-secondary-color)', } : {} } diff --git a/ts/components/basic/SessionRadio.tsx b/ts/components/basic/SessionRadio.tsx index 6db7d945a..e969f4b5d 100644 --- a/ts/components/basic/SessionRadio.tsx +++ b/ts/components/basic/SessionRadio.tsx @@ -1,6 +1,5 @@ import React, { ChangeEvent } from 'react'; import styled from 'styled-components'; -import { black } from '../../state/ducks/SessionTheme'; import { Flex } from '../basic/Flex'; // tslint:disable: react-unused-props-and-state @@ -16,7 +15,7 @@ type Props = { const StyledInput = styled.input<{ filledSize: number; outlineOffset: number; - selectedColor: string; + selectedColor?: string; }>` opacity: 0; position: absolute; @@ -25,12 +24,11 @@ const StyledInput = styled.input<{ height: ${props => props.filledSize + props.outlineOffset}px; :checked + label:before { - background: ${props => props.selectedColor}; + background: ${props => (props.selectedColor ? props.selectedColor : 'var(--primary-color)')}; } `; const StyledLabel = styled.label<{ - selectedColor: string; filledSize: number; outlineOffset: number; beforeMargins?: string; @@ -44,7 +42,7 @@ const StyledLabel = styled.label<{ transition: var(--default-duration); padding: ${props => props.filledSize}px; - outline: var(--color-text) solid 1px; + outline: var(--text-primary-color) solid 1px; border: none; outline-offset: ${props => props.outlineOffset}px; ${props => props.beforeMargins && `margin: ${props.beforeMargins};`}; @@ -62,7 +60,6 @@ export const SessionRadio = (props: Props) => { } } - const selectedColor = 'var(--color-accent)'; const filledSize = 15 / 2; const outlineOffset = 2; @@ -77,17 +74,15 @@ export const SessionRadio = (props: Props) => { onChange={clickHandler} filledSize={filledSize * 2} outlineOffset={outlineOffset} - selectedColor={selectedColor} /> {label} @@ -101,13 +96,13 @@ const StyledInputOutlineSelected = styled(StyledInput)` outline: none; } :checked + label:before { - outline: var(--color-text) solid 1px; + outline: var(--text-primary-color) solid 1px; } `; const StyledLabelOutlineSelected = styled(StyledLabel)<{ selectedColor: string }>` :before { - background: ${props => props.selectedColor}; - outline: ${black} solid 1px; + background: ${props => (props.selectedColor ? props.selectedColor : 'var(--primary-color)')}; + outline: var(--transparent-color) solid 1px; } `; diff --git a/ts/components/basic/SessionToggle.tsx b/ts/components/basic/SessionToggle.tsx index 03a576dd7..2dd1a9beb 100644 --- a/ts/components/basic/SessionToggle.tsx +++ b/ts/components/basic/SessionToggle.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { updateConfirmModal } from '../../state/ducks/modalDialog'; import { useDispatch } from 'react-redux'; import styled from 'styled-components'; -import { white } from '../../state/ducks/SessionTheme'; +import { whiteColor } from '../../themes/SessionTheme'; const StyledKnob = styled.div<{ active: boolean }>` position: absolute; @@ -11,7 +11,8 @@ const StyledKnob = styled.div<{ active: boolean }>` height: 21px; width: 21px; border-radius: 28px; - background-color: ${white}; + /* TODO Theming update */ + background-color: ${whiteColor}; box-shadow: ${props => props.active ? '-2px 1px 3px rgba(0, 0, 0, 0.15)' : '2px 1px 3px rgba(0, 0, 0, 0.15);'}; diff --git a/ts/components/basic/Text.tsx b/ts/components/basic/Text.tsx index 3dafd86cf..dfb683a5f 100644 --- a/ts/components/basic/Text.tsx +++ b/ts/components/basic/Text.tsx @@ -16,7 +16,7 @@ const StyledDefaultText = styled.div` padding: ${props => (props.padding ? props.padding : '')}; text-align: ${props => (props.textAlign ? props.textAlign : '')}; font-family: var(--font-default); - color: ${props => (props.subtle ? 'var(--color-text-subtle)' : 'var(--color-text)')}; + color: ${props => (props.subtle ? 'var(--text-secondary-color)' : 'var(--text-primary-color)')}; white-space: ${props => (props.ellipsisOverflow ? 'nowrap' : null)}; overflow: ${props => (props.ellipsisOverflow ? 'hidden' : null)}; text-overflow: ${props => (props.ellipsisOverflow ? 'ellipsis' : null)}; diff --git a/ts/components/basic/YourSessionIDPill.tsx b/ts/components/basic/YourSessionIDPill.tsx index f949b9313..903bbf672 100644 --- a/ts/components/basic/YourSessionIDPill.tsx +++ b/ts/components/basic/YourSessionIDPill.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components'; import { UserUtils } from '../../session/utils'; const StyledPillDividerLine = styled.div` - border-bottom: 1px solid var(--color-pill-divider); + border-bottom: 1px solid var(--border-color); line-height: 0.1em; flex-grow: 1; height: 1px; @@ -13,8 +13,8 @@ const StyledPillDividerLine = styled.div` const StyledPillSpan = styled.span` padding: 5px 15px; border-radius: 50px; - color: var(--color-pill-divider-text); - border: 1px solid var(--color-pill-divider); + color: var(--text-primary-color); + border: 1px solid var(--border-color); `; const StyledPillDivider = styled.div` @@ -39,8 +39,8 @@ const StyledYourSessionIDSelectable = styled.p` text-align: center; word-break: break-all; font-weight: 300; - color: var(--color-text); font-size: var(--font-size-sm); + color: var(--text-primary-color); `; export const YourSessionIDSelectable = () => { diff --git a/ts/components/button/MenuButton.tsx b/ts/components/button/MenuButton.tsx index 4ef998b49..254e0a732 100644 --- a/ts/components/button/MenuButton.tsx +++ b/ts/components/button/MenuButton.tsx @@ -27,12 +27,6 @@ const StyledMenuButton = styled.button` } `; -const StyledMenuInput = styled.input` - opacity: 0; - width: 0; - height: 0; -`; - /** * This is the Session Menu Botton. i.e. the button on top of the conversation list to start a new conversation. * It has two state: selected or not and so we use an checkbox input to keep the state in sync. @@ -57,8 +51,8 @@ export const MenuButton = () => { '--fg-color': 'white', } as CSSProperties } + onClick={onClickFn} > - { const overlayMode = useSelector(getOverlayMode); diff --git a/ts/components/leftpane/overlay/OverlayClosedGroup.tsx b/ts/components/leftpane/overlay/OverlayClosedGroup.tsx index 6c606f603..f2145191f 100644 --- a/ts/components/leftpane/overlay/OverlayClosedGroup.tsx +++ b/ts/components/leftpane/overlay/OverlayClosedGroup.tsx @@ -22,7 +22,7 @@ import { VALIDATION } from '../../../session/constants'; const StyledMemberListNoContacts = styled.div` font-family: var(--font-font-mono); - background: var(--color-cell-background); + background: var(--background-secondary-color); text-align: center; padding: 20px; `; @@ -32,7 +32,7 @@ const StyledGroupMemberListContainer = styled.div` width: 100%; max-height: 400px; overflow-y: auto; - border: var(--border-session); + border: var(--border-color); `; const NoContacts = () => { diff --git a/ts/components/leftpane/overlay/OverlayHeader.tsx b/ts/components/leftpane/overlay/OverlayHeader.tsx index 01765382b..9f7a66f84 100644 --- a/ts/components/leftpane/overlay/OverlayHeader.tsx +++ b/ts/components/leftpane/overlay/OverlayHeader.tsx @@ -6,10 +6,10 @@ import { Flex } from '../../basic/Flex'; import { SpacerSM } from '../../basic/Text'; import { SessionIconButton } from '../../icon'; -const StyledGreenBorder = styled.hr` +const StyledPrimaryBorder = styled.hr` position: absolute; - color: var(--color-accent); - background-color: var(--color-accent); + color: var(--primary-color); + background-color: var(--primary-color); height: 5px; left: -10px; @@ -19,7 +19,9 @@ const StyledGreenBorder = styled.hr` z-index: 1; `; -const StyledWhiteBorder = styled.hr` +const StyledBackgroundBorder = styled.hr` + color: var(--background-primary-color); + background-color: var(--background-primary-color); width: 100%; position: relative; height: 1px; @@ -63,9 +65,9 @@ export const OverlayHeader = ({ subtitle, title }: { title: string; subtitle: st {subtitle} - + - + ); }; diff --git a/ts/components/leftpane/overlay/OverlayMessageRequest.tsx b/ts/components/leftpane/overlay/OverlayMessageRequest.tsx index eafb262d3..7c4c7d37d 100644 --- a/ts/components/leftpane/overlay/OverlayMessageRequest.tsx +++ b/ts/components/leftpane/overlay/OverlayMessageRequest.tsx @@ -21,6 +21,39 @@ import { } from '../../../state/ducks/conversations'; import { updateConfirmModal } from '../../../state/ducks/modalDialog'; +const MessageRequestListPlaceholder = styled.div` + color: var(--conversation-tab-text-color); + margin-bottom: auto; +`; + +const MessageRequestListContainer = styled.div` + width: 100%; + overflow-y: auto; + border: var(--border-color); + margin-bottom: auto; +`; + +/** + * A request needs to be be unapproved and not blocked to be valid. + * @returns List of message request items + */ +const MessageRequestList = () => { + const conversationRequests = useSelector(getConversationRequests); + return ( + + {conversationRequests.map(conversation => { + return ( + + ); + })} + + ); +}; + export const OverlayMessageRequest = () => { useKey('Escape', closeOverlay); const dispatch = useDispatch(); @@ -116,36 +149,3 @@ export const OverlayMessageRequest = () => { ); }; - -const MessageRequestListPlaceholder = styled.div` - color: var(--color-text); - margin-bottom: auto; -`; - -const MessageRequestListContainer = styled.div` - width: 100%; - overflow-y: auto; - border: var(--border-session); - margin-bottom: auto; -`; - -/** - * A request needs to be be unapproved and not blocked to be valid. - * @returns List of message request items - */ -const MessageRequestList = () => { - const conversationRequests = useSelector(getConversationRequests); - return ( - - {conversationRequests.map(conversation => { - return ( - - ); - })} - - ); -}; diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx index 7dcd4e2e7..8bc48ce1d 100644 --- a/ts/themes/SessionTheme.tsx +++ b/ts/themes/SessionTheme.tsx @@ -4,7 +4,7 @@ import { createGlobalStyle } from 'styled-components'; import { hexColorToRGB } from '../util/hexColorToRGB'; import { COLORS, THEMES } from './colors'; -const whiteColor = '#ffffff'; +export const whiteColor = '#ffffff'; const whiteColorRGB = '255, 255, 255'; // we need rgb values if we want css variables within rgba const blackColor = '#000000'; const blackColorRGB = '0, 0, 0'; // we need rgb values if we want css variables within rgba @@ -456,13 +456,13 @@ export const SessionGlobalStyles = createGlobalStyle` /* New Theme Variables */ /* Colors */ - --green-color: ${COLORS.PRIMARY.GREEN}, - --blue-color: ${COLORS.PRIMARY.BLUE}, - --yellow-color: ${COLORS.PRIMARY.YELLOW}, - --pink-color: ${COLORS.PRIMARY.PINK}, - --purple-color: ${COLORS.PRIMARY.PURPLE}, - --orange-color: ${COLORS.PRIMARY.ORANGE}, - --red-color: ${COLORS.PRIMARY.RED}, + --green-color: ${COLORS.PRIMARY.GREEN}; + --blue-color: ${COLORS.PRIMARY.BLUE}; + --yellow-color: ${COLORS.PRIMARY.YELLOW}; + --pink-color: ${COLORS.PRIMARY.PINK}; + --purple-color: ${COLORS.PRIMARY.PURPLE}; + --orange-color: ${COLORS.PRIMARY.ORANGE}; + --red-color: ${COLORS.PRIMARY.RED}; /* TODO Theming this should be overridable */ --primary-color: ${THEMES.CLASSIC_LIGHT.PRIMARY}; --danger-color: ${COLORS.DANGER.LIGHT}; @@ -540,7 +540,7 @@ export const SessionGlobalStyles = createGlobalStyle` /* TODO Theming Consolidate with code */ /* Conversation Tab */ - /* This is also user for Overlay Tabs, Contact Rows, Convesation List Items, Message Search Results, Session Search Input?, Message Requests Banner etc. */ + /* This is also user for Overlay Tabs, Contact Rows, Convesation List Items, Message Search Results, Session Search Input?, Message Requests Banner, Member List Item etc. */ --conversation-tab-background-color: ${THEMES.CLASSIC_LIGHT.COLOR5}; --conversation-tab-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4}; --conversation-tab-background-selected-color: ${THEMES.CLASSIC_LIGHT.COLOR4}; @@ -599,6 +599,8 @@ export const SessionGlobalStyles = createGlobalStyle` /* NOTE only used for + icon */ --emoji-reaction-bar-icon-background-color: var(--background-primary-color); --emoji-reaction-bar-icon-color: var(--text-primary-color); + + /* TODO Theming - Should Pills have their own colors? */ }; `;