From 273eb2fcc3bdcc3d018d191b1db5ed86f885186d Mon Sep 17 00:00:00 2001
From: dev <test@local.host>
Date: Tue, 16 Jan 2024 16:53:54 -0500
Subject: [PATCH] UI looks like design now

---
 .../components/tabContentLibrary.tsx          | 19 +++++++++++++------
 .../components/tabContentUpload.tsx           |  2 +-
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx
index 42fc97755b..3fe5021da6 100644
--- a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx
@@ -6,14 +6,21 @@ export default function TabContentLibrary(props: {
   const { t } = props
   return(
     <div
-      className="tab-content fade"
+      className="tab-pane fade"
       id="vmcLibrary"
     >
-      <div className="d-flex flex-column gap-4 h-100">
-        <div className="d-flex flex-column gap-3">
-          <p>{t("input.filenamePlaceholder")}</p>
-          <p>{t("button.select")}</p>
-          <p>{t("button.generate")}</p>
+      <div className="row">
+        <div className="col-12">
+          <div className="d-flex py-3">
+            <div className="flex-grow-1">
+              <input className="form-control w-100" placeholder={t("input.filenamePlaceholder")} />
+            </div>
+            <button className="btn btn-primary m-1">{t("button.select")}</button>
+          </div>
+
+          <div className="d-flex justify-content-end">
+              <button className="btn btn-primary m-1" disabled>{t("button.generate")}</button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentUpload.tsx b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentUpload.tsx
index f75daca67f..5be048ab1d 100644
--- a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentUpload.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentUpload.tsx
@@ -7,7 +7,7 @@ export default function TabContentUpload(props:{
   const { t } = props
   return(
     <div
-      className="tab-content fade show active"
+      className="tab-pane fade show active"
       id="vmcUpload"
     >
         <div className="row">