Protection level rework

Extension/src/pages/common/components/ThinCard/ThinCard.jsx

@@ -0,0 +1,8 @@
+import { Card } from '@qwant/qwant-ponents';
+import cx from 'classnames';
+import React from 'react';
+import Styles from './ThinCard.module.scss';
+
+export function ThinCard({ className, ...props }) {
+    return <Card {...props} className={cx(Styles.ThinCard, className)} />;
+}

Extension/src/pages/common/components/ThinCard/ThinCard.module.scss

@@ -0,0 +1,3 @@
+.ThinCard {
+  border: 1px solid var(--grey-200) !important;
+}

Extension/src/pages/popup/components/MainView/MainView.jsx

@@ -10,7 +10,7 @@ import { Stack } from '@qwant/qwant-ponents';
 import { LoadingView } from './LoadingView';
 import { GlobalStats } from './GlobalStats';
 import { PermissionsMissing } from './PermissionsMissing';
-import { ProtectionLevel } from './ProtectionLevel';
+import { ProtectionLevel } from './ProtectionLevel/ProtectionLevel';
 import { ProtectionStatus } from './ProtectionStatus/ProtectionStatus';
 
 import { messenger } from '../../../services/messenger';

Extension/src/pages/popup/components/MainView/ProtectionLevel/ProtectionLevel.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { t } from '~src/common/translators/reactTranslator';
+
+import { ThinCard } from '~src/pages/common/components/ThinCard/ThinCard';
+import { Flex, IconArrowRightSLine, Text } from '@qwant/qwant-ponents';
+import Styles from './ProtectionLevel.module.scss';
+
+const getProtectionLevel = ({
+    protectionLevel,
+    applicationFilteringDisabled,
+}) => {
+    if (applicationFilteringDisabled) return 'disabled';
+    return protectionLevel;
+};
+
+export const ProtectionLevel = ({
+    protectionLevel,
+    applicationFilteringDisabled,
+    onClick,
+}) => {
+    const level = getProtectionLevel({
+        protectionLevel,
+        applicationFilteringDisabled,
+    });
+
+    return (
+        <ThinCard p="s" onClick={onClick} as="button" className={Styles.ProtectionLevel}>
+            <Flex between alignCenter>
+                <Text bold typo="body-2" color="primary">
+                    {t('protection_level')}
+                </Text>
+                <Text typo="heading-5" color="primary">
+                    <Flex alignCenter>
+                        <Text typo="body-2" color="primary">
+                            {level ? t(`protection_level_${level}`) : ''}
+                        </Text>
+                        <IconArrowRightSLine />
+                    </Flex>
+                </Text>
+            </Flex>
+        </ThinCard>
+    );
+};

Extension/src/pages/popup/components/MainView/ProtectionLevel/ProtectionLevel.module.scss

@@ -0,0 +1,7 @@
+.ProtectionLevel svg {
+  transition: transform .3s;
+}
+
+.ProtectionLevel:hover svg {
+  transform: translateX(var(--spacing-xxs));
+}