From d245081ecf2e2e31f3239bf237472d781efba36b Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Sun, 25 Feb 2024 22:35:15 -0800
Subject: [PATCH] styling listing component

---
 net/web/src/session/Session.jsx               |  6 +-
 net/web/src/session/cards/Cards.styled.js     |  1 -
 net/web/src/session/listing/Listing.jsx       | 41 +++++++------
 net/web/src/session/listing/Listing.styled.js | 57 +++++++++++++------
 .../listing/listingItem/ListingItem.styled.js |  5 +-
 .../src/session/listing/useListing.hook.js    |  5 +-
 todo                                          |  6 --
 7 files changed, 69 insertions(+), 52 deletions(-)

diff --git a/net/web/src/session/Session.jsx b/net/web/src/session/Session.jsx
index b0f2fde0..bec3b624 100644
--- a/net/web/src/session/Session.jsx
+++ b/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} />
                   )}
diff --git a/net/web/src/session/cards/Cards.styled.js b/net/web/src/session/cards/Cards.styled.js
index 6e45f1a2..f8e9329b 100644
--- a/net/web/src/session/cards/Cards.styled.js
+++ b/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%;
diff --git a/net/web/src/session/listing/Listing.jsx b/net/web/src/session/listing/Listing.jsx
index 96437e93..9583b299 100644
--- a/net/web/src/session/listing/Listing.jsx
+++ b/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',
-        content: 'Please confirm your server name.',
-        bodyStyle: { padding: 16 },
+        title: <span style={state.menuStyle}>{state.strings.operationFailed}</span>,
+        content: <span style={state.menuStyle}>{state.strings.tryAgain}</span>,
+        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 class="node">
-            <Input bordered={false} allowClear={true} placeholder="Server" 
+        <div className="params">
+          <div className="node">
+            <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">
-              <Input bordered={false} allowClear={true} placeholder="Username" 
+            <div className="node">
+              <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' && (
+        { state.display === 'small' && (
+          <div className="inline">
             <Button type="text" icon={<CloseOutlined />} onClick={closeListing}></Button>
-          )}
-        </div>
+          </div>
+        )}
       </div>
-      <div class="view">
+      <div className="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>
diff --git a/net/web/src/session/listing/Listing.styled.js b/net/web/src/session/listing/Listing.styled.js
index 23b0c843..ada76060 100644
--- a/net/web/src/session/listing/Listing.styled.js
+++ b/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 {
-      border: 1px solid ${Colors.divider};
-      background-color: ${Colors.white};
+    .node { 
+      border: 1px solid ${props => props.theme.sectionBorder};
+      background-color: ${props => props.theme.inputArea};
       border-radius: 8px;
-      margin-top: 4px;
-    }
+      flex-grow: 1;
 
-    .node {
-      border: 1px solid ${Colors.divider};
-      background-color: ${Colors.white};
-      border-radius: 8px;
+      .nodeControl {
+        color: ${props => props.theme.mainText};
+
+        input {
+          padding-left: 4px;
+          color: ${props => props.theme.mainText};
+        }
+
+        input::placeholder {
+          color: ${props => props.theme.placeholderText};
+        }
+      }
     }
 
     .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};
+      }
     }
   }
 `;
diff --git a/net/web/src/session/listing/listingItem/ListingItem.styled.js b/net/web/src/session/listing/listingItem/ListingItem.styled.js
index 6b1135fb..8c1f72a9 100644
--- a/net/web/src/session/listing/listingItem/ListingItem.styled.js
+++ b/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;
   }
 
diff --git a/net/web/src/session/listing/useListing.hook.js b/net/web/src/session/listing/useListing.hook.js
index 6f2bc91f..170d9323 100644
--- a/net/web/src/session/listing/useListing.hook.js
+++ b/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 };
diff --git a/todo b/todo
index 237445e8..d6029996 100644
--- a/todo
+++ b/todo
@@ -5,12 +5,6 @@ contact:
   - action buttons
   - show sync error message
 
-listing:
-  - dark style
-  - translation
-  - remove back
-  - match widtch
-
 thread:
   - dark style
   - translation