From 3f139ade1533d3bfbeec3030d45645f017be3846 Mon Sep 17 00:00:00 2001 From: MartinsOnuoha Date: Fri, 27 Oct 2023 12:13:20 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(toggledarkmode.vue):=20add=20d?= =?UTF-8?q?arkmode=20toggle?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 6 +- package-lock.json | 90 +++++++++++++++++++ package.json | 8 +- src/assets/styles/color-scheme.scss | 5 ++ src/assets/styles/{main.css => main.scss} | 11 +-- .../styles/{scrollbar.css => scrollbar.scss} | 0 src/assets/styles/variables.scss | 6 ++ src/components/AppCategory/AppCategory.vue | 4 +- .../AppCategory/__AppCategory.dark.scss | 3 + src/components/AppHeader/HeaderActions.vue | 25 ++++++ src/components/AppHeader/ToggleDarkMode.vue | 27 ++++++ .../AppStatementCard/AppStatementCard.vue | 27 +----- .../_AppStatementCard.dark.scss | 8 ++ .../AppStatementCard/_AppStatementCard.scss | 17 ++++ src/components/Icons/MdiGithub.vue | 10 +++ .../Icons/MdiMoonWaningCrescent.vue | 10 +++ src/components/Icons/MdiWhiteBalanceSunny.vue | 10 +++ src/main.ts | 2 +- src/stores/db.ts | 2 +- src/views/HomeView.vue | 8 +- src/views/_HomeView.dark.scss | 3 + 21 files changed, 236 insertions(+), 46 deletions(-) create mode 100644 src/assets/styles/color-scheme.scss rename src/assets/styles/{main.css => main.scss} (68%) rename src/assets/styles/{scrollbar.css => scrollbar.scss} (100%) create mode 100644 src/assets/styles/variables.scss create mode 100644 src/components/AppCategory/__AppCategory.dark.scss create mode 100644 src/components/AppHeader/HeaderActions.vue create mode 100644 src/components/AppHeader/ToggleDarkMode.vue create mode 100644 src/components/AppStatementCard/_AppStatementCard.dark.scss create mode 100644 src/components/AppStatementCard/_AppStatementCard.scss create mode 100644 src/components/Icons/MdiGithub.vue create mode 100644 src/components/Icons/MdiMoonWaningCrescent.vue create mode 100644 src/components/Icons/MdiWhiteBalanceSunny.vue create mode 100644 src/views/_HomeView.dark.scss diff --git a/README.md b/README.md index 82f45e2a..980cf65b 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,11 @@ # What Should I Design? 🎨 You're fresh out of learning UI/UX Design, you want to get your hands dirty with _almost_ real-world example problems to harness your design skills and build up a portfolio. -Problem is, +Problem is, You don't know what to design?. -You don't know what to design?. +Well [Fake Clients](https://fakeclients.com/) isn't completely Free and is limited, and [WhatshouldIdesign.com](http://www.whatshouldidesign.com/) is all jokes. So here's an alternative completely free and crowd-sourced collection of real-world design problems to try. -Well [Fake Clients](https://fakeclients.com/) isn't completely Free and is limited, and [WhatshouldIdesign.com](http://www.whatshouldidesign.com/) is all jokes. So here's an alternative completely free and crowd-sourced collection of design problems to try. +![what-should-i-design-banner-image]() diff --git a/package-lock.json b/package-lock.json index 3ecdf445..256dd9d7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,7 +7,9 @@ "": { "name": "what-should-i-design", "version": "0.0.0", + "license": "(MIT OR Apache-2.0)", "dependencies": { + "@vueuse/core": "^10.5.0", "click-outside-vue3": "^4.0.1", "pinia": "^2.1.7", "vue": "^3.3.4", @@ -1072,6 +1074,11 @@ "integrity": "sha512-95Sfz4nvMAb0Nl9DTxN3j64adfwfbBPEYq14VN7zT5J5O2M9V6iZMIIQU1U+pJyl9agHYHNCqhCXgyEtIRRa5A==", "dev": true }, + "node_modules/@types/web-bluetooth": { + "version": "0.0.18", + "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.18.tgz", + "integrity": "sha512-v/ZHEj9xh82usl8LMR3GarzFY1IrbXJw5L4QfQhokjRV91q+SelFqxQWSep1ucXEZ22+dSTwLFkXeur25sPIbw==" + }, "node_modules/@typescript-eslint/eslint-plugin": { "version": "6.9.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.9.0.tgz", @@ -1630,6 +1637,89 @@ "@vue/language-core": "1.8.20" } }, + "node_modules/@vueuse/core": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.5.0.tgz", + "integrity": "sha512-z/tI2eSvxwLRjOhDm0h/SXAjNm8N5ld6/SC/JQs6o6kpJ6Ya50LnEL8g5hoYu005i28L0zqB5L5yAl8Jl26K3A==", + "dependencies": { + "@types/web-bluetooth": "^0.0.18", + "@vueuse/metadata": "10.5.0", + "@vueuse/shared": "10.5.0", + "vue-demi": ">=0.14.6" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, + "node_modules/@vueuse/core/node_modules/vue-demi": { + "version": "0.14.6", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz", + "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==", + "hasInstallScript": true, + "bin": { + "vue-demi-fix": "bin/vue-demi-fix.js", + "vue-demi-switch": "bin/vue-demi-switch.js" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^3.0.0-0 || ^2.6.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, + "node_modules/@vueuse/metadata": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.5.0.tgz", + "integrity": "sha512-fEbElR+MaIYyCkeM0SzWkdoMtOpIwO72x8WsZHRE7IggiOlILttqttM69AS13nrDxosnDBYdyy3C5mR1LCxHsw==", + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, + "node_modules/@vueuse/shared": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.5.0.tgz", + "integrity": "sha512-18iyxbbHYLst9MqU1X1QNdMHIjks6wC7XTVf0KNOv5es/Ms6gjVFCAAWTVP2JStuGqydg3DT+ExpFORUEi9yhg==", + "dependencies": { + "vue-demi": ">=0.14.6" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, + "node_modules/@vueuse/shared/node_modules/vue-demi": { + "version": "0.14.6", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz", + "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==", + "hasInstallScript": true, + "bin": { + "vue-demi-fix": "bin/vue-demi-fix.js", + "vue-demi-switch": "bin/vue-demi-switch.js" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^3.0.0-0 || ^2.6.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, "node_modules/abab": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz", diff --git a/package.json b/package.json index 99c60698..febc7e14 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,12 @@ "name": "what-should-i-design", "version": "0.0.0", "license": "(MIT OR Apache-2.0)", - "keywords": ["ui/ux", "problem-statment", "what-should-i-design", "design"], + "keywords": [ + "ui/ux", + "problem-statment", + "what-should-i-design", + "design" + ], "author": { "email": "martinsvictor.nd@gmail.com", "name": "MartinsOnuoha", @@ -21,6 +26,7 @@ "commit": "cz" }, "dependencies": { + "@vueuse/core": "^10.5.0", "click-outside-vue3": "^4.0.1", "pinia": "^2.1.7", "vue": "^3.3.4", diff --git a/src/assets/styles/color-scheme.scss b/src/assets/styles/color-scheme.scss new file mode 100644 index 00000000..b9de2eca --- /dev/null +++ b/src/assets/styles/color-scheme.scss @@ -0,0 +1,5 @@ +body[color-scheme="dark"] { + @import "@/views/HomeView.dark"; + @import '@/components/AppCategory/_AppCategory.dark'; + @import '@/components/AppStatementCard/_AppStatementCard.dark'; +} diff --git a/src/assets/styles/main.css b/src/assets/styles/main.scss similarity index 68% rename from src/assets/styles/main.css rename to src/assets/styles/main.scss index eed3de5e..6ad41ce6 100644 --- a/src/assets/styles/main.css +++ b/src/assets/styles/main.scss @@ -1,17 +1,12 @@ @import url('https://fonts.googleapis.com/css2?family=Ibarra+Real+Nova:wght@400;500;600;700&display=swap'); -@import './scrollbar.css'; +@import 'variables'; +@import 'scrollbar'; +@import 'color-scheme'; @tailwind base; @tailwind components; @tailwind utilities; -:root { - --color-dark: #2E2E41; - --color-dark-light: #272C3A; - --color-dark-text: #242424; - --color-ghostwhite: ghostwhite; -} - body { font-family: 'Ibarra Real Nova', serif; color: var(--color-dark-text); diff --git a/src/assets/styles/scrollbar.css b/src/assets/styles/scrollbar.scss similarity index 100% rename from src/assets/styles/scrollbar.css rename to src/assets/styles/scrollbar.scss diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss new file mode 100644 index 00000000..086776d4 --- /dev/null +++ b/src/assets/styles/variables.scss @@ -0,0 +1,6 @@ +:root { + --color-dark: #2E2E41; + --color-dark-light: #272C3A; + --color-dark-text: #242424; + --color-ghostwhite: ghostwhite; +} diff --git a/src/components/AppCategory/AppCategory.vue b/src/components/AppCategory/AppCategory.vue index 1db78123..fbd7f549 100644 --- a/src/components/AppCategory/AppCategory.vue +++ b/src/components/AppCategory/AppCategory.vue @@ -30,8 +30,6 @@ const categoryColorGroups = [ } @media (prefers-color-scheme: dark) { - .AppCategory { - @apply bg-transparent; - } + @import '_AppCategory.dark'; } diff --git a/src/components/AppCategory/__AppCategory.dark.scss b/src/components/AppCategory/__AppCategory.dark.scss new file mode 100644 index 00000000..5996f7d3 --- /dev/null +++ b/src/components/AppCategory/__AppCategory.dark.scss @@ -0,0 +1,3 @@ +.AppCategory { + @apply bg-transparent; +} diff --git a/src/components/AppHeader/HeaderActions.vue b/src/components/AppHeader/HeaderActions.vue new file mode 100644 index 00000000..e6e0fbaa --- /dev/null +++ b/src/components/AppHeader/HeaderActions.vue @@ -0,0 +1,25 @@ + + + + + diff --git a/src/components/AppHeader/ToggleDarkMode.vue b/src/components/AppHeader/ToggleDarkMode.vue new file mode 100644 index 00000000..cf697d66 --- /dev/null +++ b/src/components/AppHeader/ToggleDarkMode.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/src/components/AppStatementCard/AppStatementCard.vue b/src/components/AppStatementCard/AppStatementCard.vue index 04df4bb0..2717c376 100644 --- a/src/components/AppStatementCard/AppStatementCard.vue +++ b/src/components/AppStatementCard/AppStatementCard.vue @@ -25,31 +25,8 @@ const getCategories = useDBStore().categories.filter(category => props.statement diff --git a/src/components/AppStatementCard/_AppStatementCard.dark.scss b/src/components/AppStatementCard/_AppStatementCard.dark.scss new file mode 100644 index 00000000..bb313add --- /dev/null +++ b/src/components/AppStatementCard/_AppStatementCard.dark.scss @@ -0,0 +1,8 @@ +.AppStatementCardContainer { + @apply rounded-lg bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 p-1; +} +.AppStatementCard { + @apply shadow-2xl border-none; + background-color: var(--color-dark); + color: var(--color-ghostwhite); +} diff --git a/src/components/AppStatementCard/_AppStatementCard.scss b/src/components/AppStatementCard/_AppStatementCard.scss new file mode 100644 index 00000000..d32e65d1 --- /dev/null +++ b/src/components/AppStatementCard/_AppStatementCard.scss @@ -0,0 +1,17 @@ +.AppStatementCardContainer { + @apply rounded-lg p-1; + &:focus { + @apply outline-amber-500; + } + .AppStatementCard { + @apply bg-white h-52 w-full cursor-pointer p-5 rounded-lg border relative hover:bg-amber-50 transition-all; + + &__content { + @apply text-lg; + } + + &__categories { + @apply absolute bottom-2 left-0 w-full p-5; + } + } +} diff --git a/src/components/Icons/MdiGithub.vue b/src/components/Icons/MdiGithub.vue new file mode 100644 index 00000000..bb0812f9 --- /dev/null +++ b/src/components/Icons/MdiGithub.vue @@ -0,0 +1,10 @@ + + + + diff --git a/src/components/Icons/MdiMoonWaningCrescent.vue b/src/components/Icons/MdiMoonWaningCrescent.vue new file mode 100644 index 00000000..ea963d58 --- /dev/null +++ b/src/components/Icons/MdiMoonWaningCrescent.vue @@ -0,0 +1,10 @@ + + + + diff --git a/src/components/Icons/MdiWhiteBalanceSunny.vue b/src/components/Icons/MdiWhiteBalanceSunny.vue new file mode 100644 index 00000000..aa6e11ff --- /dev/null +++ b/src/components/Icons/MdiWhiteBalanceSunny.vue @@ -0,0 +1,10 @@ + + + + diff --git a/src/main.ts b/src/main.ts index 9ffef322..0bd350fd 100644 --- a/src/main.ts +++ b/src/main.ts @@ -4,7 +4,7 @@ import { createPinia } from 'pinia' import vClickOutside from "click-outside-vue3" import App from './App.vue' import router from './router' -import './assets/styles/main.css' +import './assets/styles/main.scss' const app = createApp(App) diff --git a/src/stores/db.ts b/src/stores/db.ts index f78d5fdc..e9ab529e 100644 --- a/src/stores/db.ts +++ b/src/stores/db.ts @@ -13,7 +13,7 @@ export type Category = { name: string; emoji: string; } -export const useDBStore = defineStore('counter', { +export const useDBStore = defineStore('db', { state: () => { return { categories: categories.data, diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 0824e001..f6e72fd7 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -3,6 +3,7 @@ import AppSidePanel from '@/components/AppSideBanner/AppSideBanner.vue' import AppStatementCard from "@/components/AppStatementCard/AppStatementCard.vue"; import AppFilter from '@/components/AppFilter/AppFilter.vue' import { useDBStore } from "@/stores/db"; +import HeaderActions from "@/components/AppHeader/HeaderActions.vue"; const { statements } = useDBStore() @@ -13,6 +14,7 @@ const { statements } = useDBStore()
+
@@ -31,7 +33,7 @@ const { statements } = useDBStore() } &__header { - @apply pt-4 pb-4 + @apply pt-4 pb-4 flex items-center justify-between; } &__content { @@ -41,8 +43,6 @@ const { statements } = useDBStore() } @media (prefers-color-scheme: dark) { - .HomeView { - background-color: var(--color-dark); - } + @import "HomeView.dark"; } diff --git a/src/views/_HomeView.dark.scss b/src/views/_HomeView.dark.scss new file mode 100644 index 00000000..f08d1347 --- /dev/null +++ b/src/views/_HomeView.dark.scss @@ -0,0 +1,3 @@ +.HomeView { + background-color: var(--color-dark); +}