diff --git a/app/assets/stylesheets/body.css.scss b/app/assets/stylesheets/body.css.scss index 49263359e..e9533898a 100644 --- a/app/assets/stylesheets/body.css.scss +++ b/app/assets/stylesheets/body.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'components/side_nav_dimensions'; +@import './components/side_nav_dimensions.css.scss'; body { margin: 0; diff --git a/app/assets/stylesheets/bootstrap-tour.css.scss b/app/assets/stylesheets/bootstrap-tour.css.scss index 2bd0e2382..1cd347280 100644 --- a/app/assets/stylesheets/bootstrap-tour.css.scss +++ b/app/assets/stylesheets/bootstrap-tour.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import './mixins.css.scss'; .btn { border: none; diff --git a/app/assets/stylesheets/campaigns/edit/page.css.scss b/app/assets/stylesheets/campaigns/edit/page.css.scss index e68e178ff..fdd7c5f78 100644 --- a/app/assets/stylesheets/campaigns/edit/page.css.scss +++ b/app/assets/stylesheets/campaigns/edit/page.css.scss @@ -1,7 +1,7 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'common/image_uploader'; -@import 'mixins'; +@import './common/image_uploader.css.scss'; +@import './mixins.css.scss'; #settings-modal { .field { diff --git a/app/assets/stylesheets/campaigns/index/page.css.scss b/app/assets/stylesheets/campaigns/index/page.css.scss index 77d57a43f..c452ad4b8 100644 --- a/app/assets/stylesheets/campaigns/index/page.css.scss +++ b/app/assets/stylesheets/campaigns/index/page.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; -@import 'common/fundraisers'; -@import 'campaigns/new/index'; +@import './mixins.css.scss'; +@import './common/fundraisers.css.scss'; +@import './campaigns/new/index.css.scss'; diff --git a/app/assets/stylesheets/campaigns/new/index.css.scss b/app/assets/stylesheets/campaigns/new/index.css.scss index 8fdd647cf..b903e2776 100644 --- a/app/assets/stylesheets/campaigns/new/index.css.scss +++ b/app/assets/stylesheets/campaigns/new/index.css.scss @@ -1,8 +1,8 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; -@import 'pikaday'; -@import 'common/image_uploader'; +@import './mixins.css.scss'; +@import './pikaday.css.scss'; +@import './common/image_uploader.css.scss'; .globalFooter { margin-top: 50px; diff --git a/app/assets/stylesheets/campaigns/peer_to_peer/page.css.scss b/app/assets/stylesheets/campaigns/peer_to_peer/page.css.scss index 768752fde..92938b9ff 100644 --- a/app/assets/stylesheets/campaigns/peer_to_peer/page.css.scss +++ b/app/assets/stylesheets/campaigns/peer_to_peer/page.css.scss @@ -1,13 +1,13 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; -@import 'components/q_and_a'; -@import 'components/timeline'; -@import 'components/type_ahead'; -@import 'components/simple_tabs'; -@import 'pikaday'; -@import 'common/image_uploader'; -@import '../common'; +@import './mixins.css.scss'; +@import './components/q_and_a.css.scss'; +@import './components/timeline.css.scss'; +@import './components/type_ahead.css.scss'; +@import './components/simple_tabs.css.scss'; +@import './pikaday.css.scss'; +@import './common/image_uploader.css.scss'; +@import './../common.css.scss'; body { padding: 0; diff --git a/app/assets/stylesheets/campaigns/show/page.css.scss b/app/assets/stylesheets/campaigns/show/page.css.scss index 48be8efe5..294ef156a 100644 --- a/app/assets/stylesheets/campaigns/show/page.css.scss +++ b/app/assets/stylesheets/campaigns/show/page.css.scss @@ -1,20 +1,20 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; -@import 'pikaday'; -@import 'bootstrap-tour'; -@import 'common/donate_button'; -@import 'common/editable'; -@import 'components/admin_top_nav'; -@import 'common/image_uploader'; -@import 'components/info_card'; -@import 'components/activity_feed'; -@import 'components/page_tabs'; -@import 'components/fixed_top_action'; -@import 'components/draggable'; -@import 'gift_levels'; -@import '../../nonprofits/donation_form/form'; -@import '../common'; +@import './mixins.css.scss'; +@import './pikaday.css.scss'; +@import './bootstrap-tour.css.scss'; +@import './common/donate_button.css.scss'; +@import './common/editable.css.scss'; +@import './components/admin_top_nav.css.scss'; +@import './common/image_uploader.css.scss'; +@import './components/info_card.css.scss'; +@import './components/activity_feed.css.scss'; +@import './components/page_tabs.css.scss'; +@import './components/fixed_top_action.css.scss'; +@import './components/draggable.css.scss'; +@import './gift_levels.css.scss'; +@import './../../nonprofits/donation_form/form.css.scss'; +@import './../common.css.scss'; .button--gift { font-size: 17px; diff --git a/app/assets/stylesheets/campaigns/supporters/index/page.css.scss b/app/assets/stylesheets/campaigns/supporters/index/page.css.scss index 83d4879a5..e9172421e 100644 --- a/app/assets/stylesheets/campaigns/supporters/index/page.css.scss +++ b/app/assets/stylesheets/campaigns/supporters/index/page.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; -@import 'components/pagination'; -@import 'components/page_tabs'; +@import './mixins.css.scss'; +@import './components/pagination.css.scss'; +@import './components/page_tabs.css.scss'; diff --git a/app/assets/stylesheets/common/branded_campaign_button.css.scss b/app/assets/stylesheets/common/branded_campaign_button.css.scss index b6ff4eac0..59c82c7ed 100644 --- a/app/assets/stylesheets/common/branded_campaign_button.css.scss +++ b/app/assets/stylesheets/common/branded_campaign_button.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; // campaign widget // (cw = campaign widget) diff --git a/app/assets/stylesheets/common/campaign_card.css.scss b/app/assets/stylesheets/common/campaign_card.css.scss index 1b0608f14..0b9975393 100644 --- a/app/assets/stylesheets/common/campaign_card.css.scss +++ b/app/assets/stylesheets/common/campaign_card.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; .campaign-card { text-align: center; diff --git a/app/assets/stylesheets/common/donate_button.css.scss b/app/assets/stylesheets/common/donate_button.css.scss index 5a54187d2..b361dec96 100644 --- a/app/assets/stylesheets/common/donate_button.css.scss +++ b/app/assets/stylesheets/common/donate_button.css.scss @@ -1,8 +1,8 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; -@import 'supporters/form'; -@import 'nonprofits/donation_form/title_row'; -@import 'nonprofits/donation_form/footer'; -@import 'nonprofits/donation_form/form'; // for styling the actual form -@import 'nonprofits/donation_form/show/index'; // for styling the layout on /donate +@import '../mixins.css.scss'; +@import '../supporters/form.css.scss'; +@import '../nonprofits/donation_form/title_row.css.scss'; +@import '../nonprofits/donation_form/footer.css.scss'; +@import '../nonprofits/donation_form/form.css.scss'; // for styling the actual form +@import '../nonprofits/donation_form/show/index.css.scss'; // for styling the layout on /donate diff --git a/app/assets/stylesheets/common/editable.css.scss b/app/assets/stylesheets/common/editable.css.scss index db9a4ff52..b28bd588a 100644 --- a/app/assets/stylesheets/common/editable.css.scss +++ b/app/assets/stylesheets/common/editable.css.scss @@ -1,6 +1,6 @@ /* # License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; .editable, .editable--readOnly { diff --git a/app/assets/stylesheets/common/fonts_special.css.scss b/app/assets/stylesheets/common/fonts_special.css.scss index f7d9f0810..9f2c14c56 100644 --- a/app/assets/stylesheets/common/fonts_special.css.scss +++ b/app/assets/stylesheets/common/fonts_special.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; .strong {font-weight: bold;} diff --git a/app/assets/stylesheets/common/fundraisers.css.scss b/app/assets/stylesheets/common/fundraisers.css.scss index 13ba1a1b2..03cf79b82 100644 --- a/app/assets/stylesheets/common/fundraisers.css.scss +++ b/app/assets/stylesheets/common/fundraisers.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; .fundraiser--active { background-color: rgba($manila, 0.5); diff --git a/app/assets/stylesheets/common/icons.css.scss b/app/assets/stylesheets/common/icons.css.scss index ee2def09e..2421c98d8 100644 --- a/app/assets/stylesheets/common/icons.css.scss +++ b/app/assets/stylesheets/common/icons.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; // for styling icons and UI related psuedo elements. diff --git a/app/assets/stylesheets/common/image_uploader.css.scss b/app/assets/stylesheets/common/image_uploader.css.scss index 94382138e..96fe62958 100644 --- a/app/assets/stylesheets/common/image_uploader.css.scss +++ b/app/assets/stylesheets/common/image_uploader.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; .image-upload { text-align: center; margin: 0 auto; diff --git a/app/assets/stylesheets/common/images.css.scss b/app/assets/stylesheets/common/images.css.scss index e2bbb8153..671114e3b 100644 --- a/app/assets/stylesheets/common/images.css.scss +++ b/app/assets/stylesheets/common/images.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; img { max-width: 100%; diff --git a/app/assets/stylesheets/common/layouts.css.scss b/app/assets/stylesheets/common/layouts.css.scss index 4b6e7bfd1..8d0a67b75 100644 --- a/app/assets/stylesheets/common/layouts.css.scss +++ b/app/assets/stylesheets/common/layouts.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; [class*=" col-"].floatr { clear: none; diff --git a/app/assets/stylesheets/common/media_queries.css.scss b/app/assets/stylesheets/common/media_queries.css.scss index c97902027..0eb0f055a 100644 --- a/app/assets/stylesheets/common/media_queries.css.scss +++ b/app/assets/stylesheets/common/media_queries.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; // query by max-width diff --git a/app/assets/stylesheets/common/minimal_vertically_center.css.scss b/app/assets/stylesheets/common/minimal_vertically_center.css.scss index 18914ad17..76395dee7 100644 --- a/app/assets/stylesheets/common/minimal_vertically_center.css.scss +++ b/app/assets/stylesheets/common/minimal_vertically_center.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; // used for minimal, single-purpose pages like the unsubscribe page diff --git a/app/assets/stylesheets/common/page.css.scss b/app/assets/stylesheets/common/page.css.scss index ad17d0cdc..5ee5816a5 100644 --- a/app/assets/stylesheets/common/page.css.scss +++ b/app/assets/stylesheets/common/page.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; .pageTitle { position: absolute; diff --git a/app/assets/stylesheets/common/promote_button.css.scss b/app/assets/stylesheets/common/promote_button.css.scss index c64a7d59d..80532dd6e 100644 --- a/app/assets/stylesheets/common/promote_button.css.scss +++ b/app/assets/stylesheets/common/promote_button.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; .promote-button { display: block; diff --git a/app/assets/stylesheets/common/states.css.scss b/app/assets/stylesheets/common/states.css.scss index d6ee0b10b..823838b31 100644 --- a/app/assets/stylesheets/common/states.css.scss +++ b/app/assets/stylesheets/common/states.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; .is-stuck { top: 0; diff --git a/app/assets/stylesheets/common/successes.css.scss b/app/assets/stylesheets/common/successes.css.scss index daea5e098..647b06761 100644 --- a/app/assets/stylesheets/common/successes.css.scss +++ b/app/assets/stylesheets/common/successes.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; .successes-section { diff --git a/app/assets/stylesheets/common/typography/base.css.scss b/app/assets/stylesheets/common/typography/base.css.scss index 140523be6..97f0cdc67 100644 --- a/app/assets/stylesheets/common/typography/base.css.scss +++ b/app/assets/stylesheets/common/typography/base.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../../mixins.css.scss'; // This file should'nt include any classes - // just HTML elements that are typographical. diff --git a/app/assets/stylesheets/common/typography/special.css.scss b/app/assets/stylesheets/common/typography/special.css.scss index bdf96fccf..f76b51915 100644 --- a/app/assets/stylesheets/common/typography/special.css.scss +++ b/app/assets/stylesheets/common/typography/special.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../../mixins.css.scss'; .strong { font-weight: bold; diff --git a/app/assets/stylesheets/common/utils.css.scss b/app/assets/stylesheets/common/utils.css.scss index 7b81175a3..d0bb63cbf 100644 --- a/app/assets/stylesheets/common/utils.css.scss +++ b/app/assets/stylesheets/common/utils.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; .hide {display: none; } .show {display: block;} diff --git a/app/assets/stylesheets/components/activity_feed.css.scss b/app/assets/stylesheets/components/activity_feed.css.scss index 89eed306f..4732c4db3 100644 --- a/app/assets/stylesheets/components/activity_feed.css.scss +++ b/app/assets/stylesheets/components/activity_feed.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; .activityFeed table, .activityFeed tr { diff --git a/app/assets/stylesheets/components/admin_sidebar.css.scss b/app/assets/stylesheets/components/admin_sidebar.css.scss index 1cc2403ff..6b2338a95 100644 --- a/app/assets/stylesheets/components/admin_sidebar.css.scss +++ b/app/assets/stylesheets/components/admin_sidebar.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; .adminSidebar-body { padding: 10px 15px; diff --git a/app/assets/stylesheets/components/announcement_bar.css.scss b/app/assets/stylesheets/components/announcement_bar.css.scss index 7a19aa4c6..4320862fc 100644 --- a/app/assets/stylesheets/components/announcement_bar.css.scss +++ b/app/assets/stylesheets/components/announcement_bar.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; @mixin announcementBar($bg) { display: none; diff --git a/app/assets/stylesheets/components/app_loading_bar.css.scss b/app/assets/stylesheets/components/app_loading_bar.css.scss index b662e92a7..3d27d4e53 100644 --- a/app/assets/stylesheets/components/app_loading_bar.css.scss +++ b/app/assets/stylesheets/components/app_loading_bar.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; @-webkit-keyframes progress-bar-stripes{ from{background-position:40px 0} diff --git a/app/assets/stylesheets/components/arrows.css.scss b/app/assets/stylesheets/components/arrows.css.scss index 52c73413b..5f4cb64d3 100644 --- a/app/assets/stylesheets/components/arrows.css.scss +++ b/app/assets/stylesheets/components/arrows.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; .sortArrows { @include noselect; diff --git a/app/assets/stylesheets/components/better_browser.css.scss b/app/assets/stylesheets/components/better_browser.css.scss index d8f5de7b1..df9ae32c1 100644 --- a/app/assets/stylesheets/components/better_browser.css.scss +++ b/app/assets/stylesheets/components/better_browser.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; #better-browser-message { position: fixed; diff --git a/app/assets/stylesheets/components/bulk_actions.css.scss b/app/assets/stylesheets/components/bulk_actions.css.scss index 34fa2b888..ede694e9a 100644 --- a/app/assets/stylesheets/components/bulk_actions.css.scss +++ b/app/assets/stylesheets/components/bulk_actions.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; .bulkActions-checkbox { display: inline-block; diff --git a/app/assets/stylesheets/components/buttons.css.scss b/app/assets/stylesheets/components/buttons.css.scss index 1d88d802b..66854909e 100644 --- a/app/assets/stylesheets/components/buttons.css.scss +++ b/app/assets/stylesheets/components/buttons.css.scss @@ -1,7 +1,7 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; -@import 'components/animations'; +@import '../mixins.css.scss'; +@import './animations.css.scss'; // don't add any more classes here diff --git a/app/assets/stylesheets/components/campaign_preview_small.css.scss b/app/assets/stylesheets/components/campaign_preview_small.css.scss index 2fd3c115a..b5c6674f6 100644 --- a/app/assets/stylesheets/components/campaign_preview_small.css.scss +++ b/app/assets/stylesheets/components/campaign_preview_small.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; .campaignPreview--small { padding: 15px; diff --git a/app/assets/stylesheets/components/cards.css.scss b/app/assets/stylesheets/components/cards.css.scss index 741e85f40..51eca663f 100755 --- a/app/assets/stylesheets/components/cards.css.scss +++ b/app/assets/stylesheets/components/cards.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; .cardForm { max-width: 380px; diff --git a/app/assets/stylesheets/components/carousel.css.scss b/app/assets/stylesheets/components/carousel.css.scss index 7438ae00b..1d3a8aead 100644 --- a/app/assets/stylesheets/components/carousel.css.scss +++ b/app/assets/stylesheets/components/carousel.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; .carousel { position: relative; diff --git a/app/assets/stylesheets/components/cc_pattern.css.scss b/app/assets/stylesheets/components/cc_pattern.css.scss index d8946cbe9..0b01b6a4c 100644 --- a/app/assets/stylesheets/components/cc_pattern.css.scss +++ b/app/assets/stylesheets/components/cc_pattern.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; .ccPattern { position: absolute; diff --git a/app/assets/stylesheets/components/container.css.scss b/app/assets/stylesheets/components/container.css.scss index 22b46bb71..fd5178eae 100644 --- a/app/assets/stylesheets/components/container.css.scss +++ b/app/assets/stylesheets/components/container.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; @mixin container { width: 100%; diff --git a/app/assets/stylesheets/components/decorative.css.scss b/app/assets/stylesheets/components/decorative.css.scss index 7aade8295..806529591 100644 --- a/app/assets/stylesheets/components/decorative.css.scss +++ b/app/assets/stylesheets/components/decorative.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; hr { border: 0; diff --git a/app/assets/stylesheets/components/event_preview_small.css.scss b/app/assets/stylesheets/components/event_preview_small.css.scss index feff9be01..a054d11ab 100644 --- a/app/assets/stylesheets/components/event_preview_small.css.scss +++ b/app/assets/stylesheets/components/event_preview_small.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; .eventPreview--small { position: relative; diff --git a/app/assets/stylesheets/components/fade_in.css.scss b/app/assets/stylesheets/components/fade_in.css.scss index 21587a31a..26b756cef 100644 --- a/app/assets/stylesheets/components/fade_in.css.scss +++ b/app/assets/stylesheets/components/fade_in.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; @mi diff --git a/app/assets/stylesheets/components/ff_modal.css.scss b/app/assets/stylesheets/components/ff_modal.css.scss index 2696b44d2..60003039b 100644 --- a/app/assets/stylesheets/components/ff_modal.css.scss +++ b/app/assets/stylesheets/components/ff_modal.css.scss @@ -85,7 +85,7 @@ Full license explanation at https://github.com/houdiniproject/houdini/blob/main/ [data-ff-modal-close-button]:before, .ff-modal-closeButton:before { content: ''; - background-image: url('ui_components/close.svg'); + // background-image: url('../../images/ui_components/close.svg'); background-size: 24px 23px; width: 24px; height: 23px; @@ -109,7 +109,7 @@ Full license explanation at https://github.com/houdiniproject/houdini/blob/main/ [data-ff-modal-close-button]:before, .ff-modal-closeButton:before { content: ''; - background-image: url('ui_components/close.svg'); + // background-image: url('../../images/ui_components/close.svg'); background-size: 24px 23px; width: 24px; height: 23px; diff --git a/app/assets/stylesheets/components/focal_point.css.scss b/app/assets/stylesheets/components/focal_point.css.scss index 2bf20c4a5..3fa8ca2ad 100644 --- a/app/assets/stylesheets/components/focal_point.css.scss +++ b/app/assets/stylesheets/components/focal_point.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; .focalPointPreview { position: relative; diff --git a/app/assets/stylesheets/components/footer.css.scss b/app/assets/stylesheets/components/footer.css.scss index aefbb2717..55237ca49 100644 --- a/app/assets/stylesheets/components/footer.css.scss +++ b/app/assets/stylesheets/components/footer.css.scss @@ -1,7 +1,7 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; -@import 'components/press_row'; +@import '../mixins.css.scss'; +@import './/press_row.css.scss'; .globalFooter--mosaic { background: $mosaic; diff --git a/app/assets/stylesheets/components/forms.css.scss b/app/assets/stylesheets/components/forms.css.scss index d314e0e29..0c57c1855 100644 --- a/app/assets/stylesheets/components/forms.css.scss +++ b/app/assets/stylesheets/components/forms.css.scss @@ -2,7 +2,7 @@ Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ // Errors and form statuses -@import 'mixins'; +@import '../mixins.css.scss'; form { margin: 0; diff --git a/app/assets/stylesheets/components/full_features.css.scss b/app/assets/stylesheets/components/full_features.css.scss index 44eb40281..3743e9a74 100644 --- a/app/assets/stylesheets/components/full_features.css.scss +++ b/app/assets/stylesheets/components/full_features.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; .fullFeatures .masonry-column > div { margin-bottom: 30px; diff --git a/app/assets/stylesheets/components/giving_indicator.css.scss b/app/assets/stylesheets/components/giving_indicator.css.scss index a352c1aa2..e456ab1c7 100644 --- a/app/assets/stylesheets/components/giving_indicator.css.scss +++ b/app/assets/stylesheets/components/giving_indicator.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; $indicator_size: 16px; $indicator_color: $dark-grass; diff --git a/app/assets/stylesheets/components/headers.css.scss b/app/assets/stylesheets/components/headers.css.scss index f19d18c67..20d716519 100644 --- a/app/assets/stylesheets/components/headers.css.scss +++ b/app/assets/stylesheets/components/headers.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; @mixin fundraiserHeader { width: 100%; diff --git a/app/assets/stylesheets/components/inputs.css.scss b/app/assets/stylesheets/components/inputs.css.scss index 4ead318b1..18808f1b3 100644 --- a/app/assets/stylesheets/components/inputs.css.scss +++ b/app/assets/stylesheets/components/inputs.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; @mixin basicInputs { input[type="text"], input, input[type="email"], input[type="number"], input[type="password"], input[type="tel"], select { @@ -241,7 +241,7 @@ input[type='radio']:checked + label:before { background-color: $bluegrass; } input[type='radio'].radio--both { - @extend input[type='radio']; + @extend input, [type='radio']; & + label { @include opacity(0.9); } diff --git a/app/assets/stylesheets/components/legend.css.scss b/app/assets/stylesheets/components/legend.css.scss index b0e141bc9..ea9bbd5b2 100644 --- a/app/assets/stylesheets/components/legend.css.scss +++ b/app/assets/stylesheets/components/legend.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; .legend > * { border: 1px solid white; diff --git a/app/assets/stylesheets/components/loading.css.scss b/app/assets/stylesheets/components/loading.css.scss index ef3a447bd..60b2cbb3e 100644 --- a/app/assets/stylesheets/components/loading.css.scss +++ b/app/assets/stylesheets/components/loading.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; .loading--overlay { position: relative; diff --git a/app/assets/stylesheets/components/modals.css.scss b/app/assets/stylesheets/components/modals.css.scss index 7460ecdbc..62f628a7a 100644 --- a/app/assets/stylesheets/components/modals.css.scss +++ b/app/assets/stylesheets/components/modals.css.scss @@ -1,7 +1,7 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; -@import 'components/ff_modal'; +@import '../mixins.css.scss'; +@import './/ff_modal.css.scss'; .modal{ position: fixed; diff --git a/app/assets/stylesheets/components/notification_alerts.css.scss b/app/assets/stylesheets/components/notification_alerts.css.scss index 5821e5f3c..693a230be 100644 --- a/app/assets/stylesheets/components/notification_alerts.css.scss +++ b/app/assets/stylesheets/components/notification_alerts.css.scss @@ -1,7 +1,7 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; -// @import '/assets/ff-core/notification/index.css' +@import '../mixins.css.scss'; +// @import './/assets/ff-core/notification/index.css.css.scss' $notice-red : lighten($red, 10); $notice-green : lighten($grass, 60); diff --git a/app/assets/stylesheets/components/npo_card.css.scss b/app/assets/stylesheets/components/npo_card.css.scss index ed387ec1b..70b88052a 100644 --- a/app/assets/stylesheets/components/npo_card.css.scss +++ b/app/assets/stylesheets/components/npo_card.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; .npoCard { @include transition(box-shadow 0.1s ease); diff --git a/app/assets/stylesheets/components/page_tabs.css.scss b/app/assets/stylesheets/components/page_tabs.css.scss index cb0b56aba..ad2eecef5 100644 --- a/app/assets/stylesheets/components/page_tabs.css.scss +++ b/app/assets/stylesheets/components/page_tabs.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; .pageTabs { position: absolute; diff --git a/app/assets/stylesheets/components/panels_layout.css.scss b/app/assets/stylesheets/components/panels_layout.css.scss index c152de459..9b284844d 100644 --- a/app/assets/stylesheets/components/panels_layout.css.scss +++ b/app/assets/stylesheets/components/panels_layout.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; html { height: 100%; diff --git a/app/assets/stylesheets/components/parsley.css.scss b/app/assets/stylesheets/components/parsley.css.scss index ed8ae372a..50b86502a 100644 --- a/app/assets/stylesheets/components/parsley.css.scss +++ b/app/assets/stylesheets/components/parsley.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; .parsley-error-list { padding: 4px; diff --git a/app/assets/stylesheets/components/pastel_boxes.css.scss b/app/assets/stylesheets/components/pastel_boxes.css.scss index bfffda8dc..f45baab63 100644 --- a/app/assets/stylesheets/components/pastel_boxes.css.scss +++ b/app/assets/stylesheets/components/pastel_boxes.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; @mixin pastelBox { border: 1px solid rgba(black, 0.03); diff --git a/app/assets/stylesheets/components/progress_bar.css.scss b/app/assets/stylesheets/components/progress_bar.css.scss index ac0605a55..876eee49a 100644 --- a/app/assets/stylesheets/components/progress_bar.css.scss +++ b/app/assets/stylesheets/components/progress_bar.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; @mixin progressBar { width: 100%; diff --git a/app/assets/stylesheets/components/q_and_a.css.scss b/app/assets/stylesheets/components/q_and_a.css.scss index 6e8a03924..b06008677 100644 --- a/app/assets/stylesheets/components/q_and_a.css.scss +++ b/app/assets/stylesheets/components/q_and_a.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'components/circle_text'; +@import './/circle_text.css.scss'; .question, .answer { diff --git a/app/assets/stylesheets/components/side_nav.css.scss b/app/assets/stylesheets/components/side_nav.css.scss index d43d53b87..5fc0ed464 100644 --- a/app/assets/stylesheets/components/side_nav.css.scss +++ b/app/assets/stylesheets/components/side_nav.css.scss @@ -1,7 +1,7 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; -@import 'components/side_nav_dimensions'; +@import '../mixins.css.scss'; +@import './/side_nav_dimensions.css.scss'; $sideNav-spacing: 8px 15px; diff --git a/app/assets/stylesheets/components/simple_tabs.css.scss b/app/assets/stylesheets/components/simple_tabs.css.scss index 8bb5097ca..e2a942f09 100644 --- a/app/assets/stylesheets/components/simple_tabs.css.scss +++ b/app/assets/stylesheets/components/simple_tabs.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; .simpleTabs-tab { background: $fog; diff --git a/app/assets/stylesheets/components/tags.css.scss b/app/assets/stylesheets/components/tags.css.scss index 4740bde0e..80e3e0c7d 100644 --- a/app/assets/stylesheets/components/tags.css.scss +++ b/app/assets/stylesheets/components/tags.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; $tag_color: #ece6e0; diff --git a/app/assets/stylesheets/components/ticket_button.css.scss b/app/assets/stylesheets/components/ticket_button.css.scss index ef2c6803c..c0f406a44 100644 --- a/app/assets/stylesheets/components/ticket_button.css.scss +++ b/app/assets/stylesheets/components/ticket_button.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; .getTickets { width: 100%; diff --git a/app/assets/stylesheets/components/todos.css.scss b/app/assets/stylesheets/components/todos.css.scss index d06244a02..fdd42e272 100644 --- a/app/assets/stylesheets/components/todos.css.scss +++ b/app/assets/stylesheets/components/todos.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; .todos { background: #f8f8f8; } diff --git a/app/assets/stylesheets/components/toggle_buttons.css.scss b/app/assets/stylesheets/components/toggle_buttons.css.scss index 2265c900c..e89b5ebcf 100644 --- a/app/assets/stylesheets/components/toggle_buttons.css.scss +++ b/app/assets/stylesheets/components/toggle_buttons.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; button[toggle] { padding: 0; diff --git a/app/assets/stylesheets/components/toggle_q_a.css.scss b/app/assets/stylesheets/components/toggle_q_a.css.scss index 7d555d0a6..cb6d28a66 100644 --- a/app/assets/stylesheets/components/toggle_q_a.css.scss +++ b/app/assets/stylesheets/components/toggle_q_a.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; .toggleQA-toggle { width: 100%; diff --git a/app/assets/stylesheets/components/wizard_index.css.scss b/app/assets/stylesheets/components/wizard_index.css.scss index 00e3a8435..40ab12627 100644 --- a/app/assets/stylesheets/components/wizard_index.css.scss +++ b/app/assets/stylesheets/components/wizard_index.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../mixins.css.scss'; $chevron_height: 34px; diff --git a/app/assets/stylesheets/coupons/page.css.scss b/app/assets/stylesheets/coupons/page.css.scss index 9174bcbbe..bf1a9e01e 100644 --- a/app/assets/stylesheets/coupons/page.css.scss +++ b/app/assets/stylesheets/coupons/page.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import './mixins.css.scss'; body { padding: 0; diff --git a/app/assets/stylesheets/events/index/page.css.scss b/app/assets/stylesheets/events/index/page.css.scss index 2e505ad6a..d7a0b7afa 100644 --- a/app/assets/stylesheets/events/index/page.css.scss +++ b/app/assets/stylesheets/events/index/page.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; -@import 'common/fundraisers'; -@import 'events/new/index'; +@import './mixins.css.scss'; +@import './common/fundraisers.css.scss'; +@import './events/new/index.css.scss'; diff --git a/app/assets/stylesheets/events/listing.css.scss b/app/assets/stylesheets/events/listing.css.scss index 327c27eca..775f34902 100644 --- a/app/assets/stylesheets/events/listing.css.scss +++ b/app/assets/stylesheets/events/listing.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import './mixins.css.scss'; .events { text-align: left; diff --git a/app/assets/stylesheets/events/new/index.css.scss b/app/assets/stylesheets/events/new/index.css.scss index 05fdc6951..f960cc8ca 100644 --- a/app/assets/stylesheets/events/new/index.css.scss +++ b/app/assets/stylesheets/events/new/index.css.scss @@ -1,8 +1,8 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'pikaday'; -@import 'common/image_uploader'; -@import 'mixins'; +@import './pikaday.css.scss'; +@import './common/image_uploader.css.scss'; +@import './mixins.css.scss'; .dates-fields { margin: 15px auto 0 auto; diff --git a/app/assets/stylesheets/events/show/page.css.scss b/app/assets/stylesheets/events/show/page.css.scss index 5fde689a6..5952be909 100644 --- a/app/assets/stylesheets/events/show/page.css.scss +++ b/app/assets/stylesheets/events/show/page.css.scss @@ -1,22 +1,22 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'pikaday'; -@import 'mixins'; -@import 'bootstrap-tour'; +@import './pikaday.css.scss'; +@import './mixins.css.scss'; +@import './bootstrap-tour.css.scss'; -@import 'common/image_uploader'; -@import 'components/activity_feed'; -@import 'components/admin_top_nav'; -@import 'common/editable'; -@import 'common/donate_button'; -@import 'common/fundraiser/metrics'; +@import './common/image_uploader.css.scss'; +@import './components/activity_feed.css.scss'; +@import './components/admin_top_nav.css.scss'; +@import './common/editable.css.scss'; +@import './common/donate_button.css.scss'; +@import './common/fundraiser/metrics.css.scss'; -@import 'components/info_card'; -@import 'components/page_tabs'; -@import 'components/ticket_button'; -@import 'events/show/settings'; -@import 'components/fixed_top_action'; -@import 'components/draggable'; +@import './components/info_card.css.scss'; +@import './components/page_tabs.css.scss'; +@import './components/ticket_button.css.scss'; +@import './events/show/settings.css.scss'; +@import './components/fixed_top_action.css.scss'; +@import './components/draggable.css.scss'; .globalFooter { margin-top: 40px; diff --git a/app/assets/stylesheets/events/stats/page.css.scss b/app/assets/stylesheets/events/stats/page.css.scss index 8fc784b05..aaf17b16f 100644 --- a/app/assets/stylesheets/events/stats/page.css.scss +++ b/app/assets/stylesheets/events/stats/page.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import './mixins.css.scss'; html { height: 100%; } diff --git a/app/assets/stylesheets/experiment/global/dashboard.css b/app/assets/stylesheets/experiment/global/dashboard.css index ba357de22..545a43f4d 100644 --- a/app/assets/stylesheets/experiment/global/dashboard.css +++ b/app/assets/stylesheets/experiment/global/dashboard.css @@ -1,6 +1,6 @@ /* License: LGPL-3.0-or-later */ -@import 'ff-dashboard'; -@import './colors.css'; +@import './ff-dashboard.css.scss'; +@import '././colors.css.css.scss'; [data-ff-dashboard-header] { background: white; diff --git a/app/assets/stylesheets/experiment/global/modal.css b/app/assets/stylesheets/experiment/global/modal.css index dde3476cb..b14ff493a 100644 --- a/app/assets/stylesheets/experiment/global/modal.css +++ b/app/assets/stylesheets/experiment/global/modal.css @@ -1,5 +1,5 @@ /* License: LGPL-3.0-or-later */ -@import 'flimflam/ui/modal/index.css'; /* npm */ +@import './flimflam/ui/modal/index.css.css.scss'; /* npm */ [data-ff-modal-backdrop] { z-index: 2; diff --git a/app/assets/stylesheets/experiment/global/page.css b/app/assets/stylesheets/experiment/global/page.css index 093895311..04c672980 100644 --- a/app/assets/stylesheets/experiment/global/page.css +++ b/app/assets/stylesheets/experiment/global/page.css @@ -1,22 +1,22 @@ /* License: LGPL-3.0-or-later */ -@import 'commons.css'; /* npm */ -@import 'colors.css'; /* contains variables */ -@import 'shadows.css'; /* contains variables */ -/*@import 'typography.css';*/ -@import 'icons.css'; -@import 'containers.css'; -@import 'buttons.css'; -@import 'decorative.css'; -@import 'form-elements.css'; -@import 'modal.css'; -@import 'notification.css'; -@import 'confirmation.css'; -@import 'wizard.css'; -@import 'tooltip.css'; -@import 'tabswap.css'; -@import 'utils.css'; -@import 'loader.css'; -@import 'pre.css'; +@import './commons.css.css.scss'; /* npm */ +@import './colors.css.css.scss'; /* contains variables */ +@import './shadows.css.css.scss'; /* contains variables */ +/*@import './typography.css.css.scss';*/ +@import './icons.css.css.scss'; +@import './containers.css.css.scss'; +@import './buttons.css.css.scss'; +@import './decorative.css.css.scss'; +@import './form-elements.css.css.scss'; +@import './modal.css.css.scss'; +@import './notification.css.css.scss'; +@import './confirmation.css.css.scss'; +@import './wizard.css.css.scss'; +@import './tooltip.css.css.scss'; +@import './tabswap.css.css.scss'; +@import './utils.css.css.scss'; +@import './loader.css.css.scss'; +@import './pre.css.css.scss'; /* add to commons */ @media (max-width: 30rem) { diff --git a/app/assets/stylesheets/experiment/global/tabswap.css b/app/assets/stylesheets/experiment/global/tabswap.css index 2fe7823d4..f87c3281d 100644 --- a/app/assets/stylesheets/experiment/global/tabswap.css +++ b/app/assets/stylesheets/experiment/global/tabswap.css @@ -1,5 +1,5 @@ /* License: LGPL-3.0-or-later */ -@import 'flimflam/ui/tabswap/index.css'; /* npm */ +@import './flimflam/ui/tabswap/index.css.css.scss'; /* npm */ [data-ff-tabswap-labels] { border-bottom: 2px solid var(--grey-4); diff --git a/app/assets/stylesheets/experiment/global/tooltip.css b/app/assets/stylesheets/experiment/global/tooltip.css index 76f320c19..a89022aa6 100644 --- a/app/assets/stylesheets/experiment/global/tooltip.css +++ b/app/assets/stylesheets/experiment/global/tooltip.css @@ -1,5 +1,5 @@ /* License: LGPL-3.0-or-later */ -@import 'data-tooltip'; /* npm */ +@import './data-tooltip.css.scss'; /* npm */ [data-ff-field] { position: relative; } diff --git a/app/assets/stylesheets/explore/page.css.scss b/app/assets/stylesheets/explore/page.css.scss index 29813bce0..3d4c6c827 100644 --- a/app/assets/stylesheets/explore/page.css.scss +++ b/app/assets/stylesheets/explore/page.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import './mixins.css.scss'; body { padding: 0; diff --git a/app/assets/stylesheets/global.css.scss b/app/assets/stylesheets/global.css.scss index 21ebaa37b..97f8d052d 100644 --- a/app/assets/stylesheets/global.css.scss +++ b/app/assets/stylesheets/global.css.scss @@ -1,48 +1,48 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; -@import 'resets'; -@import 'common/typography/base'; -@import 'common/typography/special'; +@import './mixins.css.scss'; +@import './resets.css.scss'; +@import './common/typography/base.css.scss'; +@import './common/typography/special.css.scss'; -@import 'components/container'; -@import 'body'; -@import 'components/buttons'; +@import './components/container.css.scss'; +@import './body.css.scss'; +@import './components/buttons.css.scss'; -@import 'common/images'; +@import './common/images.css.scss'; -@import 'components/headers'; -@import 'components/side_nav'; +@import './components/headers.css.scss'; +@import './components/side_nav.css.scss'; -@import 'components/footer'; -@import 'common/layouts'; -@import 'common/page'; -@import 'common/utils'; -@import 'common/states'; -@import 'common/icons'; +@import './components/footer.css.scss'; +@import './common/layouts.css.scss'; +@import './common/page.css.scss'; +@import './common/utils.css.scss'; +@import './common/states.css.scss'; +@import './common/icons.css.scss'; -@import 'components/announcement_bar'; -@import 'components/notification_alerts'; -@import 'components/forms'; -@import 'components/modals'; -@import 'components/inputs'; -@import 'components/wizard_index'; -@import 'components/decorative'; -@import 'components/progress_bar'; -@import 'components/better_browser'; -@import 'components/parsley'; -@import 'components/tables'; -@import 'components/arrows'; -@import 'components/cards'; -@import 'components/pastel_boxes'; -@import 'components/full_screen_loading'; -@import 'components/loading'; -@import 'components/tooltips'; -@import 'components/top_nav'; +@import './components/announcement_bar.css.scss'; +@import './components/notification_alerts.css.scss'; +@import './components/forms.css.scss'; +@import './components/modals.css.scss'; +@import './components/inputs.css.scss'; +@import './components/wizard_index.css.scss'; +@import './components/decorative.css.scss'; +@import './components/progress_bar.css.scss'; +@import './components/better_browser.css.scss'; +@import './components/parsley.css.scss'; +@import './components/tables.css.scss'; +@import './components/arrows.css.scss'; +@import './components/cards.css.scss'; +@import './components/pastel_boxes.css.scss'; +@import './components/full_screen_loading.css.scss'; +@import './components/loading.css.scss'; +@import './components/tooltips.css.scss'; +@import './components/top_nav.css.scss'; -@import 'common/media_queries'; -@import 'common/z_indices'; -@import 'common/ios_hack'; -@import 'common/minimal'; +@import './common/media_queries.css.scss'; +@import './common/z_indices.css.scss'; +@import './common/ios_hack.scss'; +@import './common/minimal.css.scss'; -@import 'common/focusable' \ No newline at end of file +@import './common/_focusable.scss' \ No newline at end of file diff --git a/app/assets/stylesheets/mixins.css.scss b/app/assets/stylesheets/mixins.css.scss index aaf8e8f3b..ea0174547 100644 --- a/app/assets/stylesheets/mixins.css.scss +++ b/app/assets/stylesheets/mixins.css.scss @@ -1,7 +1,7 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'common/colors'; -@import 'common/backgrounds'; +@import '././common/colors.css.scss'; +@import '././common/backgrounds.css.scss'; // COMMON EFFECTS: $cubic_bevier: cubic-bezier(.5,1.2,.6,1); @@ -248,11 +248,12 @@ $cubic_bevier: cubic-bezier(.5,1.2,.6,1); @mixin gradient($dir, $from, $to) { $ie-hex-from: ie-hex-str($from); $ie-hex-to: ie-hex-str($to); - background-image: -webkit-linear-gradient($dir,$from,$to); background-image: -moz-linear-gradient($dir,$from,$to); background-image: -ms-linear-gradient($dir,$from,$to); background-image: -o-linear-gradient($dir,$from,$to); background-image: linear-gradient($dir,$from,$to); + // changing this one to be the last one of the list worked for the donation wizard index, not sure why + background-image: -webkit-linear-gradient($dir,$from,$to); // For IE7-9: $gradientType: 0; @if $dir == 'left' { $gradientType: 1;} diff --git a/app/assets/stylesheets/nonprofits/btn/page.css.scss b/app/assets/stylesheets/nonprofits/btn/page.css.scss index 0f7abcfaa..b7bedfe9a 100644 --- a/app/assets/stylesheets/nonprofits/btn/page.css.scss +++ b/app/assets/stylesheets/nonprofits/btn/page.css.scss @@ -1,7 +1,7 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; -@import 'components/animations'; +@import './mixins.css.scss'; +@import './components/animations.css.scss'; @include keyframes(popUp) { 0% { @include transform(translateY(80px)); } diff --git a/app/assets/stylesheets/nonprofits/button/page.css.scss b/app/assets/stylesheets/nonprofits/button/page.css.scss index bd1851469..1f6b565d3 100644 --- a/app/assets/stylesheets/nonprofits/button/page.css.scss +++ b/app/assets/stylesheets/nonprofits/button/page.css.scss @@ -1,11 +1,11 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; -@import 'nonprofits/btn/page'; -@import 'components/page_tabs'; -@import 'components/steps_menu'; -@import 'components/help_box'; -@import 'components/animations'; +@import './mixins.css.scss'; +@import './nonprofits/btn/page.css.scss'; +@import './components/page_tabs.css.scss'; +@import './components/steps_menu.css.scss'; +@import './components/help_box.css.scss'; +@import './components/animations.css.scss'; .stepsMenu { margin-top: 15px; diff --git a/app/assets/stylesheets/nonprofits/dashboard/page.css.scss b/app/assets/stylesheets/nonprofits/dashboard/page.css.scss index 76585ea5e..5b5eb1b8e 100644 --- a/app/assets/stylesheets/nonprofits/dashboard/page.css.scss +++ b/app/assets/stylesheets/nonprofits/dashboard/page.css.scss @@ -1,15 +1,15 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; -@import 'bootstrap-tour'; -@import 'components/activity_feed'; -@import 'components/event_preview_small'; -@import 'campaigns/new/index'; -@import 'events/new/index'; -@import 'components/todos'; -@import 'components/nonprofit_bank_accounts'; -@import 'components/google_maps'; -@import 'components/info_card'; +@import './mixins.css.scss'; +@import './bootstrap-tour.css.scss'; +@import './components/activity_feed.css.scss'; +@import './components/event_preview_small.css.scss'; +@import './campaigns/new/index.css.scss'; +@import './events/new/index.css.scss'; +@import './components/todos.css.scss'; +@import './components/nonprofit_bank_accounts.css.scss'; +@import './components/google_maps.css.scss'; +@import './components/info_card.css.scss'; .globalFooter { margin-top: 40px; diff --git a/app/assets/stylesheets/nonprofits/donate/page.css.scss b/app/assets/stylesheets/nonprofits/donate/page.css.scss index 8ae433615..d29691f98 100644 --- a/app/assets/stylesheets/nonprofits/donate/page.css.scss +++ b/app/assets/stylesheets/nonprofits/donate/page.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'common/donate_button'; +@import '../../common/donate_button.css.scss'; body#donate { background-color: transparent; diff --git a/app/assets/stylesheets/nonprofits/donation_form/footer.css.scss b/app/assets/stylesheets/nonprofits/donation_form/footer.css.scss index ac1461612..a15df5054 100644 --- a/app/assets/stylesheets/nonprofits/donation_form/footer.css.scss +++ b/app/assets/stylesheets/nonprofits/donation_form/footer.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../../mixins.css.scss'; .donateForm-footer { background: $fog; diff --git a/app/assets/stylesheets/nonprofits/donation_form/form.css.scss b/app/assets/stylesheets/nonprofits/donation_form/form.css.scss index 76725de3f..7c6866ed5 100644 --- a/app/assets/stylesheets/nonprofits/donation_form/form.css.scss +++ b/app/assets/stylesheets/nonprofits/donation_form/form.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../../mixins.css.scss'; $mint-milk : #E7F3ED; diff --git a/app/assets/stylesheets/nonprofits/donation_form/show/index.css.scss b/app/assets/stylesheets/nonprofits/donation_form/show/index.css.scss index 30fd95e52..6d2bb85b7 100644 --- a/app/assets/stylesheets/nonprofits/donation_form/show/index.css.scss +++ b/app/assets/stylesheets/nonprofits/donation_form/show/index.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../../../mixins.css.scss'; $width: 400px; // same as .modal.skinny diff --git a/app/assets/stylesheets/nonprofits/donation_form/title_row.css.scss b/app/assets/stylesheets/nonprofits/donation_form/title_row.css.scss index bf678e8c0..dfe5e6aa7 100644 --- a/app/assets/stylesheets/nonprofits/donation_form/title_row.css.scss +++ b/app/assets/stylesheets/nonprofits/donation_form/title_row.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import '../../mixins.css.scss'; .titleRow { padding: 15px 15px 10px 15px; diff --git a/app/assets/stylesheets/nonprofits/payments/index/filter_panel.css.scss b/app/assets/stylesheets/nonprofits/payments/index/filter_panel.css.scss index 8173b6e04..49c035cde 100644 --- a/app/assets/stylesheets/nonprofits/payments/index/filter_panel.css.scss +++ b/app/assets/stylesheets/nonprofits/payments/index/filter_panel.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import './mixins.css.scss'; .filterPanel-section .field { diff --git a/app/assets/stylesheets/nonprofits/payments/index/main_panel.css.scss b/app/assets/stylesheets/nonprofits/payments/index/main_panel.css.scss index 2b212b52d..64f210d00 100644 --- a/app/assets/stylesheets/nonprofits/payments/index/main_panel.css.scss +++ b/app/assets/stylesheets/nonprofits/payments/index/main_panel.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import './mixins.css.scss'; .mainPanel td:last-of-type { @include ellipsis; diff --git a/app/assets/stylesheets/nonprofits/payments/index/page.css.scss b/app/assets/stylesheets/nonprofits/payments/index/page.css.scss index 520eb7861..62c1793e0 100644 --- a/app/assets/stylesheets/nonprofits/payments/index/page.css.scss +++ b/app/assets/stylesheets/nonprofits/payments/index/page.css.scss @@ -1,13 +1,13 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; -@import 'pikaday'; -@import 'bootstrap-tour'; -@import 'components/pagination'; -@import './main_panel'; -@import 'components/page_tabs'; -@import 'components/panels_layout'; -@import 'components/tables/filtering/meta_status'; +@import './mixins.css.scss'; +@import './pikaday.css.scss'; +@import './bootstrap-tour.css.scss'; +@import './components/pagination.css.scss'; +@import '././main_panel.css.scss'; +@import './components/page_tabs.css.scss'; +@import './components/panels_layout.css.scss'; +@import './components/tables/filtering/meta_status.css.scss'; .panelsLayout.is-showingSidePanel { .mainPanel td:nth-of-type(5), diff --git a/app/assets/stylesheets/nonprofits/payouts/index/page.css.scss b/app/assets/stylesheets/nonprofits/payouts/index/page.css.scss index 687eca36f..ac6fc0cae 100644 --- a/app/assets/stylesheets/nonprofits/payouts/index/page.css.scss +++ b/app/assets/stylesheets/nonprofits/payouts/index/page.css.scss @@ -1,11 +1,11 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; -@import 'pikaday'; -@import 'components/page_tabs'; -@import 'components/nonprofit_bank_accounts'; -@import 'components/todos'; -@import 'components/identity_verification'; +@import './mixins.css.scss'; +@import './pikaday.css.scss'; +@import './components/page_tabs.css.scss'; +@import './components/nonprofit_bank_accounts.css.scss'; +@import './components/todos.css.scss'; +@import './components/identity_verification.css.scss'; .payout-history .succeeded { color: $bluegrass; diff --git a/app/assets/stylesheets/nonprofits/recurring_donations/index/page.css.scss b/app/assets/stylesheets/nonprofits/recurring_donations/index/page.css.scss index f728b6f1e..2e8c5c2ed 100644 --- a/app/assets/stylesheets/nonprofits/recurring_donations/index/page.css.scss +++ b/app/assets/stylesheets/nonprofits/recurring_donations/index/page.css.scss @@ -1,14 +1,14 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; -@import 'recurring_donations/modal'; -@import 'recurring_donations/edit'; -@import 'pikaday'; -@import 'supporters/form'; -@import 'bootstrap-tour'; -@import 'components/page_tabs'; -@import 'components/pagination'; -@import 'components/panels_layout'; +@import './mixins.css.scss'; +@import './recurring_donations/modal.css.scss'; +@import './recurring_donations/edit.css.scss'; +@import './pikaday.css.scss'; +@import './supporters/form.css.scss'; +@import './bootstrap-tour.css.scss'; +@import './components/page_tabs.css.scss'; +@import './components/pagination.css.scss'; +@import './components/panels_layout.css.scss'; .sidePanel, .panelsLayout.is-showingSidePanel .mainPanel { diff --git a/app/assets/stylesheets/nonprofits/show/page.css.scss b/app/assets/stylesheets/nonprofits/show/page.css.scss index 72a09602e..ca94bde2a 100644 --- a/app/assets/stylesheets/nonprofits/show/page.css.scss +++ b/app/assets/stylesheets/nonprofits/show/page.css.scss @@ -1,24 +1,24 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; -@import 'bootstrap-tour'; +@import './mixins.css.scss'; +@import './bootstrap-tour.css.scss'; -@import 'campaigns/new/index'; -@import 'common/donate_button'; -@import 'common/campaign_card'; -@import 'common/editable'; -@import 'events/new/index'; -@import 'events/listing'; -@import 'components/admin_sidebar'; -@import 'components/admin_top_nav'; -@import 'common/image_uploader'; -@import 'components/activity_feed'; -@import 'components/carousel'; -@import 'components/todos'; -@import 'components/info_card'; -@import 'components/fixed_top_action'; -@import './settings_modal'; -@import '../donation_form/form'; +@import './campaigns/new/index.css.scss'; +@import './common/donate_button.css.scss'; +@import './common/campaign_card.css.scss'; +@import './common/editable.css.scss'; +@import './events/new/index.css.scss'; +@import './events/listing.css.scss'; +@import './components/admin_sidebar.css.scss'; +@import './components/admin_top_nav.css.scss'; +@import './common/image_uploader.css.scss'; +@import './components/activity_feed.css.scss'; +@import './components/carousel.css.scss'; +@import './components/todos.css.scss'; +@import './components/info_card.css.scss'; +@import './components/fixed_top_action.css.scss'; +@import '././settings_modal.css.scss'; +@import './../donation_form/form.css.scss'; .globalFooter { margin-top: 40px; diff --git a/app/assets/stylesheets/nonprofits/supporters/custom_fields.css.scss b/app/assets/stylesheets/nonprofits/supporters/custom_fields.css.scss index f4474c5cd..bb4460412 100644 --- a/app/assets/stylesheets/nonprofits/supporters/custom_fields.css.scss +++ b/app/assets/stylesheets/nonprofits/supporters/custom_fields.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import './mixins.css.scss'; button[toggle='remove'] { @include transform(translateY(3px)); diff --git a/app/assets/stylesheets/nonprofits/supporters/index/page.css.scss b/app/assets/stylesheets/nonprofits/supporters/index/page.css.scss index 23c975b71..e8b75a021 100644 --- a/app/assets/stylesheets/nonprofits/supporters/index/page.css.scss +++ b/app/assets/stylesheets/nonprofits/supporters/index/page.css.scss @@ -1,21 +1,21 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; -@import 'components/pagination'; -@import 'supporters/form'; -@import 'pikaday'; -@import 'components/panels_layout'; -@import 'side_panel'; -@import 'components/tags'; -@import 'components/bulk_actions'; -@import 'components/page_tabs'; -@import 'components/toggle_buttons'; -@import 'components/drop_down'; -@import 'components/google_maps'; -@import 'common/editable'; -@import 'nonprofits/supporters/custom_fields'; -@import 'components/tables/filtering/meta_status'; -@import 'bootstrap-tour'; +@import './mixins.css.scss'; +@import './components/pagination.css.scss'; +@import './supporters/form.css.scss'; +@import './pikaday.css.scss'; +@import './components/panels_layout.css.scss'; +@import './side_panel.css.scss'; +@import './components/tags.css.scss'; +@import './components/bulk_actions.css.scss'; +@import './components/page_tabs.css.scss'; +@import './components/toggle_buttons.css.scss'; +@import './components/drop_down.css.scss'; +@import './components/google_maps.css.scss'; +@import './common/editable.css.scss'; +@import './nonprofits/supporters/custom_fields.css.scss'; +@import './components/tables/filtering/meta_status.css.scss'; +@import './bootstrap-tour.css.scss'; .supportersMap { border: 2px solid rgba(black, 0.2); diff --git a/app/assets/stylesheets/nonprofits/supporters/index/side_panel.css.scss b/app/assets/stylesheets/nonprofits/supporters/index/side_panel.css.scss index b9dbeae59..55dcc8049 100644 --- a/app/assets/stylesheets/nonprofits/supporters/index/side_panel.css.scss +++ b/app/assets/stylesheets/nonprofits/supporters/index/side_panel.css.scss @@ -1,7 +1,7 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; -@import 'timeline'; +@import './mixins.css.scss'; +@import './timeline.css.scss'; .sidePanel-rightSide { width: 65%; diff --git a/app/assets/stylesheets/nonprofits/supporters/index/timeline.css.scss b/app/assets/stylesheets/nonprofits/supporters/index/timeline.css.scss index 24b85ffa1..01146fbd3 100644 --- a/app/assets/stylesheets/nonprofits/supporters/index/timeline.css.scss +++ b/app/assets/stylesheets/nonprofits/supporters/index/timeline.css.scss @@ -1,6 +1,6 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; +@import './mixins.css.scss'; ul.timeline-activities { margin: 0; diff --git a/app/assets/stylesheets/profiles/show/page.css.scss b/app/assets/stylesheets/profiles/show/page.css.scss index ccf5ccc17..0949ea39d 100644 --- a/app/assets/stylesheets/profiles/show/page.css.scss +++ b/app/assets/stylesheets/profiles/show/page.css.scss @@ -1,9 +1,9 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; -@import 'components/page_tabs'; -@import 'components/tags'; -@import 'common/fundraisers'; +@import './mixins.css.scss'; +@import './components/page_tabs.css.scss'; +@import './components/tags.css.scss'; +@import './common/fundraisers.css.scss'; .donorProfileHeader { background: lighten($grey, 40); diff --git a/app/assets/stylesheets/recurring_donations/edit.css.scss b/app/assets/stylesheets/recurring_donations/edit.css.scss index b83948b6c..1c2fb1050 100644 --- a/app/assets/stylesheets/recurring_donations/edit.css.scss +++ b/app/assets/stylesheets/recurring_donations/edit.css.scss @@ -1,4 +1,4 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'components/cards'; -@import 'common/donate_button'; \ No newline at end of file +@import './components/cards.css.scss'; +@import './common/donate_button.css.scss'; \ No newline at end of file diff --git a/app/assets/stylesheets/recurring_donations/edit/page.css.scss b/app/assets/stylesheets/recurring_donations/edit/page.css.scss index b83948b6c..1c2fb1050 100644 --- a/app/assets/stylesheets/recurring_donations/edit/page.css.scss +++ b/app/assets/stylesheets/recurring_donations/edit/page.css.scss @@ -1,4 +1,4 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'components/cards'; -@import 'common/donate_button'; \ No newline at end of file +@import './components/cards.css.scss'; +@import './common/donate_button.css.scss'; \ No newline at end of file diff --git a/app/assets/stylesheets/recurring_donations/modal.css.scss b/app/assets/stylesheets/recurring_donations/modal.css.scss index 50f4c3420..1ee89ece4 100644 --- a/app/assets/stylesheets/recurring_donations/modal.css.scss +++ b/app/assets/stylesheets/recurring_donations/modal.css.scss @@ -1,3 +1,3 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'supporters/form'; +@import './supporters/form.css.scss'; diff --git a/app/assets/stylesheets/settings/index/branding.css.scss b/app/assets/stylesheets/settings/index/branding.css.scss index 21e9c8f04..62a788fc6 100644 --- a/app/assets/stylesheets/settings/index/branding.css.scss +++ b/app/assets/stylesheets/settings/index/branding.css.scss @@ -1,9 +1,9 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; -@import 'common/vendor/colpick'; -@import 'nonprofits/btn/page'; -@import 'common/branded_campaign_button'; +@import './mixins.css.scss'; +@import './common/vendor/colpick.css.scss'; +@import './nonprofits/btn/page.css.scss'; +@import './common/branded_campaign_button.css.scss'; .branding-settings-wrapper { diff --git a/app/assets/stylesheets/settings/index/page.css.scss b/app/assets/stylesheets/settings/index/page.css.scss index c33ca2720..000cad4eb 100644 --- a/app/assets/stylesheets/settings/index/page.css.scss +++ b/app/assets/stylesheets/settings/index/page.css.scss @@ -1,14 +1,14 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; -@import 'components/nonprofit_bank_accounts'; -@import 'components/todos'; -@import 'common/image_uploader'; -@import 'common/vendor/colpick'; -@import 'common/editable'; -@import './branding'; -@import 'nonprofits/show/settings_modal'; -@import 'components/browser_border'; +@import './mixins.css.scss'; +@import './components/nonprofit_bank_accounts.css.scss'; +@import './components/todos.css.scss'; +@import './common/image_uploader.css.scss'; +@import './common/vendor/colpick.css.scss'; +@import './common/editable.css.scss'; +@import '././branding.css.scss'; +@import './nonprofits/show/settings_modal.css.scss'; +@import './components/browser_border.css.scss'; .settings-nav li { cursor: pointer; diff --git a/app/assets/stylesheets/tickets/index/page.css.scss b/app/assets/stylesheets/tickets/index/page.css.scss index c561bd51e..64ce13797 100644 --- a/app/assets/stylesheets/tickets/index/page.css.scss +++ b/app/assets/stylesheets/tickets/index/page.css.scss @@ -1,8 +1,8 @@ /* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later Full license explanation at https://github.com/houdiniproject/houdini/blob/main/LICENSE */ -@import 'mixins'; -@import 'components/pagination'; -@import 'common/donate_button'; +@import './mixins.css.scss'; +@import './components/pagination.css.scss'; +@import './common/donate_button.css.scss'; .table--plaid td.supporterName { @include ellipsis; diff --git a/app/assets/stylesheets/ui_components/close.svg b/app/assets/stylesheets/ui_components/close.svg new file mode 100644 index 000000000..455e7061f --- /dev/null +++ b/app/assets/stylesheets/ui_components/close.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + diff --git a/app/javascript/components/legacy/_dependencies/ff-core/wizard/index.tsx b/app/javascript/components/legacy/_dependencies/ff-core/wizard/index.tsx index e427a24e8..58af7721a 100644 --- a/app/javascript/components/legacy/_dependencies/ff-core/wizard/index.tsx +++ b/app/javascript/components/legacy/_dependencies/ff-core/wizard/index.tsx @@ -25,7 +25,8 @@ export default function Wizard(props: WizardProps): JSX.Element { - const isCompleted = stepManager.activeStep === stepManager.steps.length - 1; + const isCompleted = currentStep === stepManager.steps.length; + return (
@@ -40,7 +41,7 @@ export default function Wizard(props: WizardProps): JSX.Element { {followup()} - ; +
); } @@ -88,11 +89,16 @@ function StepHeader({ width, jump, name, idx, currentStep }: { width: string, na } if (currentStep > idx) { classNames.push('ff-wizard-index-label--accessible'); + return ( jump(idx)} > + {name} + ); } return ( jump(idx)} > + style={{ width: width }}> {name} ); @@ -100,7 +106,7 @@ function StepHeader({ width, jump, name, idx, currentStep }: { width: string, na function Body({ currentStep, isCompleted, children }: React.PropsWithChildren<{ currentStep: number, isCompleted: boolean }>) { return
{React.Children.map(children, (child, idx) => ( diff --git a/app/javascript/components/legacy/components/styles/branded-wizard.tsx b/app/javascript/components/legacy/components/styles/branded-wizard.tsx index 119b4b8cb..7e21fe74b 100644 --- a/app/javascript/components/legacy/components/styles/branded-wizard.tsx +++ b/app/javascript/components/legacy/components/styles/branded-wizard.tsx @@ -38,7 +38,7 @@ const useStyles = makeStyles({ '.wizard-steps div.is-selected, .wizard-steps button.is-selected': { backgroundColor: (props: MakeStylesProps) => `${colors(props.nonprofitColor).lighter} !important`, }, - 'wizard-steps .button.white': { + '.wizard-steps .button.white': { 'color': '#494949', }, '.wizard-steps a:not(.button--small), .ff-wizard-index-label.ff-wizard-index-label--accessible, .wizard-index-label.is-accessible': { diff --git a/app/javascript/components/legacy/nonprofits/donate/InfoStep.tsx b/app/javascript/components/legacy/nonprofits/donate/InfoStep.tsx new file mode 100644 index 000000000..d62705ef8 --- /dev/null +++ b/app/javascript/components/legacy/nonprofits/donate/InfoStep.tsx @@ -0,0 +1,368 @@ +// License: LGPL-3.0-or-later +import { Money } from '../../../../common/money'; +import React, { useContext, useState } from 'react'; +import { SupporterType, RequiredFieldsType, ActionType, AddressProps, DedicationDataProps } from './wizard'; +import { WizardContext } from '../../_dependencies/ff-core/wizard'; +import { Field, Form, Formik, FormikErrors, FormikTouched, useFormikContext } from 'formik'; +import { useIntl } from "../../../intl"; +import useYup from '../../../../hooks/useYup'; +import { PersonPinSharp } from '@material-ui/icons'; + +interface InfoStepProps { + showDedicationForm: boolean; + error: string; + loadingText: string; + address: AddressProps; + required: RequiredFieldsType; + supporter: SupporterType; + hideDedication: boolean; + isRecurring: boolean; + weekly: boolean; + amount: Money; + currencySymbol: string; + stateDispatch: (action: ActionType) => void; + dedicationData: DedicationDataProps; +} +interface FormikFormValues { + selectedPayment: string; + supporter: SupporterType; + address: AddressProps; + dedicationData: DedicationDataProps; + showDedicationForm: boolean; +} + +export function InfoStep(props: InfoStepProps): JSX.Element { + const stepManagerContext = useContext(WizardContext); + const { formatMessage } = useIntl(); + const Yup = useYup(); + const InfoStepSchema = Yup.object({ + supporter: Yup.object({ + firstName: Yup.string().label(formatMessage({ id: 'nonprofits.donate.info.supporter.first_name'})).required(), + email: Yup.string().label(formatMessage({ id: 'nonprofits.donate.info.supporter.first_name' })).required(), + }) + }); + + return ( +
+ { + // post supporter data + props.stateDispatch({ + type: 'setSelectedPayment', + selectedPayment: values.selectedPayment, + }); + props.stateDispatch({ + type: 'setSupporter', + supporter: values.supporter, + address: values.address, + next: stepManagerContext.next, + }); + }} initialValues={{ supporter: props.supporter, address: props.address, dedicationData: props.dedicationData, showDedicationForm: props.showDedicationForm } as FormikFormValues}> + {({ isSubmitting, errors, touched, isValidating }) => ( +
+ + + + )} +
+
+ ); +} + +interface SupporterFieldsProps { + loadingText: string; + error: string; + loading: boolean; + required: RequiredFieldsType; + supporter: SupporterType; + hideDedication: boolean; + address: AddressProps; + isRecurring: boolean; + weekly: boolean; + amount: Money; + currencySymbol: string; + errors: FormikErrors; + touched: FormikTouched; + isValidating: boolean; + dedicationData: DedicationDataProps; +} + +interface DedicationLinkProps { + hideDedication: boolean; + dedicationData: DedicationDataProps; + values: FormikFormValues; + setFieldValue: (field: string, value: any) => void; +} + +function SupporterFields(props: SupporterFieldsProps): JSX.Element { + const { values, setFieldValue, submitForm } = useFormikContext(); + const { formatMessage } = useIntl(); + const emailRequired = formatMessage({ id: 'nonprofits.donate.info.supporter.email_required' }); + const emailTitle = formatMessage({ id: 'nonprofits.donate.info.supporter.email' }) + `${props.required.email ? `${emailRequired}` : ''}`; + const firstNameTitle = formatMessage({ id: 'nonprofits.donate.info.supporter.first_name' }); + const lastNameTitle = formatMessage({ id: 'nonprofits.donate.info.supporter.last_name' }); + const phoneTitle = formatMessage({ id: 'nonprofits.donate.info.supporter.phone' }); + + + return ( + <> + +
+ + +
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+ + + + + {props.errors.supporter?.firstName && props.touched.supporter?.firstName ? ( +
{props.errors.supporter?.firstName}
+ ) : null} + + ); +} + +function PaymentButtons(props: { error: string, loading: boolean | null, loadingText: string | null, submitForm: () => void, setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void }): JSX.Element { + const { formatMessage } = useIntl(); + const sepaText = formatMessage({ id: 'nonprofits.donate.payment.tabs.sepa' }); + const creditCardText = formatMessage({ id: 'nonprofits.donate.payment.tabs.card' }); + + return ( +
+
+ + +
+
+ ); +} + +function PaymentButton(props: { label: string, error: string, loading: boolean | null, loadingText: string | null, buttonText: string, submitForm: () => void, setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void }): JSX.Element { + const { formatMessage } = useIntl(); + const buttonText = formatMessage({ id: 'nonprofits.donate.payment.card.submit' }); + + return ( +
+

{props.error}

+ +
+ ); +} + +function ManualAddress(props: { values: FormikFormValues, setFieldValue: (field: string, value: string) => void }): JSX.Element { + const { formatMessage } = useIntl(); + const addressTitle = formatMessage({ id: 'nonprofits.donate.info.supporter.address' }); + const cityTitle = formatMessage({ id: 'nonprofits.donate.info.supporter.city' }); + const zipCodeTitle = formatMessage({ id: 'nonprofits.donate.info.supporter.postal_code' }); + + return ( +
+ {/* TODO: props.toShip? */} +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ ); +} + +function CustomFields(): JSX.Element { + return ( +
CustomFields
+ ); +} + +function DedicationLink(props: DedicationLinkProps): JSX.Element { + const { formatMessage } = useIntl(); + if(props.hideDedication) return <>; + + const dedicationSaved = formatMessage({ id: 'nonprofits.donate.info.dedication_saved' }); + const dedicationLink = formatMessage({ id: 'nonprofits.donate.info.dedication_link' }); + + return ( + + ); +} + +function DedicationForm(props: any): JSX.Element { + const { formatMessage } = useIntl(); + if(!props.showDedicationForm) return <>; + + const dedicationInfo = formatMessage({ id: 'nonprofits.donate.dedication.info' }); + const inHonorLabel = formatMessage({ id: 'nonprofits.donate.dedication.in_honor_of' }); + + return( +
+

+ {dedicationInfo} +

+
+ + +
+
+ ); +} + +// Originally from app/javascript/legacy/common/format.js:numberWithCommas +function numberWithCommas(n: string): string { + return n.replace(/\B(?=(\d{3})+(?!\d))/g, ","); +} + +// Originally from app/javascript/legacy/common/format.js:centsToDollars +function centsToDollars(amount: Money, noCents = false): string { + if (!amount) return '0'; + if (amount.cents === undefined) return '0'; + return numberWithCommas((amount.cents / 100.0).toFixed(noCents ? 0 : 2).toString()).replace(/\.00$/, ''); +} + +// Originally from app/javascript/legacy/common/format.js:weeklyToMonthly +function weeklyToMonthly(amount: Money) { + const cents = amount.cents; + if (cents === undefined) return 0; + return (Math.round(4.3 * cents) / 100.0).toFixed(2).toString().replace(/\.00$/, ''); +} +interface RecurringMessageProps { + isRecurring: boolean; + weekly: boolean; + currencySymbol: string; + amount: Money; +} + +function RecurringMessage(props: RecurringMessageProps): JSX.Element { + const { formatMessage } = useIntl(); + const montlhyRecurring = formatMessage({ id: 'nonprofits.donate.payment.monthly_recurring' }); + const oneTime = formatMessage({ id: 'nonprofits.donate.payment.one_time' }); + let amountLabel = props.isRecurring ? montlhyRecurring : oneTime; + let weekly = <>; + + if (props.weekly && props.isRecurring) { + const weeklyLabel = formatMessage({ id: 'nonprofits.donate.amount.weekly' }); + amountLabel = amountLabel.replace(montlhyRecurring, weeklyLabel) + '*'; + weekly =
+ {props.currencySymbol} {weeklyToMonthly(props.amount)} +
; + } + return ( +
+

+ {props.currencySymbol} {centsToDollars(props.amount)} + {amountLabel} + {weekly} +

+
+ ); +} + +function AnonymousCheckbox(): JSX.Element { + return ( +
AnonymousCheckbox
+ ); +} diff --git a/app/javascript/components/legacy/nonprofits/donate/amount-step.tsx b/app/javascript/components/legacy/nonprofits/donate/amount-step.tsx index de4930ec8..33b42f2b3 100644 --- a/app/javascript/components/legacy/nonprofits/donate/amount-step.tsx +++ b/app/javascript/components/legacy/nonprofits/donate/amount-step.tsx @@ -1,29 +1,49 @@ -import React, { useContext } from 'react'; +import React, { Dispatch, SetStateAction, useContext, useState } from 'react'; import { useId } from "@reach/auto-id"; import { Money } from '../../../../common/money'; -import { Formik, useFormikContext } from 'formik'; +import { Field, Form, Formik, useFormikContext } from 'formik'; import { ActionType, DonationWizardContext } from './wizard'; -declare const I18n: any; +import { useIntl } from "../../../intl"; +import { format } from 'sinon'; +import { WizardContext } from '../../_dependencies/ff-core/wizard'; +import BigNumber from 'bignumber.js'; + interface AmountStepProps { - amount: Money|null; + amount: Money | null; amountOptions: Money[]; + stateDispatch: (action: ActionType) => void; + currencySymbol: string; + singleAmount: string | null; + isRecurring: boolean; + showRecurring: boolean; + weekly: boolean; } - - interface FormikFormValues { - amount: Money|null; + recurring: boolean; + amount: Money | null; + prefilledAmount: Money | string; + customAmount: Money | string; } -export function AmountStep(props: AmountStepProps): JSX.Element { - const {dispatch:dispatchAction} = useContext(DonationWizardContext); +export function AmountStep(props: AmountStepProps): JSX.Element { + const stepManagerContext = useContext(WizardContext); return (
- { - dispatchAction({type: 'setAmount', amount: values.amount}); - }} initialValues={{amount: props.amount} as FormikFormValues} enableReinitialize={true}> - {/* - */} - + { + if (values.prefilledAmount !== '') { + formikBag.setFieldValue('customAmount', ''); + } + let amountToSend: Money = (values.prefilledAmount ? values.prefilledAmount : values.customAmount) as Money; + props.stateDispatch({ + type: 'setAmount', + amount: amountToSend.multiply(100), + recurring: values.recurring || false, + next: stepManagerContext.next, + }); + }} initialValues={{ amount: props.amount || 0, recurring: props.isRecurring, buttonAmountSelected: false, customAmount: '', prefilledAmount: '' } as FormikFormValues} > +
+ +
); } @@ -31,22 +51,25 @@ export function AmountStep(props: AmountStepProps): JSX.Element { interface RecurringCheckboxProps { isRecurring: boolean; showRecurring: boolean; - setRecurring: (recurring: boolean) => void; + setRecurring: () => void; } function RecurringCheckbox(props: RecurringCheckboxProps): JSX.Element { const checkboxId = useId(); + const { formatMessage } = useIntl(); + const nonprofitsDonateAmountSustaining = formatMessage({ id: 'nonprofits.donate.amount.sustaining' }); + const nonprofitsDonateAmountSustainingBold = formatMessage({ id: 'nonprofits.donate.amount.sustaining_bold' }); if (props.showRecurring) { return (
- props.setRecurring(!props.isRecurring)} /> + { props.setRecurring();}} />
); @@ -61,7 +84,7 @@ function RecurringCheckbox(props: RecurringCheckboxProps): JSX.Element { function ComposeTranslation(props: { full: string, bold: string }): JSX.Element { const texts = props.full.split(props.bold); if (texts.length > 1) { - return (<>{texts[0]}{props.bold}{texts[2]}); + return (<>{texts[0]}{props.bold}{texts[1]}); } else { return <>{props.full}; @@ -69,13 +92,14 @@ function ComposeTranslation(props: { full: string, bold: string }): JSX.Element } function RecurringMessage(props: { isRecurring: boolean, recurringWeekly: boolean, periodicAmount: number, singleAmount: string }): JSX.Element { + const { formatMessage } = useIntl(); if (!props.isRecurring) return <>; - let label = I18n.t('nonprofits.donate.amount.sustaining_selected'); - let bolded = I18n.t('nonprofits.donate.amount.sustaining_selected_bold'); + let label = formatMessage({ id: 'nonprofits.donate.amount.sustaining_selected' }); + let bolded = formatMessage({ id: 'nonprofits.donate.amount.sustaining_selected_bold' }); if (props.recurringWeekly) { - label = label.replace(I18n.t('nonprofits.donate.amount.monthly'), I18n.t('nonprofits.donate.amount.weekly')); - bolded = I18n.t('nonprofits.donate.amount.weekly'); + label = label.replace(formatMessage({ id: 'nonprofits.donate.amount.monthly' }), formatMessage({ id: 'nonprofits.donate.amount.weekly' })); + bolded = formatMessage({ id: 'nonprofits.donate.amount.weekly' }); } return (

@@ -95,69 +119,132 @@ function prependCurrencyClassname(currency_symbol: string) { } function getCurrencySymbol(amount: Money) { - if (amount.currency == 'EUR') { + if (amount.currency.toLowerCase() == 'eur') { return '€'; } - else if (amount.currency == 'USD') { + else if (amount.currency.toLowerCase() == 'usd') { return '$'; } } +function nextStepDisabled(amount: Money | null): boolean { + return (amount === null || amount === undefined || amount.cents === 0); +} + interface AmountFieldsProps { - // singleAmount: string; + singleAmount: string | null; amounts: Money[]; - // buttonAmountSelected: boolean; - //currencySymbol: string; + currencySymbol: string; + showRecurring: boolean; + isRecurring: boolean; + recurringWeekly: boolean; + periodicAmount: number; } function AmountFields(props: AmountFieldsProps): JSX.Element { - const {values, setFieldValue, submitForm} = useFormikContext(); - // if (props.singleAmount) { - // return <>; - // }s - return (

- - {props.amounts.map(amt => { - const weAreSelected = values.amount.equals(amt); - return (
- -
); + + + ); + } + return (
+ + + + {props.amounts.map(amt => { + let weAreSelected = false; + if (values.prefilledAmount && values.prefilledAmount instanceof Money) { + weAreSelected = values.prefilledAmount.equals(amt); + } + return ( +
+ +
); })} +
+ { + setFieldValue('prefilledAmount', ''); + setFieldValue('customAmount', Money.fromCents(v.currentTarget.value, 'usd')); + }} + /> +
+
+ +
- - {/*
- { throw new Error('onFocus not implemented'); }} - onChange={() => { throw new Error('onChange not implemented'); }} - /> -
- -
- -
*/}
); } -AmountFields.defaultProps = { - amounts: [], -}; +interface SingleAmountProps { + singleAmount: string; + currencySymbol: string; + isRecurring: boolean; +} +function SingleAmount(props: SingleAmountProps): JSX.Element { + return ( +
+

+ {props.currencySymbol} {props.singleAmount} + +

+
+ ); +} +AmountFields.defaultProps = { + amounts: [10, 25, 50, 100, 250, 500, 1000].map((i) => Money.fromCents(i, 'usd')), + showRecurring: true, + isRecurring: false, + recurringWeekly: false, + periodicAmount: 1, + singleAmount: undefined, +}; diff --git a/app/javascript/components/legacy/nonprofits/donate/followup-step.tsx b/app/javascript/components/legacy/nonprofits/donate/followup-step.tsx index ffcc69f5a..014a52ceb 100644 --- a/app/javascript/components/legacy/nonprofits/donate/followup-step.tsx +++ b/app/javascript/components/legacy/nonprofits/donate/followup-step.tsx @@ -2,7 +2,7 @@ // based on app/javascript/legacy/nonprofits/donate/followup-step.js import React from 'react'; import noop from 'lodash/noop'; -declare const I18n: any; +import { useIntl } from "../../../intl"; interface FollowupStepProps { supporterEmail?: string | null; thankYouMessage?: string | null; @@ -12,14 +12,19 @@ interface FollowupStepProps { } export default function FollowupStep(props: FollowupStepProps): JSX.Element { + const { formatMessage } = useIntl(); + const nonprofitsDonateFollowupSuccess = formatMessage({ id: 'nonprofits.donate.followup.success' }); + const nonprofitsDonateFollowupReceiptInfo = formatMessage({ id: 'nonprofits.donate.followup.receipt_info' }); + const nonprofitsDonateFollowupMessage = formatMessage({ id: 'nonprofits.donate.followup.message' }); + const nonprofitsDonateFollowupFinish = formatMessage({ id: 'nonprofits.donate.followup.finish' }); return (
- {I18n.t('nonprofits.donate.followup.success')} + {nonprofitsDonateFollowupSuccess}
- { props.supporterEmail ?

{`${I18n.t('nonprofits.donate.followup.receipt_info')} ${props.supporterEmail}`}

: ''} + { props.supporterEmail ?

{`${nonprofitsDonateFollowupReceiptInfo} ${props.supporterEmail}`}

: ''}

- {props.thankYouMessage || `${props.nonprofitName} ${I18n.t('nonprofits.donate.followup.message')}`} + {props.thankYouMessage || `${props.nonprofitName} ${nonprofitsDonateFollowupMessage}`}

@@ -44,7 +49,7 @@ export default function FollowupStep(props: FollowupStepProps): JSX.Element { { props.showFinishButton ?
- +
: '' }
); diff --git a/app/javascript/components/legacy/nonprofits/donate/wizard.stories.tsx b/app/javascript/components/legacy/nonprofits/donate/wizard.stories.tsx index 77e7bdffa..edfe3e5fc 100644 --- a/app/javascript/components/legacy/nonprofits/donate/wizard.stories.tsx +++ b/app/javascript/components/legacy/nonprofits/donate/wizard.stories.tsx @@ -3,7 +3,169 @@ import * as React from 'react'; import { action } from '@storybook/addon-actions'; import DonateWizard from './wizard'; +import { SWRConfig } from 'swr'; +import { Money } from '../../../../common/money'; +function SWRWrapper(props: React.PropsWithChildren) { + return new Map(), + } + }> + {props.children} + ; +} +export default { + title: 'Donate/Wizard', + argTypes: { + brandColor: { + type: { name: 'string' }, + defaultValue: '#0095a6', + }, + offsite: { + type: { name: 'boolean' }, + defaultValue: false, + }, + embedded: { + type: { name: 'boolean' }, + defaultValue: false, + }, + title: { + type: { name: 'string' }, + defaultValue: 'Donate', + }, // app.campaign.name || app.nonprofit.name + logo: { + type: { name: 'string' }, + defaultValue: 'somelogourl', + }, //app.nonprofit.logo.normal + nonprofitName: { + type: { name: 'string' }, + defaultValue: 'Nonprofit', + }, + }, +}; +interface TemplateArgs { + brandColor: string; + offsite: boolean; + embedded: boolean; + onClose: () => void; + title: string; // app.campaign.name || app.nonprofit.name + logo: string; //app.nonprofit.logo.normal + nonprofitName: string; + amountOptions: Money[]; +} + +function OuterWrapper(props: React.PropsWithChildren>) { + return <> {props.children}; +} +const Template = (args: TemplateArgs) => { + return ( + + + + ); +}; + +export const Default = Template.bind({}); +Default.story = {}; + +const NoRecurringOptionTemplate = (args: TemplateArgs) => { + return ( + + + + ); +}; + +export const NoRecurringOption = NoRecurringOptionTemplate.bind({}); +NoRecurringOption.story = {}; + +const SingleAmountWithRecurringOptionTemplate = (args: TemplateArgs) => { + return ( + + + + ); +}; + +export const SingleAmountWithRecurringOption = SingleAmountWithRecurringOptionTemplate.bind({}); +SingleAmountWithRecurringOption.story = {}; + +const RecurringSingleAmountTemplate = (args: TemplateArgs) => { + return ( + + + + ); +}; + +export const RecurringSingleAmount = RecurringSingleAmountTemplate.bind({}); +RecurringSingleAmount.story = {}; + +const RecurringTemplate = (args: TemplateArgs) => { + return ( + + + + ); +}; + +export const Recurring = RecurringTemplate.bind({}); +Recurring.story = {}; diff --git a/app/javascript/components/legacy/nonprofits/donate/wizard.tsx b/app/javascript/components/legacy/nonprofits/donate/wizard.tsx index cfccda0c6..a7bad63a2 100644 --- a/app/javascript/components/legacy/nonprofits/donate/wizard.tsx +++ b/app/javascript/components/legacy/nonprofits/donate/wizard.tsx @@ -3,65 +3,170 @@ import noop from 'lodash/noop'; import React, { useReducer, useState, Dispatch, createContext } from 'react'; import { useBrandedWizard } from '../../components/styles/branded-wizard'; -import Wizard from '../../_dependencies/ff-core/wizard'; +import Wizard, { WizardContext } from '../../_dependencies/ff-core/wizard'; import { AmountStep } from './amount-step'; +import { InfoStep } from './InfoStep'; import { Money } from '../../../../common/money'; +import { useIntl } from "../../../intl"; import closeSvg from './close.svg'; import FollowupStep from './followup-step'; - - -declare const I18n: any; -interface DonateWizardProps { - brandColor: string; - offsite: boolean; - embedded: boolean; - onClose: () => void; - title: string; // app.campaign.name || app.nonprofit.name - logo: string; //app.nonprofit.logo.normal - nonprofitName: string; +import '../../../../../assets/stylesheets/global.css.scss'; +import '../../../../../assets/stylesheets/nonprofits/donate/page.css.scss'; +import '../../../../../assets/stylesheets/components/wizard_index.css.scss'; +import '../../../../../assets/stylesheets/donate-button/donate-button.v2.css'; +import '../../../../../assets/stylesheets/nonprofits/donation_form/show/index.css.scss'; +import '../../../../../assets/stylesheets/nonprofits/donation_form/title_row.css.scss'; +import '../../../../../assets/stylesheets/nonprofits/donation_form/footer.css.scss'; +import '../../../../../assets/stylesheets/nonprofits/donation_form/form.css.scss'; +import { useContext } from 'react'; +import { result } from 'lodash'; + +export interface DonateWizardProps { + loadingText: string; + hideDedication: boolean; + brandColor: string; + offsite: boolean; + embedded: boolean; + onClose: () => void; + title: string; // app.campaign.name || app.nonprofit.name + logo: string; //app.nonprofit.logo.normal + nonprofitName: string; amountOptions: Money[]; + currencySymbol: string; + singleAmount: string | null; + isRecurring: boolean; + weekly: boolean; + showRecurring: boolean; + required: RequiredFieldsType; + supporter: SupporterType; } export type ActionType = { - type: 'setAmount'; - amount: Money; + type: 'setAmount'; + amount: Money; + next: () => void; + recurring: boolean; +} | { + type: 'setError'; + error: string; +} | { + type: 'setLoading'; + loading: boolean; +} | { + type: 'setSupporter'; + supporter: SupporterType; + address: AddressProps; + next: () => void; +} | { + type: 'setSelectedPayment'; + selectedPayment: string; +}; + +export type SupporterType = { + firstName: string; + lastName: string; + email: string; + phone: string; + profileId: string; + nonprofitId: string; +}; + +export type AddressProps = { + address: string; + city: string; + stateCode: string; + country: string; + zipCode: string; +}; + +export type DedicationDataProps = { + firstName: string | null; + lastName: string | null; + email: string | null; + phone: string | null; + fullAddress: string | null; + dedicationNote: string | null; +}; + +export type RequiredFieldsType = { + email: boolean; + firstName: boolean; + lastName: boolean; + phone: boolean; }; +function useDonateWizardState(initialState: DonateWizardOutputState): [DonateWizardOutputState, (action: ActionType) => void] { + const [donateWizardState, stateDispatch] = useReducer(wizardOutputReducer, initialState); + + const reducerAction = (action: ActionType) => { + switch (action.type) { + case 'setAmount': { + stateDispatch(action); + action.next(); + break; + } + case 'setSelectedPayment': { + stateDispatch(action); + break; + } + case 'setSupporter': { + stateDispatch(action); + action.next(); + break; + } + + default: { + stateDispatch(action); + } + } + }; + return [donateWizardState, reducerAction]; +} + function wizardOutputReducer(state: DonateWizardOutputState, action: ActionType): DonateWizardOutputState { switch (action.type) { case 'setAmount': - return { ...state, amount: action.amount }; + return { ...state, amount: action.amount, recurring: action.recurring }; + case 'setLoading': + return { ...state, loading: action.loading }; + case 'setSupporter': + return { ...state, supporter: action.supporter, address: action.address }; + case 'setSelectedPayment': + return { ...state, selectedPayment: action.selectedPayment }; default: throw new Error(); } } -export const DonationWizardContext = createContext<{dispatch: Dispatch}>({dispatch:noop}); +export const DonationWizardContext = createContext<{ dispatch: Dispatch }>({ dispatch: noop }); export interface DonateWizardOutputState { - amount: Money|null; - + dedicationData: DedicationDataProps; + amount: Money | null; + loading: boolean | null; + error: string | null; + recurring: boolean | null; + buttonAmountSelected: boolean | null; + supporter: SupporterType | null; + address: AddressProps | null; + selectedPayment: string | null; } export default function DonateWizard(props: DonateWizardProps): JSX.Element { useBrandedWizard(props.brandColor); - // You might want to combine these into the donateWizardState reducer - const [error, setError] = useState(); - const [loading, setLoading] = useState(false); - - const [donateWizardState, stateDispatch] = useReducer(wizardOutputReducer,{amount: null}); + const [donateWizardState, stateDispatch] = useDonateWizardState({ amount: null, loading: false, error: null, recurring: props.isRecurring, supporter: null, address: null, selectedPayment: null, buttonAmountSelected: false, dedicationData: null }); const canClose = props.offsite || !props.embedded; const hiddenCloseButton = !props.offsite || !props.embedded; return ( -
- { +
+ { if (canClose) { props.onClose(); } @@ -78,7 +183,28 @@ export default function DonateWizard(props: DonateWizardProps): JSX.Element {

- + {/* I'm not putting in the footer because it's not realy a useful feature */} @@ -91,15 +217,24 @@ DonateWizard.defaultProps = { onClose: noop, embedded: false, offsite: false, - amountOptions: [100, 500, 1000, 2500, 5000].map((i)=> Money.fromCents(i, 'usd')), - - + amountOptions: [10, 25, 50, 100, 250, 500, 1000].map((i) => Money.fromCents(i, 'usd')), + currencySymbol: '$', + isRecurring: false, + showRecurring: true, + required: { + email: true, + firstName: true, + lastName: true, + phone: true, + }, } as DonateWizardProps; function HeaderDesignation(props: { brandColor: string, designation_desc?: string | null }): JSX.Element { + const { formatMessage } = useIntl(); + const donateAmountDesignationLabel = formatMessage({ id: 'nonprofits.donate.amount.designation.label' }); return ( - {I18n.t('nonprofits.donate.amount.designation.label')} + {donateAmountDesignationLabel} {props.designation_desc ?
{props.designation_desc} : null} ); } @@ -109,14 +244,32 @@ HeaderDesignation.defaultProps = { }; interface WizardWrapperProps { - amount:Money; - amountOptions:Money[]; - nonprofitName: string; + dedicationData: DedicationDataProps; + loadingText: string; + error: string; + hideDedication: boolean; + amount: Money; + amountOptions: Money[]; + nonprofitName: string; + stateDispatch: (action: ActionType) => void; + currencySymbol: string; + singleAmount: string | null; + isRecurring: boolean; + weekly: boolean; + showRecurring: boolean; + supporter: SupporterType; + required: RequiredFieldsType; + address: AddressProps | null; } function WizardWrapper(props: WizardWrapperProps): JSX.Element { + const { formatMessage } = useIntl(); + const nonprofitsDonateAmountLabel = formatMessage({ id: 'nonprofits.donate.amount.label' }); + const nonprofitsDonateInfoLabel = formatMessage({ id: 'nonprofits.donate.info.label' }); + const nonprofitsDonatePaymentLabel = formatMessage({ id: 'nonprofits.donate.payment.label' }); + return
} @@ -124,20 +277,42 @@ function WizardWrapper(props: WizardWrapperProps): JSX.Element { steps={ [ { - title: I18n.t('nonprofits.donate.amount.label'), - - key: I18n.t('nonprofits.donate.amount.label'), - body: , + title: nonprofitsDonateAmountLabel, + key: nonprofitsDonateAmountLabel, + body: , }, { - title: I18n.t('nonprofits.donate.info.label'), - key: I18n.t('nonprofits.donate.info.label'), - body:
InfoStep
, + title: nonprofitsDonateInfoLabel, + key: nonprofitsDonateInfoLabel, + body: , }, { - title: I18n.t('nonprofits.donate.payment.label'), - key: I18n.t('nonprofits.donate.payment.label'), - body:
PaymentStep
, + title: nonprofitsDonatePaymentLabel, + key: nonprofitsDonatePaymentLabel, + body:
PaymentStep
, }, ] } />