fix: change order and style buttons

Author: rpenido

src/course-outline/outline-sidebar/OutlineSidebarContext.tsx

@@ -41,16 +41,16 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
   }, [open]);
 
   const sidebarPages = {
-    help: {
-      component: OutlineHelpSidebar,
-      icon: HelpOutline,
-      title: intl.formatMessage(messages.sidebarButtonHelp),
-    },
     info: {
       component: OutlineInfoSidebar,
       icon: Info,
       title: intl.formatMessage(messages.sidebarButtonInfo),
     },
+    help: {
+      component: OutlineHelpSidebar,
+      icon: HelpOutline,
+      title: intl.formatMessage(messages.sidebarButtonHelp),
+    },
   } satisfies OutlineSidebarPages;
 
   const context = useMemo<OutlineSidebarContextData>(

src/generic/sidebar/index.scss

@@ -9,7 +9,10 @@
   }
 
   .sidebar-toggle {
+     display: flex;
+     flex-direction: column;
      align-self: flex-start;
+     align-items: center;
 
     .pgn__icon-button-toggle__container {
       flex-direction: column;
@@ -23,7 +26,28 @@
 
     .rounded-iconbutton {
       border-radius: var(--pgn-size-menu-base-border-radius);
-      border: 1px solid var(--btn-icon-color);
+      border: 1px solid var(--pgn-color-primary-base);
+      background-color: transparent;
+      color: var(--pgn-color-primary-base) !important;
+      width: 56px;
+
+      &.btn-icon-primary-active {
+        border-width: 3px;
+      }
+
+      &:hover {
+        border-width: 2px;
+      }
+      
+      &.btn-icon-primary-active:before {
+        content: "";
+        border-right: 5px solid var(--pgn-color-primary-base);
+        border-top: 5px solid transparent;
+        border-bottom: 5px solid transparent;
+        border-left: none;
+        position: absolute;
+        transform: translate(-30px, 15px);
+      }
     }
   }
 }