styling listing component

net/web/src/session/Session.jsx

@@ -214,7 +214,7 @@ export function Session() {
                   <Cards closeCards={closeCards} openContact={actions.openContact} openChannel={openConversation} openListing={actions.openListing} />
                   <Drawer bodyStyle={drawerStyle} visible={state.listing} closable={false}
                       onClose={actions.closeListing} getContainer={false} height={'100%'}
-                      style={{ position: 'absolute', overflow: 'hidden' }}>
+                      style={{ width: '80%', position: 'absolute', overflow: 'hidden' }}>
                     <Listing closeListing={actions.closeListing} openContact={actions.openContact} />
                   </Drawer>
                 </div>
@@ -266,12 +266,12 @@ export function Session() {
                 { state.cards && (
                   <Cards closeCards={closeCards} openContact={actions.openContact} openChannel={openConversation} openListing={actions.openListing} />
                 )}
-                <Drawer bodyStyle={drawerStyle} visible={state.listing} closable={false}
+                <Drawer bodyStyle={drawerStyle} visible={state.listing} closable={false} width={'80%'}
                     onClose={actions.closeListing} getContainer={false} height={'100%'}
                     style={{ overflow: 'hidden', position: 'absolute' }}>
                   <Listing closeListing={actions.closeListing} openContact={actions.openContact} />
                 </Drawer>
-                <Drawer bodyStyle={drawerStyle} width={'33%'} closable={false} onClose={actions.closeContact} visible={state.contact} zIndex={30}>
+                <Drawer bodyStyle={drawerStyle} width={'35%'} closable={false} onClose={actions.closeContact} visible={state.contact} zIndex={30}>
                   { state.contact && (
                     <Contact close={actions.closeContact} guid={state.contactGuid} listing={state.contactListing} />
                   )}

net/web/src/session/cards/Cards.styled.js

@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import { Colors } from 'constants/Colors';
 
 export const CardsWrapper = styled.div`
   height: 100%;

net/web/src/session/listing/Listing.jsx

@@ -1,6 +1,6 @@
 import { Modal, Button, Input, List } from 'antd';
 import { ListingWrapper } from './Listing.styled';
-import { UserOutlined, FilterOutlined, RightOutlined, CloseOutlined, DatabaseOutlined, SearchOutlined } from '@ant-design/icons';
+import { UserOutlined, FilterOutlined, CloseOutlined, DatabaseOutlined, SearchOutlined } from '@ant-design/icons';
 import { useListing } from './useListing.hook';
 import { ListingItem } from './listingItem/ListingItem';
 
@@ -16,9 +16,9 @@ export function Listing({ closeListing, openContact }) {
     catch(err) {
       console.log(err);
       modal.error({
-        title: 'Communication Error',
+        title: <span style={state.menuStyle}>{state.strings.operationFailed}</span>,
-        content: 'Please confirm your server name.',
+        content: <span style={state.menuStyle}>{state.strings.tryAgain}</span>,
-        bodyStyle: { padding: 16 },
+        bodyStyle: { borderRadius: 8, padding: 16, ...state.menuStyle },
       });
     }
   }
@@ -26,44 +26,41 @@ export function Listing({ closeListing, openContact }) {
   return (
     <ListingWrapper>
       { modalContext }
-      <div class="search">
+      <div className="search">
         { !state.showFilter && (
-          <div class="showfilter" onClick={actions.showFilter}>
+          <div className="showfilter" onClick={actions.showFilter}>
             <FilterOutlined />
           </div> 
         )}
         { state.showFilter && (
-          <div class="hidefilter" onClick={actions.hideFilter}>
+          <div className="hidefilter" onClick={actions.hideFilter}>
             <FilterOutlined />
           </div> 
         )}
-        <div class="params">
+        <div className="params">
-          <div class="node">
+          <div className="node">
-            <Input bordered={false} allowClear={true} placeholder="Server" 
+            <Input className="nodeControl" bordered={false} placeholder="Server" 
                 prefix={<DatabaseOutlined />} value={state.node} spellCheck="false" 
                 disabled={state.disabled} onChange={(e) => actions.onNode(e.target.value)} />
           </div>
           { state.showFilter && (
-            <div class="username">
+            <div className="node">
-              <Input bordered={false} allowClear={true} placeholder="Username" 
+              <Input className="nodeControl" bordered={false} placeholder="Username" 
                   prefix={<UserOutlined />} value={state.username} spellCheck="false" 
                   onChange={(e) => actions.setUsername(e.target.value)} />
             </div>
           )}
         </div>
-        <div class="inline">
+        <div className="inline">
           <Button type="text" icon={<SearchOutlined />} loading={state.busy} onClick={getListing}></Button>
         </div>
-        <div class="inline">
-          { state.display !== 'small' && (
-            <Button type="text" icon={<RightOutlined />} onClick={closeListing}></Button>
-          )}
         { state.display === 'small' && (
+          <div className="inline">
             <Button type="text" icon={<CloseOutlined />} onClick={closeListing}></Button>
+          </div>
         )}
       </div>
-      </div>
+      <div className="view">
-      <div class="view">
         { state.contacts.length > 0 && (
           <List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.contacts} gutter="0"
             renderItem={item => (
@@ -71,7 +68,7 @@ export function Listing({ closeListing, openContact }) {
             )} />
         )}
         { state.contacts.length === 0 && (
-          <div class="empty">No Contacts</div>
+          <div className="empty">No Contacts</div>
         )}
       </div>
     </ListingWrapper>

net/web/src/session/listing/Listing.styled.js

@@ -6,7 +6,19 @@ export const ListingWrapper = styled.div`
   width: 100%;
   display: flex;
   flex-direction: column;
-  background-color: ${Colors.card};
+  background-color: ${props => props.theme.itemArea};
+  color: ${props => props.theme.mainText};
+
+  .drawer {
+    width: 100%;
+    height: 100%;
+    border-left: 1px solid ${props => props.theme.sectionBorder};
+  }
+
+  .screen {
+    width: 100%;
+    height: 100%;
+  }
 
   .view {
     min-height: 0;
@@ -18,13 +30,13 @@ export const ListingWrapper = styled.div`
       align-items: center;
       justify-content: center;
       font-style: italic;
-      color: ${Colors.grey};
+      color: ${props => props.theme.hintText};
       height: 100%;
     }
   }
   
   .search {
-    border-bottom: 1px solid ${Colors.divider};
+    border-bottom: 1px solid ${props => props.theme.sectionBorder};
     display: flex;
     flex-direction: row;
     min-height: 48px;
@@ -35,18 +47,18 @@ export const ListingWrapper = styled.div`
     flex-shrink: 0;
 
     .showfilter {
-      color: ${Colors.disabled};
+      color: ${props => props.theme.hintText};
       font-size: 18px;
-      padding-right: 8px;
+      padding-right: 16px;
       display: flex;
       align-items: center;
       cursor: pointer;
     } 
 
     .hidefilter {
-      color: ${Colors.enabled};
+      color: ${props => props.theme.mainText};
       font-size: 18px;
-      padding-right: 8px;
+      padding-right: 16px;
       display: flex;
       align-items: center;
       cursor: pointer;
@@ -56,21 +68,28 @@ export const ListingWrapper = styled.div`
       flex-grow: 1;
     }
 
-    .username {
+    .node { 
-      border: 1px solid ${Colors.divider};
+      border: 1px solid ${props => props.theme.sectionBorder};
-      background-color: ${Colors.white};
+      background-color: ${props => props.theme.inputArea};
       border-radius: 8px;
-      margin-top: 4px;
+      flex-grow: 1;
+
+      .nodeControl {
+        color: ${props => props.theme.mainText};
+
+        input {
+          padding-left: 4px;
+          color: ${props => props.theme.mainText};
         }
 
-    .node {
+        input::placeholder {
-      border: 1px solid ${Colors.divider};
+          color: ${props => props.theme.placeholderText};
-      background-color: ${Colors.white};
+        }
-      border-radius: 8px;
+      }
     }
 
     .inline {
-      padding-left: 4px;
+      padding-left: 8px;
       display: flex;
       flex-shrink: 0;
       align-items: center;
@@ -78,6 +97,10 @@ export const ListingWrapper = styled.div`
       flex-direction: row;
       align-items: center;
       justify-content: center;
+
+      .anticon {
+        color: ${props => props.theme.mainText};
+      }
     }
   }
 `;

net/web/src/session/listing/listingItem/ListingItem.styled.js

@@ -6,12 +6,13 @@ export const ListingItemWrapper = styled.div`
   width: 100%;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid ${Colors.divider};
+  border-bottom: 1px solid ${params => params.theme.itemBorder};
+  color: ${params => params.theme.mainText};
   padding-left: 16px;
   padding-right: 16px;
 
   &:hover {
-    background-color: ${Colors.formHover};
+    background-color: ${params => params.theme.hoverArea};
     cursor: pointer;
   }
 

net/web/src/session/listing/useListing.hook.js

@@ -14,6 +14,8 @@ export function useListing() {
     disabled: true,
     showFilter: false,
     display: null,
+    strings: {},
+    menuStyle: {},
   });
 
   const profile = useContext(ProfileContext);
@@ -78,7 +80,8 @@ export function useListing() {
   }, [profile.state]);
 
   useEffect(() => {
-    updateState({ display: settings.state.display });
+    const { display, strings, menuStyle } = settings.state;
+    updateState({ display, strings, menuStyle });
   }, [settings.state]);
 
   return { state, actions };

todo

@@ -5,12 +5,6 @@ contact:
   - action buttons
   - show sync error message
 
-listing:
-  - dark style
-  - translation
-  - remove back
-  - match widtch
-
 thread:
   - dark style
   - translation