Skip to content

Commit 5a28c0e

Browse files
prafull-opensignlabsprafull-opensignlabs
authored
Merge pull request #1802 from OpenSignLabs/updates-15735030679
v2.25.0
2 parents b0e0b38 + cbca22c commit 5a28c0e

File tree

81 files changed

+4912
-2311
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

81 files changed

+4912
-2311
lines changed

‎apps/OpenSign/docs/DARK_MODE_USAGE.md‎

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
# Tailwind Dark Mode Usage Guide
2+
3+
## Overview
4+
This guide shows how to use the new Tailwind utilities for better dark mode visibility in OpenSign.
5+
6+
## Button Styling
7+
8+
### VS Code-style Disabled Buttons
9+
```jsx
10+
// Option 1: Direct VS Code styling
11+
<button className="op-btn op-btn-primary op-btn-vscode-disabled" disabled>
12+
Disabled Button
13+
</button>
14+
15+
// Option 2: Themed disabled styling
16+
<button className="op-btn btn-themed-disabled">
17+
Themed Button
18+
</button>
19+
20+
// Option 3: Conditional styling
21+
<button
22+
className={`op-btn op-btn-primary ${isDisabled ? 'op-btn-vscode-disabled' : ''}`}
23+
disabled={isDisabled}
24+
>
25+
Dynamic Button
26+
</button>
27+
```
28+
29+
## Icon Styling
30+
31+
### Theme-aware Icons
32+
```jsx
33+
// Better visibility in dark mode
34+
<i className="fa-light fa-folder icon-improved"></i>
35+
36+
// Muted but still visible
37+
<i className="fa-light fa-plus icon-muted"></i>
38+
39+
// Disabled state
40+
<i className="fa-light fa-trash icon-disabled"></i>
41+
```
42+
43+
### CSS Variable Approach
44+
```jsx
45+
// Using CSS variables
46+
<i className="fa-light fa-search icon-themed"></i>
47+
<i className="fa-light fa-settings icon-themed-muted"></i>
48+
49+
// Inline styles with CSS variables
50+
<i
51+
className="fa-light fa-plus"
52+
style={{ color: 'var(--icon-color)' }}
53+
/>
54+
```
55+
56+
### Legacy JavaScript Function (Still Supported)
57+
```jsx
58+
// Existing approach - still works
59+
<i
60+
className="fa-light fa-plus"
61+
style={{ color: getThemeIconColor() }}
62+
/>
63+
```
64+
65+
## Text Styling
66+
67+
### Improved Gray Text
68+
```jsx
69+
// These automatically improve in dark mode
70+
<span className="text-gray-500">More visible in dark mode</span>
71+
<span className="text-gray-400">Muted but readable</span>
72+
<span className="text-gray-600">Clear text</span>
73+
```
74+
75+
## Complete Examples
76+
77+
### Toolbar with Better Visibility
78+
```jsx
79+
const Toolbar = () => (
80+
<div className="flex space-x-2 p-2">
81+
<button className="p-2 hover:bg-gray-200 rounded">
82+
<i className="fa-light fa-plus icon-improved"></i>
83+
</button>
84+
<button className="p-2 hover:bg-gray-200 rounded" disabled>
85+
<i className="fa-light fa-trash icon-disabled"></i>
86+
</button>
87+
<button className="p-2 hover:bg-gray-200 rounded">
88+
<i className="fa-light fa-edit icon-improved"></i>
89+
</button>
90+
</div>
91+
);
92+
```
93+
94+
### Form with Disabled States
95+
```jsx
96+
const Form = ({ isSubmitting }) => (
97+
<form>
98+
<input className="op-input" />
99+
<button
100+
className={`op-btn op-btn-primary ${isSubmitting ? 'op-btn-vscode-disabled' : ''}`}
101+
disabled={isSubmitting}
102+
>
103+
{isSubmitting ? 'Submitting...' : 'Submit'}
104+
</button>
105+
</form>
106+
);
107+
```
108+
109+
## React-Tour and Tooltip Dark Mode Support
110+
111+
### React-Tour Modals
112+
The react-tour modals now automatically support dark mode with VS Code-inspired styling:
113+
114+
```jsx
115+
// These components automatically get dark mode styling
116+
<Tour
117+
onRequestClose={closeTour}
118+
steps={tourConfig}
119+
isOpen={isOpen}
120+
rounded={5}
121+
/>
122+
```
123+
124+
### ReactTooltip Components
125+
All ReactTooltip instances now support dark mode:
126+
127+
```jsx
128+
// Automatically styled for dark mode
129+
<ReactTooltip id="my-tooltip" className="z-[999]">
130+
<div className="max-w-[200px]">
131+
<p>Tooltip content</p>
132+
</div>
133+
</ReactTooltip>
134+
```
135+
136+
### HoverCard Balloon UI
137+
The balloon tooltips in OpenSign Drive now properly support dark mode:
138+
139+
```jsx
140+
// These automatically get dark styling in dark mode
141+
<HoverCard>
142+
<HoverCardContent>
143+
Document information
144+
</HoverCardContent>
145+
</HoverCard>
146+
```
147+
148+
## Dark Mode Features Added
149+
150+
### 1. **React-Tour Modal Styling**
151+
- Background: `#1F2937` (VS Code modal background)
152+
- Text: `#E5E7EB` (soft white for readability)
153+
- Borders: `#374151` (subtle borders)
154+
- Buttons: VS Code-style primary/secondary buttons
155+
156+
### 2. **ReactTooltip Styling**
157+
- Background: `#1F2937` with proper contrast
158+
- Border: `#374151` for definition
159+
- Box shadow: Enhanced for dark backgrounds
160+
- Text: `#E5E7EB` for optimal readability
161+
162+
### 3. **HoverCard Balloon UI**
163+
- Background: `#1F2937` (matches VS Code)
164+
- Text: `#E5E7EB` for readability
165+
- Arrow: Automatically matches background color
166+
- Enhanced shadows for dark backgrounds
167+
168+
### 4. **React-Datepicker Support**
169+
- Calendar background: `#1F2937`
170+
- Selected dates: VS Code blue (`#007ACC`)
171+
- Hover states: Proper contrast ratios
172+
- Navigation arrows: Themed appropriately
173+
174+
## CSS Classes Reference
175+
176+
| Class | Purpose | Dark Mode Color |
177+
|-------|---------|----------------|
178+
| `icon-improved` | Better icon visibility | `#CCCCCC` |
179+
| `icon-muted` | Muted but visible icons | `#999999` |
180+
| `icon-disabled` | Disabled icon state | `#858585` |
181+
| `op-btn-vscode-disabled` | VS Code disabled button | Background: `#3C3C3C` |
182+
| `btn-themed-disabled` | Themed disabled button | Uses CSS variables |
183+
| `icon-themed` | Variable-based icon color | `var(--icon-color)` |
184+
| `.reactour__helper` | `#1F2937` background |
185+
| `.react-tooltip` | `#1F2937` background |
186+
| `.HoverCardContent` | `#1F2937` background |
187+
| `.react-datepicker` | `#1F2937` background |
188+
189+
## Migration Guide
190+
191+
### From JavaScript Function to Tailwind
192+
```jsx
193+
// Before
194+
<i style={{ color: getThemeIconColor() }} className="fa-light fa-plus" />
195+
196+
// After
197+
<i className="fa-light fa-plus icon-improved" />
198+
```
199+
200+
### From Hardcoded Colors to Theme-aware
201+
```jsx
202+
// Before
203+
<i className="fa-light fa-plus text-gray-500" />
204+
205+
// After (automatic improvement)
206+
<i className="fa-light fa-plus text-gray-500" />
207+
// OR explicitly
208+
<i className="fa-light fa-plus icon-improved" />
209+
```
210+
211+
## Migration Notes
212+
213+
All existing tooltip and tour components will automatically inherit the new dark mode styling when the theme is set to `opensigndark`. No code changes required for existing implementations.

‎apps/OpenSign/examples/tailwind-usage-examples.js‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
/**
2+
* Tailwind Dark Mode Usage Examples for OpenSign
3+
*
4+
* This file demonstrates how to use the new Tailwind utilities
5+
* for better dark mode visibility of buttons and icons.
6+
*/
7+
8+
// Example 1: VS Code-style disabled buttons
9+
const DisabledButtonExamples = () => {
10+
return (
11+
<div>
12+
{/* Option A: Using the VS Code disabled style */}
13+
<button className="op-btn op-btn-primary op-btn-vscode-disabled" disabled>
14+
VS Code Style Disabled Button
15+
</button>
16+
17+
{/* Option B: Using themed disabled style */}
18+
<button className="op-btn btn-themed-disabled">
19+
Themed Disabled Button
20+
</button>
21+
22+
{/* Option C: Conditional styling */}
23+
<button
24+
className={`op-btn op-btn-primary ${
25+
isDisabled ? "op-btn-vscode-disabled" : ""
26+
}`}
27+
disabled={isDisabled}
28+
>
29+
Conditional Button
30+
</button>
31+
</div>
32+
);
33+
};
34+
35+
// Example 2: Icon visibility improvements
36+
const IconExamples = () => {
37+
return (
38+
<div>
39+
{/* Theme-aware icons with better visibility */}
40+
<i className="fa-light fa-folder icon-improved"></i>
41+
<i className="fa-light fa-plus icon-muted"></i>
42+
<i className="fa-light fa-trash icon-disabled"></i>
43+
44+
{/* Using CSS variables */}
45+
<i className="fa-light fa-search icon-themed"></i>
46+
<i className="fa-light fa-settings icon-themed-muted"></i>
47+
48+
{/* Gray text that automatically improves in dark mode */}
49+
<span className="text-gray-500">
50+
This text is now more visible in dark mode
51+
</span>
52+
<span className="text-gray-400">Muted but still readable</span>
53+
</div>
54+
);
55+
};
56+
57+
// Example 3: Using CSS variables in inline styles
58+
const InlineStyleExamples = () => {
59+
return (
60+
<div>
61+
{/* Using CSS variables directly */}
62+
<i className="fa-light fa-plus" style={{ color: "var(--icon-color)" }} />
63+
64+
{/* Using the existing JavaScript function */}
65+
<i className="fa-light fa-minus" style={{ color: getThemeIconColor() }} />
66+
</div>
67+
);
68+
};
69+
70+
// Example 4: Toolbar with improved icons
71+
const ToolbarExample = () => {
72+
return (
73+
<div className="flex space-x-2 p-2">
74+
<button className="p-2 hover:bg-gray-200 rounded">
75+
<i className="fa-light fa-plus icon-improved"></i>
76+
</button>
77+
<button className="p-2 hover:bg-gray-200 rounded" disabled>
78+
<i className="fa-light fa-trash icon-disabled"></i>
79+
</button>
80+
<button className="p-2 hover:bg-gray-200 rounded">
81+
<i className="fa-light fa-edit icon-improved"></i>
82+
</button>
83+
</div>
84+
);
85+
};
86+
87+
export {
88+
DisabledButtonExamples,
89+
IconExamples,
90+
InlineStyleExamples,
91+
ToolbarExample
92+
};

0 commit comments

Comments
 (0)