styling profile bar

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

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 (
     <ThemeProvider theme={settings.state.colors}>
       <SessionWrapper>
@@ -210,7 +212,7 @@ export function Session() {
               { state.cards && (
                 <div class="reframe">
                   <Cards closeCards={closeCards} openContact={actions.openContact} openChannel={openConversation} openListing={actions.openListing} />
-                  <Drawer bodyStyle={{ padding: 0 }} visible={state.listing} closable={false}
+                  <Drawer bodyStyle={drawerStyle} visible={state.listing} closable={false}
                       onClose={actions.closeListing} getContainer={false} height={'100%'}
                       style={{ position: 'absolute', overflow: 'hidden' }}>
                     <Listing closeListing={actions.closeListing} openContact={actions.openContact} />
@@ -253,28 +255,29 @@ export function Session() {
                       cardId={state.cardId} channelId={state.channelId} />
                 </div>
               )}
-              <Drawer bodyStyle={{ padding: 0 }} width={'33%'} closable={false} onClose={actions.closeDetails} visible={state.details} zIndex={10}>
+              <Drawer bodyStyle={drawerStyle} width={'33%'} closable={false}
+                  onClose={actions.closeDetails} visible={state.details} zIndex={10}>
                 { state.details && (
                   <Details closeDetails={actions.closeDetails} closeConversation={closeConversation} openContact={actions.openContact}
                       cardId={state.cardId} channelId={state.channelId} />
                 )}
               </Drawer>
-              <Drawer bodyStyle={{ padding: 0 }} width={'33%'} closable={false} onClose={closeCards} visible={state.cards} zIndex={20} push={state.contact}>
+              <Drawer bodyStyle={drawerStyle} width={'33%'} closable={false} onClose={closeCards} visible={state.cards} zIndex={20} push={state.contact}>
                 { state.cards && (
                   <Cards closeCards={closeCards} openContact={actions.openContact} openChannel={openConversation} openListing={actions.openListing} />
                 )}
-                <Drawer bodyStyle={{ padding: 0 }} visible={state.listing} closable={false}
+                <Drawer bodyStyle={drawerStyle} visible={state.listing} closable={false}
                     onClose={actions.closeListing} getContainer={false} height={'100%'}
                     style={{ overflow: 'hidden', position: 'absolute' }}>
                   <Listing closeListing={actions.closeListing} openContact={actions.openContact} />
                 </Drawer>
-                <Drawer bodyStyle={{ padding: 0 }} width={'33%'} closable={false} onClose={actions.closeContact} visible={state.contact} zIndex={30}>
+                <Drawer bodyStyle={drawerStyle} width={'33%'} closable={false} onClose={actions.closeContact} visible={state.contact} zIndex={30}>
                   { state.contact && (
                     <Contact close={actions.closeContact} guid={state.contactGuid} listing={state.contactListing} />
                   )}
                 </Drawer>
               </Drawer>
-              <Drawer bodyStyle={{ padding: 0 }} width={'33%'} closable={false} onClose={closeAccount} visible={state.profile || state.account} zIndex={40}>
+              <Drawer bodyStyle={drawerStyle} width={'33%'} closable={false} onClose={closeAccount} visible={state.profile || state.account} zIndex={40}>
                 { (state.profile || state.account) && (
                   <Profile closeProfile={closeAccount}/>
                 )}

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;

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};
+      color: ${props => props.theme.hintText};
-      background-color: ${Colors.white};
+      background-color: ${props => props.theme.disabledArea};
-      opacity: 0.7;
     }
   }
 
@@ -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};
+        color: ${props => props.theme.linkText};
-        background-color: ${Colors.white};
       }  
 
       .icon {
         padding-left: 4px;
         padding-right: 4px;
-        border: 1px solid ${Colors.profileForm};
+        color: ${props => props.theme.hintText};
-        border-raidus: 4px;
       }
 
       .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;
+      align-items: flex-start;
-      padding-bottom: 8px;
+      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};
+    color: ${props => props.theme.mainText};
-    background-color: ${Colors.primary};
+    background-color: ${props => props.theme.modalArea};
     margin-top: 8px;
     padding: 8px;
     border-radius: 4px;

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