M src/components/PageContainer.tsx => src/components/PageContainer.tsx +1 -0
@@ 149,4 149,5 @@ const RightPanel = styled.div`
flex-direction: column;
width: 16rem;
overflow: hidden;
+ background-color: #d14e42;
`
M src/components/ProfilePageTopBar.tsx => src/components/ProfilePageTopBar.tsx +36 -15
@@ 73,27 73,48 @@ const ProfilePageTopBar = ({ authorURL, darkMode }: Props): ReactElement => {
)
} else if (isDistrusted) {
buttons = (
- <PersonXButton
- handleClick={openTrustModal}
- title='View trust list (peer is distrusted)'
- darkMode={darkMode}
- />
+ <>
+ <PersonXButton
+ handleClick={openTrustModal}
+ title='View trust list (peer is distrusted)'
+ darkMode={darkMode}
+ />
+ <PersonLinesFillButton
+ handleClick={openTrustModal}
+ title='View trust list'
+ darkMode={darkMode}
+ />
+ </>
)
} else if (isTrusted) {
buttons = (
- <PersonCheckButton
- handleClick={openTrustModal}
- title='View trust list (peer is trusted)'
- darkMode={darkMode}
- />
+ <>
+ <PersonCheckButton
+ handleClick={openTrustModal}
+ title='View trust list (peer is trusted)'
+ darkMode={darkMode}
+ />
+ <PersonLinesFillButton
+ handleClick={openTrustModal}
+ title='View trust list'
+ darkMode={darkMode}
+ />
+ </>
)
} else {
buttons = (
- <PersonAddButton
- handleClick={handlePersonAddButtonClick}
- title='Add to trust list'
- darkMode={darkMode}
- />
+ <>
+ <PersonAddButton
+ handleClick={handlePersonAddButtonClick}
+ title='Add to trust list'
+ darkMode={darkMode}
+ />
+ <PersonLinesFillButton
+ handleClick={openTrustModal}
+ title='View trust list'
+ darkMode={darkMode}
+ />
+ </>
)
}
M src/components/RightPanelContents.tsx => src/components/RightPanelContents.tsx +46 -3
@@ 64,17 64,35 @@ const RightPanelContents = (props: AllProps): ReactElement => {
props.setModal({ modal: Modals.usersModal })
}
+ const [searchAsAuthorURL, setSearchAsAuthorURL] = useState('fakeURL')
+ const opts = [{ name: 'jack', url: 1 }, { name: 'james', url: 2 }, { name: 'me', url: 3 }, { name: 'you?', url: 4 }]
+
+ const handleSearchAsAuthorSelect = (e: React.FormEvent<HTMLSelectElement>): void => {
+ const url = e.currentTarget.value
+ setSearchAsAuthorURL(url)
+ }
+ // <StyledSelect name='searchAsIdentities' id='searchAsIdentities' value={searchAsAuthorURL} onChange={handleSearchAsAuthorSelect}>
+ // {opts.map(author => (<option value={author.url} key={author.url}>{author.name}</option>))}
+ // </StyledSelect>
+
+ // <div style={{ backgroundColor: '#2caf1e', height: '2.5rem' }} />
return (
<>
+ <div style={{ backgroundColor: '#d14e42', height: '2.5rem' }} />
{props.authorURL !== undefined && (
<Banner
authorURL={props.authorURL}
handleClick={handleBannerClick}
- placement={{ top: '0', right: '0' }}
+ placement={{ top: '0.35rem', right: '0.35rem' }}
fontSize='large'
darkMode={props.darkMode}
/>
)}
+ <SearchAsContainerContainer>
+ <SearchAsContainer>
+ <StyledLabel htmlFor='identities' darkMode={props.darkMode}>Search as</StyledLabel>
+ </SearchAsContainer>
+ </SearchAsContainerContainer>
<SearchDiv darkMode={props.darkMode}>
<form onSubmit={handleSubmit}>
<StyledInput
@@ 119,7 137,8 @@ interface StyledProps {
const SearchDiv = styled.div<StyledProps>`
position: relative;
- margin: 2rem 0.2rem 0 0.2rem;
+ margin: 0.5rem 0.2rem 0 0.2rem;
+ background-color: #d14e42;
`
const StyledInput = styled.input<StyledProps>`
@@ 145,7 164,7 @@ const StyledButton = styled.button<StyledProps>`
outline: none;
top: 0;
right: 0;
- height: 100%;
+ height: 1.28rem;
width: 1.5rem;
background-color: var(--colorBG);
border: 1.5px solid var(--colorFG);
@@ 168,11 187,35 @@ const StyledSvg = styled.svg<StyledProps>`
fill: var(--colorFG);
`
+const SearchAsContainerContainer = styled.div`
+top: 0.5rem;
+background: black;
+width: 100%;
+ position: absolute;
+ border: 1.5px solid white;
+`
+const SearchAsContainer = styled.div`
+ position: relative;
+ margin: 0.3rem 0;
+ font-size: x-small;
+ left: 0.5rem;
+`
+
+const StyledLabel = styled.label<{darkMode: boolean}>`
+ color: ${props => props.darkMode ? 'white' : 'black'};
+`
+
+const StyledSelect = styled.select`
+ position: absolute;
+ left: 5rem;
+`
+
const ResultsContainer = styled.div`
overflow-x: hidden;
height: 100%;
display: flex;
flex-direction: column;
+ background-color: #d14e42;
padding: 0.5rem 0.2rem;
margin-top: 0.5rem;
`
M src/components/SemanticScreenTopBar.tsx => src/components/SemanticScreenTopBar.tsx +13 -2
@@ 27,6 27,7 @@ import { PublishButton } from './buttons/PublishButton'
import { UndoButton } from './buttons/UndoButton'
import { RedoButton } from './buttons/RedoButton'
import { XButton } from './buttons/XButton'
+import { PersonLinesFillButton } from './buttons/PersonLinesFillButton'
import { MapStateToPropsReturnType } from '../utils/typescriptHelpers'
import {
@@ 79,7 80,7 @@ const SemanticScreenTopBar = (props: AllProps): ReactElement => {
e.stopPropagation()
}
- const buttons = (
+ const draftButtons = (
<>
<PublishButton
handleClick={handlePublishButtonClick}
@@ 103,11 104,21 @@ const SemanticScreenTopBar = (props: AllProps): ReactElement => {
/>
</>
)
+ const buttons = (
+ <>
+ {props.isDraftMessage && draftButtons}
+ <PersonLinesFillButton
+ handleClick={console.log}
+ title='View trust list'
+ darkMode={props.darkMode}
+ />
+ </>
+ )
return (
<TopBarContainer
darkMode={props.darkMode}
- buttons={props.isDraftMessage && buttons}
+ buttons={buttons}
bannerAuthorURL={authorURL}
/>
)
M src/components/StyledMessageListItem.tsx => src/components/StyledMessageListItem.tsx +1 -0
@@ 28,6 28,7 @@ export const MessageWrapper = styled.div<StyledProps>`
position: relative;
padding: 3px 1rem 3px 3px;
margin: 0 3px 4px 3px;
+background-color: black;
${(props) =>
`
M src/components/TopBarContainer.tsx => src/components/TopBarContainer.tsx +2 -1
@@ 60,8 60,9 @@ const StyledDiv = styled.div<{darkMode: boolean}>`
height: 1.5rem;
min-height: 1.5rem;
padding: 0.2rem 0;
- background-color: var(--colorBG);
+ background-color: #d14e42;
`
+// background-color: var(--colorBG);
const ButtonGroupWrapper = styled.div`
position: absolute;