diff --git a/net/web/src/constants/Colors.js b/net/web/src/constants/Colors.js index cc594bdd..191f04fd 100644 --- a/net/web/src/constants/Colors.js +++ b/net/web/src/constants/Colors.js @@ -7,18 +7,29 @@ const Colors = { grey: '#888888', white: '#ffffff', divider: '#dddddd', + mask: '#dddddd', encircle: '#cccccc', alert: '#ff8888', enabled: '#444444', disabled: '#aaaaaa', text: '#444444', + link: '#0077CC', + itemDivider: '#eeeeee', + connected: '#44cc44', connecting: '#dd88ff', requested: '#4488ff', pending: '#22aaaa', confirmed: '#aaaaaa', error: '#ff4444', + + profileForm: '#e8e8e8', + profileDivider: '#aaaaaa', + statsForm: '#ededed', + statsDivider: '#afafaf', + channel: '#f2f2f2', + card: '#eeeeee', }; export default Colors; diff --git a/net/web/src/session/Session.jsx b/net/web/src/session/Session.jsx index 3f7bc402..fbe12aa0 100644 --- a/net/web/src/session/Session.jsx +++ b/net/web/src/session/Session.jsx @@ -12,7 +12,7 @@ import { Channels } from './channels/Channels'; import { Cards } from './cards/Cards'; import { Contact } from './contact/Contact'; import { Profile } from './profile/Profile'; -import { Stats } from './stats/Stats'; +import { Account } from './account/Account'; import { Welcome } from './welcome/Welcome'; import { BottomNav } from './bottomNav/BottomNav'; @@ -31,8 +31,13 @@ export function Session() { } }, [app, navigate]); - const openProfile = () => { - actions.openProfile(); + const closeAccount = () => { + actions.closeProfile(); + actions.closeAccount(); + } + + const openAccount = () => { + actions.openAccount(); actions.closeCards(); actions.closeContact(); } @@ -40,15 +45,17 @@ export function Session() { const openCards = () => { actions.openCards(); actions.closeProfile(); - actions.closeStats(); + actions.closeAccount(); } +console.log("STATE", state); + return ( { (viewport.state.display === 'xlarge') && (
- +
@@ -66,7 +73,7 @@ export function Session() { )} { state.profile && (
- +
)}
@@ -82,9 +89,9 @@ export function Session() {
)} - { state.profile && ( + { (state.profile || state.account) && (
- +
)} @@ -93,7 +100,7 @@ export function Session() { { (viewport.state.display === 'large' || viewport.state.display === 'medium') && (
- +
@@ -120,15 +127,10 @@ export function Session() { )} - - { state.profile && ( - + + { (state.profile || state.account) && ( + )} - - { state.stats && ( - - )} -
@@ -159,16 +161,11 @@ export function Session() { )} - { state.profile && ( + { (state.profile || state.account) && (
)} - { state.stats && ( -
- -
- )}
diff --git a/net/web/src/session/Session.styled.js b/net/web/src/session/Session.styled.js index ace3c393..e2b79bfb 100644 --- a/net/web/src/session/Session.styled.js +++ b/net/web/src/session/Session.styled.js @@ -28,7 +28,7 @@ export const SessionWrapper = styled.div` min-height: 0; .bottom { - height: calc(100% - 64px); + height: calc(100% - 48px); } } .center { @@ -65,7 +65,7 @@ export const SessionWrapper = styled.div` min-height: 0; .bottom { - height: calc(100% - 64px); + height: calc(100% - 48px); } } .right { diff --git a/net/web/src/session/account/Account.jsx b/net/web/src/session/account/Account.jsx new file mode 100644 index 00000000..c574fbb5 --- /dev/null +++ b/net/web/src/session/account/Account.jsx @@ -0,0 +1,30 @@ +import { AccountWrapper } from './Account.styled'; +import { DoubleRightOutlined } from '@ant-design/icons'; +import { Checkbox } from 'antd'; +import { SettingOutlined, LockOutlined } from '@ant-design/icons'; + +export function Account({ closeAccount, openProfile }) { + + return ( + +
+
Account
+
+ +
+
+
+ Visible in Registry +
+ +
Update Profile
+
+
+ +
Change Login
+
+
+ + ); +} + diff --git a/net/web/src/session/account/Account.styled.js b/net/web/src/session/account/Account.styled.js new file mode 100644 index 00000000..981c59f9 --- /dev/null +++ b/net/web/src/session/account/Account.styled.js @@ -0,0 +1,59 @@ +import styled from 'styled-components'; +import Colors from 'constants/Colors'; + +export const AccountWrapper = styled.div` + height: 100%; + width: 100%; + display: flex; + flex-direction: column; + background-color: ${Colors.statsForm}; + + .header { + width: 100%; + height: 48px; + border-bottom: 1px solid ${Colors.statsDivider}; + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: center; + font-size: 18px; + padding: 16px; + + .label { + flex-grow: 1; + display: flex; + justify-content: center; + } + + .dismiss { + font-size: 18px; + color: ${Colors.text}; + cursor: pointer; + } + } + + .content { + min-height: 0; + width: 100%; + overflow: scroll; + display: flex; + flex-direction: column; + justify-content: center; + padding-top: 32px; + align-items: center; + + .link { + color: ${Colors.primary}; + padding-top: 16px; + display: flex; + flex-direction: row; + align-items: center; + cursor: pointer; + + .label { + padding-left: 8px; + } + } + } + +` diff --git a/net/web/src/session/bottomNav/BottomNav.jsx b/net/web/src/session/bottomNav/BottomNav.jsx index 7faa7bf6..1af70f98 100644 --- a/net/web/src/session/bottomNav/BottomNav.jsx +++ b/net/web/src/session/bottomNav/BottomNav.jsx @@ -18,7 +18,7 @@ export function BottomNav({ state, actions }) { actions.closeCards(); actions.closeContact(); actions.closeProfile(); - actions.closeStats(); + actions.closeAccount(); actions.closeConversation(); } @@ -27,7 +27,6 @@ export function BottomNav({ state, actions }) { actions.closeCards(); actions.closeContact(); actions.openProfile(); - actions.closeStats(); actions.closeConversation(); } @@ -36,7 +35,7 @@ export function BottomNav({ state, actions }) { actions.openCards(); actions.closeContact(); actions.closeProfile(); - actions.closeStats(); + actions.closeAccount(); actions.closeConversation(); } diff --git a/net/web/src/session/cards/Cards.jsx b/net/web/src/session/cards/Cards.jsx index ce99322c..6d247f0c 100644 --- a/net/web/src/session/cards/Cards.jsx +++ b/net/web/src/session/cards/Cards.jsx @@ -23,7 +23,7 @@ export function Cards({ close }) { )}
} - size="large" spellCheck="false" onChange={(e) => actions.onFilter(e.target.value)} /> + spellCheck="false" onChange={(e) => actions.onFilter(e.target.value)} />
{ state.display === 'small' && (
diff --git a/net/web/src/session/cards/Cards.styled.js b/net/web/src/session/cards/Cards.styled.js index ce532c70..8f7c6093 100644 --- a/net/web/src/session/cards/Cards.styled.js +++ b/net/web/src/session/cards/Cards.styled.js @@ -6,7 +6,7 @@ export const CardsWrapper = styled.div` width: 100%; display: flex; flex-direction: column; - background-color: ${Colors.formFocus}; + background-color: ${Colors.card}; .view { min-height: 0; @@ -15,10 +15,14 @@ export const CardsWrapper = styled.div` } .search { - padding: 12px; border-bottom: 1px solid ${Colors.divider}; display: flex; flex-direction: row; + height: 48px; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; .sorted { color: ${Colors.enabled}; @@ -65,7 +69,7 @@ export const CardsWrapper = styled.div` } .bar { - height: 64px; + height: 48px; width: 100%; display: flex; flex-shrink: 0; @@ -73,9 +77,9 @@ export const CardsWrapper = styled.div` align-items: center; justify-content: center; background-color: ${Colors.formBackground}; - border-top: 2px solid ${Colors.divider}; - padding-bottom: 16px; - padding-top: 16px; + border-top: 1px solid ${Colors.divider}; + padding-bottom: 12px; + padding-top: 12px; position: relative; } diff --git a/net/web/src/session/channels/Channels.jsx b/net/web/src/session/channels/Channels.jsx index 6b0ecbbc..b4a40a85 100644 --- a/net/web/src/session/channels/Channels.jsx +++ b/net/web/src/session/channels/Channels.jsx @@ -13,7 +13,7 @@ export function Channels() {
} - size="large" spellCheck="false" onChange={(e) => actions.onFilter(e.target.value)} /> + spellCheck="false" onChange={(e) => actions.onFilter(e.target.value)} />
{ state.display === 'small' && (
diff --git a/net/web/src/session/channels/Channels.styled.js b/net/web/src/session/channels/Channels.styled.js index a2f6cd7e..27e51de7 100644 --- a/net/web/src/session/channels/Channels.styled.js +++ b/net/web/src/session/channels/Channels.styled.js @@ -15,7 +15,7 @@ export const ChannelsWrapper = styled.div` } .search { - padding: 12px; + padding: 8px; border-bottom: 1px solid ${Colors.divider}; display: flex; flex-direction: row; @@ -40,7 +40,7 @@ export const ChannelsWrapper = styled.div` } .bar { - height: 64px; + height: 48px; width: 100%; display: flex; flex-shrink: 0; @@ -48,9 +48,9 @@ export const ChannelsWrapper = styled.div` align-items: center; justify-content: center; background-color: ${Colors.formBackground}; - border-top: 2px solid ${Colors.divider}; - padding-bottom: 16px; - padding-top: 16px; + border-top: 1px solid ${Colors.divider}; + padding-bottom: 12px; + padding-top: 12px; position: relative; } diff --git a/net/web/src/session/channels/channelItem/ChannelItem.styled.js b/net/web/src/session/channels/channelItem/ChannelItem.styled.js index 2493e799..0656957e 100644 --- a/net/web/src/session/channels/channelItem/ChannelItem.styled.js +++ b/net/web/src/session/channels/channelItem/ChannelItem.styled.js @@ -6,9 +6,10 @@ export const ChannelItemWrapper = styled.div` width: 100%; display: flex; align-items: center; - border-bottom: 1px solid ${Colors.divider}; + border-bottom: 1px solid ${Colors.itemDivider}; padding-left: 16px; padding-right: 16px; + line-height: 16px; &:hover { background-color: ${Colors.formHover}; diff --git a/net/web/src/session/identity/Identity.jsx b/net/web/src/session/identity/Identity.jsx index 8c0c7f10..d9044753 100644 --- a/net/web/src/session/identity/Identity.jsx +++ b/net/web/src/session/identity/Identity.jsx @@ -4,14 +4,14 @@ import { IdentityWrapper, ErrorNotice, InfoNotice } from './Identity.styled'; import { useIdentity } from './useIdentity.hook'; import { InfoCircleOutlined, ExclamationCircleOutlined, DownOutlined } from '@ant-design/icons'; -export function Identity({ openProfile, openCards, cardUpdated }) { +export function Identity({ openAccount, openCards, cardUpdated }) { const { state, actions } = useIdentity(); const menu = ( -
Profile
+
Account
Contacts
@@ -26,7 +26,7 @@ export function Identity({ openProfile, openCards, cardUpdated }) { { state.init && ( - + )}
{state.name}
diff --git a/net/web/src/session/identity/Identity.styled.js b/net/web/src/session/identity/Identity.styled.js index 8848e0d3..647ff9c8 100644 --- a/net/web/src/session/identity/Identity.styled.js +++ b/net/web/src/session/identity/Identity.styled.js @@ -3,13 +3,13 @@ import Colors from 'constants/Colors'; export const IdentityWrapper = styled.div` width: 100%; - height: 64px; + height: 48px; display: flex; flex-direction: row; align-items: center; padding-left: 16px; padding-right: 16px; - border-bottom: 2px solid ${Colors.divider}; + border-bottom: 1px solid ${Colors.divider}; background-color: ${Colors.formBackground}; flex-shrink: 0; @@ -37,10 +37,11 @@ export const IdentityWrapper = styled.div` justify-content: center; .name { - font-size: 1.2em; + font-size: 14px; } .handle { + font-size: 12px; display: flex; flex-direction: row; justify-content: center; diff --git a/net/web/src/session/profile/Profile.jsx b/net/web/src/session/profile/Profile.jsx index ac444665..fe64bd8e 100644 --- a/net/web/src/session/profile/Profile.jsx +++ b/net/web/src/session/profile/Profile.jsx @@ -1,18 +1,78 @@ import { useContext } from 'react'; -import { Button } from 'antd'; +import { Button, Checkbox } from 'antd'; import { AppContext } from 'context/AppContext'; import { ViewportContext } from 'context/ViewportContext'; +import { ProfileWrapper } from './Profile.styled'; +import { useProfile } from './useProfile.hook'; +import { Logo } from 'logo/Logo'; +import { LockOutlined, RightOutlined, EditOutlined, BookOutlined, EnvironmentOutlined } from '@ant-design/icons'; -export function Profile() { +export function Profile({ closeProfile }) { - const app = useContext(AppContext); - const viewport = useContext(ViewportContext); + const { state, actions } = useProfile(); + + const Image = ( + + ); + + const Details = ( +
+
+
{ state.name }
+ +
+
+ +
{ state.location }
+
+
+ +
{ state.description }
+
+
+ ); return ( -
- -
{ JSON.stringify(viewport.state) }
-
+ + { state.init && state.display === 'xlarge' && ( + <> +
+
{ state.handle }
+
+ +
+
+ +
+ { Image } + { Details } +
+ + )} + { state.init && state.display !== 'xlarge' && ( +
+
{ state.handle }
+
Profile Settings
+
+ { Image } + { Details } +
+
Account Settings
+
+ Visible in Registry +
+ +
Change Login
+
+
+
+ )} + ); } diff --git a/net/web/src/session/profile/Profile.styled.js b/net/web/src/session/profile/Profile.styled.js new file mode 100644 index 00000000..d1907651 --- /dev/null +++ b/net/web/src/session/profile/Profile.styled.js @@ -0,0 +1,173 @@ +import styled from 'styled-components'; +import Colors from 'constants/Colors'; + +export const ProfileWrapper = styled.div` + height: 100%; + width: 100%; + display: flex; + flex-direction: column; + background-color: ${Colors.profileForm}; + + .header { + margin-left: 16px; + margin-right: 16px; + height: 48px; + border-bottom: 1px solid ${Colors.profileDivider}; + display: flex; + flex-direction: row; + align-items: center; + flex-shrink: 0; + + .handle { + font-size: 20px; + font-weight: bold; + flex-grow: 1; + padding-left: 16px; + } + + .close { + font-size: 16px; + color: ${Colors.primary}; + cursor: pointer; + padding-right: 16px; + } + } + + .content { + min-height: 0; + width: 100%; + overflow: scroll; + display: flex; + flex-direction: row; + justify-content: center; + padding-top: 32px; + + .logo { + position: relative; + width: 20vw; + margin-right: 32px; + + .edit { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + border-radius: 4px; + width: 24px; + height: 24px; + bottom: 0; + right: 0; + color: ${Colors.link}; + background-color: ${Colors.mask}; + cursor: pointer; + } + } + } + + .view { + width: 100%; + height: 100%; + overflow: scroll; + display: flex; + flex-direction: column; + align-items: center; + + .title { + font-size: 18px; + font-weight: bold; + } + + .logo { + position: relative; + width: 80%; + margin-bottom: 16px; + + .edit { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + border-radius: 4px; + width: 24px; + height: 24px; + bottom: 0; + right: 0; + color: ${Colors.link}; + background-color: ${Colors.mask}; + cursor: pointer; + } + } + + .section { + width: 100%; + color: ${Colors.grey}; + padding-top: 16px; + font-size: 12px; + display: flex; + justify-content: center; + } + + .controls { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + border: 1px solid ${Colors.divider}; + border-radius: 4px; + padding: 8px; + width: 75%; + } + + .link { + display: flex; + flex-direction: row; + align-items: center; + cursor: pointer; + color: ${Colors.primary}; + padding-top: 8px; + + .label { + padding-left: 8px; + } + } + } + + .details { + display: flex; + flex-direction: column; + + .name { + display: flex; + flex-direction: row; + align-items: center; + + .data { + padding-right: 8px; + font-size: 24px; + font-weight: bold; + } + } + + .location { + display: flex; + flex-direction: row; + align-items: center; + padding-bottom: 8px; + + .data { + padding-left: 8px; + } + } + + .description { + display: flex; + flex-direction: row; + align-items: center; + padding-bottom: 8px; + + .data { + padding-left: 8px; + } + } + } +` diff --git a/net/web/src/session/profile/useProfile.hook.js b/net/web/src/session/profile/useProfile.hook.js new file mode 100644 index 00000000..5911be2c --- /dev/null +++ b/net/web/src/session/profile/useProfile.hook.js @@ -0,0 +1,38 @@ +import { useState, useEffect, useContext } from 'react'; +import { ProfileContext } from 'context/ProfileContext'; +import { AppContext } from 'context/AppContext'; +import { ViewportContext } from 'context/ViewportContext'; + +export function useProfile() { + + const [state, setState] = useState({ + init: false, + }); + + const app = useContext(AppContext); + const viewport = useContext(ViewportContext); + const profile = useContext(ProfileContext); + + const updateState = (value) => { + setState((s) => ({ ...s, ...value })); + } + + useEffect(() => { + if (profile.state.init) { + const { name, handle, location, description, image } = profile.state.profile; + let url = !image ? null : profile.actions.profileImageUrl(); + updateState({ init: true, name, handle, url, location, description }); + } + }, [profile]); + + useEffect(() => { + updateState({ display: viewport.state.display }); + }, [viewport]); + + const actions = { + logout: app.actions.logout, + }; + + return { state, actions }; +} + diff --git a/net/web/src/session/stats/Stats.jsx b/net/web/src/session/stats/Stats.jsx deleted file mode 100644 index 11f88e4c..00000000 --- a/net/web/src/session/stats/Stats.jsx +++ /dev/null @@ -1,4 +0,0 @@ -export function Stats() { - return
STATS
-} - diff --git a/net/web/src/session/useSession.hook.js b/net/web/src/session/useSession.hook.js index 494aa7fc..e455ce92 100644 --- a/net/web/src/session/useSession.hook.js +++ b/net/web/src/session/useSession.hook.js @@ -11,7 +11,7 @@ export function useSession() { cards: false, contact: false, profile: false, - stats: false, + account: false, }); const card = useContext(CardContext); @@ -67,11 +67,11 @@ export function useSession() { closeProfile: () => { updateState({ profile: false }); }, - openStats: () => { - updateState({ stats: true }); + openAccount: () => { + updateState({ account: true }); }, - closeStats: () => { - updateState({ stats: false }); + closeAccount: () => { + updateState({ account: false }); }, closeConversation: () => { updateState({ conversation: false });