UI redesign (#571)

* ui redesign * more stuff * format * lint * more cleanup
kscalelabs · Nov 10, 2024 · 523192e · 523192e
1 parent cc53d1f
commit 523192e
Show file tree

Hide file tree

Showing 53 changed files with 879 additions and 1,115 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -2,153 +2,122 @@
 @tailwind components;
 @tailwind utilities;
 
-:root,
-.light,
-.light-theme {
-  --orange-1: #fefcfb;
-  --orange-2: #fff5f1;
-  --orange-3: #ffe8de;
-  --orange-4: #ffd7c7;
-  --orange-5: #ffc9b4;
-  --orange-6: #ffb89f;
-  --orange-7: #ffa284;
-  --orange-8: #fb8765;
-  --orange-9: #ff4f00;
-  --orange-10: #f14000;
-  --orange-11: #de3500;
-  --orange-12: #5d291a;
-
-  --orange-a1: #c0400004;
-  --orange-a2: #ff49000e;
-  --orange-a3: #ff4e0021;
-  --orange-a4: #ff490038;
-  --orange-a5: #ff48014b;
-  --orange-a6: #ff430060;
-  --orange-a7: #ff3f017b;
-  --orange-a8: #f939009a;
-  --orange-a9: #ff4f00;
-  --orange-a10: #f14000;
-  --orange-a11: #de3500;
-  --orange-a12: #4b1100e5;
-
-  --orange-contrast: #fff;
-  --orange-surface: #fff3eecc;
-  --orange-indicator: #ff4f00;
-  --orange-track: #ff4f00;
-
-  --font-sans: "Inter", sans-serif;
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root,
-    .light,
-    .light-theme {
-      --orange-1: oklch(99.2% 0.0031 37.42);
-      --orange-2: oklch(97.9% 0.0163 37.42);
-      --orange-3: oklch(95.7% 0.0394 37.42);
-      --orange-4: oklch(92.1% 0.0872 37.42);
-      --orange-5: oklch(89.1% 0.1152 37.42);
-      --orange-6: oklch(85.7% 0.1206 37.42);
-      --orange-7: oklch(80.5% 0.1254 37.42);
-      --orange-8: oklch(74.5% 0.1486 37.42);
-      --orange-9: oklch(67% 0.222 37.42);
-      --orange-10: oklch(63.1% 0.222 37.42);
-      --orange-11: oklch(58.9% 0.2136 37.42);
-      --orange-12: oklch(35% 0.0798 37.42);
-
-      --orange-a1: color(display-p3 0.7569 0.2667 0.0235 / 0.016);
-      --orange-a2: color(display-p3 0.8471 0.2314 0.0039 / 0.051);
-      --orange-a3: color(display-p3 0.8784 0.3176 0.0078 / 0.126);
-      --orange-a4: color(display-p3 0.8902 0.2824 0.0039 / 0.212);
-      --orange-a5: color(display-p3 0.8902 0.2824 0.0039 / 0.283);
-      --orange-a6: color(display-p3 0.8824 0.2627 0.0039 / 0.361);
-      --orange-a7: color(display-p3 0.8902 0.2431 0.0039 / 0.459);
-      --orange-a8: color(display-p3 0.8706 0.2196 0 / 0.573);
-      --orange-a9: color(display-p3 0.9098 0.2392 0 / 0.836);
-      --orange-a10: color(display-p3 0.8471 0.1922 0 / 0.855);
-      --orange-a11: color(display-p3 0.7686 0.1608 0 / 0.871);
-      --orange-a12: color(display-p3 0.2471 0.0627 0 / 0.883);
-
-      --orange-contrast: #fff;
-      --orange-surface: color(display-p3 1 0.9529 0.9333 / 0.8);
-      --orange-indicator: oklch(67% 0.222 37.42);
-      --orange-track: oklch(67% 0.222 37.42);
-    }
-  }
+:root {
+  --radius: 0.5rem;
+  --font-mono: monospace;
 }
 
-div.content {
-  margin-top: 16px;
-  margin-bottom: 56px;
+body {
+  background-color: black;
+  color: white;
+  margin: 0;
+  padding: 0;
+  font-family: var(--font-mono);
 }
 
-@media (max-width: 768px) {
-  div.row-two {
-    gap: 16px;
-  }
+.container {
+  padding: 1em;
+  max-width: 100em;
+  border: 1px solid white;
+  border-radius: 3px;
+  margin: 0 auto;
+  box-sizing: border-box;
+}
 
-  .container {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
+a {
+  color: white;
+  text-decoration: none;
+  padding: 0.3em 0.6em;
+  border: 1px solid #333;
+  border-radius: 3px;
+  margin: 0.2em;
+  display: inline-block;
+  transition: border-color 0.2s;
 }
 
-a.link {
-  color: #0d6efd;
-  text-decoration: underline;
+a:hover {
+  border-color: white;
 }
 
-a.link:hover {
-  text-decoration: none;
+.content {
+  margin-top: 16px;
+  margin-bottom: 56px;
 }
 
-html,
-body {
-  word-wrap: break-word;
-  font-family: var(--font-sans);
+canvas {
+  width: 100%;
+  height: auto;
+  touch-action: none;
+  border: 1px solid #333;
+  border-radius: 3px;
 }
 
 form {
   max-width: 500px;
+  margin: 0 auto;
 }
 
 form textarea {
   height: 10rem;
+  background: black;
+  color: white;
+  border: 1px solid #333;
+  font-family: var(--font-mono);
 }
 
 form button {
   width: 100%;
+  background: black;
+  color: white;
+  border: 1px solid #333;
+  padding: 0.5em;
+  font-family: var(--font-mono);
+  cursor: pointer;
 }
 
-div.card {
-  height: 100%;
+form button:hover {
+  border-color: white;
 }
 
-p.card-text {
-  flex-grow: 1;
-  max-height: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-line-clamp: 3;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
+.card {
+  background: black;
+  border: 1px solid #333;
+  border-radius: 3px;
+  padding: 1em;
+  margin: 1em 0;
 }
 
-@layer base {
-  :root {
-    --radius: 0.5rem;
+.card:hover {
+  border-color: white;
+}
+
+.about-section {
+  max-width: 800px;
+  margin: 2em auto;
+  text-align: left;
+  padding: 0 1em;
+}
+
+.about-section p {
+  margin-bottom: 1em;
+  line-height: 1.6;
+}
+
+@media (max-width: 600px) {
+  .about-section {
+    font-size: 0.9em;
+  }
+
+  .container {
+    padding: 0.5em;
   }
 }
 
 @layer base {
   * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
+    @apply border-[#333];
   }
   body {
-    @apply text-gray-1;
+    @apply bg-black text-white;
   }
 }
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -46,13 +46,13 @@ const App = () => {
           <AlertQueueProvider>
             <AlertQueue>
               <ScrollToTop>
-                <div className="flex flex-col bg-gray-1 text-gray-12 min-h-screen">
+                <div className="min-h-screen bg-gray-12 text-gray-100 font-mono">
                   <Navbar />
                   <GDPRBanner />
                   <PendoInitializer />
                   <SprigInitializer />
                   <div className="flex-grow">
-                    <div className="mt-20 mb-6 mx-4 sm:mx-6 md:mx-10 xl:mx-16 2xl:mx-28 max-full">
+                    <div className="mt-24 mb-6 mx-4 sm:mx-6 md:mx-10 xl:mx-16 2xl:mx-28 max-full">
                       <Routes>
                         <Route path={ROUTES.HOME.path} element={<Home />} />
 

diff --git a/frontend/src/components/auth/AuthBlock.tsx b/frontend/src/components/auth/AuthBlock.tsx
@@ -23,7 +23,7 @@ interface AuthBlockProps {
 
 const AuthBlock: React.FC<AuthBlockProps> = ({ title, onClosed, signup }) => {
   return (
-    <Card className="w-[400px] shadow-md bg-gray-2 text-gray-12 rounded-lg">
+    <Card className="w-[400px] bg-gray-2 text-gray-12 rounded-lg">
       <CardHeader>
         <Header title={title} onClosed={onClosed} />
       </CardHeader>
@@ -85,7 +85,7 @@ export const AuthBlockInner: React.FC<{ initialSignup?: boolean }> = ({
         <Button
           onClick={() => setIsSignup((s) => !s)}
           variant="link"
-          className="font-normal w-full"
+          className="w-full"
         >
           {isSignup
             ? "Already have an account? Login here."

diff --git a/frontend/src/components/auth/LoginForm.tsx b/frontend/src/components/auth/LoginForm.tsx
@@ -60,7 +60,7 @@ const LoginForm = () => {
         showStrength={false} // Hide password strength bar
       />
       {/* Submit Button */}
-      <Button variant="primary">Login</Button>
+      <Button variant="default">Login</Button>
     </form>
   );
 };

diff --git a/frontend/src/components/auth/RequireAuthentication.tsx b/frontend/src/components/auth/RequireAuthentication.tsx
@@ -27,7 +27,7 @@ const RequireAuthentication = (props: Props) => {
     <>
       <div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none">
         <div className="relative w-auto my-6 mx-auto max-w-3xl">
-          <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
+          <div className="border-0 rounded-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
             <AuthBlock onClosed={onClosed} />
           </div>
         </div>

diff --git a/frontend/src/components/auth/SignupForm.tsx b/frontend/src/components/auth/SignupForm.tsx
@@ -104,7 +104,7 @@ const SignupForm: React.FC<SignupFormProps> = ({ signupTokenId }) => {
         .
       </div>
       {/* Signup Button */}
-      <Button variant="primary">Sign up</Button>
+      <Button variant="default">Sign up</Button>
     </form>
   );
 };

diff --git a/frontend/src/components/auth/SignupWithEmail.tsx b/frontend/src/components/auth/SignupWithEmail.tsx
@@ -56,7 +56,7 @@ const SignupWithEmail = () => {
         {errors?.email && <ErrorMessage>{errors?.email?.message}</ErrorMessage>}
       </div>
       {/* Signup Button */}
-      <Button variant="primary">Sign up with email</Button>
+      <Button variant="default">Sign up with email</Button>
     </form>
   );
 };

diff --git a/frontend/src/components/files/MJCFRenderer.tsx b/frontend/src/components/files/MJCFRenderer.tsx
@@ -318,7 +318,7 @@ const MJCFRenderer = ({ mjcfContent, files, useControls = true }: Props) => {
                     The MuJoCo renderer is currently under development. If you
                     would like to contribute, see the project repository{" "}
                     <a
-                      className="underline"
+                      className="text-gray-11"
                       target="_blank"
                       rel="noreferrer"
                       href="https://github.com/kscalelabs/urdf2mjcf"

diff --git a/frontend/src/components/footer/Footer.tsx b/frontend/src/components/footer/Footer.tsx
@@ -69,7 +69,7 @@ const Footer = () => {
               About
             </Link>
             <Link to={ROUTES.RESEARCH.path} className="hover:text-primary-9">
-              Blog
+              Research
             </Link>
           </div>
           <div className="flex flex-col items-start gap-2">

diff --git a/frontend/src/components/listing/FileUpload.tsx b/frontend/src/components/listing/FileUpload.tsx
@@ -339,7 +339,7 @@ export const FileSubmitButton = forwardRef<
       ref={ref}
       type="button"
       className={cn(
-        buttonVariants({ variant: "primary" }),
+        buttonVariants({ variant: "default" }),
         "w-full",
         className,
       )}

diff --git a/frontend/src/components/listing/ListingArtifactRenderer.tsx b/frontend/src/components/listing/ListingArtifactRenderer.tsx
@@ -21,16 +21,16 @@ const ListingArtifactRenderer = ({ artifact }: Props) => {
       );
     case "tgz":
       return (
-        <div className="w-full h-full bg-gray-3 flex flex-col items-center justify-center gap-2">
+        <div className="w-full h-full flex flex-col items-center justify-center gap-2">
           <Link
             to={ROUTES.FILE.buildPath({ artifactId: artifact.artifact_id })}
-            className="p-4 hover:bg-gray-4 rounded-lg transition-colors"
+            className="p-4 hover:bg-gray-700 rounded-lg transition-colors"
           >
             <FaFileArchive className="w-16 h-16" />
           </Link>
           <div className="text-center">
             <div className="font-medium">{artifact.name}</div>
-            <div className="text-sm text-gray-600">
+            <div className="text-sm">
               {new Date(artifact.timestamp * 1000).toLocaleString()}
             </div>
           </div>

diff --git a/frontend/src/components/listing/ListingDeleteButton.tsx b/frontend/src/components/listing/ListingDeleteButton.tsx
@@ -63,7 +63,7 @@ const ListingDeleteButton = (props: Props) => {
             undone.
           </p>
           <div className="flex justify-end space-x-4">
-            <Button onClick={() => setConfirmDelete(false)} variant="secondary">
+            <Button onClick={() => setConfirmDelete(false)} variant="default">
               Cancel
             </Button>
             <Button

diff --git a/frontend/src/components/listing/ListingFeatureButton.tsx b/frontend/src/components/listing/ListingFeatureButton.tsx
@@ -72,7 +72,7 @@ const ListingFeatureButton = (props: Props) => {
     <div className="flex items-center gap-2 mt-2">
       <Button
         onClick={handleFeatureToggle}
-        variant="primary"
+        variant="default"
         disabled={isUpdating}
         title={
           currentFeaturedCount >= 3 && !isFeatured
-Original file line number
+Diff line change
@@ Expand Up @@
             .
           </div>
           {/* Signup Button */}
-          <Button variant="primary">Sign up</Button>
+          <Button variant="default">Sign up</Button>
         </form>
       );
     };
@@ Expand Down @@