redesign x-dialogs and buttons to be closer to the Airdrop design

public/index.html

@@ -107,6 +107,7 @@
                     <div class="font-subheading center text-center">Enter key from another device to continue.</div>
                     <div class="row-reverse space-between">
                         <button class="button" type="submit" disabled>Pair</button>
+                        <div class="separator"></div>
                         <a class="button" close>Cancel</a>
                     </div>
                 </x-paper>
@@ -137,6 +138,7 @@
                 <div class="center file-preview"></div>
                 <div class="row-reverse space-between">
                     <a class="button" id="shareOrDownload" autofocus></a>
+                    <div class="separator"></div>
                     <button class="button" close>Close</button>
                 </div>
             </x-paper>
@@ -152,6 +154,7 @@
                 <div class="center file-preview"></div>
                 <div class="row-reverse space-between">
                     <button class="button" id="acceptRequest" title="Accept Request" close autofocus>Accept</button>
+                    <div class="separator"></div>
                     <button class="button" id="declineRequest" title="Decline Request" close>Decline</button>
                 </div>
             </x-paper>
@@ -162,10 +165,11 @@
         <form action="#">
             <x-background class="full center">
                 <x-paper shadow="2">
-                    <h3>Send a Message</h3>
+                    <h2 class="center text-center">Send a Message</h2>
                     <div id="textInput" class="textarea" role="textbox" placeholder="Send a message" autocomplete="off" autofocus contenteditable></div>
                     <div class="row-reverse">
                         <button class="button" type="submit" close>Send</button>
+                        <div class="separator"></div>
                         <a class="button" close>Cancel</a>
                     </div>
                 </x-paper>
@@ -176,10 +180,11 @@
     <x-dialog id="receiveTextDialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <h3>Message Received</h3>
+                <h2>Message Received</h2>
                 <div class="font-subheading" id="text"></div>
                 <div class="row-reverse">
                     <button class="button" id="copy" close autofocus>Copy</button>
+                    <div class="separator"></div>
                     <button class="button" close>Close</button>
                 </div>
             </x-paper>

public/styles.css

@@ -362,7 +362,7 @@ x-dialog x-background {
     z-index: 10;
     transition: opacity 300ms;
     will-change: opacity;
-    padding: 16px;
+    padding: 35px;
 }
 
 x-dialog x-paper {
@@ -390,8 +390,10 @@ x-dialog:not([show]) x-background {
 }
 
 x-dialog .row-reverse>.button {
-    margin-top: 10px;
+    margin-top: 0;
-    margin-left: 8px;
+    margin-bottom: -16px;
+    width: 50%;
+    height: 50px;
 }
 
 x-dialog a {
@@ -454,18 +456,39 @@ x-dialog .font-subheading {
     margin-bottom: 40px;
 }
 
+#pairDeviceDialog x-background {
+    padding: 16px!important;
+}
+
 /* Receive Dialog */
 
-#receiveDialog .row {
+x-dialog .row {
     margin-top: 24px;
     margin-bottom: 8px;
 }
 
-#fileName{
+x-dialog h2 {
-    word-break: break-all;
+    margin-top: 1rem;
 }
 
-#fileSize{
+x-dialog .row-reverse {
+    margin: auto -24px;
+    margin-top: 40px;
+    border-top: solid 2.5px var(--border-color);
+}
+
+.separator {
+    border: solid 1.25px var(--border-color);
+    margin-bottom: -16px;
+}
+
+.file-description {
+    word-break: break-word;
+    width: 80%;
+    margin: auto;
+}
+
+.file-size{
     padding-bottom: 5px;
 }
 
@@ -557,10 +580,6 @@ x-dialog .font-subheading {
     opacity: 0.1;
 }
 
-.button:before {
-    border-radius: 8px;
-}
-
 .button:focus:before,
 .icon-button:focus:before {
     opacity: 0.2;
@@ -801,6 +820,7 @@ body {
     --text-color: #333;
     --bg-color: #fff;
     --bg-color-secondary: #f1f3f4;
+    --border-color: #e7e8e8;
 }
 
 /* Dark theme colors */
@@ -808,6 +828,7 @@ body.dark-theme {
     --text-color: #eee;
     --bg-color: #121212;
     --bg-color-secondary: #333;
+    --border-color: #252525;
 }
 
 /* Colored Elements */
@@ -825,15 +846,19 @@ x-dialog x-paper {
     color: var(--text-color);
     background-color: var(--bg-color-secondary);
 }
+
 /* Image/Video/Audio Preview */
+.file-preview {
+    margin: 10px -24px 40px -24px;
+}
+
 .element-preview {
     max-width: 100%;
-    max-height: 50vh;
+    max-height: 40vh;
     margin: auto;
     display: block;
 }
 
-
 /* Styles for users who prefer dark mode at the OS level */
 @media (prefers-color-scheme: dark) {
 
@@ -842,6 +867,7 @@ x-dialog x-paper {
         --text-color: #eee;
         --bg-color: #121212;
         --bg-color-secondary: #333;
+        --border-color: #252525;
     }
 
     /* Override dark mode with light mode styles if the user decides to swap */
@@ -849,7 +875,8 @@ x-dialog x-paper {
         --text-color: #333;
         --bg-color: #fafafa;
         --bg-color-secondary: #f1f3f4;
-    }
+        --border-color: #e7e8e8;
+   }
 }