Styling fixes

frontend/src/components/modals/PluginInstallModal.tsx

@@ -1,7 +1,7 @@
 import { ConfirmModal, Navigation, QuickAccessTab } from 'decky-frontend-lib';
 import { FC, useState } from 'react';
-
 import { useTranslation } from 'react-i18next';
+
 const { t } = useTranslation('PluginInstallModal');
 
 interface PluginInstallModalProps {
@@ -29,13 +29,13 @@ const PluginInstallModal: FC<PluginInstallModalProps> = ({ artifact, version, ha
       onCancel={async () => {
         await onCancel();
       }}
-      strTitle={t("install_title", artifact)}
+      strTitle={t('install_title', artifact)}
-      strOKButtonText={loading ? t("install_button_processing") : t("install_button_idle")}
+      strOKButtonText={loading ? t('install_button_processing') : t('install_button_idle')}
     >
       {hash == 'False' ? (
         <h3 style={{ color: 'red' }}>!!!!NO HASH PROVIDED!!!!</h3>
       ) : (
-        t("install_desc", artifact, version)
+        t('install_desc', artifact, version)
       )}
     </ConfirmModal>
   );

frontend/src/components/store/PluginCard.tsx

@@ -100,7 +100,7 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
             plugin.description
           ) : (
             <span>
-              <i style={{ color: '#666' }}>{t("plugin_no_desc")}</i>
+              <i style={{ color: '#666' }}>{t('plugin_no_desc')}</i>
             </span>
           )}
         </span>
@@ -112,7 +112,7 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
               color: '#fee75c',
             }}
           >
-            <i>{t("plugin_full_access")}</i>{' '}
+            <i>{t('plugin_full_access')}</i>{' '}
             <a
               className="deckyStoreCardDescriptionRootLink"
               href="https://deckbrew.xyz/root"
@@ -149,7 +149,7 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
                   layout="below"
                   onClick={() => requestPluginInstall(plugin.name, plugin.versions[selectedOption])}
                 >
-                  <span className="deckyStoreCardInstallText">{t("plugin_install")}</span>
+                  <span className="deckyStoreCardInstallText">{t('plugin_install')}</span>
                 </ButtonItem>
               </div>
               <div
@@ -166,7 +166,7 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
                       label: version.name,
                     })) as SingleDropdownOption[]
                   }
-                  menuLabel={t("plugin_version_label") as string}
+                  menuLabel={t('plugin_version_label') as string}
                   selectedOption={selectedOption}
                   onChange={({ data }) => setSelectedOption(data)}
                 />

frontend/src/components/store/Store.tsx

@@ -9,15 +9,15 @@ import {
   findModule,
 } from 'decky-frontend-lib';
 import { FC, useEffect, useMemo, useState } from 'react';
-
 import { useTranslation } from 'react-i18next';
-const { t } = useTranslation('Store');
 
 import logo from '../../../assets/plugin_store.png';
 import Logger from '../../logger';
 import { StorePlugin, getPluginList } from '../../store';
 import PluginCard from './PluginCard';
 
+const { t } = useTranslation('Store');
+
 const logger = new Logger('FilePicker');
 
 const StorePage: FC<{}> = () => {
@@ -57,13 +57,13 @@ const StorePage: FC<{}> = () => {
             }}
             tabs={[
               {
-                title: t("store_tabs_title"),
+                title: t('store_tabs_title'),
                 content: <BrowseTab children={{ data: data }} />,
                 id: 'browse',
                 renderTabAddon: () => <span className={TabCount}>{data.length}</span>,
               },
               {
-                title: t("store_tabs_about"),
+                title: t('store_tabs_about'),
                 content: <AboutTab />,
                 id: 'about',
               },
@@ -78,8 +78,8 @@ const StorePage: FC<{}> = () => {
 const BrowseTab: FC<{ children: { data: StorePlugin[] } }> = (data) => {
   const sortOptions = useMemo(
     (): DropdownOption[] => [
-      { data: 1, label: t("store_tabs_alph_desc") },
+      { data: 1, label: t('store_tabs_alph_desc') },
-      { data: 2, label: t("store_tabs_alph_asce") },
+      { data: 2, label: t('store_tabs_alph_asce') },
     ],
     [],
   );
@@ -154,11 +154,11 @@ const BrowseTab: FC<{ children: { data: StorePlugin[] } }> = (data) => {
               maxWidth: '100%',
             }}
           >
-            <span className="DialogLabel">{t("store_sort_label")}</span>
+            <span className="DialogLabel">{t('store_sort_label')}</span>
             <Dropdown
-              menuLabel={t("store_sort_label") as string}
+              menuLabel={t('store_sort_label') as string}
               rgOptions={sortOptions}
-              strDefaultLabel={t("store_sort_label_def") as string}
+              strDefaultLabel={t('store_sort_label_def') as string}
               selectedOption={selectedSort}
               onChange={(e) => setSort(e.data)}
             />
@@ -168,7 +168,11 @@ const BrowseTab: FC<{ children: { data: StorePlugin[] } }> = (data) => {
       <div style={{ justifyContent: 'center', display: 'flex' }}>
         <Focusable style={{ display: 'flex', alignItems: 'center', width: '96%' }}>
           <div style={{ width: '100%' }}>
-            <TextField label={t("store_search_label")} value={searchFieldValue} onChange={(e) => setSearchValue(e.target.value)} />
+            <TextField
+              label={t('store_search_label')}
+              value={searchFieldValue}
+              onChange={(e) => setSearchValue(e.target.value)}
+            />
           </div>
         </Focusable>
       </div>
@@ -219,7 +223,7 @@ const AboutTab: FC<{}> = () => {
       />
       <span className="deckyStoreAboutHeader">Testing</span>
       <span>
-        {t("store_testing_cta")}{' '}
+        {t('store_testing_cta')}{' '}
         <a
           href="https://deckbrew.xyz/testing"
           target="_blank"
@@ -230,12 +234,10 @@ const AboutTab: FC<{}> = () => {
           deckbrew.xyz/testing
         </a>
       </span>
-      <span className="deckyStoreAboutHeader">{t("store_contrib_label")}</span>
+      <span className="deckyStoreAboutHeader">{t('store_contrib_label')}</span>
-      <span>
+      <span>{t('store_contrib_desc')}</span>
-        {t("store_contrib_desc")}
+      <span className="deckyStoreAboutHeader">{t('store_source_label')}</span>
-      </span>
+      <span>{t('store_source_desc')}</span>
-      <span className="deckyStoreAboutHeader">{t("store_source_label")}</span>
-      <span>{t("store_source_desc")}</span>
     </div>
   );
 };