TW-1543 Apply design updates

madfish-solutions · Sep 17, 2024 · 93bd61d · 93bd61d
1 parent 74041ca
commit 93bd61d
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 11 deletions.
diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
@@ -1983,10 +1983,10 @@
     }
   },
   "popupSettings": {
-    "message": "Popup mode"
+    "message": "Pop-up mode"
   },
   "popupSettingsDescription": {
-    "message": "Here you can configure the popup which appears on plugin's icon click in extensions panel."
+    "message": "Here you can configure the pop-up which appears on plugin's icon click in extensions panel."
   },
   "analyticsSettings": {
     "message": "Anonymous Analytics"

diff --git a/public/_locales/en_GB/messages.json b/public/_locales/en_GB/messages.json
@@ -1359,10 +1359,10 @@
     }
   },
   "popupSettings": {
-    "message": "Popup mode"
+    "message": "Pop-up mode"
   },
   "popupSettingsDescription": {
-    "message": "Here you can configure the popup which appears on plugin's icon click in extensions panel."
+    "message": "Here you can configure the pop-up which appears on plugin's icon click in extensions panel."
   },
   "referredByTokenContractNotFound": {
     "message": "Contract $address$, which is referred by token contract to, was not found.",

diff --git a/src/app/templates/SettingsGeneral/components/select-with-modal/select-modal-option.tsx b/src/app/templates/SettingsGeneral/components/select-with-modal/select-modal-option.tsx
@@ -12,6 +12,7 @@ export interface CellPartProps<T> {
 
 export interface SelectModalOptionProps<T> {
   option: T;
+  className?: string;
   isSelected: boolean;
   CellIcon: ComponentType<CellPartProps<T>>;
   CellName: ComponentType<CellPartProps<T>>;
@@ -22,6 +23,7 @@ export interface SelectModalOptionProps<T> {
 // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
 export const SelectModalOption = <T extends unknown>({
   option,
+  className,
   isSelected,
   CellIcon,
   CellName,
@@ -31,7 +33,7 @@ export const SelectModalOption = <T extends unknown>({
   const handleClick = useCallback(() => onSelect(option), [onSelect, option]);
 
   return (
-    <SettingsCellGroup>
+    <SettingsCellGroup className={className}>
       <SettingsCell
         Component={Button}
         cellIcon={<CellIcon option={option} />}

diff --git a/src/app/templates/SettingsGeneral/components/select-with-modal/select-modal.tsx b/src/app/templates/SettingsGeneral/components/select-with-modal/select-modal.tsx
@@ -1,7 +1,10 @@
 import React, { useMemo, useState } from 'react';
 
+import clsx from 'clsx';
+
 import { EmptyState } from 'app/atoms/EmptyState';
 import { PageModal } from 'app/atoms/PageModal';
+import { ScrollView } from 'app/atoms/PageModal/scroll-view';
 import { SearchBarField } from 'app/templates/SearchField';
 import { t } from 'lib/i18n';
 import { searchAndFilterItems } from 'lib/utils/search-items';
@@ -36,6 +39,7 @@ export const SelectModal = <T, P extends null | SyncFn<T, any>>({
   itemTestID
 }: SelectModalProps<T, P>) => {
   const [searchValue, setSearchValue] = useState<string>('');
+  const [topEdgeIsVisible, setTopEdgeIsVisible] = useState(true);
 
   const filteredOptions = useMemo(
     () => searchAndFilterItems<T, P>(options, searchValue, searchKeys, searchPrepare, searchThreshold),
@@ -44,15 +48,16 @@ export const SelectModal = <T, P extends null | SyncFn<T, any>>({
 
   return (
     <PageModal title={t('language')} opened={opened} onRequestClose={onRequestClose}>
-      <div className="p-4">
-        <SearchBarField value={searchValue} onValueChange={setSearchValue} />
+      <div className={clsx('p-4', !topEdgeIsVisible && 'shadow-bottom border-b-0.5 border-lines overflow-y-visible')}>
+        <SearchBarField containerClassName="!mr-0" value={searchValue} onValueChange={setSearchValue} />
       </div>
 
-      <div className="px-4 flex-1 flex flex-col overflow-y-auto gap-3 pb-4">
+      <ScrollView className="gap-3 pb-4" onTopEdgeVisibilityChange={setTopEdgeIsVisible} topEdgeThreshold={4}>
         {filteredOptions.length === 0 && <EmptyState variant="searchUniversal" />}
 
-        {filteredOptions.map(option => (
+        {filteredOptions.map((option, index) => (
           <SelectModalOption<T>
+            className={index === 0 ? 'mt-1' : ''}
             key={keyFn(option)}
             option={option}
             isSelected={keyFn(option) === keyFn(value)}
@@ -62,7 +67,7 @@ export const SelectModal = <T, P extends null | SyncFn<T, any>>({
             testID={itemTestID}
           />
         ))}
-      </div>
+      </ScrollView>
     </PageModal>
   );
 };
diff --git a/src/lib/popup-mode/index.ts b/src/lib/popup-mode/index.ts
@@ -1,5 +1,5 @@
 const POPUP_MODE_STORAGE_KEY = 'popup_mode';
-const DEFAULT_POPUP_MODE = true;
+const DEFAULT_POPUP_MODE = false;
 
 export function setPopupMode(enabled: boolean) {
   localStorage.setItem(POPUP_MODE_STORAGE_KEY, String(enabled));