refactor: Improve UX on Create New List page - /hub/lists/new (#1987)

open-sauced · Oct 25, 2023 · c0fcf7a · c0fcf7a
1 parent f11160c
commit c0fcf7a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 19 deletions.
diff --git a/components/molecules/InfoCard/info-card.tsx b/components/molecules/InfoCard/info-card.tsx
@@ -10,7 +10,7 @@ export interface FavoriteRepoCardProps {
 const InfoCard = ({ icon, title, description, handleClick }: FavoriteRepoCardProps): JSX.Element => {
   return (
     <div className="p-3 bg-white border-2 rounded-xl cursor-pointer" onClick={handleClick}>
-      <div className="flex items-center gap-2.5 h-10">
+      <div className="flex items-center gap-2.5">
         {/* Avatar */}
         {icon === "github" && <FiGithub size={24} className="text-orange-200" />}
         {icon === "globe" && <FiGlobe size={24} className="text-orange-200" />}

diff --git a/pages/hub/lists/new.tsx b/pages/hub/lists/new.tsx
@@ -144,27 +144,25 @@ const CreateListPage = () => {
   };
 
   return (
-    <section className="flex flex-col justify-center w-full py-4 xl:flex-row xl:gap-20 xl:pl-28">
-      <div className="flex flex-col gap-8">
-        <div className="pb-6 border-b border-light-slate-8">
-          <Title className="!text-2xl !leading-none mb-4" level={1}>
+    <section className="flex flex-col justify-center w-full py-4 xl:flex-row xl:gap-20">
+      <div className="flex flex-col">
+        <div className="flex flex-col gap-4 pb-6 border-b border-light-slate-8">
+          <Title className="text-2xl leading-none" level={1}>
             Create New List
           </Title>
-          <Text className="my-8">
-            A list is a collection of contributors that you and your team can get insights for.
-          </Text>
+          <Text>A list is a collection of contributors that you and your team can get insights for.</Text>
         </div>
 
-        <div className="pb-8 border-b border-light-slate-8">
-          <Title className="!text-1xl !leading-none mb-4" level={4}>
+        <div className="flex flex-col gap-4 pt-6 pb-16">
+          <Title className="text-1xl leading-none" level={4}>
             List Name
           </Title>
 
           <TextInput placeholder="Page Name (ex: My Team)" value={name} handleChange={handleOnNameChange} />
         </div>
 
-        <div className="flex flex-col gap-4 py-6 border-light-slate-8">
-          <Title className="!text-1xl !leading-none mb-4 mt-8" level={4}>
+        <div className="flex flex-col gap-4 pb-16">
+          <Title className="text-1xl leading-none" level={4}>
             Page Visibility
           </Title>
 
@@ -175,7 +173,7 @@ const CreateListPage = () => {
             </div>
 
             <div className="flex ml-2 !border-red-900 items-center">
-              <Text className="!text-orange-600 pr-2 hidden md:block">Make Public</Text>
+              <Text className="text-orange-600 pr-2 hidden md:block">Make Public</Text>
               <ToggleSwitch
                 name="isPublic"
                 checked={isPublic}
@@ -185,8 +183,8 @@ const CreateListPage = () => {
           </div>
         </div>
 
-        <div className="flex flex-col gap-4 py-6 border-light-slate-8">
-          <Title className="!text-1xl !leading-none " level={4}>
+        <div className="flex flex-col gap-4 pb-6">
+          <Title className="text-1xl leading-none" level={4}>
             Add Contributors
           </Title>
 
@@ -219,10 +217,6 @@ const CreateListPage = () => {
         </div>
       </div>
 
-      <div className="top-0 py-4 mt-5 lg:sticky md:mt-0 lg:py-0">
-        <div className="flex flex-col justify-between pt-8 mt-8 border-t"></div>
-      </div>
-
       <GitHubImportDialog
         open={isModalOpen}
         handleClose={() => setIsModalOpen(false)}