UX Refactor - 2 (DiceDB#44)

N3XT14 · Oct 5, 2024 · e4e405d · e4e405d
1 parent 369cbfc
commit e4e405d
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/src/components/Playground/Playground.tsx b/src/components/Playground/Playground.tsx
@@ -3,7 +3,7 @@
 // Components
 import Cli from '@/components/CLI/CLI';
 import SearchBox from '@/components/Search/SearchBox';
-import { Dice1, Dice3, Dice5 } from 'lucide-react';
+import { Dice1, Dice3, Dice5, Info } from 'lucide-react';
 
 // utils
 import { formatTime } from '@/shared/utils/commonUtils';
@@ -33,7 +33,7 @@ export default function Playground() {
       </header>
 
       <main className="flex flex-col lg:flex-row gap-10 flex-grow overflow-hidden px-4">
-        <div className="w-full lg:w-1/2 flex flex-col">
+        <div className="w-full lg:w-7/12 flex flex-col">
           <div className="bg-gray-900 rounded-lg">
             <div className="bg-gray-900 px-4 py-4 flex items-center rounded-lg">
               <div className="flex space-x-2">
@@ -42,22 +42,30 @@ export default function Playground() {
                 <Dice3 className="w-4 h-4 bg-green-500" />
               </div>
             </div>
-            <div className="h-64 md:h-96 bg-gray-100 rounded-lg overflow-hidden shadow-md">
+            <div className="h-64 md:h-[30rem] bg-gray-100 rounded-lg overflow-hidden shadow-md">
               <Cli decreaseCommandsLeft={decreaseCommandsLeft} />
             </div>
           </div>
 
-          <div className="flex flex-row justify-between text-gray-900 mt-4">
-            <div className="flex justify-between border border-gray-400 text-sm bg-transparent p-3 rounded-lg">
-              <span>Cleanup in : {formatTime(timeLeft)} mins</span>
+          <div className="flex flex-col">
+            <div className="flex flex-row justify-between text-gray-900 mt-4">
+              <div className="flex justify-between border border-gray-400 text-sm bg-transparent p-3 rounded-lg">
+                <span>Cleanup in : {formatTime(timeLeft)} mins</span>
+              </div>
+              <div className="flex justify-between border border-gray-400 text-sm bg-transparent p-3 rounded-lg">
+                <span>Commands left: {commandsLeft}</span>
+              </div>
             </div>
-            <div className="flex justify-between border border-gray-400 text-sm bg-transparent p-3 rounded-lg">
-              <span>Command left: {commandsLeft}</span>
+            <div className="flex flex-row items-start mt-5">
+              <Info className="w-4 h-4 text-gray-500 mr-1" />
+              <p className="text-sm text-gray-500">
+                DiceDB instance is shared across all users.
+              </p>
             </div>
           </div>
         </div>
 
-        <div className="w-full lg:w-1/2 flex flex-col">
+        <div className="w-full lg:w-5/12 flex flex-col">
           <div className="flex-grow border border-gray-400 bg-gray-100 p-4 rounded-lg shadow-md mb-4">
             <SearchBox search={search} setSearch={setSearch} />
           </div>

diff --git a/src/components/Search/SearchBox.tsx b/src/components/Search/SearchBox.tsx
@@ -25,7 +25,7 @@ export default function SearchBox({ search, setSearch }: SearchBoxProps) {
             value={search}
             onChange={(e) => setSearch(e.target.value)}
             placeholder="Search commands..."
-            className="bg-transparent border-none outline-none w-full py-2 text-gray-900 font-Assistant"
+            className="bg-transparent border-none outline-none w-full py-2 text-gray-900 font-assistant"
           />
         </div>
       </div>