Fix for settings UI layout (half-effeort in previous PR) (#340)

packages/extension-base/package.json

@@ -6,9 +6,9 @@
   "license": "Apache-2",
   "dependencies": {
     "@babel/runtime": "^7.9.6",
-    "@polkadot/api": "^1.15.1",
+    "@polkadot/api": "^1.16.1",
     "@polkadot/extension-inject": "0.26.0-beta.3",
-    "@polkadot/keyring": "^2.10.1",
-    "@polkadot/ui-keyring": "^0.54.0-beta.1"
+    "@polkadot/keyring": "^2.11.1",
+    "@polkadot/ui-keyring": "^0.54.0-beta.2"
   }
 }

packages/extension-ui/package.json

@@ -8,11 +8,11 @@
     "@babel/runtime": "^7.9.6",
     "@polkadot/extension-base": "0.26.0-beta.3",
     "@polkadot/extension-inject": "0.26.0-beta.3",
-    "@polkadot/keyring": "^2.10.1",
-    "@polkadot/react-identicon": "^0.54.0-beta.1",
-    "@polkadot/react-qr": "^0.54.0-beta.1",
-    "@polkadot/util": "^2.10.1",
-    "@polkadot/util-crypto": "^2.10.1",
+    "@polkadot/keyring": "^2.11.1",
+    "@polkadot/react-identicon": "^0.54.0-beta.2",
+    "@polkadot/react-qr": "^0.54.0-beta.2",
+    "@polkadot/util": "^2.11.1",
+    "@polkadot/util-crypto": "^2.11.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-is": "^16.13.1",

packages/extension-ui/src/partials/Settings.tsx

@@ -67,7 +67,7 @@ function Settings ({ className, reference }: Props): React.ReactElement<Props> {
       className={className}
       reference={reference}
     >
-      <Setting>
+      <div className='setting'>
         <SettingTitle>Theme</SettingTitle>
         <Switch
           checked={themeContext.id === themes.dark.id}
@@ -75,16 +75,16 @@ function Settings ({ className, reference }: Props): React.ReactElement<Props> {
           onChange={_onChangeTheme}
           uncheckedLabel='Light'
         />
-      </Setting>
-      <Setting>
+      </div>
+      <div className='setting'>
         <SettingTitle>External QR accounts and Access</SettingTitle>
         <CheckboxSetting
           checked={camera}
           label='Allow Camera Access'
           onChange={setCamera}
         />
-      </Setting>
-      <Setting>
+      </div>
+      <div className='setting'>
         <SettingTitle>Display address format For:</SettingTitle>
         <DropdownSetting
           label=''
@@ -92,15 +92,15 @@ function Settings ({ className, reference }: Props): React.ReactElement<Props> {
           options={prefixOptions}
           value={`${prefix}`}
         />
-      </Setting>
+      </div>
       {isPopup && (
-        <Setting>
+        <div className='setting'>
           <OpenInNewWindowButton
             icon={FullScreenIcon}
             onClick={windowOpen}
             text='Open extension in new window'
           />
-        </Setting>
+        </div>
       )}
     </Menu>
   );
@@ -128,10 +128,6 @@ const SettingTitle = styled(Title)`
   margin: 0;
 `;
 
-const Setting = styled.div`
-
-`;
-
 const OpenInNewWindowButton = styled(ActionText)`
   span {
     color: ${({ theme }: ThemeProps) => theme.textColor};