misc frontend fixes (#8416)

* (temp) dark mode changes (#8415) * fixes skeletons, some wrong buttons, spacing, settings
2023-04-20 22:33:49 +00:00
parent 0c9b9bc296
commit 561d9f154b
17 changed files with 40 additions and 30 deletions
@@ -106,7 +106,7 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
      {!shouldLockDisableProps("apps").disabled && (
        <div>
          {!isLoading && notInstalledApps?.length ? (
-            <h2 className="text-emphasis mt-0 mb-2 text-lg font-semibold">{t("available_apps")}</h2>
+            <h2 className="text-emphasis my-2 text-lg font-semibold">{t("available_apps")}</h2>
          ) : null}
          <div className="before:border-0">
            {notInstalledApps?.map((app) => (
@@ -195,7 +195,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
        <span
          className={classNames(
            isInputUsernamePremium ? "border border-orange-400 " : "",
-            "border-default bg-muted text-subtle hidden h-9 items-center rounded-l-md border border-r-0 border-r-gray-300 px-3 text-sm md:inline-flex"
+            "border-default bg-muted text-subtle hidden h-9 items-center rounded-l-md border border-r-0 px-3 text-sm md:inline-flex"
          )}>
          {process.env.NEXT_PUBLIC_WEBSITE_URL.replace("https://", "").replace("http://", "")}/
        </span>
@@ -215,7 +215,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
                : "border focus:border",
              markAsError
                ? "focus:shadow-0 focus:ring-shadow-0 border-red-500  focus:border-red-500 focus:outline-none"
-                : "border-l-gray-300",
+                : "border-l-default",
              disabled ? "bg-subtle text-muted focus:border-0" : ""
            )}
            value={inputUsernameValue}
@@ -234,8 +234,8 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
                isInputUsernamePremium ? "text-orange-400" : "",
                usernameIsAvailable ? "" : ""
              )}>
-              {isInputUsernamePremium ? <StarIconSolid className="mt-[2px] w-6" /> : <></>}
-              {!isInputUsernamePremium && usernameIsAvailable ? <Check className="mt-2 w-6" /> : <></>}
+              {isInputUsernamePremium ? <StarIconSolid className="mt-[2px] h-4 w-4" /> : <></>}
+              {!isInputUsernamePremium && usernameIsAvailable ? <Check className="mt-2 h-4 w-4" /> : <></>}
            </span>
          </div>
        </div>
@@ -136,8 +136,8 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
          />
          {currentUsername !== inputUsernameValue && (
            <div className="absolute right-[2px] top-6 flex flex-row">
-              <span className={classNames("mx-2 py-2")}>
-                {usernameIsAvailable ? <Check className="w-6" /> : <></>}
+              <span className={classNames("mx-2 py-2.5")}>
+                {usernameIsAvailable ? <Check className="h-4 w-4" /> : <></>}
              </span>
            </div>
          )}
@@ -59,7 +59,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
      {eventTypes.map((type, index) => (
        <li
          key={index}
-          className=" border-subtle bg-default hover:bg-muted group relative border-b first:rounded-t-md last:rounded-b-md last:border-b-0">
+          className=" border-subtle bg-default dark:bg-muted dark:hover:bg-emphasis hover:bg-muted group relative border-b first:rounded-t-md last:rounded-b-md last:border-b-0">
          <ArrowRight className="text-emphasis absolute right-3 top-3 h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100" />
          <Link
            href={getUsernameSlugLink({ users: props.users, slug: type.slug })}
@@ -123,7 +123,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
        <main
          className={classNames(
            shouldAlignCentrally ? "mx-auto" : "",
-            isEmbed ? " border-booker border-booker-width  bg-default rounded-md border" : "",
+            isEmbed ? "border-booker border-booker-width  bg-default rounded-md border" : "",
            "max-w-3xl py-24 px-4"
          )}>
          {isSingleUser && ( // When we deal with a single user, not dynamic group
@@ -161,7 +161,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
                <div
                  key={type.id}
                  style={{ display: "flex", ...eventTypeListItemEmbedStyles }}
-                  className=" border-subtle bg-default hover:bg-muted group relative border-b first:rounded-t-md last:rounded-b-md last:border-b-0">
+                  className="border-subtle dark:bg-muted dark:hover:bg-emphasis hover:bg-muted group relative border-b first:rounded-t-md last:rounded-b-md last:border-b-0">
                  <ArrowRight className="text-emphasis  absolute right-4 top-4 h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100" />
                  {/* Don't prefetch till the time we drop the amount of javascript in [user][type] page which is impacting score for [user] page */}
                  <div className="block w-full p-5">
@@ -799,7 +799,7 @@
  "trending_apps": "Aplicaciones populares",
  "most_popular": "Más popular",
  "explore_apps": "Aplicaciones {{category}}",
-  "installed_apps": "Aplicaciones instaladas",
+  "installed_apps": "Apps instaladas",
  "free_to_use_apps": "Gratis",
  "no_category_apps": "No hay aplicaciones de {{category}}",
  "no_category_apps_description_calendar": "Añade una aplicación de calendario para comprobar si hay conflictos y evitar reservas duplicadas",
@@ -57,7 +57,7 @@ export default function ZapierSetup(props: IZapierSetupProps) {
              {!newApiKey ? (
                <>
                  <div className="mt-1 text-xl">{t("generate_api_key")}:</div>
-                  <Button onClick={() => createApiKey()} className="mt-4 mb-4">
+                  <Button color="primary" onClick={() => createApiKey()} className="mt-4 mb-4">
                    {t("generate_api_key")}
                  </Button>
                </>
@@ -103,6 +103,7 @@ export const AddNewTeamMembersForm = ({
      <hr className="border-subtle my-6" />
      <Button
        EndIcon={ArrowRight}
+        color="primary"
        className="mt-6 w-full justify-center"
        disabled={publishTeamMutation.isLoading}
        onClick={() => {
@@ -118,7 +119,7 @@ export default AddNewTeamMembers;

 const AddNewTeamMemberSkeleton = () => {
  return (
-    <SkeletonContainer className="rounded-md border">
+    <SkeletonContainer className="border-subtle rounded-md border">
      <div className="flex w-full justify-between p-4">
        <div>
          <p className="text-emphasis text-sm font-medium">
@@ -44,14 +44,16 @@ export const CheckedTeamSelect = ({
      />
      {/* This class name conditional looks a bit odd but it allows a seemless transition when using autoanimate
       - Slides down from the top instead of just teleporting in from nowhere*/}
-      <ul className={classNames("mt-3 rounded-md", value.length >= 1 && "border")} ref={animationRef}>
+      <ul
+        className={classNames("mt-3 rounded-md", value.length >= 1 && "border-subtle border")}
+        ref={animationRef}>
        {value.map((option, index) => (
          <li key={option.value} className={`flex py-2 px-3 ${index === value.length - 1 ? "" : "border-b"}`}>
            <Avatar size="sm" imageSrc={option.avatar} alt={option.label} />
-            <p className="text-emphasis my-auto ml-3 text-sm">{option.label}</p>
+            <p className="text-emphasis ms-3 my-auto text-sm">{option.label}</p>
            <X
              onClick={() => props.onChange(value.filter((item) => item.value !== option.value))}
-              className="my-auto ml-auto"
+              className="my-auto ml-auto h-4 w-4"
            />
          </li>
        ))}
@@ -255,7 +255,7 @@ export const Components: Record<BookingFieldType, Component> = {
                    }
                    setValue(newValue);
                  }}
-                  className="dark:bg-darkgray-300 border-subtle border-default text-emphasis h-4 w-4 rounded focus:ring-black ltr:mr-2 rtl:ml-2"
+                  className="dark:bg-darkgray-300 border-subtle text-emphasis h-4 w-4 rounded focus:ring-black ltr:mr-2 rtl:ml-2"
                  value={option.value}
                  checked={value.includes(option.value)}
                />
@@ -314,7 +314,7 @@ export const Components: Record<BookingFieldType, Component> = {
                        type="radio"
                        disabled={readOnly}
                        name={name}
-                        className="dark:bg-darkgray-300 border-subtle border-default text-emphasis h-4 w-4 focus:ring-black ltr:mr-2 rtl:ml-2"
+                        className="dark:bg-darkgray-300 border-subtle text-emphasis h-4 w-4 focus:ring-black ltr:mr-2 rtl:ml-2"
                        value={option.value}
                        onChange={(e) => {
                          setValue({
@@ -255,8 +255,12 @@ const SettingsSidebarContainer = ({
                                  }),
                                ])
                              }>
-                              <div className="ltr:mr-3 rtl:ml-3">
-                                {teamMenuState[index].teamMenuOpen ? <ChevronDown /> : <ChevronRight />}
+                              <div className="me-3">
+                                {teamMenuState[index].teamMenuOpen ? (
+                                  <ChevronDown className="h-4 w-4" />
+                                ) : (
+                                  <ChevronRight className="h-4 w-4" />
+                                )}
                              </div>
                              <img
                                src={getPlaceholderAvatar(team.logo, team?.name as string)}
@@ -352,7 +356,7 @@ const MobileSettingsContainer = (props: { onSideContainerOpen?: () => void }) =>
          <button
            className="hover:bg-emphasis flex items-center space-x-2 rounded-md px-3 py-1 rtl:space-x-reverse"
            onClick={() => router.back()}>
-            <ArrowLeft className="text-default" />
+            <ArrowLeft className="text-default h-4 w-4" />
            <p className="text-emphasis font-semibold">{t("settings")}</p>
          </button>
        </div>
@@ -44,7 +44,7 @@ export function UpgradeTip({
            alt={title}
          />
        </picture>
-        <div className="relative mt-4 px-8 sm:px-14">
+        <div className="relative my-4 px-8 sm:px-14">
          <h1 className={classNames("font-cal text-3xl", dark && "text-inverted")}>{t(title)}</h1>
          <p className={classNames("mt-4 mb-8 max-w-sm", dark ? "text-inverted" : "text-default")}>
            {t(description)}
@@ -94,7 +94,7 @@ function CategoryTab({ selectedCategory, categories, searchText }: CategoryTabPr
          }}
          className={classNames(
            selectedCategory === null ? "bg-emphasis text-default" : "bg-muted text-emphasis",
-            "hover:bg-emphasis rounded-md px-4 py-2.5 text-sm font-medium hover:cursor-pointer hover:text-gray-50"
+            "hover:bg-emphasis min-w-max rounded-md px-4 py-2.5 text-sm font-medium hover:cursor-pointer hover:text-gray-50"
          )}>
          {t("all_apps")}
        </li>
@@ -168,7 +168,7 @@ export function AllApps({ apps, searchText, categories }: AllAppsPropsType) {
      <CategoryTab selectedCategory={selectedCategory} searchText={searchText} categories={categories} />
      {filteredApps.length ? (
        <div
-          className="grid gap-3 lg:grid-cols-4 [@media(max-width:1270px)]:grid-cols-3 [@media(max-width:730px)]:grid-cols-2 [@media(max-width:500px)]:grid-cols-1"
+          className="grid gap-3 lg:grid-cols-4 [@media(max-width:1270px)]:grid-cols-3 [@media(max-width:730px)]:grid-cols-1 [@media(max-width:500px)]:grid-cols-1"
          ref={appsContainerRef}>
          {filteredApps.map((app) => (
            <AppCard key={app.name} app={app} searchText={searchText} credentials={app.credentials} />
@@ -31,9 +31,13 @@ function SkeletonItem() {
      <div className="flex-grow truncate text-sm">
        <div className="flex justify-start space-x-2 rtl:space-x-reverse">
          <SkeletonText className="h-10 w-10" />
-          <div className="space-y-2">
-            <SkeletonText className="h-4 w-32" />
-            <SkeletonText className="h-4 w-16" />
+          <div className="space-y-1">
+            <div>
+              <SkeletonText className="h-4 w-16" />
+            </div>
+            <div>
+              <SkeletonText className="h-4 w-32" />
+            </div>
          </div>
        </div>
      </div>
@@ -45,7 +45,7 @@ export const AvatarGroup = function AvatarGroup(props: AvatarGroupProps) {
      {numTruncatedAvatars > 0 && (
        <li
          className={classNames(
-            "bg-darkgray-300 relative -mr-[4px] mb-1 inline-flex justify-center overflow-hidden rounded-full",
+            "bg-inverted relative -mr-[4px] mb-1 inline-flex justify-center overflow-hidden rounded-full",
            props.size === "sm" ? "min-w-6 h-6" : "min-w-16 h-16"
          )}>
          <span
@@ -99,7 +99,7 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
          {type === "confirmation" && (
            <div className="flex">
              {Icon && (
-                <div className="mr-4 inline-flex h-10 w-10 items-center justify-center rounded-full bg-gray-300">
+                <div className="bg-emphasis mr-4 inline-flex h-10 w-10 items-center justify-center rounded-full">
                  <Icon className="text-emphasis h-4 w-4" />
                </div>
              )}
@@ -1,6 +1,5 @@

 .editor a {
-  color: #0000FF;
  text-decoration: underline;
  font-size: 14px;
 }