Mobile redesign for professor-specific pages and overall app components

packages/app/components/Nav/NavBar.tsx

@@ -68,9 +68,8 @@ const RightMenu = styled.div`
 `;
 
 const BarsMenu = styled(Button)`
-  height: 32px;
+  height: 30px;
   padding: 6px;
-  margin-top: 8px;
   display: none;
   background: none;
 
@@ -80,9 +79,10 @@ const BarsMenu = styled(Button)`
 `;
 
 const BarsButton = styled.span`
-  display: block;
+  vertical-align: middle;
   width: 20px;
   height: 2px;
+  margin-bottom: 5px;
   background: #1890ff;
   position: relative;
 

packages/app/components/Nav/ProfileDrawer.tsx

@@ -8,18 +8,32 @@ import {
 import { Menu, Popover } from "antd";
 import Link from "next/link";
 import React, { ReactElement, useState } from "react";
+import { useIsMobile } from "../../hooks/useIsMobile";
 import styled from "styled-components";
 import SelfAvatar from "../common/SelfAvatar";
 
+const { SubMenu } = Menu;
+
 const StyleablePopover = ({ className, ...props }: { className: string }) => (
   <Popover {...props} overlayClassName={className} />
 );
+
+const StyleableSubMenu = ({ className, ...props }: { className: string }) => (
+  <SubMenu {...props} popupClassName={className} />
+);
+
 const NoPaddingPopover: typeof Popover = styled(StyleablePopover)`
   & .ant-popover-inner-content {
     padding: 0px;
   }
 `;
 
+const NoPaddingSubMenu: typeof SubMenu = styled(StyleableSubMenu)`
+  & .ant-menu-submenu-title {
+    padding: 0px;
+  }
+`;
+
 const AvatarButton = styled.div`
   cursor: pointer;
 `;
@@ -32,64 +46,71 @@ export default function ProfileDrawer({
   courseId,
 }: ProfileDrawerProps): ReactElement {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const isMobile = useIsMobile();
 
-  return (
+  const renderMenuItems = () => (
     <>
-      <NoPaddingPopover
-        content={
-          isPopoverOpen && (
-            <Menu mode="inline">
-              <Menu.Item icon={<SettingOutlined />}>
-                <Link
-                  href={{ pathname: "/settings", query: { cid: courseId } }}
-                >
-                  <a>Settings</a>
-                </Link>
-              </Menu.Item>
-              <Menu.Item
-                key="1"
-                icon={<QuestionCircleOutlined />}
-                onClick={() => {
-                  window.open("https://info.khouryofficehours.com/help");
-                  setIsPopoverOpen(false);
-                }}
-              >
-                Help Guide
-              </Menu.Item>
-              <Menu.Item
-                key="2"
-                icon={<FileTextOutlined />}
-                onClick={() => {
-                  window.open(
-                    "https://info.khouryofficehours.com/release-notes-archive"
-                  );
-                  setIsPopoverOpen(false);
-                }}
-              >
-                Release Notes
-              </Menu.Item>
-              <Menu.Item key="3" icon={<ReadOutlined />}>
-                <Link href={"/about"}>
-                  <a>About Us</a>
-                </Link>
-              </Menu.Item>
-              <Menu.Item key="4" icon={<LogoutOutlined />}>
-                <Link href={"/api/v1/logout"}>
-                  <a data-cy="logout-button">Logout</a>
-                </Link>
-              </Menu.Item>
-            </Menu>
-          )
-        }
-        placement="bottomRight"
-        trigger="click"
-        visible={isPopoverOpen}
-        onVisibleChange={setIsPopoverOpen}
+      <Menu.Item icon={<SettingOutlined />}>
+        <Link href={{ pathname: "/settings", query: { cid: courseId } }}>
+          <a>Settings</a>
+        </Link>
+      </Menu.Item>
+      <Menu.Item
+        key="1"
+        icon={<QuestionCircleOutlined />}
+        onClick={() => {
+          window.open("https://info.khouryofficehours.com/help");
+        }}
+      >
+        Help Guide
+      </Menu.Item>
+      <Menu.Item
+        key="2"
+        icon={<FileTextOutlined />}
+        onClick={() => {
+          window.open(
+            "https://info.khouryofficehours.com/release-notes-archive"
+          );
+        }}
       >
-        <AvatarButton>
-          <SelfAvatar size={40} />
-        </AvatarButton>
-      </NoPaddingPopover>
+        Release Notes
+      </Menu.Item>
+      <Menu.Item key="3" icon={<ReadOutlined />}>
+        <Link href={"/about"}>
+          <a>About Us</a>
+        </Link>
+      </Menu.Item>
+      <Menu.Item key="4" icon={<LogoutOutlined />}>
+        <Link href={"/api/v1/logout"}>
+          <a data-cy="logout-button">Logout</a>
+        </Link>
+      </Menu.Item>
+    </>
+  );
+
+  return (
+    <>
+      {isMobile ? (
+        <Menu mode="inline">
+          <NoPaddingSubMenu title="Profile">
+            {renderMenuItems()}
+          </NoPaddingSubMenu>
+        </Menu>
+      ) : (
+        <NoPaddingPopover
+          content={
+            isPopoverOpen && <Menu mode="inline">{renderMenuItems()}</Menu>
+          }
+          placement="bottomRight"
+          trigger="click"
+          visible={isPopoverOpen}
+          onVisibleChange={setIsPopoverOpen}
+        >
+          <AvatarButton>
+            <SelfAvatar size={40} />
+          </AvatarButton>
+        </NoPaddingPopover>
+      )}
     </>
   );
 }

packages/app/components/Settings/CourseAdminPanel.tsx

@@ -8,6 +8,7 @@ import { useRouter } from "next/router";
 import React, { ReactElement, useState } from "react";
 import styled from "styled-components";
 import { useProfile } from "../../hooks/useProfile";
+import ResponsiveRowCol from "../common/ResponsiveRowCol";
 import CourseOverrideSettings from "./CourseOverrideSettings";
 import { SettingsPanelAvatar } from "./SettingsSharedComponents";
 import TACheckInCheckOutTimes from "./TACheckInCheckOutTimes";
@@ -29,7 +30,7 @@ const VerticalDivider = styled.div`
   }
 `;
 
-const CenteredText = styled.p`
+const CenteredText = styled.h2`
   text-align: center;
 `;
 
@@ -38,16 +39,19 @@ export default function CourseAdminPanel({
   courseId,
 }: CourseAdminPageProps): ReactElement {
   const profile = useProfile();
+  const router = useRouter();
+
   const [currentSettings, setCurrentSettings] = useState(
     defaultPage || CourseAdminOptions.CHECK_IN
   );
 
-  const router = useRouter();
-
   return (
     <Row>
-      <Col span={4} style={{ textAlign: "center" }}>
-        <SettingsPanelAvatar avatarSize={20} />
+      {/* { isMobile ?
+
+        : */}
+      <ResponsiveRowCol style={{ textAlign: "center" }}>
+        <SettingsPanelAvatar avatarSize={50} />
         <CenteredText>
           Welcome back
           <br />
@@ -69,19 +73,19 @@ export default function CourseAdminPanel({
             </Tooltip>
           )}
         </CenteredText>
-        <Menu
-          defaultSelectedKeys={[currentSettings]}
-          onClick={(e) => setCurrentSettings(e.key as CourseAdminOptions)}
-          style={{ background: "#f8f9fb", paddingTop: "20px" }}
-        >
-          <Menu.Item key={CourseAdminOptions.CHECK_IN} icon={<EditOutlined />}>
-            TA Check In/Out Times
-          </Menu.Item>
-          <Menu.Item key={CourseAdminOptions.OVERRIDES} icon={<BellOutlined />}>
-            Course Overrides
-          </Menu.Item>
-        </Menu>
-      </Col>
+      </ResponsiveRowCol>
+      <Menu
+        defaultSelectedKeys={[currentSettings]}
+        onClick={(e) => setCurrentSettings(e.key as CourseAdminOptions)}
+        style={{ background: "#f8f9fb", paddingTop: "20px" }}
+      >
+        <Menu.Item key={CourseAdminOptions.CHECK_IN} icon={<EditOutlined />}>
+          TA Check In/Out Times
+        </Menu.Item>
+        <Menu.Item key={CourseAdminOptions.OVERRIDES} icon={<BellOutlined />}>
+          Course Overrides
+        </Menu.Item>
+      </Menu>
       <VerticalDivider />
       <Space direction="vertical" size={40} style={{ flexGrow: 1 }}>
         <Col span={20}>

packages/app/components/Settings/ProfileSettings.tsx

@@ -1,12 +1,12 @@
 import { API } from "@koh/api-client";
 import { UpdateProfileParams } from "@koh/common";
-import { Button, Form, Input, message, Row } from "antd";
+import { Button, Form, Input, message } from "antd";
 import { pick } from "lodash";
 import { useIsMobile } from "../../hooks/useIsMobile";
 import { HeaderTitle } from "./Styled";
-import styled from "styled-components";
 import React, { ReactElement } from "react";
 import useSWR from "swr";
+import ResponsiveRowCol from "../common/ResponsiveRowCol";
 
 export default function ProfileSettings(): ReactElement {
   const { data: profile, mutate } = useSWR(`api/v1/profile`, async () =>
@@ -30,17 +30,13 @@ export default function ProfileSettings(): ReactElement {
     message.success("Your profile settings have been successfully updated");
   };
 
-  const ResponsiveFormRow = styled(Row)`
-    flexdirection: ${isMobile ? "column" : "row"};
-  `;
-
   return profile ? (
     <div>
       <HeaderTitle>
         <h1>Personal Information</h1>
       </HeaderTitle>
       <Form wrapperCol={{ span: 18 }} form={form} initialValues={profile}>
-        <ResponsiveFormRow>
+        <ResponsiveRowCol>
           <Form.Item
             label="First Name"
             name="firstName"
@@ -68,7 +64,7 @@ export default function ProfileSettings(): ReactElement {
           >
             <Input />
           </Form.Item>
-        </ResponsiveFormRow>
+        </ResponsiveRowCol>
       </Form>
       <Button
         key="submit"

packages/app/components/Settings/SettingsPage.tsx

@@ -156,7 +156,7 @@ export default function SettingsPage({
                   }
                 }}
               >
-                Delete my Profile Picture
+                Remove photo
               </ProfilePicButton>
             )}
           </Col>

packages/app/components/common/Footer.tsx

@@ -10,6 +10,12 @@ const FullWidth = styled.footer`
 
   display: flex;
   justify-content: space-between;
+
+  @media (max-width: 650px) {
+    flex-direction: column;
+    text-align: center;
+    align-items: center;
+  }
 `;
 
 export function Footer(): ReactElement {
@@ -59,7 +65,7 @@ export function Footer(): ReactElement {
             );
           }}
         >
-          File a bug report
+          file a bug report
         </a>
       </div>
     </FullWidth>

packages/app/components/common/ResponsiveRowCol.tsx

@@ -0,0 +1,13 @@
+import React, { ReactElement } from "react";
+import { Row } from "antd";
+import styled from "styled-components";
+import { useIsMobile } from "../../hooks/useIsMobile";
+
+export default function ResponsiveRowCol(): ReactElement {
+  const isMobile = useIsMobile();
+  const ResponsiveRowCol = styled(Row)`
+    flex-direction: ${isMobile ? "column" : "row"};
+  `;
+
+  return <ResponsiveRowCol />;
+}