Merge pull request #2701 from santiment/fix/account-settings-mobile-s…

…tyles-part-5

Api keys, sessions and edit input styles updated

src/pages/Account/AccountPage.module.scss

@@ -297,6 +297,8 @@
       @include responsive('phone', 'phone-xs') {
         margin: 0;
         width: 100%;
+        padding: 8px 10px;
+        height: 40px;    
       }
     }
 
@@ -345,7 +347,7 @@
   text-align: center;
 
   &_cancel {
-    margin-right: 16px;
+    margin-left: 16px;
   }
 }
 

src/pages/Account/ApiCallsStatistic.module.scss

@@ -19,7 +19,7 @@
 .info {
   color: var(--waterloo);
 
-  @include text('body-3');
+  @include text('body-2');
 
   margin-top: 6px;
 }

src/pages/Account/EditableInputSetting.js

@@ -136,6 +136,14 @@ class EditableInputSetting extends PureComponent {
         <div className={classes.inputContainerRight}>
           {editing ? (
             <div className={styles.btns}>
+              <Button
+                border
+                className={cx(styles.btn, styles.btn_cancel)}
+                onClick={this.disableEditing}
+                disabled={saving}
+              >
+                Cancel
+              </Button>
               <Button
                 variant='fill'
                 accent='positive'
@@ -145,14 +153,6 @@ class EditableInputSetting extends PureComponent {
               >
                 Save
               </Button>
-              <Button
-                border
-                className={cx(styles.btn, styles.btn_cancel)}
-                onClick={this.disableEditing}
-                disabled={saving}
-              >
-                Cancel
-              </Button>
             </div>
           ) : (
             <Label className={styles.form__action} accent='jungle-green' onClick={this.onEditClick}>

src/pages/Account/SettingsAPIKeys.js

@@ -8,6 +8,7 @@ import copy from 'copy-to-clipboard'
 import Settings from './Settings'
 import * as actions from '../../actions/types'
 import ApiCallsStatistic, { API_KEYS_STATS } from './ApiCallsStatistic'
+import accountStyles from './AccountPage.module.scss'
 import styles from './SettingsAPIKeys.module.scss'
 
 let genTimer
@@ -27,9 +28,9 @@ const SettingsAPIKeys = ({ apikeys = [], generateAPIKey, revokeAPIKey }) => {
 
   return (
     <Settings id='api-keys' header='API keys'>
-      <Settings.Row>
-        <div className={styles.setting__left}>
-          <Label className={styles.setting__description} accent='waterloo'>
+      <Settings.Row className={styles.descriptionRow}>
+        <Label className={cx(accountStyles.label)} accent='waterloo'>
+          <p>
             The api key can only be used to fetch data and not to execute graphql mutations.
             <br />
             <br />
@@ -52,43 +53,38 @@ const SettingsAPIKeys = ({ apikeys = [], generateAPIKey, revokeAPIKey }) => {
               documentation
             </a>{' '}
             to get started.
-          </Label>
-        </div>
-        <div>
-          <div className={styles.wrapper}>
-            {apikeys.length > 0 ? (
-              apikeys.map((apikey) => (
-                <div key={apikey} className={styles.keyContainer}>
-                  <div className={cx(styles.apikey, copiedShown === apikey && styles.copied)}>
-                    <input className={styles.apikey__input} defaultValue={apikey} readOnly />
-                    <Icon
-                      onClick={() => {
-                        copy(apikey)
-                        showCopiedTooltip(apikey)
-                      }}
-                      type='copy'
-                      className={styles.apikey__icon}
-                    />
-                  </div>
-                  <Button
-                    onClick={() => {
-                      revokeAPIKey(apikey)
-                    }}
-                    accent='negative'
-                  >
-                    Revoke
-                  </Button>
-                </div>
-              ))
-            ) : (
-              <Button onClick={onGenClick} variant='fill' accent='positive'>
-                Generate
+          </p>
+        </Label>
+        {apikeys.length > 0 ? (
+          apikeys.map((apikey) => (
+            <div key={apikey} className={styles.keyContainer}>
+              <div className={cx(styles.apikey, copiedShown === apikey && styles.copied)}>
+                <input className={styles.apikey__input} defaultValue={apikey} readOnly />
+                <Icon
+                  onClick={() => {
+                    copy(apikey)
+                    showCopiedTooltip(apikey)
+                  }}
+                  type='copy'
+                  className={styles.apikey__icon}
+                />
+              </div>
+              <Button
+                onClick={() => {
+                  revokeAPIKey(apikey)
+                }}
+                accent='negative'
+              >
+                Revoke
               </Button>
-            )}
-          </div>
-        </div>
+            </div>
+          ))
+        ) : (
+          <Button onClick={onGenClick} variant='fill' accent='positive' className={styles.generateButton}>
+            Generate
+          </Button>
+        )}
       </Settings.Row>
-
       <ApiCallsStatistic type={API_KEYS_STATS.APIKEY} />
     </Settings>
   )

src/pages/Account/SettingsAPIKeys.module.scss

@@ -1,11 +1,6 @@
 @import '~@santiment-network/ui/mixins';
 @import '~@santiment-network/ui/variables';
 
-.wrapper {
-  display: flex;
-  flex-direction: column;
-}
-
 .apikey {
   display: flex;
   height: 32px;
@@ -79,3 +74,24 @@
     color: var(--jungle-green-hover);
   }
 }
+
+.descriptionRow {
+  padding: 16px 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--porcelain);
+
+  @include responsive('phone', 'phone-xs') {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+.generateButton {
+  width: auto;
+
+  @include responsive('phone', 'phone-xs') {
+    margin-top: 12px;
+  }
+}

src/pages/Account/SettingsSessions.js

@@ -156,14 +156,16 @@ const Session = ({ client, platform, isCurrent, jti, refreshWidget, lastActiveAt
         </Dialog.Actions>
       </Dialog>
       <Settings.Row className={styles.wrapper}>
-        {getPlatformIcon(platform)}
-        <div className={styles.info}>
-          <span className={styles.platform}>
-            {platform}, {client}
-          </span>
-          <span className={styles.time}>
-            {isCurrent ? 'Current session' : `Last active ${formatDate(lastActiveAt)}`}
-          </span>
+        <div className='row'>
+          {getPlatformIcon(platform)}
+          <div className={styles.info}>
+            <span className={styles.platform}>
+              {platform}, {client}
+            </span>
+            <span className={styles.time}>
+              {isCurrent ? 'Current session' : `Last active ${formatDate(lastActiveAt)}`}
+            </span>
+          </div>
         </div>
         <Button accent='negative' isLoading={loading} className={styles.revoke} onClick={onClick}>
           Revoke

src/pages/Account/SettingsSessions.module.scss

@@ -1,7 +1,16 @@
+@import '~@santiment-network/ui/mixins';
+
 .wrapper {
   padding: 12px 24px;
   display: flex;
   align-items: center;
+
+  @include responsive('phone', 'phone-xs') {
+    padding: 16px 24px;
+    flex-direction: column;
+    align-items: flex-start;
+    @include text('body-2');
+  }
 }
 
 .info {
@@ -21,6 +30,12 @@
 .revoke {
   margin-left: auto;
   padding-right: 0;
+
+  @include responsive('phone', 'phone-xs') {
+    margin-left: 56px;
+    margin-top: 12px;
+    padding-left: initial;
+  }
 }
 
 .wrapper + .wrapper {