Center align Workspace name on web and mobile web #4860

MitchExpensify · 2021-08-26T17:52:09Z

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

Action Performed:

Click "+" in new.expensify.com
Click "Create Workspace"
Workspace name is not aligned in the left hand pane

Expected Result:

I would expect the Workspace name to be center aligned under the workspace avatar

Actual Result:

Workspace name is not center aligned under the workspace avatar

Workaround:

Ignore

Platform:

Where is this issue occurring?

Web
Mobile Web

Version Number: v1.0.88-0
Notes/Photos/Videos:

View all open jobs on GitHub

MelvinBot · 2021-08-26T17:52:11Z

Triggered auto assignment to @kevinksullivan (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

kakajann · 2021-08-27T01:47:51Z

Proposal

add styles.textAlignCenter to Text in here:

App/src/pages/workspace/WorkspaceSidebar.js

Lines 140 to 149 in ae38f1b

    
           <Tooltip text={policy.name}> 
        
               <Text 
        
                   numberOfLines={1} 
        
                   style={[ 
        
                       styles.displayName, 
        
                   ]} 
        
               > 
        
                   {policy.name} 
        
               </Text> 
        
           </Tooltip>

kevinksullivan · 2021-08-27T20:03:16Z

Posted

https://www.upwork.com/jobs/~01bf967f71df7a2c62

MelvinBot · 2021-08-27T20:03:25Z

Triggered auto assignment to @deetergp (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

akshayasalvi · 2021-08-27T20:32:19Z

Proposal

I feel there are two issues with the title of the Workspace name. One is the alignment, second is the fontSize. If you see the there's no difference in the title of the workspace and the menuItems.

We could do the following:

<Text
    numberOfLines={1}
    style={[
        styles.displayName,
        styles.textAlignCenter,  // to center align.
        {. // can be added to styles.js
            fontSize: variables.fontSizeMidLarge.  // this is size 22, we can even try fontSizeXLarge: 24
        }
    ]}
>
    {policy.name}
</Text>

PrashantMangukiya · 2021-08-28T05:27:33Z

Proposed Solution:

Updates: I just fetched recent version of the app (1.0.88-2), compiled and tested. Now my previous solution (to add styles.alignSelfCenter to text component ) not working as expected in all platform.

So now I suggest to add styles.textAlignCenter (instead of styles.alignSelfCenter) to Text component as other people also suggested before me. I will not mind if project awarded to them as they suggested before me.

So now code looks like below after changes: /src/pages/workspace/WorkspaceSidebar.js file.

          <Tooltip text={policy.name}>
              <Text
                  numberOfLines={1}
                  style={[
                      styles.displayName,
                      styles.textAlignCenter,    // Add this style
                  ]}
              >
                  {policy.name}
              </Text>
          </Tooltip>

Below are some screenshots I taken on latest version (1.0.88-2) by adding styles.textAlignCenter to Text component. It is working as expected for short and long workspace name.