Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Develop #380

Merged
merged 13 commits into from
Apr 25, 2022
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Feature/darktheme colors (#378)
* feat: added quarterColors for both light and dark mode

* feat: Added google analytics to theme changes

* fix: fixed user profile icon to make it consistent

* fix: code refactoring

* fix: code refactoring in syllabus

* feat: added dark semantic colors

* fix: added colors based on numbers too

* fix: added a todo comment

* fix: fix semantic text colors dark mode

* feat: update quarter switch colors & icons

* feat: update timetable course items and color selector with new theme colors

Co-authored-by: Nicholas Narmada <nichnarmada@gmail.com>
YHhaoareyou and nichnarmada authored Apr 13, 2022

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit 6632a95cd312e6fb1dbc99e30af4c2a45f98246c
6 changes: 3 additions & 3 deletions root/package.json
Original file line number Diff line number Diff line change
@@ -82,8 +82,8 @@
"@fortawesome/free-brands-svg-icons": "6.0.0",
"@fortawesome/free-solid-svg-icons": "6.0.0",
"@fortawesome/react-fontawesome": "0.1.17",
"@mui/icons-material": "^5.5.1",
"@mui/material": "^5.5.2",
"@mui/icons-material": "^5.6.1",
"@mui/material": "^5.6.1",
"@types/react": "17.0.39",
"@types/react-dom": "17.0.13",
"@types/react-router-dom": "5.3.3",
@@ -101,7 +101,7 @@
"react-helmet": "6.1.0",
"react-i18next": "11.15.6",
"react-responsive": "8.2.0",
"react-router-dom": "^6.2.2",
"react-router-dom": "^6.3.0",
"react-vertical-timeline-component": "3.5.2",
"single-spa": "5.9.3",
"single-spa-layout": "1.6.0",
1,234 changes: 592 additions & 642 deletions root/pnpm-lock.yaml

Large diffs are not rendered by default.

7 changes: 5 additions & 2 deletions root/src/App.tsx
Original file line number Diff line number Diff line change
@@ -28,11 +28,13 @@ const Feeds = lazy(() => import("@app/components/Feeds"));

const NotFound = () => {
useEffect(() => navigateToUrl("/"), []);

return <LoadingSpinner theme="light" message="Not found! Redirecting..." />;
};

const Redirect = ({ to }: { to: string }) => {
useEffect(() => navigateToUrl(to), []);

return null;
};

@@ -65,9 +67,10 @@ const AppRoutes = () => {
break;
}
});

return unsubscribe;
}, []);

return (
<Routes>
<Route element={<TermsOfService />} path="/terms-of-service" />
@@ -92,7 +95,7 @@ const LoadingSpinnerContainer = () => {
<LoadingSpinner theme={theme} message="Loading..." />
</div>
);
}
};

const App = () => {
const { i18n } = useTranslation();
4 changes: 2 additions & 2 deletions root/src/components/Feeds.tsx
Original file line number Diff line number Diff line change
@@ -29,8 +29,8 @@ const Feeds = () => {
process.env.NODE_ENV === "development"
? "http://localhost:8083"
: process.env.NODE_ENV === "staging"
? `https://${process.env.PREFIX}.${process.env.MF_FEEDS_DOMAIN}`
: "/feeds";
? `https://${process.env.PREFIX}.${process.env.MF_FEEDS_DOMAIN}`
: "/feeds";

return (
<FeedsWrapper style={{ overflow: "hidden" }}>
1 change: 1 addition & 0 deletions root/src/components/TermsOfService.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from "react";

import {
StyledHeader,
StyledParagraph,
33 changes: 21 additions & 12 deletions root/src/components/aboutUs/MeetOurTeam/memberList.ts
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
import akylai from "@app/assets/img/contributors/akylai.jpg";
import alina from "@app/assets/img/contributors/alina.jpg";
import austin from "@app/assets/img/contributors/austin.jpg";
import george from "@app/assets/img/contributors/george.jpg";
import gu from "@app/assets/img/contributors/gu.jpg";
import hao from "@app/assets/img/contributors/hao.jpg";
import hatori from "@app/assets/img/contributors/hatori.jpg";
import isabella from "@app/assets/img/contributors/isabella.jpg";
import jason from "@app/assets/img/contributors/jason.jpg";
import kaede from "@app/assets/img/contributors/kaede.jpg";
import kaiqing from "@app/assets/img/contributors/kaiqing.jpg";
import kong from "@app/assets/img/contributors/kong.jpg";
import mei from "@app/assets/img/contributors/mei.jpg";
import naomi from "@app/assets/img/contributors/naomi.jpg";
import nicholas from "@app/assets/img/contributors/nicholas.jpg";
import oscar from "@app/assets/img/contributors/oscar.jpg";
import takumi from "@app/assets/img/contributors/takumi.jpg";
import tang from "@app/assets/img/contributors/tang.jpg";
import xinmei from "@app/assets/img/contributors/xinmei.jpg";
import xinyue from "@app/assets/img/contributors/xinyue.jpg";
import yaoyuan from "@app/assets/img/contributors/yaoyuan.jpg";
import zenda from "@app/assets/img/contributors/zenda.jpg";
import zhaohuaibo from "@app/assets/img/contributors/zhaohuaibo.jpg";
import jason from "@app/assets/img/contributors/jason.jpg";
import nicholas from "@app/assets/img/contributors/nicholas.jpg";
import takumi from "@app/assets/img/contributors/takumi.jpg";
import xinmei from "@app/assets/img/contributors/xinmei.jpg";
import xinyue from "@app/assets/img/contributors/xinyue.jpg";
import akylai from "@app/assets/img/contributors/akylai.jpg";
import email from "@app/assets/img/socialmediaicon/email.png";
import facebook from "@app/assets/img/socialmediaicon/facebook.png";
import github from "@app/assets/img/socialmediaicon/github.png";
@@ -75,7 +75,10 @@ export const CurrentList: Array<Members> = [
name: "Jason Park",
position: "Backend Engineer & Marketing",
socials: [
{ platform: linkedin, link: "https://www.linkedin.com/in/%E6%B5%9A%E5%BD%AC-%E6%9C%B4-a9a503200" },
{
platform: linkedin,
link: "https://www.linkedin.com/in/%E6%B5%9A%E5%BD%AC-%E6%9C%B4-a9a503200",
},
],
profileText: "Imagine Sisyphus happy.",
},
@@ -89,7 +92,8 @@ export const CurrentList: Array<Members> = [
{ platform: github, link: "https://github.com/nichnarmada" },
{ platform: linkedin, link: "https://www.linkedin.com/in/nichnarmada/" },
],
profileText: "People call me the Pro Pro, aka the Professional Procrastinator 🙂",
profileText:
"People call me the Pro Pro, aka the Professional Procrastinator 🙂",
},
// takumi
{
@@ -106,7 +110,10 @@ export const CurrentList: Array<Members> = [
name: "Xinmei(Evelyn) Liu",
position: "Marketing",
socials: [
{ platform: instagram, link: "https://www.instagram.com/evelyn_liuxinm/" },
{
platform: instagram,
link: "https://www.instagram.com/evelyn_liuxinm/",
},
],
profileText: "I’m so happy to work with you guys together 🥰",
},
@@ -126,11 +133,13 @@ export const CurrentList: Array<Members> = [
name: "Akylai",
position: "Frontend Apprentice",
socials: [
{platform: instagram, link:"https://www.instagram.com/akylaimanalieva/"},
{
platform: instagram,
link: "https://www.instagram.com/akylaimanalieva/",
},
],
},

]
];

export const AlumniList: Array<Members> = [
{
23 changes: 12 additions & 11 deletions root/src/components/frame/MobileNav.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React, { useState } from "react";

import { getUserAttr, signOut } from "@bit/wasedatime.core.ts.utils.user";
import { faUserCircle } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useTranslation } from "react-i18next";
import LinkOutsideRouter from "@app/utils/link-outside-router";

import { NavItemsProps } from "@app/components/frame/Nav";
import { ProfileIconHovered } from "@app/components/icons/ProfileIcon";
import LinkOutsideRouter from "@app/utils/link-outside-router";

type Props = {
navItems: NavItemsProps[];
@@ -38,13 +38,13 @@ const MobileNav = ({ navItems, openSignInModal }: Props) => {

return (
<nav
className="fixed bottom-0 flex flex-row bg-black w-full bg-light-bgSide dark:bg-dark-bgSide"
className="fixed bottom-0 flex flex-row w-full bg-light-bgSide dark:bg-dark-bgSide"
style={{
height: "60px",
zIndex: 1000,
padding: "8px",
width: "100vw",
boxShadow: "rgba(0, 0, 0, 0.3) 0px -4px 12px"
boxShadow: "rgba(0, 0, 0, 0.3) 0px -4px 12px",
}}
>
{styledLinks}
@@ -67,14 +67,15 @@ const MobileNav = ({ navItems, openSignInModal }: Props) => {
style={{ margin: "0px auto" }}
/>
) : (
<FontAwesomeIcon
icon={faUserCircle}
className="text-light-text2 dark:text-dark-text2"
style={{ fontSize: "20px" }}
/>
<div className="text-light-text2 dark:text-dark-text2 group-hover:text-light-main dark:group-hover:text-dark-text1">
<ProfileIconHovered />
</div>
)}
{!userAttr && (
<div className="text-light-text2 dark:text-dark-text2" style={{ fontSize: "12px" }}>
<div
className="text-light-text2 dark:text-dark-text2"
style={{ fontSize: "12px" }}
>
{t("user.Sign in")}
</div>
)}
9 changes: 8 additions & 1 deletion root/src/components/frame/Nav.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
import React, { useState, useEffect, lazy, Suspense, ReactNode, useContext } from "react";
import React, {
useState,
useEffect,
lazy,
Suspense,
ReactNode,
useContext,
} from "react";

import { sizes } from "@bit/wasedatime.core.ts.utils.responsive-utils";
import { createBrowserHistory } from "history";
15 changes: 10 additions & 5 deletions root/src/components/home/HomeModal.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import React, { useState } from "react";

import Modal from "@bit/wasedatime.core.ts.ui.modal";
import { sizes } from "@bit/wasedatime.core.ts.utils.responsive-utils";
import ReactGA from "react-ga";
import { WithTranslation, withTranslation } from "react-i18next";
import MediaQuery from "react-responsive";
import { gaSetLanguage } from "@app/ga/eventActions";
import { gaLanguage } from "@app/ga/eventCategories";

import Welcome from "@app/components/home/Welcome";
import NewFeatures from "@app/components/home/NewFeatures";
import Welcome from "@app/components/home/Welcome";
import { gaSetLanguage } from "@app/ga/eventActions";
import { gaLanguage } from "@app/ga/eventCategories";

const modalStyle = {
overlay: {
@@ -35,7 +36,7 @@ const modalStyle = {
border: "none",
borderRadius: "20px",
backgroundColor: "transparent",
padding: 0
padding: 0,
},
};

@@ -76,7 +77,11 @@ const HomeModal = ({

const pages = [
<Welcome goToNextPage={() => setPageIndex(pageIndex + 1)} />,
<NewFeatures goToPrevPage={() => setPageIndex(pageIndex - 1)} closeModal={closeModal} isFirstAccess={isFirstAccess} />
<NewFeatures
goToPrevPage={() => setPageIndex(pageIndex - 1)}
closeModal={closeModal}
isFirstAccess={isFirstAccess}
/>,
];

return (
29 changes: 11 additions & 18 deletions root/src/components/home/NewFeatures.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import React from "react";

import { useTranslation } from "react-i18next";
import { navigateToUrl } from "single-spa";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faExchangeAlt } from "@fortawesome/free-solid-svg-icons";
import themeToggleLightImg from "@app/assets/img/home/theme-toggle-light.png";

import themeToggleDarkImg from "@app/assets/img/home/theme-toggle-dark.png";
import themeToggleLightImg from "@app/assets/img/home/theme-toggle-light.png";

type Props = {
isFirstAccess: boolean;
goToPrevPage: () => void;
closeModal: () => void;
}
};

const NewFeatures = ({ isFirstAccess, goToPrevPage, closeModal }: Props) => {
const { t } = useTranslation();
@@ -36,22 +36,15 @@ const NewFeatures = ({ isFirstAccess, goToPrevPage, closeModal }: Props) => {
{t("welcome.themeToggle.themeToggleExplain2")}
<br />
{t("welcome.themeToggle.themeToggleExplain3")}
<br /><br />
<br />
<br />
<div className="flex flex-row gap-8">
<div className="text-center">
<img
src={themeToggleLightImg}
alt="reviews example"
width="100%"
/>
<img src={themeToggleLightImg} alt="reviews example" width="100%" />
<p>{t("welcome.themeToggle.lightMode")}</p>
</div>
<div className="text-center">
<img
src={themeToggleDarkImg}
alt="reviews example"
width="100%"
/>
<img src={themeToggleDarkImg} alt="reviews example" width="100%" />
<p>{t("welcome.themeToggle.darkMode")}</p>
</div>
</div>
@@ -81,7 +74,7 @@ const NewFeatures = ({ isFirstAccess, goToPrevPage, closeModal }: Props) => {
</button>
</div>
</div>
)
}
);
};

export default NewFeatures;
export default NewFeatures;
23 changes: 14 additions & 9 deletions root/src/components/home/Welcome.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import React, { useContext } from "react";
import styled from "styled-components";
import { useTranslation } from "react-i18next";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";

import { Logo } from "@bit/wasedatime.core.ts.ui.logo";
import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useTranslation } from "react-i18next";
import styled from "styled-components";

import { ThemeContext } from "@app/utils/theme-context";

type Props = {
goToNextPage: () => void;
}
};

const LogoWrapper = styled("div")`
transform: translate(0, 5vh);
@@ -52,7 +54,10 @@ const Welcome = ({ goToNextPage }: Props) => {
className="ml-4 text-icon-sun dark:text-icon-moon"
onClick={() => setTheme(theme === "light" ? "dark" : "light")}
>
<FontAwesomeIcon icon={theme === "light" ? faSun : faMoon} size="lg" />
<FontAwesomeIcon
icon={theme === "light" ? faSun : faMoon}
size="lg"
/>
</button>
</div>

@@ -67,7 +72,7 @@ const Welcome = ({ goToNextPage }: Props) => {
</button>
</div>
</div>
)
}
);
};

export default Welcome;
export default Welcome;
11 changes: 8 additions & 3 deletions root/src/components/user/RedirectPage.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { ThemeContext } from "@app/utils/theme-context";
import LoadingSpinner from "@bit/wasedatime.core.ts.ui.loading-spinner";
import React, { useContext, useEffect } from "react";

import LoadingSpinner from "@bit/wasedatime.core.ts.ui.loading-spinner";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";

import { ThemeContext } from "@app/utils/theme-context";

const RedirectPage = () => {
const { theme } = useContext(ThemeContext);
const { t } = useTranslation();
@@ -35,7 +36,11 @@ const RedirectPage = () => {
) : (
<div className="mt-20 text-center">
<LoadingSpinner theme={theme} message={t("verify.success.title")} />
<a href="/" className="mb-8 block"><span className="text-3xl p-4 border-2 border-light-main rounded text-light-main dark:text-dark-main dark:border-dark-main">{t("verify.success.navigateHint")}</span></a>
<a href="/" className="mb-8 block">
<span className="text-3xl p-4 border-2 border-light-main rounded text-light-main dark:text-dark-main dark:border-dark-main">
{t("verify.success.navigateHint")}
</span>
</a>
<p className="dark:text-dark-text2">{t("verify.success.message1")}</p>
<p className="dark:text-dark-text2">{t("verify.success.message2")}</p>
</div>
Loading