feat:new toggle screen view (#544)

* feat: change toggle view screen

* fix: revert changes for toggle status box

* fix: replace IconButton with PermissionButton and change edit icon color

* fix: change component header and replace pie chart icon in feature view

* feat: add strategies icons to accordion summary

* reverting to 9059f90 commit

Co-authored-by: Fredrik Strand Oseberg <fredrik.no@gmail.com>

frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureEnvironmentMetrics/FeatureEnvironmentMetrics.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import PercentageCircle from '../../../../common/PercentageCircle/PercentageCircle';
 import { useStyles } from './FeatureEnvironmentMetrics.styles';
-import PieChartIcon from '@material-ui/icons/PieChart';
+import {FiberManualRecord} from '@material-ui/icons';
 import { useMediaQuery } from '@material-ui/core';
 import { IFeatureEnvironmentMetrics } from '../../../../../interfaces/featureToggle';
 import { parseISO } from 'date-fns';
@@ -75,7 +75,7 @@ const FeatureEnvironmentMetrics = ({
                     </div>
 
                     <div className={styles.chartContainer}>
-                        <PieChartIcon
+                        <FiberManualRecord
                             style={{ transform: 'scale(1.4)' }}
                             className={styles.icon}
                             data-loading

frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx

@@ -45,7 +45,7 @@ const FeatureOverviewEnvSwitches = () => {
                 title="Environments can be switched off for a single toggle. Resulting in all calls towards the toggle to return false."
             >
                 <h3 className={styles.header} data-loading>
-                    Toggle status
+                    Feature toggle status
                 </h3>
             </Tooltip>
             {renderEnvironmentSwitches()}

frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx

@@ -60,11 +60,11 @@ const FeatureOverviewEnvironment = ({
                             enabled={env.enabled}
                             className={styles.headerIcon}
                         />
-                        Toggle execution for 
+                        Feature toggle execution for 
                         <StringTruncator
                             text={env.name}
                             className={styles.truncator}
-                            maxWidth="120"
+                            maxWidth="100"
                         />
                         <ConditionallyRender
                             condition={!env.enabled}

frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx

@@ -1,4 +1,4 @@
-import PieChart from '@material-ui/icons/PieChart';
+import { FiberManualRecord } from '@material-ui/icons';
 import { IFeatureEnvironmentMetrics } from '../../../../../../../interfaces/featureToggle';
 import { calculatePercentage } from '../../../../../../../utils/calculate-percentage';
 import PercentageCircle from '../../../../../../common/PercentageCircle/PercentageCircle';
@@ -30,7 +30,7 @@ const FeatureOverviewEnvironmentMetrics = ({
                         No one has received this feature in the last hour.
                     </p>
                 </div>
-                <PieChart
+                <FiberManualRecord
                     className={styles.icon}
                     style={{ transform: 'scale(1.1)' }}
                     data-loading

frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx

@@ -1,4 +1,4 @@
-import { capitalize, IconButton } from '@material-ui/core';
+import { capitalize } from '@material-ui/core';
 import classnames from 'classnames';
 import { useParams } from 'react-router-dom';
 import { Link } from 'react-router-dom';
@@ -51,7 +51,7 @@ const FeatureOverviewMetaData = () => {
                                         component={Link}
                                         to={`/projects/${projectId}/features2/${featureId}/settings`}
                                     >
-                                        <Edit />
+                                        <Edit className={styles.editIcon} />
                                     </PermissionIconButton>
                                 </div>
                             </span>
@@ -60,12 +60,14 @@ const FeatureOverviewMetaData = () => {
                             <span data-loading>
                                 <div className={styles.descriptionContainer}>
                                     No description.{' '}
-                                    <IconButton
+                                    <PermissionIconButton
+                                        projectId={projectId}
+                                        permission={UPDATE_FEATURE}
                                         component={Link}
                                         to={`/projects/${projectId}/features2/${featureId}/settings`}
                                     >
-                                        <Edit />
+                                        <Edit className={styles.editIcon} />
-                                    </IconButton>
+                                    </PermissionIconButton>
                                 </div>
                             </span>
                         }

frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetadata.styles.ts

@@ -3,7 +3,8 @@ import { makeStyles } from '@material-ui/core/styles';
 export const useStyles = makeStyles(theme => ({
     container: {
         borderRadius: '10px',
-        backgroundColor: '#fff',
+        color: '#fff',
+        backgroundColor: theme.palette.primary.light,
         display: 'flex',
         flexDirection: 'column',
         maxWidth: '350px',
@@ -39,12 +40,15 @@ export const useStyles = makeStyles(theme => ({
         marginRight: '1rem',
         height: '40px',
         width: '40px',
-        fill: theme.palette.primary.main,
+        fill: '#fff',
     },
     descriptionContainer: {
         display: 'flex',
         alignItems: 'center',
-        color: theme.palette.grey[600],
+        color: '#fff',
+    },
+    editIcon: {
+        color: '#fff',
     },
     [theme.breakpoints.down(1000)]: {
         container: {

frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.styles.ts

@@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core/styles';
 export const useStyles = makeStyles(theme => ({
     container: {
         borderRadius: '10px',
-        backgroundColor: '#fff',
+        backgroundColor: theme.palette.primary.light,
         display: 'flex',
         flexDirection: 'column',
         marginRight: '1rem',
@@ -28,6 +28,13 @@ export const useStyles = makeStyles(theme => ({
     tagChip: {
         marginRight: '0.25rem',
         marginTop: '0.5rem',
+        backgroundColor: '#fff',
         fontSize: theme.fontSizes.smallBody,
     },
+    closeIcon: {
+        color: theme.palette.primary.light,
+        '&:hover': {
+            color: theme.palette.primary.light,
+        },
+    },
 }));

frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.tsx

@@ -1,6 +1,6 @@
 import { useState, useContext } from 'react';
 import { Chip } from '@material-ui/core';
-import { Label } from '@material-ui/icons';
+import { Label, Close } from '@material-ui/icons';
 import { useParams } from 'react-router-dom';
 import useTags from '../../../../../../hooks/api/getters/useTags/useTags';
 import { IFeatureViewParams } from '../../../../../../interfaces/params';
@@ -101,6 +101,7 @@ const FeatureOverviewTags = () => {
             data-loading
             label={t.value}
             key={`${t.type}:${t.value}`}
+            deleteIcon={<Close className={styles.closeIcon} />}
             onDelete={
                 canDeleteTag
                     ? () => {