Soverein/sanasto-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding Dark mode 🌗

Browse Source
This commit is contained in:
Leo Giovanetti
2020-12-25 13:05:21 -03:00
parent cc52c292f3
commit ab18e78039
17 changed files with 134 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/MenuContent.jsx
+2 -2
View File
@@ -6,7 +6,7 @@ const MenuItem = ({ children, ...props }) => (
<li {...props}>
<a
href="#"
className="text-gray-800 hover:text-gray-400 block px-4 py-2 rounded-md text-base font-medium"
className="text-gray-800 hover:text-gray-400 dark:text-gray-400 block px-4 py-2 rounded-md text-base font-medium"
>
{children}
</a>
@@ -24,7 +24,7 @@ const MenuContent = () => {
return (
<>
<div className="p-4">
<h2 className="text-xl select-none">Menu</h2>
<h2 className="text-xl select-none dark:text-gray-500">Menu</h2>
</div>
<ul>
{menuLinks.map(p => {
components/Notifications.jsx
+5 -5
View File
@@ -6,14 +6,14 @@ import ListItem from './ui/ListItem';
import VirtualScroll from './ui/VirtualScroll';
const NotificationItem = ({ i }) => (
<ListItem className="flex align-center">
<ListItem className="flex align-center dark:bg-black">
<img
src={`/img/faces/image-${(i % 66) + 1}.png`}
alt="Notification"
className="block rounded-full w-8 h-8 mr-4"
/>
<div className="flex-1">
<span className="p-0 m-0 align-middle">You have a new friend request</span>
<span className="p-0 m-0 align-middle dark:text-gray-500">You have a new friend request</span>
</div>
<div>
<Button className="background-transparent px-1 py-1 text-green-400 text-lg">
@@ -27,9 +27,9 @@ const NotificationItem = ({ i }) => (
);
const Notifications = () => (
<div className="w-full h-full flex flex-col">
<div className="p-4">
<h2 className="text-xl">Notifications</h2>
<div className="w-full h-full flex flex-col dark:bg-black">
<div className="p-4 rounded-tl-md rounded-tr-md dark:bg-black">
<h2 className="text-xl dark:text-gray-600">Notifications</h2>
</div>
<List className="flex-1">
<VirtualScroll
components/pages/Home.jsx
+5 -5
View File
@@ -9,10 +9,10 @@ const HomeCard = ({ title, type, text, author, image }) => (
<div>
<img className="rounded-t-xl h-32 w-full object-cover" src={image} />
</div>
<div className="px-4 py-4 mt-2 bg-white rounded-b-xl">
<h4 className="font-bold py-0 text-s text-gray-400 uppercase">{type}</h4>
<h2 className="font-bold text-2xl text-gray-800">{title}</h2>
<p className="sm:text-sm text-s text-gray-500 mr-1 my-3">{text}</p>
<div className="px-4 py-4 bg-white rounded-b-xl dark:bg-gray-900">
<h4 className="font-bold py-0 text-s text-gray-400 dark:text-gray-500 uppercase">{type}</h4>
<h2 className="font-bold text-2xl text-gray-800 dark:text-gray-100">{title}</h2>
<p className="sm:text-sm text-s text-gray-500 mr-1 my-3 dark:text-gray-400">{text}</p>
</div>
</Card>
);
@@ -21,7 +21,7 @@ const Home = ({ selected }) => {
const homeItems = Store.useState(selectors.getHomeItems);
return (
<Content visible={selected} className="p-4">
<Content visible={selected} className="p-4 dark:bg-black">
{homeItems.map((i, index) => (
<HomeCard {...i} key={index} />
))}
components/pages/Lists.jsx
+2 -2
View File
@@ -7,7 +7,7 @@ import List from '../ui/List';
import VirtualScroll from '../ui/VirtualScroll';
const ListEntry = ({ list, ...props }) => (
<div {...props} className="p-4 border-solid border-b cursor-pointer">
<div {...props} className="p-4 border-solid dark:border-gray-800 border-b cursor-pointer dark:text-gray-200">
<span className="text-md">{list.name}</span>
</div>
);
@@ -29,7 +29,7 @@ const AllLists = ({ onSelect }) => {
const Lists = ({ selected }) => {
return (
<Content visible={selected} className="p-4">
<Content visible={selected} className="p-4 dark:bg-black">
<List className="h-full w-full">
{selected && (
<AllLists
components/pages/Settings.jsx
+2 -2
View File
@@ -12,10 +12,10 @@ const Settings = ({ selected }) => {
const settings = Store.useState(selectors.getSettings);
return (
<Content visible={selected} className="p-4">
<Content visible={selected} className="p-4 dark:bg-black">
<List>
<ListItem className="flex">
<span className="text-md flex-1">Enable Notifications</span>
<span className="text-md flex-1 dark:text-gray-200">Enable Notifications</span>
<Toggle
checked={settings.enableNotifications}
onChange={e =>
components/ui/App.jsx
+24 -4
View File
@@ -1,9 +1,29 @@
import classNames from 'classnames';
import { Plugins } from '@capacitor/core';
import { useEffect, useState } from 'react';
const App = ({ children, className, ...props }) => (
<div {...props} className={classNames('flex h-screen flex-col', className)}>
const { DarkMode } = Plugins;
const App = ({ children, className, ...props }) => {
const [darkMode, setDarkMode] = useState(false);
useEffect(async() => {
let darkmodeConfig = await DarkMode.isDarkModeOn();
setDarkMode(darkmodeConfig.isDarkModeOn);
DarkMode.addListener("darkModeStateChanged", (state) => {
setDarkMode(state.isDarkModeOn);
});
}, []);
return (<div {...props} className={classNames(
'flex h-screen flex-col',
className,
{
'dark': darkMode
}
)}>
{children}
</div>
);
</div>);
}
export default App;
components/ui/Card.jsx
+1 -1
View File
@@ -2,7 +2,7 @@ import classNames from 'classnames';
const Card = ({ children, className, ...props }) => (
<div {...props} className={classNames('max-w-xl', className)}>
<div className="bg-white shadow-md rounded-b-xl">{children}</div>
<div className="bg-white shadow-md rounded-b-xl dark:bg-black">{children}</div>
</div>
);
components/ui/Menu.jsx
+9 -11
View File
@@ -4,22 +4,20 @@ import { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { useDrag } from 'react-use-gesture';
const { DarkMode } = Plugins;
const Menu = ({ open, onClose, children, className, ...props }) => {
const ref = useRef();
const [x, setX] = useState(-100000);
const [rect, setRect] = useState(null);
const [dragging, setDragging] = useState(false);
useEffect(() => {
if (open) {
Plugins.StatusBar.setStyle({
style: 'LIGHT',
}).catch(() => {});
} else {
Plugins.StatusBar.setStyle({
style: 'DARK',
}).catch(() => {});
}
useEffect(async () => {
let darkmodeConfig = await DarkMode.isDarkModeOn();
console.log({open, darkMode: darkmodeConfig.isDarkModeOn})
Plugins.StatusBar.setStyle({
style: open && !darkmodeConfig.isDarkModeOn ? 'LIGHT' : 'DARK',
}).catch(() => {});
}, [open]);
useLayoutEffect(() => {
@@ -76,7 +74,7 @@ const Menu = ({ open, onClose, children, className, ...props }) => {
transform: `translateX(${x}px)`,
}}
className={classNames(
'fixed z-40 transform transform-gpu translate w-48 h-full bg-gray-100',
'fixed z-40 transform-gpu translate w-48 h-full bg-gray-100 dark:bg-gray-800',
className,
{
'transition-transform': !dragging,
components/ui/Nav.jsx
+4 -4
View File
@@ -165,28 +165,28 @@ const Nav = ({ page }) => {
<div
className={`${
showProfileMenu ? '' : 'hidden'
} origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5`}
} origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5`}
role="menu"
aria-orientation="vertical"
aria-labelledby="user-menu"
>
<a
href="#"
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-400"
role="menuitem"
>
Your Profile
</a>
<a
href="#"
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-400"
role="menuitem"
>
Settings
</a>
<a
href="#"
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-400"
role="menuitem"
>
Sign out
components/ui/Tab.jsx
+2 -2
View File
@@ -6,8 +6,8 @@ const Tab = ({ title, icon, selected, selectedIcon, onClick }) => (
onClick={onClick}
href="#"
className={classNames('px-6 rounded-md text-sm text-center font-medium cursor-pointer', {
'text-gray-500': !selected,
'text-gray-800': selected,
'text-gray-500 dark:text-white': !selected,
'text-gray-800 dark:text-gray-600': selected,
})}
>
{icon && (
components/ui/TabBar.jsx
+1 -1
View File
@@ -1,7 +1,7 @@
const TabBar = ({ children }) => (
<nav
id="tab-bar"
className="py-2 h-16 bg-white w-full flex justify-center items-start bg-gray-50 z-10"
className="py-2 h-16 w-full flex justify-center items-start bg-gray-50 z-10 dark:bg-gray-800"
style={{
height: `calc(env(safe-area-inset-bottom, 0px) + 56px)`,
}}