adjust navbar spaces

packages/app/src/components/InAppNotification/InAppNotificationDropdown.tsx

@@ -75,10 +75,8 @@ const InAppNotificationDropdown: FC<Props> = (props: Props) => {
 
   return (
     <Dropdown className="notification-wrapper" isOpen={isOpen} toggle={toggleDropdownHandler}>
-      <DropdownToggle tag="a">
-        <button type="button" className="nav-link border-0 bg-transparent waves-effect waves-light">
-          <i className="icon-bell mr-2" /> {badge}
-        </button>
+      <DropdownToggle tag="a" className="px-3 nav-link border-0 bg-transparent waves-effect waves-light">
+        <i className="icon-bell" /> {badge}
       </DropdownToggle>
       <DropdownMenu className="px-2" right>
         <InAppNotificationList inAppNotificationData={inAppNotificationData} />

packages/app/src/components/Navbar/GrowiNavbar.tsx

@@ -39,7 +39,7 @@ const NavbarRight: FC<NavbarRightProps> = memo((props: NavbarRightProps) => {
 
       <li className="nav-item d-none d-md-block">
         <button
-          className="px-md-2 nav-link btn-create-page border-0 bg-transparent"
+          className="px-md-3 nav-link btn-create-page border-0 bg-transparent"
           type="button"
           onClick={() => mutatePageCreateModalOpened(true)}
         >

packages/app/src/components/Navbar/PersonalDropdown.jsx

@@ -101,8 +101,8 @@ const PersonalDropdown = (props) => {
       {/* Button */}
       {/* remove .dropdown-toggle for hide caret */}
       {/* See https://stackoverflow.com/a/44577512/13183572 */}
-      <a className="px-md-2 nav-link waves-effect waves-light" data-toggle="dropdown">
-        <UserPicture user={user} noLink noTooltip /><span className="d-none d-lg-inline-block">&nbsp;{user.name}</span>
+      <a className="px-md-3 nav-link waves-effect waves-light" data-toggle="dropdown">
+        <UserPicture user={user} noLink noTooltip /><span className="ml-1 d-none d-lg-inline-block">&nbsp;{user.name}</span>
       </a>
 
       {/* Menu */}