fix: minor styling issues (calcom#25421)

* style: remove unwanted bg

* fix: adjust FAB positioning

* style: skeleton improvements

* fix: reset password button

* fix: remove left border from remove icon

* style: improve fields

* style: wrap base form styles into layer base

* style: remove email-specific focus styles from TextField component

Author: pasqualevitiello

apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDir.tsx

@@ -45,7 +45,7 @@ export function ShellMainAppDir(props: LayoutProps) {
                   className={classNames(
                     props.backPath
                       ? "relative"
-                      : "pwa:bottom-[max(7rem,_calc(5rem_+_env(safe-area-inset-bottom)))] fixed bottom-32 z-40 ltr:right-4 rtl:left-4 md:z-auto md:ltr:right-0 md:rtl:left-0",
+                      : "pwa:bottom-[max(7rem,_calc(5rem_+_env(safe-area-inset-bottom)))] fixed bottom-20 z-40 ltr:right-4 rtl:left-4 md:z-auto md:ltr:right-0 md:rtl:left-0",
                     "shrink-0 [-webkit-app-region:no-drag] md:relative md:bottom-auto md:right-auto"
                   )}>
                   {props.CTA}

apps/web/components/AddToHomescreen.tsx

@@ -18,7 +18,7 @@ export default function AddToHomescreen() {
         <div className="rounded-lg p-2 shadow-lg sm:p-3" style={{ background: "#2F333D" }}>
           <div className="flex flex-wrap items-center justify-between">
             <div className="flex w-0 flex-1 items-center">
-              <span className="bg-brand/30 text-brandcontrast dark:bg-darkmodebrand/30 dark:text-darkmodebrandcontrast flex rounded-lg p-2">
+              <span className="text-brandcontrast dark:bg-darkmodebrand/30 dark:text-darkmodebrandcontrast flex rounded-lg p-2">
                 <svg
                   className="h-7 w-7 fill-current text-[#5B93F9]"
                   xmlns="http://www.w3.org/2000/svg"

apps/web/components/booking/SkeletonLoader.tsx

@@ -47,9 +47,9 @@ function SkeletonItem() {
         {/* Event title */}
         <SkeletonText className="h-5 w-36" />
         {/* Event description */}
-        <SkeletonText className="h-4 w-48" />
+        <SkeletonText className="h-4 w-full max-w-48" />
         {/* Attendees */}
-        <SkeletonText className="h-4 w-56" />
+        <SkeletonText className="h-4 w-full max-w-56" />
       </div>
 
       {/* Action buttons - only visible on larger screens */}
@@ -58,11 +58,6 @@ function SkeletonItem() {
         <SkeletonText className="h-9 w-20 rounded-md" />
         <SkeletonText className="h-9 w-9 rounded-md" />
       </div>
-
-      {/* Mobile menu button */}
-      <div className="ml-4 flex shrink-0 sm:hidden">
-        <SkeletonText className="h-9 w-9 rounded-md" />
-      </div>
     </li>
   );
 }

apps/web/modules/auth/forgot-password/forgot-password-view.tsx

@@ -127,9 +127,9 @@ export default function ForgotPassword(props: PageProps) {
             />
             <div className="stack-y-2">
               <Button
-                className="w-full justify-center bg-white hover:bg-black hover:text-white"
+                className="w-full justify-center"
                 type="submit"
-                color="primary"
+                color="secondary"
                 disabled={loading}
                 aria-label={t("request_password_reset")}
                 loading={loading}>

apps/web/styles/globals.css

@@ -127,25 +127,27 @@ html.todesktop.dark {
  * Override the default tailwindcss-forms styling (default is: 'colors.blue.600')
  * @see: https://github.com/tailwindlabs/tailwindcss-forms/issues/14#issuecomment-1005376006
  */
-[type="text"]:focus,
-[type="email"]:focus,
-[type="url"]:focus,
-[type="password"]:focus,
-[type="number"]:focus,
-[type="date"]:focus,
-[type="datetime-local"]:focus,
-[type="month"]:focus,
-[type="search"]:focus,
-[type="tel"]:focus,
-[type="checkbox"]:focus,
-[type="radio"]:focus,
-[type="time"]:focus,
-[type="week"]:focus,
-[multiple]:focus,
-textarea:focus,
-select:focus {
-  --tw-ring-color: var(--brand-color);
-  border-color: var(--brand-color);
+ @layer base {
+  [type="text"]:focus,
+  [type="email"]:focus,
+  [type="url"]:focus,
+  [type="password"]:focus,
+  [type="number"]:focus,
+  [type="date"]:focus,
+  [type="datetime-local"]:focus,
+  [type="month"]:focus,
+  [type="search"]:focus,
+  [type="tel"]:focus,
+  [type="checkbox"]:focus,
+  [type="radio"]:focus,
+  [type="time"]:focus,
+  [type="week"]:focus,
+  [multiple]:focus,
+  textarea:focus,
+  select:focus {
+    --tw-ring-color: var(--brand-color);
+    border-color: var(--brand-color);
+  }
 }
 
 @layer components {

packages/features/eventtypes/components/SkeletonLoader.tsx

@@ -42,7 +42,7 @@ function TabsSkeletonLoader() {
           <SkeletonAvatar className="mb-1 mr-1 h-4 w-4 rounded-full" />
           <SkeletonText className="h-4 w-16" />
         </div>
-        <div className="inline-flex h-fit items-center justify-center whitespace-nowrap rounded-md p-2">
+        <div className="inline-flex h-fit items-center justify-center whitespace-nowrap rounded-md p-1">
           <SkeletonAvatar className="mb-1 mr-1 h-4 w-4 rounded-full" />
           <SkeletonText className="h-4 w-16" />
         </div>

packages/features/eventtypes/components/locations/Locations.tsx

@@ -245,7 +245,7 @@ const Locations: React.FC<LocationsProps> = ({
                       <Icon
                         name="x"
                         className={classNames(
-                          "border-l hover:text-emphasis text-subtle h-4 w-4",
+                          "hover:text-emphasis text-subtle h-4 w-4",
                           customClassNames?.removeLocationIcon
                         )}
                       />

packages/ui/components/editor/Editor.tsx

@@ -72,7 +72,7 @@ export const Editor = (props: TextEditorProps) => {
         </label>
       )}
       <LexicalComposer initialConfig={{ ...editorConfig }}>
-        <div className="editor-container hover:border-emphasis focus-within:ring-brand-default rounded-lg! p-0 transition focus-within:ring-2 focus-within:ring-offset-0">
+        <div className="editor-container rounded-lg! p-0 transition focus-within:shadow-outline-gray-focused focus-within:border-emphasis!">
           <ToolbarPlugin
             getText={props.getText}
             setText={props.setText}

packages/ui/components/form/inputs/TextField.tsx

@@ -25,6 +25,7 @@ export const inputStyles = cva(
 
     // States
     "hover:border-emphasis",
+    "focus:border-emphasis",
     "focus:ring-0",
     "focus:shadow-outline-gray-focused",
 
@@ -37,7 +38,7 @@ export const inputStyles = cva(
     "shadow-outline-gray-rested",
 
     // Transitions
-    "transition",
+    "transition-all",
   ],
   {
     variants: {
@@ -158,7 +159,7 @@ export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function
           className={classNames(
             inputStyles({ size }),
             "group relative mb-1 flex min-w-0 items-center gap-1",
-            "[&:focus-within]:border-subtle [&:focus-within]:ring-brand-default focus-within:ring-2",
+            "focus-within:shadow-outline-gray-focused focus-within:border-emphasis",
             "[&:has(:disabled)]:bg-subtle [&:has(:disabled)]:hover:border-default [&:has(:disabled)]:cursor-not-allowed",
             inputIsFullWidth && "w-full"
           )}>
@@ -226,7 +227,6 @@ export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function
           size={size}
           className={classNames(
             className,
-            type === "email" && "focus:border-subtle focus:ring-brand-default focus:ring-2",
             "disabled:bg-subtle disabled:hover:border-subtle disabled:cursor-not-allowed"
           )}
           {...passThrough}