tweak to make it easier for students to find the "pay for course" dialog

sagemathinc · Oct 11, 2024 · 5c7904d · 5c7904d
1 parent 0e3cc41
commit 5c7904d
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 12 deletions.
diff --git a/src/packages/frontend/project/explorer/explorer.tsx b/src/packages/frontend/project/explorer/explorer.tsx
@@ -770,7 +770,7 @@ const Explorer0 = rclass(
  flex: "0 0 auto",
  display: "flex",
  flexDirection: "column",
- padding: "5px 5px 0 5px",
+ padding: "2px 2px 0 2px",
  }}
  >
  {this.render_error()}

diff --git a/src/packages/frontend/project/page/page.tsx b/src/packages/frontend/project/page/page.tsx
@@ -288,7 +288,7 @@ export const ProjectPage: React.FC<Props> = (props: Props) => {
  // CSS note: the paddingTop is here to not make the tabs touch the top row (looks funny)
  // this was part of the container-content div, which makes little sense for e.g. the banner bars
  return (
- <div style={{ display: "flex", margin: "0", paddingTop: "3px" }}>
+ <div style={{ display: "flex", height: "36px" }}>
  <HomePageButton
  project_id={project_id}
  active={active_project_tab == "home"}
@@ -381,10 +381,7 @@ export const ProjectPage: React.FC<Props> = (props: Props) => {
  return (
  <ProjectContext.Provider value={projectCtx}>
  <div className="container-content" style={PAGE_STYLE}>
- <StudentPayUpgrade
- project_id={project_id}
- style={{ marginTop: "5px" }}
- />
+ <StudentPayUpgrade project_id={project_id} />
  <AnonymousName project_id={project_id} />
  <DiskSpaceWarning project_id={project_id} />
  <RamWarning project_id={project_id} />

diff --git a/src/packages/frontend/project/trial-banner.tsx b/src/packages/frontend/project/trial-banner.tsx
@@ -58,9 +58,6 @@ export const ALERT_STYLE: CSS = {
  paddingRight: "5px",
  paddingBottom: "5px",
  marginBottom: 0,
- // this is to cancel out the margin between file tabs and project tabs, which
- // isn't right for a banner.
- marginTop: "-5px",
  fontSize: "9pt",
  borderRadius: 0,
 } as const;

diff --git a/src/packages/frontend/purchases/student-pay/instructor-banner.tsx b/src/packages/frontend/purchases/student-pay/instructor-banner.tsx
@@ -27,7 +27,7 @@ export default function PaySoon({ when, purchaseInfo, paid, course }: Props) {
  );
 
  return (
- <div style={{ margin: "0 2.5px" }}>
+ <div>
  <Collapse>
  <Collapse.Panel
  key="it"

diff --git a/src/packages/frontend/purchases/student-pay/pay-soon.tsx b/src/packages/frontend/purchases/student-pay/pay-soon.tsx
@@ -25,12 +25,21 @@ export default function PaySoon({
  return null;
  }
  return (
- <div style={{ margin: "0 2.5px" }}>
+ <div>
  <Collapse>
  <Collapse.Panel
  key="it"
  header=<>
- Course Fee: Please pay the course fee{" "}
+ Course Fee:{" "}
+ <b>
+ <a
+ onClick={() => {
+ setOpen(true);
+ }}
+ >
+ Please pay the course fee
+ </a>
+ </b>{" "}
  <Cost purchaseInfo={purchaseInfo} /> to upgrade this project.{" "}
  <b>
  Due: <TimeAgo date={when} />.