components/groups/components/__tests__/groupProposals.test.tsx (1)

Line range hint 1-142: Consider adding theme-related test coverage.

Since this PR focuses on theming improvements, consider adding test cases to verify:

• Component rendering in both dark and light modes
• Proper application of theme colors
• Hover state styling for interactive elements

Example test case:

test('applies correct theme styles', () => {
  const { rerender } = renderWithChainProvider(
    <ProposalsForPolicy {...mockProps} />,
    { theme: 'light' }
  );
  
  // Verify light theme styles
  const element = screen.getByTestId('proposals-container');
  expect(element).toHaveClass('bg-light-theme');
  
  // Verify dark theme styles
  rerender(
    <ProposalsForPolicy {...mockProps} />,
    { theme: 'dark' }
  );
  expect(element).toHaveClass('bg-dark-theme');
});

tailwind.config.js (2)

117-118: Review tooltip color consistency across themes.

The tooltip color is set to white (#ffffff) in both themes, which might not be optimal for the light theme. Consider using theme-specific colors for better visibility.

 light: {
   // ...
-  'tooltip-color': '#ffffff',
+  'tooltip-color': '#161616',
   // ...
 }

---

96-99: Consider theme-specific status colors.

The status colors (info, success, warning, error) are identical in both themes. While this maintains consistency, consider adjusting their brightness or saturation for better visibility in dark mode.

For dark theme, consider slightly brighter variants:

 dark: {
   // ...
-  info: '#3F51B5',
-  success: '#4CAF50',
-  warning: '#FFB300',
-  error: '#E53935',
+  info: '#5C6BC0',
+  success: '#66BB6A',
+  warning: '#FFCA28',
+  error: '#EF5350',
 }

Also applies to: 119-122

components/groups/components/myGroups.tsx (3)

Line range hint 86-95: Consider using Tailwind classes for font styles

Instead of using inline styles for font properties, consider using Tailwind's utility classes for better maintainability and consistency.

-                style={{ fontSize: '20px', fontWeight: 700, lineHeight: '24px' }}
+                className="text-secondary-content text-xl font-bold leading-6"

---

124-152: Add tests for skeleton loading UI

The skeleton loading UI is not covered by tests. Consider adding tests to verify proper rendering of the loading state.

Would you like me to help generate test cases for the skeleton loading UI? Here's what we should test:

1. Verify skeleton renders when isLoading is true
2. Verify correct number of skeleton rows (12)
3. Verify skeleton doesn't render when isLoading is false

🧰 Tools

🪛 GitHub Check: codecov/patch

[warning] 126-150: components/groups/components/myGroups.tsx#L126-L150
Added lines #L126 - L150 were not covered by tests

---

Line range hint 227-269: Improve accessibility for clickable rows

While the styling is consistent, consider these accessibility improvements:

1. Add role="button" to the row
2. Add keyboard navigation support
3. Add aria-label for better screen reader support

     <tr
-      className="group text-black dark:text-white rounded-lg cursor-pointer transition-colors"
+      className="group text-black dark:text-white rounded-lg cursor-pointer transition-colors focus:outline-none focus:ring-2 focus:ring-primary"
+      role="button"
+      tabIndex={0}
+      aria-label={`Select group ${groupName}`}
       onClick={e => {
         e.stopPropagation();
         onSelectGroup(policyAddress, groupName, ...);
       }}
+      onKeyDown={e => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onSelectGroup(policyAddress, groupName, ...);
+        }
+      }}
     >

components/groups/components/groupProposals.tsx (3)

Line range hint 244-268: Add ARIA labels for better accessibility

The header buttons lack proper accessibility attributes which could make navigation difficult for screen reader users.

Apply these changes to improve accessibility:

-          <button onClick={onBack} className="btn btn-circle rounded-[16px] bg-secondary btn-md">
+          <button 
+            onClick={onBack} 
+            className="btn btn-circle rounded-[16px] bg-secondary btn-md"
+            aria-label="Go back"
+          >
            <ArrowRightIcon className="text-primary" />
          </button>

           <button
             className="btn w-[140px] h-[52px] rounded-[12px] focus:outline-none dark:bg-[#FFFFFF0F] bg-[#0000000A]"
             onClick={openInfoModal}
+            aria-label="Open group information"
           >
             Info
           </button>
           <button
             className="btn w-[140px] h-[52px] rounded-[12px] focus:outline-none dark:bg-[#FFFFFF0F] bg-[#0000000A]"
             onClick={openMemberModal}
+            aria-label="Open member management"
           >
             Members
           </button>

---

269-287: Enhance search input with debouncing

The search functionality directly updates on every keystroke, which could cause performance issues with large datasets.

Consider implementing debouncing:

+import { useCallback } from 'react';
+import debounce from 'lodash/debounce';

 const [searchTerm, setSearchTerm] = useState('');
+const debouncedSearch = useCallback(
+  debounce((value: string) => {
+    setSearchTerm(value);
+  }, 300),
+  []
+);

 <input
   type="text"
   placeholder="Search for a proposal..."
   className="input input-bordered w-[224px] h-[40px] rounded-[12px] border-none bg-secondary text-secondary-content pl-10"
-  value={searchTerm}
-  onChange={e => setSearchTerm(e.target.value)}
+  defaultValue={searchTerm}
+  onChange={e => debouncedSearch(e.target.value)}
+  aria-label="Search proposals"
 />

---

Line range hint 357-388: Improve table accessibility and keyboard navigation

The table rows are clickable but lack proper keyboard navigation support and ARIA attributes.

Apply these changes to improve accessibility:

 <tr
   key={proposal.id.toString()}
   onClick={() => handleRowClick(proposal)}
-  className="group text-black dark:text-white rounded-lg cursor-pointer"
+  className="group text-black dark:text-white rounded-lg cursor-pointer focus-within:ring-2 focus-within:ring-primary"
+  role="button"
+  tabIndex={0}
+  onKeyPress={(e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      handleRowClick(proposal);
+    }
+  }}
+  aria-label={`Proposal ${proposal.id}: ${proposal.title}`}
 >

Also, consider adding a role="status" to the loading spinner and empty state message for better screen reader support.

components/groups/modals/voteDetailsModal.tsx (5)

69-69: Theme colors should be defined in the theme configuration

The hardcoded color values (#FFFFFF, #161616) and chart colors should be moved to the theme configuration for better maintainability and consistency.

Consider moving these values to your theme configuration:

- const textColor = theme === 'dark' ? '#FFFFFF' : '#161616';
+ const textColor = theme === 'dark' ? colors.dark.text : colors.light.text;

- colors: ['#4CAF50', '#E53935', '#FFB300', '#3F51B5'],
+ colors: theme === 'dark' 
+   ? colors.dark.chart 
+   : colors.light.chart,

Also applies to: 188-188

---

515-516: Improve table accessibility and responsiveness

The table implementation could be enhanced for better accessibility and mobile responsiveness.

1. Add role="table" for better screen reader support
2. Consider using CSS Grid for better mobile layout
3. Add proper ARIA labels for the table cells

- <div className="bg-base-300 rounded-[12px] p-4 w-full">
-   <div className="overflow-x-auto w-full min-h-64 max-h-[22.5rem] overflow-y-auto">
-     <table className="table-auto w-full text-sm">
+ <div className="bg-base-300 rounded-[12px] p-4 w-full">
+   <div className="overflow-x-auto w-full min-h-64 max-h-[22.5rem] overflow-y-auto">
+     <table role="table" className="table-auto w-full text-sm" aria-label="Group Members">

Also applies to: 541-541, 545-547

🧰 Tools

🪛 GitHub Check: codecov/patch

[warning] 515-516: components/groups/modals/voteDetailsModal.tsx#L515-L516
Added lines #L515 - L516 were not covered by tests

---

509-511: Consider adding loading states for the chart

The chart rendering doesn't handle loading states, which could lead to a poor user experience during data fetching.

+ const [isChartLoading, setIsChartLoading] = useState(true);
  <div className="bg-base-300 rounded-[12px] w-full">
+   {isChartLoading && <div className="loading loading-lg" />}
    <Chart options={options} series={[{ data: chartData }]} type="bar" height={200} />
  </div>

🧰 Tools

🪛 GitHub Check: codecov/patch

[warning] 509-509: components/groups/modals/voteDetailsModal.tsx#L509
Added line #L509 was not covered by tests

---

518-532: Improve table header accessibility

The table headers could be enhanced for better accessibility and semantic meaning.

- <thead className="text-xs uppercase bg-neutral">
+ <thead className="text-xs uppercase bg-neutral" role="rowgroup">
    <tr>
      <th
        scope="col"
+       role="columnheader"
+       aria-sort="none"
        className="px-6 py-3 first:rounded-tl-[12px] text-primary-content"
      >
        Address
      </th>

🧰 Tools

🪛 GitHub Check: codecov/patch

[warning] 518-518: components/groups/modals/voteDetailsModal.tsx#L518
Added line #L518 was not covered by tests

---

[warning] 520-522: components/groups/modals/voteDetailsModal.tsx#L520-L522
Added lines #L520 - L522 were not covered by tests

---

[warning] 526-526: components/groups/modals/voteDetailsModal.tsx#L526
Added line #L526 was not covered by tests

---

[warning] 529-531: components/groups/modals/voteDetailsModal.tsx#L529-L531
Added lines #L529 - L531 were not covered by tests

---

133-135: Chart legend markers configuration could be simplified

The current chart legend marker configuration can be simplified using the theme's color palette.

- markers: {
-   strokeWidth: 0,
- },
+ markers: {
+   strokeWidth: 0,
+   fillColors: theme === 'dark' ? colors.dark.chart : colors.light.chart,
+ },

Configuration used: CodeRabbit UI
Review profile: CHILL

components/groups/modals/voteDetailsModal.tsx (1)

Based on the initial search results, I can generate the final response since we found enough context showing:

1. The existence of ProposalMessages.test.tsx with commented-out message-related tests
2. The renderMessageField function implementation in voteDetailsModal.tsx
3. No existing test file for voteDetailsModal.tsx

Add test coverage for message field rendering

The renderMessageField function handles complex rendering logic for different types of message fields (arrays, objects, strings) but lacks test coverage. Consider:

• Creating a new test file voteDetailsModal.test.tsx
• Adding test cases for:
  • Array type message fields
  • Object type message fields
  • String fields with address-like content
  • Regular string fields with truncation

🔗 Analysis chain

Line range hint 355-382: Add test coverage for message rendering

The renderMessageField function and its text styling changes lack test coverage. Consider adding unit tests for different message types and their rendering outcomes.

---

Let me gather more information about the test coverage and related components.

---

Let me try one more search with corrected file type flags:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Find existing test files for this component
fd "voteDetailsModal.test" --type f

# Check for any existing message rendering tests
rg -A 5 "renderMessageField|test\(.*message" 

Length of output: 9395

---

Script:

#!/bin/bash
# Look for test files related to vote details or message rendering
fd "test.(tsx|ts)" --type f | rg -i "vote|message"

# Check for any existing test setup or utilities for modal testing
rg -A 5 "render.*Modal|Modal.*test" --type ts --type tsx

# Look for any existing snapshot tests
rg "toMatchSnapshot|snapshot" --type ts --type tsx

Length of output: 290

---

Script:

#!/bin/bash
# Look for modal test patterns and snapshots
rg -t typescript -t typescriptreact -A 5 "render.*Modal|Modal.*test"

# Check for any existing test utilities or helpers
fd "test-utils|testing" --type f

# Look for similar components with tests
rg -t typescript -t typescriptreact "describe.*Modal.*|test.*Modal.*" -A 5

Length of output: 252

🧰 Tools

🪛 GitHub Check: codecov/patch

[warning] 376-376: components/groups/modals/voteDetailsModal.tsx#L376
Added line #L376 was not covered by tests

---

[warning] 380-382: components/groups/modals/voteDetailsModal.tsx#L380-L382
Added lines #L380 - L382 were not covered by tests

Configuration used: CodeRabbit UI
Review profile: CHILL

components/groups/components/myGroups.tsx (2)

124-152: Add test coverage for skeleton loading state

The skeleton loading implementation looks good, but test coverage is missing for this section.

Would you like me to help generate test cases for the skeleton loading state? This should include:

• Verifying skeleton renders when isLoading is true
• Checking correct number of skeleton rows
• Validating skeleton styling classes

🧰 Tools

🪛 GitHub Check: codecov/patch

[warning] 126-150: components/groups/components/myGroups.tsx#L126-L150
Added lines #L126 - L150 were not covered by tests

---

Line range hint 227-238: Enhance keyboard accessibility

While the styling improvements look good, consider adding keyboard accessibility for better user experience.

    <tr
      className="group text-black dark:text-white rounded-lg cursor-pointer transition-colors"
+     role="button"
+     tabIndex={0}
+     onKeyDown={(e) => {
+       if (e.key === 'Enter' || e.key === ' ') {
+         e.preventDefault();
+         onSelectGroup(
+           policyAddress,
+           groupName,
+           (group.policies &&
+             (group.policies[0]?.decision_policy as ThresholdDecisionPolicySDKType)?.threshold) ??
+             '0'
+         );
+       }
+     }}
      onClick={e => {

Configuration used: CodeRabbit UI
Review profile: CHILL