Skip to content

Commit 4756367

Browse files
typeletstypelets
committed
fix(mobile): prevent glass button flicker on theme mismatch
1 parent 8c75a13 commit 4756367

5 files changed

Lines changed: 120 additions & 90 deletions

File tree

‎apps/mobile/v1/src/screens/EditNote/EditorHeader.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export function EditorHeader({
7979
style={styles.gradient}
8080
/>
8181
<View style={styles.header}>
82-
<GlassView glassEffectStyle="regular" style={styles.glassButton}>
82+
<GlassView glassEffectStyle="regular" style={[styles.glassButton, { backgroundColor: theme.isDark ? 'rgba(255, 255, 255, 0.01)' : 'rgba(0, 0, 0, 0.01)' }]}>
8383
<TouchableOpacity
8484
style={styles.iconButton}
8585
onPress={onBack}
@@ -103,7 +103,7 @@ export function EditorHeader({
103103

104104
<View style={styles.headerActions}>
105105
{onToggleHeader && (
106-
<GlassView glassEffectStyle="regular" style={styles.glassButton}>
106+
<GlassView glassEffectStyle="regular" style={[styles.glassButton, { backgroundColor: theme.isDark ? 'rgba(255, 255, 255, 0.01)' : 'rgba(0, 0, 0, 0.01)' }]}>
107107
<TouchableOpacity
108108
style={[styles.iconButton, showHeader && styles.iconButtonActive]}
109109
onPress={onToggleHeader}
@@ -121,7 +121,7 @@ export function EditorHeader({
121121
)}
122122

123123
{onToggleToolbar && (
124-
<GlassView glassEffectStyle="regular" style={styles.glassButton}>
124+
<GlassView glassEffectStyle="regular" style={[styles.glassButton, { backgroundColor: theme.isDark ? 'rgba(255, 255, 255, 0.01)' : 'rgba(0, 0, 0, 0.01)' }]}>
125125
<TouchableOpacity
126126
style={[styles.iconButton, showToolbar && styles.iconButtonActive]}
127127
onPress={onToggleToolbar}
@@ -139,7 +139,7 @@ export function EditorHeader({
139139
)}
140140

141141
{onToggleAttachments && (
142-
<GlassView glassEffectStyle="regular" style={styles.glassButton}>
142+
<GlassView glassEffectStyle="regular" style={[styles.glassButton, { backgroundColor: theme.isDark ? 'rgba(255, 255, 255, 0.01)' : 'rgba(0, 0, 0, 0.01)' }]}>
143143
<TouchableOpacity
144144
style={[styles.iconButton, showAttachments && styles.iconButtonActive]}
145145
onPress={onToggleAttachments}
@@ -166,7 +166,7 @@ export function EditorHeader({
166166
)}
167167

168168
{onTestEditor && isEditing && (
169-
<GlassView glassEffectStyle="regular" style={styles.glassButton}>
169+
<GlassView glassEffectStyle="regular" style={[styles.glassButton, { backgroundColor: theme.isDark ? 'rgba(255, 255, 255, 0.01)' : 'rgba(0, 0, 0, 0.01)' }]}>
170170
<TouchableOpacity
171171
style={styles.iconButton}
172172
onPress={onTestEditor}
@@ -178,7 +178,7 @@ export function EditorHeader({
178178
)}
179179

180180
{isEditing && (
181-
<GlassView glassEffectStyle="regular" style={styles.glassButton}>
181+
<GlassView glassEffectStyle="regular" style={[styles.glassButton, { backgroundColor: theme.isDark ? 'rgba(255, 255, 255, 0.01)' : 'rgba(0, 0, 0, 0.01)' }]}>
182182
<TouchableOpacity
183183
style={[styles.iconButton, { opacity: (isOffline && !isTempNote) ? 0.4 : 1 }]}
184184
onPress={onDelete}
@@ -190,7 +190,7 @@ export function EditorHeader({
190190
</GlassView>
191191
)}
192192

193-
<GlassView glassEffectStyle="regular" style={styles.glassButton}>
193+
<GlassView glassEffectStyle="regular" style={[styles.glassButton, { backgroundColor: theme.isDark ? 'rgba(255, 255, 255, 0.01)' : 'rgba(0, 0, 0, 0.01)' }]}>
194194
<TouchableOpacity
195195
style={[
196196
styles.iconButton,
@@ -245,7 +245,6 @@ const styles = StyleSheet.create({
245245
glassButton: {
246246
borderRadius: 19,
247247
overflow: 'hidden',
248-
backgroundColor: 'rgba(255, 255, 255, 0.01)',
249248
},
250249
iconButton: {
251250
width: 38,

‎apps/mobile/v1/src/screens/FolderNotes/components/NotesList/NotesHeader.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export const NotesHeader: React.FC<NotesHeaderProps> = ({
3838
NOTES ({String(filteredNotesCount || 0)})
3939
{filteredNotesCount !== totalNotesCount && ` (${totalNotesCount} total)`}
4040
</Text>
41-
<GlassView glassEffectStyle="regular" style={styles.squareButtonGlass}>
41+
<GlassView glassEffectStyle="regular" style={[styles.squareButtonGlass, { backgroundColor: theme.isDark ? 'rgba(255, 255, 255, 0.01)' : 'rgba(0, 0, 0, 0.01)' }]}>
4242
<TouchableOpacity
4343
style={styles.squareButton}
4444
onPress={onFilterPress}
@@ -57,7 +57,7 @@ export const NotesHeader: React.FC<NotesHeaderProps> = ({
5757
{viewType === 'trash' ? (
5858
filteredNotesCount > 0 && (
5959
<View style={styles.buttonWrapper}>
60-
<GlassView glassEffectStyle="regular" style={styles.createNoteButtonGlass}>
60+
<GlassView glassEffectStyle="regular" style={[styles.createNoteButtonGlass, { backgroundColor: theme.isDark ? 'rgba(255, 255, 255, 0.01)' : 'rgba(0, 0, 0, 0.01)' }]}>
6161
<Pressable
6262
style={styles.createNoteButton}
6363
onPress={onEmptyTrashPress}
@@ -72,7 +72,7 @@ export const NotesHeader: React.FC<NotesHeaderProps> = ({
7272
)
7373
) : (
7474
<View style={styles.buttonWrapper} ref={createNoteButtonRef} collapsable={false}>
75-
<GlassView glassEffectStyle="regular" style={styles.createNoteButtonGlass}>
75+
<GlassView glassEffectStyle="regular" style={[styles.createNoteButtonGlass, { backgroundColor: theme.isDark ? 'rgba(255, 255, 255, 0.01)' : 'rgba(0, 0, 0, 0.01)' }]}>
7676
<Pressable
7777
style={styles.createNoteButton}
7878
onPress={onCreateNotePress}
@@ -108,7 +108,6 @@ const styles = StyleSheet.create({
108108
squareButtonGlass: {
109109
borderRadius: GLASS_BUTTON.BORDER_RADIUS,
110110
overflow: 'hidden',
111-
backgroundColor: 'rgba(255, 255, 255, 0.01)',
112111
},
113112
squareButton: {
114113
width: GLASS_BUTTON.SIZE,
@@ -123,7 +122,6 @@ const styles = StyleSheet.create({
123122
createNoteButtonGlass: {
124123
borderRadius: NOTE_CARD.BORDER_RADIUS,
125124
overflow: 'hidden',
126-
backgroundColor: 'rgba(255, 255, 255, 0.01)',
127125
},
128126
createNoteButton: {
129127
borderRadius: NOTE_CARD.BORDER_RADIUS,

‎apps/mobile/v1/src/screens/FolderNotes/components/NotesList/SubfoldersList.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export const SubfoldersList: React.FC<SubfoldersListProps> = ({
4141
FOLDERS ({String(subfolders?.length || 0)})
4242
</Text>
4343
<View style={styles.viewModeToggle}>
44-
<GlassView glassEffectStyle="regular" style={styles.viewModeButtonGlass}>
44+
<GlassView glassEffectStyle="regular" style={[styles.viewModeButtonGlass, { backgroundColor: theme.isDark ? 'rgba(255, 255, 255, 0.01)' : 'rgba(0, 0, 0, 0.01)' }]}>
4545
<TouchableOpacity
4646
style={[
4747
styles.viewModeButton,
@@ -56,7 +56,7 @@ export const SubfoldersList: React.FC<SubfoldersListProps> = ({
5656
/>
5757
</TouchableOpacity>
5858
</GlassView>
59-
<GlassView glassEffectStyle="regular" style={styles.viewModeButtonGlass}>
59+
<GlassView glassEffectStyle="regular" style={[styles.viewModeButtonGlass, { backgroundColor: theme.isDark ? 'rgba(255, 255, 255, 0.01)' : 'rgba(0, 0, 0, 0.01)' }]}>
6060
<TouchableOpacity
6161
style={[
6262
styles.viewModeButton,
@@ -147,7 +147,6 @@ const styles = StyleSheet.create({
147147
viewModeButtonGlass: {
148148
borderRadius: GLASS_BUTTON.BORDER_RADIUS,
149149
overflow: 'hidden',
150-
backgroundColor: 'rgba(255, 255, 255, 0.01)',
151150
},
152151
viewModeButton: {
153152
width: GLASS_BUTTON.SIZE,

0 commit comments

Comments
 (0)