Skip to content

Commit

Permalink
style: Match design system (#3203)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kyle-ssg
kyle-ssg authored Dec 20, 2023
1 parent f4c957a commit 353d077
Show file tree
Hide file tree
Showing 8 changed files with 60 additions and 54 deletions.
2 changes: 1 addition & 1 deletion frontend/web/components/InfoMessage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default class InfoMessage extends PureComponent {
return (
<div className={infoMessageClass}>
<span className={`icon-alert ${this.props.infoMessageClass} info-icon`}>
<Icon name='info' />
<Icon fill={'#0AADDF'} name={this.props.icon || 'info'} />
</span>
<div className={titleDescClass}>
<div className='title'>{this.props.title || 'NOTE'}</div>
Expand Down
6 changes: 4 additions & 2 deletions frontend/web/components/PanelSearch.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,7 @@ const PanelSearch = class extends Component {
{!!this.props.filterRow && (
<Row>
{this.props.showExactFilter && (
<div style={{ width: 140 }}>
<div className='me-3' style={{ width: 140 }}>
<Select
size='select-sm'
styles={{
Expand Down Expand Up @@ -329,7 +329,9 @@ const PanelSearch = class extends Component {
/>
)}
{this.props.renderFooter && (
<div className='panel-footer'>{this.props.renderFooter()}</div>
<footer className='panel-footer'>
{this.props.renderFooter()}
</footer>
)}
</div>
</Panel>
Expand Down
85 changes: 42 additions & 43 deletions frontend/web/components/SegmentOverrides.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,48 +175,46 @@ const SegmentOverrideInner = class Override extends React.Component {
/>
)}
<Row className='gap-2'>
{!!v.id && (
<Permission
id={projectId}
permission={'MANAGE_SEGMENTS'}
level={'project'}
>
{({ permission }) =>
Utils.renderWithPermission(
permission,
Constants.projectPermissions('Manage Segments'),
<>
{v.is_feature_specific ? (
<Button
disabled={!permission}
onClick={() => {
setShowCreateSegment(true)
setSegmentEditId(v.segment)
}}
className='btn btn-with-icon'
>
<span className='no-pointer'>
<Icon name='edit' fill={'#656D7B'} width={20} />
</span>
</Button>
) : (
<Button
theme='text'
disabled={!permission}
target='_blank'
href={`${document.location.origin}/project/${this.props.projectId}/environment/${this.props.environmentId}/segments?id=${v.segment}`}
className='btn btn-with-icon'
>
<span className='no-pointer'>
<Icon name='edit' fill={'#656D7B'} width={20} />
</span>
</Button>
)}
</>,
)
}
</Permission>
)}
<Permission
id={projectId}
permission={'MANAGE_SEGMENTS'}
level={'project'}
>
{({ permission }) =>
Utils.renderWithPermission(
permission,
Constants.projectPermissions('Manage Segments'),
<>
{!v.id || v.is_feature_specific ? (
<Button
disabled={!permission}
onClick={() => {
setShowCreateSegment(true)
setSegmentEditId(v.segment)
}}
className='btn btn-with-icon'
>
<span className='no-pointer'>
<Icon name='edit' fill={'#656D7B'} width={20} />
</span>
</Button>
) : (
<Button
theme='text'
disabled={!permission}
target='_blank'
href={`${document.location.origin}/project/${this.props.projectId}/environment/${this.props.environmentId}/segments?id=${v.segment}`}
className='btn btn-with-icon'
>
<span className='no-pointer'>
<Icon name='edit' fill={'#656D7B'} width={20} />
</span>
</Button>
)}
</>,
)
}
</Permission>
{!readOnly && (
<Button
disabled={disabled}
Expand Down Expand Up @@ -593,7 +591,7 @@ class TheComponent extends Component {
!this.props.disableCreate && (
<div className='text-right'>
<Button
className='mt-2'
className='mt-4'
onClick={() => {
this.setState({ selectedSegment: null })
this.props.setShowCreateSegment(true)
Expand Down Expand Up @@ -634,6 +632,7 @@ class TheComponent extends Component {
)}
{this.props.showCreateSegment && this.state.segmentEditId && (
<CreateSegmentModal
className='my-2'
segment={this.state.segmentEditId}
isEdit
condensed
Expand Down
4 changes: 3 additions & 1 deletion frontend/web/components/modals/CreateSegment.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ type PageType = {
}

type CreateSegmentType = {
className?: string
projectId: number | string
searchInput: string
environmentId: string
Expand All @@ -67,6 +68,7 @@ type CreateSegmentType = {

let _operators: Operator[] | null = null
const CreateSegment: FC<CreateSegmentType> = ({
className,
condensed,
environmentId,
feature,
Expand Down Expand Up @@ -656,7 +658,7 @@ const CreateSegment: FC<CreateSegmentType> = ({
</TabItem>
</Tabs>
) : (
<div className='my-3 mx-4'>{Tab1}</div>
<div className={className || 'my-3 mx-4'}>{Tab1}</div>
)}
</>
)
Expand Down
7 changes: 2 additions & 5 deletions frontend/web/components/pages/ChangeRequestPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -372,7 +372,7 @@ const ChangeRequestsPage = class extends Component {
}
title={changeRequest.title}
>
Created at{' '}
Created{' '}
{moment(changeRequest.created_at).format(
'Do MMM YYYY HH:mma',
)}{' '}
Expand All @@ -386,10 +386,7 @@ const ChangeRequestsPage = class extends Component {
<div className='col-md-12'>
{isScheduled && (
<div className='col-md-6 mb-4'>
<InfoMessage
icon='ion-md-calendar'
title='Scheduled Change'
>
<InfoMessage icon='calendar' title='Scheduled Change'>
This feature change{' '}
{changeRequest?.committedAt
? 'is scheduled to'
Expand Down
4 changes: 3 additions & 1 deletion frontend/web/components/pages/ChangeRequestsPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,7 @@ const ChangeRequestsPage = class extends Component {
)}
renderRow={({
created_at,
description,
id,
live_from,
title,
Expand Down Expand Up @@ -200,10 +201,11 @@ const ChangeRequestsPage = class extends Component {
)}
</div>
<div className='list-item-subtitle mt-1'>
Created at{' '}
Created{' '}
{moment(created_at).format('Do MMM YYYY HH:mma')}{' '}
by {user && user.first_name}{' '}
{user && user.last_name}
{description ? ` - ${description}` : ''}
</div>
</Flex>
<div className='table-column'>
Expand Down
2 changes: 1 addition & 1 deletion frontend/web/components/pages/ScheduledChangesPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ const ChangeRequestsPage = class extends Component {
<Flex className='table-column px-3'>
<div className='font-weight-medium'>{title}</div>
<div className='list-item-subtitle mt-1'>
Created at{' '}
Created{' '}
{moment(created_at).format('Do MMM YYYY HH:mma')}{' '}
by {user && user.first_name}{' '}
{user && user.last_name}
Expand Down
4 changes: 4 additions & 0 deletions frontend/web/styles/components/_panel.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,10 @@ a.text-white {
&:first-child {
border-top: none;
}
&:last-of-type {
border-bottom-left-radius: $border-radius-default;
border-bottom-right-radius: $border-radius-default;
}
}
}
}
Expand Down

3 comments on commit 353d077

@vercel
Copy link

@vercel vercel bot commented on 353d077 Dec 20, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

flagsmith-frontend-preview – ./frontend

flagsmith-frontend-preview-flagsmith.vercel.app
flagsmith-frontend-production-native.vercel.app
flagsmith-frontend-preview-git-main-flagsmith.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 353d077 Dec 20, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

docs – ./docs

docs.flagsmith.com
docs.bullet-train.io
docs-git-main-flagsmith.vercel.app
docs-flagsmith.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 353d077 Dec 20, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

flagsmith-frontend-staging – ./frontend

flagsmith-frontend-staging-flagsmith.vercel.app
staging.flagsmith.com
flagsmith-staging-frontend.vercel.app
flagsmith-frontend-staging-git-main-flagsmith.vercel.app

Please sign in to comment.