more style improvements

ghackenberg · Nov 23, 2023 · 6e9ab79 · 6e9ab79
1 parent 6c8b5e7
commit 6e9ab79
Show file tree

Hide file tree

Showing 19 changed files with 125 additions and 125 deletions.
diff --git a/packages/frontend/src/scripts/components/values/MilestoneName.tsx b/packages/frontend/src/scripts/components/values/MilestoneName.tsx
@@ -2,10 +2,10 @@ import * as React from 'react'
 
 import { useMilestone } from '../../hooks/entity'
 
-export const MilestoneNameWidget = (props: { productId: string, milestoneId: string }) => {
+export const MilestoneName = (props: { productId: string, milestoneId: string, class?: string }) => {
     const milestone = useMilestone(props.productId, props.milestoneId)
     return (
-        <span className='value milestone_name'>
+        <span className={`value milestone_name ${props.class || ''}`}>
             {milestone ? (
                 milestone.label
             ) : (

diff --git a/packages/frontend/src/scripts/components/values/ProductUserEmail.tsx b/packages/frontend/src/scripts/components/values/ProductUserEmail.tsx
@@ -3,7 +3,7 @@ import * as React from 'react'
 import { useUser } from '../../hooks/entity'
 import { useMembers } from '../../hooks/list'
 
-export const ProductUserEmailWidget = (props: { productId: string, userId: string, class?: string }) => {
+export const ProductUserEmail = (props: { productId: string, userId: string, class?: string }) => {
     // HOOKS
 
     const members = useMembers(props.productId)

diff --git a/packages/frontend/src/scripts/components/values/ProductUserName.tsx b/packages/frontend/src/scripts/components/values/ProductUserName.tsx
@@ -3,7 +3,7 @@ import * as React from 'react'
 import { useUser } from '../../hooks/entity'
 import { useMembers } from '../../hooks/list'
 
-export const ProductUserNameWidget = (props: { productId: string, userId: string, class?: string }) => {
+export const ProductUserName = (props: { productId: string, userId: string, class?: string }) => {
     // HOOKS
 
     const members = useMembers(props.productId)

diff --git a/packages/frontend/src/scripts/components/values/ProductUserPicture.tsx b/packages/frontend/src/scripts/components/values/ProductUserPicture.tsx
@@ -8,7 +8,7 @@ import LoadIcon from '/src/images/load.png'
 import PixelIcon from '/src/images/pixel.png'
 import UserIcon from '/src/images/user.png'
 
-export const ProductUserPictureWidget = (props: { userId: string, productId: string, background?: string, class?: string }) => {
+export const ProductUserPicture = (props: { userId: string, productId: string, background?: string, class?: string }) => {
     // HOOKS
 
     const members = useMembers(props.productId)

diff --git a/packages/frontend/src/scripts/components/views/Product.tsx b/packages/frontend/src/scripts/components/views/Product.tsx
@@ -13,7 +13,7 @@ import { useProducts } from '../../hooks/list'
 import { LegalFooter } from '../snippets/LegalFooter'
 import { Column, Table } from '../widgets/Table'
 import { ProductImageWidget } from '../widgets/ProductImage'
-import { ProductUserPictureWidget } from '../values/ProductUserPicture'
+import { ProductUserPicture } from '../values/ProductUserPicture'
 import { MemberCount } from '../counts/Members'
 import { IssueCount } from '../counts/Issues'
 import { VersionCount } from '../counts/Versions'
@@ -88,7 +88,7 @@ export const ProductView = () => {
             </span>
         ) },
         { label: '🧑', class: 'center', content: product => (
-            <ProductUserPictureWidget userId={product.userId} productId={product.productId} class='icon medium round'/>
+            <ProductUserPicture userId={product.userId} productId={product.productId} class='icon medium round'/>
         ) },
         { label: '🛠️', content: product => (
             <a onClick={event => deleteProduct(event, product)}>

diff --git a/packages/frontend/src/scripts/components/views/ProductIssue.tsx b/packages/frontend/src/scripts/components/views/ProductIssue.tsx
@@ -16,8 +16,8 @@ import { PartCount } from '../counts/Parts'
 import { LegalFooter } from '../snippets/LegalFooter'
 import { ProductFooter, ProductFooterItem } from '../snippets/ProductFooter'
 import { Column, Table } from '../widgets/Table'
-import { MilestoneNameWidget } from '../values/MilestoneName'
-import { ProductUserPictureWidget } from '../values/ProductUserPicture'
+import { MilestoneName } from '../values/MilestoneName'
+import { ProductUserPicture } from '../values/ProductUserPicture'
 import { ProductView3D } from '../widgets/ProductView3D'
 import { LoadingView } from './Loading'
 
@@ -86,24 +86,30 @@ export const ProductIssueView = () => {
 
     const columns: Column<Issue>[] = [
         { label: '🧑', class: 'center', content: issue => (
-            <ProductUserPictureWidget userId={issue.userId} productId={productId} class='icon small round'/>
+            <ProductUserPicture userId={issue.userId} productId={productId} class='icon small round'/>
         ) },
         { label: '#', class: 'center nowrap', content: issue => (
-            issue.number
+            <span className='badge'>
+                {issue.number}
+            </span>
         ) },
         { label: 'Label', class: 'left fill', content: issue => (
             issue.label
         ) },
-        { label: 'Milestone', class: 'left nowrap', content: issue => (
-            issue.milestoneId && (
-                <MilestoneNameWidget productId={productId} milestoneId={issue.milestoneId}/>
+        { label: 'Milestone', class: 'center nowrap', content: issue => (
+            issue.milestoneId ? (
+                <MilestoneName productId={productId} milestoneId={issue.milestoneId} class='badge'/>
+            ) : (
+                <span className='badge stroke italic'>not scheduled</span>
             )
         ) },
         { label: 'Assignees', class: 'left nowrap assignees', content: issue => (
-            issue.assignedUserIds.length > 0 && (
+            issue.assignedUserIds.length > 0 ? (
                 issue.assignedUserIds.map((assignedUserId) => (
-                    <ProductUserPictureWidget key={assignedUserId} userId={assignedUserId} productId={productId} class='icon small round'/>
+                    <ProductUserPicture key={assignedUserId} userId={assignedUserId} productId={productId} class='icon small round'/>
                 ))
+            ) : (
+                <span className='badge stroke italic'>not assigned</span>
             )
         ) },
         { label: 'Comments', class: 'center nowrap', content: issue => (

diff --git a/packages/frontend/src/scripts/components/views/ProductIssueComment.tsx b/packages/frontend/src/scripts/components/views/ProductIssueComment.tsx
@@ -17,9 +17,9 @@ import { computePath } from '../../functions/path'
 import { LegalFooter } from '../snippets/LegalFooter'
 import { ProductFooter, ProductFooterItem } from '../snippets/ProductFooter'
 import { CommentView } from '../widgets/CommentView'
-import { MilestoneNameWidget } from '../values/MilestoneName'
-import { ProductUserNameWidget } from '../values/ProductUserName'
-import { ProductUserPictureWidget } from '../values/ProductUserPicture'
+import { MilestoneName } from '../values/MilestoneName'
+import { ProductUserName } from '../values/ProductUserName'
+import { ProductUserPicture } from '../values/ProductUserPicture'
 import { ProductView3D } from '../widgets/ProductView3D'
 import { LoadingView } from './Loading'
 
@@ -174,38 +174,28 @@ export const ProductIssueCommentView = () => {
                                     <span className='number'>{issue.number}</span> {issue.label}
                                 </h1>
                                 <p>
-                                    <ProductUserPictureWidget userId={issue.userId} productId={productId} class='icon middle small round'/>
+                                    <ProductUserPicture productId={productId} userId={issue.userId} class='icon small round'/>
                                     <span> </span>
-                                    <ProductUserNameWidget userId={issue.userId} productId={productId}/>
+                                    <ProductUserName productId={productId} userId={issue.userId}/>
                                     <span> created this issue on <span className='date'>{formatDateTime(new Date(issue.created))}</span></span>
                                 </p>
                                 <p>
-                                    <span className={`state ${issue.state}`}>
+                                    <span className={`state badge ${issue.state == 'open' ? 'red' : 'green'}`}>
                                         {issue.state}
                                     </span>
                                     {issue.milestoneId ? (
-                                        <span className='milestone'>
-                                            <span>scheduled for </span>
-                                            <MilestoneNameWidget productId={productId} milestoneId={issue.milestoneId}/>
-                                        </span>
+                                        <MilestoneName productId={productId} milestoneId={issue.milestoneId} class='milestone badge'/>
                                     ) : (
-                                        <span className='milestone' style={{fontWeight: 'bold'}}>not scheduled</span>
+                                        <span className='milestone badge stroke'>not scheduled</span>
                                     )}
                                     {issue.assignedUserIds && issue.assignedUserIds.length > 0 ? (
                                         <span className='assignees'>
-                                            <span>assigned to</span>
-                                            <span>
-                                                {issue.assignedUserIds.map(assignedUserId => (
-                                                    <span key={assignedUserId} className='assignee'>
-                                                        <ProductUserPictureWidget productId={productId} userId={assignedUserId} class='icon middle small round'/>
-                                                        <span> </span>
-                                                        <ProductUserNameWidget productId={productId} userId={assignedUserId}/>
-                                                    </span>
-                                                ))}
-                                            </span>
+                                            {issue.assignedUserIds.map(assignedUserId => (
+                                                <ProductUserPicture productId={productId} userId={assignedUserId} class='icon small round'/>
+                                            ))}
                                         </span>
                                     ) : (
-                                        <span className='assignees' style={{fontWeight: 'bold'}}>not assigned</span>
+                                        <span className='assignees badge stroke'>not assigned</span>
                                     )}
                                 </p>
                             </div>

diff --git a/packages/frontend/src/scripts/components/views/ProductIssueSetting.tsx b/packages/frontend/src/scripts/components/views/ProductIssueSetting.tsx
@@ -15,8 +15,8 @@ import { LegalFooter } from '../snippets/LegalFooter'
 import { ProductFooter, ProductFooterItem } from '../snippets/ProductFooter'
 import { Column, Table } from '../widgets/Table'
 import { ProductView3D } from '../widgets/ProductView3D'
-import { ProductUserNameWidget } from '../values/ProductUserName'
-import { ProductUserPictureWidget } from '../values/ProductUserPicture'
+import { ProductUserName } from '../values/ProductUserName'
+import { ProductUserPicture } from '../values/ProductUserPicture'
 import { LoadingView } from './Loading'
 
 import LeftIcon from '/src/images/setting.png'
@@ -97,10 +97,10 @@ export const ProductIssueSettingView = () => {
 
     const columns: Column<Member>[] = [
         { label: '👤', content: member => (
-            <ProductUserPictureWidget userId={member.userId} productId={productId} class='icon medium round'/>
+            <ProductUserPicture userId={member.userId} productId={productId} class='icon medium round'/>
         ) },
         { label: 'Name', class: 'fill left nowrap', content: member => (
-            <ProductUserNameWidget userId={member.userId} productId={productId}/>
+            <ProductUserName userId={member.userId} productId={productId}/>
         ) },
         { label: '🛠️', class: 'fill center nowrap', content: member => (
             <input type="checkbox" checked={assignedUserIds.indexOf(member.userId) != -1} onChange={() => selectAssignee(member.userId)}/>

diff --git a/packages/frontend/src/scripts/components/views/ProductMember.tsx b/packages/frontend/src/scripts/components/views/ProductMember.tsx
@@ -14,8 +14,8 @@ import { LegalFooter } from '../snippets/LegalFooter'
 import { ProductFooter, ProductFooterItem } from '../snippets/ProductFooter'
 import { ProductView3D } from '../widgets/ProductView3D'
 import { Column, Table } from '../widgets/Table'
-import { ProductUserNameWidget } from '../values/ProductUserName'
-import { ProductUserPictureWidget } from '../values/ProductUserPicture'
+import { ProductUserName } from '../values/ProductUserName'
+import { ProductUserPicture } from '../values/ProductUserPicture'
 import { LoadingView } from './Loading'
 
 import MemberIcon from '/src/images/user.png'
@@ -58,10 +58,10 @@ export const ProductMemberView = () => {
 
     const columns: Column<Member>[] = [
         { label: '👤', content: member => (
-            <ProductUserPictureWidget userId={member.userId} productId={productId} class='icon medium round middle'/>
+            <ProductUserPicture userId={member.userId} productId={productId} class='icon medium round middle'/>
         ) },
         { label: 'Name', class: 'left nowrap', content: member => (
-            <ProductUserNameWidget userId={member.userId} productId={productId}/>
+            <ProductUserName userId={member.userId} productId={productId}/>
         ) },
         { label: 'Role', class: 'fill left nowrap', content: member => (
             <span className='badge role'>{member.role}</span>

diff --git a/packages/frontend/src/scripts/components/views/ProductMilestone.tsx b/packages/frontend/src/scripts/components/views/ProductMilestone.tsx
@@ -15,7 +15,7 @@ import { formatDateTime } from '../../functions/time'
 import { LegalFooter } from '../snippets/LegalFooter'
 import { ProductFooter, ProductFooterItem } from '../snippets/ProductFooter'
 import { MilestoneProgressWidget } from '../widgets/MilestoneProgress'
-import { ProductUserPictureWidget } from '../values/ProductUserPicture'
+import { ProductUserPicture } from '../values/ProductUserPicture'
 import { ProductView3D } from '../widgets/ProductView3D'
 import { Column, Table } from '../widgets/Table'
 import { LoadingView } from './Loading'
@@ -61,16 +61,20 @@ export const ProductMilestoneView = () => {
 
     const columns: Column<Milestone>[] = [
         { label: '🧑', content: milestone => (
-            <ProductUserPictureWidget userId={milestone.userId} productId={productId} class='icon small round'/>
+            <ProductUserPicture userId={milestone.userId} productId={productId} class='icon small round'/>
         ) },
         { label: 'Label', class: 'left fill', content: milestone => (
             milestone.label
         ) },
         { label: 'Start', class: 'nowrap center', content: milestone => (
-            formatDateTime(new Date(milestone.start))
+            <span className='badge stroke'>
+                {formatDateTime(new Date(milestone.start))}
+            </span>
         ) },
         { label: 'End', class: 'nowrap center', content: milestone => (
-            formatDateTime(new Date(milestone.end))
+            <span className='badge stroke'>
+                {formatDateTime(new Date(milestone.end))}
+            </span>
         ) },
         { label: 'Open', class: 'center', content: milestone => (
             <span className='badge'>

diff --git a/packages/frontend/src/scripts/components/views/ProductMilestoneIssue.tsx b/packages/frontend/src/scripts/components/views/ProductMilestoneIssue.tsx
@@ -19,7 +19,8 @@ import { PartCount } from '../counts/Parts'
 import { LegalFooter } from '../snippets/LegalFooter'
 import { ProductFooter, ProductFooterItem } from '../snippets/ProductFooter'
 import { BurndownChartWidget } from '../widgets/BurndownChart'
-import { ProductUserPictureWidget } from '../values/ProductUserPicture'
+import { ProductUserName } from '../values/ProductUserName'
+import { ProductUserPicture } from '../values/ProductUserPicture'
 import { Column, Table } from '../widgets/Table'
 import { LoadingView } from './Loading'
 
@@ -128,7 +129,7 @@ export const ProductMilestoneIssueView = () => {
 
     const columns: Column<Issue>[] = [
         { label: '🧑', content: issue => (
-            <ProductUserPictureWidget userId={issue.userId} productId={productId} class='icon small round'/>
+            <ProductUserPicture userId={issue.userId} productId={productId} class='icon small round'/>
         ) },
         { label: '#', class: 'center nowrap', content: issue => (
             issue.number
@@ -137,9 +138,13 @@ export const ProductMilestoneIssueView = () => {
             issue.label
         ) },
         { label: 'Assignees', class: 'left nowrap assignees', content: issue => (
-            issue.assignedUserIds.map((assignedUserId) => (
-                <ProductUserPictureWidget key={assignedUserId} userId={assignedUserId} productId={productId} class='icon small round'/>
-            ))
+            issue.assignedUserIds.length > 0 ? (
+                issue.assignedUserIds.map((assignedUserId) => (
+                    <ProductUserPicture key={assignedUserId} userId={assignedUserId} productId={productId} class='icon small round'/>
+                ))
+            ) : (
+                <span className='badge stroke italic'>not assigned</span>
+            )
         ) },
         { label: 'Comments', class: 'center nowrap', content: issue => (
             <span className='badge'>
@@ -193,14 +198,21 @@ export const ProductMilestoneIssueView = () => {
                                     {milestone.label}
                                 </h1>
                                 <p>
-                                    <span>Start: </span>    
-                                    <em>
+                                    <ProductUserPicture productId={productId} userId={milestone.userId} class='icon small round'/>
+                                    <span> </span>
+                                    <ProductUserName productId={productId} userId={milestone.userId}/>
+                                    <span> created this milestone on </span>
+                                    <span className='date'>{formatDateTime(new Date(milestone.created))}</span>
+                                </p>
+                                <p style={{color: 'gray'}}>
+                                    <span>This milestone starts on</span>    
+                                    <span className='badge stroke'>
                                         {formatDateTime(new Date(milestone.start))}
-                                    </em>
-                                    <span> / End: </span>  
-                                    <em>
+                                    </span>
+                                    <span style={{marginLeft: '0.5em'}}>and ends on</span>  
+                                    <span className='badge stroke'>
                                         {formatDateTime(new Date(milestone.end))}
-                                    </em>
+                                    </span>
                                 </p>
                                 {contextUser ? (
                                     members.filter(member => member.userId == contextUser.userId).length == 1 ? (