removed scrolling and made footer less ugly

e2b-dev · Dec 6, 2024 · d169d26 · d169d26
1 parent f3fb490
commit d169d26
Show file tree

Hide file tree

Showing 10 changed files with 22 additions and 33 deletions.
diff --git a/apps/web/src/app/(dashboard)/dashboard/layout.tsx b/apps/web/src/app/(dashboard)/dashboard/layout.tsx
@@ -3,8 +3,8 @@ import { Toaster } from '@/components/ui/toaster'
 
 export default async function Layout({ children }) {
   return (
-    <div className="h-full w-full">
-      <main className="w-full h-full flex flex-col">
+    <div className="h-full w-full flex flex-col">
+      <main className="w-full flex flex-col flex-1">
         {children}
         <Toaster />
       </main>

diff --git a/apps/web/src/app/(dashboard)/dashboard/page.tsx b/apps/web/src/app/(dashboard)/dashboard/page.tsx
@@ -68,7 +68,7 @@ export default function Page() {
 
   if (user) {
     return (
-      <div className="flex min-h-screen flex-col md:flex-row pt-16 md:pt-32 px-2 md:px-32">
+      <div className="flex flex-col md:flex-row pt-16 md:pt-32 px-2 md:px-32">
         <Suspense>
           <Dashboard user={user} />
         </Suspense>
@@ -152,7 +152,7 @@ const Dashboard = ({ user }) => {
           setCurrentTeam={setCurrentTeam}
           setTeams={setTeams}
         />
-        <div className="flex-1 md:pl-10">
+        <div className="flex-1 md:pl-10 pb-16">
           <h2 className="text-2xl mb-2 font-bold">
             {selectedItem[0].toUpperCase() + selectedItem.slice(1)}
           </h2>

diff --git a/apps/web/src/components/Dashboard/AccountSelector.tsx b/apps/web/src/components/Dashboard/AccountSelector.tsx
@@ -5,7 +5,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import { Bug, ChevronRight, PlusCircle } from 'lucide-react'
+import { Bug, ChevronRight, PencilRuler, PlusCircle } from 'lucide-react'
 import { toast } from '../ui/use-toast'
 import {
   AlertDialog,
@@ -98,7 +98,7 @@ export const AccountSelector = ({
             className="flex items-center space-x-1"
             onClick={openDevSettings}
           >
-            <Bug width={15} height={15} />
+            <PencilRuler width={15} height={15} />
             <span>Developer</span>
           </DropdownMenuItem>
         </DropdownMenuContent>

diff --git a/apps/web/src/components/Dashboard/Billing.tsx b/apps/web/src/components/Dashboard/Billing.tsx
@@ -68,7 +68,7 @@ export const BillingContent = ({
   }, [team])
 
   return (
-    <div className="flex flex-col w-full h-full pb-10">
+    <div className="flex flex-col w-full">
       <div className="flex items-center space-x-4 pb-10">
         <h2 className="font-bold text-xl">Make changes to your billing</h2>
         <ManageBilling />

diff --git a/apps/web/src/components/Dashboard/Developer.tsx b/apps/web/src/components/Dashboard/Developer.tsx
@@ -13,7 +13,7 @@ export const DeveloperContent = ({
   const [billingUrl, setBillingUrl] = billingUrlState
 
   return (
-    <div className="flex flex-col w-full h-full">
+    <div className="flex flex-col w-full">
       <div className="flex flex-col h-full">
         <h1 className="font-bold pb-10 text-xl">Developer settings</h1>
 

diff --git a/apps/web/src/components/Dashboard/Keys.tsx b/apps/web/src/components/Dashboard/Keys.tsx
@@ -206,8 +206,8 @@ export const KeysContent = ({
   }
 
   return (
-    <div className="flex flex-col w-full h-full">
-      <div className="flex flex-col w-full pb-10">
+    <div className="flex flex-col w-full">
+      <div className="flex flex-col w-full">
         <Button
           className="w-fit"
           onClick={() => {

diff --git a/apps/web/src/components/Dashboard/Personal.tsx b/apps/web/src/components/Dashboard/Personal.tsx
@@ -60,7 +60,7 @@ export const PersonalContent = ({
   }
 
   return (
-    <div className="flex flex-col w-full h-full">
+    <div className="flex flex-col w-full">
       <div className="flex flex-col h-full">
         <h1 className="font-bold pb-10 text-xl">Personal settings</h1>
 
@@ -123,7 +123,7 @@ export const PersonalContent = ({
               Resetting will send an email with a link to reset the password.{' '}
               <br />
             </span>
-            <div className="flex items-center space-x-2 pb-10">
+            <div className="flex items-center space-x-2">
               <Link href={'/sign-in?view=forgotten-password'}>
                 <Button variant="desctructive">Reset password</Button>
               </Link>

diff --git a/apps/web/src/components/Dashboard/Team.tsx b/apps/web/src/components/Dashboard/Team.tsx
@@ -188,7 +188,7 @@ export const TeamContent = ({
   }
 
   return (
-    <div className="flex flex-col justify-center pb-10">
+    <div className="flex flex-col justify-center">
       <h3 className="text-lg font-medium pb-4">Team name</h3>
       <div className="flex items-center space-x-2 pb-4">
         <input

diff --git a/apps/web/src/components/Dashboard/Usage.tsx b/apps/web/src/components/Dashboard/Usage.tsx
@@ -79,7 +79,7 @@ export const UsageContent = ({
   }, [team])
 
   return (
-    <div className="flex flex-col w-full h-full pb-10">
+    <div className="flex flex-col w-full">
       <div className="pb-10">
         <h2 className="font-bold pb-4 text-xl">Usage history</h2>
         <p>

diff --git a/apps/web/src/components/Footer.tsx b/apps/web/src/components/Footer.tsx
@@ -88,10 +88,7 @@ function SocialLink({
   children: React.ReactNode
 }) {
   return (
-    <Link
-      href={href}
-      className="group"
-    >
+    <Link href={href} className="group">
       <span className="sr-only">{children}</span>
       <Icon className="h-5 w-5 fill-zinc-700 transition group-hover:fill-zinc-900 dark:group-hover:fill-zinc-500" />
     </Link>
@@ -103,26 +100,18 @@ function SmallPrint() {
     <div className="flex flex-col w-full items-center justify-between gap-5 pt-8 dark:border-white/5 sm:flex-row">
       <div className="flex flex-col items-center justify-start lg:items-start">
         <p className="text-xs text-zinc-600 dark:text-zinc-400">
-          &copy; FoundryLabs, Inc. {new Date().getFullYear()}. All rights reserved.
+          &copy; FoundryLabs, Inc. {new Date().getFullYear()}. All rights
+          reserved.
         </p>
       </div>
       <div className="flex gap-4">
-        <SocialLink
-          href="https://x.com/e2b_dev"
-          icon={TwitterIcon}
-        >
+        <SocialLink href="https://x.com/e2b_dev" icon={TwitterIcon}>
           Follow us on X (f.k.a. Twitter)
         </SocialLink>
-        <SocialLink
-          href="https://github.com/e2b-dev"
-          icon={GitHubIcon}
-        >
+        <SocialLink href="https://github.com/e2b-dev" icon={GitHubIcon}>
           Follow us on GitHub
         </SocialLink>
-        <SocialLink
-          href="https://discord.gg/U7KEcGErtQ"
-          icon={DiscordIcon}
-        >
+        <SocialLink href="https://discord.gg/U7KEcGErtQ" icon={DiscordIcon}>
           Join our Discord server
         </SocialLink>
       </div>
@@ -141,10 +130,10 @@ export function Footer() {
 
 export function FooterMain() {
   return (
-    <footer className="flex w-full space-y-10 pb-16">
+    <footer className="flex w-full px-2 md:px-32 py-10">
       <div className="flex flex-col w-full items-center justify-center border-t border-zinc-900/5 dark:border-white/5">
         <SmallPrint />
       </div>
     </footer>
   )
-}
+}