Update spacing

kitloong · Mar 22, 2023 · 7a1414a · 7a1414a
1 parent 1292d23
commit 7a1414a
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 27 deletions.
diff --git a/src/layout/AdminLayout/AdminLayout.tsx b/src/layout/AdminLayout/AdminLayout.tsx
@@ -57,7 +57,7 @@ export default function AdminLayout({ children }: PropsWithChildren) {
 
       <div className="wrapper d-flex flex-column min-vh-100 bg-light">
         <Header toggleSidebar={toggleIsShowSidebar} toggleSidebarMd={toggleIsShowSidebarMd} />
-        <div className="body flex-grow-1 px-3">
+        <div className="body flex-grow-1 px-sm-2 mb-4">
           <Container fluid="lg">
             {children}
           </Container>

diff --git a/src/layout/AdminLayout/Breadcrumb/Breadcrumb.tsx b/src/layout/AdminLayout/Breadcrumb/Breadcrumb.tsx
@@ -2,7 +2,7 @@ import { Breadcrumb as BSBreadcrumb } from 'react-bootstrap'
 
 export default function Breadcrumb() {
   return (
-    <BSBreadcrumb listProps={{ className: 'my-0 ms-2 align-items-center' }}>
+    <BSBreadcrumb listProps={{ className: 'mb-0 align-items-center' }}>
       <BSBreadcrumb.Item
         linkProps={{ className: 'text-decoration-none' }}
         href="/"

diff --git a/src/layout/AdminLayout/Footer/Footer.tsx b/src/layout/AdminLayout/Footer/Footer.tsx
@@ -1,28 +1,31 @@
 import React from 'react'
+import { Container } from 'react-bootstrap'
 
 export default function Footer() {
   return (
-    <footer className="footer flex-column flex-md-row border-top d-flex align-items-center justify-content-between px-4 py-2">
-      <div>
-        <a className="text-decoration-none" href="https://coreui.io">CoreUI </a>
-        <a className="text-decoration-none" href="https://coreui.io">
-          Bootstrap Admin
-          Template
-        </a>
-        {' '}
-        © 2021
-        creativeLabs.
-      </div>
-      <div className="ms-md-auto">
-        Powered by&nbsp;
-        <a
-          className="text-decoration-none"
-          href="@layout/AdminLayout/AdminLayout"
-        >
-          CoreUI UI
-          Components
-        </a>
-      </div>
+    <footer className="footer border-top px-sm-2 py-2">
+      <Container fluid className="align-items-center flex-column flex-md-row d-flex justify-content-between">
+        <div>
+          <a className="text-decoration-none" href="https://coreui.io">CoreUI </a>
+          <a className="text-decoration-none" href="https://coreui.io">
+            Bootstrap Admin
+            Template
+          </a>
+          {' '}
+          © 2021
+          creativeLabs.
+        </div>
+        <div className="ms-md-auto">
+          Powered by&nbsp;
+          <a
+            className="text-decoration-none"
+            href="@layout/AdminLayout/AdminLayout"
+          >
+            CoreUI UI
+            Components
+          </a>
+        </div>
+      </Container>
     </footer>
   )
 }
diff --git a/src/layout/AdminLayout/Header/Header.tsx b/src/layout/AdminLayout/Header/Header.tsx
@@ -16,7 +16,7 @@ export default function Header(props: HeaderProps) {
   const { toggleSidebar, toggleSidebarMd } = props
 
   return (
-    <header className="header sticky-top mb-4 p-2 border-bottom">
+    <header className="header sticky-top mb-4 py-2 px-sm-2 border-bottom">
       <Container fluid className="header-navbar d-flex align-items-center">
         <Button
           variant="link"
@@ -35,7 +35,7 @@ export default function Header(props: HeaderProps) {
           <FontAwesomeIcon icon={faBars} />
         </Button>
         <Link href="/" className="header-brand d-md-none">
-          <svg width="118" height="46">
+          <svg width="80" height="46">
             <title>CoreUI Logo</title>
             <use xlinkHref="/assets/brand/coreui.svg#full" />
           </svg>
@@ -50,7 +50,7 @@ export default function Header(props: HeaderProps) {
           <HeaderProfileNav />
         </div>
       </Container>
-      <div className="header-divider border-top my-2 ms-n2 me-n2" />
+      <div className="header-divider border-top my-2 mx-sm-n2" />
       <Container fluid>
         <Breadcrumb />
       </Container>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -646,7 +646,7 @@ const Home: NextPage = () => (
 
     <div className="row">
       <div className="col-md-12">
-        <Card className="mb-4">
+        <Card>
           <Card.Header>
             Traffic &amp; Sales
           </Card.Header>