Piteball
/
skolplattformen-backup
mirror of https://github.com/kolplattformen/skolplattformen.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(site): dark mode (#393)

This commit is contained in:
Åke Amcoff 2021-05-17 07:09:33 +02:00 committed by GitHub
parent ebf51d73d1
commit 36e809a5f0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 99 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
packages/site/assets/img/boys.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 569 KiB

After

Width:  |  Height:  |  Size: 784 KiB

BIN
packages/site/assets/img/girls.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 396 KiB

After

Width:  |  Height:  |  Size: 510 KiB

25
packages/site/components/Banner.tsx
View File

@ -1,5 +1,4 @@
import Image from 'next/image'
import NextLink from 'next/link'
import appstore from '../assets/img/appstore.svg'
import phone from '../assets/img/banner/phone_login.png'
import shape1 from '../assets/img/banner/shape1.png'
@ -13,7 +12,7 @@ import playstore from '../assets/img/playstore.png'
import Link from './Link'
import { H1 } from './Typography'
import { useIntl } from 'react-intl'
import { ButtonLinkPatreon } from './ButtonLink'
import ButtonLink, { ButtonLinkPatreon } from './ButtonLink'
const Banner = (): JSX.Element => {
const intl = useIntl()
@ -33,7 +32,7 @@ const Banner = (): JSX.Element => {
<img
src={shape2}
alt=""
className="absolute left-9 top-20 -z-1 motion-safe:animate-pulse"
className="absolute left-9 top-20 motion-safe:animate-pulse"
/>
<img
src={shape3}
@ -58,7 +57,7 @@ const Banner = (): JSX.Element => {
<img
src={shape7}
alt=""
className="absolute bottom-48 right-8 -z-1 motion-safe:animate-bounce-slow"
className="absolute bottom-48 right-8 motion-safe:animate-bounce-slow"
/>
</div>
</div>
@ -66,7 +65,7 @@ const Banner = (): JSX.Element => {
<p>{intl.formatMessage({ id: 'general.description' })}</p>
{!!intl.formatMessage({ id: 'general.flashtitle' }) && (
<div className="mt-5">
<h2 className="mb-4 text-2xl font-bold leading-tight text-gray-800 md:text-4xl">
<h2 className="mb-4 text-2xl font-bold leading-tight text-gray-800 dark:text-white md:text-4xl">
{intl.formatMessage({ id: 'general.flashtitle' })}
</h2>
<p>{intl.formatMessage({ id: 'general.flashtext' })}</p>
@ -102,17 +101,13 @@ const Banner = (): JSX.Element => {
</ButtonLinkPatreon>
</p>
<p className="flex flex-col mt-5 sm:items-center sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
<NextLink href="/integritet">
<a className="inline-block px-4 py-2 font-bold text-indigo-800 border-2 border-indigo-800 rounded-full lg:px-8 lg:py-4 hover:bg-indigo-800 hover:text-white">
{intl.formatMessage({ id: 'navigation.integrity' })}
</a>
</NextLink>
<ButtonLink href="/integritet">
{intl.formatMessage({ id: 'navigation.integrity' })}
</ButtonLink>
<NextLink href="/qa">
<a className="inline-block px-4 py-2 font-bold text-indigo-800 border-2 border-indigo-800 rounded-full lg:px-8 lg:py-4 hover:bg-indigo-800 hover:text-white">
{intl.formatMessage({ id: 'navigation.qna' })}
</a>
</NextLink>
<ButtonLink href="/qa">
{intl.formatMessage({ id: 'navigation.qna' })}
</ButtonLink>
</p>
</div>
<div className="flex items-start justify-center pr-0 motion-safe:animate-bounce-slow md:pr-4 xl:pr-0">

35
packages/site/components/ButtonLink.tsx
View File

@ -1,45 +1,44 @@
import classNames from 'classnames'
import Link from 'next/link'
import { AnchorHTMLAttributes, DetailedHTMLProps } from 'react'
type ButtonLinkProps = Pick<HTMLAnchorElement, 'href' | 'target'>
type ButtonLinkProps = DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
const ButtonLink: React.FC<ButtonLinkProps> = ({ children, href, target }) => {
return (
const ButtonLink: React.FC<ButtonLinkProps> = ({ children, className, href, target }) => {
const isExternal = href?.indexOf("//") !== -1
const inner = (
<a
href={href}
className="inline-block py-2 px-4 md:px-8 md:py-4 font-bold text-indigo-800 border-2 border-indigo-800 rounded-full hover:bg-indigo-800 hover:text-white"
href={isExternal ? href : undefined}
className={classNames('inline-block py-2 px-4 md:px-8 md:py-4 font-bold text-indigo-800 border-2 border-indigo-800 rounded-full hover:bg-indigo-800 dark:hover:bg-indigo-400 hover:text-white dark:text-indigo-400 dark:border-indigo-400', className)}
target={target}
rel={target === '_blank' ? 'noopener noreferrer' : ''}
>
{children}
</a>
)
}
type ButtonLinkInternalProps = Pick<HTMLAnchorElement, 'href'>
if (isExternal || !href) {
return inner
}
export const ButtonLinkInternal: React.FC<ButtonLinkInternalProps> = ({
children,
href,
}) => {
return (
<Link href={href}>
<a className="inline-block px-4 py-2 font-bold text-indigo-800 border-2 border-indigo-800 rounded-full cursor-pointer md:px-8 md:py-4 hover:bg-indigo-800 hover:text-white">
{children}
</a>
<Link href={href} passHref>
{inner}
</Link>
)
}
export const ButtonLinkPatreon: React.FC = ({ children }) => {
return (
<a
<ButtonLink
href="https://www.patreon.com/oppnaskolplattformen"
className="inline-block px-4 py-2 font-bold text-white bg-red-500 border-2 rounded-full md:px-8 md:py-4 hover:bg-white hover:border-red-500 hover:text-red-500"
className="!text-white bg-red-500 !border-transparent rounded-full hover:!bg-transparent hover:!border-red-500 hover:!text-red-500"
target="_blank"
rel="noopener noreferrer"
>
{children}
</a>
</ButtonLink>
)
}

2
packages/site/components/CtaThree.tsx
View File

@ -6,7 +6,7 @@ import { H2 } from './Typography'
const CtaThree = (): JSX.Element => {
return (
<Section bg="bg-white">
<Section bg="bg-white dark:bg-gray-900">
<div>
<H2>Se summering för alla dina barn på ett ställe</H2>
<p>

8
packages/site/components/FeatureCard.tsx
View File

@ -18,13 +18,13 @@ const FeatureCard = ({
className={classnames(
'px-5 py-12 text-center border-2 border-transparent rounded-lg',
{
'border-indigo-600': isActive,
'border-indigo-600 dark:border-indigo-400': isActive,
}
)}
>
<div className="w-20 h-20 mx-auto mb-10">
<img src={image} className="svg" alt="" />
</div>
<div className="w-20 h-20 mx-auto mb-10 bg-current" style={{
mask: `url(${image}) no-repeat center`,
}} />
<div className="font-bold text-lg mb-2">{title}</div>
<p>{text}</p>
</div>

6
packages/site/components/Footer.tsx
View File

@ -35,7 +35,7 @@ const Footer = (): JSX.Element => {
<ul className="space-y-2">
{team.map(({ name, twitter }) => (
<li className="flex items-center space-x-2" key={name}>
<div className="w-5 text-gray-700">
<div className="w-5 text-gray-700 dark:text-gray-500">
<Icon.Twitter />
</div>
<Link.External href={`https://twitter.com/@${twitter}`}>
@ -60,8 +60,8 @@ const Footer = (): JSX.Element => {
</ul>
</div>
<div className="p-5 bg-white shadow-md rounded-md">
<div className="mb-3 text-gray-800">
<div className="p-5 bg-white dark:bg-gray-800 shadow-md rounded-md">
<div className="mb-3 text-gray-800 dark:text-gray-200">
@iteam1337 Digitalisering på riktigt.
</div>
<div>

2
packages/site/components/FunFacts.tsx
View File

@ -49,7 +49,7 @@ const FunFacts = (): JSX.Element => {
/>
</VisibilitySensor>
</span>
<p className="text-gray-700">{funfact.title}</p>
<p className="text-gray-700 dark:text-gray-400">{funfact.title}</p>
</div>
))}
</div>

6
packages/site/components/Header.tsx
View File

@ -42,7 +42,7 @@ const HeaderHome = (): JSX.Element => {
<header>
<div
className={classnames(
'bg-white bg-opacity-0 duration-200 transition-colors sticky'
'bg-white bg-opacity-0 duration-200 transition-colors sticky z-10'
)}
>
<div className="flex items-center justify-between max-w-6xl px-5 py-4 mx-auto md:px-2">
@ -63,7 +63,7 @@ const HeaderHome = (): JSX.Element => {
</header>
<button
aria-label={displayMobileMenu ? 'Stäng meny' : 'Visa meny'}
className="fixed z-30 block w-6 w-16 p-5 text-white bg-gray-900 rounded-full md:hidden bottom-5 right-5"
className="fixed z-30 block w-16 p-5 text-white bg-gray-900 dark:bg-gray-700 rounded-full md:hidden bottom-5 right-5"
onClick={() => setDisplayMobileMenu(!displayMobileMenu)}
>
{displayMobileMenu ? <Icon.Times /> : <Icon.Menu />}
@ -74,7 +74,7 @@ const HeaderHome = (): JSX.Element => {
className="fixed inset-0 z-10 bg-gray-800 bg-opacity-50"
onClick={() => setDisplayMobileMenu(false)}
/>
<div className="fixed top-0 bottom-0 left-0 z-20 w-9/12 h-screen p-5 bg-white">
<div className="fixed top-0 bottom-0 left-0 z-20 w-9/12 h-screen p-5 bg-white dark:bg-gray-800">
<NavLinks onClick={() => setDisplayMobileMenu(false)} />
</div>
</>

4
packages/site/components/Link.tsx
View File

@ -11,7 +11,7 @@ const Internal: React.FC<LinkInternalProps> = ({
}): JSX.Element => {
return (
<Link href={href}>
<a className="text-indigo-800">{children}</a>
<a className="text-indigo-800 dark:text-indigo-400">{children}</a>
</Link>
)
}
@ -30,7 +30,7 @@ const External: React.FC<LinkExternalProps> = ({
}): JSX.Element => {
return (
<a
className={classnames('text-indigo-800', className)}
className={classnames('text-indigo-800 dark:text-indigo-400', className)}
href={href}
target={target}
rel={target === '_blank' ? 'noopener noreferrer' : ''}

2
packages/site/components/NavLinks.tsx
View File

@ -47,7 +47,7 @@ const NavLinks = ({ onClick }: NavLinksProps): JSX.Element => {
)
return (
<ul className="flex flex-col text-xl text-gray-800 md:flex-row md:items-center space-y-4 md:space-y-0 md:space-x-8 md:text-base">
<ul className="flex flex-col text-xl text-gray-800 dark:text-white md:flex-row md:items-center space-y-4 md:space-y-0 md:space-x-8 md:text-base">
<li>
<Link to="wrapper" href="/#">
{intl.formatMessage({ id: 'navigation.home' })}

4
packages/site/components/PricingTemp.tsx
View File

@ -42,8 +42,8 @@ const Pricing = (): JSX.Element => {
/>
</div>
<div className="flex">
<div className="flex flex-col items-center inline-block px-5 py-8 mx-auto text-center shadow-lg rounded-md">
<h3 className="text-3xl text-gray-800">Tillfälligt</h3>
<div className="flex flex-col items-center inline-block px-5 py-8 mx-auto text-center shadow-lg rounded-md dark:bg-gray-800">
<h3 className="text-3xl text-gray-800 dark:text-gray-400">Tillfälligt</h3>
<div className="mt-5 text-6xl text-pink-500">
{formatPrice(price)}
</div>

2
packages/site/components/Privacy.tsx
View File

@ -1,7 +1,7 @@
const Privacy = (): JSX.Element => {
return (
<div className="header">
<div className="max-w-6xl mx-auto px-5 md:px-0 my-5 md:my-24 prose">
<div className="max-w-6xl mx-auto px-5 md:px-0 my-5 md:my-24 prose dark:prose-dark">
<h1>Öppna Skolplattformen</h1>
<h2>Integritetspolicy</h2>
<p>

2
packages/site/components/QA.tsx
View File

@ -1,7 +1,7 @@
const QA = (): JSX.Element => {
return (
<div className="header">
<div className="max-w-6xl px-5 mx-auto my-5 md:my-24 md:px-0 prose">
<div className="max-w-6xl px-5 mx-auto my-5 md:my-24 md:px-0 prose dark:prose-dark relative z-10">
<h1>Frågor och svar om Öppna skolplattformen</h1>
<h2>

2
packages/site/components/Section.tsx
View File

@ -7,7 +7,7 @@ interface SectionProps {
}
const Section: React.FC<SectionProps> = ({
bg = 'bg-gray-100',
bg = 'bg-gray-100 dark:bg-gray-800',
padding = 'py-8 md:py-20',
children,
id,

10
packages/site/components/SectionTitle.tsx
View File

@ -1,15 +1,17 @@
import React, { ReactNode } from "react"
interface SectionTitleProps {
text?: string
title: string
text?: ReactNode
title: ReactNode
}
const SectionTitle = ({ text, title }: SectionTitleProps): JSX.Element => {
return (
<div className="mb-16 text-center space-y-5">
<h2 className="text-4xl md:text-5xl font-bold leading-tight text-gray-800">
<h2 className="text-4xl md:text-5xl font-bold leading-tight text-gray-800 dark:text-white">
{title}
</h2>
{text && <p className="text-gray-600">{text}</p>}
{text && <p className="text-gray-600 dark:text-gray-400">{text}</p>}
</div>
)
}

2
packages/site/components/Status.tsx
View File

@ -1,6 +1,6 @@
const Status = (): JSX.Element => {
return (
<div className="max-w-6xl px-5 mx-auto my-5 md:my-24 md:px-0 prose">
<div className="max-w-6xl px-5 mx-auto my-5 md:my-24 md:px-0 prose dark:prose-dark">
<h1>Status</h1>
<h3>Funkar appen som den ska?</h3>
<p>

6
packages/site/components/Testimonials.tsx
View File

@ -45,7 +45,7 @@ const Testimonials = (): JSX.Element => {
className="flex justify-center mt-12 md:mt-0"
key={testimonial.name}
>
<div className="max-w-md px-8 py-4 bg-white rounded-lg shadow-lg">
<div className="max-w-md px-8 py-4 bg-white dark:bg-gray-700 rounded-lg shadow-lg">
<div className="flex justify-center -mt-16 md:justify-start">
<div className="object-cover w-20 h-20 border-2 border-indigo-500 rounded-full">
<Image
@ -58,11 +58,11 @@ const Testimonials = (): JSX.Element => {
</div>
</div>
<div>
<p className="mt-2 text-gray-600">{testimonial.text}</p>
<p className="mt-2 text-gray-600 dark:text-gray-300">{testimonial.text}</p>
</div>
<div className="flex flex-col mt-4 text-pink-600">
{testimonial.name}
<div className="text-sm text-gray-500">{testimonial.title}</div>
<div className="text-sm text-gray-400">{testimonial.title}</div>
</div>
</div>
</div>

6
packages/site/components/Timeline.tsx
View File

@ -18,7 +18,7 @@ interface TimelineProps {
const Timeline = ({ events }: TimelineProps): JSX.Element => {
return (
<ul className="max-w-2xl border-gray-200 md:mx-auto md:border-l-2 space-y-4 md:space-y-12">
<ul className="max-w-2xl border-gray-200 dark:border-gray-900 md:mx-auto md:border-l-2 space-y-4 md:space-y-12">
{events.map(({ date, media, importantDates, overview }) => (
<li className="relative" key={date}>
<div className="absolute top-0 items-center justify-center hidden w-10 h-10 text-white bg-indigo-400 border-4 border-white rounded-full md:flex -left-5 -top-2">
@ -35,10 +35,10 @@ const Timeline = ({ events }: TimelineProps): JSX.Element => {
/>
</svg>
</div>
<div className="hidden mb-4 ml-8 text-sm font-bold text-gray-700 capitalize md:block">
<div className="hidden mb-4 ml-8 text-sm font-bold text-gray-700 dark:text-gray-400 capitalize md:block">
{dateFormat(date)}
</div>
<div className="p-4 text-sm leading-relaxed bg-white border-t-4 border-indigo-300 rounded-b shadow-md md:p-5 md:ml-8">
<div className="p-4 text-sm leading-relaxed bg-white dark:bg-gray-800 border-t-4 border-indigo-300 rounded-b shadow-md md:p-5 md:ml-8">
<div className="block mb-4 text-lg font-bold text-gray-700 capitalize md:hidden">
{dateFormat(date)}
</div>

8
packages/site/components/TimelineLatest.tsx
View File

@ -1,5 +1,5 @@
import { events } from '../data/timelineEvents'
import { ButtonLinkInternal } from './ButtonLink'
import ButtonLink from './ButtonLink'
import Timeline from './Timeline'
const TimelineLatest = (): JSX.Element => {
@ -8,7 +8,7 @@ const TimelineLatest = (): JSX.Element => {
return (
<section className="max-w-6xl px-5 py-8 mx-auto lg:px-0 lg:py-32 grid grid-cols-1 lg:grid-cols-2 gap-8">
<div className="space-y-8">
<h2 className="text-2xl md:text-4xl font-bold leading-tight text-gray-800">
<h2 className="text-2xl md:text-4xl font-bold leading-tight text-gray-800 dark:text-white">
Om Öppna Skolplattformen
</h2>
<p>
@ -31,9 +31,9 @@ const TimelineLatest = (): JSX.Element => {
senast genom en polisanmälan. I ett försök att skapa transparens har
vi sammanställt vad som hänt nedan.
</p>
<ButtonLinkInternal href="/aktuellt">
<ButtonLink href="/aktuellt">
Läs hela historien
</ButtonLinkInternal>
</ButtonLink>
</div>
<Timeline events={latestMonthsEvents} />
</section>

4
packages/site/components/Typography.tsx
View File

@ -1,6 +1,6 @@
export const H1: React.FC = ({ children }) => {
return (
<h1 className="mb-5 text-4xl md:text-5xl font-semibold text-gray-800">
<h1 className="mb-5 text-4xl md:text-5xl font-semibold text-gray-800 dark:text-white">
{children}
</h1>
)
@ -8,6 +8,6 @@ export const H1: React.FC = ({ children }) => {
export const H2: React.FC = ({ children }) => {
return (
<h2 className="mb-5 text-5xl font-semibold text-gray-800">{children}</h2>
<h2 className="mb-5 text-5xl font-semibold text-gray-800 dark:text-white">{children}</h2>
)
}

3
packages/site/pages/aktuellt.tsx
View File

@ -1,8 +1,9 @@
import { NextPage } from 'next'
import Timeline from '../components/Timeline'
import { H1 } from '../components/Typography'
import { events } from '../data/timelineEvents'
const CurrentEventsPage = (): JSX.Element => {
const CurrentEventsPage: NextPage = () => {
return (
<section className="mx-5 max-w-2xl md:mx-auto">
<div className="my-8 md:my-20">

3
packages/site/pages/index.tsx
View File

@ -8,8 +8,9 @@ import PricingTemp from '../components/PricingTemp'
import Testimonials from '../components/Testimonials'
import TimelineLatest from '../components/TimelineLatest'
import Flash from '../components/Flash'
import { NextPage } from 'next'
const HomePage = (): Element => {
const HomePage: NextPage = () => {
return (
<>
<Flash />

3
packages/site/pages/integritet.tsx
View File

@ -1,6 +1,7 @@
import { NextPage } from 'next'
import Privacy from '../components/Privacy'
const IntegrityPage = (): JSX.Element => {
const IntegrityPage: NextPage = () => {
return <Privacy />
}

3
packages/site/pages/qa.tsx
View File

@ -1,6 +1,7 @@
import { NextPage } from 'next'
import QA from '../components/QA'
const QAPage = (): JSX.Element => {
const QAPage: NextPage = () => {
return <QA />
}

3
packages/site/pages/status.tsx
View File

@ -1,6 +1,7 @@
import { NextPage } from 'next'
import Status from '../components/Status'
const StatusPage = (): JSX.Element => {
const StatusPage: NextPage = () => {
return <Status />
}

3
packages/site/styles/global.css
View File

@ -10,7 +10,7 @@
html,
body {
@apply font-sans text-gray-700;
@apply font-sans text-gray-700 dark:bg-gray-900 dark:text-gray-300;
}
p {
@ -31,7 +31,6 @@ p {
right: 0;
top: 0;
width: 100%;
z-index: -1;
}
a.patreon {

23
packages/site/tailwind.config.js
View File

@ -1,6 +1,7 @@
module.exports = {
mode: 'jit',
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
darkMode: 'media', // or false or 'class'
theme: {
fontFamily: {
sans: ['Poppins', 'sans-serif'],
@ -21,6 +22,25 @@ module.exports = {
},
},
},
typography: (theme) => ({
dark: {
css: {
color: theme('colors.gray.200'),
h1: {
color: theme('colors.white'),
},
h2: {
color: theme('colors.white'),
},
h3: {
color: theme('colors.white'),
},
a: {
color: theme('colors.indigo.500'),
}
},
},
}),
zIndex: {
'-1': '-1',
},
@ -29,6 +49,7 @@ module.exports = {
variants: {
extend: {
animation: ['motion-safe'],
typography: ['dark'],
},
},
plugins: [require('@tailwindcss/typography')],