Merge pull request #1183 from dm3-org/1171-bugs

fixed UI issues for Network & Profile modal
dm3-org · Sep 24, 2024 · 6a93114 · 6a93114
2 parents 86704e8 + 5ae7e63
commit 6a93114
Show file tree

Hide file tree

Showing 12 changed files with 258 additions and 66 deletions.
diff --git a/packages/messenger-widget/src/components/ConfigureProfile/CloudStorage.tsx b/packages/messenger-widget/src/components/ConfigureProfile/CloudStorage.tsx
@@ -1,6 +1,6 @@
 import { useContext, useState } from 'react';
 import { ModalContext } from '../../context/ModalContext';
-import { ProfileScreenType } from '../../utils/enum-type-utils';
+import { ProfileScreenType, ProfileType } from '../../utils/enum-type-utils';
 import { BUTTON_CLASS, DM3_NAME_SERVICES, dm3NamingServices } from './bl';
 import { ConfigureProfileContext } from './context/ConfigureProfileContext';
 import { DM3ConfigurationContext } from '../../context/DM3ConfigurationContext';
@@ -59,6 +59,14 @@ export function CloudStorage() {
             </div>
 
             <div className="p-4">
+                <div
+                    className={
+                        'conversation-error ms-0 mb-2 font-weight-400 show-error'
+                    }
+                >
+                    {errorMsg ?? ''}
+                </div>
+
                 <div className="name-select-container">
                     <select
                         className="name-service-selector"
@@ -78,14 +86,6 @@ export function CloudStorage() {
                     </select>
                 </div>
 
-                <div
-                    className={
-                        'conversation-error ms-0 mb-2 font-weight-400 show-error'
-                    }
-                >
-                    {errorMsg ?? ''}
-                </div>
-
                 <div className="mt-4 dm3-name-content">
                     <div className="small-text font-weight-300">
                         You can get a DM3 name for free. Please check if your
@@ -100,6 +100,20 @@ export function CloudStorage() {
                 </div>
             </div>
             <div className="d-flex justify-content-end me-3 mb-3">
+                <button
+                    className={BUTTON_CLASS.concat(
+                        ' ',
+                        'config-profile-cancel-btn me-3',
+                    )}
+                    onClick={() => {
+                        setConfigureProfileModal({
+                            profileOptionSelected: ProfileType.DM3_NAME,
+                            onScreen: ProfileScreenType.NONE,
+                        });
+                    }}
+                >
+                    Cancel
+                </button>
                 <button
                     className={BUTTON_CLASS.concat(' ', 'add-prof-btn-active')}
                     onClick={() => navigateToNextTab()}

diff --git a/packages/messenger-widget/src/components/ConfigureProfile/ConfigureProfile.css b/packages/messenger-widget/src/components/ConfigureProfile/ConfigureProfile.css
@@ -93,7 +93,6 @@ input::placeholder {
     padding: 2px 7px 2px 7px;
     border-radius: 13px;
     font-size: 10px;
-    font-weight: bold;
     cursor: pointer;
     position: relative;
 }
@@ -108,7 +107,7 @@ input::placeholder {
     margin: 22px 9px 10px 0px;
     background-color: var(--text-secondary-color);
     font-size: 0.7rem;
-    font-weight: 100;
+    font-weight: 600;
     line-height: 1rem;
     cursor: text;
 }
@@ -155,7 +154,7 @@ input::placeholder {
 }
 
 .prof-option-container{
-    padding: 1rem;
+    padding: 3rem 1rem 1rem 1rem;
 }
 
 .update-btn {
@@ -209,6 +208,12 @@ input::placeholder {
     padding: 1.25rem;
   }
 
+  .config-profile-cancel-btn {
+    background-color: transparent;
+    border: 2px solid var(--preferences-highlighted-color);
+    color: var(--text-primary-color);
+}
+
 /* =================== Mobile Responsive CSS =================== */
 
 @media only screen and (min-width: 800px) and (max-width: 1150px) {

diff --git a/packages/messenger-widget/src/components/ConfigureProfile/NormalView.tsx b/packages/messenger-widget/src/components/ConfigureProfile/NormalView.tsx
@@ -77,7 +77,7 @@ export function NormalView() {
     }, []);
 
     return (
-        <div className="mt-2">
+        <div className="mt-2 ms-2">
             {/* Delete DM3 name confirmation popup modal */}
             {showDeleteConfirmation && (
                 <DeleteDM3Name
@@ -86,8 +86,8 @@ export function NormalView() {
                 />
             )}
 
-            <div className="d-flex pt-4 ps-4">
-                <div className="profile-config-container ps-2">
+            <div className="d-flex pt-4 ms-4">
+                <div className="profile-config-container">
                     {/* Wallet Address */}
                     <div className="d-flex">
                         <p

diff --git a/packages/messenger-widget/src/components/ConfigureProfile/OwnStorage.tsx b/packages/messenger-widget/src/components/ConfigureProfile/OwnStorage.tsx
@@ -1,6 +1,6 @@
 import { useContext, useState } from 'react';
 import { ModalContext } from '../../context/ModalContext';
-import { ProfileScreenType } from '../../utils/enum-type-utils';
+import { ProfileScreenType, ProfileType } from '../../utils/enum-type-utils';
 import { BUTTON_CLASS, NAME_SERVICES, namingServices } from './bl';
 import { ConfigureProfileContext } from './context/ConfigureProfileContext';
 
@@ -53,6 +53,14 @@ export function OwnStorage() {
             </div>
 
             <div className="p-4">
+                <div
+                    className={
+                        'conversation-error ms-0 mb-2 font-weight-400 show-error'
+                    }
+                >
+                    {errorMsg ?? ''}
+                </div>
+
                 <div className="name-select-container">
                     <select
                         className="name-service-selector"
@@ -72,14 +80,6 @@ export function OwnStorage() {
                     </select>
                 </div>
 
-                <div
-                    className={
-                        'conversation-error ms-0 mb-2 font-weight-400 show-error'
-                    }
-                >
-                    {errorMsg ?? ''}
-                </div>
-
                 <div className="mt-4 dm3-name-content">
                     <div className="small-text font-weight-300">
                         To publish your dm3 profile, a transaction is sent to
@@ -94,6 +94,20 @@ export function OwnStorage() {
                 </div>
             </div>
             <div className="d-flex justify-content-end me-3 mb-3">
+                <button
+                    className={BUTTON_CLASS.concat(
+                        ' ',
+                        'config-profile-cancel-btn me-3',
+                    )}
+                    onClick={() => {
+                        setConfigureProfileModal({
+                            profileOptionSelected: ProfileType.DM3_NAME,
+                            onScreen: ProfileScreenType.NONE,
+                        });
+                    }}
+                >
+                    Cancel
+                </button>
                 <button
                     className={BUTTON_CLASS.concat(' ', 'add-prof-btn-active')}
                     onClick={() => navigateToNextTab()}

diff --git a/packages/messenger-widget/src/components/ConfigureProfile/ProfileTypeSelector.tsx b/packages/messenger-widget/src/components/ConfigureProfile/ProfileTypeSelector.tsx
@@ -55,6 +55,20 @@ export function ProfileTypeSelector() {
                 ))}
             </div>
             <div className="d-flex justify-content-end me-3 mb-3">
+                <button
+                    className={BUTTON_CLASS.concat(
+                        ' ',
+                        'config-profile-cancel-btn me-3',
+                    )}
+                    onClick={() => {
+                        setConfigureProfileModal({
+                            profileOptionSelected: ProfileType.DM3_NAME,
+                            onScreen: ProfileScreenType.NONE,
+                        });
+                    }}
+                >
+                    Cancel
+                </button>
                 <button
                     className={BUTTON_CLASS.concat(' add-prof-btn-active')}
                     onClick={() => {

diff --git a/packages/messenger-widget/src/components/ConfigureProfile/chain/MobileView.tsx b/packages/messenger-widget/src/components/ConfigureProfile/chain/MobileView.tsx
@@ -6,6 +6,9 @@ import {
     PROFILE_INPUT_FIELD_CLASS,
     BUTTON_CLASS,
 } from './common';
+import { ModalContext } from '../../../context/ModalContext';
+import { ConfigureDM3NameContext } from '../context/ConfigureDM3NameContext';
+import { ProfileScreenType, ProfileType } from '../../../utils/enum-type-utils';
 
 export const MobileView = ({
     propertyName,
@@ -29,8 +32,14 @@ export const MobileView = ({
         errorMsg,
         existingEnsName,
         setExistingEnsName,
+        setEnsName,
     } = useContext(ConfigureProfileContext);
 
+    const { setDm3Name } = useContext(ConfigureDM3NameContext);
+
+    const { configureProfileModal, setConfigureProfileModal } =
+        useContext(ModalContext);
+
     // handles configure or remove ENS name
     const handlePublishOrRemoveProfile = async (type: ACTION_TYPE) => {
         if (type === ACTION_TYPE.CONFIGURE) {
@@ -90,6 +99,23 @@ export const MobileView = ({
                         </form>
                     </div>
                     <div className="mt-2">
+                        <button
+                            className={BUTTON_CLASS.concat(
+                                ' ',
+                                'config-profile-cancel-btn me-3',
+                            )}
+                            onClick={() => {
+                                setDm3Name('');
+                                setEnsName('');
+                                onShowError(NAME_TYPE.DM3_NAME, '');
+                                setConfigureProfileModal({
+                                    profileOptionSelected: ProfileType.DM3_NAME,
+                                    onScreen: ProfileScreenType.NONE,
+                                });
+                            }}
+                        >
+                            Cancel
+                        </button>
                         <button
                             data-testid="publish-profile"
                             disabled={!ensName || !ensName.length}

diff --git a/packages/messenger-widget/src/components/ConfigureProfile/chain/NormalView.tsx b/packages/messenger-widget/src/components/ConfigureProfile/chain/NormalView.tsx
@@ -6,6 +6,9 @@ import {
     PROFILE_INPUT_FIELD_CLASS,
     BUTTON_CLASS,
 } from './common';
+import { ModalContext } from '../../../context/ModalContext';
+import { ProfileScreenType, ProfileType } from '../../../utils/enum-type-utils';
+import { ConfigureDM3NameContext } from '../context/ConfigureDM3NameContext';
 
 export const NormalView = ({
     propertyName,
@@ -29,8 +32,14 @@ export const NormalView = ({
         errorMsg,
         existingEnsName,
         setExistingEnsName,
+        setEnsName,
     } = useContext(ConfigureProfileContext);
 
+    const { setDm3Name } = useContext(ConfigureDM3NameContext);
+
+    const { configureProfileModal, setConfigureProfileModal } =
+        useContext(ModalContext);
+
     // handles configure or remove ENS name
     const handlePublishOrRemoveProfile = async (type: ACTION_TYPE) => {
         if (type === ACTION_TYPE.CONFIGURE) {
@@ -100,6 +109,23 @@ export const NormalView = ({
             </div>
 
             <div className="d-flex justify-content-end me-3 mb-3">
+                <button
+                    className={BUTTON_CLASS.concat(
+                        ' ',
+                        'config-profile-cancel-btn me-3',
+                    )}
+                    onClick={() => {
+                        setDm3Name('');
+                        setEnsName('');
+                        onShowError(NAME_TYPE.DM3_NAME, '');
+                        setConfigureProfileModal({
+                            profileOptionSelected: ProfileType.DM3_NAME,
+                            onScreen: ProfileScreenType.NONE,
+                        });
+                    }}
+                >
+                    Cancel
+                </button>
                 <button
                     data-testid="publish-profile"
                     disabled={!existingEnsName && (!ensName || !ensName.length)}

diff --git a/packages/messenger-widget/src/components/ConfigureProfile/dm3Names/MobileView.tsx b/packages/messenger-widget/src/components/ConfigureProfile/dm3Names/MobileView.tsx
@@ -8,6 +8,8 @@ import {
     NAME_TYPE,
     PROFILE_INPUT_FIELD_CLASS,
 } from '../chain/common';
+import { ModalContext } from '../../../context/ModalContext';
+import { ProfileScreenType, ProfileType } from '../../../utils/enum-type-utils';
 
 export const MobileView = ({
     nameExtension,
@@ -20,10 +22,19 @@ export const MobileView = ({
 }) => {
     const { setDisplayName } = useContext(AuthContext);
 
-    const { errorMsg, showError } = useContext(ConfigureProfileContext);
+    const { errorMsg, showError, setEnsName, onShowError } = useContext(
+        ConfigureProfileContext,
+    );
+
+    const {
+        dm3Name,
+        handleNameChange,
+        handleClaimOrRemoveDm3Name,
+        setDm3Name,
+    } = useContext(ConfigureDM3NameContext);
 
-    const { dm3Name, handleNameChange, handleClaimOrRemoveDm3Name } =
-        useContext(ConfigureDM3NameContext);
+    const { configureProfileModal, setConfigureProfileModal } =
+        useContext(ModalContext);
 
     return (
         <div className="d-flex ps-2 align-items-baseline">
@@ -78,6 +89,23 @@ export const MobileView = ({
                     </form>
                 </div>
                 <div className="mt-2">
+                    <button
+                        className={BUTTON_CLASS.concat(
+                            ' ',
+                            'config-profile-cancel-btn me-3',
+                        )}
+                        onClick={() => {
+                            setDm3Name('');
+                            setEnsName('');
+                            onShowError(NAME_TYPE.DM3_NAME, '');
+                            setConfigureProfileModal({
+                                profileOptionSelected: ProfileType.DM3_NAME,
+                                onScreen: ProfileScreenType.NONE,
+                            });
+                        }}
+                    >
+                        Cancel
+                    </button>
                     <button
                         data-testid="claim-publish"
                         disabled={!dm3Name || !dm3Name.length}