patch of some square ui fixes · round #0 · pull #13 · jollywhoppers.com/witchsky.app

+1 -1

src/screens/Messages/components/MessageInput.tsx

···

       146
       146
        
                   padding: a.p_sm.padding - 2,

     

       147
       147
        
                   paddingLeft: a.p_md.padding - 2,

     

       148
       148
        
                   borderWidth: 1,

     

       149
       149
       -
                   borderRadius: 23,

     

       149
       149
       +
                   borderRadius: enableSquareButtons ? 11 : 23,

     

       150
       150
        
                   borderColor: 'transparent',

     

       151
       151
        
                 },

     

       152
       152
        
                 isFocused && inputStyles.chromeFocus,

+1 -1

src/screens/Messages/components/MessageInput.web.tsx

···

       147
       147
        
                   paddingRight: a.p_sm.padding - 2,

     

       148
       148
        
                   paddingLeft: a.p_sm.padding - 2,

     

       149
       149
        
                   borderWidth: 1,

     

       150
       150
       -
                   borderRadius: 23,

     

       150
       150
       +
                   borderRadius: enableSquareButtons ? 11 : 23,

     

       151
       151
        
                   borderColor: 'transparent',

     

       152
       152
        
                   height: textAreaHeight + 23,

     

       153
       153
        
                 },

+14 -2

src/view/com/util/UserAvatar.tsx

···

       106
       106
        
         const finalShape = overrideShape ?? (type === 'user' ? 'circle' : 'square')

     

       107
       107
        
         const t = useTheme()

     

       108
       108
        
       

     

       109
       109
       +
         const enableSquareAvatars = useEnableSquareAvatars()

     

       110
       110
       +
       

     

       109
       111
        
         const aviStyle = useMemo(() => {

     

       110
       112
        
           if (finalShape === 'square') {

     

       111
       113
        
             return {borderRadius: size > 32 ? 8 : 3, overflow: 'hidden'} as const

     
···

       191
       193
        
             </Svg>

     

       192
       194
        
           )

     

       193
       195
        
         }

     

       194
       194
       -
         // TODO: shape=square

     

       195
       196
        
         return (

     

       196
       197
        
           <Svg

     

       197
       198
        
             testID="userAvatarFallback"

     
···

       201
       202
        
             fill="none"

     

       202
       203
        
             stroke="none"

     

       203
       204
        
             style={aviStyle}>

     

       204
       204
       -
             <Circle cx="12" cy="12" r="12" fill={t.palette.primary_500} />

     

       205
       205
       +
             {enableSquareAvatars ? (

     

       206
       206
       +
               <Rect

     

       207
       207
       +
                 x="0"

     

       208
       208
       +
                 y="0"

     

       209
       209
       +
                 width="24"

     

       210
       210
       +
                 height="24"

     

       211
       211
       +
                 rx="3"

     

       212
       212
       +
                 fill={t.palette.primary_500}

     

       213
       213
       +
               />

     

       214
       214
       +
             ) : (

     

       215
       215
       +
               <Circle cx="12" cy="12" r="12" fill={t.palette.primary_500} />

     

       216
       216
       +
             )}

     

       205
       217
        
             <Circle cx="12" cy="9.5" r="3.5" fill="#fff" />

     

       206
       218
        
             <Path

     

       207
       219
        
               strokeLinecap="round"

+11 -1

src/view/com/util/fab/FABInner.tsx

···

       32
       32
        
       

     

       33
       33
        
         const enableSquareButtons = useEnableSquareButtons()

     

       34
       34
        
       

     

       35
       35
       -
         const size = gtMobile ? styles.sizeLarge : styles.sizeRegular

     

       35
       35
       +
         const size = gtMobile ? enableSquareButtons ? styles.sizeLargeSquare : styles.sizeLarge : enableSquareButtons ? styles.sizeRegularSquare : styles.sizeRegular

     

       36
       36
        
       

     

       37
       37
        
         const tabletSpacing = gtMobile

     

       38
       38
        
           ? {right: 50, bottom: 50}

     
···

       85
       85
        
           height: 70,

     

       86
       86
        
           borderRadius: 35,

     

       87
       87
        
         },

     

       88
       88
       +
         sizeRegularSquare: {

     

       89
       89
       +
           width: 56,

     

       90
       90
       +
           height: 56,

     

       91
       91
       +
           borderRadius: 10,

     

       92
       92
       +
         },

     

       93
       93
       +
         sizeLargeSquare: {

     

       94
       94
       +
           width: 70,

     

       95
       95
       +
           height: 70,

     

       96
       96
       +
           borderRadius: 15,

     

       97
       97
       +
         },

     

       88
       98
        
         outer: {

     

       89
       99
        
           // @ts-ignore web-only

     

       90
       100
        
           position: isWeb ? 'fixed' : 'absolute',

+5 -2

src/view/shell/bottom-bar/BottomBar.tsx

···

       21
       21
        
       import {useGate} from '#/lib/statsig/statsig'

     

       22
       22
        
       import {emitSoftReset} from '#/state/events'

     

       23
       23
        
       import {useHomeBadge} from '#/state/home-badge'

     

       24
       24
       +
       import {useEnableSquareAvatars} from '#/state/preferences/enable-square-avatars'

     

       24
       25
        
       import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'

     

       25
       26
        
       import {useUnreadMessageCount} from '#/state/queries/messages/list-conversations'

     

       26
       27
        
       import {useUnreadNotifications} from '#/state/queries/notifications/unread'

     
···

       141
       142
        
         const [demoMode] = useDemoMode()

     

       142
       143
        
         const {isActive: live} = useActorStatus(profile)

     

       143
       144
        
       

     

       145
       145
       +
         const enableSquareAvatars = useEnableSquareAvatars()

     

       146
       146
       +
       

     

       144
       147
        
         return (

     

       145
       148
        
           <>

     

       146
       149
        
             <SwitchAccountDialog control={accountSwitchControl} />

     
···

       272
       275
        
                               styles.ctrlIcon,

     

       273
       276
        
                               pal.text,

     

       274
       277
        
                               styles.profileIcon,

     

       275
       275
       -
                               styles.onProfile,

     

       278
       278
       +
                               enableSquareAvatars ? styles.onProfileSquare : styles.onProfile,

     

       276
       279
        
                               {

     

       277
       280
        
                                 borderColor: pal.text.color,

     

       278
       278
       -
                                 borderWidth: live ? 0 : 1,

     

       281
       281
       +
                                 borderWidth: live ? 0 : enableSquareAvatars ? 1.5 : 1,

     

       279
       282
        
                               },

     

       280
       283
        
                             ]}>

     

       281
       284
        
                             <UserAvatar

+4

src/view/shell/bottom-bar/BottomBarStyles.tsx

···

       72
       72
        
           borderWidth: 1,

     

       73
       73
        
           borderRadius: 100,

     

       74
       74
        
         },

     

       75
       75
       +
         onProfileSquare: {

     

       76
       76
       +
           borderWidth: 1,

     

       77
       77
       +
           borderRadius: 5,

     

       78
       78
       +
         },

     

       75
       79
        
       })