Add bg theme var for presets (#1529)

Author: ia3andy

base/src/main/resources/web/community-app/theme.scss

@@ -107,6 +107,7 @@
   --presetsTitleTextColor: var(--extensionsPickerCategoryTextColor);
   --presetsCardBorderColor: #373668;
   --presetsCardTextColor: var(--textColor);
+  --presetsCardBackgroundColor: transparent;
 
   // Copy to clipboard
   --copyToClipboardBackgroundColor: #1f1f1f;

base/src/main/resources/web/lib/components/extensions-picker/presets-panel.tsx

@@ -30,6 +30,7 @@ const PresetsPanelDiv = styled.div`
 
     .preset-card {
         flex-basis: 292px;
+        background-color: var(--presetsCardBackgroundColor);
         border: 1px solid var(--presetsCardBorderColor);
         display: flex;
         flex-direction: column;

base/src/main/resources/web/lib/components/extensions-picker/selected-extensions.tsx

@@ -18,6 +18,9 @@ const SelectedExtensionsDiv = styled.div`
             color: var(--warningColor);
         }
 
+        span {
+        }
+
 
     }
 
@@ -119,7 +122,7 @@ export const SelectedExtensions = (props: {
         Selected Extensions
         {props.extensions.length > 0 &&
             <button className="btn btn-light btn-clear" onClick={clear} aria-label="Clear extension selection">
-                <FaTrashAlt/>Clear selection
+                <FaTrashAlt/> Clear { layout === 'picker' && <span>and start from presets</span>}
             </button>}
       </h4>
       {props.extensions.length === 0 && (