TNO-2993: Fix My Searches Layout (#2232)

* fix my searches layout * lint
bcgov · Aug 29, 2024 · 1904944 · 1904944
1 parent 54fbdd2
commit 1904944
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 13 deletions.
diff --git a/app/subscriber/src/features/my-searches/MySearches.tsx b/app/subscriber/src/features/my-searches/MySearches.tsx
@@ -2,7 +2,7 @@ import { Action } from 'components/action';
 import { Modal } from 'components/modal';
 import React from 'react';
 import { FaCheck, FaSave } from 'react-icons/fa';
-import { FaBookmark, FaGear, FaPen, FaRegClipboard, FaTrash } from 'react-icons/fa6';
+import { FaBookmark, FaGear, FaPen, FaTrash } from 'react-icons/fa6';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { useApp, useContent, useFilters } from 'store/hooks';
@@ -77,15 +77,15 @@ export const MySearches = () => {
       <Grid
         items={sortedMyFilters}
         renderHeader={() => [
-          { name: 'name', label: '', size: '2fr' },
-          { name: 'actions', label: '', size: '1fr' },
+          { name: 'name', label: 'Name', size: '3fr' },
+          { name: 'keywords', label: 'Keywords', size: '10fr' },
         ]}
         renderColumns={(row: IFilterModel, rowIndex) => {
           const keywords = row.settings?.search ? row.settings.search : '';
-          const truncatedKeywords = truncateTeaser(keywords, 20);
+          const truncatedKeywords = truncateTeaser(keywords, 200);
 
           return [
-            <Row key="1" flex="1" gap="1rem">
+            <Row className="name" key="1" flex="1" gap="1rem">
               <Action icon={<FaBookmark />} onClick={() => handleClick(row)}>
                 <Col flex="1" className="link">
                   {editing?.id === row.id ? (
@@ -107,14 +107,14 @@ export const MySearches = () => {
             <Row key="2" justifyContent="flex-end" flex="1" gap="1rem">
               <Col flex="1">
                 {truncatedKeywords ? (
-                  <Row className="keywords-row">
+                  <Row
+                    className="keywords-row"
+                    onClick={() => handleCopyKeywords(row.settings?.search)}
+                    data-tooltip-content="Click to copy keywords to clipboard"
+                    data-tooltip-id={'main-tooltip'}
+                    data-tooltip-place="left-start"
+                  >
                     {truncatedKeywords}
-                    <Action
-                      icon={<FaRegClipboard />}
-                      title="Copy Keywords"
-                      className="copy-icon"
-                      onClick={() => handleCopyKeywords(row.settings?.search)}
-                    />
                   </Row>
                 ) : null}
               </Col>

diff --git a/app/subscriber/src/features/my-searches/styled/MySearches.tsx b/app/subscriber/src/features/my-searches/styled/MySearches.tsx
@@ -2,6 +2,13 @@ import styled from 'styled-components';
 import { Col } from 'tno-core';
 
 export const MySearches = styled(Col)`
+  .grid {
+    margin-top: 0.75rem;
+    .grid-header {
+      border-top: none;
+      border-bottom: 1px solid ${(props) => props.theme.css.linePrimaryColor};
+    }
+  }
   /* option items in the tooltip menu */
   .option {
     cursor: pointer;
@@ -36,7 +43,7 @@ export const MySearches = styled(Col)`
   .keywords-row {
     display: flex;
     align-items: center;
-    padding: 0.5rem;
+    cursor: pointer;
   }
   .copy-icon {
     opacity: 0;