From 9fd68906677de0f7047963b051b68e433025f1a1 Mon Sep 17 00:00:00 2001 From: cpsdqs Date: Mon, 6 Aug 2018 08:01:00 +0200 Subject: [PATCH] Add dark mode [db] --- app/Http/Controllers/AccountController.php | 1 + app/Models/User.php | 3 +- app/helpers.php | 4 ++ .../2014_10_12_000000_create_users_table.php | 1 + public/images/logo-dark.svg | 2 + public/mix-manifest.json | 3 +- resources/assets/sass/app-dark.scss | 30 ++++++++++ .../sass/bootstrap-customizations/_card.scss | 4 ++ .../bootstrap-customizations/_footer.scss | 2 +- .../bootstrap-customizations/_navbar.scss | 2 +- .../bootstrap-customizations/_variables.scss | 57 +++++++++++++++++++ resources/views/auth/login.blade.php | 2 +- resources/views/auth/register.blade.php | 2 +- resources/views/layouts/app.blade.php | 2 +- resources/views/layouts/main-nav.blade.php | 4 +- .../views/profile/edit-account.blade.php | 5 ++ webpack.mix.js | 3 +- 17 files changed, 117 insertions(+), 10 deletions(-) create mode 100644 public/images/logo-dark.svg create mode 100644 resources/assets/sass/app-dark.scss diff --git a/app/Http/Controllers/AccountController.php b/app/Http/Controllers/AccountController.php index efbc27e..04be8ab 100644 --- a/app/Http/Controllers/AccountController.php +++ b/app/Http/Controllers/AccountController.php @@ -38,6 +38,7 @@ class AccountController extends Controller Rule::unique('users')->ignoreModel($user), ], 'new_password' => ['nullable', 'confirmed', VALI_PASSWORD], + 'dark_mode' => 'nullable', ]); if ($input->email != $user->email) { diff --git a/app/Models/User.php b/app/Models/User.php index d661bbe..fb28b3c 100644 --- a/app/Models/User.php +++ b/app/Models/User.php @@ -33,6 +33,7 @@ use MightyPork\Utils\Str; * @property string $email - unique, for login and social auth chaining * @property string $password - hashed pw * @property bool $confirmed - user e-mail is confirmed + * @property bool $dark_mode - user prefers dark mode * @property-read Proposal[]|Collection $proposals * @property-read Table[]|Collection $tables * @property-read OAuthIdentity[]|Collection $socialIdentities @@ -62,7 +63,7 @@ class User extends BaseModel implements * @var array */ protected $fillable = [ - 'name', 'title', 'email', 'password', 'bio', 'website', 'confirmed' + 'name', 'title', 'email', 'password', 'bio', 'website', 'confirmed', 'dark_mode' ]; /** diff --git a/app/helpers.php b/app/helpers.php index 178ffa1..00b3c92 100644 --- a/app/helpers.php +++ b/app/helpers.php @@ -32,6 +32,10 @@ function faker() { return $fac = Faker\Factory::create(); } +function dark_mode() { + return user() !== NULL && user()->dark_mode; +} + /** * Recursively expand validation rules * diff --git a/database/migrations/2014_10_12_000000_create_users_table.php b/database/migrations/2014_10_12_000000_create_users_table.php index e0e432f..8d64c31 100644 --- a/database/migrations/2014_10_12_000000_create_users_table.php +++ b/database/migrations/2014_10_12_000000_create_users_table.php @@ -23,6 +23,7 @@ class CreateUsersTable extends Migration $table->string('email')->unique(); // would have to be nullable if we supported login via providers that don't give us e-mail $table->string('password')->nullable(); // null if registered via provider and not set a pw yet $table->boolean('confirmed')->default(false); // set to 1 after e-mail is verified + $table->boolean('dark_mode')->default(false); $table->rememberToken(); }); } diff --git a/public/images/logo-dark.svg b/public/images/logo-dark.svg new file mode 100644 index 0000000..d7f4480 --- /dev/null +++ b/public/images/logo-dark.svg @@ -0,0 +1,2 @@ + + diff --git a/public/mix-manifest.json b/public/mix-manifest.json index 585e57f..c7fc012 100644 --- a/public/mix-manifest.json +++ b/public/mix-manifest.json @@ -1,4 +1,5 @@ { "/js/app.js": "/js/app.js", - "/css/app.css": "/css/app.css" + "/css/app.css": "/css/app.css", + "/css/app-dark.css": "/css/app-dark.css" } \ No newline at end of file diff --git a/resources/assets/sass/app-dark.scss b/resources/assets/sass/app-dark.scss new file mode 100644 index 0000000..89453ca --- /dev/null +++ b/resources/assets/sass/app-dark.scss @@ -0,0 +1,30 @@ +// Variables +$theme: dark; + +@import "bootstrap"; + +html { + overflow-y: scroll; +} + +@import "helpers"; +@import "fa-utils"; +@import "block-collapse"; +@import "form-help"; + +@import "bootstrap-customizations/paginate"; +@import "bootstrap-customizations/card"; +@import "bootstrap-customizations/tooltip"; +@import "bootstrap-customizations/navbar"; +@import "bootstrap-customizations/footer"; +@import "bootstrap-customizations/link"; +@import "bootstrap-customizations/border"; +@import "bootstrap-customizations/button"; +@import "bootstrap-customizations/responsive"; +@import "bootstrap-customizations/typography"; + +.bio-table { + td { + padding-top: dist(2); + } +} diff --git a/resources/assets/sass/bootstrap-customizations/_card.scss b/resources/assets/sass/bootstrap-customizations/_card.scss index 7587e02..368ba99 100644 --- a/resources/assets/sass/bootstrap-customizations/_card.scss +++ b/resources/assets/sass/bootstrap-customizations/_card.scss @@ -39,3 +39,7 @@ min-width: 1.5rem; text-align:center; } + +.card .auth-footer { + background-color: $body-bg; +} diff --git a/resources/assets/sass/bootstrap-customizations/_footer.scss b/resources/assets/sass/bootstrap-customizations/_footer.scss index eea3148..c41c569 100644 --- a/resources/assets/sass/bootstrap-customizations/_footer.scss +++ b/resources/assets/sass/bootstrap-customizations/_footer.scss @@ -2,5 +2,5 @@ .page-footer { font-size: 95%; background: $body-bg; - border-top: 2px dotted $gray-200; + border-top: 2px dotted $footer-separator-color; } diff --git a/resources/assets/sass/bootstrap-customizations/_navbar.scss b/resources/assets/sass/bootstrap-customizations/_navbar.scss index 622dbe2..7ba9c54 100644 --- a/resources/assets/sass/bootstrap-customizations/_navbar.scss +++ b/resources/assets/sass/bootstrap-customizations/_navbar.scss @@ -1,6 +1,6 @@ // layout tweaks .page-navbar { - background: white; + background: $navbar-bg; border-bottom: 1px solid $primary; box-shadow: 0 -3px 8px rgba(black, 1); diff --git a/resources/assets/sass/bootstrap-customizations/_variables.scss b/resources/assets/sass/bootstrap-customizations/_variables.scss index 91eb3c8..09a2d56 100644 --- a/resources/assets/sass/bootstrap-customizations/_variables.scss +++ b/resources/assets/sass/bootstrap-customizations/_variables.scss @@ -25,3 +25,60 @@ $tooltip-arrow-color: $tooltip-bg; $pagination-padding-y-sm: dist(1); $pagination-padding-x-sm: dist(3); + +$navbar-bg: white; + +$footer-separator-color: $gray-200; + +$theme: light !default; +@if $theme == dark { + // dark mode overrides + + $body-bg: $gray-900; + $body-color: $gray-100; + $text-muted: $gray-500; + $link-color: lighten($primary, 15%); + $link-hover-color: lighten($primary, 20%); + + $card-bg: $gray-800; + $list-group-bg: $gray-800; + $list-group-hover-bg: $gray-700; + $list-group-disabled-color: $gray-400; + $list-group-action-color: $gray-200; + $list-group-action-hover-color: $gray-200; + $list-group-action-active-bg: $gray-600; + $list-group-action-active-color: $gray-100; + + $tooltip-color: rgba($white, 0.9); + + $navbar-bg: lighten($gray-900, 2%); + $footer-separator-color: $gray-800; + + $close-color: $white; + + $input-bg: $gray-700; + $input-color: $gray-200; + $input-disabled-bg: $gray-900; + $input-border-color: $gray-600; + $input-focus-bg: $input-bg; + $input-focus-color: $input-color; + $input-group-addon-bg: $gray-800; + $input-group-addon-color: $input-color; + $input-group-addon-border-color: $input-border-color; + + $custom-select-color: $input-color; + $custom-select-bg: $input-bg; + $custom-select-disabled-bg: $input-disabled-bg; + $custom-select-indicator-color: $gray-300; + $custom-select-border-color: $input-border-color; + $custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23"); + + $dropdown-bg: $gray-700; + $dropdown-link-color: $gray-300; + $dropdown-link-hover-color: lighten($gray-300, 5%); + $dropdown-link-hover-bg: $gray-800; + $dropdown-link-disabled-color: $gray-500; + $dropdown-header-color: $gray-400; + + $border-color: $gray-600; +} diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php index 94659a6..42250f9 100644 --- a/resources/views/auth/login.blade.php +++ b/resources/views/auth/login.blade.php @@ -31,7 +31,7 @@ -
+
…or authenticate with diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php index 58fc83f..a0d686e 100644 --- a/resources/views/auth/register.blade.php +++ b/resources/views/auth/register.blade.php @@ -37,7 +37,7 @@
-
+
You can also register by logging in with Google, GitHub, diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index bd7b9e5..c1bee10 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -14,7 +14,7 @@ - + diff --git a/resources/views/layouts/main-nav.blade.php b/resources/views/layouts/main-nav.blade.php index 49de2af..415efad 100644 --- a/resources/views/layouts/main-nav.blade.php +++ b/resources/views/layouts/main-nav.blade.php @@ -1,9 +1,9 @@ {{-- Global navbar --}} -