From 11e8c2b70532e26464dcaf8fd5b5e4d950a6d645 Mon Sep 17 00:00:00 2001
From: "Diego H. Gurpegui" <diego.gurpegui@improvein.com>
Date: Wed, 27 Dec 2023 17:07:27 -0300
Subject: [PATCH] prepare for mobile

---
 src/options.tsx | 21 +++++++++++++++------
 src/storage.ts  |  7 +++++++
 src/style.scss  | 11 ++++++++++-
 3 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/options.tsx b/src/options.tsx
index 800631f..f962b92 100644
--- a/src/options.tsx
+++ b/src/options.tsx
@@ -13,7 +13,12 @@ import {
   RelaysConfig
 } from './types';
 import * as Storage from './storage';
-import { getPermissionsString, isHexadecimal, isValidRelayURL } from './common';
+import {
+  getPermissionsString,
+  isHexadecimal,
+  isValidRelayURL,
+  truncatePublicKeys
+} from './common';
 import logotype from './assets/logo/logotype.png';
 import AddCircleIcon from './assets/icons/add-circle-outline.svg';
 import ArrowUpCircleIcon from './assets/icons/arrow-up-circle-outline.svg';
@@ -465,7 +470,11 @@ function Options() {
                   <option value={profilePubKey} key={profilePubKey}>
                     {profilePubKey == ''
                       ? '(new profile)'
-                      : nip19.npubEncode(profilePubKey)}
+                      : truncatePublicKeys(
+                          nip19.npubEncode(profilePubKey),
+                          20,
+                          20
+                        )}
                   </option>
                 ))}
               </select>
@@ -477,22 +486,22 @@ function Options() {
               onClick={handleNewProfileClick}
             >
               <AddCircleIcon />
-              New profile
+              New
             </button>
             <button onClick={handleExportProfileClick}>
               <DownloadIcon />
-              Export profile
+              Export
             </button>
             <button onClick={handleImportProfileClick}>
               <ArrowUpCircleIcon />
-              Import profile
+              Import
             </button>
             <button
               onClick={handleDeleteProfileClick}
               className="button button-danger"
             >
               <TrashIcon />
-              Delete profile
+              Delete
             </button>
           </div>
         </section>
diff --git a/src/storage.ts b/src/storage.ts
index 88ca448..f02de37 100644
--- a/src/storage.ts
+++ b/src/storage.ts
@@ -143,6 +143,13 @@ export async function updateProfiles(
     [ConfigurationKeys.PROFILES]: profiles
   });
 
+  // if there's only one profile, then set it as the active one
+  const activePrivateKey = await readActivePrivateKey();
+  if (!activePrivateKey && Object.keys(profiles).length == 1) {
+    const profilePubKey = Object.keys(profiles)[0];
+    await updateActivePrivateKey(profiles[profilePubKey].privateKey);
+  }
+
   return profiles;
 }
 export async function addProfile(
diff --git a/src/style.scss b/src/style.scss
index 0fb7386..53f97a3 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -23,6 +23,11 @@ $button-radius: 0.3em;
 $font-family: 'Prompt', Arial, Helvetica, sans-serif;
 $font-size: 12pt;
 
+$responsive-break-sm: 40em; // Small devices such as large phones (640px and up)
+$responsive-break-md: 48em; // Medium devices such as tablets (768px and up)
+$responsive-break-lg: 64em; // Large devices such as laptops (1024px and up)
+$responsive-break-xl: 80em; // Largest devices such as desktops (1280px and up)
+
 // ****** Font ******
 @font-face {
   font-family: 'Prompt';
@@ -108,7 +113,6 @@ button,
   justify-content: center;
   border: 2px solid $color-primary;
   background-color: $color-primary;
-  color: $color-primary-inv;
   padding: 0.5em 0.7em;
   text-align: center;
   text-decoration: none;
@@ -117,6 +121,11 @@ button,
   font-weight: 500;
   cursor: pointer;
 
+  &,
+  * {
+    color: $color-primary-inv;
+  }
+
   img,
   svg {
     display: inline-block;