Browse Source

UI tweaks

pull/133/head
Jose Olarte III 3 weeks ago
parent
commit
d14635c44d
  1. 67
      src/views/AccountViewView.vue
  2. 20
      src/views/ContactQRScanShowView.vue

67
src/views/AccountViewView.vue

@ -94,25 +94,40 @@
</span>
<div v-else class="text-center">
<template v-if="isRegistered">
<div class @click="openImageDialog()">
<div class="inline-block text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md" @click="openImageDialog()">
<font-awesome
icon="image-portrait"
class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-2 rounded-l"
icon="user"
class="fa-fw"
/>
<font-awesome
icon="camera"
class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-2 rounded-r"
class="fa-fw"
/>
</div>
</template>
<template v-else>
<div class="text-center text-lg text-slate-500 py-8">Register to Upload a Photo</div>
<div
id="noticeBeforeUpload"
class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3"
role="alert"
aria-live="polite"
>
<p class="mb-2">
Before you can upload a photo, a friend needs to register you.
</p>
<router-link
:to="{ name: 'contact-qr' }"
class="inline-block text-md uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
>
Share Your Info
</router-link>
</div>
</template>
</div>
<ImageMethodDialog ref="imageMethodDialog" :isRegistered="isRegistered" />
</div>
<div class="mt-6">
<div class="flex justify-center text-center">
<div class="mt-4">
<div class="flex justify-center text-center text-sm leading-tight mb-1">
People {{ profileImageUrl ? "without your image" : "" }} see this
<br />
(if you've let them see your activity):
@ -146,13 +161,13 @@
</div>
</div>
<div class="text-slate-500 text-sm font-bold">ID</div>
<div
class="text-sm text-slate-500 flex justify-start items-center mb-1"
class="text-sm text-slate-500 flex justify-start items-center mt-2 mb-1"
data-testId="didWrapper"
role="region"
aria-label="Your Identifier"
>
<div class="font-bold">ID:&nbsp;</div>
<code class="truncate" aria-label="Your DID">{{ activeDid }}</code>
<button
class="ml-2"
@ -185,8 +200,8 @@
role="alert"
aria-live="polite"
>
<p class="mb-4">
<b>Note:</b> Before you can publicly announce a new project or time
<p class="mb-2">
Before you can publicly announce a new project or time
commitment, a friend needs to register you.
</p>
<router-link
@ -208,7 +223,7 @@
<div>
Reminder Notification
<button
class="text-slate-400 fa-fw ml-2 cursor-pointer"
class="text-slate-400 fa-fw cursor-pointer"
@click.stop="showReminderNotificationInfo"
aria-label="Learn more about reminder notifications"
>
@ -243,7 +258,7 @@
New Activity Notification
<font-awesome
icon="question-circle"
class="text-slate-400 fa-fw ml-2 cursor-pointer"
class="text-slate-400 fa-fw cursor-pointer"
@click.stop="showNewActivityNotificationInfo"
/>
</div>
@ -269,21 +284,23 @@
<div v-if="notifyingNewActivityTime" class="w-full text-right">
{{ notifyingNewActivityTime.replace(" ", "&nbsp;") }}
</div>
<router-link class="pl-4 text-sm text-blue-500" to="/help-notifications">
Troubleshoot your notifications.
</router-link>
<div class="mt-2 text-center">
<router-link class="text-sm text-blue-500" to="/help-notifications">
Troubleshoot your notifications&hellip;
</router-link>
</div>
</section>
<PushNotificationPermission ref="pushNotificationPermission" />
<section
id="sectionSearchLocation"
class="flex justify-between bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8"
class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8"
aria-labelledby="searchLocationHeading"
>
<h2 id="searchLocationHeading" class="mb-2 font-bold">Location for Searches</h2>
<router-link
:to="{ name: 'search-area' }"
class="text-m bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md mb-2"
class="block w-full text-center bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
>
{{ isSearchAreasSet ? "Change" : "Set" }} Search Area
</router-link>
@ -295,10 +312,10 @@
class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8"
aria-labelledby="userProfileHeading"
>
<h2 id="userProfileHeading" class="flex items-center mb-2">
<span class="font-bold">Public Profile</span>
<h2 id="userProfileHeading" class="mb-2 font-bold">
Public Profile
<button
class="text-slate-400 fa-fw ml-2 cursor-pointer"
class="text-slate-400 fa-fw cursor-pointer"
@click="showProfileInfo"
aria-label="Learn more about public profile"
>
@ -353,9 +370,9 @@
</l-map>
</div>
<div v-if="!loadingProfile && !savingProfile">
<div class="flex justify-between items-center">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 mt-4">
<button
class="mt-2 px-4 py-2 bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white rounded-md"
class="px-4 py-2 bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white rounded-md"
:disabled="loadingProfile || savingProfile"
:class="{
'opacity-50 cursor-not-allowed': loadingProfile || savingProfile,
@ -365,7 +382,7 @@
Save Profile
</button>
<button
class="mt-2 px-4 py-2 bg-gradient-to-b from-red-400 to-red-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white rounded-md"
class="px-4 py-2 bg-gradient-to-b from-red-400 to-red-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white rounded-md"
:disabled="loadingProfile || savingProfile"
:class="{
'opacity-50 cursor-not-allowed':
@ -436,7 +453,7 @@
</p>
</div>
<button
class="block float-right w-fit text-center text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md mt-2"
class="block w-full text-center text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md mt-4"
@click="checkLimits()"
>
Recheck Limits

20
src/views/ContactQRScanShowView.vue

@ -23,20 +23,20 @@
</h1>
</div>
<p
<div
v-if="!givenName"
class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 my-4"
class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3 my-4"
>
<span class="text-red">Beware!</span>
You aren't sharing your name, so quickly
<br />
<span
class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 rounded-md"
<p class="mb-2">
<b>Note:</b> your identity currently does <b>not</b> include a name.
</p>
<button
class="inline-block text-md uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
@click="openUserNameDialog"
>
click here to set it for them.
</span>
</p>
Set Your Name
</button>
</div>
<UserNameDialog ref="userNameDialog" />

Loading…
Cancel
Save