diff --git a/src/App.scss b/src/App.scss
index b0888ac7..0945c76b 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -32,9 +32,10 @@ a {
button{
border: none;
border-radius: 5px;
+ cursor: pointer;
&:hover {
- background-color: white;
+ opacity: 0.8;
}
}
@@ -102,11 +103,11 @@ main-router {
flex-direction: column;
margin: 0.5em;
- border-radius: 0.5em;
+ border-radius: 10px;
}
.panel-heading {
- border-radius: 0.5em 0.5em 0 0;
+ border-radius: 10px 10px 0 0;
background-size: cover;
padding: 0.6em 0;
text-align: center;
@@ -115,7 +116,7 @@ main-router {
}
.panel-footer {
- border-radius: 0 0 0.5em 0.5em;
+ border-radius: 0 0 10px 10px;
}
.panel-body > p {
@@ -128,7 +129,7 @@ main-router {
#content {
margin: auto;
max-width: 980px;
- border-radius: 1em;
+ border-radius: 10px;
padding-bottom: 1em;
background-color: rgba(0,0,0,0.1);
}
@@ -174,7 +175,7 @@ status-text-container {
margin-top: 0.2em;
float: right;
margin-right: 0.3em;
- border-radius: 20%;
+ border-radius: 5px;
}
}
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 45cc1929..ad60acf9 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -34,9 +34,10 @@
.attachments {
display: flex;
flex-wrap: wrap;
+ margin-right: -0.8em;
.attachment {
flex: 1 0 30%;
- margin: 0.5em 0.8em 0.6em 0.1em;
+ margin: 0.5em 0.8em 0.6em 0.0em;
align-self: flex-start;
&.html {
@@ -49,14 +50,14 @@
margin: 10px;
padding: 5px;
background: rgba(230,230,230,0.6);
- border-radius: 0.5em;
+ border-radius: 5px;
font-weight: bold;
}
video {
height: 100%;
border: 1px solid;
- border-radius: 0.5em;
+ border-radius: 5px;
width: 100%;
}
@@ -69,7 +70,7 @@
height: 100%;
flex: 1;
border: 1px solid;
- border-radius: 0.5em;
+ border-radius: 5px;
}
@@ -89,7 +90,7 @@
flex: 1;
img {
border: 0px;
- border-radius: 0;
+ border-radius: 5px;
height: 100%;
object-fit: cover;
}
@@ -113,7 +114,7 @@
width: 100%;
border-style: solid;
border-width: 1px;
- border-radius: 0.5em;
+ border-radius: 5px;
width: 100%;
height: 100%; /* If this isn't here, chrome will stretch the images */
}
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index c0169a08..c0ea4313 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -1,11 +1,11 @@
<template>
<div class="login panel panel-default base00-background">
<!-- Default panel contents -->
- <div class="panel-heading base01-background base04">
+ <div class="panel-heading base01-background">
Log in
</div>
<div class="panel-body">
- <form v-on:submit.prevent='submit(user)'>
+ <form v-on:submit.prevent='submit(user)' class='login-form'>
<div class='form-group'>
<label for='username'>Username</label>
<input :disabled="loggingIn" v-model='user.username' class='form-control' id='username' placeholder='e.g. lain'>
@@ -15,7 +15,7 @@
<input :disabled="loggingIn" v-model='user.password' class='form-control' id='password' type='password'>
</div>
<div class='form-group'>
- <button :disabled="loggingIn" type='submit' class='btn btn-default'>Submit</button>
+ <button :disabled="loggingIn" type='submit' class='btn btn-default base05 base01-background'>Submit</button>
</div>
</form>
</div>
@@ -23,3 +23,22 @@
</template>
<script src="./login_form.js" ></script>
+
+<style lang="scss">
+
+.login-form {
+ input {
+ border-width: 1px;
+ border-style: solid;
+ border-color: silver;
+ border-radius: 5px;
+ padding: 0.1em 0.2em 0.2em 0.2em;
+ }
+
+ .btn {
+ margin-top: 1.0em;
+ min-height: 28px;
+ }
+}
+
+</style>
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 517afeaa..5da6d495 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -1,45 +1,65 @@
@import '../../_variables.scss';
-.notification {
- padding: 0.4em 0 0 0.7em;
- display: flex;
- border-bottom: 1px solid silver;
- .text {
- min-width: 0px;
- word-wrap: break-word;
- line-height:18px;
+.notifications {
- .icon-retweet {
- color: $green;
- }
-
- .icon-reply {
- color: $blue;
- }
-
- h1 {
- margin: 0 0 0.3em;
- padding: 0;
- font-size: 1em;
- line-height:20px;
- }
-
- padding: 0.3em 0.8em 0.5em;
- p {
- margin: 0;
- margin-top: 0;
- margin-bottom: 0.3em;
+ .panel-heading {
+ // force the text to stay centered, while keeping
+ // the button in the right side of the panel heading
+ position: relative;
+ button {
+ position: absolute;
+ padding: 0.1em 0.3em 0.25em 0.3em;
+ right: 0.6em;
}
}
- .avatar {
- padding-top: 0.3em;
- width: 32px;
- height: 32px;
- border-radius: 50%;
+ .unseen {
+ border-left: 4px solid rgba(255, 48, 16, 0.65);
}
- &:last-child {
- border: none
+ .notification {
+ padding: 0.4em 0 0 0.7em;
+ display: flex;
+ border-bottom: 1px solid silver;
+
+
+ .text {
+ min-width: 0px;
+ word-wrap: break-word;
+ line-height:18px;
+
+ .icon-retweet {
+ color: $green;
+ }
+
+ .icon-reply {
+ color: $blue;
+ }
+
+ h1 {
+ margin: 0 0 0.3em;
+ padding: 0;
+ font-size: 1em;
+ line-height:20px;
+ }
+
+ padding: 0.3em 0.8em 0.5em;
+ p {
+ margin: 0;
+ margin-top: 0;
+ margin-bottom: 0.3em;
+ }
+ }
+
+ .avatar {
+ padding-top: 0.3em;
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ }
+
+ &:last-child {
+ border: none
+ }
}
}
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 785cc019..41c274aa 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -1,9 +1,12 @@
<template>
<div class="notifications">
<div class="panel panel-default base00-background">
- <div class="panel-heading base01-background base04">Notifications ({{unseenCount}}) <button @click.prevent="markAsSeen">Read!</button></div>
+ <div class="panel-heading base01-background base04">
+ Notifications ({{unseenCount}})
+ <button @click.prevent="markAsSeen" class="base05 base02-background">Read!</button>
+ </div>
<div class="panel-body">
- <div v-for="notification in visibleNotifications" class="notification" :class='{"base01-background": notification.seen}'>
+ <div v-for="notification in visibleNotifications" class="notification" :class='{"unseen": !notification.seen}'>
<a :href="notification.action.user.statusnet_profile_url">
<img class='avatar' :src="notification.action.user.profile_image_url_original">
</a>
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index d345ec13..07280a41 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -15,7 +15,7 @@
</div>
<div class='form-bottom'>
<media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit" :drop-files="dropFiles"></media-upload>
- <button :disabled="submitDisabled" type="submit" class="btn btn-default">Submit</button>
+ <button :disabled="submitDisabled" type="submit" class="btn btn-default base05 base01-background">Submit</button>
</div>
</form>
</div>
@@ -58,7 +58,7 @@
margin: 10px;
padding: 5px;
background: rgba(230,230,230,0.6);
- border-radius: 0.5em;
+ border-radius: 5px;
font-weight: bold;
}
}
@@ -77,10 +77,12 @@
}
form textarea {
- border: none;
- border-radius: 2px;
+ border: solid;
+ border-width: 1px;
+ border-color: silver;
+ border-radius: 5px;
line-height:16px;
- padding: 0.5em;
+ padding: 5px;
resize: vertical;
}
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 712f1a7b..585bf621 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -157,7 +157,8 @@
.usercard {
border-style: solid;
border-width: 1px;
- border-radius: 0.5em;
+ border-radius: 10px;
margin-bottom: 1em;
+ margin-top: 0.2em;
}
</style>
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 10064d5f..b786ab8d 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -15,22 +15,22 @@
<div class="follow" v-if="loggedIn">
<span v-if="user.following">
<!--Following them!-->
- <button @click="unfollowUser" class="base06 base01-background">
- Unfollow
+ <button @click="unfollowUser" class="base04 base00-background pressed">
+ Following!
</button>
</span>
<span v-if="!user.following">
- <button @click="followUser" class="base01 base04-background">
+ <button @click="followUser" class="base05 base02-background">
Follow
</button>
</span>
</div>
<div class='mute' v-if='isOtherUser'>
<span v-if='user.muted'>
- <button @click="toggleMute" class="base04 base01-background base06-border">Unmute</button>
+ <button @click="toggleMute" class="base04 base00-background pressed">Muted</button>
</span>
<span v-if='!user.muted'>
- <button @click="toggleMute" class="base01 base04-background base01-border">Mute</button>
+ <button @click="toggleMute" class="base05 base02-background">Mute</button>
</span>
</div>
</div>
@@ -102,7 +102,7 @@
.profile-panel-background {
background-color: #121517;
background-size: cover;
- border-radius: 0.5em 0.5em 0 0;
+ border-radius: 10px;
}
.profile-panel-body {
@@ -127,7 +127,7 @@
img {
border: 2px solid;
- border-radius: 0.5em;
+ border-radius: 5px;
flex: 1 0 100%;
max-width: 48px;
max-height: 48px;
@@ -183,9 +183,14 @@
}
button {
+ border: solid;
+ border-width: 1px;
width: 92%;
height: 100%;
- border: 1px solid;
+ }
+ .pressed {
+ border: solid;
+ border-width: 1px;
}
}
}