chore: update light bg color (#744)

pull/746/head
boojack 2 years ago committed by GitHub
parent 5520605ccc
commit c77d49259a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/logo.webp" type="image/*" /> <link rel="icon" href="/logo.webp" type="image/*" />
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#f6f5f4" /> <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f4f4f5" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#27272a" /> <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#27272a" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="manifest" href="/manifest.json" /> <link rel="manifest" href="/manifest.json" />

@ -12,6 +12,6 @@
"start_url": "/", "start_url": "/",
"scope": "/", "scope": "/",
"display": "standalone", "display": "standalone",
"theme_color": "#f6f5f4", "theme_color": "#f4f4f5",
"background_color": "#f6f5f4" "background_color": "#f4f4f5"
} }

@ -1,5 +1,5 @@
.page-wrapper.auth { .page-wrapper.auth {
@apply flex flex-row justify-center items-center w-full h-screen bg-white dark:bg-zinc-800; @apply flex flex-row justify-center items-center w-full h-screen bg-zinc-100 dark:bg-zinc-800;
> .page-container { > .page-container {
@apply w-80 max-w-full h-full py-4 flex flex-col justify-start items-center; @apply w-80 max-w-full h-full py-4 flex flex-col justify-start items-center;
@ -37,7 +37,7 @@
@apply absolute top-3 left-3 px-1 leading-10 flex-shrink-0 text-base cursor-text text-gray-400 bg-transparent transition-all select-none; @apply absolute top-3 left-3 px-1 leading-10 flex-shrink-0 text-base cursor-text text-gray-400 bg-transparent transition-all select-none;
&.not-null { &.not-null {
@apply text-sm top-0 z-10 leading-4 bg-white dark:bg-zinc-800 rounded; @apply text-sm top-0 z-10 leading-4 bg-zinc-100 dark:bg-zinc-800 rounded;
} }
} }
@ -45,7 +45,7 @@
@apply py-2; @apply py-2;
> input { > input {
@apply w-full py-3 px-3 text-base rounded-lg; @apply w-full py-3 px-3 text-base rounded-lg bg-zinc-100 dark:bg-zinc-800;
} }
} }
} }

@ -1,6 +1,5 @@
.page-wrapper.explore { .page-wrapper.explore {
@apply relative top-0 w-full h-screen overflow-y-auto overflow-x-hidden dark:bg-zinc-800; @apply relative top-0 w-full h-screen overflow-y-auto overflow-x-hidden bg-zinc-100 dark:bg-zinc-800;
background-color: #f6f5f4;
> .page-container { > .page-container {
@apply relative w-full min-h-screen mx-auto flex flex-col justify-start items-center pb-8; @apply relative w-full min-h-screen mx-auto flex flex-col justify-start items-center pb-8;

@ -1,6 +1,5 @@
.page-wrapper.home { .page-wrapper.home {
@apply relative top-0 w-full h-screen overflow-y-auto overflow-x-hidden dark:bg-zinc-800; @apply relative top-0 w-full h-screen overflow-y-auto overflow-x-hidden bg-zinc-100 dark:bg-zinc-800;
background-color: #f6f5f4;
> .banner-wrapper { > .banner-wrapper {
@apply w-full flex flex-col justify-start items-center; @apply w-full flex flex-col justify-start items-center;
@ -17,8 +16,7 @@
@apply relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4 sm:pr-6; @apply relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4 sm:pr-6;
> .memos-editor-wrapper { > .memos-editor-wrapper {
@apply sticky top-0 w-full h-full flex flex-col justify-start items-start z-10 dark:bg-zinc-800; @apply sticky top-0 w-full h-full flex flex-col justify-start items-start z-10 bg-zinc-100 dark:bg-zinc-800;
background-color: #f6f5f4;
} }
> .addition-btn-container { > .addition-btn-container {

@ -1,13 +1,11 @@
.page-wrapper.memo-detail { .page-wrapper.memo-detail {
@apply relative top-0 w-full h-screen overflow-y-auto overflow-x-hidden dark:bg-zinc-800; @apply relative top-0 w-full h-screen overflow-y-auto overflow-x-hidden bg-zinc-100 dark:bg-zinc-800;
background-color: #f6f5f4;
> .page-container { > .page-container {
@apply relative w-full min-h-screen mx-auto flex flex-col justify-start items-center pb-8; @apply relative w-full min-h-screen mx-auto flex flex-col justify-start items-center pb-8;
> .page-header { > .page-header {
@apply sticky top-0 z-10 max-w-2xl w-full min-h-full flex flex-row justify-between items-center px-4 pt-6 mb-2 dark:bg-zinc-800; @apply sticky top-0 z-10 max-w-2xl w-full min-h-full flex flex-row justify-between items-center px-4 pt-6 mb-2 bg-zinc-100 dark:bg-zinc-800;
background-color: #f6f5f4;
> .title-container { > .title-container {
@apply flex flex-row justify-start items-center; @apply flex flex-row justify-start items-center;

@ -2,7 +2,7 @@ import Icon from "../components/Icon";
function Loading() { function Loading() {
return ( return (
<div className="flex flex-row justify-center items-center w-full h-screen bg-white dark:bg-zinc-800"> <div className="flex flex-row justify-center items-center w-full h-screen bg-zinc-100 dark:bg-zinc-800">
<div className="w-80 max-w-full h-full py-4 flex flex-col justify-center items-center"> <div className="w-80 max-w-full h-full py-4 flex flex-col justify-center items-center">
<Icon.Loader className="animate-spin dark:text-gray-200" /> <Icon.Loader className="animate-spin dark:text-gray-200" />
</div> </div>

Loading…
Cancel
Save