mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-05-01 03:59:13 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Change button and dialog style and add soft gradients to make it more "airy" and give it overall a more modern look; Make dark mode real black; Add overflow shadow to ReceiveText, SendText and EditPairedDevices Dialog

Browse source
This commit is contained in:
schlagmichdoch 2023-11-20 05:23:21 +01:00
parent f53832ead1
commit e99f841067
4 changed files with 340 additions and 232 deletions
Download patch file Download diff file Expand all files Collapse all files

108
public/index.html
View file

@ -94,7 +94,7 @@
<use xlink:href="#public-room-icon"></use>
</svg>
</div>
<div id="cancel-paste-mode" class="button" data-i18n-key="header.cancel-paste-mode" data-i18n-attrs="text" hidden></div>
<div id="cancel-paste-mode" class="btn" data-i18n-key="header.cancel-paste-mode" data-i18n-attrs="text" hidden></div>
</header>
<!-- Center -->
<div id="center" class="opacity-0">
@ -112,7 +112,13 @@
<!-- Footer -->
<footer class="column opacity-0">
<svg class="icon logo">
<use xlink:href="#wifi-tethering"></use>
<defs>
<linearGradient id="primaryGradient" gradientTransform="rotate(90)">
<stop offset="0%" class="start-color" />
<stop offset="100%" class="stop-color" />
</linearGradient>
</defs>
<use xlink:href="#wifi-tethering" style="fill: url(#primaryGradient);"></use>
</svg>
<div class="column">
<div class="known-as-wrapper">
@ -127,9 +133,9 @@
<span data-i18n-key="footer.discovery" data-i18n-attrs="text"></span>
</div>
<div class="row center">
<span class="badge badge-room-ip" data-i18n-key="footer.on-this-network" data-i18n-attrs="text title"></span>
<span class="badge badge-room-secret pointer" data-i18n-key="footer.paired-devices" data-i18n-attrs="text title" hidden></span>
<span class="badge badge-room-public-id pointer" data-i18n-key="footer.public-room-devices" data-i18n-attrs="title" hidden>in room IAIAI</span>
<span class="badge badge-gradient badge-room-ip" data-i18n-key="footer.on-this-network" data-i18n-attrs="text title"></span>
<span class="badge badge-gradient badge-room-secret pointer" data-i18n-key="footer.paired-devices" data-i18n-attrs="text title" hidden></span>
<span class="badge badge-gradient badge-room-public-id pointer" data-i18n-key="footer.public-room-devices" data-i18n-attrs="title" hidden>in room IAIAI</span>
</div>
</div>
</div>
@ -142,78 +148,78 @@
<h2 class="center" data-i18n-key="dialogs.language-selector-title" data-i18n-attrs="text"></h2>
</div>
<div class="language-buttons">
<button class="button fw" data-i18n-key="dialogs.system-language" data-i18n-attrs="text"></button>
<button class="button fw" value="ar">
<button class="btn fw" data-i18n-key="dialogs.system-language" data-i18n-attrs="text"></button>
<button class="btn fw" value="ar">
<span>العربية</span>
<span>-</span>
<span>(Arabic)</span>
</button>
<button class="button fw" value="de">
<button class="btn fw" value="de">
<span>Deutsch</span>
<span>-</span>
<span>(German)</span>
</button>
<button class="button fw" value="en">
<button class="btn fw" value="en">
<span>English</span>
</button>
<button class="button fw" value="es">
<button class="btn fw" value="es">
<span>Español</span>
<span>-</span>
<span>(Spanish)</span>
</button>
<button class="button fw" value="fr">
<button class="btn fw" value="fr">
<span>Français</span>
<span>-</span>
<span>(French)</span>
</button>
<button class="button fw" value="id">
<button class="btn fw" value="id">
<span>Bahasa Indonesia</span>
<span>-</span>
<span>(Indonesian)</span>
</button>
<button class="button fw" value="it">
<button class="btn fw" value="it">
<span>Italiano</span>
<span>-</span>
<span>(Italian)</span>
</button>
<button class="button fw" value="nl">
<button class="btn fw" value="nl">
<span>Nederlands</span>
<span>-</span>
<span>(Dutch)</span>
</button>
<button class="button fw" value="nb">
<button class="btn fw" value="nb">
<span>Norsk</span>
<span>-</span>
<span>(Norwegian)</span>
</button>
<button class="button fw" value="ro">
<button class="btn fw" value="ro">
<span>Română</span>
<span>-</span>
<span>(Romanian)</span>
</button>
<button class="button fw" value="ru">
<button class="btn fw" value="ru">
<span>Русский язык</span>
<span>-</span>
<span>(Russian)</span>
</button>
<button class="button fw" value="tr">
<button class="btn fw" value="tr">
<span>Türkçe</span>
<span>-</span>
<span>(Turkish)</span>
</button>
<button class="button fw" value="zh-CN">
<button class="btn fw" value="zh-CN">
<span>中文</span>
<span>-</span>
<span>(Chinese)</span>
</button>
<button class="button fw" value="ja">
<button class="btn fw" value="ja">
<span>日本語</span>
<span>-</span>
<span>(Japanese)</span>
</button>
</div>
<div class="center row-reverse button-row">
<button class="button" type="button" data-i18n-key="dialogs.close" data-i18n-attrs="text" close></button>
<button class="btn btn-rounded btn-grey" type="button" data-i18n-key="dialogs.close" data-i18n-attrs="text" close></button>
</div>
</x-paper>
</x-background>
@ -243,7 +249,7 @@
</div>
</div>
<div class="row center">
<div class="column">
<div class="column fw">
<div class="input-key-container six-chars" dir="ltr">
<input type="tel" class="textarea center" aria-label="pair-key-char-1" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder disabled>
<input type="tel" class="textarea center" aria-label="pair-key-char-2" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder disabled>
@ -256,8 +262,8 @@
</div>
</div>
<div class="button-row row-reverse">
<button class="button" type="submit" data-i18n-key="dialogs.pair" data-i18n-attrs="text" disabled></button>
<button class="button" type="button" data-i18n-key="dialogs.cancel" data-i18n-attrs="text" close></button>
<button class="btn btn-rounded btn-grey" type="submit" data-i18n-key="dialogs.pair" data-i18n-attrs="text" disabled></button>
<button class="btn btn-rounded btn-grey" type="button" data-i18n-key="dialogs.cancel" data-i18n-attrs="text" close></button>
</div>
</x-paper>
</x-background>
@ -280,7 +286,7 @@
</p>
</div>
<div class="center row-reverse button-row">
<button class="button" type="button" data-i18n-key="dialogs.close" data-i18n-attrs="text" close></button>
<button class="btn btn-rounded btn-grey" type="button" data-i18n-key="dialogs.close" data-i18n-attrs="text" close></button>
</div>
</x-paper>
</x-background>
@ -313,7 +319,7 @@
</div>
</div>
<div class="row center">
<div class="column">
<div class="column fw">
<div class="input-key-container" dir="ltr">
<input type="text" class="textarea center" aria-label="room-id-char-1" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder disabled>
<input type="text" class="textarea center" aria-label="room-id-char-2" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder disabled>
@ -325,9 +331,9 @@
</div>
</div>
<div class="center row-reverse button-row">
<button class="button" type="submit" data-i18n-key="dialogs.join" data-i18n-attrs="text" disabled></button>
<button class="button" type="button" data-i18n-key="dialogs.close" data-i18n-attrs="text" close></button>
<button class="button leave-room" type="button" data-i18n-key="dialogs.leave" data-i18n-attrs="text"></button>
<button class="btn btn-rounded btn-grey" type="submit" data-i18n-key="dialogs.join" data-i18n-attrs="text" disabled></button>
<button class="btn btn-rounded btn-grey" type="button" data-i18n-key="dialogs.close" data-i18n-attrs="text" close></button>
<button class="btn btn-rounded btn-grey leave-room" type="button" data-i18n-key="dialogs.leave" data-i18n-attrs="text"></button>
</div>
</x-paper>
</x-background>
@ -342,10 +348,10 @@
<h2 class="center"></h2>
</div>
</div>
<div class="row center">
<div class="row center p1">
<div class="column center file-description">
<div>
<span class="display-name badge"></span>
<span class="display-name badge badge-gradient"></span>
<span data-i18n-key="dialogs.would-like-to-share" data-i18n-attrs="text"></span>
</div>
<div class="row file-name">
@ -359,8 +365,8 @@
</div>
<div class="center file-preview"></div>
<div class="row-reverse center button-row">
<button id="accept-request" class="button" title="ENTER" data-i18n-key="dialogs.accept" data-i18n-attrs="text" autofocus></button>
<button id="decline-request" class="button" title="ESCAPE" data-i18n-key="dialogs.decline" data-i18n-attrs="text"></button>
<button id="accept-request" class="btn btn-rounded btn-grey" title="ENTER" data-i18n-key="dialogs.accept" data-i18n-attrs="text" autofocus></button>
<button id="decline-request" class="btn btn-rounded btn-grey" title="ESCAPE" data-i18n-key="dialogs.decline" data-i18n-attrs="text"></button>
</div>
</x-paper>
</x-background>
@ -374,10 +380,10 @@
<h2 class="center"></h2>
</div>
</div>
<div class="row center">
<div class="row center p1">
<div class="column center file-description">
<div>
<span class="display-name badge"></span>
<span class="display-name badge badge-gradient"></span>
<span data-i18n-key="dialogs.has-sent" data-i18n-attrs="text"></span>
</div>
<div class="row file-name">
@ -391,9 +397,9 @@
</div>
<div class="center file-preview"></div>
<div class="row-reverse center button-row">
<button id="share-btn" class="button" data-i18n-key="dialogs.share" data-i18n-attrs="text" hidden></button>
<button id="download-btn" class="button" data-i18n-key="dialogs.download" data-i18n-attrs="text" autofocus></button>
<button class="button" data-i18n-key="dialogs.close" data-i18n-attrs="text" close></button>
<button id="share-btn" class="btn btn-rounded btn-grey" data-i18n-key="dialogs.share" data-i18n-attrs="text" hidden></button>
<button id="download-btn" class="btn btn-rounded btn-grey" data-i18n-key="dialogs.download" data-i18n-attrs="text" autofocus></button>
<button class="btn btn-rounded btn-grey" data-i18n-key="dialogs.close" data-i18n-attrs="text" close></button>
</div>
</x-paper>
</x-background>
@ -408,22 +414,22 @@
<h2 class="center" data-i18n-key="dialogs.send-message-title" data-i18n-attrs="text"></h2>
</div>
</div>
<div class="row center display-name-wrapper">
<div class="row center p1 display-name-wrapper">
<div class="column">
<div class="text-center">
<span data-i18n-key="dialogs.send-message-to" data-i18n-attrs="text"></span>
<span class="display-name badge"></span>
<span class="display-name badge badge-gradient"></span>
</div>
</div>
</div>
<div class="row">
<div class="row p1">
<div class="column fw">
<div id="text-input" class="fw textarea" role="textbox" data-i18n-key="dialogs.message" data-i18n-attrs="title placeholder" autofocus contenteditable></div>
</div>
</div>
<div class="button-row row-reverse">
<button class="button" type="submit" title="CTRL/⌘ + ENTER" data-i18n-key="dialogs.send" data-i18n-attrs="text" disabled></button>
<button class="button" type="button" title="ESCAPE" data-i18n-key="dialogs.cancel" data-i18n-attrs="text" close></button>
<button class="btn btn-rounded btn-grey" type="submit" title="CTRL/⌘ + ENTER" data-i18n-key="dialogs.send" data-i18n-attrs="text" disabled></button>
<button class="btn btn-rounded btn-grey" type="button" title="ESCAPE" data-i18n-key="dialogs.cancel" data-i18n-attrs="text" close></button>
</div>
</x-paper>
</x-background>
@ -436,20 +442,20 @@
<div class="row center">
<h2 class="text-center" data-i18n-key="dialogs.receive-text-title" data-i18n-attrs="text"></h2>
</div>
<div class="row center">
<div class="row center p1 display-name-wrapper">
<div class="text-center">
<span class="display-name badge"></span>
<span class="display-name badge badge-gradient"></span>
<span data-i18n-key="dialogs.has-sent" data-i18n-attrs="text"></span>
</div>
</div>
<div class="row center">
<div class="row center p1">
<div class="column fw">
<div id="text" class="fw"></div>
<div id="text" class="textarea"></div>
</div>
</div>
<div class="row-reverse center button-row">
<button id="copy" class="button" title="CTRL/⌘ + C" data-i18n-key="dialogs.copy" data-i18n-attrs="text"></button>
<button id="close" class="button" title="ESCAPE" data-i18n-key="dialogs.close" data-i18n-attrs="text"></button>
<button id="copy" class="btn btn-rounded btn-grey" title="CTRL/⌘ + C" data-i18n-key="dialogs.copy" data-i18n-attrs="text"></button>
<button id="close" class="btn btn-rounded btn-grey" title="ESCAPE" data-i18n-key="dialogs.close" data-i18n-attrs="text"></button>
</div>
</x-paper>
</x-background>
@ -458,10 +464,10 @@
<x-dialog id="base64-paste-dialog">
<x-background class="full center">
<x-paper shadow="2">
<button class="button center" id="base64-paste-btn" title="Paste"></button>
<button class="btn btn-rounded btn-grey center" id="base64-paste-btn" title="Paste"></button>
<div class="textarea" placeholder="Paste here to send files" title="CMD/⌘ + V" contenteditable hidden></div>
<div class="row-reverse center button-row">
<button class="button" data-i18n-key="dialogs.close" data-i18n-attrs="text" close></button>
<button class="btn btn-rounded btn-grey" data-i18n-key="dialogs.close" data-i18n-attrs="text" close></button>
</div>
</x-paper>
</x-background>