Fix: fix alignment of TopBar component's elements (rupali-codes#149)

* Fix: fix alignment of TopBar component's elements * Added top-padding to the icons
nujovich · Feb 13, 2023 · eb19cff · eb19cff
1 parent d7a29bc
commit eb19cff
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/components/TopBar/TopBar.tsx b/components/TopBar/TopBar.tsx
@@ -7,14 +7,14 @@ export const TopBar = ({ header }: { header?: string }) => {
   const router = useRouter();
   const category = router.asPath.replace("/", "");
   return (
-    <div className="flex items-center justify-between mb-4 xs:overflow-x-hidden">
-      <div className="flex items-center my-4 dark:text-gray-300 sm:text-3xl xs:text-2xl">
+    <div className="xs:overflow-x-hidden mb-4 flex flex-col-reverse items-center md:flex-row md:justify-between md:py-4">
+      <div className="my-2 flex items-center place-self-start text-lg dark:text-gray-300 sm:text-3xl">
         <FaSlackHash className="mt-1 mr-2 text-gray-600 dark:text-gray-300" />
         <span className="text-gray-900 dark:text-gray-100 uppercase font-bold">
           {header ?? category}
         </span>
       </div>
-      <div className="items-center flex justify-center gap-6 px-10 xs:gap-5">
+      <div className="xs:gap-5 flex items-center justify-center gap-6 place-self-end pt-4 pb-2 md:pt-2">
         <a
           title="Link to Github project (External Link)"
           className="dark:text-gray-300"

diff --git a/layouts/GeneralLayout.tsx b/layouts/GeneralLayout.tsx
@@ -6,7 +6,7 @@ const GeneralLayout = ({ children }: { children: ReactNode }) => {
   return (
     <section>
       <SideNavbar />
-      <div className="bg-gray-100 dark:bg-[#101623] transition-all ease-in duration-300 mx-auto mt-20 min-h-[calc(100vh-85px)] pb-[1rem] lg:ml-20 lg:mt-0 lg:pl-[290px] px-4">
+      <div className="mx-auto mt-20 min-h-[calc(100vh-85px)] bg-gray-100 px-4 pb-[1rem] transition-all duration-300 ease-in dark:bg-[#101623] lg:ml-20 lg:mt-0 lg:pl-[290px]">
         {children}
         <Footer />
       </div>