Theme not correctly applied to sidebar tab

CHANGELOG.md

@@ -31,6 +31,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Editor input not focussing on iPad (#898)
 
+### Fixed
+
+- Sidebar selected option styling (#886)
+
 ## [0.21.1] - 2024-01-11
 
 ### Added

src/assets/stylesheets/Sidebar.scss

@@ -86,6 +86,10 @@
     border-radius: $space-0-5 0 0 $space-0-5;
     border-block: 1px solid var(--sidebar-border);
     border-inline-start: 1px solid var(--sidebar-border);
+
+    .sidebar__bar-option {
+      border: 2px solid var(--sidebar-option-selected-border);
+    }
   }
 }
 
@@ -106,7 +110,6 @@
   }
 
   &--selected {
-    border: 2px solid var(--sidebar-option-selected-border);
     background-color: var(--sidebar-option-selected-background);
 
     svg {

src/components/Button/Button.jsx

@@ -1,9 +1,10 @@
-import "../../assets/stylesheets/Button.scss";
-
 import React from "react";
 import { confirmAlert } from "react-confirm-alert";
 import "react-confirm-alert/src/react-confirm-alert.css";
 import { Link } from "react-router-dom";
+import classNames from "classnames";
+
+import "../../assets/stylesheets/Button.scss";
 
 const Button = (props) => {
   const {
@@ -25,9 +26,9 @@ const Button = (props) => {
     buttonIconPosition = "left",
   } = props;
 
-  const buttonClass = `btn${className ? ` ${className}` : ""}${
-    buttonText ? "" : " btn--svg-only"
-  }`;
+  const buttonClass = classNames("btn", className, {
+    "btn--svg-only": !buttonText,
+  });
 
   const onButtonClick = (e) => {
     if (!confirmText) {
@@ -64,10 +65,10 @@ const Button = (props) => {
       onClick={buttonOuter ? null : onButtonClick}
       onKeyDown={onKeyDown}
     >
-      {buttonImage ? <img src={buttonImage} alt={buttonImageAltText} /> : null}
-      {ButtonIcon && buttonIconPosition === "left" ? <ButtonIcon /> : null}
-      {text ? <span>{text}</span> : null}
-      {ButtonIcon && buttonIconPosition === "right" ? <ButtonIcon /> : null}
+      {buttonImage && <img src={buttonImage} alt={buttonImageAltText} />}
+      {ButtonIcon && buttonIconPosition === "left" && <ButtonIcon />}
+      {text && <span>{text}</span>}
+      {ButtonIcon && buttonIconPosition === "right" && <ButtonIcon />}
     </Link>
   ) : (
     <button
@@ -80,19 +81,19 @@ const Button = (props) => {
       onClick={buttonOuter ? null : onButtonClick}
       onKeyDown={onKeyDown}
     >
-      {buttonImage ? <img src={buttonImage} alt={buttonImageAltText} /> : null}
-      {ButtonIcon && buttonIconPosition === "left" ? <ButtonIcon /> : null}
-      {buttonText ? <span>{buttonText}</span> : null}
-      {ButtonIcon && buttonIconPosition === "right" ? <ButtonIcon /> : null}
+      {buttonImage && <img src={buttonImage} alt={buttonImageAltText} />}
+      {ButtonIcon && buttonIconPosition === "left" && <ButtonIcon />}
+      {buttonText && <span>{buttonText}</span>}
+      {ButtonIcon && buttonIconPosition === "right" && <ButtonIcon />}
     </button>
   );
 
   if (buttonOuter) {
     return (
       <div
-        className={`btn-outer${
-          buttonOuterClassName ? ` ${buttonOuterClassName}` : ""
-        }`}
+        className={classNames("btn-outer", {
+          buttonOuterClassName,
+        })}
         onClick={onButtonClick}
       >
         {button}