UI improvemnts for sell/listing flow

kscalelabs · Nov 10, 2024 · ef81e92 · ef81e92
1 parent 20043e6
commit ef81e92
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 25 deletions.
diff --git a/frontend/src/components/modals/CreateListingModal.tsx b/frontend/src/components/modals/CreateListingModal.tsx
@@ -8,7 +8,7 @@ import {
 } from "@/components/ui/dialog";
 import { useAuthentication } from "@/hooks/useAuth";
 import ROUTES from "@/lib/types/routes";
-import { Share2, ShoppingBag } from "lucide-react";
+import { DollarSign, Share2, ShoppingBag } from "lucide-react";
 
 interface Props {
   isOpen: boolean;
@@ -31,7 +31,7 @@ export const CreateListingModal = ({ isOpen, onOpenChange }: Props) => {
         <DialogHeader>
           <DialogTitle>What would you like to do?</DialogTitle>
         </DialogHeader>
-        <div className="grid grid-cols-2 gap-4 p-4">
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 p-4">
           <div
             onClick={() =>
               handleOptionClick(
@@ -47,27 +47,33 @@ export const CreateListingModal = ({ isOpen, onOpenChange }: Props) => {
             </p>
           </div>
 
-          <div
-            onClick={() =>
-              canSell &&
-              handleOptionClick(
-                `${ROUTES.BOTS.path}/${ROUTES.BOTS.$.SELL.relativePath}`,
-              )
-            }
-            className={`flex flex-col items-center justify-center p-6 rounded-lg border ${
-              canSell
-                ? "border-gray-7 hover:border-gray-1 hover:bg-gray-11 cursor-pointer"
-                : "border-gray-4 opacity-50 cursor-not-allowed"
-            } transition-all`}
-          >
-            <ShoppingBag className="w-12 h-12 mb-4" />
-            <h3 className="text-lg font-semibold">Sell a Robot</h3>
-            <p className="text-sm text-gray-7 text-center mt-2">
-              {canSell
-                ? "List your Robot for sale"
-                : "Complete Seller onboarding to sell"}
-            </p>
-          </div>
+          {!canSell ? (
+            <div
+              onClick={() => handleOptionClick(ROUTES.SELL.ONBOARDING.path)}
+              className="flex flex-col items-center justify-center p-6 rounded-lg border border-gray-7 hover:border-gray-1 hover:bg-gray-11 cursor-pointer transition-all"
+            >
+              <DollarSign className="w-12 h-12 mb-4" />
+              <h3 className="text-lg font-semibold">Sell Robots</h3>
+              <p className="text-sm text-gray-7 text-center mt-2">
+                Complete onboarding to start selling robots
+              </p>
+            </div>
+          ) : (
+            <div
+              onClick={() =>
+                handleOptionClick(
+                  `${ROUTES.BOTS.path}/${ROUTES.BOTS.$.SELL.relativePath}`,
+                )
+              }
+              className="flex flex-col items-center justify-center p-6 rounded-lg border border-gray-7 hover:border-gray-1 hover:bg-gray-11 cursor-pointer transition-all"
+            >
+              <ShoppingBag className="w-12 h-12 mb-4" />
+              <h3 className="text-lg font-semibold">Sell a Robot</h3>
+              <p className="text-sm text-gray-7 text-center mt-2">
+                List your Robot for sale
+              </p>
+            </div>
+          )}
         </div>
       </DialogContent>
     </Dialog>

diff --git a/frontend/src/components/pages/Browse.tsx b/frontend/src/components/pages/Browse.tsx
@@ -167,7 +167,7 @@ const Browse = () => {
             </DropdownMenu>
             <Button
               onClick={() => setShowCreateModal(true)}
-              variant="default"
+              variant="outline"
               size="lg"
               className="w-full md:w-auto"
             >

diff --git a/frontend/src/components/pages/Orders.tsx b/frontend/src/components/pages/Orders.tsx
@@ -53,7 +53,7 @@ const OrdersPage: React.FC = () => {
     <div className="p-6 min-h-screen rounded-xl">
       <div className="mb-6">
         <h1 className="text-3xl font-bold">Your Orders</h1>
-        <p className="text-gray-11">
+        <p className="text-gray-8">
           You can view the status of your past and current orders here.
         </p>
       </div>