diff --git a/src/hooks/persisted/usePlugins.ts b/src/hooks/persisted/usePlugins.ts index efc18c94..b522fb16 100644 --- a/src/hooks/persisted/usePlugins.ts +++ b/src/hooks/persisted/usePlugins.ts @@ -1,5 +1,6 @@ import { locale } from 'expo-localization'; import { Language, languagesMapping } from '@utils/constants/languages'; +import { orderBy } from 'lodash-es'; import { useMMKVObject } from 'react-native-mmkv'; import { PluginItem } from '@plugins/types'; import { @@ -50,7 +51,7 @@ export default function usePlugins() { ); setFilteredAvailablePlugins( filter.reduce((pre, cur) => { - pre[cur] = availablePlugins[cur]; + pre[cur] = orderBy(availablePlugins[cur], 'name'); return pre; }, {} as PluginsMap), ); diff --git a/src/screens/browse/components/PluginCard.tsx b/src/screens/browse/components/PluginCard.tsx index 07630ece..a7e056bc 100644 --- a/src/screens/browse/components/PluginCard.tsx +++ b/src/screens/browse/components/PluginCard.tsx @@ -120,7 +120,11 @@ const PluginCard: React.FC = ({ theme={theme} /> ) : ( - + )} @@ -135,7 +139,7 @@ const styles = StyleSheet.create({ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', - padding: 16, + paddingHorizontal: 16, paddingVertical: 12, }, icon: { @@ -148,7 +152,6 @@ const styles = StyleSheet.create({ marginLeft: 16, }, addition: { - textAlign: 'left', fontSize: 12, }, name: { @@ -157,12 +160,12 @@ const styles = StyleSheet.create({ flexRow: { flexDirection: 'row', alignItems: 'center', - flex: 7, }, buttonGroup: { - flex: 3, flexDirection: 'row', - alignItems: 'center', - justifyContent: 'flex-end', + }, + spinner: { + marginRight: 12, + marginLeft: 4, }, });