From f97f9b9792f8631818960f52e9c0bfb557b7caff Mon Sep 17 00:00:00 2001 From: RapidRik Date: Tue, 29 Oct 2024 09:51:45 +0100 Subject: [PATCH 1/2] feature/DarkModeStylingAdjustmentsSatis --- app/components/satis/card/component.css | 2 +- lib/satis/forms/concerns/file.rb | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/components/satis/card/component.css b/app/components/satis/card/component.css index a7b78e61..2861638c 100644 --- a/app/components/satis/card/component.css +++ b/app/components/satis/card/component.css @@ -1,5 +1,5 @@ .sts-card { - @apply bg-white h-full sm:rounded-lg sm:shadow dark:bg-gray-800 overflow-hidden; + @apply bg-white h-full sm:rounded-lg sm:shadow dark:bg-gray-800 overflow-hidden dark:text-gray-300; &__header { @apply px-4 py-5 sm:px-6 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300; diff --git a/lib/satis/forms/concerns/file.rb b/lib/satis/forms/concerns/file.rb index 3815d96a..0d2aad1f 100644 --- a/lib/satis/forms/concerns/file.rb +++ b/lib/satis/forms/concerns/file.rb @@ -18,7 +18,7 @@ def file_input(method, options = {}) tag.div(class: 'overflow-hidden relative inline-block -mb-2') do safe_join [ tag.button((options[:multiple] ? ct('choose_files') : ct('choose_file')), type: 'button', - class: 'bg-white py-3 px-4 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'), + class: 'bg-white py-3 px-4 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:bg-gray-800 dark:border-gray-300 dark:text-gray-300 dark:hover:bg-gray-200'), file_field(method, options.merge(class: 'w-full cursor-pointer absolute block opacity-0 inset-0', data: { 'satis-file-target': 'input' })) From 3a4be795fe5d21a1286476cc6a78bdfa8bb3926d Mon Sep 17 00:00:00 2001 From: RapidRik Date: Fri, 8 Nov 2024 12:01:58 +0100 Subject: [PATCH 2/2] Added styling for navigation component. --- app/assets/stylesheets/satis/application.css | 1 + app/components/satis/navigation/component.css | 22 +++++++++++++++++++ .../satis/navigation/component.html.slim | 11 ++++++++++ app/components/satis/navigation/component.rb | 18 +++++++++++++++ 4 files changed, 52 insertions(+) create mode 100644 app/components/satis/navigation/component.css create mode 100644 app/components/satis/navigation/component.html.slim create mode 100644 app/components/satis/navigation/component.rb diff --git a/app/assets/stylesheets/satis/application.css b/app/assets/stylesheets/satis/application.css index b275d79d..7bda33d7 100644 --- a/app/assets/stylesheets/satis/application.css +++ b/app/assets/stylesheets/satis/application.css @@ -16,6 +16,7 @@ @import '../../../components/satis/sidebar_menu/component.css'; @import '../../../components/satis/sidebar_menu_item/component.css'; @import '../../../components/satis/tabs/component.css'; +@import '../../../components/satis/navigation/component.css'; @import 'components/diffy.css'; @import 'components/form.css'; diff --git a/app/components/satis/navigation/component.css b/app/components/satis/navigation/component.css new file mode 100644 index 00000000..b4491669 --- /dev/null +++ b/app/components/satis/navigation/component.css @@ -0,0 +1,22 @@ +.navigation-form { + @apply flex bg-white w-2/6 rounded-md dark:bg-gray-800 shadow place-self-center border-2; +} + +form { + @apply w-full; +} + +.navigation-form .navigation-input input[type="text"] { + @apply rounded-md bg-white dark:bg-gray-800 w-full dark:text-gray-300 text-gray-700 border-gray-300 dark:border-gray-500; +} + +.result-item { + @apply py-2 dark:text-gray-300 px-3 dark:border-gray-600 text-gray-700 cursor-pointer border-b border-gray-200; +} + +.result-item:hover { + @apply bg-gray-100 dark:bg-gray-700; +} + + + diff --git a/app/components/satis/navigation/component.html.slim b/app/components/satis/navigation/component.html.slim new file mode 100644 index 00000000..f62f8c9b --- /dev/null +++ b/app/components/satis/navigation/component.html.slim @@ -0,0 +1,11 @@ +.navigation-form + = form_with url: '#', method: :get, remote: true, id: 'search-form' do + .navigation-input + input type="text" id="search-input" placeholder="Search..." + .test-result + .result-item Test Result 1 + .result-item Test Result 2 + .result-item Test Result 3 + .result-item Test Result 4 + .result-item Test Result 5 + .result-item Test Result 6 \ No newline at end of file diff --git a/app/components/satis/navigation/component.rb b/app/components/satis/navigation/component.rb new file mode 100644 index 00000000..da043b34 --- /dev/null +++ b/app/components/satis/navigation/component.rb @@ -0,0 +1,18 @@ +module Satis + module Navigation + class Component < Satis::ApplicationComponent + attr_reader :menu, :menu_options, :commands + + renders_many :items + + def initialize(menu, **options) + super + @menu = menu + @menu_options = options + @commands = [] + end + + + end + end +end