styling logout modal

net/web/src/session/account/profile/Profile.jsx

@@ -1,6 +1,6 @@
 import { useRef, useCallback } from 'react';
-import { Modal, Input, Button } from 'antd';
-import { ProfileWrapper, ProfileDetailsWrapper, ProfileImageWrapper, EditFooter } from './Profile.styled';
+import { Modal, Input, Button, Switch } from 'antd';
+import { LogoutContent, ProfileWrapper, ProfileDetailsWrapper, ProfileImageWrapper, EditFooter } from './Profile.styled';
 import { useProfile } from './useProfile.hook';
 import { Logo } from 'logo/Logo';
 import { AccountAccess } from './accountAccess/AccountAccess';
@@ -12,6 +12,7 @@ export function Profile({ closeProfile }) {
   const [ modal, modalContext ] = Modal.useModal();
   const { state, actions } = useProfile();
   const imageFile = useRef(null);
+  const all = useRef(false);
 
   const selected = (e) => {
     var reader = new FileReader();
@@ -53,12 +54,18 @@ export function Profile({ closeProfile }) {
 
   const logout = () => {
     modal.confirm({
-      title: 'Are you sure you want to logout?',
+      title: <span style={state.menuStyle}>{state.strings.confirmLogout}</span>,
       icon: <LogoutOutlined />,
-      bodyStyle: { padding: 16 },
+      content: <LogoutContent onClick={(e) => e.stopPropagation()}>
+                <span className="logoutMode">{ state.strings.allDevices }</span>
+                <Switch onChange={(e) => all.current = e} size="small" />
+               </LogoutContent>,
+      bodyStyle: { padding: 16, ...state.menuStyle },
+      okText: state.strings.ok,
       onOk() {
-        actions.logout();
+        actions.logout(all.current);
       },
+      cancelText: state.strings.cancel,
       onCancel() {},
     });
   }

net/web/src/session/account/profile/Profile.styled.js

@@ -217,6 +217,19 @@ export const ProfileWrapper = styled.div`
     }
   }
 `
+
+export const LogoutContent = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+
+  .logoutMode {
+    padding-right: 8px;
+    color: ${props => props.theme.mainText};
+  }
+`
+
 export const EditFooter = styled.div`
   width: 100%;
   display: flex;

net/web/src/session/account/profile/useProfile.hook.js

@@ -25,6 +25,8 @@ export function useProfile() {
     crop: { x: 0, y: 0},
     zoom: 1,
     busy: false,
+    strings: {},
+    menuStyle: {},
   });
 
   const IMAGE_DIM = 192;
@@ -45,7 +47,8 @@ export function useProfile() {
   }, [profile.state]);
 
   useEffect(() => {
-    updateState({ displaySet: true, display: settings.state.display });
+    const { display, strings, menuStyle } = settings.state;
+    updateState({ displaySet: true, display, strings, menuStyle });
   }, [settings.state]);
 
   const actions = {

todo

@@ -1,13 +1,10 @@
 profile:
-  - details layout
-  - detail edit icon style
-  - image edit icon layout
+  - add translations
   - style modals
-  - add app settings
-    - hour format
-    - date format
-    - color theme
-    - language
+    - image edit
+    - details edit
+    - sealed topics
+    - change login
 
 contact:
   - dark style