Checkmark

planetary-social · Oct 23, 2023 · 03627ce · 03627ce
1 parent 06862ba
commit 03627ce
Show file tree

Hide file tree

Showing 12 changed files with 52 additions and 187 deletions.
diff --git a/frontend/nos-crossposting-service-frontend/src/components/CurrentUser.vue b/frontend/nos-crossposting-service-frontend/src/components/CurrentUser.vue
@@ -1,11 +1,14 @@
 <template>
   <div class="current-user">
-    <img class="image" :src="user?.twitterProfileImageURL">
-    <div class="name">{{ user.twitterName }}</div>
-    <div class="username">@{{ user.twitterUsername }}</div>
-    <a class="logout-button">
-      <img src="../assets/logout_on_dark.svg">
-    </a>
+    <div class="user-info">
+      <img class="image" :src="user?.twitterProfileImageURL">
+      <div class="name">{{ user.twitterName }}</div>
+      <div class="username">@{{ user.twitterUsername }}</div>
+      <a class="logout-button">
+        <img src="../assets/logout_on_dark.svg">
+      </a>
+    </div>
+    <img class="checkmark" src="../assets/checkmark.svg">
   </div>
 </template>
 
@@ -25,46 +28,60 @@ export default class CurrentUser extends Vue {
 
 <style scoped lang="scss">
 .current-user {
-  margin: 1.5em 0;
-  border-radius: 10px;
-  width: 500px;
   display: grid;
-  grid-template-columns: auto 1fr auto;
+  grid-template-columns: 500px 50px;
   grid-template-rows: auto;
   grid-template-areas:
+    "user-info checkmark";
+  align-items: center;
+  margin: 1.5em 0;
+
+  .user-info {
+    grid-area: user-info;
+    border-radius: 10px;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto;
+    grid-template-areas:
     "image name logout-button"
     "image username logout-button";
-  align-items: center;
+    align-items: center;
 
-  border: 3px solid #9379BF;
-  gap: 20px;
-  padding: 20px;
+    border: 3px solid #9379BF;
+    gap: 20px;
+    padding: 20px;
 
-  .image {
-    grid-area: image;
-    border-radius: 75px;
-    height: 75px;
-  }
+    .image {
+      grid-area: image;
+      border-radius: 75px;
+      height: 75px;
+    }
 
-  .username, .name {
-    font-size: 28px;
-    font-style: normal;
-  }
+    .username, .name {
+      font-size: 28px;
+      font-style: normal;
+    }
 
-  .username {
-    grid-area: username;
-    font-weight: 500;
-    color: #9379BF;
-  }
+    .username {
+      grid-area: username;
+      font-weight: 500;
+      color: #9379BF;
+    }
+
+    .name {
+      grid-area: name;
+      font-weight: 700;
+      color: #fff;
+    }
 
-  .name {
-    grid-area: name;
-    font-weight: 700;
-    color: #fff;
+    .logout-button {
+      grid-area: logout-button;
+    }
   }
 
-  .logout-button {
-    grid-area: logout-button;
+  .checkmark {
+    grid-area: checkmark;
+    padding: 0 15px;
   }
 }
 </style>
diff --git a/service/ports/http/frontend/css/app.089a72a3.css b/service/ports/http/frontend/css/app.089a72a3.css
diff --git a/service/ports/http/frontend/css/app.68e0e22b.css b/service/ports/http/frontend/css/app.68e0e22b.css
diff --git a/service/ports/http/frontend/img/background.4c146daa.svg b/service/ports/http/frontend/img/background.4c146daa.svg
diff --git a/service/ports/http/frontend/img/login_with_x.b3cda31f.svg b/service/ports/http/frontend/img/login_with_x.b3cda31f.svg