adjust some small store stylings (#471)

backend/locales/en-US.json

@@ -9,8 +9,8 @@
     },
     "Developer": {
         "5secreload": "Reloading in 5 seconds",
-        "disabling": "Disabling",
-        "enabling": "Enabling"
+        "disabling": "Disabling React DevTools",
+        "enabling": "Enabling React DevTools"
     },
     "FilePickerIndex": {
         "folder": {

backend/locales/it-IT.json

@@ -8,9 +8,9 @@
         }
     },
     "Developer": {
-        "5secreload": "Ricaricando in 5 secondi",
-        "disabling": "Disabilitando",
-        "enabling": "Abilitando"
+        "5secreload": "Ricarico in 5 secondi",
+        "disabling": "Disabilito i tools di React",
+        "enabling": "Abilito i tools di React"
     },
     "FilePickerIndex": {
         "folder": {

frontend/src/components/store/PluginCard.tsx

@@ -6,7 +6,7 @@ import {
   SingleDropdownOption,
   SuspensefulImage,
 } from 'decky-frontend-lib';
-import { FC, useState } from 'react';
+import { CSSProperties, FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { InstallType } from '../../plugin';
@@ -18,7 +18,7 @@ interface PluginCardProps {
 
 const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
   const [selectedOption, setSelectedOption] = useState<number>(0);
-  const root: boolean = plugin.tags.some((tag) => tag === 'root');
+  const root = plugin.tags.some((tag) => tag === 'root');
 
   const { t } = useTranslation();
 
@@ -30,7 +30,6 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
         marginRight: '20px',
         marginBottom: '20px',
         display: 'flex',
-        alignItems: 'center',
       }}
     >
       <div
@@ -59,91 +58,90 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
           width: 'calc(100% - 320px)', // The calc is here so that the info section doesn't expand into the image
           display: 'flex',
           flexDirection: 'column',
-          height: '100%',
+          justifyContent: 'space-between',
           marginLeft: '1em',
-          justifyContent: 'center',
+          gap: '10px',
         }}
       >
-        <span
-          className="deckyStoreCardTitle"
-          style={{
-            fontSize: '1.25em',
-            fontWeight: 'bold',
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            width: '90%',
-          }}
-        >
-          {plugin.name}
-        </span>
-        <span
-          className="deckyStoreCardAuthor"
-          style={{
-            marginRight: 'auto',
-            fontSize: '1em',
-          }}
-        >
-          {plugin.author}
-        </span>
-        <span
-          className="deckyStoreCardDescription"
-          style={{
-            fontSize: '13px',
-            color: '#969696',
-            WebkitLineClamp: root ? '2' : '3',
-            WebkitBoxOrient: 'vertical',
-            overflow: 'hidden',
-            display: '-webkit-box',
-          }}
-        >
-          {plugin.description ? (
-            plugin.description
-          ) : (
-            <span>
-              <i style={{ color: '#666' }}>{t('PluginCard.plugin_no_desc')}</i>
-            </span>
-          )}
-        </span>
-        {root && (
+        <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
           <span
-            className="deckyStoreCardDescription deckyStoreCardDescriptionRoot"
+            className="deckyStoreCardTitle"
             style={{
-              fontSize: '13px',
-              color: '#fee75c',
+              fontSize: '1.25em',
+              fontWeight: 'bold',
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              width: '90%',
             }}
           >
-            <i>{t('PluginCard.plugin_full_access')}</i>{' '}
-            <a
-              className="deckyStoreCardDescriptionRootLink"
-              href="https://deckbrew.xyz/root"
-              target="_blank"
+            {plugin.name}
+          </span>
+          <span
+            className="deckyStoreCardAuthor"
+            style={{
+              marginRight: 'auto',
+              fontSize: '1em',
+            }}
+          >
+            {plugin.author}
+          </span>
+          <span
+            className="deckyStoreCardDescription"
+            style={{
+              fontSize: '13px',
+              color: '#969696',
+              WebkitLineClamp: root ? '2' : '3',
+              WebkitBoxOrient: 'vertical',
+              overflow: 'hidden',
+              display: '-webkit-box',
+            }}
+          >
+            {plugin.description ? (
+              plugin.description
+            ) : (
+              <span>
+                <i style={{ color: '#666' }}>{t('PluginCard.plugin_no_desc')}</i>
+              </span>
+            )}
+          </span>
+          {root && (
+            <div
+              className="deckyStoreCardDescription deckyStoreCardDescriptionRoot"
               style={{
+                fontSize: '13px',
                 color: '#fee75c',
-                textDecoration: 'none',
+                marginTop: 'auto',
               }}
             >
-              deckbrew.xyz/root
-            </a>
-          </span>
-        )}
-        <div
-          className="deckyStoreCardButtonRow"
-          style={{
-            marginTop: '1em',
-            width: '100%',
-            overflow: 'hidden',
-          }}
-        >
+              <i>{t('PluginCard.plugin_full_access')}</i>{' '}
+              <a
+                className="deckyStoreCardDescriptionRootLink"
+                href="https://deckbrew.xyz/root"
+                target="_blank"
+                style={{
+                  color: '#fee75c',
+                  textDecoration: 'none',
+                }}
+              >
+                deckbrew.xyz/root
+              </a>
+            </div>
+          )}
+        </div>
+        <div className="deckyStoreCardButtonRow">
           <PanelSectionRow>
-            <Focusable style={{ display: 'flex', maxWidth: '100%' }}>
+            <Focusable style={{ display: 'flex', gap: '5px', padding: 0 }}>
               <div
                 className="deckyStoreCardInstallContainer"
-                style={{
-                  paddingTop: '0px',
-                  paddingBottom: '0px',
-                  width: '40%',
-                }}
+                style={
+                  {
+                    paddingTop: '0px',
+                    paddingBottom: '0px',
+                    flexGrow: 1,
+                    '--field-negative-horizontal-margin': 0,
+                  } as CSSProperties
+                }
               >
                 <ButtonItem
                   bottomSeparator="none"
@@ -155,13 +153,7 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
                   <span className="deckyStoreCardInstallText">{t('PluginCard.plugin_install')}</span>
                 </ButtonItem>
               </div>
-              <div
-                className="deckyStoreCardVersionContainer"
-                style={{
-                  marginLeft: '5%',
-                  width: '30%',
-                }}
-              >
+              <div className="deckyStoreCardVersionContainer" style={{ minWidth: '130px' }}>
                 <Dropdown
                   rgOptions={
                     plugin.versions.map((version: StorePluginVersion, index) => ({

frontend/src/developer.tsx

@@ -4,6 +4,7 @@ import { FaReact } from 'react-icons/fa';
 
 import Logger from './logger';
 import { getSetting } from './utils/settings';
+import TranslationHelper, { TranslationClass } from './utils/TranslationHelper';
 
 const logger = new Logger('DeveloperMode');
 
@@ -40,11 +41,13 @@ export async function setShowValveInternal(show: boolean) {
 }
 
 export async function setShouldConnectToReactDevTools(enable: boolean) {
-  const { t } = useTranslation();
-
   window.DeckyPluginLoader.toaster.toast({
-    title: (enable ? t('Developer.enabling') : t('Developer.disabling')) + ' React DevTools',
-    body: t('Developer.5secreload'),
+    title: enable ? (
+      <TranslationHelper trans_class={TranslationClass.DEVELOPER} trans_text={'enabling'} />
+    ) : (
+      <TranslationHelper trans_class={TranslationClass.DEVELOPER} trans_text={'disabling'} />
+    ),
+    body: <TranslationHelper trans_class={TranslationClass.DEVELOPER} trans_text={'5secreload'} />,
     icon: <FaReact />,
   });
   await sleep(5000);

frontend/src/utils/TranslationHelper.tsx

@@ -7,6 +7,7 @@ import { InstallType } from '../plugin';
 export enum TranslationClass {
   PLUGIN_LOADER = 'PluginLoader',
   PLUGIN_INSTALL_MODAL = 'PluginInstallModal',
+  DEVELOPER = 'Developer',
 }
 
 interface TranslationHelperProps {
@@ -47,6 +48,10 @@ const TranslationHelper: FC<TranslationHelperProps> = ({
                   ? t(TranslationClass.PLUGIN_INSTALL_MODAL + '.update.' + trans_text, i18n_args)
                   : t(TranslationClass.PLUGIN_INSTALL_MODAL + '.update.' + trans_text);
             }
+          case TranslationClass.DEVELOPER:
+            return i18n_args
+              ? t(TranslationClass.DEVELOPER + '.' + trans_text, i18n_args)
+              : t(TranslationClass.DEVELOPER + '.' + trans_text);
           default:
             logger.error('We should never fall in the default case!');
             return '';