feat(colors): add offset colors to cards and buttons for both themes

oleast · oleast · commit 6ed885d5d60d · 2021-01-19T23:31:44.000+01:00
diff --git a/common/utils/chart.ts b/common/utils/chart.ts
@@ -26,7 +26,7 @@ const baseProps = {
   domainPadding: 25,
   style: {
     parent: {
-      border: '1px solid var(--middle-gray)',
+      border: '1px solid var(--background-color-offset)',
       background: 'var(--background-color)',
     },
   },
diff --git a/components/Alert/alert.module.scss b/components/Alert/alert.module.scss
@@ -21,7 +21,7 @@
 .alert {
   padding: var(--spacing-4);
   background-color: var(--muted);
-  color: var(--text-dark);
+  color: var(--black-text);
   border-left: solid var(--spacing-1) var(--main);
   border-radius: var(--spacing-1);
 }
diff --git a/components/Card/BasicCard.tsx b/components/Card/BasicCard.tsx
@@ -1,15 +1,15 @@
 import React, { forwardRef, HTMLProps } from 'react';
 import cx from 'classnames';
 
-import styles from './outlined-card.module.scss';
+import styles from './basic-card.module.scss';
 
 type ElementProps = HTMLProps<HTMLElement>;
 
 type Props = ElementProps & {
   as?: string;
 };
 
-export const OutlinedCard = forwardRef<HTMLElement, Props>(
+export const BasicCard = forwardRef<HTMLElement, Props>(
   ({ className, as: Element = 'div', children, ...rest }, ref) => {
     // just a hack to not trip of typescript with the props of the `as` element.
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -22,4 +22,4 @@ export const OutlinedCard = forwardRef<HTMLElement, Props>(
   }
 );
 
-OutlinedCard.displayName = 'OutlinedCard';
+BasicCard.displayName = 'BasicCard';
diff --git a/components/Card/LinkCard.tsx b/components/Card/LinkCard.tsx
@@ -0,0 +1,16 @@
+import React, { forwardRef, HTMLProps } from 'react';
+import cx from 'classnames';
+
+import styles from './link-card.module.scss';
+
+type Props = HTMLProps<HTMLAnchorElement>;
+
+export const LinkCard = forwardRef<HTMLAnchorElement, Props>(({ className, children, ...props }, ref) => {
+  return (
+    <a ref={ref} className={cx(className, styles.card)} {...props}>
+      {children}
+    </a>
+  );
+});
+
+LinkCard.displayName = 'LinkCard';
diff --git a/components/Card/basic-card.module.scss b/components/Card/basic-card.module.scss
@@ -0,0 +1,5 @@
+.card {
+  padding: var(--spacing-2);
+  border-radius: var(--spacing-1);
+  background-color: var(--background-color-offset);
+}
diff --git a/components/Card/link-card.module.scss b/components/Card/link-card.module.scss
@@ -12,7 +12,8 @@
   padding: var(--spacing-2);
 
   border-radius: var(--spacing-1);
-  border: solid 1px var(--middle-gray);
+  border: solid 1px var(--background-color-offset);
+  background-color: var(--background-color-offset);
 
   &:hover {
     border: solid 1px var(--text-color);
diff --git a/components/CourseCharts/AverageChart.tsx b/components/CourseCharts/AverageChart.tsx
@@ -31,7 +31,7 @@ export const AverageChartComponent: FC<Props> = ({ grades }) => {
       }}
       style={{
         parent: {
-          border: '1px solid var(--middle-gray)',
+          border: '1px solid var(--background-color-offset)',
           background: 'var(--background-color)',
         },
       }}
diff --git a/components/CourseCharts/FailedChart.tsx b/components/CourseCharts/FailedChart.tsx
@@ -31,7 +31,7 @@ export const FailedChartComponent: FC<Props> = ({ grades }) => {
       }}
       style={{
         parent: {
-          border: '1px solid var(--middle-gray)',
+          border: '1px solid var(--background-color-offset)',
           background: 'var(--background-color)',
         },
       }}
diff --git a/components/CourseCharts/GradedGraph.tsx b/components/CourseCharts/GradedGraph.tsx
@@ -21,7 +21,7 @@ export const GradedGraphComponent: FC<Props> = ({ grade }) => {
       }}
       style={{
         parent: {
-          border: '1px solid var(--middle-gray)',
+          border: '1px solid var(--background-color-offset)',
           background: 'var(--background-color)',
         },
       }}
diff --git a/components/CourseCharts/UngradedGraph.tsx b/components/CourseCharts/UngradedGraph.tsx
@@ -21,7 +21,7 @@ export const UngradedGraphComponent: FC<Props> = ({ grade }) => {
       }}
       style={{
         parent: {
-          border: '1px solid var(--middle-gray)',
+          border: '1px solid var(--background-color-offset)',
           background: 'var(--background-color)',
         },
       }}
diff --git a/components/Facts/index.tsx b/components/Facts/index.tsx
@@ -6,6 +6,7 @@ import { Stat } from '../Stat/Stat';
 
 import s from './facts.module.scss';
 import { Course } from 'models/Course';
+import { BasicCard } from 'components/Card/BasicCard';
 
 interface Props {
   course: Course;
@@ -18,15 +19,15 @@ export const Facts: FC<Props> = ({ course }) => {
       <Heading className={s.heading} as="h2">
         Om emnet
       </Heading>
-      <dl className={s.facts}>
+      <BasicCard as="dl" className={s.facts}>
         <Stat label="Studiepoeng" value={String(course.credit)} />
         <Stat label="Nivå" value={course.course_level} />
         <Stat label="Undervisningsspråk" value={course.taught_in_english ? 'Engelsk' : 'Norsk'} />
         <Stat
           label={semesters.length === 1 ? 'Semester' : 'Semestere'}
           value={semesters.length ? semesters.join(` og `) : 'Ingen'}
         />
-      </dl>
+      </BasicCard>
     </div>
   );
 };
diff --git a/components/GradeAverages/GradeAverages.tsx b/components/GradeAverages/GradeAverages.tsx
@@ -12,6 +12,7 @@ import {
   calculatePassingRate,
   calculateAveragePassingRate,
 } from 'common/utils/grades';
+import { BasicCard } from 'components/Card/BasicCard';
 
 interface Props {
   selectedGrade: Grade;
@@ -30,7 +31,7 @@ export const GradeAverages: FC<Props> = ({ selectedGrade, allGrades, rollingYear
       <Heading className={s.heading} as="h2">
         Karakterer
       </Heading>
-      <dl className={s.stats}>
+      <BasicCard as="dl" className={s.stats}>
         {isSelectedGradeGraded ? (
           <GradedStat
             label={`${selectedGrade.year} ${selectedGrade.semester_display}`}
@@ -60,7 +61,7 @@ export const GradeAverages: FC<Props> = ({ selectedGrade, allGrades, rollingYear
         ) : (
           <UngradedStat label="Alle år" percentage={calculateAveragePassingRate(allGrades)} mode="passing" />
         )}
-      </dl>
+      </BasicCard>
     </div>
   );
 };
diff --git a/components/common/button.module.scss b/components/common/button.module.scss
@@ -9,8 +9,13 @@
 .buttonVariant {
   padding: var(--spacing-2);
   border-radius: var(--spacing-1);
-  border: solid 1px var(--text-color);
+  border: solid 1px var(--background-color-offset);
+  background-color: var(--background-color-offset);
   margin-top: var(--spacing-1);
+
+  &:hover {
+    border: solid 1px var(--text-color);
+  }
 }
 
 .linkVariant {
diff --git a/components/forms/scrolly.module.scss b/components/forms/scrolly.module.scss
@@ -6,6 +6,7 @@
   &::-webkit-scrollbar {
     display: none;
   }
+  padding-bottom: 2px; // Let overflowing focus display at the bottom
 }
 
 .scrollInner {
@@ -16,4 +17,5 @@
 .scrollButton {
   width: 100px;
   text-align: center;
+  height: 45px; // Height of the select field
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/pages/global.scss b/pages/global.scss
@@ -30,8 +30,11 @@
     --font-size-xs: 14px;
   }
 
-  --text-dark: #1a202c;
-  --text-light: #ffffff;
+  --black-base: #141821;
+  --black-base-offset: #272d3b;
+  --white-base: #ffffff;
+  --white-offset: #e5e9f1;
+  --black-text: #1a202c;
 
   --blue: #08b2e3;
   --blue-muted: #98dff3;
@@ -44,7 +47,6 @@
   --yellow-muted: #ffe8b9;
   --dark-gray: #484d6d;
   --very-dark-gray: #1a202c;
-  --middle-gray: #888888;
   --feide-blue: #1f4698;
 
   --test-yellow: #ffc857;
@@ -72,18 +74,21 @@
   --grade-not-passed-old: #cc0000;
 
   @media (prefers-color-scheme: dark) {
-    --text-color: var(--text-light);
-    --background-color: var(--text-dark);
+    --text-color: var(--white-base);
+    --background-color: var(--black-base);
+    --background-color-offset: var(--black-base-offset);
   }
 
   @media (prefers-color-scheme: light) {
-    --background-color: var(--text-light);
-    --text-color: var(--text-dark);
+    --background-color: var(--white-base);
+    --text-color: var(--black-text);
+    --background-color-offset: var(--white-offset);
   }
 
   [data-reach-dialog-content] {
-    --background-color: var(--text-light);
-    --text-color: var(--text-dark);
+    --background-color: var(--white-base);
+    --text-color: var(--black-text);
+    --background-color-offset: var(--white-offset);
   }
 }
 
diff --git a/views/AboutView/ContributorCard.tsx b/views/AboutView/ContributorCard.tsx
@@ -4,7 +4,7 @@ import cx from 'classnames';
 import { GithubUser } from 'common/api/github/repo';
 import { Heading } from 'components/Typography/Heading';
 import { Text } from 'components/Typography/Text';
-import { OutlinedCard } from 'components/Card/OutlinedCard';
+import { LinkCard } from 'components/Card/LinkCard';
 
 import styles from './constributor-card.module.scss';
 
@@ -15,13 +15,7 @@ interface Props {
 
 export const ContributorCard: FC<Props> = ({ className, user }) => {
   return (
-    <OutlinedCard
-      as="a"
-      className={cx(styles.card, className)}
-      href={user.url}
-      target="_blank"
-      rel="noopener noreferrer"
-    >
+    <LinkCard className={cx(styles.card, className)} href={user.url} target="_blank" rel="noopener noreferrer">
       <div className={styles.imageContainer}>
         <Image
           className={styles.image}
@@ -35,6 +29,6 @@ export const ContributorCard: FC<Props> = ({ className, user }) => {
         {user.name ?? user.username}
       </Heading>
       {user.name ? <Text className={styles.username}>{user.username}</Text> : null}
-    </OutlinedCard>
+    </LinkCard>
   );
 };
diff --git a/views/AboutView/OrgCard.tsx b/views/AboutView/OrgCard.tsx
@@ -4,7 +4,7 @@ import cx from 'classnames';
 import { GithubOrg } from 'common/api/github/repo';
 import { Heading } from 'components/Typography/Heading';
 import { Text } from 'components/Typography/Text';
-import { OutlinedCard } from 'components/Card/OutlinedCard';
+import { LinkCard } from 'components/Card/LinkCard';
 
 import styles from './org-card.module.scss';
 
@@ -15,13 +15,7 @@ interface Props {
 
 export const OrgCard: FC<Props> = ({ org, className }) => {
   return (
-    <OutlinedCard
-      as="a"
-      className={cx(styles.card, className)}
-      href={org.url}
-      target="_blank"
-      rel="noopener noreferrer"
-    >
+    <LinkCard className={cx(styles.card, className)} href={org.url} target="_blank" rel="noopener noreferrer">
       <div className={styles.imageContainer}>
         <Image className={styles.image} src={org.avatarUrl} alt={`${org.name} logo`} width={100} height={100} />
       </div>
@@ -34,6 +28,6 @@ export const OrgCard: FC<Props> = ({ org, className }) => {
         <Text>{org.publicReposCount}</Text>
       </div>
       <Text className={styles.description}>{org.description}</Text>
-    </OutlinedCard>
+    </LinkCard>
   );
 };
diff --git a/views/AboutView/RepoCard.tsx b/views/AboutView/RepoCard.tsx
@@ -6,7 +6,7 @@ import styles from './repo-card.module.scss';
 import { Heading } from 'components/Typography/Heading';
 import { Text } from 'components/Typography/Text';
 import { formatDateString } from 'common/utils/date';
-import { OutlinedCard } from 'components/Card/OutlinedCard';
+import { LinkCard } from 'components/Card/LinkCard';
 
 interface Props {
   className?: string;
@@ -15,19 +15,13 @@ interface Props {
 
 export const RepoCard: FC<Props> = ({ className, repo }) => {
   return (
-    <OutlinedCard
-      as="a"
-      className={cx(styles.card, className)}
-      href={repo.url}
-      target="_blank"
-      rel="noopener noreferrer"
-    >
+    <LinkCard className={cx(styles.card, className)} href={repo.url} target="_blank" rel="noopener noreferrer">
       <Heading as="p" size="h5">
         {repo.name}
       </Heading>
       {repo.description ? <Text>{repo.description}</Text> : null}
       <Text>Språk: {repo.language}</Text>
       <Text>Oppdatert: {formatDateString(repo.updatedAt)}</Text>
-    </OutlinedCard>
+    </LinkCard>
   );
 };
diff --git a/views/FrontPageView/CourseCard.tsx b/views/FrontPageView/CourseCard.tsx
@@ -11,7 +11,7 @@ import { Text } from 'components/Typography/Text';
 import cx from 'classnames';
 
 import styles from './course-card.module.scss';
-import { OutlinedCard } from 'components/Card/OutlinedCard';
+import { LinkCard } from 'components/Card/LinkCard';
 import { Grade } from 'models/Grade';
 import { formatPercentage } from 'common/utils/math';
 
@@ -43,15 +43,15 @@ export const CourseCard: FC<Props> = ({ className, code, name, grades }) => {
   const gradeLetter = averageGrade ? mapGradeAverageToLetter(averageGrade) : undefined;
   return (
     <Link href="/course/[courseCode]" as={`/course/${code}`}>
-      <OutlinedCard as="a" className={cx(className, styles.card)}>
+      <LinkCard className={cx(className, styles.card)}>
         <Heading className={styles.code} as="h3">
           {code}
         </Heading>
         <Text className={styles.text}>{name}</Text>
         <Text className={cx(styles.grade, GRADE_COLORS[gradeLetter ?? 'PASSED'])}>
           {showGradeLetter ? gradeLetter || '-' : averageGrade ? formatPercentage(averageGrade) : '-'}
         </Text>
-      </OutlinedCard>
+      </LinkCard>
     </Link>
   );
 };
diff --git a/views/FrontPageView/front-page-view.module.scss b/views/FrontPageView/front-page-view.module.scss
@@ -24,7 +24,7 @@
 .featuredCourses {
   display: grid;
   grid-template-columns: 1fr;
-  gap: var(--spacing-2);
+  gap: var(--spacing-3);
   margin-top: var(--spacing-4);
 
   @media screen and (min-width: 480px) {

Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@`
`21`	`21`	`.alert {`
`22`	`22`	`padding: var(--spacing-4);`
`23`	`23`	`background-color: var(--muted);`
`24`		`- color: var(--text-dark);`
	`24`	`+ color: var(--black-text);`
`25`	`25`	`border-left: solid var(--spacing-1) var(--main);`
`26`	`26`	`border-radius: var(--spacing-1);`
`27`	`27`	`}`
Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,7 @@`
`6`	`6`	`&::-webkit-scrollbar {`
`7`	`7`	`display: none;`
`8`	`8`	`}`
	`9`	`+ padding-bottom: 2px; // Let overflowing focus display at the bottom`
`9`	`10`	`}`
`10`	`11`
`11`	`12`	`.scrollInner {`
`@@ -16,4 +17,5 @@`
`16`	`17`	`.scrollButton {`
`17`	`18`	`width: 100px;`
`18`	`19`	`text-align: center;`
	`20`	`+ height: 45px; // Height of the select field`
`19`	`21`	`}`