Skip to content

Commit

Permalink
feat: Update identity override styles (#5053)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kyle-ssg
kyle-ssg authored Feb 12, 2025
1 parent 03261dd commit 1344a17
Show file tree
Hide file tree
Showing 6 changed files with 66 additions and 56 deletions.
86 changes: 53 additions & 33 deletions frontend/web/components/pages/UserPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,10 @@ import _data from 'common/data/base/_data'
import classNames from 'classnames'
import moment from 'moment'
import { removeIdentity } from './UsersPage'
import IdentityOverridesIcon from 'components/IdentityOverridesIcon'
import SegmentOverridesIcon from 'components/SegmentOverridesIcon'
import SegmentsIcon from 'components/svg/SegmentsIcon'
import UsersIcon from 'components/svg/UsersIcon'

const width = [200, 48, 78]

Expand Down Expand Up @@ -634,6 +638,11 @@ const UserPage: FC<UserPageType> = (props) => {
flagEnabledDifferent ||
flagValueDifferent

const hasSegmentOverride =
flagValueDifferent &&
!hasUserOverride &&
!isMultiVariateOverride

const onClick = () => {
if (permission) {
editFeature(
Expand All @@ -657,9 +666,12 @@ const UserPage: FC<UserPageType> = (props) => {
return (
<div
className={classNames(
`flex-row space list-item clickable py-2 ${
flagDifferent && 'flag-different'
}`,
`flex-row space list-item clickable py-2`,
{
'bg-primary-opacity-5':
hasUserOverride ||
hasSegmentOverride,
},
{
'list-item-xs':
isCompact &&
Expand All @@ -671,7 +683,7 @@ const UserPage: FC<UserPageType> = (props) => {
data-test={`user-feature-${i}`}
onClick={onClick}
>
<Flex className='table-column'>
<Flex className='table-column pt-0'>
<Row>
<Flex>
<Row
Expand Down Expand Up @@ -717,13 +729,19 @@ const UserPage: FC<UserPageType> = (props) => {
/>
</Row>
{hasUserOverride ? (
<div className='list-item-subtitle mt-1'>
Overriding defaults
<div className='list-item-subtitle text-primary d-flex align-items-center'>
<UsersIcon
fill='#6837fc'
width={16}
className='me-1'
/>
This feature is being
overridden for this identity
</div>
) : flagEnabledDifferent ? (
<div
data-test={`feature-override-${i}`}
className='list-item-subtitle mt-1'
className='list-item-subtitle'
>
<Row>
<Flex>
Expand All @@ -742,16 +760,18 @@ const UserPage: FC<UserPageType> = (props) => {
for this user
</span>
) : (
<span>
This flag is being
overridden by
segments and would
normally be{' '}
<strong>
<span className='list-item-subtitle d-flex text-primary align-items-center'>
<SegmentsIcon
className='me-1'
width={16}
fill='#6837fc'
/>
{`This flag is being overridden by a segment and would normally be`}
<div className='ph-1 ml-1 mr-1 fw-semibold'>
{flagEnabled
? 'on'
: 'off'}
</strong>{' '}
</div>{' '}
for this user
</span>
)}
Expand All @@ -762,7 +782,7 @@ const UserPage: FC<UserPageType> = (props) => {
isMultiVariateOverride ? (
<div
data-test={`feature-override-${i}`}
className='list-item-subtitle mt-1'
className='list-item-subtitle'
>
<span className='flex-row'>
This feature is being
Expand All @@ -779,28 +799,28 @@ const UserPage: FC<UserPageType> = (props) => {
</span>
</div>
) : (
<div
data-test={`feature-override-${i}`}
className='list-item-subtitle mt-1'
>
<span className='flex-row'>
This feature is being
overridden by segments
and would normally be{' '}
<FeatureValue
className='ml-1 chip--xs'
includeEmpty
data-test={`user-feature-original-value-${i}`}
value={`${flagValue}`}
/>{' '}
for this user
</span>
</div>
<span className='d-flex list-item-subtitle text-primary align-items-center'>
<SegmentsIcon
className='me-1'
width={16}
fill='#6837fc'
/>
{`This feature is being
overridden by a segment
and would normally be`}
<FeatureValue
className='ml-1 chip--xs'
includeEmpty
data-test={`user-feature-original-value-${i}`}
value={`${flagValue}`}
/>{' '}
for this user
</span>
)
) : (
getViewMode() ===
'default' && (
<div className='list-item-subtitle mt-1'>
<div className='list-item-subtitle'>
Using environment defaults
</div>
)
Expand Down
8 changes: 5 additions & 3 deletions frontend/web/components/svg/UsersIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,15 @@ import React from 'react'

interface UsersIconProps {
className?: string
width?: number
fill?: string
}

const UsersIcon: React.FC<UsersIconProps> = ({ className }) => (
<svg className={className} viewBox='0 0 26 18'>
const UsersIcon: React.FC<UsersIconProps> = ({ className, fill, width }) => (
<svg className={className} width={width} viewBox='0 0 26 18'>
<path
d='M7.68 8.96a4.478 4.478 0 004.48-4.48A4.478 4.478 0 007.68 0 4.478 4.478 0 003.2 4.48a4.478 4.478 0 004.48 4.48zm3.072 1.28h-.332c-.832.4-1.756.64-2.74.64-.984 0-1.904-.24-2.74-.64h-.332A4.61 4.61 0 000 14.848V16c0 1.06.86 1.92 1.92 1.92h11.52c1.06 0 1.92-.86 1.92-1.92v-1.152a4.61 4.61 0 00-4.608-4.608zM19.2 8.96a3.841 3.841 0 000-7.68 3.841 3.841 0 000 7.68zm1.92 1.28h-.152a5.39 5.39 0 01-1.768.32 5.39 5.39 0 01-1.768-.32h-.152c-.816 0-1.568.236-2.228.616.976 1.052 1.588 2.448 1.588 3.992v1.536c0 .088-.02.172-.024.256h7.064c1.06 0 1.92-.86 1.92-1.92a4.478 4.478 0 00-4.48-4.48z'
fill='#FFF'
fill={fill || '#FFF'}
fillRule='nonzero'
/>
</svg>
Expand Down
4 changes: 4 additions & 0 deletions frontend/web/styles/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -391,3 +391,7 @@ $input-padding-y: 1rem !default;

//TRANSITIONS
$button-transition: background-color 400ms cubic-bezier(0.23, 1, 0.32, 1);

.bg-opacity-5 {
--bs-bg-opacity: 0.5 !important;
}
19 changes: 0 additions & 19 deletions frontend/web/styles/project/_UserPage.scss
View file

This file was deleted.

1 change: 0 additions & 1 deletion frontend/web/styles/project/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
@import "panel";
@import "FeaturesPage";
@import "PricingPage";
@import "UserPage";
@import "alert";
@import "icons";
@import "layout";
Expand Down
4 changes: 4 additions & 0 deletions frontend/web/styles/project/_utils.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,3 +229,7 @@
.pointer-events-none {
pointer-events: none;
}

.bg-primary-opacity-5 {
background-color: transparentize($primary, 0.95);
}

0 comments on commit 1344a17

Please sign in to comment.