From 7e8a948fc5de0c006fae28927084701112857e8a Mon Sep 17 00:00:00 2001 From: "GitStart-Cal.com" <121884634+gitstart-calcom@users.noreply.github.com> Date: Thu, 25 May 2023 18:53:42 +0300 Subject: [PATCH] chore: Rounding, frames and radio buttons of the booking forms not consistent (#8705) * Rounding, frames and radio buttons of the booking forms not consistent * Updates --------- Co-authored-by: gitstart-calcom Co-authored-by: Peer Richelsen Co-authored-by: zomars Co-authored-by: Alex van Andel --- apps/web/package.json | 1 + apps/web/styles/globals.css | 14 +++- .../react-awesome-query-builder/widgets.tsx | 2 +- packages/features/form-builder/Components.tsx | 8 +-- .../settings/layouts/SettingsLayout.tsx | 4 +- packages/ui/components/form/inputs/Input.tsx | 6 +- packages/ui/components/form/select/Select.tsx | 2 +- packages/ui/form/PhoneInput.tsx | 60 ++++++++++------- packages/ui/form/radio-area/Radio.tsx | 4 +- yarn.lock | 65 +++++++++++++++---- 10 files changed, 118 insertions(+), 48 deletions(-) diff --git a/apps/web/package.json b/apps/web/package.json index e0dffcc73a..f17feefd20 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -109,6 +109,7 @@ "react-intl": "^5.25.1", "react-live-chat-loader": "^2.7.3", "react-multi-email": "^0.5.3", + "react-phone-input-2": "^2.15.1", "react-phone-number-input": "^3.2.7", "react-schemaorg": "^2.0.0", "react-select": "^5.7.0", diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css index 005edb5e91..88ebb30d22 100644 --- a/apps/web/styles/globals.css +++ b/apps/web/styles/globals.css @@ -179,7 +179,7 @@ html.todesktop-platform-darwin.light main.bg-default{ background: rgba(255,255,255,0.8) !important } -/* +/* html.todesktop aside a { height: 28px; padding: 0px 8px; @@ -497,4 +497,16 @@ select:focus { -webkit-appearance: none; } +.react-tel-input .country-list .country:hover, +.react-tel-input .country-list .country.highlight { + @apply !bg-emphasis; +} +.react-tel-input .flag-dropdown .selected-flag, +.react-tel-input .flag-dropdown.open .selected-flag { + @apply !bg-default; +} + +.react-tel-input .flag-dropdown { + @apply !border-r-default !border-y-0 !border-l-0 left-0.5; +} diff --git a/packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.tsx b/packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.tsx index edfd451df4..66d230a7a8 100644 --- a/packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.tsx +++ b/packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.tsx @@ -129,7 +129,7 @@ function NumberWidget({ value, setValue, ...remainingProps }: TextLikeComponentP type="number" labelSrOnly={remainingProps.noLabel} containerClassName="w-full" - className="focus:border-brand-default bg-default dark:bg-muted border-default disabled:bg-emphasis focus:ring-brand block w-full rounded-md text-sm disabled:hover:cursor-not-allowed" + className="bg-default border-default disabled:bg-emphasis focus:ring-brand-default dark:focus:border-emphasis block w-full rounded-md text-sm focus:border-neutral-300 disabled:hover:cursor-not-allowed" value={value} onChange={(e) => { setValue(e.target.value); diff --git a/packages/features/form-builder/Components.tsx b/packages/features/form-builder/Components.tsx index 60fe399f1c..1b2d008765 100644 --- a/packages/features/form-builder/Components.tsx +++ b/packages/features/form-builder/Components.tsx @@ -134,7 +134,7 @@ export const Components: Record = { const { t } = useLocale(); value = value || []; const inputClassName = - "dark:placeholder:text-darkgray-600 focus:border-brand-default border-subtle block w-full rounded-md border-default text-sm focus:ring-black disabled:bg-emphasis disabled:hover:cursor-not-allowed dark:bg-transparent dark:selection:bg-green-500 disabled:dark:text-subtle"; + "dark:placeholder:text-muted focus:border-emphasis border-subtle block w-full rounded-md border-default text-sm focus:ring-black disabled:bg-emphasis disabled:hover:cursor-not-allowed dark:selection:bg-green-500 disabled:dark:text-subtle bg-default"; return ( <> {value.length ? ( @@ -148,11 +148,11 @@ export const Components: Record = { { value[index] = e.target.value; setValue(value); }} - className={inputClassName} placeholder={placeholder} label={<>} required @@ -251,7 +251,7 @@ export const Components: Record = { } setValue(newValue); }} - className="dark:bg-darkgray-300 border-subtle text-emphasis h-4 w-4 rounded focus:ring-black ltr:mr-2 rtl:ml-2" + className="border-default dark:border-default hover:bg-subtle checked:hover:bg-brand-default checked:bg-brand-default dark:checked:bg-brand-default dark:bg-darkgray-100 dark:hover:bg-subtle dark:checked:hover:bg-brand-default h-4 w-4 cursor-pointer rounded ltr:mr-2 rtl:ml-2" value={option.value} checked={value.includes(option.value)} /> @@ -310,7 +310,7 @@ export const Components: Record = { type="radio" disabled={readOnly} name={name} - className="dark:bg-darkgray-300 border-subtle text-emphasis h-4 w-4 focus:ring-black ltr:mr-2 rtl:ml-2" + className="dark:checked:bg-brand-default dark:bg-darkgray-100 dark:hover:bg-subtle dark:checked:hover:bg-brand-default focus:border-brand-default focus:ring-brand-default border-emphasis h-4 w-4 cursor-pointer text-[--cal-brand] focus:ring-2 ltr:mr-2 rtl:ml-2" value={option.value} onChange={(e) => { setValue({ diff --git a/packages/features/settings/layouts/SettingsLayout.tsx b/packages/features/settings/layouts/SettingsLayout.tsx index 258cede522..2d5a014bd2 100644 --- a/packages/features/settings/layouts/SettingsLayout.tsx +++ b/packages/features/settings/layouts/SettingsLayout.tsx @@ -201,7 +201,7 @@ const SettingsSidebarContainer = ({ alt="User Avatar" /> )} -

{t(tab.name)}

+

{t(tab.name)}

@@ -226,7 +226,7 @@ const SettingsSidebarContainer = ({ {tab && tab.icon && ( )} -

{t(tab.name)}

+

{t(tab.name)}

{teams && diff --git a/packages/ui/components/form/inputs/Input.tsx b/packages/ui/components/form/inputs/Input.tsx index c5dfbe5631..7fd9f2c2fb 100644 --- a/packages/ui/components/form/inputs/Input.tsx +++ b/packages/ui/components/form/inputs/Input.tsx @@ -23,7 +23,7 @@ export const Input = forwardRef(function Input( {...props} ref={ref} className={classNames( - "hover:border-emphasis border-default bg-default placeholder:text-muted text-emphasis disabled:hover:border-default disabled:bg-subtle mb-2 block h-9 rounded-md border py-2 px-3 text-sm leading-4 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1 disabled:cursor-not-allowed", + "hover:border-emphasis dark:focus:border-emphasis border-default bg-default placeholder:text-muted text-emphasis disabled:hover:border-default disabled:bg-subtle focus:ring-brand-default mb-2 block h-9 rounded-md border py-2 px-3 text-sm leading-4 focus:border-neutral-300 focus:outline-none focus:ring-2 disabled:cursor-not-allowed", isFullWidth && "w-full", props.className )} @@ -129,7 +129,7 @@ export const InputField = forwardRef(function {addOnLeading || addOnSuffix ? (
+ className="focus-within:ring-brand-default group relative mb-1 flex items-center rounded-md focus-within:outline-none focus-within:ring-2"> {addOnLeading && ( {addOnLeading} @@ -280,7 +280,7 @@ export const TextArea = forwardRef(function ref={ref} {...props} className={classNames( - "hover:border-emphasis border-default bg-default placeholder:text-muted text-emphasis disabled:hover:border-default disabled:bg-subtle mb-2 block w-full rounded-md border py-2 px-3 text-sm focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1 disabled:cursor-not-allowed", + "hover:border-emphasis border-default bg-default placeholder:text-muted text-emphasis disabled:hover:border-default disabled:bg-subtle focus:ring-brand-default mb-2 block w-full rounded-md border py-2 px-3 text-sm focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-1 disabled:cursor-not-allowed", props.className )} /> diff --git a/packages/ui/components/form/select/Select.tsx b/packages/ui/components/form/select/Select.tsx index 1a13a1295c..c5adf378e3 100644 --- a/packages/ui/components/form/select/Select.tsx +++ b/packages/ui/components/form/select/Select.tsx @@ -51,7 +51,7 @@ export const Select = < dropdownIndicator: () => "text-default", control: (state) => cx( - "bg-default border-default !min-h-9 h-9 text-sm leading-4 placeholder:text-sm placeholder:font-normal focus-within:ring-2 focus-within:ring-emphasis hover:border-emphasis rounded-md border ", + "bg-default border-default !min-h-9 h-9 text-sm leading-4 placeholder:text-sm placeholder:font-normal dark:focus:border-emphasis focus-within:outline-none focus-within:ring-2 focus-within:ring-brand-default hover:border-emphasis rounded-md border", state.isMulti ? variant === "checkbox" ? "px-3 py-2 h-fit" diff --git a/packages/ui/form/PhoneInput.tsx b/packages/ui/form/PhoneInput.tsx index 4e4f23902c..91656f576a 100644 --- a/packages/ui/form/PhoneInput.tsx +++ b/packages/ui/form/PhoneInput.tsx @@ -1,53 +1,69 @@ import { isSupportedCountry } from "libphonenumber-js"; import { useState } from "react"; -import BasePhoneInput from "react-phone-number-input"; -import type { Props, Country } from "react-phone-number-input"; -import "react-phone-number-input/style.css"; +import PhoneInput from "react-phone-input-2"; +import "react-phone-input-2/lib/style.css"; import { classNames } from "@calcom/lib"; import { trpc } from "@calcom/trpc/react"; -export type PhoneInputProps = Props<{ - value: string; +export type PhoneInputProps = { + value?: string; id?: string; placeholder?: string; required?: boolean; className?: string; name?: string; -}>; + disabled?: boolean; + onChange: (value: string) => void; +}; -function PhoneInput({ name, className = "", onChange, ...rest }: PhoneInputProps) { +function BasePhoneInput({ name, className = "", onChange, ...rest }: PhoneInputProps) { const defaultCountry = useDefaultCountry(); - return ( - onChange(value)} + containerClass={classNames( + "hover:border-emphasis dark:focus:border-emphasis border-default !bg-default rounded-md border focus-within:outline-none focus-within:ring-2 focus-within:ring-brand-default disabled:cursor-not-allowed", className )} + inputClass="text-sm focus:ring-0 !bg-default text-default" + buttonClass="text-emphasis !bg-default hover:!bg-emphasis" + searchClass="!text-default !bg-default hover:!bg-emphasis" + dropdownClass="!text-default !bg-default" + inputStyle={{ width: "inherit", border: 0 }} + searchStyle={{ + display: "flex", + flexDirection: "row", + alignItems: "center", + padding: "6px 12px", + gap: "8px", + width: "296px", + height: "28px", + marginLeft: "-4px", + }} + dropdownStyle={{ width: "max-content" }} /> ); } const useDefaultCountry = () => { - const [defaultCountry, setDefaultCountry] = useState("US"); + const [defaultCountry, setDefaultCountry] = useState("us"); trpc.viewer.public.countryCode.useQuery(undefined, { refetchOnWindowFocus: false, refetchOnReconnect: false, retry: false, onSuccess: (data) => { if (isSupportedCountry(data?.countryCode)) { - setDefaultCountry(data.countryCode as Country); + setDefaultCountry(data.countryCode); } }, }); @@ -55,4 +71,4 @@ const useDefaultCountry = () => { return defaultCountry; }; -export default PhoneInput; +export default BasePhoneInput; diff --git a/packages/ui/form/radio-area/Radio.tsx b/packages/ui/form/radio-area/Radio.tsx index f794fa0ef8..41c6018c14 100644 --- a/packages/ui/form/radio-area/Radio.tsx +++ b/packages/ui/form/radio-area/Radio.tsx @@ -11,7 +11,7 @@ export const Radio = (props: RadioGroupPrimitive.RadioGroupItemProps & { childre {props.children} @@ -21,7 +21,7 @@ export const Indicator = ({ disabled }: { disabled?: boolean }) => ( ); diff --git a/yarn.lock b/yarn.lock index aaf74b59d5..41d29bd8d5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5212,6 +5212,7 @@ __metadata: react-intl: ^5.25.1 react-live-chat-loader: ^2.7.3 react-multi-email: ^0.5.3 + react-phone-input-2: ^2.15.1 react-phone-number-input: ^3.2.7 react-schemaorg: ^2.0.0 react-select: ^5.7.0 @@ -17969,7 +17970,7 @@ __metadata: languageName: node linkType: hard -"classnames@npm:^2.2.5": +"classnames@npm:^2.2.5, classnames@npm:^2.2.6": version: 2.3.2 resolution: "classnames@npm:2.3.2" checksum: 2c62199789618d95545c872787137262e741f9db13328e216b093eea91c85ef2bfb152c1f9e63027204e2559a006a92eb74147d46c800a9f96297ae1d9f96f4e @@ -28194,6 +28195,13 @@ __metadata: languageName: node linkType: hard +"lodash.memoize@npm:^4.1.2": + version: 4.1.2 + resolution: "lodash.memoize@npm:4.1.2" + checksum: 9ff3942feeccffa4f1fafa88d32f0d24fdc62fd15ded5a74a5f950ff5f0c6f61916157246744c620173dddf38d37095a92327d5fd3861e2063e736a5c207d089 + languageName: node + linkType: hard + "lodash.merge@npm:^4.6.2": version: 4.6.2 resolution: "lodash.merge@npm:4.6.2" @@ -28215,6 +28223,13 @@ __metadata: languageName: node linkType: hard +"lodash.reduce@npm:^4.6.0": + version: 4.6.0 + resolution: "lodash.reduce@npm:4.6.0" + checksum: 81f2a1045440554f8427f895ef479f1de5c141edd7852dde85a894879312801efae0295116e5cf830c531c1a51cdab8f3628c3ad39fa21a9874bb9158d9ea075 + languageName: node + linkType: hard + "lodash.startcase@npm:^4.4.0": version: 4.4.0 resolution: "lodash.startcase@npm:4.4.0" @@ -28222,6 +28237,13 @@ __metadata: languageName: node linkType: hard +"lodash.startswith@npm:^4.2.1": + version: 4.2.1 + resolution: "lodash.startswith@npm:4.2.1" + checksum: 1847371cbf6f32c4125a555847aff8a1ff1a977f40882b0ad4e2656a32e364793cfa7602915c9165cc0bba61fbd802e561888126d242faadcf3fc77215bab19b + languageName: node + linkType: hard + "lodash.uniq@npm:4.5.0": version: 4.5.0 resolution: "lodash.uniq@npm:4.5.0" @@ -32045,21 +32067,23 @@ __metadata: languageName: node linkType: hard -"playwright-core@npm:1.34.0": - version: 1.34.0 - resolution: "playwright-core@npm:1.34.0" - checksum: 1821ab254b3c756e52c144c26cae7250dd5a1c779277cdd583bd289501d45cceaea40a8185ebf7eaa56b8291e4a042e3eef65f511da2306349c275794c9a582d +"playwright-core@npm:1.33.0": + version: 1.33.0 + resolution: "playwright-core@npm:1.33.0" + bin: + playwright: cli.js + checksum: 5fb7bda06a8b73b56b85b5a0b8f711211dde57a375d9379289e22239b2de879c6d93c8fdc9ba44b932bf100914ab1ca1a55697ad88440fdd0a39101fc020b77f languageName: node linkType: hard "playwright@npm:^1.31.2": - version: 1.34.0 - resolution: "playwright@npm:1.34.0" + version: 1.33.0 + resolution: "playwright@npm:1.33.0" dependencies: - playwright-core: 1.34.0 + playwright-core: 1.33.0 bin: playwright: cli.js - checksum: 5e5586e7c4e42f206526fe4306e35c68b7af353d6e3701c9e1045940aa3a916ac50b0b7c27a8eaeb3831ddc4f1146a367f98a5b6b841f977e9770b925e81877f + checksum: fb3934c56ed749cf412ea35b82052f013872d7f7b7747ab7042580af473dfc1b038956a31c132ee8c0098f74150c75e2073e9c737fd4c1ed54700a23fffc079f languageName: node linkType: hard @@ -33521,12 +33545,12 @@ __metadata: linkType: hard "react-fast-marquee@npm:^1.3.5": - version: 1.6.0 - resolution: "react-fast-marquee@npm:1.6.0" + version: 1.5.2 + resolution: "react-fast-marquee@npm:1.5.2" peerDependencies: react: ">= 16.8.0 || 18.0.0" react-dom: ">= 16.8.0 || 18.0.0" - checksum: f448341d30ef417292d8f7618d4931190a6d4aa353fbd276da4dcecc49bb6a7a32962f9cc74fe0af2ea9617d7b453ed3efccf7a0e8709a8b66e04ec04f4ae18c + checksum: 2db7a61470a9e02707aa5a80792ec009a8694ef7283b01e30ec516893297794d7f466ae3230c59773bab357684803767c1ffab875175471c41b28a5055345130 languageName: node linkType: hard @@ -33756,6 +33780,23 @@ __metadata: languageName: node linkType: hard +"react-phone-input-2@npm:^2.15.1": + version: 2.15.1 + resolution: "react-phone-input-2@npm:2.15.1" + dependencies: + classnames: ^2.2.6 + lodash.debounce: ^4.0.8 + lodash.memoize: ^4.1.2 + lodash.reduce: ^4.6.0 + lodash.startswith: ^4.2.1 + prop-types: ^15.7.2 + peerDependencies: + react: ^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 + react-dom: ^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 + checksum: 60cee455c7044da648a23312cae0077b4108dd24e26173a954904123decefae9875a1f8225a722a6c4d74c37b18ad3038ec6c302b64857f75089e544e8d48847 + languageName: node + linkType: hard + "react-phone-number-input@npm:^3.2.7": version: 3.2.7 resolution: "react-phone-number-input@npm:3.2.7"