From ca5d6ff404da4c63e673138f9f45f92f488e9eba Mon Sep 17 00:00:00 2001
From: lxgr-linux <lxgr@protonmail.com>
Date: Sun, 14 Jan 2024 22:25:16 +0100
Subject: [PATCH] Added profilepic component and made userview more mobild
 friendly

---
 package-lock.json                             |  6 ++--
 .../elements/CCButton/RouterCCButton.vue      |  2 +-
 src/components/elements/LoginComponent.vue    |  6 ++--
 .../elements/ProfilePicComponent.vue          | 26 ++++++++++++++++
 src/views/UserView/UserView.vue               | 30 ++++++++++++++-----
 5 files changed, 56 insertions(+), 14 deletions(-)
 create mode 100644 src/components/elements/ProfilePicComponent.vue

diff --git a/package-lock.json b/package-lock.json
index 33b539af..0737f55b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2227,9 +2227,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001481",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001481.tgz",
-      "integrity": "sha512-KCqHwRnaa1InZBtqXzP98LPg0ajCVujMKjqKDhZEthIpAsJl/YEIa3YvXjGXPVqzZVguccuu7ga9KOE1J9rKPQ==",
+      "version": "1.0.30001576",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001576.tgz",
+      "integrity": "sha512-ff5BdakGe2P3SQsMsiqmt1Lc8221NR1VzHj5jXN5vBny9A6fpze94HiVV/n7XRosOlsShJcvMv5mdnpjOGCEgg==",
       "dev": true,
       "funding": [
         {
diff --git a/src/components/elements/CCButton/RouterCCButton.vue b/src/components/elements/CCButton/RouterCCButton.vue
index ee162226..1ea1c9dc 100644
--- a/src/components/elements/CCButton/RouterCCButton.vue
+++ b/src/components/elements/CCButton/RouterCCButton.vue
@@ -8,6 +8,7 @@
 
 <script setup lang="ts">
 import { ButtonType } from "@/components/elements/CCButton/ButtonType";
+import BaseCCButton from "@/components/elements/CCButton/BaseCCButton.vue";
 
 const props = withDefaults(
   defineProps<{
@@ -20,5 +21,4 @@ const props = withDefaults(
   }
 );
 
-import BaseCCButton from "@/components/elements/CCButton/BaseCCButton.vue";
 </script>
diff --git a/src/components/elements/LoginComponent.vue b/src/components/elements/LoginComponent.vue
index abc9ddba..656e7e8d 100644
--- a/src/components/elements/LoginComponent.vue
+++ b/src/components/elements/LoginComponent.vue
@@ -3,8 +3,9 @@
     class="text-white font-bold uppercase flex hover:underline my-auto"
     @click="tryLogin"
   >
-    <img
-      class="h-8 pr-4"
+    <ProfilePicComponent
+      class="h-8 w-8 mr-4"
+      size="8"
       :src="loggedIn ? loggedInProfilePic : Profile"
       alt="PP"
     />
@@ -20,6 +21,7 @@ import { useProfilePic } from "@/def-composables/useProfilePic";
 import { useLoggedIn } from "@/def-composables/useLoggedIn";
 import { useLogin } from "@/def-composables/useLogin";
 import { onMounted } from "vue";
+import ProfilePicComponent from "@/components/elements/ProfilePicComponent.vue";
 
 const { loggedInProfilePic } = useProfilePic();
 const { loggedIn } = useLoggedIn();
diff --git a/src/components/elements/ProfilePicComponent.vue b/src/components/elements/ProfilePicComponent.vue
new file mode 100644
index 00000000..6f23b366
--- /dev/null
+++ b/src/components/elements/ProfilePicComponent.vue
@@ -0,0 +1,26 @@
+<template>
+  <div
+    :class="[
+      'overflow-hidden',
+      'rounded-full',
+      'w-' + props.size,
+      'h-' + props.size,
+    ]"
+  >
+    <img :src="src" class="-pt-[10%] w-[100%] object-contain" :alt="alt" />
+  </div>
+</template>
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    src: any;
+    size: number;
+    alt: string;
+  }>(),
+  {
+    src: {},
+    size: 64,
+    alt: "",
+  }
+);
+</script>
diff --git a/src/views/UserView/UserView.vue b/src/views/UserView/UserView.vue
index 3ef29053..a82dc717 100644
--- a/src/views/UserView/UserView.vue
+++ b/src/views/UserView/UserView.vue
@@ -1,12 +1,22 @@
 <template>
   <div class="flex bg-black text-white justify-center p-16">
-    <div class="text-center">
-      <div class="p-24">
-        <img :src="state.img" class="w-64" alt="Profile pic" />
+    <div class="text-center pr-24">
+      <div class="py-24">
+        <ProfilePicComponent :src="state.img" size="64" class="mx-auto h-64 w-64" alt="Profile pic" />
       </div>
       <UserViewHeadingContainer>
         <template v-slot:heading>Council status</template>
-        <template v-slot:body>{{ user.CouncilStatus }}</template>
+        <template v-slot:body>
+          <p>{{ user.CouncilStatus }}</p>
+          <BaseCCButton v-if="state.userIsUser" @click="state.user.CouncilStatus == 'unavailable' ? register() : deRegister()">
+            {{
+              state.user.CouncilStatus == "unavailable"
+                ? "Register for"
+                : "Deregister from"
+            }}
+            council
+          </BaseCCButton>
+        </template>
       </UserViewHeadingContainer>
       <div>
         <UserViewHeadingContainer v-for="coin in normalizeCoins(coins)">
@@ -18,14 +28,16 @@
       </div>
     </div>
     <div class="text-left">
-      <h1 class="text-4xl text-white font-bold pb-12">
+      <h1 class="text-5xl text-white font-bold pb-12">
         {{ state.userIsUser ? "My Account" : state.user.alias }}
       </h1>
-      <div class="grid grid-cols-3 gap-16">
+      <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-16">
         <UserViewHeadingContainer>
           <template v-slot:heading>Wallet</template>
           <template v-slot:body>
-            <b>Address</b> <br />{{ state.addr }}
+            <b>Address</b> <br />{{ state.addr }}<br />
+            <br />
+            <b>Alias</b> <br />{{ state.user.alias }}
           </template>
         </UserViewHeadingContainer>
         <UserViewHeadingContainer>
@@ -56,7 +68,7 @@
         <UserViewHeadingContainer>
           <template v-slot:heading>Recent Activity</template>
           <template v-slot:body>
-            <RouterCCButton :to="{name: 'Vote'}">Go to Voting</RouterCCButton>
+            <RouterCCButton :to="{ name: 'Vote' }">Go to Voting</RouterCCButton>
           </template>
         </UserViewHeadingContainer>
       </div>
@@ -79,6 +91,8 @@ import { useUser } from "@/def-composables/useUser";
 import { User } from "decentralcardgame-cardchain-client-ts/DecentralCardGame.cardchain.cardchain/types/cardchain/cardchain/user";
 import UserViewHeadingContainer from "@/views/UserView/UserViewHeadingContainer.vue";
 import RouterCCButton from "@/components/elements/CCButton/RouterCCButton.vue";
+import BaseCCButton from "@/components/elements/CCButton/BaseCCButton.vue";
+import ProfilePicComponent from "@/components/elements/ProfilePicComponent.vue";
 
 const { queryQUser, queryAllBalances } = useQuery();
 const { registerForCouncil, rewokeCouncilRegistration } = useTx();