Reduce layout shifting standardized height/spacing, color and contras…

…t improvements (#619)
kscalelabs · Nov 16, 2024 · a500274 · a500274
1 parent 2fe4ff5
commit a500274
Show file tree

Hide file tree

Showing 12 changed files with 24 additions and 25 deletions.
diff --git a/frontend/src/components/auth/RequireAuthentication.tsx b/frontend/src/components/auth/RequireAuthentication.tsx
@@ -30,9 +30,7 @@ const RequireAuthentication = (props: Props) => {
         <h2 className="text-gray-1 text-xl font-bold mb-4">
           You must be logged in to view this page
         </h2>
-        <div className="border-0 rounded-lg">
-          <AuthBlock onClosed={onClosed} />
-        </div>
+        <AuthBlock onClosed={onClosed} />
       </div>
     </Container>
   );

diff --git a/frontend/src/components/listing/ListingFileUpload.tsx b/frontend/src/components/listing/ListingFileUpload.tsx
@@ -86,11 +86,11 @@ const ListingFileUpload = (props: Props) => {
         className="relative bg-background mt-4 rounded-lg"
       >
         <FileInput>
-          <div className="flex justify-center w-full h-24">
+          <div className="flex justify-center w-full h-24 bg-gray-11 hover:bg-gray-10">
             <div className="w-full flex flex-col justify-center">
               <div className="text-center">{description}</div>
               {fileExtensions && (
-                <div className="text-center text-sm text-gray-500">
+                <div className="text-center text-sm text-gray-7">
                   File extensions: {fileExtensions.join(", ")}
                 </div>
               )}

diff --git a/frontend/src/components/listing/ListingImageGallery.tsx b/frontend/src/components/listing/ListingImageGallery.tsx
@@ -204,7 +204,7 @@ const ListingImageGallery = ({ listingId, ...props }: Props) => {
         </div>
       ) : (
         <div className="flex justify-center items-center h-full">
-          <p className="text-gray-500">No images yet</p>
+          <p className="text-gray-5">No images yet</p>
         </div>
       )}
     </>

diff --git a/frontend/src/components/listing/ListingOnshape.tsx b/frontend/src/components/listing/ListingOnshape.tsx
@@ -102,7 +102,9 @@ const HelpButton = ({
 }) => (
   <Button onClick={onToggle} variant="default">
     <FaInfoCircle />
-    <span className="ml-2">{showInstructions ? "Hide Help" : "Show Help"}</span>
+    <span className="ml-2 text-sm sm:text-base">
+      {showInstructions ? "Hide Instructions" : "View URDF Upload Instructions"}
+    </span>
   </Button>
 );
 

diff --git a/frontend/src/components/listing/UploadContent.tsx b/frontend/src/components/listing/UploadContent.tsx
@@ -69,8 +69,7 @@ const UploadContent: FC<UploadContentProps> = ({ images, onChange }) => {
             {...dragProps}
           >
             <p className="text-gray-1">
-              Drag & drop images here, click to select files, or paste an image
-              from your clipboard
+              Click to select files or drag and drop images here
             </p>
           </div>
 

diff --git a/frontend/src/components/listings/MyListingGrid.tsx b/frontend/src/components/listings/MyListingGrid.tsx
@@ -75,11 +75,11 @@ const MyListingGrid = ({ userId }: MyListingGridProps) => {
   }, [userId, auth.currentUser?.username]);
 
   return listingInfos === null ? (
-    <div className="flex justify-center items-center h-64">
+    <div className="flex justify-center items-center min-h-[40vh]">
       <Spinner />
     </div>
   ) : (
-    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 3xl:grid-cols-4 gap-4 sm:gap-6">
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 3xl:grid-cols-4 gap-4 sm:gap-6 min-h-[40vh]">
       {listingInfos.map((info) => (
         <Link
           to={ROUTES.BOT.buildPath({

diff --git a/frontend/src/components/listings/UpvotedGrid.tsx b/frontend/src/components/listings/UpvotedGrid.tsx
@@ -84,11 +84,11 @@ const UpvotedGrid = ({ page, setPage }: UpvotedGridProps) => {
   const nextButton = hasMore;
 
   return listingInfos === null ? (
-    <div className="flex justify-center items-center h-64">
+    <div className="flex justify-center items-center min-h-[40vh]">
       <Spinner />
     </div>
   ) : listingInfos.length > 0 ? (
-    <div>
+    <div className="min-h-[40vh]">
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6">
         {listingInfos.map((info) => (
           <Link
@@ -132,7 +132,7 @@ const UpvotedGrid = ({ page, setPage }: UpvotedGridProps) => {
       </div>
     </div>
   ) : (
-    <div className="flex flex-col justify-center items-center h-64 gap-4">
+    <div className="flex flex-col justify-center items-center min-h-[40vh] gap-4">
       <p>You have not upvoted any bots</p>
       <Button
         variant="outline"

diff --git a/frontend/src/components/pages/Account.tsx b/frontend/src/components/pages/Account.tsx
@@ -91,7 +91,7 @@ const Account = () => {
 
   if (auth.isLoading || isLoading) {
     return (
-      <div className="flex justify-center items-center pt-8">
+      <div className="flex justify-center pt-8 min-h-screen">
         <Spinner />
       </div>
     );

diff --git a/frontend/src/components/pages/Browse.tsx b/frontend/src/components/pages/Browse.tsx
@@ -115,11 +115,11 @@ const Browse = () => {
   ];
 
   return (
-    <Container>
-      <div className="py-8">
-        <div className="text-center mb-6">
+    <Container className="min-h-screen">
+      <div className="">
+        <div className="flex flex-col justify-center mb-6 text-center max-w-5xl mx-auto">
           <h1 className="text-2xl font-bold mb-2">Community Robots Hub</h1>
-          <p className="text-gray-2 text-lg">
+          <p className="text-gray-2 text-xs sm:text-lg">
             Explore and share robot designs from the community! Upload your
             OnShape CAD models and instantly convert them to URDF and MJCF
             formats for simulation and visualization

diff --git a/frontend/src/components/pages/Home.tsx b/frontend/src/components/pages/Home.tsx
@@ -50,7 +50,7 @@ const OptionsSection: React.FC = () => {
   const navigate = useNavigate();
 
   return (
-    <section className="w-full py-4">
+    <section className="w-full py-6">
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
         {[
           {

diff --git a/frontend/src/components/pages/Profile.tsx b/frontend/src/components/pages/Profile.tsx
@@ -189,11 +189,11 @@ export const RenderProfile = (props: RenderProfileProps) => {
             <h1 className="text-3xl font-bold text-primary-9 text-center">
               {user.first_name || user.last_name
                 ? `${user.first_name || ""} ${user.last_name || ""}`
-                : "Anonymous Creator"}
+                : "Name not set"}
             </h1>
             <div className="flex gap-2 text-sm">
-              <p className="text-gray-1 bg-gray-10 px-3 py-1 rounded-md">
-                <span className="font-semibold mr-0.5 select-none">@</span>
+              <p className="text-gray-1 bg-gray-10 pl-2.5 pr-3 py-1 rounded-md">
+                <span className="font-semibold mr-1 select-none">@</span>
                 {user.username}
               </p>
               {user.permissions && (
@@ -496,7 +496,7 @@ const Profile = () => {
 
   if (auth.isLoading || isLoading) {
     return (
-      <div className="flex justify-center items-center pt-8">
+      <div className="flex justify-center pt-8 min-h-screen">
         <Spinner />
       </div>
     );

diff --git a/frontend/src/components/ui/Input/Input.tsx b/frontend/src/components/ui/Input/Input.tsx
@@ -22,7 +22,7 @@ const Input = React.forwardRef<
         border border-gray-7 px-3 py-2 text-sm
         ring-offset-background file:border-0 bg-gray-3
         file:text-sm file:font-medium
-        placeholder:text-gray-9
+        placeholder:text-gray-11
         focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
         focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50
         focus:border-primary-9 focus:ring focus:ring-primary-9 focus:ring-opacity-50
-Original file line number
+Diff line change
@@ Expand Up @@
             </div>
           ) : (
             <div className="flex justify-center items-center h-full">
-              <p className="text-gray-500">No images yet</p>
+              <p className="text-gray-5">No images yet</p>
             </div>
           )}
         </>
@@ Expand Down @@