gorb/frontend
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

feat: update button component

Browse source 
co-authored-by: JustTemmie <git@beaver.mom>
This commit is contained in:
Radical 2025-06-23 19:59:52 +02:00
parent 5560680635
commit 714f75ce12
7 changed files with 82 additions and 126 deletions
Download patch file Download diff file Expand all files Collapse all files

44
components/Button.vue Normal file
View file

@ -0,0 +1,44 @@
<template>
<div @click="props.callback()" class="button" :class="props.variant + '-button'">
{{ props.text }}
</div>
</template>
<script lang="ts" setup>
const props = defineProps<{
text: string,
callback: CallableFunction,
variant?: "normal" | "scary" | "neutral",
}>();
</script>
<style scoped>
.button {
cursor: pointer;
background-color: #b35719;
color: #ffffff;
padding: 8px 18px;
font-size: 18px;
transition: background-color 0.2s;
border-radius: 12px;
text-decoration: none;
display: inline-block;
}
.scary-button {
background-color: red;
}
.neutral-button {
background-color: grey;
}
#button:hover {
background-color: #934410;
}
</style>

43
components/Buttons/Button.vue
View file

@ -1,43 +0,0 @@
<!--if you want a button with a different colour, you have to inline CSS or do something similar
<Button text="Reset Password" :callback=reset_password style="color: purple; background-color: blue"></Button>
if you have multiple buttons with the same style, feel free to make another component
this is because i couldn't find a way of dynamically taking in colours without using javascript
to update the colour during runtime, i REFUSE to do this due to performance -->
<template>
<div id="button" @click="props.callback()">
{{ props.text }}
</div>
</template>
<script lang="ts" setup>
const props = defineProps<{
text: string,
callback: CallableFunction,
}>();
</script>
<style scoped>
#button {
cursor: pointer;
background-color: #b35719;
color: #ffffff;
padding: 8px 18px;
font-size: 18px;
transition: background-color 0.2s;
border-radius: 12px;
text-decoration: none;
display: inline-block;
}
#button:hover {
background-color: #934410;
}
</style>

43
components/Buttons/ButtonScary.vue
View file

@ -1,43 +0,0 @@
<!--if you want a button with a different colour, you have to inline CSS or do something similar
<Button text="Reset Password" :callback=reset_password style="color: purple; background-color: blue"></Button>
if you have multiple buttons with the same style, feel free to make another component
this is because i couldn't find a way of dynamically taking in colours without using javascript
to update the colour during runtime, i REFUSE to do this due to performance -->
<template>
<div id="button" @click="props.callback()">
{{ props.text }}
</div>
</template>
<script lang="ts" setup>
const props = defineProps<{
text: string,
callback: CallableFunction,
}>();
</script>
<style scoped>
#button {
cursor: pointer;
background-color: #f02f2f;
color: #ffffff;
padding: 8px 18px;
font-size: 18px;
transition: background-color 0.2s;
border-radius: 12px;
text-decoration: none;
display: inline-block;
}
#button:hover {
background-color: #ff0000;
}
</style>

13
components/Settings/UserSettings/Account.vue
View file

@ -6,7 +6,7 @@
<div class="user-data-fields">
<p class="subtitle">AVATAR</p>
<Button text="Change Avatar" :callback="changeAvatar" style="margin-right: 0.8dvw;"></Button>
<Button text="Remove Avatar" :callback="removeAvatar" style="background-color: grey;"></Button>
<Button text="Remove Avatar" :callback="removeAvatar" variant="neutral"></Button>
<label for="profile-display-name-input" class="subtitle">DISPLAY NAME</label>
<input id="profile-display-name-input" class="profile-data-input" type="text" v-model="user.display_name" placeholder="Enter display name" />
@ -34,8 +34,7 @@
</template>
<script lang="ts" setup>
import Button from '~/components/Buttons/Button.vue';
import ButtonScary from '~/components/Buttons/ButtonScary.vue';
import Button from '~/components/Button.vue';
import type { UserResponse } from '~/types/interfaces';
const { fetchUser } = useAuth();
@ -99,11 +98,11 @@ const changeAvatar = async () => {
newPfpFile = file
const reader = new FileReader();
reader.onload = (e) => {
if (e.target?.result && typeof e.target.result === 'string') {
user.avatar = e.target.result;
reader.addEventListener("onload", (e: Event) => {
if (reader.result && typeof reader.result === 'string') {
user.avatar = reader.result;
}
};
});
reader.readAsDataURL(file);
}
})

2
components/Settings/UserSettings/Privacy.vue
View file

@ -5,7 +5,7 @@
</template>
<script lang="ts" setup>
import Button from '~/components/Buttons/Button.vue';
import Button from '~/components/Button.vue';
</script>
<style scoped>

2
components/UserPopup.vue
View file

@ -10,7 +10,7 @@
{{ props.user.username }}
<span v-if="props.user.pronouns"> - {{ props.user.pronouns }}</span>
</p>
<div id="about-me">
<div id="about-me" v-if="props.user.about">
{{ props.user.about }}
</div>
</div>