From ebecfe9b0c6dcfab02c9c2821838024d827ce366 Mon Sep 17 00:00:00 2001 From: Roland Osborne Date: Wed, 21 Feb 2024 09:31:05 -0800 Subject: [PATCH] styling profile bar --- net/web/src/constants/Colors.js | 4 +- net/web/src/session/Session.jsx | 15 +++--- net/web/src/session/account/Account.styled.js | 10 ++-- .../session/account/profile/Profile.styled.js | 47 ++++++++++--------- .../accountAccess/AccountAccess.styled.js | 8 ++-- 5 files changed, 47 insertions(+), 37 deletions(-) diff --git a/net/web/src/constants/Colors.js b/net/web/src/constants/Colors.js index 59400f01..b1caa718 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', + iconArea: '#ffffff', headerArea: '#f0f0f0', footerArea: '#f0f0f0', modalArea: '#eeeeee', @@ -66,6 +67,7 @@ export const LightTheme = { export const DarkTheme = { baseArea: '#080808', + iconArea: '#ffffff', headerArea: '#111111', footerArea: '#111111', modalArea: '#444444', @@ -82,7 +84,7 @@ export const DarkTheme = { activeText: '#ffffff', idleText: '#aaaaaa', placeholderText: '#cccccc', - linkText: '#448866', + linkText: '#66aa88', labelText: '#dddddd', alertText: '#ff8888', itemBorder: '#555555', diff --git a/net/web/src/session/Session.jsx b/net/web/src/session/Session.jsx index 95ccb77e..cd6a912c 100644 --- a/net/web/src/session/Session.jsx +++ b/net/web/src/session/Session.jsx @@ -158,6 +158,8 @@ export function Session() { actions.closeDetails(); } + const drawerStyle = { padding: 0, backgroundColor: settings.state.colors.baseArea }; + return ( @@ -210,7 +212,7 @@ export function Session() { { state.cards && (
- @@ -253,28 +255,29 @@ export function Session() { cardId={state.cardId} channelId={state.channelId} />
)} - + { state.details && (
)} - + { state.cards && ( )} - - + { state.contact && ( )} - + { (state.profile || state.account) && ( )} diff --git a/net/web/src/session/account/Account.styled.js b/net/web/src/session/account/Account.styled.js index 47b563b2..905d558e 100644 --- a/net/web/src/session/account/Account.styled.js +++ b/net/web/src/session/account/Account.styled.js @@ -2,16 +2,16 @@ import styled from 'styled-components'; import { Colors } from 'constants/Colors'; export const AccountWrapper = styled.div` - height: 100%; + min-height: 100%; width: 100%; display: flex; flex-direction: column; - background-color: ${Colors.statsForm}; + background-color: ${props => props.theme.itemArea};; .header { width: 100%; height: 48px; - border-bottom: 1px solid ${Colors.statsDivider}; + border-bottom: 1px solid ${props => props.theme.sectionBorder}; display: flex; flex-shrink: 0; align-items: center; @@ -27,7 +27,7 @@ export const AccountWrapper = styled.div` .dismiss { font-size: 18px; - color: ${Colors.text}; + color: ${props => props.theme.hintText}; cursor: pointer; } } @@ -50,7 +50,7 @@ export const AccountWrapper = styled.div` padding-bottom: 16px; .link { - color: ${Colors.primary}; + color: ${props => props.theme.linkText}; padding-top: 16px; padding-bottom: 8px; display: flex; diff --git a/net/web/src/session/account/profile/Profile.styled.js b/net/web/src/session/account/profile/Profile.styled.js index ac29b884..c55a970b 100644 --- a/net/web/src/session/account/profile/Profile.styled.js +++ b/net/web/src/session/account/profile/Profile.styled.js @@ -2,17 +2,18 @@ import styled from 'styled-components'; import { Colors } from 'constants/Colors'; export const ProfileWrapper = styled.div` - height: 100%; + min-height: 100%; width: 100%; display: flex; flex-direction: column; - background-color: ${Colors.profileForm}; + background-color: ${props => props.theme.selectedArea}; + color: ${props => props.theme.mainText}; .middleHeader { margin-left: 16px; margin-right: 16px; height: 48px; - border-bottom: 1px solid ${Colors.profileDivider}; + border-bottom: 1px solid ${props => props.theme.sectionBorder}; display: flex; flex-direction: row; align-items: center; @@ -27,7 +28,7 @@ export const ProfileWrapper = styled.div` .close { font-size: 16px; - color: ${Colors.primary}; + color: ${props => props.theme.hintText}; cursor: pointer; padding-right: 16px; } @@ -43,18 +44,19 @@ export const ProfileWrapper = styled.div` .title { font-size: 18px; font-weight: bold; + padding-top: 16px; } } .section { width: 100%; - color: ${Colors.grey}; + color: ${props => props.theme.hintText}; padding-top: 24px; font-size: 12px; display: flex; widtH: 75%; justify-content: center; - border-bottom: 1px solid ${Colors.divider}; + border-bottom: 1px solid ${props => props.theme.sectionBorder}; } .logo { @@ -65,7 +67,8 @@ export const ProfileWrapper = styled.div` margin-right: 32px; &:hover .edit { - opacity: 1; + color: ${props => props.theme.linkText}; + background-color: ${props => props.theme.iconArea}; } .edit { @@ -79,9 +82,8 @@ export const ProfileWrapper = styled.div` height: 24px; bottom: 0; right: 0; - color: ${Colors.link}; - background-color: ${Colors.white}; - opacity: 0.7; + color: ${props => props.theme.hintText}; + background-color: ${props => props.theme.disabledArea}; } } @@ -109,28 +111,30 @@ export const ProfileWrapper = styled.div` .details { display: flex; flex-direction: column; + padding-top: 16px; + padding-left: 16px; + padding-right: 16px; .notset { font-style: italic; - color: ${Colors.grey}; + color: ${props => props.theme.hintText}; } .name { display: flex; flex-direction: row; - align-items: center; + align-items: baseline; cursor: pointer; + justify-content: center; &:hover .icon { - border: 1px solid ${Colors.grey}; - background-color: ${Colors.white}; + color: ${props => props.theme.linkText}; } .icon { padding-left: 4px; padding-right: 4px; - border: 1px solid ${Colors.profileForm}; - border-raidus: 4px; + color: ${props => props.theme.hintText}; } .data { @@ -143,8 +147,9 @@ export const ProfileWrapper = styled.div` .location { display: flex; flex-direction: row; - align-items: center; + align-items: flex-start; padding-bottom: 8px; + padding-top: 8px; .data { padding-left: 8px; @@ -154,8 +159,8 @@ export const ProfileWrapper = styled.div` .description { display: flex; flex-direction: row; - align-items: center; - padding-bottom: 8px; + align-items: flex-start; + padding-top: 8px; .data { padding-left: 8px; @@ -183,8 +188,8 @@ export const ProfileWrapper = styled.div` flex-direction: row; align-items: center; cursor: pointer; - color: ${Colors.white}; - background-color: ${Colors.primary}; + color: ${props => props.theme.mainText}; + background-color: ${props => props.theme.modalArea}; margin-top: 8px; padding: 8px; border-radius: 4px; 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 29269ced..90b693aa 100644 --- a/net/web/src/session/account/profile/accountAccess/AccountAccess.styled.js +++ b/net/web/src/session/account/profile/accountAccess/AccountAccess.styled.js @@ -15,12 +15,12 @@ export const AccountAccessWrapper = styled.div` padding-bottom: 8px; .switchEnabled { - color: ${Colors.primary}; + color: ${props => props.theme.activeArea}; cursor: pointer; } .switchDisabled { - color: ${Colors.grey}; + color: ${props => props.theme.idleArea}; } .switchLabel { @@ -34,7 +34,7 @@ export const AccountAccessWrapper = styled.div` flex-direction: row; align-items: center; cursor: pointer; - color: ${Colors.primary}; + color: ${props => props.theme.linkText}; padding-top: 8px; padding-bottom: 8px; @@ -58,7 +58,7 @@ export const SealModal = styled.div` justify-content: center; .switchLabel { - color: ${Colors.text}; + color: ${props => props.theme.mainText}; padding-left: 8px; padding-right: 8px; }