Improve css based on design

nanoapi-io · Oct 27, 2024 · 231cab6 · 231cab6
1 parent f77fc91
commit 231cab6
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 13 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/app/src/components/ApiTree/ApiTree.tsx b/packages/app/src/components/ApiTree/ApiTree.tsx
@@ -203,15 +203,16 @@ export default function ApiTree(props: {
       fitView
       onViewportChange={updateZoom}
     >
-      <div className="absolute bottom-4 inset-x-4 z-10 flex justify-around">
-        <div className="flex gap-5 items-center">
-          <div className="bg-background-light dark:bg-background-dark flex gap-4 p-2 rounded-xl">
+      <div className="absolute bottom-6 inset-x-4 z-10 flex justify-around">
+        <div className="flex gap-3 items-center">
+          <div className="bg-background-light dark:bg-background-dark flex gap-4 pt-2 pb-1 px-3 rounded-lg">
             <Button
               size="1"
               variant="ghost"
               highContrast
               disabled={props.busy}
               onClick={props.onSync}
+              className="rounded-md"
             >
               {props.isOutOfSynced ? (
                 <svg
@@ -319,13 +320,14 @@ export default function ApiTree(props: {
           <Button
             color="pink"
             variant="solid"
-            size="2"
+            size="3"
             onClick={props.onSplit}
             disabled={props.busy || props.isOutOfSynced}
+            className={'max-h-9 px-2 py-0 rounded-lg'}
           >
             <svg
-              width="20"
-              height="20"
+              width="18"
+              height="18"
               viewBox="0 0 20 20"
               fill="currentColor"
               xmlns="http://www.w3.org/2000/svg"

diff --git a/packages/app/src/layout/default.tsx b/packages/app/src/layout/default.tsx
@@ -37,17 +37,18 @@ export default function DefaultLayout({
       </div>
       <div className="flex-grow px-5">
         <div className="flex gap-3">
-          <div className="flex flex-col justify-between bg-secondaryBackground-light dark:bg-secondaryBackground-dark rounded-3xl p-2">
+          <div className="flex flex-col justify-between bg-secondaryBackground-light dark:bg-secondaryBackground-dark rounded-3xl p-2 pb-5">
+            {/* This div forces the theme buttons to the bottom */}
             <div />
-            <div className="flex flex-col gap-2 border border-secondarySurface-light dark:border-secondarySurface-dark px-4 py-3 rounded-xl">
+            <div className="flex flex-col space-y-2 border border-secondarySurface-light dark:border-secondarySurface-dark px-3 pt-2 pb-1 rounded-lg">
               <Button
                 variant="ghost"
                 size="1"
                 onClick={() => themeContext.changeTheme("light")}
-                className={
+                className={`p-2.5 rounded-md ${
                   themeContext.theme === "light"
                     ? "bg-secondarySurface-light"
-                    : ""
+                    : ""}`
                 }
               >
                 <svg
@@ -70,10 +71,10 @@ export default function DefaultLayout({
                 variant="ghost"
                 size="1"
                 onClick={() => themeContext.changeTheme("dark")}
-                className={
+                className={`p-2.5 rounded-md ${
                   themeContext.theme === "dark"
                     ? "bg-secondarySurface-dark"
-                    : ""
+                    : ""}`
                 }
               >
                 <svg