Merge pull request #1190 from dm3-org/1174-bug-fix

fixed minor UI issues in profile dialog
dm3-org · Sep 27, 2024 · e6d7b0d · e6d7b0d
2 parents 0af8fff + 3e58f2c
commit e6d7b0d
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 39 deletions.
diff --git a/packages/messenger-widget/src/components/ConfigureProfile/ConfigureProfile.css b/packages/messenger-widget/src/components/ConfigureProfile/ConfigureProfile.css
@@ -225,7 +225,19 @@ input::placeholder {
     }
     .ens-components-container{
         padding: 1rem;
-      }
+    }
+    .profile-action-btns {
+        margin-top: 1rem !important;
+    }
+    .dm3-name-container {
+        width: 100%;
+    }
+}
+
+@media only screen and (max-width: 950px) {
+    #ens-name{
+        width: 90% !important;
+    }
 }
 
 @media only screen and (max-width: 800px) {
@@ -329,4 +341,9 @@ input::placeholder {
     .del-icon{
         height: 1rem;
     }
+
+    .profile-input{
+        width: 100% !important;
+    }
+
 }
diff --git a/packages/messenger-widget/src/components/ConfigureProfile/chain/MobileView.tsx b/packages/messenger-widget/src/components/ConfigureProfile/chain/MobileView.tsx
@@ -98,7 +98,15 @@ export const MobileView = ({
                             />
                         </form>
                     </div>
-                    <div className="mt-2">
+
+                    <div className="mt-3 dm3-name-content">
+                        <div className="small-text font-weight-300 grey-text">
+                            {label}
+                        </div>
+                        <div className="small-text font-weight-700">{note}</div>
+                    </div>
+
+                    <div className="mt-3 mb-2">
                         <button
                             className={BUTTON_CLASS.concat(
                                 ' ',
@@ -134,12 +142,6 @@ export const MobileView = ({
                             Publish Profile
                         </button>
                     </div>
-                    <div className="mt-3 dm3-name-content">
-                        <div className="small-text font-weight-300 grey-text">
-                            {label}
-                        </div>
-                        <div className="small-text font-weight-700">{note}</div>
-                    </div>
                 </div>
             </div>
         </>

diff --git a/packages/messenger-widget/src/components/ConfigureProfile/chain/NormalView.tsx b/packages/messenger-widget/src/components/ConfigureProfile/chain/NormalView.tsx
@@ -58,12 +58,20 @@ export const NormalView = ({
         <>
             <div className="d-flex ps-4 align-items-baseline">
                 <div className="dm3-name-container">
-                    <div
-                        className={
-                            'conversation-error ms-0 mb-2 font-weight-400 show-error'
-                        }
-                    >
-                        {showError === NAME_TYPE.ENS_NAME && errorMsg}
+                    <div className="d-flex align-items-center">
+                        <p
+                            className="m-0 
+                            font-size-14 font-weight-500 line-height-24 title-content invisible"
+                        >
+                            {propertyName}
+                        </p>
+                        <div
+                            className={
+                                'conversation-error ms-0 mb-2 font-weight-400 show-error'
+                            }
+                        >
+                            {showError === NAME_TYPE.ENS_NAME && errorMsg}
+                        </div>
                     </div>
                     <div className="d-flex align-items-center">
                         <p
@@ -83,6 +91,7 @@ export const NormalView = ({
                         >
                             <input
                                 data-testid="ens-name"
+                                id="ens-name"
                                 className={PROFILE_INPUT_FIELD_CLASS.concat(
                                     ' ',
                                     showError === NAME_TYPE.ENS_NAME
@@ -99,7 +108,7 @@ export const NormalView = ({
                         </form>
                     </div>
 
-                    <div className="mt-5 dm3-name-content">
+                    <div className="mt-4 pt-1 dm3-name-content">
                         <div className="small-text font-weight-300">
                             {label}
                         </div>
@@ -108,7 +117,7 @@ export const NormalView = ({
                 </div>
             </div>
 
-            <div className="d-flex justify-content-end me-3 mb-3">
+            <div className="d-flex justify-content-end me-3 mb-3 mt-4">
                 <button
                     className={BUTTON_CLASS.concat(
                         ' ',

diff --git a/packages/messenger-widget/src/components/ConfigureProfile/dm3Names/MobileView.tsx b/packages/messenger-widget/src/components/ConfigureProfile/dm3Names/MobileView.tsx
@@ -88,7 +88,21 @@ export const MobileView = ({
                         </p>
                     </form>
                 </div>
-                <div className="mt-2">
+
+                <div className="mt-3 dm3-name-content">
+                    <div className="small-text font-weight-300 grey-text">
+                        You can get a DM3 name for free. Please check if your
+                        desired name is available. DM3 names are created and
+                        managed on Layer2 (e.g. Optimism). Small transaction
+                        costs will apply for setting the profile and
+                        administration.
+                    </div>
+                    <div className="small-text font-weight-700">
+                        You can receive messages sent to your full DM3 username.
+                    </div>
+                </div>
+
+                <div className="mt-3">
                     <button
                         className={BUTTON_CLASS.concat(
                             ' ',
@@ -126,18 +140,6 @@ export const MobileView = ({
                         Claim & Publish
                     </button>
                 </div>
-                <div className="mt-3 dm3-name-content">
-                    <div className="small-text font-weight-300 grey-text">
-                        You can get a DM3 name for free. Please check if your
-                        desired name is available. DM3 names are created and
-                        managed on Layer2 (e.g. Optimism). Small transaction
-                        costs will apply for setting the profile and
-                        administration.
-                    </div>
-                    <div className="small-text font-weight-700">
-                        You can receive messages sent to your full DM3 username.
-                    </div>
-                </div>
             </div>
         </div>
     );

diff --git a/packages/messenger-widget/src/components/ConfigureProfile/dm3Names/NormalView.tsx b/packages/messenger-widget/src/components/ConfigureProfile/dm3Names/NormalView.tsx
@@ -1,3 +1,4 @@
+import './../ConfigureProfile.css';
 import { useContext } from 'react';
 import { AuthContext } from '../../../context/AuthContext';
 import { ConfigureProfileContext } from '../context/ConfigureProfileContext';
@@ -40,12 +41,20 @@ export const NormalView = ({
         <>
             <div className="d-flex ps-4 align-items-baseline">
                 <div className="dm3-name-container">
-                    <div
-                        className={
-                            'conversation-error ms-0 mb-2 font-weight-400 show-error'
-                        }
-                    >
-                        {showError === NAME_TYPE.DM3_NAME && errorMsg}
+                    <div className="d-flex align-items-center">
+                        <p
+                            className="m-0 
+                    font-size-14 font-weight-500 line-height-24 title-content invisible"
+                        >
+                            DM3 Name
+                        </p>
+                        <div
+                            className={
+                                'conversation-error ms-0 mb-2 font-weight-400 show-error'
+                            }
+                        >
+                            {showError === NAME_TYPE.DM3_NAME && errorMsg}
+                        </div>
                     </div>
                     <div className="d-flex align-items-center">
                         <p
@@ -70,8 +79,8 @@ export const NormalView = ({
                                 className={PROFILE_INPUT_FIELD_CLASS.concat(
                                     ' ',
                                     showError === NAME_TYPE.DM3_NAME
-                                        ? 'err-background'
-                                        : '',
+                                        ? 'w-80 err-background'
+                                        : 'w-80 ',
                                 )}
                                 type="text"
                                 value={dm3Name}
@@ -89,7 +98,7 @@ export const NormalView = ({
                         </form>
                     </div>
 
-                    <div className="mt-5 dm3-name-content">
+                    <div className="mt-4 pt-2 dm3-name-content">
                         <div className="small-text font-weight-300">
                             You can get a DM3 name for free. Please check if
                             your desired name is available. DM3 names are
@@ -105,7 +114,7 @@ export const NormalView = ({
                 </div>
             </div>
 
-            <div className="d-flex justify-content-end me-3 mb-3">
+            <div className="profile-action-btns d-flex justify-content-end me-3 mb-3">
                 <button
                     className={BUTTON_CLASS.concat(
                         ' ',