simplify button text

sipb · Dec 10, 2024 · a147d04 · a147d04
1 parent caced65
commit a147d04
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 44 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -170,7 +170,7 @@ function HydrantApp() {
             />
             <LeftFooter state={hydrant} />
           </Flex>
-          <Flex direction="column" w={{ base: "100%", lg: "50%" }} gap={8}>
+          <Flex direction="column" w={{ base: "100%", lg: "50%" }} gap={6}>
             <Center>
               <Group wrap="wrap" justifyContent="center" gap={2}>
                 <TermSwitcher state={hydrant} />
@@ -196,21 +196,20 @@ function HydrantApp() {
                     <Image src={calendarButtonImg} alt="Sign in with Google" />
                   )}
                 </Tooltip> */}
-                <Tooltip
-                  content={
-                    isExporting
-                      ? "Loading..."
-                      : "Currently, only manually exporting to an .ics file is supported. "
-                  }
-                >
+                <Tooltip content="Currently, only manually exporting to an .ics file is supported.">
                   <Button
                     colorPalette="blue"
                     variant="solid"
                     size="sm"
-                    onClick={onICSExport}
+                    loading={isExporting}
+                    loadingText="Loading..."
+                    onClick={() => {
+                      setIsExporting(true);
+                      onICSExport();
+                    }}
                   >
                     <LuCalendar />
-                    {isExporting ? <Spinner m={3} /> : "Import to my calendar"}
+                    Export calendar
                   </Button>
                 </Tooltip>
                 <MatrixLink selectedActivities={state.selectedActivities} />

diff --git a/src/components/MatrixLink.tsx b/src/components/MatrixLink.tsx
@@ -1,6 +1,6 @@
 import { Activity } from "../lib/activity";
 import { Class } from "../lib/class";
-import { LuMessageSquare, LuExternalLink } from "react-icons/lu";
+import { LuMessageSquare } from "react-icons/lu";
 
 import { Tooltip } from "./ui/tooltip";
 import { LinkButton } from "./ui/link-button";
@@ -29,8 +29,7 @@ export function MatrixLink(props: { selectedActivities: Array<Activity> }) {
         fontWeight={"semibold"}
       >
         <LuMessageSquare />
-        Join group chats on Matrix
-        <LuExternalLink />
+        Join Matrix group chats
       </LinkButton>
     </Tooltip>
   );

diff --git a/src/components/PreregLink.tsx b/src/components/PreregLink.tsx
@@ -1,8 +1,9 @@
 import { Activity } from "../lib/activity";
 import { Class } from "../lib/class";
-import { LuClipboardList, LuExternalLink } from "react-icons/lu";
+import { LuClipboardList } from "react-icons/lu";
 
 import { LinkButton } from "./ui/link-button";
+import { Tooltip } from "./ui/tooltip";
 
 /** A link to SIPB Matrix's class group chat importer UI */
 export function PreregLink(props: { selectedActivities: Array<Activity> }) {
@@ -18,17 +19,18 @@ export function PreregLink(props: { selectedActivities: Array<Activity> }) {
     .join(",")}`;
 
   return (
-    <LinkButton
-      colorPalette="red"
-      size="sm"
-      href={matrixLink}
-      target="_blank"
-      rel="noreferrer"
-      fontWeight={"semibold"}
-    >
-      <LuClipboardList />
-      Pre-register for these classes
-      <LuExternalLink />
-    </LinkButton>
+    <Tooltip content="This will import your current schedule into WebSIS.">
+      <LinkButton
+        colorPalette="red"
+        size="sm"
+        href={matrixLink}
+        target="_blank"
+        rel="noreferrer"
+        fontWeight={"semibold"}
+      >
+        <LuClipboardList />
+        Pre-register classes
+      </LinkButton>
+    </Tooltip>
   );
 }
diff --git a/src/components/SIPBLogo.tsx b/src/components/SIPBLogo.tsx
@@ -1,24 +1,18 @@
-import { Flex, Image, Link, LinkBox, LinkOverlay } from "@chakra-ui/react";
+import { Image, Link } from "@chakra-ui/react";
 import sipbLogo from "../assets/fuzzball.png";
 
 export function SIPBLogo() {
   return (
-    <LinkBox>
-      <Flex direction="row" gap={2}>
-        <LinkOverlay asChild>
-          <Link
-            variant="subtle"
-            href="https://sipb.mit.edu/"
-            target="_blank"
-            rel="noreferrer"
-            fontSize="sm"
-            fontWeight="500"
-          >
-            by SIPB
-          </Link>
-        </LinkOverlay>
-        <Image src={sipbLogo} alt="SIPB Logo" height="1lh" />
-      </Flex>
-    </LinkBox>
+    <Link
+      variant="plain"
+      href="https://sipb.mit.edu/"
+      target="_blank"
+      rel="noreferrer"
+      fontSize="sm"
+      fontWeight="500"
+    >
+      by SIPB
+      <Image src={sipbLogo} alt="SIPB Logo" height="1lh" />
+    </Link>
   );
 }