From ff66e8457d69d072e4431eada4d7f73d81c39039 Mon Sep 17 00:00:00 2001 From: Roland Osborne Date: Fri, 23 Feb 2024 09:54:50 -0800 Subject: [PATCH] styling profile components --- net/web/src/constants/Colors.js | 2 ++ .../src/context/useSettingsContext.hook.js | 1 + net/web/src/session/Session.jsx | 2 +- net/web/src/session/Session.styled.js | 4 ++++ net/web/src/session/account/Account.jsx | 4 ++-- net/web/src/session/account/Account.styled.js | 3 ++- .../src/session/account/profile/Profile.jsx | 17 +++++++++------- .../session/account/profile/Profile.styled.js | 20 +++++++++++++++---- .../profile/accountAccess/AccountAccess.jsx | 14 +++++-------- .../accountAccess/AccountAccess.styled.js | 7 +++++++ .../accountAccess/useAccountAccess.hook.js | 10 +++++----- .../account/profile/useProfile.hook.js | 10 +++++++--- net/web/src/session/useSession.hook.js | 3 --- 13 files changed, 62 insertions(+), 35 deletions(-) diff --git a/net/web/src/constants/Colors.js b/net/web/src/constants/Colors.js index d41b931b..c3fed00b 100644 --- a/net/web/src/constants/Colors.js +++ b/net/web/src/constants/Colors.js @@ -39,6 +39,7 @@ export const Colors = { export const LightTheme = { baseArea: '#8fbea7', + frameArea: '#dddddd', iconArea: '#ffffff', headerArea: '#f0f0f0', footerArea: '#f0f0f0', @@ -67,6 +68,7 @@ export const LightTheme = { export const DarkTheme = { baseArea: '#080808', + frameArea: '#0a0a0a', iconArea: '#ffffff', headerArea: '#111111', footerArea: '#111111', diff --git a/net/web/src/context/useSettingsContext.hook.js b/net/web/src/context/useSettingsContext.hook.js index dcde739a..3f885153 100644 --- a/net/web/src/context/useSettingsContext.hook.js +++ b/net/web/src/context/useSettingsContext.hook.js @@ -8,6 +8,7 @@ export function useSettingsContext() { display: null, width: null, height: null, + themes: [{ value: null, label: 'Default' }, { value: 'dark', label: 'Dark' }, { value: 'light', label: 'Light' }], theme: null, setTheme: null, colors: {}, diff --git a/net/web/src/session/Session.jsx b/net/web/src/session/Session.jsx index cd6a912c..c625979a 100644 --- a/net/web/src/session/Session.jsx +++ b/net/web/src/session/Session.jsx @@ -197,7 +197,7 @@ export function Session() { )} { state.profile && ( -
+
)} diff --git a/net/web/src/session/Session.styled.js b/net/web/src/session/Session.styled.js index 05596846..e37d829b 100644 --- a/net/web/src/session/Session.styled.js +++ b/net/web/src/session/Session.styled.js @@ -182,6 +182,10 @@ export const SessionWrapper = styled.div` .center { flex-grow: 1; position: relative; + + .base { + background-color: ${props => props.theme.frameArea}; + } } .right { min-width: 256px; diff --git a/net/web/src/session/account/Account.jsx b/net/web/src/session/account/Account.jsx index 7e0bb12a..b8b123c6 100644 --- a/net/web/src/session/account/Account.jsx +++ b/net/web/src/session/account/Account.jsx @@ -1,5 +1,5 @@ import { AccountWrapper } from './Account.styled'; -import { DoubleRightOutlined } from '@ant-design/icons'; +import { RightOutlined } from '@ant-design/icons'; import { SettingOutlined } from '@ant-design/icons'; import { AccountAccess } from './profile/accountAccess/AccountAccess'; @@ -10,7 +10,7 @@ export function Account({ closeAccount, openProfile }) {
Settings
- +
diff --git a/net/web/src/session/account/Account.styled.js b/net/web/src/session/account/Account.styled.js index f0b36802..8a3b0872 100644 --- a/net/web/src/session/account/Account.styled.js +++ b/net/web/src/session/account/Account.styled.js @@ -6,7 +6,8 @@ export const AccountWrapper = styled.div` width: 100%; display: flex; flex-direction: column; - background-color: ${props => props.theme.itemArea};; + background-color: ${props => props.theme.selectedArea}; + color: ${props => props.theme.mainText}; .header { width: 100%; diff --git a/net/web/src/session/account/profile/Profile.jsx b/net/web/src/session/account/profile/Profile.jsx index b7541638..06e5e051 100644 --- a/net/web/src/session/account/profile/Profile.jsx +++ b/net/web/src/session/account/profile/Profile.jsx @@ -105,12 +105,14 @@ export function Profile({ closeProfile }) {
)}
-
- -
- + { state.urlSet && ( +
+ +
+ +
-
+ )}
{ state.name && ( @@ -143,8 +145,8 @@ export function Profile({ closeProfile }) {
- { state.display !== 'xlarge' && ( -
+ { state.display !== 'xlarge' && state.displaySet && ( +
{ state.display === 'small' && (
@@ -152,6 +154,7 @@ export function Profile({ closeProfile }) {
Logout
)} +
)} props.theme.selectedArea}; color: ${props => props.theme.mainText}; .middleHeader { @@ -40,6 +39,7 @@ export const ProfileWrapper = styled.div` flex-direction: column; align-items: center; overflow: hidden; + background-color: ${props => props.theme.selectedArea}; .title { font-size: 18px; @@ -61,8 +61,8 @@ export const ProfileWrapper = styled.div` .logo { position: relative; - width: 256px; - height: 256px; + width: 192px; + height: 192px; flex-shrink: 0; cursor: pointer; margin-left: 32px; @@ -110,6 +110,18 @@ export const ProfileWrapper = styled.div` align-items: center; border-radius: 4px; padding: 8px; + background-color: ${props => props.theme.selectedArea}; + } + + .rightAccess { + display: flex; + flex-direction: column; + flex-grow: 1; + + .contentFill { + flex-grow: 1; + background-color: ${props => props.theme.selectedArea}; + } } .details { @@ -196,9 +208,9 @@ export const ProfileWrapper = styled.div` cursor: pointer; color: ${props => props.theme.mainText}; background-color: ${props => props.theme.modalArea}; - margin-top: 8px; padding: 8px; border-radius: 4px; + justify-content: center; .label { padding-left: 8px; diff --git a/net/web/src/session/account/profile/accountAccess/AccountAccess.jsx b/net/web/src/session/account/profile/accountAccess/AccountAccess.jsx index b93c5667..36b42f4f 100644 --- a/net/web/src/session/account/profile/accountAccess/AccountAccess.jsx +++ b/net/web/src/session/account/profile/accountAccess/AccountAccess.jsx @@ -85,15 +85,15 @@ export function AccountAccess() {
Time Format
- 12h - 24h + 12h + 24h
Date Format
- mm/dd - dd/mm + mm/dd + dd/mm
@@ -103,11 +103,7 @@ export function AccountAccess() { style={{ width: 128 }} value={state.theme} onChange={actions.setTheme} - options={[ - { value: null, label: 'Default' }, - { value: 'light', label: 'Light' }, - { value: 'dark', label: 'Dark' }, - ]} + options={state.themes} />
diff --git a/net/web/src/session/account/profile/accountAccess/AccountAccess.styled.js b/net/web/src/session/account/profile/accountAccess/AccountAccess.styled.js index a8f966f7..bfa787f1 100644 --- a/net/web/src/session/account/profile/accountAccess/AccountAccess.styled.js +++ b/net/web/src/session/account/profile/accountAccess/AccountAccess.styled.js @@ -8,6 +8,8 @@ export const AccountAccessWrapper = styled.div` justify-content: center; padding-bottom: 8px; width: 100%; + background-color: ${props => props.theme.selectedArea}; + color: ${props => props.theme.mainText}; .account { width: 100%; @@ -32,6 +34,9 @@ export const AccountAccessWrapper = styled.div` .label { padding-right: 16px; min-width: 110px; + height: 28px; + display: flex; + align-items: center; } } } @@ -52,6 +57,7 @@ export const AccountAccessWrapper = styled.div` flex-direction: row; align-items: center; padding-bottom: 8px; + padding-top: 8px; .switchEnabled { color: ${props => props.theme.activeArea}; @@ -95,6 +101,7 @@ export const SealModal = styled.div` padding-bottom: 8px; align-items: center; justify-content: center; + padding-top: 8px; .switchLabel { color: ${props => props.theme.mainText}; diff --git a/net/web/src/session/account/profile/accountAccess/useAccountAccess.hook.js b/net/web/src/session/account/profile/accountAccess/useAccountAccess.hook.js index 96d68f4b..6001333d 100644 --- a/net/web/src/session/account/profile/accountAccess/useAccountAccess.hook.js +++ b/net/web/src/session/account/profile/accountAccess/useAccountAccess.hook.js @@ -26,9 +26,11 @@ export function useAccountAccess() { sealDelete: null, sealUnlock: null, + menuStyle: {}, timeFormat: '12h', dateFormat: 'mm/dd', theme: null, + themes: [], language: null, languages: [], @@ -52,12 +54,12 @@ export function useAccountAccess() { useEffect(() => { const { seal, sealKey, status } = account.state; - updateState({ searchable: status.searchable, seal, sealKey }); + updateState({ searchable: status?.searchable, seal, sealKey }); }, [account.state]); useEffect(() => { - const { timeFormat, dateFormat, theme, language, languages } = settings.state; - updateState({ timeFormat, dateFormat, theme, language, languages }); + const { menuStyle, timeFormat, dateFormat, theme, themes, language, languages } = settings.state; + updateState({ menuStyle, timeFormat, dateFormat, theme, themes, language, languages }); }, [settings.state]); const sealUnlock = async () => { @@ -99,8 +101,6 @@ export function useAccountAccess() { const actions = { setTimeFormat: (timeFormat) => { -console.log("TIME", timeFormat); - settings.actions.setTimeFormat(timeFormat.target.value); }, setDateFormat: (dateFormat) => { diff --git a/net/web/src/session/account/profile/useProfile.hook.js b/net/web/src/session/account/profile/useProfile.hook.js index c99e3774..4c4d2913 100644 --- a/net/web/src/session/account/profile/useProfile.hook.js +++ b/net/web/src/session/account/profile/useProfile.hook.js @@ -9,6 +9,10 @@ export function useProfile() { const [state, setState] = useState({ handle: null, name: null, + url: null, + urlSet: false, + display: null, + displaySet: false, location: null, description: null, editImage: null, @@ -23,7 +27,7 @@ export function useProfile() { busy: false, }); - const IMAGE_DIM = 256; + const IMAGE_DIM = 192; const app = useContext(AppContext); const settings = useContext(SettingsContext); const profile = useContext(ProfileContext); @@ -36,12 +40,12 @@ export function useProfile() { const { node, name, handle, location, description, image } = profile.state.identity; let url = !image ? null : profile.state.imageUrl; let editImage = !image ? avatar : url; - updateState({ name, location, description, node, handle, url, + updateState({ name, location, description, node, handle, url, urlSet: true, editName: name, editLocation: location, editDescription: description, editHandle: handle, editImage }); }, [profile.state]); useEffect(() => { - updateState({ display: settings.state.display }); + updateState({ displaySet: true, display: settings.state.display }); }, [settings.state]); const actions = { diff --git a/net/web/src/session/useSession.hook.js b/net/web/src/session/useSession.hook.js index 2f519677..c3007728 100644 --- a/net/web/src/session/useSession.hook.js +++ b/net/web/src/session/useSession.hook.js @@ -98,9 +98,6 @@ export function useSession() { useEffect(() => { const { display, theme } = settings.state; updateState({ display, theme }); - -console.log("SET THEME: ", theme); - }, [settings.state]); useEffect(() => {