From c5220616de54a0bcc1338502248731f6548309ed Mon Sep 17 00:00:00 2001 From: Nabil Date: Wed, 14 Oct 2020 11:23:24 +0200 Subject: [PATCH] feat: preparations for light-theme --- public/assets/logo_dark.svg | 8 ++++---- public/assets/logo_standalone.svg | 14 ++++++++++++++ src/components/Layout.jsx | 6 +++--- src/styles/index.css | 14 +++++++++----- tailwind.config.js | 3 ++- 5 files changed, 32 insertions(+), 13 deletions(-) create mode 100644 public/assets/logo_standalone.svg diff --git a/public/assets/logo_dark.svg b/public/assets/logo_dark.svg index 111cebe..2161770 100644 --- a/public/assets/logo_dark.svg +++ b/public/assets/logo_dark.svg @@ -1,8 +1,8 @@ - - - + + + - + diff --git a/public/assets/logo_standalone.svg b/public/assets/logo_standalone.svg new file mode 100644 index 0000000..f419080 --- /dev/null +++ b/public/assets/logo_standalone.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx index e957cd5..526f82f 100644 --- a/src/components/Layout.jsx +++ b/src/components/Layout.jsx @@ -16,7 +16,7 @@ export function Layout({ children }) { Pollu logo @@ -39,7 +39,7 @@ export function Layout({ children }) { Created by{' '} @@ -48,7 +48,7 @@ export function Layout({ children }) { .{' '} diff --git a/src/styles/index.css b/src/styles/index.css index 80b9261..c8e6c80 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -23,7 +23,7 @@ body { } .toggle > span > span:nth-child(2) { - @apply absolute block w-4 h-4 mt-1 ml-1 rounded-full shadow inset-y-0 left-0 transition-transform duration-300 ease-in-out bg-primary; + @apply absolute block w-4 h-4 mt-1 ml-1 rounded-full shadow inset-y-0 left-0 transition-all duration-300 ease-in-out bg-primary bg-white opacity-50; } .toggle > span > span:nth-child(2) > input { @@ -31,11 +31,11 @@ body { } .toggle[data-checked='true'] > span > span:nth-child(2) { - @apply transform translate-x-full; + @apply transform translate-x-full opacity-100; } .option { - @apply w-full block relative p-2 text-primary font-normal text-lg text-center cursor-pointer; + @apply w-full block relative p-2 text-white font-normal text-lg text-center cursor-pointer; } .option input:checked ~ span:nth-of-type(2) { @@ -67,7 +67,7 @@ body { } .result { - @apply py-2 px-4 rounded-lg capitalize text-primary bg-border text-center w-full font-normal transition duration-200 relative flex justify-between items-center overflow-hidden text-lg; + @apply py-2 px-4 rounded-lg capitalize text-white bg-border text-center w-full font-normal transition duration-200 relative flex justify-between items-center overflow-hidden text-lg; } .result > div { @@ -111,6 +111,10 @@ body { @apply py-2 pl-4 pr-2 rounded-lg border-2 bg-transparent border-border text-primary transition-all duration-200 text-lg w-full outline-none; } +.input::placeholder { + @apply text-primary opacity-50; +} + .input:active, .input:focus { @apply border-focus; @@ -118,7 +122,7 @@ body { .input:active::placeholder, .input:focus::placeholder { - @apply text-primary; + @apply opacity-75; } .toast { diff --git a/tailwind.config.js b/tailwind.config.js index fdba789..f843f87 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -33,7 +33,8 @@ module.exports = { background: '#202040', border: '#543864', focus: '#793A9D', - progress: '#FF6363' + progress: '#FF6363', + white: '#fff' }, extend: { spacing: {