From 4c2b8f5b6fdc8c00a632c9303773ff284cb61536 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@richelsen.net>
Date: Mon, 2 Aug 2021 17:36:28 +0200
Subject: [PATCH] styled teams section

---
 components/Shell.tsx                      |   7 +-
 components/team/EditTeamModal.tsx         |   4 +-
 components/team/MemberInvitationModal.tsx | 127 ++++++++++++++--------
 components/team/TeamListItem.tsx          |   4 +-
 components/ui/modal/SetTimesModal.tsx     |   2 +-
 pages/availability/event/[type].tsx       |   6 +-
 pages/settings/profile.tsx                |   6 +-
 7 files changed, 94 insertions(+), 62 deletions(-)

diff --git a/components/Shell.tsx b/components/Shell.tsx
index 2c4f7381..039ed795 100644
--- a/components/Shell.tsx
+++ b/components/Shell.tsx
@@ -245,11 +245,8 @@ function UserDropdown({session, small, bottom} : {session: any, small?: boolean,
               <div className="py-1">
                 <a
                   href={"/" + session.user.username}
-                  className="flex px-4 py-2 text-sm text-neutral-500 pb-6">
-                  View public page <ExternalLinkIcon className="ml-1 w-4 h-4 text-neutral-400" />
-                  <span className="absolute top-8 text-neutral-900 font-medium">
-                    {window.location.hostname}/bailey
-                  </span>
+                  className="flex px-4 py-2 text-sm text-neutral-500">
+                  View public page <ExternalLinkIcon className="ml-1 mt-1 w-3 h-3 text-neutral-400" />
                 </a>
               </div>
               <div className="py-1">
diff --git a/components/team/EditTeamModal.tsx b/components/team/EditTeamModal.tsx
index 7501f129..d6991a1e 100644
--- a/components/team/EditTeamModal.tsx
+++ b/components/team/EditTeamModal.tsx
@@ -40,8 +40,8 @@ export default function EditTeamModal(props) {
 
       <div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
         <div className="sm:flex sm:items-start mb-4">
-          <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
-            <UsersIcon className="h-6 w-6 text-blue-600" />
+          <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-black bg-opacity-10 sm:mx-0 sm:h-10 sm:w-10">
+            <UsersIcon className="h-6 w-6 text-black" />
           </div>
           <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
             <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">Edit the {props.team.name} team</h3>
diff --git a/components/team/MemberInvitationModal.tsx b/components/team/MemberInvitationModal.tsx
index 8f2adebd..f355abe1 100644
--- a/components/team/MemberInvitationModal.tsx
+++ b/components/team/MemberInvitationModal.tsx
@@ -38,60 +38,93 @@ export default function MemberInvitationModal(props) {
     });
   };
 
-  return (<div className="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
-    <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-      <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
+  return (
+    <div
+      className="fixed z-10 inset-0 overflow-y-auto"
+      aria-labelledby="modal-title"
+      role="dialog"
+      aria-modal="true">
+      <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+        <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
 
-      <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+        <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
+          &#8203;
+        </span>
 
-      <div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
-        <div className="sm:flex sm:items-start mb-4">
-          <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
-            <UsersIcon className="h-6 w-6 text-blue-600" />
+        <div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
+          <div className="sm:flex sm:items-start mb-4">
+            <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-black bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
+              <UsersIcon className="h-6 w-6 text-black" />
+            </div>
+            <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+              <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
+                Invite a new member
+              </h3>
+              <div>
+                <p className="text-sm text-gray-400">Invite someone to your team.</p>
+              </div>
+            </div>
           </div>
-          <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-            <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">Invite a new member</h3>
+          <form onSubmit={inviteMember}>
             <div>
-              <p className="text-sm text-gray-400">
-                Invite someone to your team.
+              <div className="mb-4">
+                <label htmlFor="inviteUser" className="block text-sm font-medium text-gray-700">
+                  Email or Username
+                </label>
+                <input
+                  type="text"
+                  name="inviteUser"
+                  id="inviteUser"
+                  placeholder="email@example.com"
+                  required
+                  className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-black focus:border-black sm:text-sm"
+                />
+              </div>
+              <div className="mb-4">
+                <label className="block tracking-wide text-gray-700 text-sm font-medium mb-2" htmlFor="role">
+                  Role
+                </label>
+                <select
+                  id="role"
+                  className="shadow-sm focus:ring-black focus:border-black mt-1 block w-full sm:text-sm border-gray-300 rounded-md">
+                  <option value="MEMBER">Member</option>
+                  <option value="OWNER">Owner</option>
+                </select>
+              </div>
+              <div className="relative flex items-start">
+                <div className="flex items-center h-5">
+                  <input
+                    type="checkbox"
+                    name="sendInviteEmail"
+                    defaultChecked
+                    id="sendInviteEmail"
+                    className="text-black shadow-sm focus:ring-black focus:border-black sm:text-sm border-gray-300 rounded-md"
+                  />
+                </div>
+                <div className="ml-2 text-sm">
+                  <label htmlFor="sendInviteEmail" className="font-medium text-gray-700">
+                    Send an invite email
+                  </label>
+                </div>
+              </div>
+            </div>
+            {errorMessage && (
+              <p className="text-red-700 text-sm">
+                <span className="font-bold">Error: </span>
+                {errorMessage}
               </p>
+            )}
+            <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+              <button type="submit" className="btn btn-primary">
+                Invite
+              </button>
+              <button onClick={props.onExit} type="button" className="btn btn-white mr-2">
+                Cancel
+              </button>
             </div>
-          </div>
+          </form>
         </div>
-        <form onSubmit={inviteMember}>
-          <div>
-            <div className="mb-4">
-              <label htmlFor="inviteUser" className="block text-sm font-medium text-gray-700">Email or Username</label>
-              <input type="text" name="inviteUser" id="inviteUser" placeholder="email@example.com" required className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-black focus:border-black sm:text-sm"  />
-            </div>
-            <div className="mb-4">
-              <label className="block tracking-wide text-gray-700 text-sm font-medium mb-2"
-                     htmlFor="role">
-                Role
-              </label>
-              <select id="role" className="shadow-sm focus:ring-black focus:border-black mt-1 block w-full sm:text-sm border-gray-300 rounded-md">
-                <option value="MEMBER">Member</option>
-                <option value="OWNER">Owner</option>
-              </select>
-            </div>
-            <div className="mb-4">
-              <label className="mt-1 text-gray-600">
-                <input type="checkbox" name="sendInviteEmail" defaultChecked id="sendInviteEmail" className="shadow-sm mr-2 focus:ring-black focus:border-black sm:text-sm border-gray-300 rounded-md" />
-                Send an invite email
-              </label>
-            </div>
-          </div>
-          {errorMessage && <p className="text-red-700 text-sm"><span className="font-bold">Error: </span>{errorMessage}</p>}
-          <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-            <button type="submit" className="btn btn-primary">
-              Invite
-            </button>
-            <button onClick={props.onExit} type="button" className="btn btn-white mr-2">
-              Cancel
-            </button>
-          </div>
-        </form>
       </div>
     </div>
-  </div>);
+  );
 }
\ No newline at end of file
diff --git a/components/team/TeamListItem.tsx b/components/team/TeamListItem.tsx
index 5aaf2bc8..7e7c7eaa 100644
--- a/components/team/TeamListItem.tsx
+++ b/components/team/TeamListItem.tsx
@@ -46,10 +46,10 @@ export default function TeamListItem(props) {
           </button>
           <ul role="menu" className="z-10 origin-top-right absolute right-0 w-36 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
             <li className="text-sm text-gray-700  hover:bg-gray-100 hover:text-gray-900" role="menuitem">
-              <a className="block px-4 py-2" onClick={() => props.onActionSelect('invite')}>Invite member(s)</a>
+              <button className="block px-4 py-2" onClick={() => props.onActionSelect('invite')}>Invite members</button>
             </li>
             <li className="text-sm text-gray-700  hover:bg-gray-100 hover:text-gray-900" role="menuitem">
-              <a className="block px-4 py-2" onClick={() => props.onActionSelect('edit')}>Manage team</a>
+              <button className="block px-4 py-2" onClick={() => props.onActionSelect('edit')}>Manage team</button>
             </li>
           </ul>
         </Dropdown>
diff --git a/components/ui/modal/SetTimesModal.tsx b/components/ui/modal/SetTimesModal.tsx
index 22360edc..8dc9a759 100644
--- a/components/ui/modal/SetTimesModal.tsx
+++ b/components/ui/modal/SetTimesModal.tsx
@@ -42,7 +42,7 @@ export default function SetTimesModal(props) {
         <div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
           <div className="sm:flex sm:items-start mb-4">
             <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
-              <ClockIcon className="h-6 w-6 text-blue-600" />
+              <ClockIcon className="h-6 w-6 text-black" />
             </div>
             <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
diff --git a/pages/availability/event/[type].tsx b/pages/availability/event/[type].tsx
index c78892cc..0aad0665 100644
--- a/pages/availability/event/[type].tsx
+++ b/pages/availability/event/[type].tsx
@@ -864,7 +864,7 @@ export default function EventTypePage({
               <div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
                 <div className="sm:flex sm:items-start mb-4">
                   <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
-                    <LocationMarkerIcon className="h-6 w-6 text-blue-600" />
+                    <LocationMarkerIcon className="h-6 w-6 text-black" />
                   </div>
                   <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                     <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
@@ -914,7 +914,7 @@ export default function EventTypePage({
               <div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
                 <div className="sm:flex sm:items-start mb-4">
                   <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
-                    <PlusIcon className="h-6 w-6 text-blue-600" />
+                    <PlusIcon className="h-6 w-6 text-black" />
                   </div>
                   <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                     <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
@@ -938,7 +938,7 @@ export default function EventTypePage({
                       options={inputOptions}
                       isSearchable="false"
                       required
-                      className="react-select-container border rounded-sm border-gray-300 mb-2 flex-1 block w-full focus:ring-black focus:border-black min-w-0 sm:text-sm mt-1"
+                      className="react-select-container border border-gray-300 rounded-sm  mb-2 flex-1 block w-full focus:ring-black focus:border-black min-w-0 sm:text-sm mt-1"
                       onChange={setSelectedInputOption}
                     />
                   </div>
diff --git a/pages/settings/profile.tsx b/pages/settings/profile.tsx
index bf167cfe..3cc0f994 100644
--- a/pages/settings/profile.tsx
+++ b/pages/settings/profile.tsx
@@ -147,7 +147,8 @@ export default function Settings(props) {
                       id="timeZone"
                       value={selectedTimeZone}
                       onChange={setSelectedTimeZone}
-                      className="shadow-sm focus:ring-neutral-500 focus:border-neutral-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-sm"
+                      classNamePrefix="react-select"
+                      className="react-select-container border border-gray-300 rounded-sm shadow-sm focus:ring-neutral-500 focus:border-neutral-500 mt-1 block w-full sm:text-sm"
                     />
                   </div>
                 </div>
@@ -160,7 +161,8 @@ export default function Settings(props) {
                       id="weekStart"
                       value={selectedWeekStartDay}
                       onChange={setSelectedWeekStartDay}
-                      className="shadow-sm focus:ring-neutral-500 focus:border-neutral-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-sm"
+                      classNamePrefix="react-select"
+                      className="react-select-container border border-gray-300 rounded-sm shadow-sm focus:ring-neutral-500 focus:border-neutral-500 mt-1 block w-full sm:text-sm"
                       options={[
                         { value: "Sunday", label: "Sunday" },
                         { value: "Monday", label: "Monday" },