Updates after UX review

src/courseware/course/Course.jsx

@@ -68,7 +68,7 @@ function Course({
 
   const shouldDisplaySidebarButton = useWindowSize().width >= responsiveBreakpoints.small.minWidth;
 
-  const [sidebarVisible, setSidebar] = useState(false);
+  const [sidebarVisible, setSidebar] = useState(true);
   const isSidebarVisible = () => sidebarVisible && setSidebar;
   const toggleSidebar = () => {
     if (sidebarVisible) { setSidebar(false); } else { setSidebar(true); }

src/courseware/course/Sidebar.scss

@@ -1,7 +1,7 @@
 .sidebar-container {
     border: 1px solid $light-400;
     border-radius: 4px;
-    width: 20rem;
+    width: 31rem;
     vertical-align: top;
     height: 100%;
 

src/courseware/course/sequence/Sequence.jsx

@@ -226,7 +226,7 @@ function Sequence({
           )}
         </div>
       </div>
-      {sidebarVisible ? (
+      {isValuePropCookieSet && sidebarVisible ? (
         <Sidebar
           toggleSidebar={toggleSidebar}
           sidebarVisible={sidebarVisible}

src/generic/upgrade-button/UpgradeButton.jsx

@@ -20,9 +20,11 @@ function UpgradeButton(props) {
 
   return (
     <Button
-      variant={variant}
       href={url}
       onClick={onClick}
+      size="lg"
+      variant={variant}
+      block
       {...rest}
     >
       <FormattedMessage

src/generic/upgrade-card/UpgradeCard.scss

@@ -34,9 +34,9 @@
 }
 
 .upgrade-card-button {
-  margin-left: 1.25rem;
-  margin-right: 1.25rem;
-  margin-bottom: 1.25rem;
+    width: 90%;
+    margin: 0 auto;
+    margin-bottom: 1.25rem;
 }
 
 .discount-info {