fixed mobile layouts for team and team availability (calcom#1382)

qedsoftware · Dec 27, 2021 · 81e2ae1 · 81e2ae1
1 parent 3e1fe30
commit 81e2ae1
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 9 deletions.
diff --git a/components/team/MemberList.tsx b/components/team/MemberList.tsx
@@ -12,7 +12,7 @@ export default function MemberList(props: Props) {
 
   return (
     <div>
-      <ul className="px-6 mb-2 -mx-6 bg-white border divide-y divide-gray-200 rounded sm:px-4 sm:mx-0">
+      <ul className="px-4 mb-2 -mx-4 bg-white border divide-y divide-gray-200 rounded sm:px-4 sm:mx-0">
         {props.members?.map((member) => (
           <MemberListItem key={member.id} member={member} team={props.team} />
         ))}

diff --git a/components/team/MemberListItem.tsx b/components/team/MemberListItem.tsx
@@ -74,7 +74,7 @@ export default function MemberListItem(props: Props) {
               <span className="block -mt-1 text-xs text-gray-400">{props.member.email}</span>
             </div>
           </div>
-          <div className="flex justify-center mr-2">
+          <div className="flex mt-2 mr-2 sm:mt-0 sm:justify-center">
             {!props.member.accepted && <TeamRole invitePending />}
             <TeamRole role={props.member.role} />
           </div>
@@ -91,7 +91,7 @@ export default function MemberListItem(props: Props) {
               disabled={!props.member.accepted}
               onClick={() => (props.member.accepted ? setShowTeamAvailabilityModal(true) : null)}
               color="minimal"
-              className="w-10 h-10 p-0 border border-transparent group text-neutral-400 hover:border-gray-200 hover:bg-white">
+              className="hidden w-10 h-10 p-0 border border-transparent group text-neutral-400 hover:border-gray-200 hover:bg-white sm:block">
               <ClockIcon className="w-5 h-5 group-hover:text-gray-800" />
             </Button>
           </Tooltip>

diff --git a/components/team/TeamSettingsRightSidebar.tsx b/components/team/TeamSettingsRightSidebar.tsx
@@ -111,7 +111,7 @@ export default function TeamSettingsRightSidebar(props: { team: TeamWithMembers;
       </div>
       {props.team?.id && props.role !== MembershipRole.MEMBER && (
         <Link href={`/settings/teams/${props.team.id}/availability`}>
-          <div className="mt-5 space-y-1">
+          <div className="hidden mt-5 space-y-1 sm:block">
             <LinkIconButton Icon={ClockIcon}>{"View Availability"}</LinkIconButton>
             <p className="mt-2 text-sm text-gray-500">See your team members availability at a glance.</p>
           </div>

diff --git a/ee/components/team/availability/TeamAvailabilityScreen.tsx b/ee/components/team/availability/TeamAvailabilityScreen.tsx
@@ -62,9 +62,9 @@ export default function TeamAvailabilityScreen(props: Props) {
 
   return (
     <div className="flex flex-col flex-1 bg-white border rounded-sm border-neutral-200">
-      <div className="flex w-full p-5 pr-0 space-x-5 border-b border-gray-200">
+      <div className="flex w-full p-4 space-x-5 border-b border-gray-200">
         <div className="flex flex-col">
-          <span className="font-bold text-gray-600">Date</span>
+          <span className="text-sm font-medium text-neutral-700">Date</span>
           <DatePicker
             date={selectedDate.toDate()}
             className="p-1.5"
@@ -74,7 +74,7 @@ export default function TeamAvailabilityScreen(props: Props) {
           />
         </div>
         <div className="flex flex-col">
-          <span className="font-bold text-gray-600">Timezone</span>
+          <span className="text-sm font-medium text-neutral-700">Timezone</span>
           <TimezoneSelect
             id="timeZone"
             value={selectedTimeZone}
@@ -83,8 +83,8 @@ export default function TeamAvailabilityScreen(props: Props) {
             className="w-full border border-gray-300 rounded-sm shadow-sm react-select-container focus:ring-neutral-800 focus:border-neutral-800 sm:text-sm"
           />
         </div>
-        <div>
-          <span className="font-bold text-gray-600">Slot Length</span>
+        <div className="hidden sm:block">
+          <span className="text-sm font-medium text-neutral-700">Slot Length</span>
           <Select
             options={[
               { value: 15, label: "15 minutes" },