From ef840bd2a78df8f1b0b9b3f0888d29aca76f1962 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 1 Aug 2023 20:39:49 +0800 Subject: [PATCH 01/12] Show the progress on library grid cards --- android/Omnivore/app/build.gradle | 47 ++++++++++--------- .../persistence/entities/SavedItem.kt | 2 +- android/Omnivore/build.gradle | 13 +++-- android/Omnivore/gradle.properties | 2 + .../gradle/wrapper/gradle-wrapper.properties | 2 +- apple/Omnivore.xcodeproj/project.pbxproj | 8 ++-- .../Views/WebReader/WebReaderContainer.swift | 8 ++++ .../Sources/Utils/ColorUtils.swift | 2 +- apple/OmnivoreKit/Sources/Views/Theme.swift | 1 - .../patterns/LibraryCards/LibraryGridCard.tsx | 2 +- 10 files changed, 50 insertions(+), 37 deletions(-) diff --git a/android/Omnivore/app/build.gradle b/android/Omnivore/app/build.gradle index 6e9adc739..ec5cb2458 100644 --- a/android/Omnivore/app/build.gradle +++ b/android/Omnivore/app/build.gradle @@ -58,8 +58,8 @@ android { } } compileOptions { - sourceCompatibility JavaVersion.VERSION_1_8 - targetCompatibility JavaVersion.VERSION_1_8 + sourceCompatibility kotlin_version + targetCompatibility kotlin_version } kotlinOptions { jvmTarget = '1.8' @@ -76,39 +76,40 @@ android { } } namespace 'app.omnivore.omnivore' + kapt { + generateStubs = true + } } dependencies { - def nav_version = "2.5.3" + def nav_version = '2.6.0' - implementation 'androidx.core:core-ktx:1.9.0' + implementation 'androidx.core:core-ktx:1.10.1' implementation "androidx.compose.ui:ui:$compose_version" implementation "androidx.compose.material:material:$compose_version" implementation "androidx.compose.ui:ui-tooling-preview:$compose_version" implementation "androidx.compose.material:material-icons-extended:$compose_version" - implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.5.1' - implementation 'androidx.activity:activity-compose:1.6.1' - implementation 'androidx.appcompat:appcompat:1.5.1' - implementation 'com.google.android.gms:play-services-base:18.1.0' + implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.6.1' + implementation 'androidx.activity:activity-compose:1.7.2' +// implementation 'androidx.appcompat:appcompat:1.6.1' + implementation 'com.google.android.gms:play-services-base:18.2.0' implementation "androidx.navigation:navigation-compose:$nav_version" testImplementation 'junit:junit:4.13.2' - androidTestImplementation 'androidx.test.ext:junit:1.1.4' - androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.0' + androidTestImplementation 'androidx.test.ext:junit:1.1.5' + androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1' androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version" debugImplementation "androidx.compose.ui:ui-tooling:$compose_version" debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_version" - // Jetpack Lifecycle deps - // ViewModel implementation("androidx.lifecycle:lifecycle-viewmodel-ktx:$lifecycle_version") // ViewModel utilities for Compose implementation("androidx.lifecycle:lifecycle-viewmodel-compose:$lifecycle_version") // LiveData implementation("androidx.lifecycle:lifecycle-livedata-ktx:$lifecycle_version") - implementation("androidx.compose.runtime:runtime-livedata:1.3.2") + implementation('androidx.compose.runtime:runtime-livedata:1.4.3') // Saved state module for ViewModel implementation("androidx.lifecycle:lifecycle-viewmodel-savedstate:$lifecycle_version") @@ -120,8 +121,8 @@ dependencies { implementation 'com.squareup.retrofit2:retrofit:2.9.0' // coroutines - implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.6.4' - implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-core:1.6.4' + implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.7.3' + implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-core:1.7.3' implementation "androidx.security:security-crypto:1.0.0" implementation "androidx.datastore:datastore-preferences:1.0.0" @@ -132,20 +133,20 @@ dependencies { implementation 'com.apollographql.apollo3:apollo-runtime:3.7.2' - implementation 'androidx.compose.material3:material3:1.1.0-alpha03' - implementation 'androidx.compose.material3:material3-window-size-class:1.1.0-alpha03' + implementation 'androidx.compose.material3:material3:1.2.0-alpha04' + implementation 'androidx.compose.material3:material3-window-size-class:1.2.0-alpha04' - implementation 'com.google.android.gms:play-services-auth:20.4.0' + implementation 'com.google.android.gms:play-services-auth:20.6.0' implementation "com.google.accompanist:accompanist-systemuicontroller:0.25.1" implementation "com.google.accompanist:accompanist-flowlayout:0.25.1" - implementation 'io.coil-kt:coil-compose:2.2.0' + implementation 'io.coil-kt:coil-compose:2.4.0' - implementation 'com.google.code.gson:gson:2.8.9' + implementation 'com.google.code.gson:gson:2.10.1' implementation 'com.pspdfkit:pspdfkit:8.4.1' - implementation 'com.segment.analytics.kotlin:android:1.10.0' - implementation 'io.intercom.android:intercom-sdk:15.1.0' + implementation 'com.segment.analytics.kotlin:android:1.13.0' + implementation 'io.intercom.android:intercom-sdk:15.1.4' // Room Deps implementation "androidx.room:room-runtime:$room_version" @@ -154,7 +155,7 @@ dependencies { kapt "androidx.room:room-compiler:$room_version" implementation 'com.github.jeziellago:compose-markdown:0.3.3' - implementation "io.github.dokar3:chiptextfield:0.4.7" + implementation 'io.github.dokar3:chiptextfield:0.4.8' } apollo { diff --git a/android/Omnivore/app/src/main/java/app/omnivore/omnivore/persistence/entities/SavedItem.kt b/android/Omnivore/app/src/main/java/app/omnivore/omnivore/persistence/entities/SavedItem.kt index 863ebe7ae..fdadbb9c6 100644 --- a/android/Omnivore/app/src/main/java/app/omnivore/omnivore/persistence/entities/SavedItem.kt +++ b/android/Omnivore/app/src/main/java/app/omnivore/omnivore/persistence/entities/SavedItem.kt @@ -178,7 +178,7 @@ interface SavedItemDao { "GROUP BY SavedItem.savedItemId " ) - suspend fun getById(savedItemId: String): SavedItemWithLabelsAndHighlights? + fun getById(savedItemId: String): SavedItemWithLabelsAndHighlights? @Transaction @Query( diff --git a/android/Omnivore/build.gradle b/android/Omnivore/build.gradle index b30de2bfc..bec62ba23 100644 --- a/android/Omnivore/build.gradle +++ b/android/Omnivore/build.gradle @@ -1,11 +1,14 @@ buildscript { ext { - compose_version = '1.3.1' - lifecycle_version = '2.5.1' - hilt_version = '2.44.2' - gradle_plugin_version = '7.4.2' - room_version = '2.4.3' + compose_version = '1.5.1' + lifecycle_version = '2.6.1' + hilt_version = '2.47' + gradle_plugin_version = '8.0.2' + room_version = '2.5.2' kotlin_version = '1.9.0' + + compileSdkVersion = 32 + targetSdkVersion = 32 } dependencies { diff --git a/android/Omnivore/gradle.properties b/android/Omnivore/gradle.properties index 3c7a8bd3a..cccbfe6f2 100644 --- a/android/Omnivore/gradle.properties +++ b/android/Omnivore/gradle.properties @@ -21,3 +21,5 @@ kotlin.code.style=official # resources declared in the library itself and none from the library's dependencies, # thereby reducing the size of the R class for that library android.nonTransitiveRClass=true +android.defaults.buildfeatures.buildconfig=true +android.nonFinalResIds=false diff --git a/android/Omnivore/gradle/wrapper/gradle-wrapper.properties b/android/Omnivore/gradle/wrapper/gradle-wrapper.properties index 5bf8d8081..94784177d 100644 --- a/android/Omnivore/gradle/wrapper/gradle-wrapper.properties +++ b/android/Omnivore/gradle/wrapper/gradle-wrapper.properties @@ -1,6 +1,6 @@ #Wed Aug 10 17:39:47 PDT 2022 distributionBase=GRADLE_USER_HOME -distributionUrl=https\://services.gradle.org/distributions/gradle-7.5-bin.zip +distributionUrl=https\://services.gradle.org/distributions/gradle-8.0-bin.zip distributionPath=wrapper/dists zipStorePath=wrapper/dists zipStoreBase=GRADLE_USER_HOME diff --git a/apple/Omnivore.xcodeproj/project.pbxproj b/apple/Omnivore.xcodeproj/project.pbxproj index 540bae3c6..2bbda4d0a 100644 --- a/apple/Omnivore.xcodeproj/project.pbxproj +++ b/apple/Omnivore.xcodeproj/project.pbxproj @@ -1400,7 +1400,7 @@ "@executable_path/../Frameworks", ); MACOSX_DEPLOYMENT_TARGET = 12.0; - MARKETING_VERSION = 1.28.0; + MARKETING_VERSION = 1.29.0; MTL_ENABLE_DEBUG_INFO = INCLUDE_SOURCE; MTL_FAST_MATH = YES; PRODUCT_BUNDLE_IDENTIFIER = app.omnivore.app; @@ -1435,7 +1435,7 @@ "@executable_path/../Frameworks", ); MACOSX_DEPLOYMENT_TARGET = 12.0; - MARKETING_VERSION = 1.28.0; + MARKETING_VERSION = 1.29.0; MTL_FAST_MATH = YES; PRODUCT_BUNDLE_IDENTIFIER = app.omnivore.app; PRODUCT_NAME = "$(TARGET_NAME)"; @@ -1490,7 +1490,7 @@ "$(inherited)", "@executable_path/Frameworks", ); - MARKETING_VERSION = 1.28.0; + MARKETING_VERSION = 1.29.0; PRODUCT_BUNDLE_IDENTIFIER = app.omnivore.app; PRODUCT_NAME = Omnivore; PROVISIONING_PROFILE_SPECIFIER = ""; @@ -1831,7 +1831,7 @@ "$(inherited)", "@executable_path/Frameworks", ); - MARKETING_VERSION = 1.28.0; + MARKETING_VERSION = 1.29.0; PRODUCT_BUNDLE_IDENTIFIER = app.omnivore.app; PRODUCT_NAME = Omnivore; PROVISIONING_PROFILE_SPECIFIER = ""; diff --git a/apple/OmnivoreKit/Sources/App/Views/WebReader/WebReaderContainer.swift b/apple/OmnivoreKit/Sources/App/Views/WebReader/WebReaderContainer.swift index 8560ee329..aab724892 100644 --- a/apple/OmnivoreKit/Sources/App/Views/WebReader/WebReaderContainer.swift +++ b/apple/OmnivoreKit/Sources/App/Views/WebReader/WebReaderContainer.swift @@ -275,6 +275,14 @@ struct WebReaderContainerView: View { Spacer() #endif + Button( + action: { showLabelsModal = true }, + label: { + Image.label + } + ) + .padding(.trailing, 4) + Button( action: { showNotebookView = true }, label: { diff --git a/apple/OmnivoreKit/Sources/Utils/ColorUtils.swift b/apple/OmnivoreKit/Sources/Utils/ColorUtils.swift index ac8de2840..724fca826 100644 --- a/apple/OmnivoreKit/Sources/Utils/ColorUtils.swift +++ b/apple/OmnivoreKit/Sources/Utils/ColorUtils.swift @@ -101,7 +101,7 @@ public extension Color { static var isDarkMode: Bool { #if os(iOS) - UITraitCollection.current.userInterfaceStyle == .dark + ThemeManager.currentTheme.isDark || UITraitCollection.current.userInterfaceStyle == .dark #else NSApp.effectiveAppearance.name == NSAppearance.Name.darkAqua #endif diff --git a/apple/OmnivoreKit/Sources/Views/Theme.swift b/apple/OmnivoreKit/Sources/Views/Theme.swift index 0351fdd70..88dd738b6 100644 --- a/apple/OmnivoreKit/Sources/Views/Theme.swift +++ b/apple/OmnivoreKit/Sources/Views/Theme.swift @@ -7,7 +7,6 @@ import Foundation import SwiftUI -import Utils public enum Theme: String, CaseIterable { case system = "System" diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx index 684ee6d37..b87b96e82 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx @@ -268,7 +268,7 @@ const LibraryGridCardContent = (props: LinkedItemCardProps): JSX.Element => { }} distribution="start" > - + Date: Tue, 1 Aug 2023 20:45:15 +0800 Subject: [PATCH 02/12] Show progress on grid, change separator for progress --- .../patterns/LibraryCards/LibraryCardStyles.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx index 34e28c50d..cf421f402 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx @@ -134,17 +134,17 @@ export function LibraryItemMetadata( Math.round((props.item.wordsCount ?? 0) / 235) )} min read` : null} + {highlightCount > 0 + ? ` • ${highlightCount} highlight${highlightCount > 1 ? 's' : ''}` + : null} {(props.showProgress && props.item.readingProgressPercent) ?? 0 > 0 ? ( <> - {` • `} + {` | `} {`${Math.round(props.item.readingProgressPercent)}%`} ) : null} - {highlightCount > 0 - ? ` • ${highlightCount} highlight${highlightCount > 1 ? 's' : ''}` - : null} ) } From ec1b14796a7ecd50454156ee4a0d892b35c89452 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Wed, 2 Aug 2023 13:11:16 +0800 Subject: [PATCH 03/12] Make the reader color full width (remove margins) --- packages/web/components/elements/LabelChip.tsx | 2 +- .../web/components/templates/article/ArticleContainer.tsx | 4 +++- packages/web/components/templates/reader/ReaderHeader.tsx | 2 +- packages/web/pages/[username]/[slug]/index.tsx | 4 ++-- 4 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/web/components/elements/LabelChip.tsx b/packages/web/components/elements/LabelChip.tsx index 332052c5e..a18ad44a0 100644 --- a/packages/web/components/elements/LabelChip.tsx +++ b/packages/web/components/elements/LabelChip.tsx @@ -17,7 +17,7 @@ export function LabelChip(props: LabelChipProps): JSX.Element { const isDark = isDarkTheme() const selectedBorder = isDark ? '#FFEA9F' : 'black' - const unSelectedBorder = isDark ? '#2A2A2A' : '#D9D9D9' + const unSelectedBorder = isDark ? '#2A2A2A' : '#F5F5F5' return ( { diff --git a/packages/web/components/templates/reader/ReaderHeader.tsx b/packages/web/components/templates/reader/ReaderHeader.tsx index 41e97ac89..d77445989 100644 --- a/packages/web/components/templates/reader/ReaderHeader.tsx +++ b/packages/web/components/templates/reader/ReaderHeader.tsx @@ -36,7 +36,7 @@ export function ReaderHeader(props: ReaderHeaderProps): JSX.Element { ? '1px solid $thBorderColor' : '1px solid transparent', '@xlgDown': { - bg: '$readerMargin', + bg: '$readerBg', pointerEvents: 'unset', borderBottom: '1px solid $thBorderColor', }, diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx index a4ccf1fc6..6f7a3ae94 100644 --- a/packages/web/pages/[username]/[slug]/index.tsx +++ b/packages/web/pages/[username]/[slug]/index.tsx @@ -462,7 +462,7 @@ export default function Home(): JSX.Element { css={{ width: '100%', height: '100%', - background: '$readerMargin', + background: '$readerBg', overflow: 'scroll', paddingTop: '80px', '@media print': { @@ -511,7 +511,7 @@ export default function Home(): JSX.Element { css={{ width: '100%', height: '100%', - background: '$readerMargin', + background: '$readerBg', overflow: 'scroll', paddingTop: '80px', }} From ebbc14f84198f8c21be3a9be43c4f2a8f15c76b7 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 3 Aug 2023 12:24:09 +0800 Subject: [PATCH 04/12] Sort labels in the left menu alphabetically --- .../components/templates/homeFeed/LibraryFilterMenu.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx index 9d1fe702b..5acde5b38 100644 --- a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx +++ b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx @@ -203,6 +203,12 @@ function Labels(props: LibraryFilterMenuProps): JSX.Element { initialValue: false, }) + const sortedLabels = useMemo(() => { + return labels.sort((left: Label, right: Label) => + left.name.localeCompare(right.name) + ) + }, [labels]) + return ( - {labels.slice(0, viewAll ? undefined : 4).map((item) => { + {sortedLabels.slice(0, viewAll ? undefined : 4).map((item) => { return })} From 97f422cf3f957071cc64df91afe68698f4ce577f Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 3 Aug 2023 13:21:46 +0800 Subject: [PATCH 05/12] Improve multiselect --- .../web/components/elements/ProgressBar.tsx | 4 +- .../patterns/LibraryCards/CardTypes.tsx | 4 +- .../LibraryCards/LibraryCardStyles.tsx | 37 +-- .../patterns/LibraryCards/LibraryGridCard.tsx | 188 ++++++------ .../LibraryCards/LibraryHighlightGridCard.tsx | 1 - .../LibraryCards/LibraryHoverActions.tsx | 2 - .../patterns/LibraryCards/LibraryListCard.tsx | 267 +++++++++++++----- .../components/templates/PrimaryLayout.tsx | 1 + .../web/components/templates/UploadModal.tsx | 2 - .../components/templates/article/Article.tsx | 1 - .../templates/article/HighlightsLayer.tsx | 4 - .../components/templates/article/Notebook.tsx | 1 - .../templates/homeFeed/HomeFeedContainer.tsx | 44 +-- .../templates/homeFeed/LibraryHeader.tsx | 114 +++++--- packages/web/next.config.js | 2 +- 15 files changed, 421 insertions(+), 251 deletions(-) diff --git a/packages/web/components/elements/ProgressBar.tsx b/packages/web/components/elements/ProgressBar.tsx index cc39172a5..a367bcd51 100644 --- a/packages/web/components/elements/ProgressBar.tsx +++ b/packages/web/components/elements/ProgressBar.tsx @@ -11,9 +11,8 @@ export function ProgressBar(props: ProgressBarProps): JSX.Element { return ( diff --git a/packages/web/components/patterns/LibraryCards/CardTypes.tsx b/packages/web/components/patterns/LibraryCards/CardTypes.tsx index 2c9077661..799509cb2 100644 --- a/packages/web/components/patterns/LibraryCards/CardTypes.tsx +++ b/packages/web/components/patterns/LibraryCards/CardTypes.tsx @@ -1,6 +1,7 @@ import { LayoutType } from '../../templates/homeFeed/HomeFeedContainer' import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery' import type { LibraryItemNode } from '../../../lib/networking/queries/useGetLibraryItemsQuery' +import { MultiSelectMode } from '../../templates/homeFeed/LibraryHeader' export type LinkedItemCardAction = | 'showDetail' @@ -23,9 +24,10 @@ export type LinkedItemCardProps = { handleAction: (action: LinkedItemCardAction) => void - inMultiSelect: boolean isChecked: boolean setIsChecked: (itemId: string, set: boolean) => void + multiSelectMode: MultiSelectMode + isHovered?: boolean } diff --git a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx index cf421f402..19fdf4e4a 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx @@ -1,8 +1,8 @@ import dayjs from 'dayjs' import relativeTime from 'dayjs/plugin/relativeTime' -import { useMemo } from 'react' +import { ChangeEvent, useMemo } from 'react' import { LibraryItemNode } from '../../../lib/networking/queries/useGetLibraryItemsQuery' -import { Box, SpanBox } from '../../elements/LayoutPrimitives' +import { Box, SpanBox, VStack } from '../../elements/LayoutPrimitives' dayjs.extend(relativeTime) @@ -25,7 +25,7 @@ export const MenuStyle = { export const MetaStyle = { width: '100%', color: '$thTextSubtle3', - fontSize: '13px', + fontSize: '12px', fontWeight: '400', fontFamily: '$display', } @@ -34,7 +34,7 @@ export const TitleStyle = { color: '$thTextContrast2', fontSize: '16px', fontWeight: '700', - lineHeight: '1.25', + lineHeight: '1', fontFamily: '$display', overflow: 'hidden', textOverflow: 'ellipsis', @@ -67,11 +67,11 @@ export const AuthorInfoStyle = { whiteSpace: 'nowrap', maxWidth: '240px', overflow: 'hidden', - height: '21px', color: '$thTextSubtle3', fontSize: '12px', fontWeight: '400', fontFamily: '$display', + lineHeight: '1', } export const timeAgo = (date: string | undefined): string => { @@ -137,14 +137,6 @@ export function LibraryItemMetadata( {highlightCount > 0 ? ` • ${highlightCount} highlight${highlightCount > 1 ? 's' : ''}` : null} - {(props.showProgress && props.item.readingProgressPercent) ?? 0 > 0 ? ( - <> - {` | `} - - {`${Math.round(props.item.readingProgressPercent)}%`} - - - ) : null} ) } @@ -156,10 +148,19 @@ type CardCheckBoxProps = { export function CardCheckbox(props: CardCheckBoxProps): JSX.Element { return ( - +
{ + event.stopPropagation() + }} + > + { + props.handleChanged() + }} + > +
) } diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx index b87b96e82..9ea58c51f 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx @@ -4,7 +4,7 @@ import type { LinkedItemCardProps } from './CardTypes' import { CoverImage } from '../../elements/CoverImage' import dayjs from 'dayjs' import relativeTime from 'dayjs/plugin/relativeTime' -import { useCallback, useState } from 'react' +import { ChangeEvent, useCallback, useState } from 'react' import Link from 'next/link' import { AuthorInfoStyle, @@ -29,6 +29,8 @@ import { import { CardMenu } from '../CardMenu' import { DotsThree } from 'phosphor-react' import { isTouchScreenDevice } from '../../../lib/deviceType' +import { ProgressBarOverlay } from './LibraryListCard' +import { FallbackImage } from './FallbackImage' dayjs.extend(relativeTime) @@ -115,38 +117,32 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element { setIsHovered(false) }} > - {props.inMultiSelect ? ( - - ) : ( - <> - {!isTouchScreenDevice() && ( - - - - )} - - - - - - + {!isTouchScreenDevice() && ( + + + )} + + + + + ) } @@ -189,25 +185,43 @@ const Fallback = (props: FallbackProps): JSX.Element => { type GridImageProps = { src?: string title?: string + readingProgress?: number } const GridImage = (props: GridImageProps): JSX.Element => { const [displayFallback, setDisplayFallback] = useState(props.src == undefined) - return displayFallback ? ( - - ) : ( - { - setDisplayFallback(true) - }} - /> + return ( + <> + {(props.readingProgress ?? 0) > 0 && ( + + )} + {displayFallback ? ( + + ) : ( + { + setDisplayFallback(true) + }} + /> + )} + ) } @@ -217,45 +231,55 @@ const LibraryGridCardContent = (props: LinkedItemCardProps): JSX.Element => { const originText = siteName(props.item.originalArticleUrl, props.item.url) const handleCheckChanged = useCallback(() => { - setIsChecked(item.id, !isChecked) - }, [setIsChecked, isChecked]) + const newValue = !isChecked + setIsChecked(item.id, newValue) + }, [setIsChecked, isChecked, props]) return ( - - {props.inMultiSelect ? ( - - - - ) : ( - - setMenuOpen(open)} - actionHandler={props.handleAction} - triggerElement={ - - } - /> - - )} + + + + + + setMenuOpen(open)} + actionHandler={props.handleAction} + triggerElement={ + + } + /> + { { const [menuOpen, setMenuOpen] = useState(false) - console.log(' props.isHovered || menuOpen', props.isHovered, menuOpen) - return ( - {props.inMultiSelect ? ( - - ) : ( - <> - {!isTouchScreenDevice() && ( - - - - )} - - - - - - + {!isTouchScreenDevice() && ( + + + )} + + + + + ) } +type ProgressBarOverlayProps = { + top: number + width: string + value: number + bottomRadius: string +} + +export const ProgressBarOverlay = ( + props: ProgressBarOverlayProps +): JSX.Element => { + return ( + + + + ) +} + +type ListImageProps = { + src?: string + title?: string + readingProgress?: number +} + +const ListImage = (props: ListImageProps): JSX.Element => { + const [displayFallback, setDisplayFallback] = useState(props.src == undefined) + + return ( + <> + {(props.readingProgress ?? 0) > 0 && ( + + )} + {displayFallback ? ( + + ) : ( + { + setDisplayFallback(true) + }} + /> + )} + + ) +} + export function LibraryListCardContent( props: LinkedItemCardProps ): JSX.Element { @@ -140,57 +216,96 @@ export function LibraryListCardContent( }, [isChecked, setIsChecked, item]) return ( - <> - - - {props.inMultiSelect ? ( - - - - ) : ( - - setMenuOpen(open)} - actionHandler={props.handleAction} - triggerElement={ - - } - /> - - )} - + + input': { + p: '0px', + m: '0px', + }, + }} + > + + + + + + + setMenuOpen(open)} + actionHandler={props.handleAction} + triggerElement={ + + } + /> + + - - {props.item.title} - - - {props.item.author} - {props.item.author && originText && ' | '} - {originText} - + + + + + {props.item.title} + + {props.item.author} + {props.item.author && originText && ' | '} + + {originText} + + + - + ) } diff --git a/packages/web/components/templates/PrimaryLayout.tsx b/packages/web/components/templates/PrimaryLayout.tsx index 74bd10dbd..c7368b2ae 100644 --- a/packages/web/components/templates/PrimaryLayout.tsx +++ b/packages/web/components/templates/PrimaryLayout.tsx @@ -11,6 +11,7 @@ import { logoutMutation } from '../../lib/networking/mutations/logoutMutation' import { setupAnalytics } from '../../lib/analytics' import { primaryCommands } from '../../lib/keyboardShortcuts/navigationShortcuts' import { applyStoredTheme } from '../../lib/themeUpdater' +import { theme } from '../tokens/stitches.config' type PrimaryLayoutProps = { children: ReactNode diff --git a/packages/web/components/templates/UploadModal.tsx b/packages/web/components/templates/UploadModal.tsx index 8fac6c53e..021210fa3 100644 --- a/packages/web/components/templates/UploadModal.tsx +++ b/packages/web/components/templates/UploadModal.tsx @@ -130,7 +130,6 @@ export function UploadModal(props: UploadModalProps): JSX.Element { Papa.parse(file.file, { step: function (row, parser) { - console.log('row: ', row) if (Array.isArray(row.data)) { try { if (row.data[0].trim().length < 1) { @@ -211,7 +210,6 @@ export function UploadModal(props: UploadModalProps): JSX.Element { ;(async () => { for (const file of addedFiles) { try { - console.log('using content type: ', file.file.type) const uploadInfo = await uploadSignedUrlForFile(file) if (!uploadInfo.uploadSignedUrl) { showErrorToast('No upload URL available') diff --git a/packages/web/components/templates/article/Article.tsx b/packages/web/components/templates/article/Article.tsx index 2b9c44da8..2ad51d320 100644 --- a/packages/web/components/templates/article/Article.tsx +++ b/packages/web/components/templates/article/Article.tsx @@ -192,7 +192,6 @@ export function Article(props: ArticleProps): JSX.Element { const img = element as HTMLImageElement const width = Number(img.getAttribute('data-omnivore-width')) const height = Number(img.getAttribute('data-omnivore-height')) - console.log('width and height: ', width, height) if (!isNaN(width) && !isNaN(height) && width < 100 && height < 100) { img.style.setProperty('width', `${width}px`) diff --git a/packages/web/components/templates/article/HighlightsLayer.tsx b/packages/web/components/templates/article/HighlightsLayer.tsx index 032b0838e..f095918f3 100644 --- a/packages/web/components/templates/article/HighlightsLayer.tsx +++ b/packages/web/components/templates/article/HighlightsLayer.tsx @@ -297,7 +297,6 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element { const { target, pageX, pageY } = event if (!target || (target as Node)?.nodeType !== Node.ELEMENT_NODE) { - console.log(' -- returning early from page tap') return } @@ -375,7 +374,6 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element { highlightIdAttribute ) const highlight = highlights.find(($0) => $0.id === id) - console.log('double tapped highlight: ', highlight) setFocusedHighlight(highlight) openNoteModal({ @@ -387,8 +385,6 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element { highlightNoteIdAttribute ) const highlight = highlights.find(($0) => $0.id === id) - console.log('double tapped highlight with note: ', highlight) - setFocusedHighlight(highlight) openNoteModal({ diff --git a/packages/web/components/templates/article/Notebook.tsx b/packages/web/components/templates/article/Notebook.tsx index 671b342ee..a4c1c0011 100644 --- a/packages/web/components/templates/article/Notebook.tsx +++ b/packages/web/components/templates/article/Notebook.tsx @@ -91,7 +91,6 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element { ) const createNote = useCallback((text: string) => { - console.log('creating note: ', newNoteId, noteState.current.isCreating) noteState.current.isCreating = true noteState.current.createStarted = new Date() ;(async () => { diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index 8c886fc91..57cba74b5 100644 --- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx +++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx @@ -84,11 +84,13 @@ export function HomeFeedContainer(): JSX.Element { const gridContainerRef = useRef(null) - const [labelsTarget, setLabelsTarget] = - useState(undefined) + const [labelsTarget, setLabelsTarget] = useState( + undefined + ) - const [notebookTarget, setNotebookTarget] = - useState(undefined) + const [notebookTarget, setNotebookTarget] = useState( + undefined + ) const [showAddLinkModal, setShowAddLinkModal] = useState(false) const [showEditTitleModal, setShowEditTitleModal] = useState(false) @@ -372,15 +374,12 @@ export function HomeFeedContainer(): JSX.Element { const [multiSelectMode, setMultiSelectMode] = useState('off') const selectActiveArticle = useCallback(() => { - console.log('selecting article: ', activeItem) if (activeItem) { if (multiSelectMode === 'off') { - console.log('setting ') setMultiSelectMode('some') } const itemId = activeItem.node.id const isChecked = itemIsChecked(itemId) - console.log('setting is checked: ', isChecked, itemId) setIsChecked(itemId, !isChecked) } }, [activeItem, multiSelectMode, checkedItems]) @@ -493,7 +492,6 @@ export function HomeFeedContainer(): JSX.Element { handleCardAction('set-labels', activeItem) break case 'openNotebook': - console.log('openNotebook: ', notebookTarget) handleCardAction('open-notebook', activeItem) break case 'sortDescending': @@ -553,7 +551,6 @@ export function HomeFeedContainer(): JSX.Element { name: 'Mark item as read', shortcut: ['m', 'r'], perform: () => { - console.log('mark read action') handleCardAction('mark-read', activeItem) }, }), @@ -612,8 +609,16 @@ export function HomeFeedContainer(): JSX.Element { checkedItems.splice(checkedItems.indexOf(itemId), 1) setCheckedItems([...checkedItems]) } + + if (set && multiSelectMode == 'off') { + setMultiSelectMode('some') + } + + if (checkedItems.length < 1) { + setMultiSelectMode('off') + } }, - [checkedItems] + [checkedItems, multiSelectMode, setMultiSelectMode] ) useEffect(() => { @@ -806,10 +811,12 @@ type HomeFeedContentProps = { item: LibraryItem | undefined ) => Promise - multiSelectMode: MultiSelectMode setIsChecked: (itemId: string, set: boolean) => void itemIsChecked: (itemId: string) => boolean + + multiSelectMode: MultiSelectMode setMultiSelectMode: (mode: MultiSelectMode) => void + numItemsSelected: number performMultiSelectAction: (action: BulkAction, labelIds?: string[]) => void @@ -861,7 +868,6 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { setShowAddLinkModal={props.setShowAddLinkModal} searchTerm={props.searchTerm} applySearchQuery={(searchQuery: string) => { - console.log('searching with searchQuery: ', searchQuery) props.applySearchQuery(searchQuery) }} showFilterMenu={showFilterMenu} @@ -880,7 +886,6 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { @@ -897,7 +902,9 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { type LibraryItemsLayoutProps = { layout: LayoutType viewer?: UserBasicData - inMultiSelect: boolean + + multiSelectMode: MultiSelectMode + setMultiSelectMode: (mode: MultiSelectMode) => void isChecked: (itemId: string) => boolean setIsChecked: (itemId: string, set: boolean) => void @@ -970,7 +977,7 @@ function LibraryItemsLayout(props: LibraryItemsLayoutProps): JSX.Element { setLinkToUnsubscribe={props.setLinkToUnsubscribe} setShowRemoveLinkConfirmation={setShowRemoveLinkConfirmation} actionHandler={props.actionHandler} - inMultiSelect={props.inMultiSelect} + multiSelectMode={props.multiSelectMode} /> )} {}} @@ -1095,9 +1103,9 @@ type LibraryItemsProps = { setLinkToUnsubscribe: (set: LibraryItem | undefined) => void setShowRemoveLinkConfirmation: (show: true) => void - inMultiSelect: boolean isChecked: (itemId: string) => boolean setIsChecked: (itemId: string, set: boolean) => void + multiSelectMode: MultiSelectMode actionHandler: ( action: LinkedItemCardAction, @@ -1186,7 +1194,7 @@ function LibraryItems(props: LibraryItemsProps): JSX.Element { viewer={props.viewer} isChecked={props.isChecked(linkedItem.node.id)} setIsChecked={props.setIsChecked} - inMultiSelect={props.inMultiSelect} + multiSelectMode={props.multiSelectMode} handleAction={(action: LinkedItemCardAction) => { if (action === 'delete') { props.setShowRemoveLinkConfirmation(true) diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx index a77d468cf..cb823203b 100644 --- a/packages/web/components/templates/homeFeed/LibraryHeader.tsx +++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx @@ -28,6 +28,7 @@ import { TrashIcon } from '../../elements/icons/TrashIcon' import { LabelIcon } from '../../elements/icons/LabelIcon' import { ListViewIcon } from '../../elements/icons/ListViewIcon' import { GridViewIcon } from '../../elements/icons/GridViewIcon' +import { CaretDownIcon } from '../../elements/icons/CaretDownIcon' export type MultiSelectMode = 'off' | 'none' | 'some' | 'visible' | 'search' @@ -377,9 +378,7 @@ type ControlButtonBoxProps = { applySearchQuery: (searchQuery: string) => void } -function MultiSelectControlButtonBox( - props: ControlButtonBoxProps -): JSX.Element { +function MultiSelectControls(props: ControlButtonBoxProps): JSX.Element { const [showConfirmDelete, setShowConfirmDelete] = useState(false) const [showLabelsModal, setShowLabelsModal] = useState(false) @@ -498,7 +497,7 @@ function SearchControlButtonBox( ) } -function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element { +const MuliSelectControl = (props: ControlButtonBoxProps): JSX.Element => { const [isChecked, setIsChecked] = useState(false) useEffect(() => { @@ -507,6 +506,69 @@ function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element { } }, [props.multiSelectMode]) + return ( + + + { + const newValue = !isChecked + props.setMultiSelectMode(newValue ? 'visible' : 'off') + setIsChecked(newValue) + }} + /> + + + } + > + { + setIsChecked(true) + props.setMultiSelectMode('visible') + }} + title="All" + /> + {/* { + setIsChecked(true) + props.setMultiSelectMode('search') + }} + title="All matching search" + /> */} + + + + + ) +} + +function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element { return ( <> + {props.multiSelectMode !== 'off' && ( - { - const newValue = !isChecked - props.setMultiSelectMode(newValue ? 'visible' : 'none') - setIsChecked(newValue) - }} - /> - - - } - > - { - setIsChecked(true) - props.setMultiSelectMode('visible') - }} - title="All" - /> - { - setIsChecked(true) - props.setMultiSelectMode('search') - }} - title="All matching search" - /> - - {props.numItemsSelected}{' '} selected @@ -597,7 +629,7 @@ function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element { )} {props.multiSelectMode !== 'off' ? ( <> - + ) : ( diff --git a/packages/web/next.config.js b/packages/web/next.config.js index e6ebad8fa..9477bdcc6 100644 --- a/packages/web/next.config.js +++ b/packages/web/next.config.js @@ -6,7 +6,7 @@ const ContentSecurityPolicy = ` font-src 'self' data: cdn.jsdelivr.net https://js.intercomcdn.com https://fonts.intercomcdn.com; form-action 'self' ${process.env.NEXT_PUBLIC_SERVER_BASE_URL} https://getpocket.com/auth/authorize https://intercom.help https://api-iam.intercom.io https://api-iam.eu.intercom.io https://api-iam.au.intercom.io; frame-ancestors 'none'; - frame-src self accounts.google.com platform.twitter.com www.youtube.com www.youtube-nocookie.com; + frame-src 'self' accounts.google.com platform.twitter.com www.youtube.com www.youtube-nocookie.com; manifest-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' accounts.google.com widget.intercom.io js.intercomcdn.com platform.twitter.com cdnjs.cloudflare.com cdn.jsdelivr.net cdn.segment.com; style-src 'self' 'unsafe-inline' accounts.google.com cdnjs.cloudflare.com; From 1feee4d7cfb333af90f59ecc1945525e77f2fe0b Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 3 Aug 2023 13:27:21 +0800 Subject: [PATCH 06/12] Add missing files --- .../elements/icons/CaretDownIcon.tsx | 29 + .../patterns/LibraryCards/FallbackImage.tsx | 1575 +++++++++++++++++ 2 files changed, 1604 insertions(+) create mode 100644 packages/web/components/elements/icons/CaretDownIcon.tsx create mode 100644 packages/web/components/patterns/LibraryCards/FallbackImage.tsx diff --git a/packages/web/components/elements/icons/CaretDownIcon.tsx b/packages/web/components/elements/icons/CaretDownIcon.tsx new file mode 100644 index 000000000..f83a5e286 --- /dev/null +++ b/packages/web/components/elements/icons/CaretDownIcon.tsx @@ -0,0 +1,29 @@ +/* eslint-disable functional/no-class */ +/* eslint-disable functional/no-this-expression */ +import { IconProps } from './IconProps' + +import React from 'react' + +export class CaretDownIcon extends React.Component { + render() { + const size = (this.props.size || 26).toString() + const color = (this.props.color || '#2A2A2A').toString() + + return ( + + + + + + ) + } +} diff --git a/packages/web/components/patterns/LibraryCards/FallbackImage.tsx b/packages/web/components/patterns/LibraryCards/FallbackImage.tsx new file mode 100644 index 000000000..83edd385c --- /dev/null +++ b/packages/web/components/patterns/LibraryCards/FallbackImage.tsx @@ -0,0 +1,1575 @@ +import { VStack } from '../../elements/LayoutPrimitives' + +type FallbackImageProps = { + title: string + width: string + height: string + fontSize: string +} + +export const FallbackImage = (props: FallbackImageProps): JSX.Element => { + const idx = (Math.abs(hashCode(props.title)) % Colors.length) - 1 + const color = Colors[idx] + + return ( + + {props.title.substring(0, 1).toLocaleUpperCase()} + + ) +} + +const hashCode = (str: string) => { + let hash = 0 + for (let i = 0; i < str.length; i++) { + hash = ((hash << 5) - hash + str.charCodeAt(i)) & 0xffffffff + } + return hash +} + +const Colors = [ + { + name: 'Omolon', + colors: ['#091E3A', '#2F80ED', '#2D9EE0'], + }, + { + name: 'Farhan', + colors: ['#9400D3', '#4B0082'], + }, + { + name: 'Purple', + colors: ['#c84e89', '#F15F79'], + }, + { + name: 'Ibtesam', + colors: ['#00F5A0', '#00D9F5'], + }, + { + name: 'Radioactive Heat', + colors: ['#F7941E', '#72C6EF', '#00A651'], + }, + { + name: 'The Sky And The Sea', + colors: ['#F7941E', '#004E8F'], + }, + { + name: 'From Ice To Fire', + colors: ['#72C6EF', '#004E8F'], + }, + + { + name: 'Blue & Orange', + colors: ['#FD8112', '#0085CA'], + }, + { + name: 'Purple Dream', + colors: ['#bf5ae0', '#a811da'], + }, + { + name: 'Blu', + colors: ['#00416A', '#E4E5E6'], + }, + { + name: 'Summer Breeze', + colors: ['#fbed96', '#abecd6'], + }, + { + name: 'Ver', + colors: ['#FFE000', '#799F0C'], + }, + { + name: 'Ver Black', + colors: ['#F7F8F8', '#ACBB78'], + }, + { + name: 'Combi', + colors: ['#00416A', '#799F0C', '#FFE000'], + }, + { + name: 'Anwar', + colors: ['#334d50', '#cbcaa5'], + }, + { + name: 'Bluelagoo', + colors: ['#0052D4', '#4364F7', '#6FB1FC'], + }, + { + name: 'Lunada', + colors: ['#5433FF', '#20BDFF', '#A5FECB'], + }, + { + name: 'Reaqua', + colors: ['#799F0C', '#ACBB78'], + }, + { + name: 'Mango', + colors: ['#ffe259', '#ffa751'], + }, + { + name: 'Bupe', + colors: ['#00416A', '#E4E5E6'], + }, + { + name: 'Rea', + colors: ['#FFE000', '#799F0C'], + }, + { + name: 'Windy', + colors: ['#acb6e5', '#86fde8'], + }, + { + name: 'Royal Blue', + colors: ['#536976', '#292E49'], + }, + { + name: 'Royal Blue + Petrol', + colors: ['#BBD2C5', '#536976', '#292E49'], + }, + { + name: 'Copper', + colors: ['#B79891', '#94716B'], + }, + { + name: 'Anamnisar', + colors: ['#9796f0', '#fbc7d4'], + }, + { + name: 'Petrol', + colors: ['#BBD2C5', '#536976'], + }, + { + name: 'Sky', + colors: ['#076585', '#fff'], + }, + { + name: 'Sel', + colors: ['#00467F', '#A5CC82'], + }, + { + name: 'Afternoon', + colors: ['#000C40', '#607D8B'], + }, + { + name: 'Skyline', + colors: ['#1488CC', '#2B32B2'], + }, + { + name: 'DIMIGO', + colors: ['#ec008c', '#fc6767'], + }, + { + name: 'Purple Love', + colors: ['#cc2b5e', '#753a88'], + }, + { + name: 'Sexy Blue', + colors: ['#2193b0', '#6dd5ed'], + }, + { + name: 'Blooker20', + colors: ['#e65c00', '#F9D423'], + }, + { + name: 'Sea Blue', + colors: ['#2b5876', '#4e4376'], + }, + { + name: 'Nimvelo', + colors: ['#314755', '#26a0da'], + }, + { + name: 'Hazel', + colors: ['#77A1D3', '#79CBCA', '#E684AE'], + }, + { + name: 'Noon to Dusk', + colors: ['#ff6e7f', '#bfe9ff'], + }, + { + name: 'YouTube', + colors: ['#e52d27', '#b31217'], + }, + { + name: 'Cool Brown', + colors: ['#603813', '#b29f94'], + }, + { + name: 'Harmonic Energy', + colors: ['#16A085', '#F4D03F'], + }, + { + name: 'Playing with Reds', + colors: ['#D31027', '#EA384D'], + }, + { + name: 'Sunny Days', + colors: ['#EDE574', '#E1F5C4'], + }, + { + name: 'Green Beach', + colors: ['#02AAB0', '#00CDAC'], + }, + { + name: 'Intuitive Purple', + colors: ['#DA22FF', '#9733EE'], + }, + { + name: 'Emerald Water', + colors: ['#348F50', '#56B4D3'], + }, + { + name: 'Lemon Twist', + colors: ['#3CA55C', '#B5AC49'], + }, + { + name: 'Monte Carlo', + colors: ['#CC95C0', '#DBD4B4', '#7AA1D2'], + }, + { + name: 'Horizon', + colors: ['#003973', '#E5E5BE'], + }, + { + name: 'Rose Water', + colors: ['#E55D87', '#5FC3E4'], + }, + { + name: 'Frozen', + colors: ['#403B4A', '#E7E9BB'], + }, + { + name: 'Mango Pulp', + colors: ['#F09819', '#EDDE5D'], + }, + { + name: 'Bloody Mary', + colors: ['#FF512F', '#DD2476'], + }, + { + name: 'Aubergine', + colors: ['#AA076B', '#61045F'], + }, + { + name: 'Aqua Marine', + colors: ['#1A2980', '#26D0CE'], + }, + { + name: 'Sunrise', + colors: ['#FF512F', '#F09819'], + }, + { + name: 'Purple Paradise', + colors: ['#1D2B64', '#F8CDDA'], + }, + { + name: 'Stripe', + colors: ['#1FA2FF', '#12D8FA', '#A6FFCB'], + }, + { + name: 'Sea Weed', + colors: ['#4CB8C4', '#3CD3AD'], + }, + { + name: 'Pinky', + colors: ['#DD5E89', '#F7BB97'], + }, + { + name: 'Cherry', + colors: ['#EB3349', '#F45C43'], + }, + { + name: 'Mojito', + colors: ['#1D976C', '#93F9B9'], + }, + { + name: 'Juicy Orange', + colors: ['#FF8008', '#FFC837'], + }, + { + name: 'Mirage', + colors: ['#16222A', '#3A6073'], + }, + { + name: 'Steel Gray', + colors: ['#1F1C2C', '#928DAB'], + }, + { + name: 'Kashmir', + colors: ['#614385', '#516395'], + }, + { + name: 'Electric Violet', + colors: ['#4776E6', '#8E54E9'], + }, + { + name: 'Venice Blue', + colors: ['#085078', '#85D8CE'], + }, + { + name: 'Bora Bora', + colors: ['#2BC0E4', '#EAECC6'], + }, + { + name: 'Moss', + colors: ['#134E5E', '#71B280'], + }, + { + name: 'Shroom Haze', + colors: ['#5C258D', '#4389A2'], + }, + { + name: 'Mystic', + colors: ['#757F9A', '#D7DDE8'], + }, + { + name: 'Midnight City', + colors: ['#232526', '#414345'], + }, + { + name: 'Sea Blizz', + colors: ['#1CD8D2', '#93EDC7'], + }, + { + name: 'Opa', + colors: ['#3D7EAA', '#FFE47A'], + }, + { + name: 'Titanium', + colors: ['#283048', '#859398'], + }, + { + name: 'Mantle', + colors: ['#24C6DC', '#514A9D'], + }, + { + name: 'Dracula', + colors: ['#DC2424', '#4A569D'], + }, + { + name: 'Peach', + colors: ['#ED4264', '#FFEDBC'], + }, + { + name: 'Moonrise', + colors: ['#DAE2F8', '#D6A4A4'], + }, + { + name: 'Clouds', + colors: ['#ECE9E6', '#FFFFFF'], + }, + { + name: 'Stellar', + colors: ['#7474BF', '#348AC7'], + }, + { + name: 'Bourbon', + colors: ['#EC6F66', '#F3A183'], + }, + { + name: 'Calm Darya', + colors: ['#5f2c82', '#49a09d'], + }, + { + name: 'Influenza', + colors: ['#C04848', '#480048'], + }, + { + name: 'Shrimpy', + colors: ['#e43a15', '#e65245'], + }, + { + name: 'Army', + colors: ['#414d0b', '#727a17'], + }, + { + name: 'Miaka', + colors: ['#FC354C', '#0ABFBC'], + }, + { + name: 'Pinot Noir', + colors: ['#4b6cb7', '#182848'], + }, + { + name: 'Day Tripper', + colors: ['#f857a6', '#ff5858'], + }, + { + name: 'Namn', + colors: ['#a73737', '#7a2828'], + }, + { + name: 'Blurry Beach', + colors: ['#d53369', '#cbad6d'], + }, + { + name: 'Vasily', + colors: ['#e9d362', '#333333'], + }, + { + name: 'A Lost Memory', + colors: ['#DE6262', '#FFB88C'], + }, + { + name: 'Petrichor', + colors: ['#666600', '#999966'], + }, + { + name: 'Jonquil', + colors: ['#FFEEEE', '#DDEFBB'], + }, + { + name: 'Sirius Tamed', + colors: ['#EFEFBB', '#D4D3DD'], + }, + { + name: 'Kyoto', + colors: ['#c21500', '#ffc500'], + }, + { + name: 'Misty Meadow', + colors: ['#215f00', '#e4e4d9'], + }, + { + name: 'Aqualicious', + colors: ['#50C9C3', '#96DEDA'], + }, + { + name: 'Moor', + colors: ['#616161', '#9bc5c3'], + }, + { + name: 'Almost', + colors: ['#ddd6f3', '#faaca8'], + }, + { + name: 'Forever Lost', + colors: ['#5D4157', '#A8CABA'], + }, + { + name: 'Winter', + colors: ['#E6DADA', '#274046'], + }, + { + name: 'Nelson', + colors: ['#f2709c', '#ff9472'], + }, + { + name: 'Autumn', + colors: ['#DAD299', '#B0DAB9'], + }, + { + name: 'Candy', + colors: ['#D3959B', '#BFE6BA'], + }, + { + name: 'Reef', + colors: ['#00d2ff', '#3a7bd5'], + }, + { + name: 'The Strain', + colors: ['#870000', '#190A05'], + }, + { + name: 'Dirty Fog', + colors: ['#B993D6', '#8CA6DB'], + }, + { + name: 'Earthly', + colors: ['#649173', '#DBD5A4'], + }, + { + name: 'Virgin', + colors: ['#C9FFBF', '#FFAFBD'], + }, + { + name: 'Ash', + colors: ['#606c88', '#3f4c6b'], + }, + { + name: 'Cherryblossoms', + colors: ['#FBD3E9', '#BB377D'], + }, + { + name: 'Parklife', + colors: ['#ADD100', '#7B920A'], + }, + { + name: 'Dance To Forget', + colors: ['#FF4E50', '#F9D423'], + }, + { + name: 'Starfall', + colors: ['#F0C27B', '#4B1248'], + }, + { + name: 'Red Mist', + colors: ['#000000', '#e74c3c'], + }, + { + name: 'Teal Love', + colors: ['#AAFFA9', '#11FFBD'], + }, + { + name: 'Neon Life', + colors: ['#B3FFAB', '#12FFF7'], + }, + { + name: 'Man of Steel', + colors: ['#780206', '#061161'], + }, + { + name: 'Amethyst', + colors: ['#9D50BB', '#6E48AA'], + }, + { + name: 'Cheer Up Emo Kid', + colors: ['#556270', '#FF6B6B'], + }, + { + name: 'Shore', + colors: ['#70e1f5', '#ffd194'], + }, + { + name: 'Facebook Messenger', + colors: ['#00c6ff', '#0072ff'], + }, + { + name: 'SoundCloud', + colors: ['#fe8c00', '#f83600'], + }, + { + name: 'Behongo', + colors: ['#52c234', '#061700'], + }, + { + name: 'ServQuick', + colors: ['#485563', '#29323c'], + }, + { + name: 'Friday', + colors: ['#83a4d4', '#b6fbff'], + }, + { + name: 'Martini', + colors: ['#FDFC47', '#24FE41'], + }, + { + name: 'Metallic Toad', + colors: ['#abbaab', '#ffffff'], + }, + { + name: 'Between The Clouds', + colors: ['#73C8A9', '#373B44'], + }, + { + name: 'Crazy Orange I', + colors: ['#D38312', '#A83279'], + }, + { + name: 'Hersheys', + colors: ['#1e130c', '#9a8478'], + }, + { + name: 'Talking To Mice Elf', + colors: ['#948E99', '#2E1437'], + }, + { + name: 'Purple Bliss', + colors: ['#360033', '#0b8793'], + }, + { + name: 'Predawn', + colors: ['#FFA17F', '#00223E'], + }, + { + name: 'Endless River', + colors: ['#43cea2', '#185a9d'], + }, + { + name: 'Pastel Orange at the Sun', + colors: ['#ffb347', '#ffcc33'], + }, + { + name: 'Twitch', + colors: ['#6441A5', '#2a0845'], + }, + { + name: 'Atlas', + colors: ['#FEAC5E', '#C779D0', '#4BC0C8'], + }, + { + name: 'Instagram', + colors: ['#833ab4', '#fd1d1d', '#fcb045'], + }, + { + name: 'Flickr', + colors: ['#ff0084', '#33001b'], + }, + { + name: 'Vine', + colors: ['#00bf8f', '#001510'], + }, + { + name: 'Turquoise flow', + colors: ['#136a8a', '#267871'], + }, + { + name: 'Portrait', + colors: ['#8e9eab', '#eef2f3'], + }, + { + name: 'Virgin America', + colors: ['#7b4397', '#dc2430'], + }, + { + name: 'Koko Caramel', + colors: ['#D1913C', '#FFD194'], + }, + { + name: 'Fresh Turboscent', + colors: ['#F1F2B5', '#135058'], + }, + { + name: 'Green to dark', + colors: ['#6A9113', '#141517'], + }, + { + name: 'Ukraine', + colors: ['#004FF9', '#FFF94C'], + }, + { + name: 'Curiosity blue', + colors: ['#525252', '#3d72b4'], + }, + { + name: 'Dark Knight', + colors: ['#BA8B02', '#181818'], + }, + { + name: 'Piglet', + colors: ['#ee9ca7', '#ffdde1'], + }, + { + name: 'Lizard', + colors: ['#304352', '#d7d2cc'], + }, + { + name: 'Sage Persuasion', + colors: ['#CCCCB2', '#757519'], + }, + { + name: 'Between Night and Day', + colors: ['#2c3e50', '#3498db'], + }, + { + name: 'Timber', + colors: ['#fc00ff', '#00dbde'], + }, + { + name: 'Passion', + colors: ['#e53935', '#e35d5b'], + }, + { + name: 'Clear Sky', + colors: ['#005C97', '#363795'], + }, + { + name: 'Master Card', + colors: ['#f46b45', '#eea849'], + }, + { + name: 'Back To Earth', + colors: ['#00C9FF', '#92FE9D'], + }, + { + name: 'Deep Purple', + colors: ['#673AB7', '#512DA8'], + }, + { + name: 'Little Leaf', + colors: ['#76b852', '#8DC26F'], + }, + { + name: 'Netflix', + colors: ['#8E0E00', '#1F1C18'], + }, + { + name: 'Light Orange', + colors: ['#FFB75E', '#ED8F03'], + }, + { + name: 'Green and Blue', + colors: ['#c2e59c', '#64b3f4'], + }, + { + name: 'Poncho', + colors: ['#403A3E', '#BE5869'], + }, + { + name: 'Back to the Future', + colors: ['#C02425', '#F0CB35'], + }, + { + name: 'Blush', + colors: ['#B24592', '#F15F79'], + }, + { + name: 'Inbox', + colors: ['#457fca', '#5691c8'], + }, + { + name: 'Purplin', + colors: ['#6a3093', '#a044ff'], + }, + { + name: 'Pale Wood', + colors: ['#eacda3', '#d6ae7b'], + }, + { + name: 'Haikus', + colors: ['#fd746c', '#ff9068'], + }, + { + name: 'Pizelex', + colors: ['#114357', '#F29492'], + }, + { + name: 'Joomla', + colors: ['#1e3c72', '#2a5298'], + }, + { + name: 'Christmas', + colors: ['#2F7336', '#AA3A38'], + }, + { + name: 'Minnesota Vikings', + colors: ['#5614B0', '#DBD65C'], + }, + { + name: 'Miami Dolphins', + colors: ['#4DA0B0', '#D39D38'], + }, + { + name: 'Forest', + colors: ['#5A3F37', '#2C7744'], + }, + { + name: 'Nighthawk', + colors: ['#2980b9', '#2c3e50'], + }, + { + name: 'Superman', + colors: ['#0099F7', '#F11712'], + }, + { + name: 'Suzy', + colors: ['#834d9b', '#d04ed6'], + }, + { + name: 'Dark Skies', + colors: ['#4B79A1', '#283E51'], + }, + { + name: 'Deep Space', + colors: ['#000000', '#434343'], + }, + { + name: 'Decent', + colors: ['#4CA1AF', '#C4E0E5'], + }, + { + name: 'Colors Of Sky', + colors: ['#E0EAFC', '#CFDEF3'], + }, + { + name: 'Purple White', + colors: ['#BA5370', '#F4E2D8'], + }, + { + name: 'Ali', + colors: ['#ff4b1f', '#1fddff'], + }, + { + name: 'Alihossein', + colors: ['#f7ff00', '#db36a4'], + }, + { + name: 'Shahabi', + colors: ['#a80077', '#66ff00'], + }, + { + name: 'Red Ocean', + colors: ['#1D4350', '#A43931'], + }, + { + name: 'Tranquil', + colors: ['#EECDA3', '#EF629F'], + }, + { + name: 'Transfile', + colors: ['#16BFFD', '#CB3066'], + }, + + { + name: 'Sylvia', + colors: ['#ff4b1f', '#ff9068'], + }, + { + name: 'Sweet Morning', + colors: ['#FF5F6D', '#FFC371'], + }, + { + name: 'Politics', + colors: ['#2196f3', '#f44336'], + }, + { + name: 'Bright Vault', + colors: ['#00d2ff', '#928DAB'], + }, + { + name: 'Solid Vault', + colors: ['#3a7bd5', '#3a6073'], + }, + { + name: 'Sunset', + colors: ['#0B486B', '#F56217'], + }, + { + name: 'Grapefruit Sunset', + colors: ['#e96443', '#904e95'], + }, + { + name: 'Deep Sea Space', + colors: ['#2C3E50', '#4CA1AF'], + }, + { + name: 'Dusk', + colors: ['#2C3E50', '#FD746C'], + }, + { + name: 'Minimal Red', + colors: ['#F00000', '#DC281E'], + }, + { + name: 'Royal', + colors: ['#141E30', '#243B55'], + }, + { + name: 'Mauve', + colors: ['#42275a', '#734b6d'], + }, + { + name: 'Frost', + colors: ['#000428', '#004e92'], + }, + { + name: 'Lush', + colors: ['#56ab2f', '#a8e063'], + }, + { + name: 'Firewatch', + colors: ['#cb2d3e', '#ef473a'], + }, + { + name: 'Sherbert', + colors: ['#f79d00', '#64f38c'], + }, + { + name: 'Blood Red', + colors: ['#f85032', '#e73827'], + }, + { + name: 'Sun on the Horizon', + colors: ['#fceabb', '#f8b500'], + }, + { + name: 'IIIT Delhi', + colors: ['#808080', '#3fada8'], + }, + { + name: 'Jupiter', + colors: ['#ffd89b', '#19547b'], + }, + { + name: '50 Shades of Grey', + colors: ['#bdc3c7', '#2c3e50'], + }, + { + name: 'Dania', + colors: ['#BE93C5', '#7BC6CC'], + }, + { + name: 'Limeade', + colors: ['#A1FFCE', '#FAFFD1'], + }, + { + name: 'Disco', + colors: ['#4ECDC4', '#556270'], + }, + { + name: 'Love Couple', + colors: ['#3a6186', '#89253e'], + }, + { + name: 'Azure Pop', + colors: ['#ef32d9', '#89fffd'], + }, + { + name: 'Nepal', + colors: ['#de6161', '#2657eb'], + }, + { + name: 'Cosmic Fusion', + colors: ['#ff00cc', '#333399'], + }, + { + name: 'Snapchat', + colors: ['#fffc00', '#ffffff'], + }, + { + name: "Ed's Sunset Gradient", + colors: ['#ff7e5f', '#feb47b'], + }, + { + name: 'Brady Brady Fun Fun', + colors: ['#00c3ff', '#ffff1c'], + }, + { + name: 'Black Rosé', + colors: ['#f4c4f3', '#fc67fa'], + }, + { + name: "80's Purple", + colors: ['#41295a', '#2F0743'], + }, + { + name: 'Radar', + colors: ['#A770EF', '#CF8BF3', '#FDB99B'], + }, + { + name: 'Ibiza Sunset', + colors: ['#ee0979', '#ff6a00'], + }, + { + name: 'Dawn', + colors: ['#F3904F', '#3B4371'], + }, + { + name: 'Mild', + colors: ['#67B26F', '#4ca2cd'], + }, + { + name: 'Vice City', + colors: ['#3494E6', '#EC6EAD'], + }, + { + name: 'Jaipur', + colors: ['#DBE6F6', '#C5796D'], + }, + { + name: 'Jodhpur', + colors: ['#9CECFB', '#65C7F7', '#0052D4'], + }, + { + name: 'Cocoaa Ice', + colors: ['#c0c0aa', '#1cefff'], + }, + { + name: 'EasyMed', + colors: ['#DCE35B', '#45B649'], + }, + { + name: 'Rose Colored Lenses', + colors: ['#E8CBC0', '#636FA4'], + }, + { + name: 'What lies Beyond', + colors: ['#F0F2F0', '#000C40'], + }, + { + name: 'Roseanna', + colors: ['#FFAFBD', '#ffc3a0'], + }, + { + name: 'Honey Dew', + colors: ['#43C6AC', '#F8FFAE'], + }, + { + name: 'Under the Lake', + colors: ['#093028', '#237A57'], + }, + { + name: 'The Blue Lagoon', + colors: ['#43C6AC', '#191654'], + }, + { + name: 'Can You Feel The Love Tonight', + colors: ['#4568DC', '#B06AB3'], + }, + { + name: 'Very Blue', + colors: ['#0575E6', '#021B79'], + }, + { + name: 'Love and Liberty', + colors: ['#200122', '#6f0000'], + }, + { + name: 'Orca', + colors: ['#44A08D', '#093637'], + }, + { + name: 'Venice', + colors: ['#6190E8', '#A7BFE8'], + }, + { + name: 'Pacific Dream', + colors: ['#34e89e', '#0f3443'], + }, + { + name: 'Learning and Leading', + colors: ['#F7971E', '#FFD200'], + }, + { + name: 'Celestial', + colors: ['#C33764', '#1D2671'], + }, + { + name: 'Purplepine', + colors: ['#20002c', '#cbb4d4'], + }, + { + name: 'Sha la la', + colors: ['#D66D75', '#E29587'], + }, + { + name: 'Mini', + colors: ['#30E8BF', '#FF8235'], + }, + { + name: 'Maldives', + colors: ['#B2FEFA', '#0ED2F7'], + }, + { + name: 'Cinnamint', + colors: ['#4AC29A', '#BDFFF3'], + }, + { + name: 'Html', + colors: ['#E44D26', '#F16529'], + }, + { + name: 'Coal', + colors: ['#EB5757', '#000000'], + }, + { + name: 'Sunkist', + colors: ['#F2994A', '#F2C94C'], + }, + { + name: 'Blue Skies', + colors: ['#56CCF2', '#2F80ED'], + }, + { + name: 'Chitty Chitty Bang Bang', + colors: ['#007991', '#78ffd6'], + }, + { + name: 'Visions of Grandeur', + colors: ['#000046', '#1CB5E0'], + }, + { + name: 'Crystal Clear', + colors: ['#159957', '#155799'], + }, + { + name: 'Mello', + colors: ['#c0392b', '#8e44ad'], + }, + { + name: 'Compare Now', + colors: ['#EF3B36', '#FFFFFF'], + }, + { + name: 'Meridian', + colors: ['#283c86', '#45a247'], + }, + { + name: 'Relay', + colors: ['#3A1C71', '#D76D77', '#FFAF7B'], + }, + { + name: 'Alive', + colors: ['#CB356B', '#BD3F32'], + }, + { + name: 'Scooter', + colors: ['#36D1DC', '#5B86E5'], + }, + { + name: 'Terminal', + colors: ['#000000', '#0f9b0f'], + }, + { + name: 'Telegram', + colors: ['#1c92d2', '#f2fcfe'], + }, + { + name: 'Crimson Tide', + colors: ['#642B73', '#C6426E'], + }, + { + name: 'Socialive', + colors: ['#06beb6', '#48b1bf'], + }, + { + name: 'Subu', + colors: ['#0cebeb', '#20e3b2', '#29ffc6'], + }, + { + name: 'Broken Hearts', + colors: ['#d9a7c7', '#fffcdc'], + }, + { + name: 'Kimoby Is The New Blue', + colors: ['#396afc', '#2948ff'], + }, + { + name: 'Dull', + colors: ['#C9D6FF', '#E2E2E2'], + }, + { + name: 'Purpink', + colors: ['#7F00FF', '#E100FF'], + }, + { + name: 'Orange Coral', + colors: ['#ff9966', '#ff5e62'], + }, + { + name: 'Summer', + colors: ['#22c1c3', '#fdbb2d'], + }, + { + name: 'King Yna', + colors: ['#1a2a6c', '#b21f1f', '#fdbb2d'], + }, + { + name: 'Velvet Sun', + colors: ['#e1eec3', '#f05053'], + }, + { + name: 'Zinc', + colors: ['#ADA996', '#F2F2F2', '#DBDBDB', '#EAEAEA'], + }, + { + name: 'Hydrogen', + colors: ['#667db6', '#0082c8', '#0082c8', '#667db6'], + }, + { + name: 'Argon', + colors: ['#03001e', '#7303c0', '#ec38bc', '#fdeff9'], + }, + { + name: 'Lithium', + colors: ['#6D6027', '#D3CBB8'], + }, + { + name: 'Digital Water', + colors: ['#74ebd5', '#ACB6E5'], + }, + { + name: 'Orange Fun', + colors: ['#fc4a1a', '#f7b733'], + }, + { + name: 'Rainbow Blue', + colors: ['#00F260', '#0575E6'], + }, + { + name: 'Pink Flavour', + colors: ['#800080', '#ffc0cb'], + }, + { + name: 'Sulphur', + colors: ['#CAC531', '#F3F9A7'], + }, + { + name: 'Selenium', + colors: ['#3C3B3F', '#605C3C'], + }, + { + name: 'Delicate', + colors: ['#D3CCE3', '#E9E4F0'], + }, + { + name: 'Ohhappiness', + colors: ['#00b09b', '#96c93d'], + }, + { + name: 'Lawrencium', + colors: ['#0f0c29', '#302b63', '#24243e'], + }, + { + name: 'Relaxing red', + colors: ['#fffbd5', '#b20a2c'], + }, + { + name: 'Taran Tado', + colors: ['#23074d', '#cc5333'], + }, + { + name: 'Bighead', + colors: ['#c94b4b', '#4b134f'], + }, + { + name: 'Sublime Vivid', + colors: ['#FC466B', '#3F5EFB'], + }, + { + name: 'Sublime Light', + colors: ['#FC5C7D', '#6A82FB'], + }, + { + name: 'Pun Yeta', + colors: ['#108dc7', '#ef8e38'], + }, + { + name: 'Quepal', + colors: ['#11998e', '#38ef7d'], + }, + { + name: 'Sand to Blue', + colors: ['#3E5151', '#DECBA4'], + }, + { + name: 'Wedding Day Blues', + colors: ['#40E0D0', '#FF8C00', '#FF0080'], + }, + { + name: 'Shifter', + colors: ['#bc4e9c', '#f80759'], + }, + { + name: 'Red Sunset', + colors: ['#355C7D', '#6C5B7B', '#C06C84'], + }, + { + name: 'Moon Purple', + colors: ['#4e54c8', '#8f94fb'], + }, + { + name: 'Pure Lust', + colors: ['#333333', '#dd1818'], + }, + { + name: 'Slight Ocean View', + colors: ['#a8c0ff', '#3f2b96'], + }, + { + name: 'eXpresso', + colors: ['#ad5389', '#3c1053'], + }, + { + name: 'Shifty', + colors: ['#636363', '#a2ab58'], + }, + { + name: 'Vanusa', + colors: ['#DA4453', '#89216B'], + }, + { + name: 'Evening Night', + colors: ['#005AA7', '#FFFDE4'], + }, + { + name: 'Magic', + colors: ['#59C173', '#a17fe0', '#5D26C1'], + }, + { + name: 'Margo', + colors: ['#FFEFBA', '#FFFFFF'], + }, + { + name: 'Blue Raspberry', + colors: ['#00B4DB', '#0083B0'], + }, + { + name: 'Citrus Peel', + colors: ['#FDC830', '#F37335'], + }, + { + name: 'Sin City Red', + colors: ['#ED213A', '#93291E'], + }, + { + name: 'Rastafari', + colors: ['#1E9600', '#FFF200', '#FF0000'], + }, + { + name: 'Summer Dog', + colors: ['#a8ff78', '#78ffd6'], + }, + { + name: 'Wiretap', + colors: ['#8A2387', '#E94057', '#F27121'], + }, + { + name: 'Burning Orange', + colors: ['#FF416C', '#FF4B2B'], + }, + { + name: 'Ultra Voilet', + colors: ['#654ea3', '#eaafc8'], + }, + { + name: 'By Design', + colors: ['#009FFF', '#ec2F4B'], + }, + { + name: 'Kyoo Tah', + colors: ['#544a7d', '#ffd452'], + }, + { + name: 'Kye Meh', + colors: ['#8360c3', '#2ebf91'], + }, + { + name: 'Kyoo Pal', + colors: ['#dd3e54', '#6be585'], + }, + { + name: 'Metapolis', + colors: ['#659999', '#f4791f'], + }, + { + name: 'Flare', + colors: ['#f12711', '#f5af19'], + }, + { + name: 'Witching Hour', + colors: ['#c31432', '#240b36'], + }, + { + name: 'Azur Lane', + colors: ['#7F7FD5', '#86A8E7', '#91EAE4'], + }, + { + name: 'Neuromancer', + colors: ['#f953c6', '#b91d73'], + }, + { + name: 'Harvey', + colors: ['#1f4037', '#99f2c8'], + }, + { + name: 'Amin', + colors: ['#8E2DE2', '#4A00E0'], + }, + { + name: 'Memariani', + colors: ['#aa4b6b', '#6b6b83', '#3b8d99'], + }, + { + name: 'Yoda', + colors: ['#FF0099', '#493240'], + }, + { + name: 'Cool Sky', + colors: ['#2980B9', '#6DD5FA', '#FFFFFF'], + }, + { + name: 'Dark Ocean', + colors: ['#373B44', '#4286f4'], + }, + { + name: 'Evening Sunshine', + colors: ['#b92b27', '#1565C0'], + }, + { + name: 'JShine', + colors: ['#12c2e9', '#c471ed', '#f64f59'], + }, + { + name: 'Moonlit Asteroid', + colors: ['#0F2027', '#203A43', '#2C5364'], + }, + { + name: 'MegaTron', + colors: ['#C6FFDD', '#FBD786', '#f7797d'], + }, + { + name: 'Cool Blues', + colors: ['#2193b0', '#6dd5ed'], + }, + { + name: 'Piggy Pink', + colors: ['#ee9ca7', '#ffdde1'], + }, + { + name: 'Grade Grey', + colors: ['#bdc3c7', '#2c3e50'], + }, + { + name: 'Telko', + colors: ['#F36222', '#5CB644', '#007FC3'], + }, + { + name: 'Zenta', + colors: ['#2A2D3E', '#FECB6E'], + }, + { + name: 'Electric Peacock', + colors: ['#8a2be2', '#0000cd', '#228b22', '#ccff00'], + }, + { + name: 'Under Blue Green', + colors: ['#051937', '#004d7a', '#008793', '#00bf72', '#a8eb12'], + }, + { + name: 'Lensod', + colors: ['#6025F5', '#FF5555'], + }, + { + name: 'Newspaper', + colors: ['#8a2be2', '#ffa500', '#f8f8ff'], + }, + { + name: 'Dark Blue Gradient', + colors: ['#2774ae', '#002E5D', '#002E5D'], + }, + { + name: 'Dark Blu Two', + colors: ['#004680', '#4484BA'], + }, + { + name: 'Lemon Lime', + colors: ['#7ec6bc', '#ebe717'], + }, + { + name: 'Beleko', + colors: ['#ff1e56', '#f9c942', '#1e90ff'], + }, + { + name: 'Mango Papaya', + colors: ['#de8a41', '#2ada53'], + }, + { + name: 'Unicorn Rainbow', + colors: ['#f7f0ac', '#acf7f0', '#f0acf7'], + }, + { + name: 'Flame', + colors: ['#ff0000', '#fdcf58'], + }, + { + name: 'Blue Red', + colors: ['#36B1C7', '#960B33'], + }, + { + name: 'Twitter', + colors: ['#1DA1F2', '#009ffc'], + }, + { + name: 'Blooze', + colors: ['#6da6be', '#4b859e', '#6da6be'], + }, + { + name: 'Blue Slate', + colors: ['#B5B9FF', '#2B2C49'], + }, + { + name: 'Space Light Green', + colors: ['#9FA0A8', '#5C7852'], + }, + { + name: 'Flower', + colors: ['#DCFFBD', '#CC86D1'], + }, + { + name: 'Elate The Euge', + colors: ['#8BDEDA', '43ADD0', '998EE0', 'E17DC2', 'EF9393'], + }, + { + name: 'Peach Sea', + colors: ['#E6AE8C', '#A8CECF'], + }, + { + name: 'Abbas', + colors: ['#00fff0', '#0083fe'], + }, + { + name: 'Winter Woods', + colors: ['#333333', '#a2ab58', '#A43931'], + }, + { + name: 'Ameena', + colors: ['#0c0c6d', '#de512b', '#98d0c1', '#5bb226', '#023c0d'], + }, + { + name: 'Emerald Sea', + colors: ['#05386b', '#5cdb95'], + }, + { + name: 'Bleem', + colors: ['#4284DB', '#29EAC4'], + }, + { + name: 'Coffee Gold', + colors: ['#554023', '#c99846'], + }, + { + name: 'Compass', + colors: ['#516b8b', '#056b3b'], + }, + { + name: "Andreuzza's", + colors: ['#D70652', '#FF025E'], + }, + { + name: 'Moonwalker', + colors: ['#152331', '#000000'], + }, + { + name: 'Whinehouse', + colors: ['#f7f7f7', '#b9a0a0', '#794747', '#4e2020', '#111111'], + }, + { + name: 'Hyper Blue', + colors: ['#59CDE9', '#0A2A88'], + }, + { + name: 'Racker', + colors: ['#EB0000', '#95008A', '#3300FC'], + }, + { + name: 'After the Rain', + colors: ['#ff75c3', '#ffa647', '#ffe83f', '#9fff5b', '#70e2ff', '#cd93ff'], + }, + { + name: 'Neon Green', + colors: ['#81ff8a', '#64965e'], + }, + { + name: 'Dusty Grass', + colors: ['#d4fc79', '#96e6a1'], + }, + { + name: 'Visual Blue', + colors: ['#003d4d', '#00c996'], + }, +] From 40266422abc2666e6e447ecc00c07dd85a215da4 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 3 Aug 2023 13:36:13 +0800 Subject: [PATCH 07/12] Fix imports --- .../web/components/patterns/LibraryCards/LibraryGridCard.tsx | 3 +-- .../web/components/patterns/LibraryCards/LibraryListCard.tsx | 1 - 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx index 9ea58c51f..4c2b63732 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx @@ -4,12 +4,11 @@ import type { LinkedItemCardProps } from './CardTypes' import { CoverImage } from '../../elements/CoverImage' import dayjs from 'dayjs' import relativeTime from 'dayjs/plugin/relativeTime' -import { ChangeEvent, useCallback, useState } from 'react' +import { useCallback, useState } from 'react' import Link from 'next/link' import { AuthorInfoStyle, CardCheckbox, - DescriptionStyle, LibraryItemMetadata, MetaStyle, siteName, diff --git a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx index c40708eb5..be39fe6c2 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx @@ -11,7 +11,6 @@ import { siteName, TitleStyle, MenuStyle, - Fallback, } from './LibraryCardStyles' import { sortedLabels } from '../../../lib/labelsSort' import { LIBRARY_LEFT_MENU_WIDTH } from '../../templates/homeFeed/LibraryFilterMenu' From 1ff80df4219179597cc5978530aab29ad5f94419 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 3 Aug 2023 13:52:16 +0800 Subject: [PATCH 08/12] Remove unused prop --- packages/web/components/templates/homeFeed/HomeFeedContainer.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index 57cba74b5..48e8b57fb 100644 --- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx +++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx @@ -1032,7 +1032,6 @@ function LibraryItemsLayout(props: LibraryItemsLayoutProps): JSX.Element { viewer={props.viewer} layout="GRID_LAYOUT" multiSelectMode={props.multiSelectMode} - setMultiSelectMode={props.setMultiSelectMode} isChecked={false} // eslint-disable-next-line @typescript-eslint/no-empty-function setIsChecked={() => {}} From 4f1c9b9ae2cce8e1ef338ecdc1b48fdcf9a47e09 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 3 Aug 2023 14:51:06 +0800 Subject: [PATCH 09/12] Revert Android changes --- android/Omnivore/app/build.gradle | 47 +++++++++---------- .../persistence/entities/SavedItem.kt | 2 +- android/Omnivore/build.gradle | 13 ++--- android/Omnivore/gradle.properties | 2 - .../gradle/wrapper/gradle-wrapper.properties | 2 +- 5 files changed, 30 insertions(+), 36 deletions(-) diff --git a/android/Omnivore/app/build.gradle b/android/Omnivore/app/build.gradle index ec5cb2458..6e9adc739 100644 --- a/android/Omnivore/app/build.gradle +++ b/android/Omnivore/app/build.gradle @@ -58,8 +58,8 @@ android { } } compileOptions { - sourceCompatibility kotlin_version - targetCompatibility kotlin_version + sourceCompatibility JavaVersion.VERSION_1_8 + targetCompatibility JavaVersion.VERSION_1_8 } kotlinOptions { jvmTarget = '1.8' @@ -76,40 +76,39 @@ android { } } namespace 'app.omnivore.omnivore' - kapt { - generateStubs = true - } } dependencies { - def nav_version = '2.6.0' + def nav_version = "2.5.3" - implementation 'androidx.core:core-ktx:1.10.1' + implementation 'androidx.core:core-ktx:1.9.0' implementation "androidx.compose.ui:ui:$compose_version" implementation "androidx.compose.material:material:$compose_version" implementation "androidx.compose.ui:ui-tooling-preview:$compose_version" implementation "androidx.compose.material:material-icons-extended:$compose_version" - implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.6.1' - implementation 'androidx.activity:activity-compose:1.7.2' -// implementation 'androidx.appcompat:appcompat:1.6.1' - implementation 'com.google.android.gms:play-services-base:18.2.0' + implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.5.1' + implementation 'androidx.activity:activity-compose:1.6.1' + implementation 'androidx.appcompat:appcompat:1.5.1' + implementation 'com.google.android.gms:play-services-base:18.1.0' implementation "androidx.navigation:navigation-compose:$nav_version" testImplementation 'junit:junit:4.13.2' - androidTestImplementation 'androidx.test.ext:junit:1.1.5' - androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1' + androidTestImplementation 'androidx.test.ext:junit:1.1.4' + androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.0' androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version" debugImplementation "androidx.compose.ui:ui-tooling:$compose_version" debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_version" + // Jetpack Lifecycle deps + // ViewModel implementation("androidx.lifecycle:lifecycle-viewmodel-ktx:$lifecycle_version") // ViewModel utilities for Compose implementation("androidx.lifecycle:lifecycle-viewmodel-compose:$lifecycle_version") // LiveData implementation("androidx.lifecycle:lifecycle-livedata-ktx:$lifecycle_version") - implementation('androidx.compose.runtime:runtime-livedata:1.4.3') + implementation("androidx.compose.runtime:runtime-livedata:1.3.2") // Saved state module for ViewModel implementation("androidx.lifecycle:lifecycle-viewmodel-savedstate:$lifecycle_version") @@ -121,8 +120,8 @@ dependencies { implementation 'com.squareup.retrofit2:retrofit:2.9.0' // coroutines - implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.7.3' - implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-core:1.7.3' + implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.6.4' + implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-core:1.6.4' implementation "androidx.security:security-crypto:1.0.0" implementation "androidx.datastore:datastore-preferences:1.0.0" @@ -133,20 +132,20 @@ dependencies { implementation 'com.apollographql.apollo3:apollo-runtime:3.7.2' - implementation 'androidx.compose.material3:material3:1.2.0-alpha04' - implementation 'androidx.compose.material3:material3-window-size-class:1.2.0-alpha04' + implementation 'androidx.compose.material3:material3:1.1.0-alpha03' + implementation 'androidx.compose.material3:material3-window-size-class:1.1.0-alpha03' - implementation 'com.google.android.gms:play-services-auth:20.6.0' + implementation 'com.google.android.gms:play-services-auth:20.4.0' implementation "com.google.accompanist:accompanist-systemuicontroller:0.25.1" implementation "com.google.accompanist:accompanist-flowlayout:0.25.1" - implementation 'io.coil-kt:coil-compose:2.4.0' + implementation 'io.coil-kt:coil-compose:2.2.0' - implementation 'com.google.code.gson:gson:2.10.1' + implementation 'com.google.code.gson:gson:2.8.9' implementation 'com.pspdfkit:pspdfkit:8.4.1' - implementation 'com.segment.analytics.kotlin:android:1.13.0' - implementation 'io.intercom.android:intercom-sdk:15.1.4' + implementation 'com.segment.analytics.kotlin:android:1.10.0' + implementation 'io.intercom.android:intercom-sdk:15.1.0' // Room Deps implementation "androidx.room:room-runtime:$room_version" @@ -155,7 +154,7 @@ dependencies { kapt "androidx.room:room-compiler:$room_version" implementation 'com.github.jeziellago:compose-markdown:0.3.3' - implementation 'io.github.dokar3:chiptextfield:0.4.8' + implementation "io.github.dokar3:chiptextfield:0.4.7" } apollo { diff --git a/android/Omnivore/app/src/main/java/app/omnivore/omnivore/persistence/entities/SavedItem.kt b/android/Omnivore/app/src/main/java/app/omnivore/omnivore/persistence/entities/SavedItem.kt index fdadbb9c6..863ebe7ae 100644 --- a/android/Omnivore/app/src/main/java/app/omnivore/omnivore/persistence/entities/SavedItem.kt +++ b/android/Omnivore/app/src/main/java/app/omnivore/omnivore/persistence/entities/SavedItem.kt @@ -178,7 +178,7 @@ interface SavedItemDao { "GROUP BY SavedItem.savedItemId " ) - fun getById(savedItemId: String): SavedItemWithLabelsAndHighlights? + suspend fun getById(savedItemId: String): SavedItemWithLabelsAndHighlights? @Transaction @Query( diff --git a/android/Omnivore/build.gradle b/android/Omnivore/build.gradle index bec62ba23..b30de2bfc 100644 --- a/android/Omnivore/build.gradle +++ b/android/Omnivore/build.gradle @@ -1,14 +1,11 @@ buildscript { ext { - compose_version = '1.5.1' - lifecycle_version = '2.6.1' - hilt_version = '2.47' - gradle_plugin_version = '8.0.2' - room_version = '2.5.2' + compose_version = '1.3.1' + lifecycle_version = '2.5.1' + hilt_version = '2.44.2' + gradle_plugin_version = '7.4.2' + room_version = '2.4.3' kotlin_version = '1.9.0' - - compileSdkVersion = 32 - targetSdkVersion = 32 } dependencies { diff --git a/android/Omnivore/gradle.properties b/android/Omnivore/gradle.properties index cccbfe6f2..3c7a8bd3a 100644 --- a/android/Omnivore/gradle.properties +++ b/android/Omnivore/gradle.properties @@ -21,5 +21,3 @@ kotlin.code.style=official # resources declared in the library itself and none from the library's dependencies, # thereby reducing the size of the R class for that library android.nonTransitiveRClass=true -android.defaults.buildfeatures.buildconfig=true -android.nonFinalResIds=false diff --git a/android/Omnivore/gradle/wrapper/gradle-wrapper.properties b/android/Omnivore/gradle/wrapper/gradle-wrapper.properties index 94784177d..5bf8d8081 100644 --- a/android/Omnivore/gradle/wrapper/gradle-wrapper.properties +++ b/android/Omnivore/gradle/wrapper/gradle-wrapper.properties @@ -1,6 +1,6 @@ #Wed Aug 10 17:39:47 PDT 2022 distributionBase=GRADLE_USER_HOME -distributionUrl=https\://services.gradle.org/distributions/gradle-8.0-bin.zip +distributionUrl=https\://services.gradle.org/distributions/gradle-7.5-bin.zip distributionPath=wrapper/dists zipStorePath=wrapper/dists zipStoreBase=GRADLE_USER_HOME From dd09ef184ab8c238ec03283c298d68b10abd4e3d Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 3 Aug 2023 14:54:33 +0800 Subject: [PATCH 10/12] Revert iOS changes --- apple/OmnivoreKit/Sources/Utils/ColorUtils.swift | 2 +- apple/OmnivoreKit/Sources/Views/Theme.swift | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/apple/OmnivoreKit/Sources/Utils/ColorUtils.swift b/apple/OmnivoreKit/Sources/Utils/ColorUtils.swift index 724fca826..ac8de2840 100644 --- a/apple/OmnivoreKit/Sources/Utils/ColorUtils.swift +++ b/apple/OmnivoreKit/Sources/Utils/ColorUtils.swift @@ -101,7 +101,7 @@ public extension Color { static var isDarkMode: Bool { #if os(iOS) - ThemeManager.currentTheme.isDark || UITraitCollection.current.userInterfaceStyle == .dark + UITraitCollection.current.userInterfaceStyle == .dark #else NSApp.effectiveAppearance.name == NSAppearance.Name.darkAqua #endif diff --git a/apple/OmnivoreKit/Sources/Views/Theme.swift b/apple/OmnivoreKit/Sources/Views/Theme.swift index 88dd738b6..0351fdd70 100644 --- a/apple/OmnivoreKit/Sources/Views/Theme.swift +++ b/apple/OmnivoreKit/Sources/Views/Theme.swift @@ -7,6 +7,7 @@ import Foundation import SwiftUI +import Utils public enum Theme: String, CaseIterable { case system = "System" From 4095cc7c1ae7a1346f71c7da85f1646e2641f2b2 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 3 Aug 2023 14:56:07 +0800 Subject: [PATCH 11/12] Remove dead code --- .../elements/ProgressBarVertical.tsx | 33 ------------------- .../patterns/LibraryCards/LibraryGridCard.tsx | 30 ----------------- 2 files changed, 63 deletions(-) delete mode 100644 packages/web/components/elements/ProgressBarVertical.tsx diff --git a/packages/web/components/elements/ProgressBarVertical.tsx b/packages/web/components/elements/ProgressBarVertical.tsx deleted file mode 100644 index aaa451de7..000000000 --- a/packages/web/components/elements/ProgressBarVertical.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { Box } from './../elements/LayoutPrimitives' - -type ProgressBarVProps = { - fillPercentage: number - fillColor: string - backgroundColor: string - borderRadius: string - height?: string -} - -export function ProgressBarVertical(props: ProgressBarVProps): JSX.Element { - return ( - - - - ) -} diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx index 4c2b63732..14c915ebf 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx @@ -33,36 +33,6 @@ import { FallbackImage } from './FallbackImage' dayjs.extend(relativeTime) -type ProgressBarProps = { - fillPercentage: number - fillColor: string - backgroundColor: string - borderRadius: string -} - -export function ProgressBar(props: ProgressBarProps): JSX.Element { - return ( - - - - ) -} - export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element { const [isHovered, setIsHovered] = useState(false) const [isOpen, setIsOpen] = useState(false) From ff51d311e32d47629c03d3637d775174a10484f7 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 3 Aug 2023 14:57:28 +0800 Subject: [PATCH 12/12] Remove unused import --- packages/web/components/templates/PrimaryLayout.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/web/components/templates/PrimaryLayout.tsx b/packages/web/components/templates/PrimaryLayout.tsx index c7368b2ae..74bd10dbd 100644 --- a/packages/web/components/templates/PrimaryLayout.tsx +++ b/packages/web/components/templates/PrimaryLayout.tsx @@ -11,7 +11,6 @@ import { logoutMutation } from '../../lib/networking/mutations/logoutMutation' import { setupAnalytics } from '../../lib/analytics' import { primaryCommands } from '../../lib/keyboardShortcuts/navigationShortcuts' import { applyStoredTheme } from '../../lib/themeUpdater' -import { theme } from '../tokens/stitches.config' type PrimaryLayoutProps = { children: ReactNode