Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-01-23 09:06:23 +01:00
Code Issues Projects Releases Packages Wiki Activity

Default modal to light, add solid class instead

Browse source
This commit is contained in:
Lim Chee Aun 2024-03-03 17:31:06 +08:00
parent b79ce92aef
commit 6292557bc9
11 changed files with 17 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/account-info.jsx
View file

@ -1352,7 +1352,6 @@ function RelatedActions({
</div>
{!!showTranslatedBio && (
<Modal
class="light"
onClose={() => {
setShowTranslatedBio(false);
}}
@ -1366,7 +1365,6 @@ function RelatedActions({
)}
{!!showAddRemoveLists && (
<Modal
class="light"
onClose={() => {
setShowAddRemoveLists(false);
}}
@ -1379,7 +1377,6 @@ function RelatedActions({
)}
{!!showPrivateNoteModal && (
<Modal
class="light"
onClose={() => {
setShowPrivateNoteModal(false);
}}
@ -1571,7 +1568,6 @@ function AddRemoveListsSheet({ accountID, onClose }) {
</main>
{showListAddEditModal && (
<Modal
class="light"
onClick={(e) => {
if (e.target === e.currentTarget) {
setShowListAddEditModal(false);

2
src/components/compose.jsx
View file

@ -1254,7 +1254,6 @@ function Compose({
</div>
{showEmoji2Picker && (
<Modal
class="light"
onClick={(e) => {
if (e.target === e.currentTarget) {
setShowEmoji2Picker(false);
@ -1768,7 +1767,6 @@ function MediaAttachment({
</div>
{showModal && (
<Modal
class="light"
onClick={(e) => {
if (e.target === e.currentTarget) {
setShowModal(false);

2
src/components/keyboard-shortcuts-help.jsx
View file

@ -32,7 +32,7 @@ export default memo(function KeyboardShortcutsHelp() {
return (
!!snapStates.showKeyboardShortcutsHelp && (
<Modal class="light" onClose={onClose}>
<Modal onClose={onClose}>
<div id="keyboard-shortcuts-help-container" class="sheet" tabindex="-1">
<button type="button" class="sheet-close" onClick={onClose}>
<Icon icon="x" />

14
src/components/modal.css
View file

@ -10,11 +10,17 @@
align-items: center;
background-color: var(--backdrop-color);
animation: appear 0.5s var(--timing-function) both;
}
#modal-container > div .sheet {
&.solid {
background-color: var(--backdrop-solid-color);
}
.sheet {
transition: transform 0.3s var(--timing-function);
transform-origin: center bottom;
}
#modal-container > div:has(~ div) .sheet {
}
&:has(~ div) .sheet {
transform: scale(0.975);
}
}

7
src/components/modals.jsx
View file

@ -35,7 +35,7 @@ export default function Modals() {
return (
<>
{!!snapStates.showCompose && (
<Modal>
<Modal class="solid">
<Compose
replyToStatus={
typeof snapStates.showCompose !== 'boolean'
@ -109,7 +109,6 @@ export default function Modals() {
)}
{!!snapStates.showAccount && (
<Modal
class="light"
onClose={() => {
states.showAccount = false;
}}
@ -160,7 +159,6 @@ export default function Modals() {
)}
{!!snapStates.showShortcutsSettings && (
<Modal
class="light"
onClose={() => {
states.showShortcutsSettings = false;
}}
@ -172,7 +170,6 @@ export default function Modals() {
)}
{!!snapStates.showGenericAccounts && (
<Modal
class="light"
onClose={() => {
states.showGenericAccounts = false;
}}
@ -188,7 +185,6 @@ export default function Modals() {
)}
{!!snapStates.showMediaAlt && (
<Modal
class="light"
onClose={(e) => {
states.showMediaAlt = false;
}}
@ -204,6 +200,7 @@ export default function Modals() {
)}
{!!snapStates.showEmbedModal && (
<Modal
class="solid"
onClose={() => {
states.showEmbedModal = false;
}}

1
src/components/notification-service.jsx
View file

@ -144,7 +144,6 @@ export default memo(function NotificationService() {
const { id, account, notification, sameInstance } = showNotificationSheet;
return (
<Modal
class="light"
onClick={(e) => {
if (e.target === e.currentTarget) {
onClose();

2
src/components/shortcuts-settings.jsx
View file

@ -457,7 +457,6 @@ function ShortcutsSettings({ onClose }) {
</main>
{showForm && (
<Modal
class="light"
onClick={(e) => {
if (e.target === e.currentTarget) {
setShowForm(false);
@ -481,7 +480,6 @@ function ShortcutsSettings({ onClose }) {
)}
{showImportExport && (
<Modal
class="light"
onClick={(e) => {
if (e.target === e.currentTarget) {
setShowImportExport(false);

3
src/components/status.jsx
View file

@ -1985,7 +1985,6 @@ function Status({
</div>
{!!showEdited && (
<Modal
class="light"
onClick={(e) => {
if (e.target === e.currentTarget) {
setShowEdited(false);
@ -2008,7 +2007,6 @@ function Status({
)}
{!!showEmbed && (
<Modal
class="light"
onClick={(e) => {
if (e.target === e.currentTarget) {
setShowEmbed(false);
@ -2953,7 +2951,6 @@ function FilteredStatus({
</article>
{!!showPeek && (
<Modal
class="light"
onClick={(e) => {
if (e.target === e.currentTarget) {
setShowPeek(false);

2
src/index.css
View file

@ -69,7 +69,7 @@
--outline-color: rgba(128, 128, 128, 0.2);
--outline-hover-color: rgba(128, 128, 128, 0.7);
--divider-color: rgba(0, 0, 0, 0.1);
--backdrop-color: rgba(0, 0, 0, 0.05);
--backdrop-color: rgba(0, 0, 0, 0.1);
--backdrop-darker-color: rgba(0, 0, 0, 0.25);
--backdrop-solid-color: #eee;
--img-bg-color: rgba(128, 128, 128, 0.2);

2
src/pages/list.jsx
View file

@ -143,7 +143,6 @@ function List(props) {
/>
{showListAddEditModal && (
<Modal
class="light"
onClick={(e) => {
if (e.target === e.currentTarget) {
setShowListAddEditModal(false);
@ -167,7 +166,6 @@ function List(props) {
)}
{showManageMembersModal && (
<Modal
class="light"
onClick={(e) => {
if (e.target === e.currentTarget) {
setShowManageMembersModal(false);

1
src/pages/lists.jsx
View file

@ -108,7 +108,6 @@ function Lists() {
</div>
{showListAddEditModal && (
<Modal
class="light"
onClick={(e) => {
if (e.target === e.currentTarget) {
setShowListAddEditModal(false);