From c773176409e31ca120835a5fdf77135a4a865457 Mon Sep 17 00:00:00 2001 From: Chakravarthi Medicharla Date: Mon, 18 Mar 2024 21:29:26 +0530 Subject: [PATCH] fixes: login methods UI issues --- .vscode/settings.json | 2 +- src/ui/components/copyText/CopyText.scss | 1 + .../phoneNumber/PhoneNumberInput.tsx | 8 ++- .../userDetail/loginMethods/LoginMethods.tsx | 14 +---- .../components/editableInput.scss | 4 ++ .../loginMethods/components/editableInput.tsx | 60 ++++++++----------- .../userDetail/loginMethods/loginMethods.scss | 43 +++++++------ src/ui/styles/uikit.scss | 1 - 8 files changed, 65 insertions(+), 68 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 3b971cd4..7f502409 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -15,7 +15,7 @@ "editor.trimAutoWhitespace": true, "editor.formatOnSave": true, "editor.codeActionsOnSave": { - "source.organizeImports": true + "source.organizeImports": "explicit" }, "files.exclude": { "**/.DS_Store": true, diff --git a/src/ui/components/copyText/CopyText.scss b/src/ui/components/copyText/CopyText.scss index f10807d0..61925a65 100644 --- a/src/ui/components/copyText/CopyText.scss +++ b/src/ui/components/copyText/CopyText.scss @@ -20,6 +20,7 @@ max-width: 100%; .copy-text-text { @include text-ellipsis(100%); + max-width: 180px; flex: 1; padding-right: 4px; } diff --git a/src/ui/components/phoneNumber/PhoneNumberInput.tsx b/src/ui/components/phoneNumber/PhoneNumberInput.tsx index 83b618bf..d5f2622c 100644 --- a/src/ui/components/phoneNumber/PhoneNumberInput.tsx +++ b/src/ui/components/phoneNumber/PhoneNumberInput.tsx @@ -239,7 +239,7 @@ const PhoneNumberTextField: FC = forwardRef( PhoneNumberTextField.displayName = "PhoneNumberTextField"; export const PhoneNumberInput: FC = (props: PhoneNumberInputProps) => { - const { onChange, value, error, forceShowError } = props; + const { onChange, value, error, forceShowError, disabled } = props; const [isTouched, setIsTouched] = useState(false); // call the `onChange` and set form as touched @@ -252,13 +252,17 @@ export const PhoneNumberInput: FC = (props: PhoneNumberIn ); return ( -
+
= ({ const [emailError, setEmailError] = useState(""); const { getUserEmailVerificationStatus } = useVerifyUserEmail(); - const trim = (val: string) => { - const len = val.length; - return val.substring(0, Math.floor(len / 7)) + "..." + val.substring(6 * Math.floor(len / 7), len); - }; - const sendUserEmailVerification = useCallback( async (userId: string, tenantId: string | undefined) => { const res = await getUserEmailVerificationStatus(userId); @@ -245,11 +240,8 @@ const Methods: React.FC = ({ User ID: - - {trim(loginMethod.recipeUserId)} - - {loginMethod.recipeUserId} + {loginMethod.recipeUserId}
@@ -285,7 +277,7 @@ const Methods: React.FC = ({
= ({
setSend({ ...send, phone: val })} diff --git a/src/ui/components/userDetail/loginMethods/components/editableInput.scss b/src/ui/components/userDetail/loginMethods/components/editableInput.scss index e5db902e..a453abae 100644 --- a/src/ui/components/userDetail/loginMethods/components/editableInput.scss +++ b/src/ui/components/userDetail/loginMethods/components/editableInput.scss @@ -2,6 +2,10 @@ display: flex; justify-content: flex-start; align-items: baseline; + + @media (max-width: 340px) { + flex-direction: column; + } } .input-field-container { diff --git a/src/ui/components/userDetail/loginMethods/components/editableInput.tsx b/src/ui/components/userDetail/loginMethods/components/editableInput.tsx index 4dfa47c7..dd3554a3 100644 --- a/src/ui/components/userDetail/loginMethods/components/editableInput.tsx +++ b/src/ui/components/userDetail/loginMethods/components/editableInput.tsx @@ -1,8 +1,6 @@ -import React, { useEffect, useState } from "react"; import InputField from "../../../inputField/InputField"; -import "./editableInput.scss"; import { PhoneNumberInput } from "../../../phoneNumber/PhoneNumberInput"; -import phoneNumber from "../../../phoneNumber/PhoneNumber"; +import "./editableInput.scss"; export type EditableInputProps = { label: string; @@ -14,35 +12,29 @@ export type EditableInputProps = { }; export const EditableInput = ({ label, val, edit, type, onChange, error }: EditableInputProps) => { - if (!edit) { - return ( - - {label}:{val == "" ? "-" : val} - - ); - } else { - return ( - - {label}: {" "} - {type === "email" && ( - { - onChange(target.value); - }} - /> - )} - {type === "phone" && ( - - )} - - ); - } + return ( + + {label}: {" "} + {type === "email" && ( + { + onChange(target.value); + }} + /> + )} + {type === "phone" && ( + + )} + + ); }; diff --git a/src/ui/components/userDetail/loginMethods/loginMethods.scss b/src/ui/components/userDetail/loginMethods/loginMethods.scss index 30f83b27..1e81ef06 100644 --- a/src/ui/components/userDetail/loginMethods/loginMethods.scss +++ b/src/ui/components/userDetail/loginMethods/loginMethods.scss @@ -15,6 +15,11 @@ align-items: baseline; justify-content: space-between; + .right { + display: flex; + gap: 4px; + } + .left { display: flex; align-items: baseline; @@ -25,13 +30,16 @@ margin-left: 15px; color: #6e6a65; + display: flex; + flex-wrap: wrap; + gap: 6px; + .copy-text-wrapper { border-radius: 3px; border: 1px solid #d9d9d9; color: #d65078; font-size: 13px; padding: 5px; - margin-left: 10px; } } @@ -44,12 +52,8 @@ .user-id-span { margin-left: 0; - .copy-text-wrapper { - display: none; - } .copy-text-wrapper.resp { display: inline-block; - margin-left: 0; } } } @@ -62,7 +66,7 @@ grid-template-columns: 1fr 1fr; gap: 10px; - @media screen and (max-width: 900px) { + @media screen and (max-width: 800px) { grid-template-columns: 1fr; } @@ -74,10 +78,10 @@ display: flex; align-items: center; height: 50px; + } - @media screen and (max-width: 900px) { - height: 37px; - } + .phone-input { + width: 200px !important; } b { @@ -103,6 +107,12 @@ } } +@media (max-width: 638px) { + .left { + flex-direction: column; + } +} + @media (max-width: 480px) { .method { .method-header { @@ -111,10 +121,6 @@ .method-body { padding: 18px 8px; } - - .left { - flex-direction: column; - } } } @@ -147,11 +153,12 @@ } .not-verified { - border-radius: 22px; + border-radius: 16px; border: 1px solid #d2d2d2; background: #ececec; - font-size: 12px; - padding: 4px 10px; + font-size: 10px; + padding: 5px; + color: #252728; text-align: center; } @@ -174,7 +181,6 @@ &:hover { text-decoration: underline; - font-weight: 500; } } @@ -208,7 +214,6 @@ } .cancel { - margin: 0.25rem !important; - padding: 6px 12px !important; + padding: 7px 12px !important; font-weight: 500; } diff --git a/src/ui/styles/uikit.scss b/src/ui/styles/uikit.scss index a2e74c04..100fb8ca 100644 --- a/src/ui/styles/uikit.scss +++ b/src/ui/styles/uikit.scss @@ -275,7 +275,6 @@ button.button-error-outline { margin: 0px; color: var(--color-button-error); @include gap-horizontal(8px); - font-size: inherit; box-shadow: none; transition: background-color 0.3s;