rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: tailwind classname sorting (#1169)

Browse Source
This commit is contained in:
Aman Harwara
2022-06-28 13:37:38 +05:30
committed by GitHub
parent 15ca2d358b
commit ee5b6627da
159 changed files with 565 additions and 549 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryListContainer.tsx
View File

@@ -22,8 +22,8 @@ const HistoryListContainer: FunctionComponent<Props> = ({ features, noteHistoryC
return (
<button
className={`bg-default border-0 cursor-pointer px-3 py-2.5 relative focus:shadow-inner text-sm ${
isSelected ? 'text-info font-medium shadow-bottom' : 'text-text'
className={`relative cursor-pointer border-0 bg-default px-3 py-2.5 text-sm focus:shadow-inner ${
isSelected ? 'font-medium text-info shadow-bottom' : 'text-text'
}`}
onClick={() => {
selectTab(type)
@@ -46,13 +46,13 @@ const HistoryListContainer: FunctionComponent<Props> = ({ features, noteHistoryC
}
return (
<div className={'flex flex-col min-w-60 border-r border-solid border-border overflow-auto h-full'}>
<div className={'flex h-full min-w-60 flex-col overflow-auto border-r border-solid border-border'}>
<div className="flex border-b border-solid border-border">
<TabButton type={RevisionType.Remote} />
<TabButton type={RevisionType.Session} />
{legacyHistory && legacyHistory.length > 0 && <TabButton type={RevisionType.Legacy} />}
</div>
<div className={'min-h-0 overflow-auto py-1.5 h-full'}>
<div className={'h-full min-h-0 overflow-auto py-1.5'}>
<CurrentTabList />
</div>
</div>

2
packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryListItem.tsx
View File

@@ -11,7 +11,7 @@ const HistoryListItem: FunctionComponent<HistoryListItemProps> = ({ children, is
return (
<button
tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
className={`flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-2.5 text-left w-full focus:bg-info-backdrop focus:shadow-none text-sm ${
className={`flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-2.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none ${
isSelected ? 'bg-info-backdrop' : ''
}`}
onClick={onClick}

4
packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalContentPane.tsx
View File

@@ -25,12 +25,12 @@ const HistoryModalContentPane = ({
switch (contentState) {
case RevisionContentState.Idle:
return (
<div className="text-sm text-passive-0 select-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none text-sm text-passive-0">
No revision selected
</div>
)
case RevisionContentState.Loading:
return <Spinner className="w-5 h-5 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" />
return <Spinner className="absolute top-1/2 left-1/2 h-5 w-5 -translate-x-1/2 -translate-y-1/2" />
case RevisionContentState.Loaded:
return (
<SelectedRevisionContent

4
packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx
View File

@@ -22,8 +22,8 @@ const HistoryModalDialog = ({ children, onDismiss }: Props) => {
onDismiss={onDismiss}
aria-label="Note revision history"
>
<StyledDialogContent aria-label="Note revision history" className="rounded-md shadow-lg p-0">
<div className="bg-default flex flex-col h-full overflow-hidden">{children}</div>
<StyledDialogContent aria-label="Note revision history" className="rounded-md p-0 shadow-lg">
<div className="flex h-full flex-col overflow-hidden bg-default">{children}</div>
</StyledDialogContent>
</DialogOverlay>
)

4
packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialogContent.tsx
View File

@@ -18,9 +18,9 @@ const HistoryModalDialogContent = ({
return (
<>
<div className="flex flex-grow min-h-0">
<div className="flex min-h-0 flex-grow">
<HistoryListContainer features={application.features} noteHistoryController={noteHistoryController} />
<div className="flex flex-col flex-grow relative">
<div className="relative flex flex-grow flex-col">
<HistoryModalContentPane
application={application}
noteHistoryController={noteHistoryController}

4
packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalFooter.tsx
View File

@@ -41,7 +41,7 @@ const HistoryModalFooter = ({ dismissModal, noteHistoryController }: Props) => {
}, [deleteRemoteRevision, selectedEntry])
return (
<div className="flex flex-shrink-0 justify-between items-center min-h-6 px-2.5 py-2 border-t border-solid border-border">
<div className="min-h-6 flex flex-shrink-0 items-center justify-between border-t border-solid border-border px-2.5 py-2">
<div>
<Button className="py-1.35" label="Close" onClick={dismissModal} />
</div>
@@ -49,7 +49,7 @@ const HistoryModalFooter = ({ dismissModal, noteHistoryController }: Props) => {
<div className="flex items-center">
{(selectedEntry as RevisionListEntry).uuid && (
<Button className="mr-2.5" onClick={deleteSelectedRevision}>
{isDeletingRevision ? <Spinner className="w-3 h-3 my-1" /> : 'Delete this revision'}
{isDeletingRevision ? <Spinner className="my-1 h-3 w-3" /> : 'Delete this revision'}
</Button>
)}
<Button className="mr-2.5" label="Restore as a copy" onClick={restoreAsCopy} />

4
packages/web/src/javascripts/Components/RevisionHistoryModal/LegacyHistoryList.tsx
View File

@@ -18,7 +18,7 @@ const LegacyHistoryList: FunctionComponent<Props> = ({ legacyHistory, noteHistor
return (
<div
className={`flex flex-col w-full h-full focus:shadow-none ${
className={`flex h-full w-full flex-col focus:shadow-none ${
!legacyHistory?.length ? 'items-center justify-center' : ''
}`}
ref={legacyHistoryListRef}
@@ -39,7 +39,7 @@ const LegacyHistoryList: FunctionComponent<Props> = ({ legacyHistory, noteHistor
</HistoryListItem>
)
})}
{!legacyHistory?.length && <div className="text-sm text-passive-0 select-none">No legacy history found</div>}
{!legacyHistory?.length && <div className="select-none text-sm text-passive-0">No legacy history found</div>}
</div>
)
}

8
packages/web/src/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx
View File

@@ -24,17 +24,17 @@ const RemoteHistoryList: FunctionComponent<RemoteHistoryListProps> = ({ features
return (
<div
className={`flex flex-col w-full h-full focus:shadow-none ${
className={`flex h-full w-full flex-col focus:shadow-none ${
isFetchingRemoteHistory || !remoteHistoryLength ? 'items-center justify-center' : ''
}`}
ref={remoteHistoryListRef}
>
{isFetchingRemoteHistory && <Spinner className="w-5 h-5" />}
{isFetchingRemoteHistory && <Spinner className="h-5 w-5" />}
{remoteHistory?.map((group) => {
if (group.entries && group.entries.length) {
return (
<Fragment key={group.title}>
<div className="px-3 mt-2.5 mb-1 font-semibold uppercase text-passive-0 text-sm select-none">
<div className="mt-2.5 mb-1 select-none px-3 text-sm font-semibold uppercase text-passive-0">
{group.title}
</div>
{group.entries.map((entry) => (
@@ -58,7 +58,7 @@ const RemoteHistoryList: FunctionComponent<RemoteHistoryListProps> = ({ features
}
})}
{!remoteHistoryLength && !isFetchingRemoteHistory && (
<div className="text-sm text-passive-0 select-none">No remote history found</div>
<div className="select-none text-sm text-passive-0">No remote history found</div>
)}
</div>
)

8
packages/web/src/javascripts/Components/RevisionHistoryModal/RevisionContentLocked.tsx
View File

@@ -27,11 +27,11 @@ const RevisionContentLocked: FunctionComponent<Props> = ({ subscriptionControlle
const { userSubscriptionName, isUserSubscriptionExpired, isUserSubscriptionCanceled } = subscriptionController
return (
<div className="flex w-full h-full items-center justify-center">
<div className="flex flex-col items-center text-center max-w-40%">
<div className="flex h-full w-full items-center justify-center">
<div className="max-w-40% flex flex-col items-center text-center">
<HistoryLockedIllustration />
<div className="text-lg font-bold mt-2 mb-1">Can't access this version</div>
<div className="mb-4 text-passive-0 leading-140%">
<div className="mt-2 mb-1 text-lg font-bold">Can't access this version</div>
<div className="leading-140% mb-4 text-passive-0">
{getPremiumContentCopy(
!isUserSubscriptionCanceled && !isUserSubscriptionExpired && userSubscriptionName
? userSubscriptionName

8
packages/web/src/javascripts/Components/RevisionHistoryModal/SelectedRevisionContent.tsx
View File

@@ -50,16 +50,16 @@ const SelectedRevisionContent: FunctionComponent<SelectedRevisionContentProps> =
}, [application, componentViewer])
return (
<div className="flex flex-col h-full overflow-hidden">
<div className="p-4 text-base font-bold w-full">
<div className="flex h-full flex-col overflow-hidden">
<div className="w-full p-4 text-base font-bold">
<div className="title">{selectedRevision?.payload.content.title}</div>
</div>
{!componentViewer && (
<div className="relative flex-grow min-h-0 overflow-hidden">
<div className="relative min-h-0 flex-grow overflow-hidden">
{selectedRevision?.payload.content.text.length ? (
<textarea
readOnly={true}
className="w-full h-full resize-none p-4 pt-0 border-0 bg-default text-text text-editor font-editor"
className="text-editor font-editor h-full w-full resize-none border-0 bg-default p-4 pt-0 text-text"
value={selectedRevision?.payload.content.text}
/>
) : (

6
packages/web/src/javascripts/Components/RevisionHistoryModal/SessionHistoryList.tsx
View File

@@ -22,7 +22,7 @@ const SessionHistoryList: FunctionComponent<Props> = ({ noteHistoryController })
return (
<div
className={`flex flex-col w-full h-full focus:shadow-none ${
className={`flex h-full w-full flex-col focus:shadow-none ${
!sessionHistoryLength ? 'items-center justify-center' : ''
}`}
ref={sessionHistoryListRef}
@@ -31,7 +31,7 @@ const SessionHistoryList: FunctionComponent<Props> = ({ noteHistoryController })
if (group.entries && group.entries.length) {
return (
<Fragment key={group.title}>
<div className="px-3 mt-2.5 mb-1 font-semibold uppercase text-passive-0 text-sm select-none">
<div className="mt-2.5 mb-1 select-none px-3 text-sm font-semibold uppercase text-passive-0">
{group.title}
</div>
{group.entries.map((entry, index) => (
@@ -51,7 +51,7 @@ const SessionHistoryList: FunctionComponent<Props> = ({ noteHistoryController })
return null
}
})}
{!sessionHistoryLength && <div className="text-sm text-passive-0 select-none">No session history found</div>}
{!sessionHistoryLength && <div className="select-none text-sm text-passive-0">No session history found</div>}
</div>
)
}