refactor: Setting redesign (#11124)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>

apps/web/components/AppListCard.tsx

@@ -79,8 +79,8 @@ export default function AppListCard(props: AppListCardProps) {
   }, []);
 
   return (
-    <div className={`${highlight ? "dark:bg-muted bg-yellow-100" : ""}`}>
-      <div className="flex items-center gap-x-3 px-5 py-4">
+    <div className={classNames(highlight && "dark:bg-muted bg-yellow-100")}>
+      <div className="flex items-center gap-x-3 px-4 py-4 sm:px-6">
         {logo ? (
           <img
             className={classNames(logo.includes("-dark") && "dark:invert", "h-10 w-10")}

apps/web/components/apps/AppList.tsx

@@ -29,9 +29,10 @@ interface AppListProps {
   variant?: AppCategories;
   data: RouterOutputs["viewer"]["integrations"];
   handleDisconnect: (credentialId: number) => void;
+  listClassName?: string;
 }
 
-export const AppList = ({ data, handleDisconnect, variant }: AppListProps) => {
+export const AppList = ({ data, handleDisconnect, variant, listClassName }: AppListProps) => {
   const { data: defaultConferencingApp } = trpc.viewer.getUsersDefaultConferencingApp.useQuery();
   const utils = trpc.useContext();
   const [bulkUpdateModal, setBulkUpdateModal] = useState(false);
@@ -155,7 +156,7 @@ export const AppList = ({ data, handleDisconnect, variant }: AppListProps) => {
   const { t } = useLocale();
   return (
     <>
-      <List>
+      <List className={listClassName}>
         {cardsForAppsWithTeams.map((apps) => apps.map((cards) => cards))}
         {data.items
           .filter((item) => item.invalidCredentialIds)