styling profile components

2025-02-11 19:19:16 +00:00 · 2024-02-23 09:54:50 -08:00 · 2024-02-23 09:54:50 -08:00 · ff66e8457d
commit ff66e8457d
parent 1cd729c820
13 changed files with 62 additions and 35 deletions
--- 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',
--- 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: {},
--- a/net/web/src/session/Session.jsx
+++ b/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>
              )}
--- 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;
--- 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 }) {
      <div className="header">
        <div className="label">Settings</div>
        <div className="dismiss" onClick={closeAccount}>
-          <DoubleRightOutlined />
+          <RightOutlined />
        </div>
      </div>
      <div className="content">
--- 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%;
--- 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 }) {
        </div>
      )}
      <div className={ state.display === 'xlarge' ? 'midContent' : 'rightContent' }>
-        <div className="logo" onClick={actions.setEditProfileImage}>
-          <Logo url={state.url} width={'100%'} radius={4} />
-          <div className="edit">
-            <EditOutlined />
+        { state.urlSet && (
+          <div className="logo" onClick={actions.setEditProfileImage}>
+            <Logo url={state.url} width={'100%'} radius={4} />
+            <div className="edit">
+              <EditOutlined />
+            </div>
          </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' && (
-        <div>
+      { state.display !== 'xlarge' && state.displaySet && (
+        <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}
--- a/net/web/src/session/account/profile/Profile.styled.js
+++ b/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;
-    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;
--- 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() {
          <div className="option">
            <div className="label">Time Format</div>
            <Radio.Group onChange={actions.setTimeFormat} value={state.timeFormat}>
-              <Radio value={'12h'}>12h</Radio>
-              <Radio value={'24h'}>24h</Radio>
+              <Radio style={state.menuStyle} value={'12h'}>12h</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 value={'dd/mm'}>dd/mm</Radio>
+              <Radio style={state.menuStyle} value={'mm/dd'}>mm/dd</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={[
-                  { value: null, label: 'Default' },
-                  { value: 'light', label: 'Light' },
-                  { value: 'dark', label: 'Dark' },
-                ]}
+                options={state.themes}
              />
          </div>
          <div className="option">
--- 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};
--- 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) => {
--- 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 = {
--- 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(() => {