From 69f4fd289235eafcc5484a86eff8bcb8cd3ee44d Mon Sep 17 00:00:00 2001 From: William Grant Date: Fri, 7 Jun 2024 12:28:03 +1000 Subject: [PATCH] feat: added heading component improved join community suggested rooms stylings --- ts/components/basic/Heading.tsx | 55 +++++++++++++++++++ ts/components/basic/PillContainer.tsx | 13 ++--- ts/components/basic/Text.tsx | 13 ----- .../overlay/SessionJoinableDefaultRooms.tsx | 55 ++++++++++++++----- ts/themes/globals.tsx | 50 +++++++++-------- 5 files changed, 130 insertions(+), 56 deletions(-) create mode 100644 ts/components/basic/Heading.tsx diff --git a/ts/components/basic/Heading.tsx b/ts/components/basic/Heading.tsx new file mode 100644 index 000000000..31d1f53ba --- /dev/null +++ b/ts/components/basic/Heading.tsx @@ -0,0 +1,55 @@ +import { ReactNode } from 'react'; +import styled, { CSSProperties } from 'styled-components'; + +export type HeadingProps = { + children: string | ReactNode; + color?: string; + style?: CSSProperties; + /** center | start (left) | end (right) */ + alignText?: 'center' | 'start' | 'end'; + fontWeight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; + padding?: string; + margin?: string; +}; + +type StyledHeadingProps = HeadingProps & { + // TODO add h5 to h9 once we update the typography from the design system + size: 'h1' | 'h2' | 'h3' | 'h4'; +}; + +const headingStyles = (props: StyledHeadingProps) => ` +margin: ${props.margin ? props.margin : '0'}; +padding: ${props.padding ? props.padding : '0'}; +font-weight: ${props.fontWeight ? props.fontWeight : '700'}; +${props.size ? `font-size: var(--font-size-${props.size});` : ''} +${props.color ? `color: ${props.color};` : ''} +${props.alignText ? `text-align: ${props.alignText};` : ''} +`; + +const Heading = (headerProps: StyledHeadingProps) => { + const StyledHeading = styled(headerProps.size)` + ${props => headingStyles(props)} + `; + + return {headerProps.children}; +}; + +/** --font-size-h1 30px */ +export const H1 = (props: HeadingProps) => { + return ; +}; + +/** --font-size-h2 24px */ +export const H2 = (props: HeadingProps) => { + return ; +}; + +/** --font-size-h3 20px */ +export const H3 = (props: HeadingProps) => { + return ; +}; + +/** --font-size-h4 16px */ +export const H4 = (props: HeadingProps) => { + return ; +}; diff --git a/ts/components/basic/PillContainer.tsx b/ts/components/basic/PillContainer.tsx index 4509351fe..407143abf 100644 --- a/ts/components/basic/PillContainer.tsx +++ b/ts/components/basic/PillContainer.tsx @@ -1,5 +1,6 @@ import { ReactNode } from 'react'; import styled from 'styled-components'; +import { Flex } from './Flex'; type PillContainerProps = { children: ReactNode; @@ -9,25 +10,22 @@ type PillContainerProps = { disableHover?: boolean; }; -export const StyledPillContainerHoverable = styled.div` +export const StyledPillContainerHoverable = styled(Flex)` background: none; position: relative; - flex-direction: 'row'; - flex-shrink: 0; - min-width: 50%; - max-width: 100%; white-space: nowrap; text-overflow: ellipsis; align-items: center; - padding: ${props => props.padding || ''}; - margin: ${props => props.margin || ''}; `; const StyledPillInner = styled.div` background: none; + width: 100%; display: flex; flex-direction: 'row'; + justify-content: flex-start; + align-items: center; flex-grow: 1; flex-shrink: 0; @@ -35,7 +33,6 @@ const StyledPillInner = styled.div` white-space: nowrap; text-overflow: ellipsis; - align-items: center; padding: ${props => props.padding || ''}; margin: ${props => props.margin || ''}; border-radius: 300px; diff --git a/ts/components/basic/Text.tsx b/ts/components/basic/Text.tsx index c455781e5..5693711a1 100644 --- a/ts/components/basic/Text.tsx +++ b/ts/components/basic/Text.tsx @@ -78,16 +78,3 @@ export const Spacer2XL = (props: { style?: CSSProperties }) => { export const Spacer3XL = (props: { style?: CSSProperties }) => { return ; }; - -type H3Props = { - text: string; -}; - -const StyledH3 = styled.div` - transition: var(--default-duration); - font-family: var(--font-default); - font-size: var(--font-size-md); - font-weight: 700; -`; - -export const H3 = (props: H3Props) => {props.text}; diff --git a/ts/components/leftpane/overlay/SessionJoinableDefaultRooms.tsx b/ts/components/leftpane/overlay/SessionJoinableDefaultRooms.tsx index 18df5b7c4..cc9fc2eff 100644 --- a/ts/components/leftpane/overlay/SessionJoinableDefaultRooms.tsx +++ b/ts/components/leftpane/overlay/SessionJoinableDefaultRooms.tsx @@ -4,12 +4,14 @@ import { useDispatch, useSelector } from 'react-redux'; import styled from 'styled-components'; import { parseOpenGroupV2 } from '../../../session/apis/open_group_api/opengroupV2/JoinOpenGroupV2'; import { sogsV3FetchPreviewBase64 } from '../../../session/apis/open_group_api/sogsv3/sogsV3FetchFile'; -import { updateDefaultBase64RoomData } from '../../../state/ducks/defaultRooms'; +import { DefaultRoomsState, updateDefaultBase64RoomData } from '../../../state/ducks/defaultRooms'; import { StateType } from '../../../state/reducer'; +import { useHTMLDirection } from '../../../util/i18n'; import { Avatar, AvatarSize } from '../../avatar/Avatar'; import { Flex } from '../../basic/Flex'; +import { H4 } from '../../basic/Heading'; import { PillContainerHoverable, StyledPillContainerHoverable } from '../../basic/PillContainer'; -import { H3, SpacerSM } from '../../basic/Text'; +import { SpacerXS } from '../../basic/Text'; import { SessionSpinner } from '../../loading'; export type JoinableRoomProps = { @@ -23,6 +25,7 @@ export type JoinableRoomProps = { const SessionJoinableRoomAvatar = (props: JoinableRoomProps) => { const dispatch = useDispatch(); + useEffect(() => { let isCancelled = false; @@ -81,10 +84,11 @@ const SessionJoinableRoomAvatar = (props: JoinableRoomProps) => { }; const StyledRoomName = styled(Flex)` + font-size: var(--font-size-md); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - padding: 0 10px; + margin: 0 var(--margins-sm); `; const SessionJoinableRoomName = (props: JoinableRoomProps) => { @@ -100,8 +104,12 @@ const SessionJoinableRoomRow = (props: JoinableRoomProps) => { : undefined; return ( - - + + @@ -110,14 +118,13 @@ const SessionJoinableRoomRow = (props: JoinableRoomProps) => { }; const JoinableRooms = (props: { + joinableRooms: DefaultRoomsState; alreadyJoining: boolean; onJoinClick?: (completeUrl: string) => void; }) => { - const joinableRooms = useSelector((state: StateType) => state.defaultRooms); - return ( <> - {joinableRooms.rooms.map(r => { + {props.joinableRooms.rooms.map(r => { return ( void; alreadyJoining: boolean; }) => { + const htmlDirection = useHTMLDirection(); const joinableRooms = useSelector((state: StateType) => state.defaultRooms); if (!joinableRooms.inProgress && !joinableRooms.rooms?.length) { @@ -146,14 +154,35 @@ export const SessionJoinableRooms = (props: { } return ( - -

- - + +

{window.i18n('orJoinOneOfThese')}

+ + {joinableRooms.inProgress ? ( ) : ( - + )} diff --git a/ts/themes/globals.tsx b/ts/themes/globals.tsx index 59495d16f..de56496d8 100644 --- a/ts/themes/globals.tsx +++ b/ts/themes/globals.tsx @@ -13,25 +13,28 @@ export type ThemeGlobals = { '--font-default': string; '--font-accent': string; '--font-mono': string; - '--font-size-xs': string; - '--font-size-sm': string; - '--font-size-md': string; - '--font-size-lg': string; + '--font-debug': string; + '--font-size-xl': string; + '--font-size-lg': string; + '--font-size-md': string; + '--font-size-sm': string; + '--font-size-xs': string; + '--font-size-h1': string; '--font-size-h2': string; '--font-size-h3': string; '--font-size-h4': string; /* Margins */ - '--margins-xxs': string; - '--margins-xs': string; - '--margins-sm': string; - '--margins-md': string; - '--margins-lg': string; - '--margins-xl': string; - '--margins-2xl': string; '--margins-3xl': string; + '--margins-2xl': string; + '--margins-xl': string; + '--margins-lg': string; + '--margins-md': string; + '--margins-sm': string; + '--margins-xs': string; + '--margins-xxs': string; /* Padding */ '--padding-message-content': string; @@ -121,24 +124,27 @@ export const THEME_GLOBALS: ThemeGlobals = { '--font-default': 'Roboto', '--font-accent': 'Loor', '--font-mono': 'SpaceMono', - '--font-size-xs': '11px', - '--font-size-sm': '13px', - '--font-size-md': '15px', - '--font-size-lg': '17px', + '--font-debug': "Monaco, Consolas, 'Courier New', Courier, monospace", + '--font-size-xl': '19px', + '--font-size-lg': '17px', + '--font-size-md': '15px', + '--font-size-sm': '13px', + '--font-size-xs': '11px', + '--font-size-h1': '30px', '--font-size-h2': '24px', '--font-size-h3': '20px', '--font-size-h4': '16px', - '--margins-xxs': '2.5px', - '--margins-xs': '5px', - '--margins-sm': '10px', - '--margins-md': '15px', - '--margins-lg': '20px', - '--margins-xl': '25px', - '--margins-2xl': '30px', '--margins-3xl': '35px', + '--margins-2xl': '30px', + '--margins-xl': '25px', + '--margins-lg': '20px', + '--margins-md': '15px', + '--margins-sm': '10px', + '--margins-xs': '5px', + '--margins-xxs': '2.5px', '--padding-message-content': '7px 13px', '--padding-link-preview': '-7px -13px 7px -13px', // bottom has positive value because a link preview has always a body below