styling profile detail modal

net/web/src/context/useSettingsContext.hook.js

@@ -87,7 +87,7 @@ export function useSettingsContext() {
     if (language && language.startsWith('fr')) {
       updateState({ language: 'fr', strings: fr });
     }
-    else if (language && language.startWith('en')) {
+    else if (language && language.startsWith('en')) {
       updateState({ language: 'en', strings: en });
     }
     else {

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

@@ -81,14 +81,6 @@ export function Profile({ closeProfile }) {
     </EditFooter>
   );
 
-  const editDetailsFooter = (
-    <EditFooter>
-      <div className="select"></div>
-      <Button key="back" onClick={actions.clearEditProfileDetails}>Cancel</Button>
-      <Button key="save" type="primary" onClick={saveDetails} loading={state.busy}>Save</Button>
-    </EditFooter>
-  );
-
   const onCropComplete = useCallback((area, crop) => {
     actions.setEditImageCrop(crop.width, crop.height, crop.x, crop.y)
     // eslint-disable-next-line
@@ -173,8 +165,8 @@ export function Profile({ closeProfile }) {
         </ProfileImageWrapper>
 
       </Modal>
-      <Modal title="Profile Details" centered visible={state.editProfileDetails} footer={editDetailsFooter}
+      <Modal centered closable={false} visible={state.editProfileDetails} footer={null}
-          bodyStyle={{ padding: 16 }} onCancel={actions.clearEditProfileDetails}>
+          bodyStyle={{ padding: 16, ...state.menuStyle }} onCancel={actions.clearEditProfileDetails}>
 
         <ProfileDetailsWrapper>
           <div class="info">
@@ -189,6 +181,11 @@ export function Profile({ closeProfile }) {
             <Input.TextArea placeholder="Description" onChange={(e) => actions.setEditDescription(e.target.value)}
                 spellCheck="false" defaultValue={state.editDescription} autoSize={{ minRows: 2, maxRows: 6 }} />
           </div>
+
+          <div className="controls">
+            <Button key="back" onClick={actions.clearEditProfileDetails}>Cancel</Button>
+            <Button key="save" type="primary" onClick={saveDetails} loading={state.busy}>Save</Button>
+          </div>
         </ProfileDetailsWrapper>
 
       </Modal>

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

@@ -242,12 +242,42 @@ export const EditFooter = styled.div`
 export const ProfileDetailsWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  align-items: center;
   justify-content: center;
+  gap: 16px;
 
   .info {
     width: 100%;
-    padding: 8px;
+    background-color: ${props => props.theme.inputArea};
+    color: ${props => props.theme.mainText};
+    border-radius: 8px;
+
+    textarea {
+      padding-left: 8px;
+      background-color: ${props => props.theme.inputArea};
+      border: 1px solid ${props => props.theme.sectionBorder};
+      color: ${props => props.theme.mainText};
+    }
+
+    textarea::placeholder {
+      color: ${props => props.theme.placeholderText};
+    }
+
+    input {
+      padding-left: 8px;
+      background-color: ${props => props.theme.inputArea};
+      border: 1px solid ${props => props.theme.sectionBorder};
+      color: ${props => props.theme.mainText};
+    }
+
+    input::placeholder {
+      color: ${props => props.theme.placeholderText};
+    }
+  }
+
+  .controls {
+    display: flex;
+    justify-content: flex-end;
+    gap: 16px;
   }
 `;
 

net/web/src/session/account/profile/accountAccess/AccountAccess.jsx

@@ -52,14 +52,6 @@ export function AccountAccess() {
     }
   }
 
-  const editLoginFooter = (
-    <EditFooter>
-      <div className="select"></div>
-      <Button key="back" onClick={actions.clearEditLogin}>Cancel</Button>
-      <Button key="save" type="primary" onClick={saveLogin} disabled={!actions.canSaveLogin()} loading={state.busy}>Save</Button>
-    </EditFooter>
-  );
-
   const editSealFooter = (
     <EditFooter>
       <div className="select"></div>