@@ -167,95 +167,97 @@ export const AppearanceSettings: FC = () => {
167167 tooltip = {
168168 < Stack direction = "vertical" gap = "condensed" >
169169 < Text >
170- Enrich notifications with author or last commenter profile
171- information, state and GitHub-like colors.
170+ Enrich notifications with detailed user and state information.
171+ </ Text >
172+ < Text >
173+ You may also choose to display{ ' ' }
174+ < Text as = "strong" > notification metric pills</ Text > or{ ' ' }
175+ < Text as = "strong" > notification numbers</ Text > .
172176 </ Text >
173177 < Text className = "text-gitify-caution" >
174178 ⚠️ Users with a large number of unread notifications < i > may</ i > { ' ' }
175- experience rate limiting under certain circumstances. Disable
176- this setting if you experience this.
179+ experience rate limiting under certain circumstances. Please
180+ disable this setting if you experience this.
177181 </ Text >
178182 </ Stack >
179183 }
180184 />
181185
182- < Checkbox
183- name = "showPills"
184- label = "Show notification metric pills"
185- checked = { settings . showPills }
186- onChange = { ( evt ) => updateSetting ( 'showPills' , evt . target . checked ) }
187- tooltip = {
188- < Box >
189- < Text > Show notification metric pills for:</ Text >
190- < Box className = "pl-4" >
191- < ul >
192- < li className = "flex items-center gap-1" >
193- < IssueClosedIcon size = { Size . SMALL } />
194- linked issues
195- </ li >
196- < li className = "flex items-center gap-1" >
197- < CheckIcon size = { Size . SMALL } />
198- pr reviews
199- </ li >
200- < li className = "flex items-center gap-1" >
201- < CommentIcon size = { Size . SMALL } />
202- comments
203- </ li >
204- < li className = "flex items-center gap-1" >
205- < TagIcon size = { Size . SMALL } />
206- labels
207- </ li >
208- < li className = "flex items-center gap-1" >
209- < MilestoneIcon size = { Size . SMALL } />
210- milestones
211- </ li >
212- </ ul >
213- </ Box >
214- </ Box >
215- }
216- />
186+ < Box className = "pl-6" hidden = { ! settings . detailedNotifications } >
187+ < Stack direction = "vertical" gap = "condensed" >
188+ < Checkbox
189+ name = "showPills"
190+ label = "Show notification metric pills"
191+ checked = { settings . showPills }
192+ onChange = { ( evt ) => updateSetting ( 'showPills' , evt . target . checked ) }
193+ tooltip = {
194+ < Stack direction = "vertical" gap = "condensed" >
195+ < Text > Show notification metric pills for:</ Text >
196+ < Box className = "pl-4" >
197+ < ul >
198+ < li className = "flex items-center gap-1" >
199+ < IssueClosedIcon size = { Size . SMALL } />
200+ linked issues
201+ </ li >
202+ < li className = "flex items-center gap-1" >
203+ < CheckIcon size = { Size . SMALL } />
204+ pr reviews
205+ </ li >
206+ < li className = "flex items-center gap-1" >
207+ < CommentIcon size = { Size . SMALL } />
208+ comments
209+ </ li >
210+ < li className = "flex items-center gap-1" >
211+ < TagIcon size = { Size . SMALL } />
212+ labels
213+ </ li >
214+ < li className = "flex items-center gap-1" >
215+ < MilestoneIcon size = { Size . SMALL } />
216+ milestones
217+ </ li >
218+ </ ul >
219+ </ Box >
220+ </ Stack >
221+ }
222+ />
217223
218- < Checkbox
219- name = "showNumber"
220- label = "Show number"
221- checked = { settings . detailedNotifications && settings . showNumber }
222- onChange = { ( evt ) =>
223- settings . detailedNotifications &&
224- updateSetting ( 'showNumber' , evt . target . checked )
225- }
226- disabled = { ! settings . detailedNotifications }
227- tooltip = {
228- < Stack direction = "vertical" gap = "condensed" >
229- < Text > Show GitHub number for:</ Text >
230- < Box className = "pl-4" >
231- < ul >
232- < li >
233- < Stack direction = "horizontal" gap = "condensed" >
234- < CommentIcon size = { Size . SMALL } />
235- Discussion
236- </ Stack >
237- </ li >
238- < li >
239- < Stack direction = "horizontal" gap = "condensed" >
240- < IssueClosedIcon size = { Size . SMALL } />
241- Issue
242- </ Stack >
243- </ li >
244- < li >
245- < Stack direction = "horizontal" gap = "condensed" >
246- < GitPullRequestIcon size = { Size . SMALL } />
247- Pull Request
248- </ Stack >
249- </ li >
250- </ ul >
251- </ Box >
252- < Text className = "text-gitify-caution" >
253- ⚠️ This setting requires{ ' ' }
254- < Text as = "strong" > Detailed Notifications</ Text > to be enabled.
255- </ Text >
256- </ Stack >
257- }
258- />
224+ < Checkbox
225+ name = "showNumber"
226+ label = "Show notification number"
227+ checked = { settings . showNumber }
228+ onChange = { ( evt ) =>
229+ updateSetting ( 'showNumber' , evt . target . checked )
230+ }
231+ tooltip = {
232+ < Stack direction = "vertical" gap = "condensed" >
233+ < Text > Show GitHub number for:</ Text >
234+ < Box className = "pl-4" >
235+ < ul >
236+ < li >
237+ < Stack direction = "horizontal" gap = "condensed" >
238+ < CommentIcon size = { Size . SMALL } />
239+ Discussion
240+ </ Stack >
241+ </ li >
242+ < li >
243+ < Stack direction = "horizontal" gap = "condensed" >
244+ < IssueClosedIcon size = { Size . SMALL } />
245+ Issue
246+ </ Stack >
247+ </ li >
248+ < li >
249+ < Stack direction = "horizontal" gap = "condensed" >
250+ < GitPullRequestIcon size = { Size . SMALL } />
251+ Pull Request
252+ </ Stack >
253+ </ li >
254+ </ ul >
255+ </ Box >
256+ </ Stack >
257+ }
258+ />
259+ </ Stack >
260+ </ Box >
259261
260262 < Checkbox
261263 name = "showAccountHeader"
0 commit comments