Change primary items btn size

apps/app/src/client/components/Sidebar/SidebarNav/PrimaryItem.tsx

@@ -73,12 +73,12 @@ export const PrimaryItem = (props: PrimaryItemProps): JSX.Element => {
       <button
         type="button"
         data-testid={`grw-sidebar-nav-primary-${labelForTestId}`}
-        className={`btn btn-primary border-0 ${indicatorClass}`}
+        className={`btn btn-primary m-1 rounded ${indicatorClass}`}
         onClick={itemClickedHandler}
         onMouseEnter={mouseEnteredHandler}
         id={labelForTestId}
       >
-        <div className="d-flex justify-content-center align-items-center position-relative">
+        <div className="position-relative">
           {badgeContents != null && (
             <span className="position-absolute badge rounded-pill bg-primary">{badgeContents}</span>
           )}

apps/app/src/client/components/Sidebar/SidebarNav/PrimaryItems.module.scss

@@ -2,21 +2,24 @@
 @use '../button-styles';
 @use '../variables' as sidebarVar;
 
-// Add indicator
+// == Sizes
 .grw-primary-items :global {
-
   .badge :global {
     left: 26px;
     font-size: 8px;
   }
+  .btn {
+    @extend %btn-basis;
+
+    width: 40px;
+    height: 40px;
+  }
 }
 
 // == Colors
 .grw-primary-items :global {
   .btn.btn-primary {
     @extend %btn-primary-color-vars;
-    width: 40px;
-    height: 40px;
   }
 }