styling profile components

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',

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: {},

net/web/src/session/Session.jsx

@@ -197,7 +197,7 @@ export function Session() {
                 </div>
               )}
               { state.profile && (
-                <div class="reframe">
+                <div class="reframe base">
                   <Profile closeProfile={actions.closeProfile} />
                 </div>
               )}

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;

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 }) {
       <div className="header">
         <div className="label">Settings</div>
         <div className="dismiss" onClick={closeAccount}>
-          <DoubleRightOutlined />
+          <RightOutlined />
         </div>
       </div>
       <div className="content">

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%;

net/web/src/session/account/profile/Profile.jsx

@@ -105,12 +105,14 @@ export function Profile({ closeProfile }) {
         </div>
       )}
       <div className={ state.display === 'xlarge' ? 'midContent' : 'rightContent' }>
+        { state.urlSet && (
           <div className="logo" onClick={actions.setEditProfileImage}>
             <Logo url={state.url} width={'100%'} radius={4} />
             <div className="edit">
               <EditOutlined />
             </div>
           </div>
+        )}
         <div className="details">
           <div className="name" onClick={actions.setEditProfileDetails}>
             { state.name && (
@@ -143,8 +145,8 @@ export function Profile({ closeProfile }) {
           </div>
         </div>
       </div>
-      { state.display !== 'xlarge' && (
+      { state.display !== 'xlarge' && state.displaySet && (
-        <div>
+        <div className="rightAccess">
           <AccountAccess />
           { state.display === 'small' && (
             <div className="logout" onClick={logout}>
@@ -152,6 +154,7 @@ export function Profile({ closeProfile }) {
               <div className="label">Logout</div>
             </div>
           )}
+          <div className="contentFill" />
         </div>
       )}
       <Modal title="Profile Image" centered visible={state.editProfileImage} footer={editImageFooter}

net/web/src/session/account/profile/Profile.styled.js

@@ -6,7 +6,6 @@ export const ProfileWrapper = styled.div`
   width: 100%;
   display: flex;
   flex-direction: column;
-  background-color: ${props => 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;
+    width: 192px;
-    height: 256px;
+    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;

net/web/src/session/account/profile/accountAccess/AccountAccess.jsx

@@ -85,15 +85,15 @@ export function AccountAccess() {
           <div className="option">
             <div className="label">Time Format</div>
             <Radio.Group onChange={actions.setTimeFormat} value={state.timeFormat}>
-              <Radio value={'12h'}>12h</Radio>
+              <Radio style={state.menuStyle} value={'12h'}>12h</Radio>
-              <Radio value={'24h'}>24h</Radio>
+              <Radio style={state.menuStyle} value={'24h'}>24h</Radio>
             </Radio.Group>
           </div>
           <div className="option">
             <div className="label">Date Format</div>
             <Radio.Group onChange={actions.setDateFormat} value={state.dateFormat}>
-              <Radio value={'mm/dd'}>mm/dd</Radio>
+              <Radio style={state.menuStyle} value={'mm/dd'}>mm/dd</Radio>
-              <Radio value={'dd/mm'}>dd/mm</Radio>
+              <Radio style={state.menuStyle} value={'dd/mm'}>dd/mm</Radio>
             </Radio.Group>
           </div>
           <div className="option">
@@ -103,11 +103,7 @@ export function AccountAccess() {
                 style={{ width: 128 }}
                 value={state.theme}
                 onChange={actions.setTheme}
-                options={[
+                options={state.themes}
-                  { value: null, label: 'Default' },
-                  { value: 'light', label: 'Light' },
-                  { value: 'dark', label: 'Dark' },
-                ]}
               />
           </div>
           <div className="option">

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};

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;
+    const { menuStyle, timeFormat, dateFormat, theme, themes, language, languages } = settings.state;
-    updateState({ timeFormat, dateFormat, theme, language, languages });
+    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) => {

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 = {

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(() => {