dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-08 10:55:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix a couple of dark mode stuff

Browse Source
This commit is contained in:
Joshen Lim committed 2020-11-30 23:02:38 +08:00
1 parent c43cb5b6d1
commit d64cd98c2a
12 files changed
+33 -35
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

www/components/AdminAccess/index.tsx
+5 -5
View File
@@ -6,7 +6,7 @@ const AdminAccess = () => {
const [tabId, setTabId] = useState('tabTableEditor')
return (
<div className="py-16 bg-gray-50 dark:bg-dark-200 overflow-hidden lg:py-24">
<div className="py-16 bg-gray-50 dark:bg-dark-300 overflow-hidden lg:py-24">
<div className="container mx-auto sm:px-16 xl:px-20">
<div className="relative items-center">
<div className="relative">
@@ -21,10 +21,10 @@ const AdminAccess = () => {
setTabId={setTabId}
/>
<div className="shadow-lg">
<div className="w-full rounded-t-md h-5 bg-dark-300 flex items-center justify-start px-2">
<div className="h-2 w-2 mr-2 rounded-full bg-dark-400"/>
<div className="h-2 w-2 mr-2 rounded-full bg-dark-400"/>
<div className="h-2 w-2 mr-2 rounded-full bg-dark-400"/>
<div className="w-full rounded-t-md h-5 bg-dark-400 flex items-center justify-start px-2">
<div className="h-2 w-2 mr-2 rounded-full bg-dark-500"/>
<div className="h-2 w-2 mr-2 rounded-full bg-dark-500"/>
<div className="h-2 w-2 mr-2 rounded-full bg-dark-500"/>
</div>
<video className="rounded-b-md" src={`videos/${tabId}.mp4`} autoPlay loop muted>
Your browser does not support the video tag
www/components/BuiltWithSupabase/index.tsx
+2 -2
View File
@@ -4,10 +4,10 @@ import ProjectExamples from "data/ProjectExamples.json"
const BuiltExamples = () => {
return (
<div className="bg-gray-50 dark:bg-dark-200 py-16">
<div className="bg-gray-50 dark:bg-dark-300 py-16">
<div className="container mx-auto sm:px-16 xl:px-20 relative">
<div className="absolute inset-0">
<div className="bg-white dark:bg-dark-600 h-1/3 sm:h-2/3"></div>
<div className="bg-white dark:bg-dark-200 h-1/3 sm:h-2/3"></div>
</div>
<div className="mx-auto max-w-7xl">
<SectionHeader
www/components/Card.tsx
+1 -1
View File
@@ -55,7 +55,7 @@ const Card = (props: Props) => {
alt={title}
/>
</div>
<div className="flex-1 bg-white p-6 flex flex-col justify-between dark:bg-dark-600">
<div className="flex-1 bg-white p-6 flex flex-col justify-between dark:bg-dark-200">
<div className="flex-1">
{/* {icons && (
<div className="-mt-12 mb-6 flex -space-x-3">
www/components/CaseStudies/benchmark.tsx
+1 -1
View File
@@ -3,7 +3,7 @@ import Button from 'components/button'
const Benchmark = () => {
return (
<div className="mt-6 max-w-lg mx-auto lg:max-w-none lg:mx-0">
<div className="bg-white dark:bg-dark-200 grid gap-4 items-center shadow-lg rounded-md grid-cols-1 lg:grid-cols-12">
<div className="bg-white dark:bg-dark-300 grid gap-4 items-center shadow-lg rounded-md grid-cols-1 lg:grid-cols-12">
<div className="col-span-1 lg:col-span-10 flex items-center flex-col lg:flex-row">
<img className="mb-10 w-full lg:w-auto lg:mb-0 lg:h-44 lg:mr-14" src="images/benchmark.svg" />
<div className="px-12 py-5 lg:px-0 lg:py-0">
www/components/CaseStudies/index.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ import CaseStudiesData from "data/CaseStudies.json"
const CaseStudies = () => {
return (
<div className="relative bg-gray-50 dark:bg-dark-300 pt-16 pb-20 lg:pt-24 lg:pb-28">
<div className="relative bg-gray-50 dark:bg-dark-400 pt-16 pb-20 lg:pt-24 lg:pb-28">
<div className="container relative mx-auto sm:px-16 xl:px-20">
<div className="absolute inset-0">
<div className="bg-white dark:bg-dark-300 h-1/3 sm:h-2/3"></div>
www/components/Features/index.tsx
+2 -2
View File
@@ -28,7 +28,7 @@ const Features = () => {
</div>
{url && (
<div className="mt-5">
<a href="#" className="mt-2 text-sm text-brand-600 hover:underline">Learn more link</a>
<a href="#" className="mt-2 text-sm text-brand-600 hover:underline">Learn more <span aria-hidden="true">&rarr;</span></a>
</div>
)}
</div>
@@ -36,7 +36,7 @@ const Features = () => {
})
return (
<div className="bg-gray-50 dark:bg-dark-300 overflow-hidden py-12">
<div className="bg-gray-50 dark:bg-dark-400 overflow-hidden py-12">
<div className="container mx-auto sm:px-16 xl:px-20">
<div className="mx-auto max-w-7xl">
<SectionHeader
www/components/Footer/index.tsx
+2 -2
View File
@@ -61,7 +61,7 @@ const Footer = (props: Props) => {
)
return (
<footer className="bg-white dark:bg-dark-400" aria-labelledby="footerHeading">
<footer className="bg-white dark:bg-dark-500" aria-labelledby="footerHeading">
<h2 id="footerHeading" className="sr-only">Footer</h2>
<div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
<div className="xl:grid xl:grid-cols-3 xl:gap-8">
@@ -129,7 +129,7 @@ const Footer = (props: Props) => {
className={`
relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer
transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2
focus:ring-brand-500 ${darkMode ? 'bg-dark-200' : 'bg-gray-200'} mx-5
focus:ring-brand-500 ${darkMode ? 'bg-dark-300' : 'bg-gray-200'} mx-5
`}
onClick={() => toggleDarkMode()}
>
www/components/MadeForDevelopers/index.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import CodeExamples from 'components/MadeForDevelopers/CodeExamples'
const MadeForDevelopers = () => {
return (
<div className="py-16 bg-gray-50 dark:bg-dark-300 overflow-hidden lg:py-16">
<div className="py-16 bg-gray-50 dark:bg-dark-400 overflow-hidden lg:py-16">
<div className="container mx-auto sm:px-16 xl:px-20">
<SectionHeader className="text-center sm:w-3/4 xl:w-2/3 mx-auto" title={'Supafast easy-to-use APIs'} title_alt={' that do the hard work for you'} subtitle={'MADE FOR DEVELOPERS'} paragraph={'We inspect your database and provide APIs instantly so you can stop building repetitive CRUD endpoints and focus on your product.'} />
www/components/Nav/FlyOut.tsx
+6 -6
View File
@@ -59,7 +59,7 @@ const FlyOut = () => {
<a
key={name}
href="#"
className="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50 dark:hover:bg-dark-600 transition ease-in-out duration-150"
className="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50 dark:hover:bg-dark-300 transition ease-in-out duration-150"
>
{content}
</a>
@@ -104,7 +104,7 @@ const FlyOut = () => {
>
<>
<div
className="absolute inset-x-0 transform shadow-lg border-t-2 border-gray-50 dark:border-dark-600"
className="absolute inset-x-0 transform shadow-lg border-t-2 border-gray-50 dark:border-dark-200"
style={{
zIndex: 999,
position: 'absolute',
@@ -116,8 +116,8 @@ const FlyOut = () => {
}}
>
<div className="absolute inset-0 flex" aria-hidden="true">
<div className="bg-white dark:bg-dark-300 w-1/2"></div>
<div className="bg-gray-50 dark:bg-dark-200 w-1/2"></div>
<div className="bg-white dark:bg-dark-400 w-1/2"></div>
<div className="bg-gray-50 dark:bg-dark-300 w-1/2"></div>
</div>
<div className="relative max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2">
<nav
@@ -135,7 +135,7 @@ const FlyOut = () => {
<li className="flow-root">
<a
href="#"
className="-m-3 p-3 flex rounded-lg hover:bg-gray-100 dark:hover:bg-dark-600 transition ease-in-out duration-150"
className="-m-3 p-3 flex rounded-lg hover:bg-gray-100 dark:hover:bg-dark-200 transition ease-in-out duration-150"
>
<div className="hidden sm:block flex-shrink-0">
<img
@@ -158,7 +158,7 @@ const FlyOut = () => {
<li className="flow-root">
<a
href="#"
className="-m-3 p-3 flex rounded-lg hover:bg-gray-100 dark:hover:bg-dark-600 transition ease-in-out duration-150"
className="-m-3 p-3 flex rounded-lg hover:bg-gray-100 dark:hover:bg-dark-200 transition ease-in-out duration-150"
>
<div className="hidden sm:block flex-shrink-0">
<img
www/components/Nav/index.tsx
+4 -6
View File
@@ -127,24 +127,22 @@ const Nav = (props: Props) => {
)
return (
<nav className="bg-white dark:bg-dark-400 z-50 shadow-lg sticky">
<div className="container mx-auto relative flex justify-between h-16 lg:px-10 xl:px-16">
<nav className="bg-white dark:bg-dark-500 z-50 shadow-lg sticky">
<div className="container mx-auto relative flex justify-between h-16 lg:px-10 xl:px-0">
<HamburgerButton toggleFlyOut={() => setOpen(true)} />
<div className="flex-1 flex items-center justify-center sm:px-10 sm:items-stretch sm:justify-start">
<div className="flex-shrink-0 flex items-center">
{/* Mobile - remove if not needed */}
<img
className="block lg:hidden h-6 w-auto"
src={darkMode ? "images/logo-dark.png" : "images/logo-light.png"}
alt="Workflow"
alt="Logo"
/>
{/* Desktop */}
<img
className="hidden lg:block h-6 w-auto"
src={darkMode ? "images/logo-dark.png" : "images/logo-light.png"}
alt="Workflow"
alt="Logo"
/>
</div>
<div className="pl-4 hidden sm:ml-6 sm:flex sm:space-x-8">
www/components/hero.tsx
+3 -3
View File
@@ -3,7 +3,7 @@ import Button from 'components/button'
const Hero = () => {
return (
<div className="relative bg-dark-400 overflow-hidden">
<div className="relative bg-dark-500 overflow-hidden">
<div className="container mx-auto sm:px-16 xl:px-20">
<div className="hidden sm:block sm:absolute sm:inset-0" aria-hidden="true">
<svg
@@ -31,11 +31,11 @@ const Hero = () => {
<div className="relative pt-6 pb-16 sm:pb-24">
<main className="mt-16 sm:mt-24">
<div className="mx-auto max-w-7xl">
<div className="mx-auto">
<div className="lg:grid lg:grid-cols-12 lg:gap-8">
<div className="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex lg:items-center">
<div className="sm:w-3/4 mx-auto">
<div className="sm:w-3/4 sm:mx-auto lg:mx-0">
<h1 className="mt-4 text-4xl text-white sm:mt-5 sm:leading-none lg:mt-6 lg:text-5xl xl:text-6xl">
<span className="md:block">The Open Source</span>
<span className="text-brand-400 md:block">Firebase Alternative</span>
www/tailwind.config.js
+5 -5
View File
@@ -39,11 +39,11 @@ module.exports = {
// Joshen TODO: At the end just rearrange the values
dark: {
100: '#828282',
600: '#424242',
200: '#3A3A3A',
300: '#292929',
400: '#202020',
500: '#1E1E1E',
200: '#424242',
300: '#3A3A3A',
400: '#292929',
500: '#202020',
600: '#1E1E1E',
700: '#181818',
},
},