Update copy icon

achhabra2 · Jan 4, 2022 · 8e688e3 · 8e688e3
1 parent cf4e9c7
commit 8e688e3
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 5 deletions.
diff --git a/build/darwin/Info.plist b/build/darwin/Info.plist
@@ -14,5 +14,6 @@
 	<key>LSApplicationCategoryType</key><string>public.app-category.utilities</string>
 	<key>NSHighResolutionCapable</key><string>true</string>
 	<key>NSHumanReadableCopyright</key><string>Licensed Under the GPLv3</string>
+	<key>ITSAppUsesNonExemptEncryption</key><false />
 </dict>
 </plist>
diff --git a/frontend/dist/assets/images/copy-regular.svg b/frontend/dist/assets/images/copy-regular.svg
diff --git a/frontend/dist/bundle.js b/frontend/dist/bundle.js
diff --git a/frontend/dist/bundle.js.map b/frontend/dist/bundle.js.map
diff --git a/frontend/src/assets/images/copy-regular.svg b/frontend/src/assets/images/copy-regular.svg
diff --git a/frontend/src/sender.svelte b/frontend/src/sender.svelte
@@ -183,6 +183,7 @@
         {#if sendCode}
           <div class="mx-auto mt-2" transition:slide>
             <label for="sendCode" class="send-input-label">Send Code</label>
+            <div class="flex flex-row">
             <input
               id="sendCode"
               readonly
@@ -191,7 +192,8 @@
               value={sendCode}
               class="send-input mt-1"
             />
-            <button class="send-button" on:click={copyCode}>📄</button>
+            <button class="copy-button mt-1 ml-1" on:click={copyCode}><div class="copy-icon"></div></button>
+            </div>
           </div>
         {/if}
       </div>

diff --git a/frontend/src/styles.pcss b/frontend/src/styles.pcss
@@ -17,14 +17,19 @@ div {
     @apply rounded-lg p-2 bg-green-500 duration-150 text-gray-200 hover:bg-green-700 active:bg-green-800;
   }
   .send-input {
-    @apply border border-transparent focus:outline-none focus:ring-2 focus:ring-green-300 focus:border-transparent bg-gray-700 text-gray-200 rounded-md shadow-inner shadow-md;
+    @apply border border-transparent focus:outline-none focus:ring-2 focus:ring-green-300 focus:border-transparent bg-gray-700 text-gray-200 rounded-l-md shadow-inner shadow-md;
   }
   .send-input-label {
-    @apply block text-sm text-gray-200;
+    @apply block text-sm text-gray-300;
   }
   .send-button {
     @apply rounded-lg px-4 py-2 bg-green-600 duration-150 text-gray-200 hover:bg-green-700 disabled:opacity-50 active:bg-green-800;
   }
+
+  .copy-button {
+    @apply rounded-r-md px-2 py-2 bg-green-600 duration-150 text-gray-200 hover:bg-green-700 disabled:opacity-50 active:bg-green-800 w-10;
+  }
+
   .receive-input {
     @apply border border-transparent focus:outline-none focus:ring-2 focus:ring-green-300 focus:border-transparent bg-gray-800 text-gray-200 rounded-l-md shadow-inner shadow-md;
   }
@@ -96,6 +101,16 @@ div {
     background-repeat: no-repeat;
   }
 
+  .copy-icon {
+    height: 1.5rem;
+    width: 1.5rem;
+    background-repeat: no-repeat;
+    mask-image: url("./assets/images/copy-regular.svg");
+    mask-repeat: no-repeat;
+    mask-position: center;
+    @apply bg-gray-900;
+  }
+
   .receive-tab-icon {
     mask-image: url("./assets/images/download-solid.svg");
     mask-repeat: no-repeat;